javascript
Win10系列:JavaScript 的 WinJS库
WinJS 庫是由 CSS 和 JavaScript 文件組成的。使用Visual Studio 2012新建一個JavaScript 的Windows應用商店的空白應用程序項目,在項目的引用管理器中會默認添加這個庫,如圖19-1所示:
圖19-1 JavaScript 的 WinJS庫
上圖可以看出,WinJS庫主要包含ui-dark.css、ui-light.css、base.js和ui.js四個文件。其中ui-dark.css和ui-light.css是JavaScript主題風格庫,ui-dark.css表示昏暗風格,而ui-light.css表示明亮風格;base.js是WinJS的基礎類庫,包含了處理程序激活、掛起、異常等行為的函數;ui.js是WinJS控件庫,包含了一些Windows 應用商店應用的前臺界面常用的控件和控件樣式。
新建項目的default.html頁面會默認引用WinJS 庫中的ui-dark.css、base.js 和ui.js文件。相關代碼如下所示:
<!-- WinJS 庫的引用 -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
2. WinJS庫中的命名空間
為了防止同名函數和變量發生沖突,同時也可以方便代碼的管理,在WinJS庫中也使用了命名空間的概念來規劃庫中的資源,這些命名空間封裝了與Windows應用商店應用開發相關的對象和函數。通過相應的命名空間名稱能對該空間里的對象和函數進行訪問。接下來介紹WinJS庫中幾個主要的命名空間。
(1)WinJS.UI.Pages命名空間
WinJS.UI.Pages命名空間主要包含PageControl 控件和 define函數。其中PageControl 控件與其他的WinJS庫控件有所不同,它是一種自定義控件,需要使用WinJS.UI.Pages命名空間下的define函數來定義PageControl控件。define函數有兩個參數,一個是uri,另一個是members,uri為頁面的地址,members是對這個頁面中的成員進行的一些初始化操作,相關語法格式代碼如下所示:
var pageControl = WinJS.UI.Pages.define(uri, members);
(2)WinJS.Binding 命名空間
WinJS.Binding 命名空間里面主要包含在數據與模板綁定時所使用的一些對象,如List對象和Template對象。List對象用于表示數據列表,通過WinJS.Binding.List函數可以新建一個List對象,該函數有一個數組類型的參數,表示初始化列表的數據集合,語法格式代碼如下所示:
var JSlist = new WinJS.Binding.List(list);
例如先定義一個數據集合myData,然后使用WinJS.Binding.List函數創建一個itemsList數據列表,并用myData數據集合初始化該數據列表,相關代碼如下所示:
//數據集合
var myData = [
{ title: "Banana", text: "Low-fat frozen yogurt", picture: "images/Banana.png" },
{ title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/Lemon.png" },
{ title: "Marvelous Mint", text: "Gelato", picture: "images/Mint.png" },
{ title: "Creamy Orange", text: "Sorbet", picture: "images/Orange.png" },
{ title: "Succulent Strawberry", text: "Sorbet", picture: "images/Strawberry.png" }
];
// 創建一個List對象
var itemsList = new WinJS.Binding.List(myData);
在上面的代碼中,首先定義用于初始化列表的數據集合myData,myData是一個數組類型的對象,包含了五個數據對象,每個數據對象都有三個屬性title、text和picture,其中title屬性的值為數據對象的標題,text屬性的值為對數據對象的描述,picture屬性的值為數據對象中圖片的地址。接著以myData為參數調用WinJS.Binding.List函數創建一個itemsList數據列表。
Template對象即Template控件,用于格式化顯示數據內容。值得注意的是Template控件內部只能有一個根元素,向Template控件添加其他元素都要在這個根元素里添加。向頁面中添加Template控件可以通過在body元素中定義一個div元素,并將div元素的data-win-control屬性設置為"WinJS.Binding.Template"來完成。
下面演示向頁面中添加一個Template控件,并在Template控件里添加用于顯示圖片的img元素和用于顯示標題的h4元素,相應代碼如下所示:
<body>
<div id="templatebinding" data-win-control="WinJS.Binding.Template">
<div>
<img src="images/Banana.png"/>
<h4> Banana</h4>
</div>
</div>
</body>
在上面代碼中,首先在頁面的body元素里面定義一個div元素,并將div元素的data-win-control屬性設置為"WinJS.Binding.Template"來向頁面中添加Template控件。接下來向Template控件添加img和h4兩個元素,由于Template控件內部只能有一個根元素,因此先為Template控件添加一個div元素作為根元素。然后向根元素添加img元素和h4元素,并設置img元素的src屬性值為"images/Banana.png",h4元素的顯示內容為"Banana"。
另外WinJS.Binding 命名空間內還有一個processAll函數,該函數用來查找綁定目標元素的data-win-bind屬性,通過此方法可以把數據源與綁定目標關聯在一起。后面在介紹簡單對象的數據綁定時會用到processAll函數。processAll函數中有兩個參數,一個是rootElement,另一個是dataContext。其中rootElement為綁定目標,dataContext為綁定源,語法格式代碼如下所示:
WinJS.Binding.processAll(rootElement, dataContext);
(3)WinJS.UI命名空間
WinJS.UI命名空間提供一些常用的控件和初始化操作函數,例如DatePicker控件、ListView控件和AppBar控件等常用控件以及processAll函數,這里的processAll函數與上面介紹的processAll函數功能不同。接下來簡單介紹下WinJS.UI 命名空間里面的主要控件和函數。
DatePicker控件用于選擇一個date類型的值,如用戶可以選擇年份、月份、日期等信息。通過定義一個div元素,并將data-win-control屬性設置為"WinJS.UI.DatePicker"可以向頁面中添加DatePicker控件。相關代碼如下所示:
<div data-win-control="WinJS.UI.DatePicker"></div>
ListView控件用于以列表或者網格的形式顯示多條數據。可以通過定義一個div元素,并將data-win-control屬性設置為"WinJS.UI.ListView"來向頁面中添加ListView控件,還可以通過div元素的data-win-options屬性設置ListView控件的屬性和值,相關代碼如下所示:
<div data-win-control="WinJS.UI.ListView" data-win-options="{ property : value}"></div>
AppBar控件用于定義一個顯示操作命令的應用欄。可以通過定義一個div元素,并將data-win-control屬性設置為"WinJS.UI.AppBar"來向頁面中添加AppBar控件,相關代碼如下所示:
<div data-win-control="WinJS.UI.AppBar"></div>
AppBarCommand控件是在AppBar控件中顯示的一條命令。一般通過定義一個button元素,并將button元素的data-win-control屬性設置為"WinJS.UI.AppBarCommand"來向AppBar控件中添加AppBarCommand命令控件,還可以通過button元素的data-win-options屬性設置AppBarCommand控件的屬性和值,相關代碼如下所示:
<div data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ property : value}" ></button>
</div>
Rating控件用于方便地進行評級。該控件有個averageRating屬性,使用這個屬性開發者可以獲取或者設置平均評級。通過定義一個div元素,并將data-win-control屬性設置為"WinJS.UI.Rating"來向頁面中添加Rating控件,相關代碼如下所示:
<div data-win-control="WinJS.UI.Rating"></div>
HtmlControl控件用于加載一個HTML頁面。可以通過定義一個div元素,并將data-win-control屬性設置為"WinJS.UI.HtmlControl"來向頁面中添加HtmlControl控件,還可以使用div元素的data-win-options屬性把HtmlControl控件的uri屬性設置成所要加載的頁面地址,相關代碼如下所示:
<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/pages/HtmlControlPage.html'}" ></div>
processAll函數用于初始化頁面中WinJS庫控件。基于空白項目模板新建的應用程序項目中,default.js文件中默認調用了WinJS.UI.processAll 函數,相關代碼如下所示:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
// 此應用程序剛剛啟動。在此處初始化應用程序。
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
}
//此應用程序已從掛起狀態重新激活。在此處恢復應用程序狀態。
else {
}
args.setPromise(WinJS.UI.processAll());
}
};
下面通過一個小示例演示如何使用Rating控件和WinJS.UI.processAll函數,首先在Visual Studio 2012中新建一個JavaScript 的Windows應用商店的空白應用程序項目,將其命名為rating。然后打開default.html文件,向body元素中添加Rating控件,相關代碼如下所示:
<body>
<div id="ratingControlHost" data-win-control="WinJS.UI.Rating"></div>
</body>
布置好前臺界面后,接下來打開default.js文件,為processAll函數添加初始化代碼,相關代碼如下所示:
args.setPromise(WinJS.UI.processAll().done(function () {
var control = document.getElementById("ratingControlHost").winControl;
control.averageRating = 3;
})
);
在上面代碼中,首先在setPromise函數里調用WinJS.UI.processAll 函數來初始化所添加的Rating控件,通過getElementById函數獲取id為"ratingControlHost"的Rating控件,然后把該控件的averageRating屬性設置為3。
(4)WinJS.Class命名空間
WinJS.Class命名空間包含一個define函數,用于自定義類。這個函數中有三個參數,一個是constructor,一個是 instanceMembers,另一個是staticMembers。其中constructor參數是類的構造函數,instanceMembers參數為類的成員函數和成員屬性,staticMembers參數為靜態成員函數和成員屬性,語法格式代碼如下所示:
var object = WinJS.Class.define(constructor, instanceMembers, staticMembers);
例如使用define函數定義一個Person類,該類有name屬性和一個靜態屬性harmsHumans,相關代碼如下所示:
var Person = WinJS.Class.define(
function (name) {
this.name = name;
},
{ name: "" },
{ harmsHumans: false });
//聲明并實例化Person對象
var person = new Person("paul");
person.name = "jack";
Person.harmsHumans = false;
上面代碼中,首先定義Person類,接著實例化一個Person類的對象person,并設置該對象的name屬性和harmsHumans屬性。由于harmsHumans屬性是一個靜態屬性,可以直接使用類名來調用。
轉載于:https://www.cnblogs.com/finehappy/p/6644553.html
總結
以上是生活随笔為你收集整理的Win10系列:JavaScript 的 WinJS库的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 深度探索c++对象模型读书笔记:Data
- 下一篇: ZeroC ICE的远程调用框架 代理引