精灵google
精灵百度
  
精灵OS开源下载
 开源下载精灵OS框架核心代码和二次开发文档
2008-11-5 9:52:22

 注意,一旦您点击下载本框架,即表示您愿意遵循本授权协议:点击查看精灵OS授权协议

 

点此下载:精灵OS开源框架v1.0

一、      目录结构

Icons文件夹用于保存桌面png图标。

Images文件夹用于保存桌面背景图片。

SpaceFrame文件夹里面是框架示例程序的入口。

TestJs文件夹用于保存精灵OS框架核心JS代码。

Themes文件夹用于保存OS窗口样式、状态栏样式、任务栏样式等主题文件。

原则上只要保持目录结构不便,运行示例代码便没有问题。

 

二、      示例入口页面源代码及分析

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head >

    <title>FairyNest</title>

    <link href="../Themes/vista/win.css" rel="stylesheet" type="text/css"/>

<link href="../Icons/vista/icon.css" rel="stylesheet" type="text/css"/>

<link href="../Themes/vista/taskbar.css" rel="stylesheet" type="text/css" />

    <link href="../Themes/vista/bleb.css" rel="stylesheet" type="text/css" />

         <link href="../Themes/vista/Status.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="../TestJs/BlueEffects.js"></script>

    <script type="text/javascript" src="../TestJs/BlueWinEffects.js"></script>

    <script type="text/javascript" src="../TestJs/BlueWindows.js"></script>

         <script type="text/javascript" src="../TestJs/BlueTaskBar.js"></script>

         <script type="text/javascript" src="../TestJs/BlueIcon.js"></script>

         <script type="text/javascript" src="../TestJs/BlueDeskIcon.js"></script>

 

    <script type="text/javascript">

    function Test()

     {

            BlueTaskBar.CreateTaskBar();

            BlueDesk.CreateDeskArea();

           

             var mytest={width:800,height:550,x:100,y:100,url:"http://www.baidu.com",status:"百度首页"};

        var Icon=new DeskIcon({Src:"home.png",Title:"百度搜索",WinOptions:mytest});

        BlueDesk.InsertIcon({icon:Icon});       

        mytest={width:800,height:550,x:100,y:100,url:"http://www.google.com",status:"google首页"};

        Icon=new DeskIcon({Src:"Document.png",Title:"google搜索",WinOptions:mytest});

        BlueDesk.InsertIcon({icon:Icon}); 

       

        mytest={width:800,height:550,x:100,y:100,url:"http://www.yodao.com/",status:"有道首页"};

        Icon=new DeskIcon({Src:"Clock.png",Title:"有道搜索",WinOptions:mytest});

        BlueDesk.InsertIcon({icon:Icon});         

         mytest={width:800,height:550,x:100,y:100,url:"http://www.yahoo.cn/?loop=true",status:"yahoo首页"};

        Icon=new DeskIcon({Src:"Bat.png",Title:"yahoo搜索",WinOptions:mytest});

        BlueDesk.InsertIcon({icon:Icon});        

        mytest={width:800,height:550,x:100,y:100,url:"http://www.zhongsou.com/index_jb.htm",status:"中搜首页"};

        Icon=new DeskIcon({Src:"pic.png",Title:"中国搜索",WinOptions:mytest});

        BlueDesk.InsertIcon({icon:Icon});

      

        BlueDesk.ShowIcons(); 

     } 

</script>  

</head>

<body onLoad="Test()" style=" margin:0px; background-image:url('../Images/cehIgS9QLaLLc2.jpg'); overflow:hidden;"> 

 

</body>

</html>

 

首先,在<head>里面引用了所有相关的样式文件和js文件,并有一个名为testjs函数,这个函数将在<body onLoad="Test()">这个地方调用,也即是页面载入完成以后将运行这个函数。

然后,test函数里面,一定要先运行这两行代码:

BlueTaskBar.CreateTaskBar();  //创建任务栏

BlueDesk.CreateDeskArea();   //创建桌面

 

并不一定要再test函数里面调用这两个方法,但一定要在你开始创建一个个桌面图标之前,先吧任务栏和桌面区域创建好。不然,桌面区域都没创建好,桌面图标创建咋哪里?

 

接着,就可以在桌面上创建桌面图标了:

var mytest={width:800,height:550,x:100,y:100,url:"http://www.baidu.com",status:"百度首页"};

var Icon=new DeskIcon({Src:"home.png",Title:"百度搜索",WinOptions:mytest});

BlueDesk.InsertIcon({icon:Icon});

 

其中,var Icon=new DeskIcon()是用来创建桌面图标的。

DeskIcon对象用户应该了解的参数主要有三个:

Src桌面图标的路径,应该为png各式的背景透明的图标,不然显示出来可能不太好看。

Title桌面图标的标题,将显示在桌面图标的下面,类似于windows桌面图标标题的现实方式。

WinOptions这个参数应该是一个json对象,也即是类似于这里var mytest={width:800,height:550,x:100,y:100,url:"http://www.baidu.com",status:"百度首页"}; 这样的一个对象。这个参数主要用来定义当双击桌面图标的时候,系统将打开一个什么样的窗口,具体的定义方式,请参看下面的WinOptions定义。

 

再接着就是WinOptions的定义了,也就是定义系统应该打开什么样的窗口。

用户应该关心的WinOptions对象属性如下:

idstring 字符串类型,定义窗口的唯一标识。如果用户不做定义的话,系统将自动生成。一般如果不是要把窗口的openmodal属性设置为true的话,不推荐手工设置id.同时,系统部允许id重复,若检测到重复时,系统将报错。

closabletrue|false ,定义该窗口是否显示关闭按钮,若定义为false,则窗口打开后将不能关闭。

minsizeabletrue|false ,定义窗口是否显示最小化按钮。若定义为false,则窗口打开后将不能最小化到任务栏。

maxsizeabletrue|false ,定义窗口是否显示最大化按钮。若定义为false,则窗口打开后将不能最大化到满屏。

resizeabletrue|false ,定义窗口是否可以拖动大小。若定义为false,则窗口打开后将不能通过鼠标拖动改变窗口大小。窗口拖动大小的触点在窗口右下角。

dragabletrue|false ,定义窗口是否可以拖动改变位置。若定义为false,则窗口打开后将固定在桌面上,不能通过拖动改变窗口的位置。拖动窗口的触点在窗口title区域。

openmodaltrue|false ,定义窗口是否只能打开一次。若定义为true,则窗口打开后再次点击对应的桌面图标时,系统将不会重新打开新的窗口,而是使当前窗口获得焦点。若定义为false,则重复点击对应的桌面图标时,系统将重复生成同样定义的窗口。同时,若要使openmodal属性为true生效,应配合使用id属性,此时应手工设置窗口id

showstatustrue|false ,定义窗口是否显示状态栏。

titlestring 字符串类型,定义窗口标题。

haseffecttrue|false ,定义窗口是否使用效果。若为true,则窗口在打开、关闭、最大化、最小化时都将显示动画效果。

openmaxtrue|false ,定义窗口打开时是否最大化。

opencentertrue|false ,定义窗口打开时是否桌面居中。

minwidth: int ,数字类型,定义窗口的最小宽度,即当窗口可以拖动大小时,最小不会小于此宽度。

minheight: int ,数字类型,定义窗口的最小高度,即当窗口可以拖动大小时,最小不会小于此高度。

width: int ,数字类型,定义窗口打开时的宽度。数值不能小于minwidth,否则无效。

height: int ,数字类型,定义窗口打开时的高度。数值不能小于minheight,否则无效。

X: int ,数字类型,定义窗口打开时的x坐标。

y: int ,数字类型,定义窗口打开时的y坐标。

 

最后,当创建好了桌面图标以后,这时还只是把一个个桌面图标对象装载在内存里面。需要再调用BlueDesk.ShowIcons()以在桌面上显示图标。

 

三、      题后话

原则上,用户只要较好的了解如上说明信息,就应该可以在示例代码的基础上做修改,二次开发出自己真正需要的应用程序。整个精灵OS核心代码做了良好的封装,用户若只是使用的话,了解到此应该已经可以了。限于时间精力,本人不会再对代码细节给出更详细文档,但欢迎志同道合的朋友联系、交流。同时还请用户注意阅读精灵OS开源授权协议,以免不必要损失,谢谢!