首頁 > 開發者 > JavaScript
大家也需對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應用。如果有好的模式相信也可以變現。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
