[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，看看成果。