嘗試HTML + JavaScript 編寫Windows App - gnielee－IT工程師數位筆記本

文章出處

　　一直以來博文中使用最多的就是C# + XAML。進入Windows App時代，又多了一對 Javascript + HTML組合，這對于Web開發的程序員來說再熟悉不過了。其實小編也做過幾年的Web開發，算不上什么大拿，但那時無時不刻的在網絡上尋找Javascript、AJAX、JQuery代碼，研究各種動態Web效果。每次打開VS總是看到Javascript項目選項，但從來也沒創建過。隨著Windows 8.1 Preview、Visual Studio 2013 Preview發布，我也來體驗一下Javascript開發Windows App是什么感覺。

　　打開Visual Studio 2013 Preview，新建一個空Javascript項目，在工程目錄中有三個default文件，后綴分別為css、js、html，看到這三個文件不用打開就應該知道是干什么的。Default.css控制界面顯示效果，比如字體大小、間距、顏色等。Default.js程序邏輯處理，如事件、動態效果等。Default.html這個就是界面展示了，程序的UI效果都通過它來展示。

　　在Default.html的<Body>標簽里添加一些簡單的代碼，我們的目的是當點擊Go！按鈕時，顯示username填寫的名字。個人喜好用Blend進行界面編輯，用起來比VS方便一些。

<body>
  <div class="apptitle">Hello World!</div>
  <div class="appname" id="showname"></div>
  <div class="appinput"> 
    <input id="username" type="text" />    <button id="nameBtn" type="button">Go!</button>
  </div> 
</body>

　　接下來，需要在Default.js里定義按鈕點擊事件，事件寫好后需要在app.onactivated中注冊該事件，這樣才能使點擊按鈕生效。

function showNameBtnClick(eventInfo) {
 var userName = document.getElementById("username").value; 
 var showString = "This is " + userName + "!"; 
 document.getElementById("showname").innerText = showString; 
}

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()); 
  var nameBtn = document.getElementById("nameBtn"); 
  nameBtn.addEventListener("click", showNameBtnClick, false); 
 } 
};