Droptiles - 炫酷的 Metro 風格的層疊式 Web 面板
介紹
Droptiles是一套Metro風格的類似Win8的Web2.0控制面板。它采用圖塊（tiles）建立用戶體驗。圖塊（tiles）是一些可以從外部資源中獲取數據的迷你應用。點擊圖塊（tile）就能夠啟動全部應用。應用可以是任意已存在的網站，抑或專門為面板式體驗而設計的自定義網站。Droptiles幾乎全部是用HTML, Javascript 和CSS創建的，因此它具有很高的平臺可移植性。示例工程采用ASP.NET創建，展示了一些服務端功能：如注冊、登錄以及從服務器獲取動態數據。你也可以很容易地把它轉變到PHP, Ruby, JSP或者其它平臺。Droptiles是我之前編寫的Dropthings的續篇，它是第一個開源的Web2.0控制面板。
訪問 Droptiles.com 獲得即時體驗！
從https://github.com/oazabir/Droptiles獲取代碼。
特征
-
Metro風格的UI。它是一個受metroui.org.ua啟發的CSS框架，用來創建Metro風格的網站。
</li> -
拖拽圖塊（tiles）定制個性化體驗。
</li> -
客戶端對象模型及數據綁定，簡化了MVVM模式的實現。
</li> -
服務端實現具有平臺無關性，采用PHP, JSP皆很輕松。
</li> -
實時圖塊（Live Tiles），圖塊（Tiles）即是迷你應用，可以從多種源中加載數據。
</li> </ul>它甚至有自己的應用商店！
如何使用Droptiles
-
企業Dashboard整合來自不同系統的數據，并提供為內聯網/互聯網應用一個快速啟動板。
</li> -
Web 2.0的門戶網站，提供tile形式的portlets。整合來自各種服務的數據，并作為不同服務的快速啟動板。
</li> -
觸摸啟用Kiosk前端。最適用于酒店，餐廳，銀行前臺自助服務。
</li> -
新聞的內容整合器和研究目的。
</li> </ul>
主要部分
Droptiles有三個主要部分：
-
Dashboard
</li> -
應用程序商店
</li> -
登錄，注冊，設置。
</li> </ul>Dashboard是展示tiles的主頁面。
App商店陳列了一系列可讓用戶添加到Dashboard上的應用程序。
登錄，注冊，設定區都是用ASP.NET設計的且它們還使用了ASP.NET的Membership provider。
Dashboard
Dashboard由各個部分構成。每部分包含一系列tiles。你看到到每個框都是一個Tile。tiles是迷你型應用程序。一個tile可以是以下幾種類型：
-
簡單的html頁面
</li> -
一個動態JavaScript迷你App
</li> -
動態網頁
</li> </ul>編寫一個瓦片組件
讓我們來看看 Flickr 的瓦片組件. 首先，所有的瓦片組件外觀都在 Tiles.js 文件中定義, 它包含了所有瓦片組件的元數據. 例如， Flickr 瓦片組件元數據定義如下:
flickr: function (uniqueId) { return { uniqueId: uniqueId, name: "flickr", iconSrc: "img/Flickr alt 1.png", label: "Flickr", size: "tile-double tile-double-vertical", color: "bg-color-darken", appUrl: "http://www.flickr.com/", cssSrc: ["tiles/flickr/flickr.css"], scriptSrc: ["tiles/flickr/flickr.js"], initFunc: "flickr_load" }; }icon 表示 javascript, css, html 被載入時將在瓦片組件上顯示的默認圖標. 瓦片組件水平和垂直的尺寸在size屬性中定義. 然后當點擊瓦片時，將會在全屏視圖中打開的URL定義在appUrl中. 附帶需要加載的 CSS, Javascripts 在cssSrc和 scriptSrc中定義. 最后 initFunc 告知了js在被加載時都會運行一次的函數.
元數據定義了瓦片組件如何在面板上顯示. 從Flickr加載數據的行為來自Flickr.js 文件, 定義如下:
function flickr_load(tile, div) { var url = "http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=json&tags=nature&jsoncallback=?"; $.getJSON(url, function (data) { var ctr = 0; $.each(data.items.reverse(), function (i, item) { if (item.tags.length < 150) { var sourceSquare = item.media.m; var sourceOrig = (item.media.m).replace("_m.jpg", ".jpg"); var htmlString = ''; htmlString += ''; htmlString += '' + item.title + '' + ''; tile.slides.push(htmlString); ctr = ctr + 1; } }); tile.counter(ctr); }); }這就是了.
瓦片組件可以是直接在瓦片盒里面直接加載的動態aspx頁面. 例如:
儀表面板的運行方式是:
-
首先獲取區域的列表，還有每個區域中瓦片組件的列表.
</li> -
按照Tiles.js文件中的定義創建瓦片盒子.
</li> -
對于每一個瓦片, 看看瓦片組件是否有任何外部的JS, CSS 和 html 文件需要加載. 如果有，就加載它們.
</li> -
執行在initFunc定義的函數. 向其傳入瓦片對象, 瓦片組件的div引用還有initParams .
</li> </ul>默認的Dashboard上的tile顯示
Dashboard上默認的tile的顯示方法同樣在Tiles.js文件中定義：
window.DefaultTiles = [ { name :"Section1", tiles: [ { id: "flickr1", name:"flickr" }, { id: "amazon1", name:"amazon" }, { id: "news1", name: "news" }, { id: "weather1", name: "weather" }, { id: "calendar1", name: "calendar" }, { id: "feature1", name: "feature" }, { id: "非死book1", name: "非死book" } ] }, { name: "Section2", tiles: [ { id: "wikipedia1", name: "wikipedia" }, { id: "email1", name: "email" }, { id: "maps1", name: "maps" }, { id: "angrybirds1", name: "angrybirds" }, { id: "cuttherope1", name: "cutTheRope" }, { id: "dynamicTile1", name: "dynamicTile" }, { id: "buy1", name: "buy" }] }, { name: "Section3", tiles: [ { id: "油Tube1", name: "油Tube" }, { id: "ie1", name: "ie" }, ] } ];Tile按照他們被定義的順序顯示。他們的名字不用和Tile metadata中定義的名字相一致。
tile的HTML標記
在一個tile上有不同的部分：
下面的html定義了這種tile設計：
<div class="metro-sections" data-bind="foreach: sections"> <div class="metro-section" data-bind="attr: {id : uniqueId}, foreach: sortedTiles"> <div data-bind="attr: { id: uniqueId, 'class': tileClasses }"> <!-- ko if: tileImage --> <div class="tile-image"> <img data-bind="attr: { src: tileImage }" src="img/Internet%20Explorer.png" /> </div> <!-- /ko --> <!-- ko if: iconSrc --> <!-- ko if: slides().length == 0 --> <div data-bind="attr: { 'class': iconClasses }"> <img data-bind="attr: { src: iconSrc }" src="img/Internet%20Explorer.png" /> </div> <!-- /ko --> <!-- /ko --> <div data-bind="foreach: slides"> <div class="tile-content-main"> <div data-bind="html: $data"> </div> </div> </div> <!-- ko if: label --> <span class="tile-label" data-bind="html: label">Label</span> <!-- /ko --> <!-- ko if: counter --> <span class="tile-counter" data-bind="html: counter">10</span> <!-- /ko --> <!-- ko if: subContent --> <div data-bind="attr: { 'class': subContentClasses }, html: subContent"> subContent </div> <!-- /ko --> </div> </div> </div>標記中到處都是KnockoutJS標記，它們被用于綁定Tile對象模型到html對象。
Dashboard運行
這里的流程圖顯示了Dashboard是如何被加載的：
Dashboard.js中的代碼直截了當，并且魔法般地實現了功能！
var viewModel = new DashboardModel("Start", [], window.currentUser, ui, TileBuilders); $(document).ready(function () { // Hide the body area until it is fully loaded in order to prevent flickrs $('#content').css('visibility', 'visible'); // Initiate KnockoutJS binding which creates all the tiles and binds the whole // UI to viewModel. ko.applyBindings(viewModel); // See if user has a previous session where page setup was stored var cookie = readCookie("p"); if (cookie != null && cookie.length > 0) { try { viewModel.loadSectionsFromString(cookie); } catch (e) { // Failed to load saved tiles. Load the default tiles. viewModel.loadSectionsFromString(DefaultTiles); } } else { // No cookie, load default tiles. Defined in Tiles.js viewModel.loadSectionsFromString(DefaultTiles); }首先如果有記錄的話，它會嘗試從cookie中讀取section和tile的設置。如果沒有設置，它會加載默認的定義。之后，Core.js中的框架姜夔啟動，并開始處理tile的創建工作，并將動態行為加入tile中。
代碼已經被詳細文檔化了，你可以從那里獲取更多細節。
應用商店
應用商店的外觀是采用和Dashborad同樣的方式建立的. 應用商店展示了Droptiles框架的可重用性. 它同樣使用了TheCore.js 來提供外觀. 唯一的不同時它沒有使用 Tiles.js 來定義瓦片組件的元數據還有默認的瓦片組件, 它有其自己的AppStoreTiles.js 來定義瓦片組件元數據和在應用商店上面默認顯示的瓦片組件.
這就是所有的不同之處了.
下面是 AppStore.js中的代碼:
var viewModel = new DashboardModel("App Store", [], window.currentUser, ui, TileBuilders); $(document).ready(function () { // Hide the body area until it is fully loaded in order to prevent flickrs $('#content').css('visibility', 'visible'); // Initiate KnockoutJS binding which creates all the tiles and binds the whole // UI to viewModel. ko.applyBindings(viewModel); viewModel.switchTheme('theme-white'); viewModel.loadSectionsFromString(window.AppStoreTiles);那就是了.loadSectionsFromString 函數負責創建應用商店中的瓦片組件. 它從一個字符串序列格式中獲取區域和瓦片配置, 像這樣:
Section1~flickr1,flickr.news1,news|Section2~angrybirds1,angrybirds
這是它存儲在cookie中的方式，以便于你下一次訪問Dashboard時展示你上次在上面留下的東西.
總結
Droptiles是一個開源項目，迎來展示Windows 8開始界面外觀可以只使用HTML, Javascript 和 CSS實現. 它可以被用來構建各種類型的web應用程序，特別是觸摸設備上的應用程序. 現代的Metro外觀使得其作為自助終端或者內容聚合器前端非常具有吸引力.
-
-
-
-