iT邦幫忙

DAY 7
6

以下,會先開始新專案,介紹一下資料夾的結構跟內容分別是做什麼的。筆記
透過建立『空白應用程式』(Microsoft Design Blank App),我們來建立一些常見的 Windows UI 組件吧(總算可以開始寫一些code了XDD)!

這部分就先當做熱身,雖然這邊的介紹會比較碎片化,不過之後會介紹的 Split App 或是 Grid App 會有太多觀念要瞭解,一時之間我只好從最乾淨的 Blank App 講起。

雖然我說要來建立一些常見的 Window UI,但,怎麼知道到底有哪些 Windows UI 呢?完整到底有多少我也不清楚,不過有興趣的話可以看一下這個網址:WinJS.UI Namespace。http://msdn.microsoft.com/en-us/library/windows/apps/br229782.aspx

之後可能會介紹這幾種:像 AppBar, FlipView, Flyout…等等。

開始吧!
請開啓 Visual Studio,點選『檔案』 → 『新增』 → 『專案』(或直接按 Ctrl + Shift + N)。

接著會出現起始畫面,選擇你要 App:

  1. 請選擇你要建立『空白應用程式』(格線與分割會在後頭章節提到)。
  2. App名稱可自己命名,預設會是 App+數字(你開了第幾個App)。
  3. 位置預設會在 Visual Studio 2012/Projects 底下,你也可以自己調整。
  4. 勾消『為方案建立目錄』,(個人習慣),主要是我不習慣多產生一層資料夾。
  5. 按確定。


這時候,會花幾秒鐘的時間幫你建立你的 App,完成之後就會看到這個畫面:

好了! 等等呢,我們會在右側『方案總管』琢磨一下這個檔案下的內容。

現在先聊一些環境的設定:

  1. 調整字型大小:在左下角有個100%可以將它調整高一點,讓文字變大。

  2. 顯示行號:
    選擇 『工具』 → 『選項』 → 『將顯示所有設定』 打開 → 選擇 文字編輯器 > 所有語言 > 一般。把『行號』打勾,若有需要自動換行的話,也可以一起設定。

  3. 編輯器的色系: 如果也想要調成深色的話,打開『工具』 → 『選項』→ 『環境』> 『一般』→ 『色彩佈景主題』調整成深色。

空白應用程式(blank app)的檔案結構:

空白應用程式 Blank App 是最基本的範本,基本也代表著這些檔案,可能是都是些很重 要的,挑幾個說:
package.appxmanifest 有點類似全站的設定檔,App名稱, App介紹, 列出這個 App 包含的文件,裡面還會需要設定一些logo的圖檔, 總共需要替換這幾個logo:
* logo.png
* smalllogo.png (小的logo)
* storelogo.png (上架到市集的logo)
* splashscreen.png (啓動應用程式時的畫面)

default.html 是起始畫面,寫 web 的人會知道以前寫 default.html 也算是首頁的一種命名(default.html 會搭配 default.js,這些檔案會在 App 運行的時候使用到)

default.js 這個檔案,用來處理整個 App 應用週期的程式碼(比方說啓動WinJS之類的),之後的範例也會很常在這裡寫Code。

css 資料夾 可以在這資料夾新增自己所需要的JavaScript File。

js 資料夾 可以在這資料夾新增自己所需要的JavaScript File。

官方文件有提到說,如果你是用 JavaScrip 開發 windows App,這些檔案都是基本且必備的。參考:http://msdn.microsoft.com/zh-TW/library/windows/apps/hh986964.aspx

啓動/關閉 你的Blank App

按鍵盤 F5 或工具列上的 執行於『本機電腦』

啓動之後你會先看到啓動畫面 (splashscreen.png) ,接著才會進入到內容的部分。 (啓動畫面)

* 內容部分通常是黑底,然後什麼都沒有,因為我們也沒增加什麼內容。

ok你已經做完了一件偉大的事情了,那就是看到你的Blank App真正跑起來的樣子。

接著怎麼關掉它呢? * 若要關閉應用程式,從螢幕的上邊緣向下撥動直到下邊緣,或是按 『Alt+F4』,另外如果你不小心進入到偵錯模式,那麼你會發現你可能無法編輯你的檔案,你必須先關掉偵錯,在 Visual Studio 中,按一下 『偵錯』 > 『停止偵錯』 用來關閉應用程式。

本篇同時轉載於:[**http://winwu.github.io/windows-8-app/2013/09/22/day7-win8-app-blankapp/**
](<strong>http://winwu.github.io/windows-8-app/2013/09/22/day7-win8-app-blankapp/&lt;/strong><br />
)

今日進度結束,下一篇來做些小東西。

如有任何問題,歡迎留言。雖然我不一定會 :P,但盡可能找到 reference 或解答。


上一篇
Day6 Windows API For Windows App(二) WinJS
下一篇
Day7 visual studio 2012 模擬器(Simulator)的介紹
系列文
用 HTML5 和 JavaScript 學習開發 Windows 8 Apps30

2 則留言

0
老鷹(eagle)
iT邦高手 1 級 ‧ 2013-09-22 13:15:58

沙發

yiying iT邦新手 1 級 ‧ 2013-09-22 14:32:20 檢舉

筆記筆記

0
SunAllen
iT邦高手 1 級 ‧ 2013-09-22 14:43:00

Visual Studio 又改頭換面了...可惜我還在用PSPad...落寞落寞

yiying iT邦新手 1 級 ‧ 2013-09-22 14:59:40 檢舉

從哪個版本開始改頭換面的? 想看XDD

我要留言

立即登入留言