Javascript Metro Style App (3) 設定資料來源

設定完 Metro App 基本資料之後,接著來設定 App 顯示的資料來源

本機資料來源

開啟專案目錄下的 js > data.js

var groupDescription = "...";
var itemDescription = "...";
var itemContent = "...";

// These three strings encode placeholder images. You will want to set the
// backgroundImage property in your real data to be URLs to images.
var lightGray = "...";
var mediumGray = "...";
var darkGray = "...";

// Each of these sample groups must have a unique key to be displayed
// separately.
var sampleGroups = [
...
];

// Each of these sample items should have a reference to a particular
// group.
var sampleItems = [
...
];

這邊一整段都是資料的部分,可以看的出來都是純 json 的資料型態,如果要設定本機資料可以直接在這邊修改,或是比較建議的做法是另外開一個 data 的資料夾來存放這些 json 的資料。

遠端資料來源

如果 APP 本身資料是從遠端接收的 client-server 架構,也可以直接從遠端路徑讀取需要的 json 資料,原本的 Local 資料也就是 json 物件,所以如果要遠端資料就只要能回傳 json 物件就可以根據內容去顯示。這邊也可以自行修改 javascript 來改變顯示的方式,如果是還不想碰到 javascript 的話,就依照原本的資料結構也可以顯示內容。

微軟給的範例連結

找到 data.js 底下修改

sampleItems.forEach(function (item) {
list.push(item);
});

成為

WinJS.xhr({url: "http://contosorecipes8.blob.core.windows.net/AzureRecipes"})
.then(function (xhr) {
var items = JSON.parse(xhr.responseText);

// Add the items to the WinJS.Binding.List
items.forEach(function (item) {
list.push(item);
});
});

再重新啟動之後就可以看到官方的範例內容。

image

有加上圖片內容之後整體質感會差很多,其實這也是 Metro UI 的特色,讓內容來決定 App ,看到的東西就是真正的內容,而減少為了編排或是版面設計出來的圖片。讓整體介面變得以內容為主。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *