兩年前曾經介紹過在 Windows 8 創作六合彩程式的感覺，當時 Win8 還是測試版，今日已經是Windows 8.1 的 Update 1 了，新版比較舊版速度更快、所需記憶更少、滑鼠與鍵盤支援更多，而最大改良的還是開發工具，微軟在四月的開發者發佈會 (MS Build 2014) 即場正式啟動 WinJS 為開源碼 (Open Source)，此舉今我有興趣在 WinJS 再次創作六合彩程式，目的是比較兩年前 (HTML5 + Javascript) 及今次 (WinJS) 的創作分別。
(附註：WinJS 是由微軟為程式創作人提供的免費開發框架，用來開發 Win8 Apps，可以放到 Windows Store 售賣，現在還可以在其它瀏覽器、 iOS 或 Android 執行)
微軟也提供了免費的程式開發環境工具 Visual Studio Express for Windows，當下載、安裝及註冊 (只需電郵地址便可) 之後，便可執行它：
首先建立一個新 MarkSix 項目 (New Project)：
Visual Studio 會自動建立整個基本程式，我們可以馬上執行它，來看看一個基本 App 的樣式：
出現以下基本 WinJS 程式畫面：
留意本程式是 Navigation App，意味著是多頁式，Visual Studio 已為我們建立了首頁，並放在源碼資料夾 pages 內：
我們可以看到當中包括有 CSS、HTML 及 JS 檔案 (這正是網頁設計師見慣見熟的檔案)。跟著續一改變內容，首先是 home.html (目的是加入一個按鈕，按下該按鈕後便會跳到第二頁)，步驟如下:
在 Home.html 把原本 <section aria-label="Main Content"> 內的程式碼：
改為：
<section aria-label="Main content" role="main">
<h2>歡迎使用六合彩號碼產生程式</h2>
<br />
<br />
<!-- 加入按鈕 -->
<button id="genNumber">開始產生號碼</button>
</section>
跟著是改變 home.js 內容：
Copy & Paste 取代為以下程式碼：
ready: function (element, options) {
// 當按鈕按下時，會執行 onBtnGenNumber()
document.getElementById("genNumber").addEventListener("click", this.onBtnGenNumber, false);
},
// 收到按鈕按下動作，並把網頁轉移到 page2.html
onBtnGenNumber: function (eventInfo) {
eventInfo.preventDefault();
WinJS.Navigation.navigate("pages/page2/page2.html");
}
接著加入一張新網頁 (第二頁) 到程式，第二頁的工作是產生 6 個隨機數 (Random Number)，先建立新資料夾：
新資料夾命名為 page2，並建立3個檔案 (選擇)：
新的3個檔案名稱分別是 page2.css、page2.html 及 page3.js，結果如下：
然後把以下內容 Copy & Paste 到 page2.css (為 page2 定義外表如顏色、距離)：
.page2 section[role=main] {
margin-left: 120px;
margin-right: 120px;
}
.listviewpivotitem.win-pivot-item .win-pivot-item-content {
/* Stretch across the whole width of the screen so the whole thing is pannable.*/
padding: 0;
margin: 0;
width: 100%;
}
.win-listview {
height: 100%;
}
#pivotNumbers .win-listview .win-container {
margin: 0;
padding: 0 0 20px 0;
}
#pivotNumbers .win-listview .win-item {
margin: 0 20px 0 0;
width: calc(100% - 20px);
}
#pivotNumbers .win-listview.win-rtl .win-item {
margin: 0 0 0 20px;
}
.showItem h2 {
line-height: 1.3;
font-size: 48pt;
}
.showItem h5 {
font-size: 32pt;
}
.numbers {
white-space: nowrap;
overflow: hidden;
}
接著 Copy & Pages 以下內容到 page2.html (取代現有內容)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Show Number</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<link href="page2.css" rel="stylesheet" />
<script src="page2.js"></script>
<script src="PageObjects.js"></script>
</head>
<body>
<div class="page2 fragment">
<header aria-label="Header content" role="banner">
<button data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">六合彩號碼為:</span>
</h1>
</header>
<div id="showNumbersTemplate" data-win-control="WinJS.Binding.Template">
<div class="showItem">
<h5 class="numbers win-pivot-slide1" data-win-bind="innerHTML: numbers"></h5>
</div>
</div>
<section aria-label="Main content" role="main">
<div id="pivotNumbers" data-win-control="WinJS.UI.Pivot" data-win-options="{ title: 'Numbers', selectedIndex: 0 }">
<div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'all', managedLV: true }">
<div id="numbersListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: sixNumbers.itemList.dataSource, layout: { type: WinJS.UI.ListLayout }, itemTemplate: showNumbersTemplate, selectionMode: 'none' }">
</div>
</div>
</div>
<button id="regen">重新產生號碼</button>
</section>
</div>
</body>
</html>
接著 Copy & Pages 以下內容到 page2.js：
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/page2/page2.html", {
ready: function (element, options) {
// 當按鈕按下時，會執行 onBtnRegenNumber()
document.getElementById("regen")
.addEventListener("click", this.onRegenNumber, false)
},
unload: function () {
},
updateLayout: function (element) {
},
// 收到按鈕按下動作，便產生另一組隨機數，並顯示到網頁
onBtnRegenNumber: function () {
var obj = new PageObjects.MarkSixObject();
obj.genNumbers();
obj.buildDataSource();
obj.refreshListView();
}
});
})();
以上程式碼都只針對網頁顯示部份，並未包括六合彩號碼產生程式碼。以下介紹在 WinJS 之下， 如何建立物件導向 (Object-Oriented) 的標準方法，WinJS.Class 提供了基本架構，以下程式碼就是利用這架構來建立六合彩號碼產生程式。
在 page2 資料夾建立多一個 Javascript 檔案，檔案命名為 PageObjects.js：
然後 Copy & Paste 以下程式碼到 PgeObjects.js：
"use strict";
/*
本檔案是定立借=不同 Javascript Objects 來處理不同功能
*/
WinJS.Namespace.define("PageObjects", {
// 物件1：六合彩號碼產生物件
MarkSixObject: WinJS.Class.define(
function () { // 物件構造預設功能
this.numbers = [];
}, {
// 製作隨機數功能
genNumbers: function() {
// 製作6個隨機數
var MAX_NUMBERS = 49;
this.numbers = [];
for (var i = 0; i < 6; ++i) {
var num;
do {
num = 1 + parseInt(Math.random() * MAX_NUMBERS);
} while (this.numbers.indexOf(num) >= 0); // 防止重複
this.numbers.push(num);
}
// 把6個隨機數由細至大排列
this.numbers.sort(function(a, b) {
return a - b;
});
},
buildDataSource: function() {
// 建立數據源
var dataArray = [
{ numbers: this.numbers.join(', ') }
];
var dataList = new WinJS.Binding.List(dataArray);
WinJS.Namespace.define("sixNumbers", { itemList: dataList });
},
refreshListView: function() {
// 把數據源放到 ListView 以顯示6個隨機號碼
var lView = document.getElementById("numbersListView").winControl;
lView.itemDataSource = sixNumbers.itemList.dataSource;
}
},
null
)
});
// 網頁即時執行功能
(function () {
var obj = new PageObjects.MarkSixObject();
obj.genNumbers();
obj.buildDataSource();
})();
整個程式完成了，可以看看結果如何，按 F5 執行它，出現以下結果：
(附註：整個程式源碼，可按此下載，17KB)
-------------------
各位如果對本網誌有興趣的話，請在畫面右邊成為追蹤者，日後有新網誌時 Blogger.com 會自動通知，多謝支持（聲明：電郵由系統發出，電郵地址不會給予及不經作者）
(附註：WinJS 是由微軟為程式創作人提供的免費開發框架，用來開發 Win8 Apps，可以放到 Windows Store 售賣，現在還可以在其它瀏覽器、 iOS 或 Android 執行)
微軟也提供了免費的程式開發環境工具 Visual Studio Express for Windows，當下載、安裝及註冊 (只需電郵地址便可) 之後，便可執行它：
首先建立一個新 MarkSix 項目 (New Project)：
然後出現以下畫面，請跟著次序動作：
Visual Studio 會自動建立整個基本程式，我們可以馬上執行它，來看看一個基本 App 的樣式：
出現以下基本 WinJS 程式畫面：
(按 Alt + F4 離開這基本程式)
留意本程式是 Navigation App，意味著是多頁式，Visual Studio 已為我們建立了首頁，並放在源碼資料夾 pages 內：
我們可以看到當中包括有 CSS、HTML 及 JS 檔案 (這正是網頁設計師見慣見熟的檔案)。跟著續一改變內容，首先是 home.html (目的是加入一個按鈕，按下該按鈕後便會跳到第二頁)，步驟如下:
在 Home.html 把原本 <section aria-label="Main Content"> 內的程式碼：
改為：
<section aria-label="Main content" role="main">
<h2>歡迎使用六合彩號碼產生程式</h2>
<br />
<br />
<!-- 加入按鈕 -->
<button id="genNumber">開始產生號碼</button>
</section>
跟著是改變 home.js 內容：
Copy & Paste 取代為以下程式碼：
ready: function (element, options) {
// 當按鈕按下時，會執行 onBtnGenNumber()
document.getElementById("genNumber").addEventListener("click", this.onBtnGenNumber, false);
},
// 收到按鈕按下動作，並把網頁轉移到 page2.html
onBtnGenNumber: function (eventInfo) {
eventInfo.preventDefault();
WinJS.Navigation.navigate("pages/page2/page2.html");
}
接著加入一張新網頁 (第二頁) 到程式，第二頁的工作是產生 6 個隨機數 (Random Number)，先建立新資料夾：
新資料夾命名為 page2，並建立3個檔案 (選擇)：
新的3個檔案名稱分別是 page2.css、page2.html 及 page3.js，結果如下：
然後把以下內容 Copy & Paste 到 page2.css (為 page2 定義外表如顏色、距離)：
.page2 section[role=main] {
margin-left: 120px;
margin-right: 120px;
}
.listviewpivotitem.win-pivot-item .win-pivot-item-content {
/* Stretch across the whole width of the screen so the whole thing is pannable.*/
padding: 0;
margin: 0;
width: 100%;
}
.win-listview {
height: 100%;
}
#pivotNumbers .win-listview .win-container {
margin: 0;
padding: 0 0 20px 0;
}
#pivotNumbers .win-listview .win-item {
margin: 0 20px 0 0;
width: calc(100% - 20px);
}
#pivotNumbers .win-listview.win-rtl .win-item {
margin: 0 0 0 20px;
}
.showItem h2 {
line-height: 1.3;
font-size: 48pt;
}
.showItem h5 {
font-size: 32pt;
}
.numbers {
white-space: nowrap;
overflow: hidden;
}
接著 Copy & Pages 以下內容到 page2.html (取代現有內容)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Show Number</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<link href="page2.css" rel="stylesheet" />
<script src="page2.js"></script>
<script src="PageObjects.js"></script>
</head>
<body>
<div class="page2 fragment">
<header aria-label="Header content" role="banner">
<button data-win-control="WinJS.UI.BackButton"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">六合彩號碼為:</span>
</h1>
</header>
<div id="showNumbersTemplate" data-win-control="WinJS.Binding.Template">
<div class="showItem">
<h5 class="numbers win-pivot-slide1" data-win-bind="innerHTML: numbers"></h5>
</div>
</div>
<section aria-label="Main content" role="main">
<div id="pivotNumbers" data-win-control="WinJS.UI.Pivot" data-win-options="{ title: 'Numbers', selectedIndex: 0 }">
<div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'all', managedLV: true }">
<div id="numbersListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: sixNumbers.itemList.dataSource, layout: { type: WinJS.UI.ListLayout }, itemTemplate: showNumbersTemplate, selectionMode: 'none' }">
</div>
</div>
</div>
<button id="regen">重新產生號碼</button>
</section>
</div>
</body>
</html>
接著 Copy & Pages 以下內容到 page2.js：
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/page2/page2.html", {
ready: function (element, options) {
// 當按鈕按下時，會執行 onBtnRegenNumber()
document.getElementById("regen")
.addEventListener("click", this.onRegenNumber, false)
},
unload: function () {
},
updateLayout: function (element) {
},
// 收到按鈕按下動作，便產生另一組隨機數，並顯示到網頁
onBtnRegenNumber: function () {
var obj = new PageObjects.MarkSixObject();
obj.genNumbers();
obj.buildDataSource();
obj.refreshListView();
}
});
})();
以上程式碼都只針對網頁顯示部份，並未包括六合彩號碼產生程式碼。以下介紹在 WinJS 之下， 如何建立物件導向 (Object-Oriented) 的標準方法，WinJS.Class 提供了基本架構，以下程式碼就是利用這架構來建立六合彩號碼產生程式。
在 page2 資料夾建立多一個 Javascript 檔案，檔案命名為 PageObjects.js：
然後 Copy & Paste 以下程式碼到 PgeObjects.js：
"use strict";
/*
本檔案是定立借=不同 Javascript Objects 來處理不同功能
*/
WinJS.Namespace.define("PageObjects", {
// 物件1：六合彩號碼產生物件
MarkSixObject: WinJS.Class.define(
function () { // 物件構造預設功能
this.numbers = [];
}, {
// 製作隨機數功能
genNumbers: function() {
// 製作6個隨機數
var MAX_NUMBERS = 49;
this.numbers = [];
for (var i = 0; i < 6; ++i) {
var num;
do {
num = 1 + parseInt(Math.random() * MAX_NUMBERS);
} while (this.numbers.indexOf(num) >= 0); // 防止重複
this.numbers.push(num);
}
// 把6個隨機數由細至大排列
this.numbers.sort(function(a, b) {
return a - b;
});
},
buildDataSource: function() {
// 建立數據源
var dataArray = [
{ numbers: this.numbers.join(', ') }
];
var dataList = new WinJS.Binding.List(dataArray);
WinJS.Namespace.define("sixNumbers", { itemList: dataList });
},
refreshListView: function() {
// 把數據源放到 ListView 以顯示6個隨機號碼
var lView = document.getElementById("numbersListView").winControl;
lView.itemDataSource = sixNumbers.itemList.dataSource;
}
},
null
)
});
// 網頁即時執行功能
(function () {
var obj = new PageObjects.MarkSixObject();
obj.genNumbers();
obj.buildDataSource();
})();
整個程式完成了，可以看看結果如何，按 F5 執行它，出現以下結果：
(附註：整個程式源碼，可按此下載，17KB)
總結：
WinJS 提供程式的基本樣式及動感效果，程式寫法與普通網頁相似，但不同的地方是以 Natvie Speed 執行 (比其它 WebApp 在瀏覽器內執行較快)，考慮到程式不單只在 Windows 8 電腦中執行，還有平板電腦 Microsoft Surface (最平港幣 $2,000)，還可在 Windows Phone 8.1 中執行，(例如 Nokia Lumia 525 只不過 $1,080)，開放源碼後更可製作成 WebApp，如懂得使用 Cordova 或 PhoneGap 的話，便可以變成 iOS 或 Android App，橫跨所有平台，值得推薦。-------------------
各位如果對本網誌有興趣的話，請在畫面右邊成為追蹤者，日後有新網誌時 Blogger.com 會自動通知，多謝支持（聲明：電郵由系統發出，電郵地址不會給予及不經作者）
留言