[javavscript] 手把手教你用javascript开发MAC Dashboard应用

  大家也需对windows 8上可以用javascript开发Metro 界面的netive app有所了解。其实osx上也提供了类似的功能, OS X v10.4 Tiger发布时提供了一个Dashboard应用程序,用户可以自定义添加widget应用小程序。用户可以通过f4热键,方便的启用Dashboard。不得不说一下,Dashboard也是大名鼎鼎的canvas技术的发源地

  运行在Dashboard中的小程序,完全使用HTML,DOM,CSS,javaScript技术,因此可以说这些对前端工程师完全没有难度。APPLE也提供了开发IDE,Dashcode。

  

Part1 IDE简介

1.访问https://developer.apple.com/ 如果有apple ID登录 后访问https://developer.apple.com/downloads/index.action

可以看到有很多开发者工具,搜索Dashcode下载。新版本的Dashcode只能运行于Lion系统上,这点需要注意,下载安装之。

Dashcode秉承了Apple软件的风格,简洁易用。

2.创建一个项目选取Dashboard自定义。默认会生成以下默认文件

左侧面板

 

第一栏:为本widget的名称,front是在Dashbord中该widget的默认面板,back则对应点击front面板右下角的i图标翻转后的面板。两个面板可以不同样大小。

第二栏:

  widget属性:可以配置weigth的元信息,数据和访问网络等能力。

  默认图像:  对应背景图片,可以使用外部工具编辑,或者导入图片。

  widget图标:图标则对应在Dashbord widget管理中的图标。

  运行与共享: 可以设置对系统的要求等。

第三栏:为软件生成的文件和SDK文件。开发者可以自己创建css,js文件。main.html则类似web站点中的index.html

 

3.工具栏中的按钮

运行:可以及时调试widget

显示:可以控制显示项目。

 

检查器:选中试图中的元素后可以用这个面板配置元素的id class css属性和事件函数(onclick)不过建议开发者用dom绑定事件。

资源库:提供一些UI空间,和js快捷代码。

工作区

上半部分为试图;下半部分为编辑区域不过会随选中文件变化。

 

 

part2

下面让我们看看如何开发一个Dashboard应用万年历。脚本代码使用前几天的帖子使用的代码

[javascript]简单 方便 易折腾的日历控件,纯javascript支持链式语法,核心代码只有5行

环境和我们开发web中的项目完全是一样的,没有任何学习成本。console API也提供了支持,alert的信息会在日志中显示。

1.创建一个自定义widget项目,别忘了实时保存否则后悔莫及。软件会生成一个扩展名为.dcproj为扩展名的文件。 删除软件生成的结构代码添加结构。

代码如下

<body onload="load();" apple-part="com.apple.Dashcode.part.StackLayout">
    <div id="front">
        <div class="apple-no-children" id="info" apple-part="com.apple.Dashcode.part.infobutton" apple-default-image-visibility="hidden"></div>
        <div id="cal"><h1></h1></div>
    </div>
    <div id="back">
        <img id="backImg" src="Parts/Images/back.png" alt="" apple-locked="true" apple-part="com.apple.Dashcode.part.backimage" apple-style=" image-radius: 12,12,12,12; image-border: 1; image-border-color: 0.1500,0.1500,0.1500; image-border-width: 3; shadow-include-shadow: 1; shadow-blur: 9.00; shadow-offset: -1.00,-6.00; shadow-color: 0.0000,0.0000,0.0000,0.3333;">
        <img src="Images/DevelopedWith.png" alt="Created with Dashcode" id="backDevelopedWith">
        <div id="done" class="apple-no-children" apple-part="com.apple.Dashcode.part.glassbutton"></div>
    </div>
</body>

2.修改样式表main.css,试试使用运行检查修改效果。值得一提的是,该软件会自动把使用的图片拷贝至项目中的Image文件夹中太贴心了。

样式表没有什么好说的。

3.添加行为代码。

使用DOM侦听器为元素绑定事件,啰嗦一下行为,结构,表现分离。

 

首先把开发好的Cal类拷贝进来,接下来开发逻辑代码。

a.默认main.js是在head标签中引入的,所以我们为domready注册事件,以便能用dom访问元素。

document.addEventListener('DOMContentLoaded',function(){
}.bind(document),false);

  

b.接下来声明变量,应该没有什么好说的,大家都能看的懂。

var d=new Date,Y=d.getFullYear(),h1=this.querySelector('h1'),p=this.querySelector('#cal'),i=12;

  

c.生成12个日历实例,添加到相应节点中。依然没啥好说的

  

        h1.innerHTML=Y+'年';
	for (; i--;) {
          //console.log(12-i);
          Cal(p, {Y:Y, M:12 - i, hasTitle:'false', hasFoot:'true'});
        }

 


 

使用运行发现运行良好,现在到了把项目部署到实际环境Dashbord中了,激动人心的时间到了。

文件》部署 或者 alt +command +s;第一次部署的话,软件会为你导出一个iCals.wdgt的文件。想全新安装widget一样,系统会提醒你安装,确定之后自动进入Dashboard,看看成果。

上面为系统提供的iCal,下面的为自己开发的iCals。

 

下面进入收尾工作,为iCals添加一个图标

看看图标在Dashboard管理界面中的表现。

怎么样,还不错吧。

 

apple developer网站还提供了更多的模板,大家可以下载导入使用。

 

总结:

  可以看的出,开发Dashbord widget完全没有任何成本,只是使用Dashcode把文件打包而已。只要自己愿意完全可以开发出很多很有意义的widget。使用Dashcode还可以开发safari插件,ios应用。如果有好的模式相信也可以变现。

 

posted @ 2012-07-07 19:15  小玉西瓜  阅读(3313)  评论(5编辑  收藏  举报