win8: hello gril
生活随笔
收集整理的這篇文章主要介紹了
win8: hello gril
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
My first metro app in win8：hello gril
from 官方文檔：http://msdn.microsoft.com/en-us/library/windows/apps/hh986964.aspx
看效果：
建一個blank App；先看project 組成：
References：庫的引用
css：里面一個default.css 放置樣式內容
images：圖片文件夾
js：文件夾，里面一個default.js ?js文件
default.html?
Hello Gril_TemporaryKey.pfx
manifest 配置文件
?
?
看js的代碼：
?
(function () {"use strict";WinJS.Binding.optimizeBindingReferences = true;var app = WinJS.Application;var activation = Windows.ApplicationModel.Activation;app.onactivated = function (args) {if (args.detail.kind === activation.ActivationKind.launch) {if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {// TODO: This application has been newly launched. Initialize// your application here.} else {// TODO: This application has been reactivated from suspension.// Restore application state here. }args.setPromise(WinJS.UI.processAll().then(function completed(){// Retrieve the div that hosts the Rating control.var ratingControlDiv = document.getElementById("ratingControlDiv");// Retrieve the actual Rating control.var ratingControl = ratingControlDiv.winControl;// Register the event handler. ratingControl.addEventListener("change", ratingChanged, false);}));//add button listenervar helloButton = document.getElementById("helloButton");helloButton.addEventListener("click", buttonClickHandle, false);} };app.oncheckpoint = function (args) {// TODO: This application is about to be suspended. Save any state// that needs to persist across suspensions here. You might use the// WinJS.Application.sessionState object, which is automatically// saved and restored across suspension. If you need to complete an// asynchronous operation before your application is suspended, call// args.setPromise(). };function buttonClickHandle(eventInfo) {var username = document.getElementById("nameInput").value;var string = "hi," + username + " you are beautiful!"document.getElementById("greetingOutput").innerText = string;}function ratingChanged(eventInfo) {var ratingOutput = document.getElementById("ratingOutput");ratingOutput.innerText = eventInfo.detail.tentativeRating;}app.start(); })();?
?
一個自執行的匿名方法。里面其實也有相關的生命周期：onactivated，oncheckpoint 。
?聲明了button的響應方法buttonClickHandle。在onactivated中通過id獲取button，再設置監聽即可。
?
html代碼：
?
<!DOCTYPE html> <html> <head><meta charset="utf-8" /><title>Hello_Gril</title><!-- WinJS references --><link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" /><script src="//Microsoft.WinJS.1.0/js/base.js"></script><script src="//Microsoft.WinJS.1.0/js/ui.js"></script><!-- Hello_Gril references --><link href="/css/default.css" rel="stylesheet" /><script src="/js/default.js"></script> </head> <body><h1 class ="headClass">hello , gril!</h1><div class ="mainContent"><p>what's your name,gril?</p><input id="nameInput" type="text" /><button id="helloButton">say hi</button><div id="greetingOutput"></div><label for="ratingControlDiv">Rate this greeting: </label><div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"></div> <div id="ratingOutput"></div></div> </body> </html>?
應用了winjs的庫。在 ??<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"> ?中使用了winjs的相關控件。在js中要靠??去連接，并且其是異步的。所以ratingControlDiv控件 的響應就要在WinJS.UI.processAll()異步之后執行。就有了：
args.setPromise(WinJS.UI.processAll().then(function completed(){// Retrieve the div that hosts the Rating control.var ratingControlDiv = document.getElementById("ratingControlDiv");// Retrieve the actual Rating control.var ratingControl = ratingControlDiv.winControl;// Register the event handler. ratingControl.addEventListener("change", ratingChanged, false);}));最后也瞧瞧css的代碼吧：
body { }.headClass {margin-top: 45px;margin-left: 120px;}.mainContent {margin-bottom: 31px;margin-left: 120px;margin-bottom: 10px; }#greetingOutput {height: 30px;margin-bottom: 40px; }@media screen and (-ms-view-state: fullscreen-landscape) { }@media screen and (-ms-view-state: filled) { }@media screen and (-ms-view-state: snapped) { }@media screen and (-ms-view-state: fullscreen-portrait) { }后半部分是其缺省給的，暫時忽略。
?
整個開發過程與Android開發其實沒多大差別，android的xml組織界面，java控制邏輯。在這里是html/css負責界面，js控制。有生命周期，不過貌似只有三種狀態。
?
over！
?
?
?
?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的win8: hello gril的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： How to Review a Pape
- 下一篇： 外贸EDM邮件营销效率低的原因分析