Microsoft Visual Studio 2012 產品評估指南

Microsoft Visual Studio 2012

產品評估指南

HTML5 開發最強利器，橫跨各行動平台

Windows Store App 的唯一開發工具

Scrum 敏捷開發，加速 App 改版並強化品質

軟體生命週期管理 (ALM) 的進化

本手冊電子檔、試用版下載及 Visual Studio 2012 線上學習 : http://aka.ms/vs2012tw

雲 + 端的一致性開發平台

2

目錄 - Visual Studio 2012 產品評估指南

Visual Studio 2012 – 行動開發的神兵利器

Web 開發生產力大躍進 - 整合開發環境 (IDE)及工具簡介 ------------------------------------3

ASP.NET 4.5 前端功能強化 - Web Form 及 jQueryMobile 支援------------------------------8

ASP.NET MVC 4.0 新功能 – Web API 及 Mobile 開發---------------------------------------12

ASP.NET & .NET 4.5 核心功能 - 非同步程式開發及 Websockets----------------------------16

網頁開發技術的新助力 - 升級到 ASP.NET 4.5-------------------------------------------------------20

Visual Studio 2012 – 無與倫比 HTML5 / JavaScript 開發工具

使用 jQuery Mobile 及 ASP.NET 開發跨行動裝置網站 (Mobile Web) ----------------------29

HTML 編輯器及專案相容性-----------------------------------------------------------------44

CSS 與 JavaScript 編輯器-------------------------------------------------------------------47

Visual Studio 2012 – 攻佔 Windows 8 Metro Style App 的唯一開發工具

Windows 8 Metro Style Apps 開發攻略-Hello Metro Style App---------------------------53

使用 JavaScript 製作 Metro Style App -入門篇 ---------------------------------------------61

Metro Style App 開發 - 使用 C/C++ ------------------------------------------------------ 68

軟體生命週期管理 (Application Lifecycle Management, ALM) 的進化

Visual Studio 2012 Ultimate 及 Team Foundation Server 2012 新功能 ------------------ 71

擁抱 SCRUM 與 Visual Studio -------------------------------------------------------------77

快速產出並反應需求 - 善用 Scrum 開發流程 -----------------------------------------------80

確保程式碼品質– Code Review、Code Clone 及 IntelliTrace 的強化 -----------------------82

別再說沒時間測試 – 探勘測試(Exploratory Test)及 Test Manager 2012 的進化 ------------86

網站效能及壓力測試 – 使用 Visual Studio Ultimate 2012 ----------------------------------89

高效能及高可靠度網站的完整拼圖

Visual Studio 與 System Center Operations Manager-------------------------------------92

C++ 程式碼品質、程式效能、測試及進階功能----------------------------------------------96

案例分享

雄獅旅遊如何迎接行動化的新世代--------------------------------------------------------100

Scrum 敏捷開發!金士頓科技打造優質 Windows Store App-------------------------------103 保德信投信以 HTML5 打造跨裝置行動智慧理財網-----------------------------------------106

產品型錄

為什麼要用 Visual Studio Ultimate 或 Premium 版本 -------------------------------------108

Visual Studio 2012 及 MSDN 訂閱功能比較表--------------------------------------------109

MSDN 訂閱的價值分析------------------------------------------------------------------- 111

※ 備註:

1. Visual Studio 2012 (原名為 Visual Studio 11) 已於 2012 年 9 月 12 日正式於全球同步上市，包含中文、英文等語系版本，本手冊文章中若干圖片及文字為作者使用 Visual Studio 11 Beta 所製作。

2. 文中 Metro Style App 已更名為 Windows Store App (Windows 市集應用程式)

3

Visual Studio 2012 – 行動開發的神兵利器 Web 開發生產力大躍進 - 整合開發環境 (IDE)及工具簡介

Visual Studio 2012 與.NET Framework 4.5 為

眾多 Web 應用程式開發人員帶來了許多新的技術與

功能，舉凡伺服端的 ASP.NET Web Form/MVC，用

戶端的 jQuery Mobile 以及行動裝置應用開發等，而

和它搭配的 Visual Studio 開發工具介面，當然也不會

閒著，它也有不少針對 Web 開發所提供的新功能。

HTML 編輯器

作為 Web 應用程式使用者介面以及 ASP.NET

網頁編輯器的工具， HTML 編輯器在 Visual Studio

工具中早已成為要角之一，常見的 HTML 語法檢查與

標籤填補是基本功能，在 Visual Studio 2012 內，

HTML 被升級到更人性了。

首先，以往在編輯 Web Form 時，在 HTML 編

輯器內如果輸入了控制項的標籤，還得要回到視覺介

面才能編輯控制項的屬性內容，或是直接輸入屬性資

料（前提是記性要夠好）。在 Visual Studio 2012，

終於將視覺化編輯介面才有的控制項編輯輔助功能

加到了 HTML 編輯器內，在 HTML 編輯器內輸入

ASP.NET 控制項時，熟悉的標籤就出現了，然後就和

在視覺化工具中編輯控制項屬性一樣：

設定完成後，整個 HTML 就會直接更新成已經設定的

內容:

另一個與 ASP.NET 控制項有關的新功能，是在

HTML 編輯器中建立事件處理常式時，Visual Studio

就會自動在後置程式碼中產生相應的函式（預設是以

『控制項 ID_事件』的格式命名事件處理常式的名

稱）。

Visual Studio 2012 在 HTML 基本編輯上的功

能也有諸多強化，像是支援最新的 HTML5 文件類型

（document type），以及充份的 Intellisense 功能，

例如 HTML5 的 video 標籤輸入，Visual Studio 會自

動出現相應的標籤列表：

這時按下兩次 TAB 鍵，編輯器會自動將所選取的

標籤（本例為 video）內建程式碼片段插入到 HTML

內（內建 HTML5 程式碼片段是可以客制的，檔案放在

C:\ProgramFiles\MicrosoftVisualStudio11.0

\Web\Snippets\HTML\1033\HTML）：

作者:朱明中 (微軟 MVP)


4

HTML5 新增的無障礙標準 WAI-ARIA 規格在

Visual Studio 亦直接支援，同時也支援 Intellisense

的功能：

HTML 編輯器也支援重構為使用者控制項的

功能，以往若想要將特定的 UI 介面移置到使用者

控制項時，都必須要額外跑到方案總管去新增使用

者控制項後才能再將要移出的 UI 元素移到使用者

控制項，然後再修改原本的地方加入使用者控項的

宣告。在 Visual Studio 2012 內，上述的動作已經

完全被『萃取到使用者控制項』的功能取代，只要選

取要移出的 UI 元素，再透過快顯功能表的『Extract

to User Control（萃取到使用者控制項）』，就可

以直接將那些元素移置到使用者控制項內，並且會

自動在網頁中加入該使用者控制項的宣告。

HTML 編輯器現在也已經可支援伺服器端物件的

Intellisense 功能（以往只能在伺服器端程式碼編輯

器才有），不論是使用<% %>的或是資料繫結時的

語法都可支援。

最後是一些排版和過濾的新功能，例如在新增

一個標籤時，會自動加入結束標籤，而且會自動加

入縮排等排版效果；另一個新功能是在程式碼編

輯器才有的屬性關鍵字過濾功能，當輸入的字元愈

多時，Visual Studio 會自動過濾相應的屬性，輸入

字元愈多顯示出來的屬性會愈少，對開發人員加快

輸入速度有相當的幫助。

JavaScript 編輯器

JavaScript 在 Visual Studio 2012 除了 Web 開

發以外，它還肩負了 Windows 8 的Metro-style應用

程式開發的重任，所以對它可不能像以前一樣，在

Visual Studio 2012 內，JavaScript 的地位基本上就

像 C#和 VB，在 C#和 VB 有的基本功能，JavaScript

原則上都會有，像是 Go To Definition（移至定義）、

自動減少型的語法完成（Auto-reducing statement

completion）等。Visual Studio2012 也內建對 IE10

的 DOM 以及 ECMAScript 5 的語法支援。

而其中值得一提的是隱含參考（Implicit Ref-

erence），只要是在專案中新增的.js 檔案，都會由

Visual Studio加入對 jQuery 等知名物件庫的參考，

並且享有物件成員 Intellisense 的功能。


5

當然，以往的明確參考（explicit reference）

在 V i s u a l S t u d i o 2 0 1 2 一樣可以用，只要在

JavaScript 檔案的第一行加上///<reference /> 就

可以了。而 Visual Studio 2012 新增了一個稱為

“_references.js” 的檔案，開發人員可以直接在這

個檔案內加入 ///<reference /> 的宣告，並將它加

到網頁內，之後就可以在網頁中使用到的 js 檔案內

生效。

自 Visual Studio 2012 起， JavaScript 也可

以編寫文件了，就像在 C#/VB 上一樣，編寫的註解

將會在 Intellisense 中使用，作法和 C#/VB 很像：

CSS 編輯器

CSS的編輯器在Visual Studio 2012中的改變

是非常顯著的，早期 CSS 編輯器其實並沒有被 Visual

Studio 投以關愛的眼神，因為它和 Web Designer

比較相關，而 Visual Studio 是開發工具而不是設

計工具，多數的 CSS 編輯都是在像 Microsoft

Expression Web 或是 Adobe Dreamweaver 工具

進行，Visual Studio 較少這部份的支援。

不過 Visual Studio 2012 針對 CSS 編輯器做了不

少的改變，基本的自動遞減式語法完成功能和縮排當

然不能少：

為了因應大型 CSS 檔案會有物件階層的管

理，在 Visual Studio 2012 內特別加入了會依物件

階層進行縮排排版（Hierarchical Indentation）的

功能，讓階層更一目瞭然（這個功能可在選項中開

啟或關閉）：


6

在一個大型 CSS 檔案，可能會有上百項樣式的

設定，以往也沒有像 C#/VB 那樣有程式碼區塊

（code region）能用，但在 Visual Studio 2012

內，CSS 也有區塊可用了。

在編輯 CSS 時，顏色的編輯算是很常做的

事，然以往 CSS 編輯器的顏色必須要自己背碼（RGB

或顏色名稱）或是用外部工具得到#RRGGBB 的宣

告，實在是很不方便。 Visual Studio 2012 即特別

為這個需求提出了 CSS 顏色提取器（Picker）功能，

算是整個 CSS 編輯器新功能中最令人印象深刻的

了：

除了一般的顏色選擇外，亦可以用 RGB 方式來選

擇：

CSS3 也是 Visual Studio 2012 首要支援的重

點，所以像是瀏覽器指定（Vendor Specific）的 CSS

樣式也都內建在 Visual Studio 2012 內，而且一樣

具備 Intellisense 的編輯能力。

Visual Studio 2012 除了正規的 CSS 以外，針

對以往對瀏覽器相容性所發展的 CSS hack 也有支

援，微軟針對這個功能特別整理數以百計的 CSS

hack 資訊，找出常用與共用性的 CSS hack 加入

Visual Studio 2012 的 Intellisense 內。

輔助工具的新功能

在 Visual Studio 2012 的 Web 強化功能中，有

兩個特別的工具改變，第一個是原本使用的測試用

Web Server（即 ASP.NET Development Server)


7

已經更新為 IIS Express，IIS Express 擁有比

ASP.NET Development Server 更多的功能，也

是微軟建議使用的測試用 Web Server，不過若不

熟悉它的話，仍然可以繼續使用 ASP.NET Devel-

opment Server。

另一個工具是網頁探測器（Page Inspec-

tor），它很像是 IE 中的開發者工具或是 Chrome

的開發者工具等，它可以同時使用在 Web Form/

MVC/Web Pages 等技術上，允許開發人員直接

檢視執行後的結果，包括呈現的 HTML 結果與網

頁的細節等，很像是開發者工具和 Visual Studio

整合後的工具。

結語

Visual Studio 2012 的整合開發環境介面相

較於之前版本的 Visual Studio 有較明顯的改變，

特別是針對 HTML5/JavaScript/CSS3 等內容的編

輯，能有效的提升開發人員的開發速度與效率，快

速的開發出具高水準與品質的 Web 應用程式。


8

ASP.NET 4.5 前端功能強化 - Web Form 及 jQueryMobile

支援作者:朱明中 (微軟 MVP)

ASP.NET 的前端功能（front-end），也就是

Web Form 以及 MVC 等等，在 4.5 版時都有不少功

能的改進，在本篇文章中，將會介紹 Web Form 以

及行動應用程式開發前端部份的 jQuery Mobile，

而 MVC 4.0 部份則以另一篇專文介紹。

模型繫結 Model Binding

M o d e l B i n d i n g 這個功能早期是源自於

ASP.NET MVC 2.0，它最大的特色就是傳入資料以及

顯示介面處理的繫結邏輯是採用強型別（strong-

typed）的架構，且強型別有助於在編輯時做型別檢

查和 Intellisense 等輔助功能，當筆者在 MVC 上看

到這個功能時，其實是很羨慕的，因為早期在 Web

F o r m 上並沒有這個功能，最多只有

ObjectDataSource 可和物件集合溝通，而且還得要

自己處理許多弱型別上才有的效能問題，對使用集合

或 ORM 架構（例如 Entity Framework）開發資料應

用程式的開發人員來說十分的不便。不過這種日子總

算要結束了，因為 ASP.NET 4.5 Web Form 上終於

要有 Model Binding 功能了，以後在 Visual Studio

2012 上使用 Web Form 的控制項，也能享有

Intellisense 與強型別的優點。

Web Form 上的 Model Binding 功能的實作方

式和 MVC 不太一樣，畢竟 Web Form 還是要保有原

本的控制項架構與事件流動方式，所以在 Web Form

上，看不到很明顯的改變，但會有一種感覺：「控制

項和 ObjectDataSource 融合在一起了」，例如下面

這個例子：

<asp:GridView ID="categoriesGrid"

runat="server"

ItemType="WebApplication1.Model.Category"

SelectMethod="GetCategories" AutoGener-

ateColumns="false">

<Columns>

<asp:BoundField DataField="CategoryID"

HeaderText="ID" />

<asp:BoundField Data-

Field="CategoryName" HeaderText="Name" />

<asp:BoundField DataField="Description"

HeaderText="Description" />

<asp:TemplateField HeaderText="# of

Products">

<ItemTemplate><%#

Item.Products.Count %></ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

Web Form 的 Model Binding 的組成元素有兩

個，一個是 ItemType，它會指定這個資料控制項所

容納的物件型別， Visual Studio 會使用這個屬性值

作為編輯器 Intellisense 的來源，而另一個 Select

Method 則是由開發人員提供資料來源的方法，它允

許傳入由 ItemType 所指定的元素型別的集合，簡單

的說，目前流行的 Entity Framework 和 LINQ 查詢的

方法，都能直接使用在 Model Binding，透過強型別

的方法，開發人員可直接使用 Item 和 BindItem 享有

強型別的優點（Item 對應於 Eval，而 BindItem 對應

於 Bind）。

以往使用 ObjectDataSource 的 SelectCountMethod

不再存在，因為程式可以透過 IEnumerable<T>的

Count()方法存取到數量，因此不再需要多一個取得

數量的方法。


9

除了基本的強型別功能外， Model Binding 還

多了一項特殊功能，它的 SelectMethod 屬性設定並

沒有規範參數，開發人員可以利用 ASP.NET 4.5 新增

的參數過濾器（Parameter Filter）將參數自動依不同

的來源（控制項或查詢字串等）資料套用到參數內，例

如下面的例子：

<asp:Label runat="server" AssociatedControl-

ID="categories"

Text="Select a category to show products for:

" />

<asp:DropDownList runat="server"

ID="categories"

SelectMethod="GetCategories" AppendData-

BoundItems="true"

DataTextField="CategoryName" DataValue-

Field="CategoryID"

AutoPostBack="true">

<asp:ListItem Value="" Text="- all -" />

</asp:DropDownList>

<asp:GridView ID="productsGrid"

runat="server" DataKeyNames="ProductID"

AllowPaging="true" AllowSorting="true" Au-

toGenerateColumns="false"

SelectMethod="GetProducts" >

<Columns>

<asp:BoundField DataField="ProductID"

HeaderText="ID" />

<asp:BoundField

DataField="ProductName" HeaderText="Name"

SortExpression="ProductName" />

<asp:BoundField DataField="UnitPrice"

HeaderText="Unit Price"

SortExpression="UnitPrice" />

<asp:BoundField DataField="UnitsInStock"

HeaderText="# in Stock"

SortExpression="UnitsInStock" />

</Columns>

<EmptyDataTemplate>

No products matching the filter criteria

were found

</EmptyDataTemplate>

</asp:GridView>

SelectMethod 指定的是 GetProducts 方法，

這個方法必須要是存在於與網頁相同的程式碼後

置類別中，而如下例：

public IQueryable<Product> GetProducts(

[QueryString("q")] string keyword,

[Control("categories")] int? categoryId)

{

IQueryable<Product> query = _db.Products;

if (!String.IsNullOrWhiteSpace(keyword))

{

query = query.Where(p =>

p.ProductName.Contains(keyword));

}

if (categoryId.HasValue && categoryId > 0)

{

query = query.Where(p => p.CategoryID

== categoryId);

}

return query;

}

請注意參數中的[QueryString(“q”)]以及

[Control(“categories”)]，它們分別代表參數值是

來自查詢字串或是控制項的值，利用這樣的作法可

以有效減少以往在資料來源控制項上的一堆查詢

條件設定，而且無

須額外的動作就

能將資料套用到

參數中，對開發人

員來說是很便利

的功能。


10

資料繫結編碼功能

如果資料庫內有儲存 HTML 資料的時候，一

般的作法都是要先將資料做 HTML 編碼，否則它會

依原樣輸出，若剛好裡面內含惡意指令碼時，使用

者就會因惡意指令碼而遭殃。為避免這樣的問題，

ASP.NET 4.5 的資料繫結字串中加入了一個新的自

動編碼功能，開發人員只要在資料繫結字串中加入

一個冒號（”:”）即可，例如：

<asp:TemplateField HeaderText="Name">

<ItemTemplate><%#: Item.Products.Name %

></ItemTemplate>


HTML5 的支援

ASP.NET 4.5 的 Web 控制項也已經使用 HTML5 來

繪製，例如：

※ TextBox.TextMode 加入 HTML5 新增的功能

(ex: email, datetime)。

※ FileUpload 控制項加入 HTML5 的多檔上傳功

能。

※ Validator 控制項將支援 HTML5 的輸入欄位。

※讓 HTML5 的元素可支援 runat="server"的功

能。

※ UpdatePanel 會修改以支援發送 HTML5 輸入

欄位資料的功能。

Unobtrusive Validation

Unobtrusive Validation 和 Model Binding

一樣是源自於 MVC 的技術，傳統的 ASP.NET

Validation 控制項會輸出太多指令碼到前端頁面

內，會造成額外的傳輸負擔，Unobtrusive Vali-

dat ion 的技術會有效的解決這樣的問題，與

HTML5 的 data-*屬性並用，可減少輸出到前端的

指令碼量，同時亦可和 jQuery 合併使用。若要啟

用 Unobtrusive Validation，可在 Web.config 中

的 appSettings 區段中加入：

<add

name="ValidationSettings:UnobtrusiveValidati

onMode" value="WebForms" />

或是在 Global.asax 啟用它（全應用程式有效），亦

可在單頁中啟動它。

jQuery Mobile

自從 iPhone 改變了智慧型手機的生態後，

Android 與 Windows Phone 進入市場形成三強鼎

立，同時也吸引了許多開發人員進入手機應用的開

發，人人都想成為 Angry Bird 第二，靠著一支 App

成為億萬富翁，只是不同平台所使用的開發工具完

全不同，使用的程式語言也完全不同，如果要撰寫

相同功能的 App 到不同的手機平台上，等於要投

資三種平台，學習與開發成本可能會比想像中來得

高很多。這個問題一樣會出現在 Web App 上，但

唯一可以欣慰的是，手機上的瀏覽器多半都支援

HTML5 所以如何應用 HTML5 在手機上發展應用，

便成為最新的顯學。

jQuery 挾帶著在微軟平台的高人氣以及非常

便利的 JavaScript Programming Model 進入了

這個市場，並開發出適用於手機平台上的前端介

面工具－ jQuery Mobile，它完全相容於 HTML5

現行規格，只要利用它的規則就能組合出智慧型

手機常用的應用程式外觀與風格。


11

jQuery Mobile 承襲了 jQuery 與 jQuery UI

的傳統，只要生成正確格式的 HTML，就能得到正

確的使用者介面，它也支援 AJAX 與動態內容生成

的能力，以及簡單的單頁面應用（Single Page Ap-

plication）功能，更重要的是，它被主流平台所支

援，舉凡 iOS/Android/Windows Phone 三大平

台，和 BlackBerry，WebOS 等小眾平台都能使用

它，其適用廣泛度無庸置疑。

在 Visual Studio 2012 裡，其行動應用程式

介面除了全面更新外，亦全面導入 jQuery Mobile

以支援行動應用程式的開發，而它除了行動應用

以外，未來開發人員更可以利用可支援

JavaScr ipt/HTML5 的應用程式框架（例如

PhoneGap）將這樣的應用程式轉換成一個可發行

到應用程式市集的純正 App。

結語

ASP.NET 4.5 在 Web Form 上的重大改良，讓

資料繫結應用也能享有強型別與自動整合參數與

資料的能力，HTML5 的支援讓它得以與目前市場主

流接軌，結合 jQuery Mobile 的能力，讓 ASP.NET

更能在行動應用上揮灑自如。


12

ASP.NET MVC 4.0 新功能 – Web API 及 Mobile 開發

作者:朱明中 (微軟 MVP)

ASP.NET MVC 可說是除了 Web Form 以外，

開發 Web 應用程式最好的選擇，它擁有 Model-

View-Controller 分離的設計架構，開發人員能在不

同的模組內開發自己的功能，不需擔心耦合度的問

題，MVC 在架構上也非常適合大型 Web 應用程式

的發展。MVC 經過了三個版本的磨練，架構上已十

分成熟，而未來 MVC 4.0 會有哪些新的東西呢？咱

們一起來了解。

Web API

ASP.NET MVC 在架構設計之初，就已經決定

View 是獨立的， Controller 透過 ActionResult 物

件與 View 溝通或生成回應的資料，讓剛接觸 MVC

但熟悉 Web Form 的開發人員非常的不習慣，View

回歸到由程式開發人員完全操控，不再有控制項與

事件模型等，讓 MVC 應用程式的速度大幅提升，不

再有 ViewState 和 ControlState，應用程式 View

的大小也大幅減少，開發人員亦可主導輸出的 View

資料類型，簡單的說，我可以決定要讓 View 是

HTML，也可以讓 View 是 PDF/CSV/PNG/TXT 等不

同的資料格式，再加上它沒有厚重的狀態資訊要傳

遞，所以 MVC 架構比 Web Form 更適合開發 HTTP

服務。

近幾年來隨著 Google 的堀起與 Facebook 的

流行等，網路上的 HTTP API 呈現爆炸性的成長，

2009 至 2010 間，API 數量由 1,628 個增加到 2,647

個，目前的 API 數量為 5,921 個，較 Windows API

的函數數量要更多，顯見 HTTP API 已經是網路服

務開發中必備的一個終端點（endpoint），除了原

有的應用程式或架構外，WebService 幾乎完全被

HTTPAPI 所取代，微軟也改寫了許多現有使用 Web

Service 的網路服務，改用 HTTP API 的作法（例如

WindowsAzure 的 StorageAPIs 與 Service Man-

agement APIs）。ASP.NET MVC 當然不會自外於

這股潮流，在 MVC 4.0 中，微軟對 HTTP API 開發

的解決方案，稱為 Web API。Web API 在架構上其

實也只是 MVC Controller 的一份子，只不過它擁有

預設的 Routing，也擁有自己特殊的功能。

Web API 是由 System.Web.Http 命名空間的

ApiController 為基礎，就像在 MVC 中開發 Web

應用程式一樣，撰寫 API 就像在撰寫一般網頁應用

程式一樣，相同的 Action，相同的 HTTP 動詞，相

同的資料處理方式，與 MVC 開發方法如出一轍，那

和一般 Web 網頁開發的最大差異是，它的輸出方

式不再是 ActionResult，而是可直接利用物件、

IEnumerable<T>和 DTO（資料傳輸物件）等，亦

可以自訂要求與回應的訊息。例如下列程式碼：

public Product GetProduct(int id)

{

Product item = repository.Get(id);

if (item == null)

{

throw new HttpResponseException(new

HttpResponseMessage

(HttpStatusCode.NotFound));

}

return item;

}

public IEnumerable<Product> GetProductsBy-

Category(string category)

{

return repository.GetAll().Where(

p => string.Equals(p.Category, category,

StringComparison.OrdinalIgnoreCase));

}

public IEnumerable<Product> GetAllProducts()

{

return repository.GetAll();

}

public HttpResponseMessage PostProduct

(Product item)

{

item = repository.Add(item);


13

var response = Re-

quest.CreateResponse<Product>

(HttpStatusCode.Created, item);

string uri = Url.Route("DefaultApi", new { id =

item.Id });

response.Headers.Location = new Uri

(Request.RequestUri, uri);

return response;

}

public void PutProduct(int id, Product contact)

{

contact.Id = id;

if (!repository.Update(contact))

{

throw new HttpResponseException(new

HttpResponseMessage

(HttpStatusCode.NotFound));

}

}

public HttpResponseMessage DeleteProduct(int

id)

{

repository.Remove(id);

return new HttpResponseMessage

(HttpStatusCode.NoContent);

}

用戶端可利用 HTTP 的作法來存取 Web API，

例如下面的 JavaScript（此段程式一樣可用在

jQuery Mobile）：

$.ajax({

url: "/api/Movie",

data: JSON.stringify( movieToCreate ),

type: "POST",

contentType: "application/json;charset=utf-

8",

statusCode: {

201: function (newMovie) {

callback(newMovie);

}

}

});

ASP.NET Web Form 用戶端一樣可存取 Web

API，工具可採用 WebClient或是 HttpWebRequest

等物件來處理。

WebClient client = new WebClient();

string result =

await client.DownloadStringAsync(“http://

xxx.xx.xx.xx/api/Movie”);

當然這些基本的功能無法完全滿足 HTTP

API 的開發需求，所以 Web API 也有一些特殊的功

能與服務，例如支援 OData 協定（只要回傳

I Q u e r y a b l e < T > ）、分頁功能（設定

[ResultLimits=50]）、以程式碼為主的組態（Code

-based Configuration）以及強化的 IoC 服務

（DependencyResolver）等等，可滿足許多不同

的 HTTP API 設計要求。

Single Page Application

單一網頁應用程式（Single Page Applica-

tion/SPA）是一種新的應用程式思維，以往的 Web

應用程式幾乎都是很多頁，例如 Add .a s px /

Update.aspx/Delete.aspx 等用功能來分的網頁，

而每個網頁都處理各自的工作，這是最常見的 Web

應用程式的設計方式。以往在 Web Form 時代，要

實作 SPA 也不是難事，只是在用戶端與伺服器間傳

遞的資料會非常大（100KB 以上的 ViewState），

而且所有職責都混雜在 Web Form 的程式碼內，對

應用程式的擴充性會有很明顯的阻礙。在講求物件

導向與職責分明的程式設計前提下，若要開發一個

SPA 應用程式，伺服端的程式碼一定只能處理必要

的商業邏輯與和資料庫的串接，與使用者介面有關

的資料交換與使用者介面控制，則必須要使用

JavaScript 來處理，當然在前端也不能只是單純的

JavaScript 而且，需要一個適當的模型來處理介面

的問題，而其中一個解決方案就是 MVVM（Model


14

-View-ViewModel）模式，MVVM 讓網頁的變更能在

最短時間內和伺服端反應，如同在 Silverlight 中使用

Prism 來開發資料應用程式一樣。

SPA 的開發也是 MVC4.0 的新功能之一，而

MVC 也是適合實作 SPA 的架構，搭配 Web API，

SPA 的伺服端開發就已經能充份支援，再來是用戶

端部份，MVC4.0 加入了 MVVM 的知名物件

knockout.js、處理 HTML5 狀態與歷史資訊的

history.js，及配合微軟開發的 upshot.js 等三個重

要的 JavaScript 物件庫，組合成 SPA 的前端處理功

能。

與 ASP.NET Web Form 相同，在 MVC 4.0 中

亦可支援非同步的開發，也就是可使用 async 與

await 指令，例如下列兩個簡單的非同步設計程式

範例：

public async Task<ActionResult> Index(string

city)

CancellationToken cancellationToken) {

var newsService = new NewsService();

var sportsService = new SportsService();

return View("Common",

new PortalViewModel {

NewsHeadlines = await newsSer-

vice.GetHeadlinesAsync(),

SportsScores = await sportsSer-

vice.GetScoresAsync()

});

}

[AsyncTimeout(2500)]

[HandleError(ExceptionType = typeof

(TaskCanceledException), View = "TimedOut")]

public async Task<ActionResult> Index(string

city,

CancellationToken cancellationToken) {

var newsService = new NewsService();

var sportsService = new SportsService();

return View("Common",

new PortalViewModel {

NewsHeadlines = await newsSer-

vice.GetHeadlinesAsync(cancellationToken),

SportsScores = await sportsSer-

vice.GetScoresAsync(cancellationToken)

});

}

行動裝置應用開發支援

Mobile Development Support

非同步程式開發

Asynchronous Programming

MVC 4.0 除了 Web API 和 SPA 令人激賞外，

更多的行動裝置支援亦為 MVC 4.0 重要特色之一，


15

，首先讓人眼睛一亮的是專案範本的改變，MVC

4.0 的專案範本已重新設計，讓它顯現出 MVC 4.0

的特色，尤其是行動裝置應用程式的範本，在與

jQuery Mobile 整合後，整個應用程式看起來與以

往完全不同：

而在一般開發 Web 應用程式時，若是要為手

機平台再多寫一個介面，往往都要用資料夾區分（例

如”/”和”/mobile”），在 MVC 4.0 中，只要將

手機介面的 View 加上一個”.mobile”即可，例如：

※ layout.cshtml ：給桌面應用程式使用。

※ layout.mobile.cshtml ：給手機應用程式使用。

同時內建具網頁輸出能力的 HTML Helpers

（例如 Html.Partial()）都具備自動偵測瀏覽器類

型的能力，只要偵測到瀏覽器是手機瀏覽器時，即

會自動抓取給手機使用的 View 檔案處理，開發人

員無需額外費用處理這部份。如果不喜歡內建的作

法，開發人員一樣可以自訂，例如在 Global.asax

的 Application_Start 事件常式中加入下列程式：

DisplayModeProvider.Instance.Modes.Insert(0,

new

DefaultDisplayMode("iPhone")

{

ContextCondition = (context => con-

text.GetOverriddenUserAgent().IndexOf

("iPhone", StringCompari-

son.OrdinalIgnoreCase) >= 0)

});

有了這段程式後開發人員就能在 View 中以”

iPhone”命名，例如_layout.iPhone.cshtml。

MVC 4.0 另一個在行動裝置應用開發的新功

能，稱為 View Switcher（檢視切換器），它是部份

手機上的瀏覽器提供的功能，允許使用者在手機上

切換手機專屬的 view 或一般的 view，MVC 4.0 的

Display Mode 可以完全支援這樣的功能，開發人

員直接使用 DisplayMode 即可做出支援 View

Switcher 的檢視方式，而對於沒有 View Switcher

的桌面應用程式，ASP.NET 也提供了一個可以產生

V i e w S w i t c h e r 方法 @ H t m l . P a r t i a l

("_ViewSwitcher")。

View Switcher 的功能，是以 MVC 4.0 上的

Browser Overriding 功能為主，Browser Over-

riding 允許開發人員透過程式的方式去覆寫由瀏覽

器傳入的 User Agent，以達到模擬瀏覽器的功能，

包含這四個 HttpContext 方法：

※ HttpContext.SerOverriddenBrowser()

※ HttpContext.GetOverriddenUserAgent()

※ HttpContext.GetOverriddenBrowser()

結語

ASP.NET MVC 4.0 承繼了 MVC 的優良傳統，

以及 ASP.NET 強大的 HTTP 處理能力，使得開發

HTTP 與 Web 應用程式變得容易許多，如今行動化

應用開發盛行的當下，MVC 4.0 依然提供了充份且

強大的基礎支援，讓發展針對行動裝置瀏覽器的

Web 應用程式變得像吃飯一樣簡單。 MVC 4.0 提

供了 Web Form 以外的另一個選擇，有志於開發

大型 Web 應用程式的開發人員們， MVC 將是幫助

您達成使命不可或缺的重要兵器！


16

ASP.NET & .NET 4.5 核心功能 - 非同步程式開發及

Websockets 作者:朱明中 (微軟 MVP)

經過數年的發展，微軟的 Web 應用程式開發

的核心元件－ ASP.NET，已經具備非常完整的 Web

開發功能，包括讓開發人員輕易入門的 W e b

Forms ；大型 Web 應用程式開發必備的 MVC ；簡

易型應用程式開發的 Dynamic Data/Web Pages

等等，讓不同類型的應用程式與開發人員有不同且

適當的選擇。在即將推出的 Visual Studio 2012 中，

不但承襲了 ASP.NET 4.0 原有優秀的功能，同時在

核心中亦有不少變化。

非同步程式開發

Asynchronous Programming

即將隨著 VisualStudio2012 推出的.NET

Framework 4.5，其中一項令人興奮的功能之一，非

「非同步程式設計」莫屬了，近兩年的 Web 應用發

展也很強調非同步的技術，像是 AJAX 和 HTML5

中的 Websockets 技術，都是為了要讓前端應用程

式不會因為後端處理而打結，尤其是像最近流行的

消費式應用（consumer applications），使用者對

應用程式的回應速度要求更多了，最典型的就是不

要讓應用程式在與後端交換資訊時出現僵住的情

況，為了要解決這樣的問題，非同步的程式開發是

唯一的解決方案。

雖然非同步很重要，但是它開發的複雜度以及

與現有 step-by-step 的執行流程不同的特性，也讓

它的學習曲線一直很難平緩，而且要對它的內部了

解的話，還需要熟悉像執行緒（thread）與執行緒

同步（process synchronization）等進階的議題，

所以它一直不像其他的程式設計技術來得容易學

習。目前.NET Framework 核心內有提供的非同步

有三種，第一種是最原始的 Begin/End，例如

HttpWebRequest 的 BeginGetResponse()與

EndResponse()，Begin 是程式啟動時呼叫的，而

End 是由非同步程式跑完時，由非同步的工作排程

器（Task Scheduler）重設非同步狀態（IAsyncResult）

後，才把結果交給呼叫端，太早

呼叫的話會得不到結果，需要用一些像是

WaitHandler 的方式控制執行緒讓它等待以得到

結果。此類非同步設計起來比較麻煩，而且初學者

也很難學習。第二種是 Async 方法加 Completed 事

件，這個稱為以事件為主（Event-based）的非同

步，它的方法和 Begin/End 類似，不過是由工作排

程器利用回呼（callback）的方式引發 Completed

事件，所以開發人員只需要透過處理 Completed 事

件就能得到結果，在程式設計上相對容易，但還是

會有額外程式碼的撰寫工作。第三種是利用.NET

Framework 4.0 新的 Task-based 非同步模型，與

Task Parallel Library配合，程式撰寫更短了一些。.NET

Framework 4.5 中，將這個模型再進一步封裝，讓

程式開發時只要使用兩個關鍵字－ async 與 await

即可。例如：

private async Task ScrapeHtmlPage(object call-

er, EventArgs e)

{

WebClient wc = new WebClient();

var result = await

wc.DownloadStringTaskAsync("http://

www.microsoft.com");

// Do something with the result

}

Async 是用來宣告函數或方法要使用非同步的

模式執行，它會要求函數的回傳值必須是 void、

Task 與 Task<T>型別，編譯器會自動將它轉換成

Task-based 的非同步功能。await 則是宣告非同步

的函式呼叫採用 Task-based 的非同步呼叫方法來

執行，這樣一來開發人員就無須撰寫非同步處理的

指令，只要接收回傳值即可，不需要再像之前一樣

寫一堆落落長的非同步處理程式碼，可大幅的降低

學習與使用非同步工作的學習曲線，並有效縮短非

同步程式的開發時間。


17

ASP.NET4.5 核心也針對這個新模式重新編

寫，因此 ASP.NET 4.5 可直接支援這樣的非同步作

法，而且為了簡化在核心（如 Global.asax）處理非

同步工作所需的負擔，在 ASP.NET 4.5 內，微軟也

添加了一些輔助的功能，像是 EventHandler

TaskAsyncHelper 物件，它允許開發人員將自己的

非同步處理工作由 HttpApplication 自動處理完，

例如：

private async Task ScrapeHtmlPage(object caller,

EventArgs e)

{


var result = await




}

public void Init(HttpApplication context)

{

// Wrap the Task-based method so that it can

be used with

// the older async programming model.

EventHandlerTaskAsyncHelper helper =

new EventHandlerTaskAsyncHelper

(ScrapeHtmlPage);

// The helper object makes it easy to extract

Begin/End methods out of

// a method that returns a Task object. The

ASP.NET pipeline calls the

// Begin and End methods to start and

complete calls on asynchronous

// HTTP modules.

context.AddOnPostAuthorizeRequestAsync

(

helper.BeginEventHandler, help-

er.EndEventHandler);

}

這樣的設計方式可以簡化很多在 Global.asax

中處理非同步工作所需要的程式碼撰寫量，很適合

用在 Global.asax 與非同步 HTTP Module 的開發。

當然 HTTP Handler 也不會被遺忘，原先的 HTTP

Handler 撰寫方式仍然適用，只有在使用 async/

await 時，要將原來的 IHttpHandler 更改成

HttpTaskAsyncHandler，以及將 ProcessRequest

改成 ProcessRequestAsync。例如：

public class MyAsyncHandler : HttpTaskAsyn-

cHandler

{

// ...

// ASP.NET automatically takes care of inte-

grating the Task based override

// with the ASP.NET pipeline.

public override async Task ProcessReques-

tAsync(HttpContext context)

{


var result = await




}

}

HttpTaskAsyncHandler 內部因為已內建

EventHandlerTaskAsyncHelper 的功能，所以可以

直接利用 HttpTaskAsyncHandler. ProcessRequ

estAsync 的方式使用非同步的功能。

除此之外，在核心之中針對非同步的處理也有

做強化。應用程式若經常要處理來自用戶端的要求，

且不想要由 ASP.NET 來處理時，開發人員使用的方

法多半會是 Request.InputStream，不過它會要求

在整個讀取完成時，才回傳 Stream，在 ASP.NET

4 . 0 時， H t t p R e q u e s t 增加了一個

GetBufferlessInputStream()方法，它不會要求整

個資料流讀完後才回傳，所以開發人員可以更快的


18

取得 Stream，只是它又衍生了一個問題，就是如果用

戶端再次要求時，GetBufferlessInputStream() 會抓

不到原先 HTTP 要求資料，導致 Web Form 或 MVC

View 失效，這個問題更常見於非同步作業，因此

ASP.NET 4.5 新增了一個 GetBufferedInputStream

()，它一樣會回傳 Stream，只不過它在資料進來的時

候會多複製一份副本到 buffer 中，而用戶端實際的

Stream 不再是來自 raw-stream，而是來自 buffered

stream，後面的 Handler 在處理時就不會再因為掉資

料而發生錯誤的問題了。

另外，在輸出 HttpResponse 時，我們常會下

Flush()強制輸出，不過若是在低頻寬以及長時工作

(Long-term processing) 時 Flush() 會有一些異常

的狀況，因為它是同步作業，所以在 ASP.NET 4.5

中， HttpResponse 多了 BeginFlush()與 EndFlush

()方法，讓 Flush 工作非同步化，也可以因為呼叫

Flush()次數降低，省下額外因為 Flush()所產生的執

行緒數以及支援非同步的處理工作。

要求驗證強化

Enhancement of Request

Validation

要求驗證（Request Validation）是 ASP.NET

2.0 開始支援的功能，用以強化 ASP.NET 應用程式

的安全性，避免資料被竄改的防禦手法，只不過並不

會知道當下的 HTTP 要求的資料是否會被取用，多

數的 HTTP 要求的資料可能並不會馬上被處理，而

是少部份的要求才會被處理，這個功能反而造成了

效能上的負擔，所以 ASP.NET 4.5 中改用了延遲驗

證（Deferred Validation）的作法，要求驗證不會

在每次 HTTP 要求進入時被處理，而是會在資料被

取用之前才會被處理，也就是在呼叫

Request.Form 或是存取控制項特定屬性資料時，

要求驗證才會執行，而且也只會處理即將被取用的

資料欄位，不會所有的資料都處理，無形中會加速

ASP.NET 程式的處理效能。

要開放這個功能，只需要在 Web.config 中的

<httpRuntime>中，加入一個設定即可：

<httpRuntime requestValidationMode="4.5" ... />

同時 ASP.NET 4.5 亦支援未驗證的資料存取功

能，這點在會用到 HTML 編輯器的應用程式非常好

用。在 ASP.NET 4.5 的 HttpRequest 物件中新增

了一個 Unvalidated 屬性，而其存取方法和一般使

用 R e q u e s t . F o r m 沒什麼差別，只是改為

Request.Unvalidated.Form 而已（其他的也類似）。

例如：

var s = context.Request.Unvalidated.Form["forum_post"];

若是用了這個功能，開發人員則必須要自己處

理來源資料的驗證，以免反而受到 XSS 的攻擊。不

過，ASP.NET 4.5 也已將常用的 AntiXSS 函式庫納

入核心內，以後不再需要額外下載與安裝 AntiXSS

Library，它已經成為內建功能，只要在 Web.config

中加入這個元件的參考資訊即可：

<httpRuntime ...

encoder-

Type="System.Web.Security.AntiXss.AntiXssEncoder

,System.Web, Version=4.0.0.0, Culture=neutral, Pub-

licKeyToken=b03f5f7f11d50a3a" />

Websockets 的支援

HTML5 的 Websockets 功能，就像 AJAX 功能

一樣，可以直接利用 JavaScript 將資料傳送到後端，

而且它會比 AJAX 的 XMLHttpRequest 更彈性好

用，效能也會更好，所以伺服器端沒有理由不支援

Websockets。 ASP.NET 4.5 內添加了一些屬性以

及專屬 Websockets 的功能，以處理 Websockets

的工作。

public async Task MyWebSocket

(AspNetWebSocketContext context)

{

WebSocket socket = context.WebSocket;

while (true)


19

{

ArraySegment<byte> buffer = new Array-

Segment<byte>(new byte[1024]);

// Asynchronously wait for a message to

arrive from a client

WebSocketReceiveResult result =

await socket.ReceiveAsync(buffer, Cancel-

lationToken.None);

// If the socket is still open, echo the mes-

sage back to the client

if (socket.State == WebSocketState.Open)

{

string userMessage = Encod-

ing.UTF8.GetString(buffer.Array, 0,

result.Count);

userMessage = "You sent: " + userMes-

sage + " at " +

DateTime.Now.ToLongTimeString();

buffer = new ArraySegment<byte>

(Encoding.UTF8.GetBytes(userMessage));

// Asynchronously send a message to the

client

await socket.SendAsync(buffer, WebSock-

etMessageType.Text,

true, CancellationToken.None);

}

else { break; }

}

}

Websockets 雖然是一個新的功能，但它本質

上還是一個單純的 TCP 通訊，所以除了 Websocket

物件外，原有的 Socket 以及 TcpClient 功能仍然可

以適用，亦可額外使用 TcpListener 來開發伺服端

程式，只要通訊協定使用 HTTP 即可。

打包與壓縮

Bundling and Minification

打包（Bundling）功能其實就像是將一群檔案

組織起來的意思一樣，在 ASP.NET 4.5 中，打包與

壓縮（ M i n i f i c a t i o n ）功能是歸類在

System.Web.Optimization 命

名空間中，是效能最佳化的一種

功能。打包是用在處理

JavaScript 和 CSS 的功能之上，

而壓縮則是和打包並用，也可以

獨立使用。它用起來很簡單，只要

將所有的 JavaScript 檔案，放到/

scripts 裡面，CSS 檔案放到/

styles 裡面：

然後只要用/scripts/js 就能得到已壓縮且已

打包的 JavaScript 指令碼，而用/styles/css 即可得

到所有已壓縮打包過的 CSS 檔案。當然這個行為是

可以自訂的，包括壓縮路徑與壓縮演算法，例如：

// Creates a new bundle located at the URL "[host]/customscript".

// The bundle uses the built in JsMinify class to perform minification

var b = new Bundle("~/CustomScript", new JsMinify());

// Adds all .js files in the Scripts folder.

// Does not include sub-folders by default.

b.AddDirectory("~/scripts", "*.js");

// Add any text based file relative to the project root

b.AddFile("~/scripts/script.js");

BundleTable.Bundles.Add(b);

結語

ASP.NET 4.5 除了延續 ASP.NET 各代擁有的

優良功能外，在此次的改版又添加了更多為效能以

及開發便利性有關的強化功能，未來 ASP.NET 將會

是 Web 應用程式開發技術中最重要且不可或缺的

一環，所以不要再猶豫了，快點進入 ASP.NET 的世

界吧。


20

網頁開發技術的新助力 - 升級到 ASP.NET 4.5 作者:王寧疆 (微軟 MVP)


摘要

在智慧型手機與平板電腦等移動裝置的數量己經成

長到形成一股不容忽視的族群，以及 HTML 5 與

CSS 3 等新興的網頁開發技術風起雲湧的推波助瀾

下，網頁開發技術再度興起革命性的變化。

在新世代網頁技術的衝擊下，使用舊時代網頁開發

技術設計的網頁不僅在執行效能與安全的層面無法迎

合現代化的網站的需求，同時也無法適應新的瀏覽器

的挑戰，更難有機會將開發好的網站部署到

Windows Azure 雲端執行環境。

升級到 ASP.NET 4.5 的八大理由

能，例如開發聊天程式、或是製作大量資料傳

送、收集資料相關的功能。除此之外也可以利

用 ASP.NET 4.5 最新支援的 SignalR 開發即時

通訊的功能，例如開發即時訂位或電子白板功

能。

以下就是支援使用者輸入電子郵件位址的 TextBox

控制項範例：

ASP.NET 4.5 是 Microsoft 最新推出的網頁開發

技術，支援使用最新的網頁開發技術設計現代化的

網頁。使用 Microsoft 最新的網頁開發技術設計網

頁可以得到很多好處，包括更佳的安全性，更好的

執行效能，支援開發與部署 Windows Azure 雲端

網站，而且可以利用最新的 HTML 5 和 CSS3 網頁

開發技術設計更佳的網頁功能。

網頁程式設計師有八個充分的理由支持將舊有的

ASP.NET 1.x ~ 4.0 網頁升級到 ASP.NET 4.5 ：

1.支援使用最新的 HTML 5 和 CSS 3 網頁開發技

術設計現代化網頁

使用 Visual Studio 2012 搭配 ASP.NET 4.5 支

援利用最新的網頁開發技術 - HTML 5 和 CSS

3 來設計網頁的功能，包括利用 TextBox 控制

項的 TextMode 屬性支援的內容值協助使用者

輸入電子郵件、日期時間、色彩、和指定範圍

的數值等資料，利用 FileUpload 控制項的

AllowMultiple 屬性製作好用的多檔上傳功

能，利用<audio>或<video>標籤播放聲音和

影片檔案，或是利用支援雙向傳輸的

WebSocket 功能製作需要長時間連線的功

<asp:TextBox ID="txtEmail" runat="server" Text-

Mode="Email">

支援多檔上傳的 FileUpload 控制項範例：

<asp:FileUpload ID="FileUpload1"

runat="server" AllowMultiple="True" />

2.ASP.NET 4.5 具有更佳的安全性 ASP.NET 網頁

開發技術素以優良的安全性聞名，ASP.NET

4.5 在安全性又更上一層樓，不但支援更具彈

性的 Request Validation 功能，讓網頁程式設

計師可以將 TextBox 控制項的

ValidateRequestMode 屬性設定為 Disable，

關閉某個 TextBox 控制項的資料驗証功能，允

許使用者於指定的 TextBox 控制項輸入 HTML

格式的內容或 Javascript，但是保留整個網頁

的資料驗証功能。或是利用 ASP.NET 4.5 內建

的 Microsoft Anti-Cross Site Scripting Li-

brary 支援的多種資料編碼功能，包括：

HtmlEncode、HtmlFormUrlEncode、

HtmlAttributeEncode、

XmlAttributeEncode、XmlEncode、

UrlEncode、UrlPathEncode、及 CssEncode

等方法，將網頁欲顯示的內容編碼之後再輸出

到用戶端瀏覽器，防範知名的 Cross Site

Scripting 駭客攻擊技術，確保網頁的安全性。

以下就是關閉資料驗証功能的 TextBox 控制項範

例：

21


<asp:TextBox ID="TextBox1" runat="server"

TextMode="MultiLine" ValidateRequest-

Mode="Disable"/>

3.ASP.NET 4.5 具有更佳的執行效能

在提升網頁執行效能方面，ASP.NET 4.5 可以

利用 aspnet_intern.exe 命令列工具指定網站

共用的組件，讓多個需要使用共同組件的網站

可以使用記憶體中同一個組件，不但可以節省

網站執行時載入組件花費的時間，而且可以節

省多個網站載入相同的組件佔用的記憶體，對

網站載入的速度和消耗記憶體的問題都可以提

供實質的好處。

您只要開啟[適用於 VS2012 的開發人員命令

提示字元]視窗，執行以下的命令，就可以將

位於:C:\Windows\Microsoft..NET\

Framework\v4.0.30319\Temporary

ASP.NET Files 資料夾底下的共同組件當做共

同的組件，並放置到 C:\ASPNETCommon

Assemblies 資料夾：

aspnet_intern -mode exec -sourcedir

"C:\Windows\Microsoft.NET\Framework\v4.0.3

0319\Temporary ASP.NET Files" -interndir

C:\ASPNETCommonAssemblies

除了可以利用 aspnet_intern.exe 命令列工具

提升網站的載入速度以外，ASP.NET 4.5 還可以自

動利用 Web 伺服器配備的多核心處理器進行對網

站進行 JIT 編譯(Just-In-Time Compile)，加速網站

第一次編譯的速度，讓網站第一次被瀏覽時擁有更

好的執行效能。

在改善使用者的瀏覽體驗方面，ASP.NET 4.5

支援網頁程式設計師可以很方便地利用 jQuery 用

戶端網頁設計技術，讓所開發的網頁具備更友善的

瀏覽體驗，利用 jQuery Mobile 設計可以支援多種

行動裝置瀏覽器瀏覽的網頁。除此之外，更可以使

用 ASP.NET 最新的打包技術將網頁使用的

Javascript 和 CSS 檔案打包成單一，體積精簡的檔

案，縮短網頁載入欲使用的 Javascript 和 CSS 檔案

檔案的速度，讓網頁執行時具備更好的效率。

以下就是將上一層資料夾底下名稱為 scripts 的資

料夾中的 Javascript 檔案打包成單一檔案以提升下

載效率的範例：

<script src="../scripts/js"></script>

4.ASP.NET 4.5 功能更豐富

ASP.NET 4.5 支援最新的 MVC 4.0 設計模型，

允許網頁程式設計師利用最新的 MVC 4.0 設計

模型設計以 MVC 設計模型為基礎的網站應用程

式。除了新版的 MVC 4.0 設計模型以外，Visual

Studio 2012 另外支援在建立[ASP.NET MVC 4

Web 應用程式]型態的專案時選擇[行動應用程

式]或[Web API]範本，設計適合行動裝置(例如

智慧型手機和平板電腦)瀏覽的網站，或是支援

利用 HTTP 協定呼叫的服務。圖 1 所示即為建立

[ASP.NET MVC 4 Web 應用程式]型態的專案時

選擇[行動應用程式]範本的操作畫面：

圖 1 ：建立[ASP.NET MVC 4 Web 應用程式]型態的

專案時選擇[行動應用程式] 範本的操作畫面

除了支援利用新的 MVC 4.0 設計模型設計網站

應用程式以外，ASP.NET 4.5 支援新的資料繫結語

法與資料模型繫結功能，協助網頁程式設計師以

Item 和 BindItem 語法繫結至 ADO.NET 實體資料

模型，並將繫結的資料顯示在網頁上，提供建置階

段語法檢查功能，提升程式碼的品質，同時還可以

避免因為執行 Reflection 的動作影響網頁顯示資料

的效率。

22


以下就是利用 Item 語法顯示記錄的

CompanyName 欄位的 GridView 控制項範例：

<asp:GridView ID="GridView1" runat="server" Auto-GenerateColumns="False" CellPadding="4" ForeCol-or="#333333" GridLines="None" AllowPaging="true" ItemType="NorthwindModel.Customers" SelectMeth-od="GetCustomers" >

<Columns>

<asp:TemplateField HeaderText=" Customer">

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text="<%# Item.CompanyName %>"></asp:Label>

</ItemTemplate>


</Columns>

</asp:GridView>

5.ASP.NET 4.5 提供更便捷的網站管理工具

ASP.NET 不僅在支援豐富的控制項和功能，協

助網頁程式設計師設計網頁的功能，也支援各

種好用的工具協助程式設計師分析網站的執行

效能，對網站的程式碼進行單元測試、UI 測

試、負載測試、程式碼分析和度量分析，協助

程式設計師部署網站，以及支援程式設計師管

理網站專案使用的程式庫套件的程式庫套件管

理員。

程式設計師只要執行[工具 | 程式庫套件管理員 |

管理方案的 NuGet 套件]功能就可以啟動程式

庫套件管理員，執行新增或移除網站專案使用

的程式庫套件的動作。圖 2 所示即為程式庫套

件管理員的執行畫面：

圖 2 ：程式庫套件管理員的執行畫面

支援開發與部署雲端網站是另一項使用舊版的

Visual Studio 開發工具搭配 ASP.NET 1.x ~ 4.0 網

頁開發技術難以達到的功能。網頁程式設計師可以

執行 Visual Studio 2012 提供的[檔案 | 新增 | 專案]

功能，看到[新增專案]的畫面後選擇[Visual C#]項目

底下的[Cloud]項目，再點選畫面中央的[取得

Windows Azure SDK for .NET]項目，下載並安裝必

要的套件，就可以利用 Visual Studio 2012 搭配

ASP.NET 4.5 設計能夠部署到雲端的 ASP.NET 網

站，如圖 3 所示：

圖 3 ：使用 Visual Studio 2012 下載並安裝建立雲

端網站專案的相關套件的畫面

6.支援使用 ASP.NET Web API 開發 HTTP 服務

ASP.NET 4.5 支援的 Web API 功能支援網頁程

式設計師利用 HTTP 協定建立 HTTP 服務，協助

多種型式的用戶端程式(包括：瀏覽器、

Windows 應用程式、智慧型手機/平板電腦程

式)利用 GET/POST 命令傳送 XML/JSON 格式的

資料呼叫伺服器端提供的 HTTP 服務，並取回

XML 格式或 JSON 格式的呼叫結果。

7. ASP.NET 1.1 的網站只能在 32 位元的作業模式

執行

64 位元電腦己經普及的現在，為 Web 伺服器

安裝 64 位元的 Windows 作業系統，可以讓網

站擁有更多的可用記憶體，提供更好的運算效

能。但是如果企業中尚有 ASP.NET 1.1 版的網

站需要和 ASP.NET 2.0 或更高版本的網站在同

一部 Web 伺服器提供服務，將會造成 64 位元

Windows 內建的 IIS 服務必須在 32 位元的作業

模式執行，喪失 64 位元的運算與定址能力，造

23


成 64 位元 Windows 內建的 IIS 服務必須在 32

位元的作業模式執行，喪失 64 位元的運算與定

址能力，造成空有 64 位元的電腦，卻沒有 64

位元的 IIS 伺服器，間接影響網站的執行效能。

8. Microsoft 對 ASP.NET 1.1 的維護支援已經於

2008 年 10 月 14 日終止，其延伸維護支援(不

提供免費的維護，也僅提供和安全性有關的修

補)也將於 2013 年 10 月 8 日終止。

基於以上的種種理由，將舊版的 ASP.NET 1.x ~

4.0 網站升級成最新的 ASP.NET 4.5 網站是具未來性

與前瞻性的做法，不但可以支援網頁程式設計師使用

最先進的網頁開發技術設計網頁，同時也可以提升網

站執行效率與安全性，是一舉多得解決方案。

將 ASP.NET 2.0 ~ 4.0 網站升級

成 ASP.NET 4.5 網站

ASP.NET 1.1 網站之後的網站，包括 ASP.NET

2.0 網站、ASP.NET 3.X 網站、和 ASP.NET 4.0 網

站要升級成 ASP.NET 4.5 網站，因為專案結構與檔

案結構都與 ASP.NET 4.5 網站的專案結構與檔案結

構類似，所以升級的動作較為簡單。

如果舊版本的網站是利用[ASP.NET Web 應用程

式]型態的專案建立的，您只要使用 Visual Studio

2012 直接開啟舊版本的[ASP.NET Web 應用程式]

型態的專案的方案檔(副檔名為.sln 的檔案)或專案檔

(副檔名為.csproj 或.vbproj 的檔案)，Visual Stu-

dio 2012 就會直接將方案檔或專案檔升級成 Visual

Studio 2012 的格式，並將升級的報告顯示在瀏覽

器供您

檢視，

如圖 9

所示：

請注意升級的動作只會升級方案檔或專案檔的格

式，不會升級網站專案所使用的.NET Framework

版本，升級後的網站專案可以繼續搭配原來的.NET

Framework 版本提供服務。如果有需要升級網站專

案使用的.NET Framework 版本，請執行[專案 | 專案

名稱屬性]，點選左方的[應用程式]項目，再將[目標

Framework]欄位的內容變更成所需要的.NET

Framework 版本，就可以令升級後的網站使用新版

本的.NET Framework，如圖 10 所示。

[提示]

上述的專案名稱即為網站專案的專案名稱。

圖 9 ：升級舊版本的[ASP.NET Web 應用程式]型態專案的升級報

圖 10 ：變更[ASP.NET Web 應用程式]型態專案所使用

的.NET Framework 版本的畫面

如果舊版本的網站是利用 WebSite 型態的

專案建立的，您可以使用 Visual Studio

2012 直接開啟放置 WebSite 型態網站內容

的資料夾，執行升級 WebSite 型態網站的動

作，如果您的電腦中未安裝 SQL Server Ex-

press，您將會看到如圖 11 的畫面。

圖 11 ：在未安裝 SQL Server Express 的電腦開

啟舊版本的 WebSite 型態網站看到的警告畫面

24


您可以遵循圖 11 畫面的指示為電腦安裝 SQL

Server Express，或是將專案的資料庫升級成使用

SQL Server LocalDB Express。

按下圖 11 畫面中的[確定]鍵就可以利用新版本的

Visual Studio 2012 開啟舊版本的 WebSite 型態網

站。

請注意使用 Visual Studio 2012 開啟版本的

WebSite 型態的網站並不會升級 WebSite 網站所使

用的.NET Framework 版本，被開啟的 WebSite 網

站仍然可以繼續搭配原來的.NET Framework 提供服

務。如果有需要升級 WebSite 網站使用的.NET

Framework 版本，請執行[網站 | 起始選項]功能，點

選左方的[建置]項目，再將[目標 Framework]欄位的

內容變更成所需要的.NET Framework 版本，就可以

令升級後的 WebSite 網站使用新版本的.NET

Framework，如圖 12 所示：

圖 12 ：變更 WebSite 型態網站所使用的.NET Frame-

work 版本的畫面

將 ASP.NET 1.1 網站升級成

ASP.NET 4.5 網站

程式設計師只要執行以下的動作，就可以很容易

地將 ASP.NET 1.1 網站升級成 ASP.NET 4.5 網站：

1.將 ASP.NET 1.1 網站部署到 IIS 伺服器

欲將 ASP.NET 1.1 網站升級成 ASP.NET 4.5 網

站，首先請備份欲升級的 ASP.NET 1.1 網站專

案，然後將 ASP.NET 1.1 網站複製到 IIS 伺服

器，並將複製到 IIS 伺服器的 ASP.NET 1.1 網站

轉換成 IIS 應用程式。

2.使用 Visual Studio 2012 開啟 ASP.NET 1.1 網

站專案的專案檔

請啟動 Visual Studio 2012 並開啟複製到 IIS 伺

服器的 ASP.NET 1.1 網站專案的專案檔(副檔名

為.csproj 或.vbproj)，Visual Studio 2012 就會

自動啟動升級精靈將 ASP.NET 1.1 網站專案升級

成 ASP.NET 4.5 網站。

注意：

這個動作只會升級 ASP.NET 1.1 網站的專案檔

和 web.config 設定檔，不會升級副檔名

為.aspx 的網頁檔案及網頁的類別檔案(副檔名

為.cs 或.vb)。

當升級精靈完成將 ASP.NET 1.1 網站升級成

ASP.NET 4.5 網站之後，您將會看到如圖 13 所示的

移轉報告，您可以詳細檢視報告的內容，以了解移

轉的結果，並處理升級 ASP.NET 1.1 網站發生的錯

誤。

圖 13: 將 ASP.NET 1.1 網站升級成 ASP.NET 4.5 網站的

移轉報告

除了可以看到如圖 13 所示的移轉報告以外，您還

會看到另外一個提示畫面，告訴您己完成升級網站

的第一個步驟，您必須再執行[轉換成 Web 應用程

式]的動作，將網頁的類別檔案升級成 ASP.NET 4.5

的格式，如圖 14 所示，才算完成升級 ASP.NET 1.1

網站

的工

作。

圖 14:提示您必須再執行[轉換成 Web 應用程式]功能才能完成升級網站的工作的畫面

25


請按下圖 14 畫面中的[確定]鍵，關閉圖 14 的畫

面。

3.升級網頁類別檔案

接下來我們就要執行[轉換成 Web 應用程式]功

能，將網頁的類別檔案升級成 ASP.NET 4.5 的

格式。請注意這是一個無法復原的動作，執行之

後網頁的類別檔案將無法還原至執行[轉換成

Web 應用程式]功能的狀態。

請使用滑鼠右鍵點選[方案總管]視窗中的專案名

稱，從出現的功能表選擇[轉換成 Web 應用程

式]功能，執行將網頁的類別檔升級成 ASP.NET

4.5 的格式的動作，螢幕上將會出現如圖 15 的

畫面，提醒您這個動作將會把網頁的類別轉換

成 partial class，並為網頁建立

*.aspx.designer.cs，負責定義網頁需要建立的

控制項物件：

圖 15 ：提醒您升級網頁的類別檔案將會改變網頁對應

的類別檔案的內容的畫面

[說明]

假設網站專案中有名稱為 Default.aspx 的網

頁，及網頁對應的 Default.aspx.cs 類別檔案，

執行[轉換成 Web 應用程式]功能將會改變

Default.aspx.cs 類別檔案的內容並建立一個名

稱為 Default.aspx.designer.cs 的新檔案，負

責定義網頁需要用到的所有控制項物件。

按下圖 15 畫面中的[是]鍵，執行升級網頁類別

的動作。完成升級網頁類別的動作之後請使用

滑鼠右鍵點選[方案總管]視窗中的網站專案，

從出現的功能表選擇[重建]功能，對網站專案

執行重建(Rebuild)的動作，令網站使用新版本

的.NET Framework 組件進行建置，並處理建

置網頁類別檔案發生的錯誤。做好之後就完成

將 ASP.NET 1.1 網站升級成 ASP.NET 4.5 網站

的工作了。

1.網頁檔案(.aspx)的差異

從現代化網頁的角度來看，ASP.NET 1.1 版的網

頁檔案的內容與屬性設定皆未符合 XHTML 文件的規

範，包括：標籤大小寫的問題(例如<HTML>、和

<HEAD>等標籤預設都使用大寫)，屬性內容值未包

覆在雙引號中(例如控制項的 Width 和 Height 屬性

的內容值預設都未包覆在雙引號中)，開頭標籤與結

尾標籤對應的問題(例如、 、<hr>等標籤

都可以擁有開頭標籤，但是缺少結尾標籤)，<img>

標籤未設定 alt 屬性的內容值，以及<body>標籤設

定的 MS_POSITIONING 屬性等等都是 ASP.NET

1.1 版的網頁文件不符標準的範例。網頁程式設計師

可以執行 Visual Studio 2012 的[檢視 | 錯誤清單]功

能檢視網頁文件不符標準的警告並加以修正，避免

將網頁內容顯示到用戶端瀏覽器時發生異常。

ASP.NET 1.1 版的網頁檔案不但有未符合 XHTML

文件規範的問題，而且網頁的<body>標籤預設使

用 GridLayout 版面配置與絕對定位方式，如果要為

網頁加入新的控制項，新加入的控制項預設會採用

FlowLayout 定位方式由上到下，由左到右擺放，而

且未使用絕對定位，若要定位新加入的控制項，可

以視需要為網頁加入<table>表格，以定位新加入的

控制項，如果要定位 ASP.NET 1.1 版網頁中原有的

控制項，則必須刪除原有的控制項的 style 屬性的設

定，令其不再使用絕對定位，才能和新加入的控制

項一起放在表格中進行定位。

ASP.NET 1.1 版的網頁檔案範例：

ASP.NET 1.1 網站與 ASP.NET

4.5 網站的基本差異

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>WebForm1</title>

<meta content="Microsoft Visual

Studio .NET 7.1" name="GENERATOR">

26


<meta content="C#"

name="CODE_LANGUAGE">

<meta content="JavaScript"

name="vs_defaultClientScript">

<meta content="http://

schemas.microsoft.com/intellisense/ie5"

name="vs_targetSchema">

</HEAD>

<body MS_POSITIONING="GridLayout">

</body>

</HTML>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" con-

tent="text/html; charset=utf-8"/>

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

</div>

</form>

</body>

</html>

ASP.NET 4.5 版的網頁檔案範例：

InitializeComponent 方法會變成空的方法，所有

需要建立的控制項物件都會交由新建立的 designer

檔案負責定義。

ASP.NET 1.1 版的網頁類別檔案範例：

2.網頁類別檔案(.aspx.cs)的差異

除了網頁檔案有差異以外，網頁的類別檔案也有

顯著的差異。例如 ASP.NET 1.1 版的網頁類別檔案

定義的網頁類別並未宣告成 partial class，而且會

由網頁的類別中名稱為 InitializeComponent 方法

負責建立網頁欲使用的控制項物件並設定物件的屬

性。ASP.NET 1.1 網頁類別檔案升級之後，網頁的

類別會宣告成 partial class，而且類別中名稱為

public partial class WebForm1 : System.Web.UI.Page

{

protected void Page_Load(object sender, Sys-

tem.EventArgs e)

{

}

private void InitializeComponent()

{

//建立控制項與設定控制項的屬性

}

}

ASP.NET 4.5 版的網頁類別檔案範例 - *.aspx.cs ：

public partial class WebForm2 : Sys-

tem.Web.UI.Page

{

protected void Page_Load(object sender, Even-

tArgs e)

{

}

}

ASP.NET 4.5 版的網頁類別檔案範例 -

*.aspx.designer.cs ：

public partial class WebForm2

{

protected glob-

al::System.Web.UI.HtmlControls.HtmlForm form1;

}

web.config 設定檔的重要設定

27


<xhtmlConformance mode="Legacy"/>

<pages controlRenderingCompatibilityVer-

sion="3.5" clientIDMode="AutoID"/>

將 ASP.NET 1.1 版的網站升級成 ASP.NET 4.5 版

的網站之後，web.config 設定檔會加入以下的兩行

設定，其中將 xhtmlConformance 標籤的 mode

屬性設定為 Legacy，表示要以 ASP.NET 1.1 版的

方式輸出網頁內容，控制 ASP.NET 控制項輸出到用

戶端瀏覽器時 name 屬性內容值的命名方式，避免

影響依賴控制項的 name 屬性內容值進行控制的程

式碼。除此之外也會控制所輸出到用戶端瀏覽器的

HTML 文件是否符合 XHTML 的規範，亦即 HTML

文件標籤的開頭標籤與結尾標籤是否配對的問題。

因為將 ASP.NET 1.1 網站升級成 ASP.NET 4.5 版網

站並未對網頁檔案(.aspx)執行任何升級的動作，所

以必須加入這個設定，如果網頁程式設計師將網頁

檔案更新成符合 XHTML 規範的語法之後，就可以

刪除這個設定。

將 page 標籤的

controlRenderingCompatibilityVersion 屬性的內

容值設定為 3.5 表示要令部署到執行環境為.NET

Framework 4.0 版的應用程式集區的 ASP.NET 網

站的控制項要採用與 ASP.NET 3.5 版相同的方式輸

入內容到用戶端瀏覽器，而將 clientIDMode 屬性

的內容值設定為 AutoID，也是 ASP.NET 3.5 版預

設採用的控制項 ID 的產生方式。

將 ASP.NET 1.1 網站升級成 ASP.NET 4.5 版網站

新加入到 web.config 設定檔的設定：

效能。若無法將網站所使用的 32 位元元件升級成

64 位元元件，則必須設定網站能夠執行 32 位元的

元件。

欲設定網站可以執行 32 位元的元件，請啟動

[Internet Information Service(IIS)管理員]，使用滑

鼠右鍵點選 ASP.NET 網站執行所在的應用程式集

區，執行[進階設定]功能，將[啟用 32 位元應用程式]

設定的內容值變成為 True，讓於 64 位元作業模式

執行的 IIS 伺服器所執行的 ASP.NET 網站能夠順利

地使用 32 位元的元件提供的功能。

圖 16 所示即為設定網站可以執行 32 位元的元件

的畫面：

完成將 ASP.NET 1.1 網站升級成 ASP.NET 4.5 的

網站之後，如果升級後的網站將部署到 64 位元的

電腦執行，而且 IIS 伺服器將採用 64 位元的作業模

式，就必須注意網站是否有使用到 32 位元的元

件，如果有的話，最好將網站所使用的 32 位元元

件也升級成 64 位元元件，避免影響到網站的執行

圖 16 ：設定網站可以執行 32 位元的元件的畫面

重要的升級注意事項將 ASP.NET 1.1 版的網站升級成 ASP.NET 4.5 網

站之後，就可以將 ASP.NET 網站執行所在的應用程

式集區的[.NET Framework 版本]設定變更成：

v4.0，而且最好可以將 ASP.NET 網站執行所在的應

用程式集區的[Managed 管線模式]設定變更為：

Integrated，以發揮 IIS 伺服器新的執行架構的優

點，讓 ASP.NET 網站執行的更有效率。

欲設定應用程式集區的[.NET Framework 版本]和

[Managed 管線模式]設定，請啟動[Internet Infor-

mation Service(IIS)管理員]，使用滑鼠右鍵點選

28


ASP.NET 網站執行所在的應用程式集區，執行[進

階設定]功能，就可以執行設定[.NET Framework

版本]和[Managed 管線模式]設定的工作了，如圖

17 所示：

將 ASP.NET 1.x ~ 4.0 版的網站升級成 ASP.NET

4.5 版網站的做法是具前瞻性與未來性的做法，不

但可以利用最新的 HTML 5 與 CSS3 網頁開發技

術、MVC 4.0 設計模型、和 ASP.NET Web API 設

計現代化的網頁，也可以讓所開發的網站具備更佳

的安全性和更好的執行效能。除此之外還可以利用

Visual Studio 2012 支援的最新網站部署工具快速

地將設計好的網站部署到 IIS 伺服器或是 Windows

Azure 雲端。

圖 17 ：執行設定[.NET Framework 版本]和[Managed 管

線模式]設定的畫面

結語

29


使用 jQuery Mobile 及 ASP.NET 開發跨行動裝置網站

(Mobile Web)

在行動式裝置普及化的現在，要開發一個能夠跨

行動式裝置的原生應用程式 (Native App) 是非常不

容易的，除了需要了解不同的作業系統的差異 (Ex:

Windows Phone、Android、iOS)，還需要了解各種

程式開發技術 (Ex: .NET、JAVA、Objective C)，寫一

套軟體就要寫三四種版本，對程式開發者來說，是一

個很大的進入門檻。

一般來說，我們在各種行動式裝置上所能得到資

訊的方式，除了原生應用程式之外，也能夠由網頁上

得到 (例如，網路訂位、論壇資訊)，而其實網頁是能夠

解除各家不同行動裝置使用上限制的最佳途徑，當然，

網頁的功能有侷限 (如，電子羅盤，相機，重力偵測)，

但是如果針對一般性提供資訊的應用程式來說，例如

企業相關的應用，通常是表單式、或是查詢及報表類

的應用程式，這類的應用通常也僅供內部員工或特定

使用者操作，並非要上架到 App 市集供外部消費者下

載使用，使用網頁開發一種很好的選擇。

但是以往的網頁應用程式介面，其實大部分都

不太適合現今的行動裝置所使用，畫面不是過大，就

是因為內容過多而導致載入速度不佳，甚至是瀏覽方

式並不適合行動式裝置，有鑑於此，jQuery 就推出

一套新的函式庫： jQuery Mobile。

簡單的說，jQuery Mobile 希望能夠統一市面上

常見行動裝置的使用者介面系統。它是在 jQuery 與

jQuery UI 的基礎下，一個有彈性且易主題化的一個

輕量級函式庫。而它做法上關鍵的差別，就是在於目標

是各種行動裝置，希望讓各種行動裝置的瀏覽器都能

夠支援，就如同對於桌上型的瀏覽器一般，並且在使用

網頁時，能夠以接近一般原生應用程式的經驗來操作

(Ex: 觸碰或滑動)。

jQuery Mobile 的主要特色

※ 以 jQuery 為核心

※ 輕量化檔案

※ Html5 Markup-driven

※ 自動切換排版

※ 支援滑鼠與觸碰事件

※ WAI-ARIA

※ 強大的佈景主題系統

※ ASP.NET MVC 的支援

※ 支援市面上大部分行動裝置

※ 畫面的一致化

※ 多樣化的 UI

行動裝置的支援

jQuery Mobile 幾乎支援市面上所有的行動裝置

(Windows Phone, iOS, Android, Symbian, Black-

berry …)，它的其中一個特點是會 "自動降低能力"，能

夠針對支援性不那麼好的行動裝置瀏覽時，自動關閉

該裝置所不支援的功能，以求功能呈現的最大化。因

為行動平台與瀏覽器版本多元且不斷的推陳出新，建

議讀者在閱讀文件時，可至 jQuery 官方網站的支援

一覽表： http://jquerymobile.com/gbs/ ，取得最

新的 jQuery Mobile 行動裝置支援資訊。

jQuery Mobile 開發環境

當我們要開始開發 jQuery Mobile 時，必須要

先做點準備功課。

作者:周季賢 (恆逸資訊資深講師)

http://jquerymobile.com/gbs/

30


開發工具

首先關於開發工具，雖然 Notepad 就能夠編輯，

但是如果希望能在開發上可以輕鬆一點的話（如程式

碼提示功能、HTML 標籤的檢查），還是須要有個順手

的工具，本文的示範是以 Visual Studio 2012 為開發

工具，此版本加強了前端網頁的開發能力（HTML、CSS

與 JavaScript），非常方便於開發 jQuery Mobile，預

設就支援 HTML5 標籤的支援。（文後會再特別介紹）

測試工具

因為對象是以行動式裝置為主，所以用一般的

桌上型瀏覽器其實不太適合，建議可以使用以下的測

試工具來協助您開發：

1. 桌上型瀏覽器

※ Apple Safari with the user agent set to iPhone

※ FireFox with the FireFox User Agent Switcher

2. 行動裝置模擬器

※ Windows Phone Emulator

※ Opera Mobile Emulator

※ MobiOne Studio

開發 jQuery Mobile 網頁

下載函式庫

在開發 jQuery Mobile 之前，必須做的第一件

事情就是下載函式庫（.js 檔），因為 jQuery Mo-

bile 是以 jQuery 為基礎來擴充的，所以必須要連

jQuery 函式庫一併下載。目前下載方式有下列幾

種：

1. 直接前往官方網站下載

※ jQuery ：

http://jquery.com/download/

※ jQuery Mobile ：

http://jquerymobile.com/download/

2. 不下載，直接使用微軟 CDN（Content Delivery

Network）上的檔案

※ http://www.asp.net/ajaxLibrary/

CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_3

3. 最建議的方式，使用 Visual Studio 2012 的 NuGet 套

件管理員來安裝，NuGet 套件管理員可以使用關鍵字

來搜尋可安裝的套件，你可以在上面找到最新的

jQuery 與 jQuery Mobile 的函式庫安裝至你的網站，

如下圖：

除此之外，安裝後 NuGet 套件管理員會加入一個

設定檔至網站內，來記住安裝過的套件，並可協助您

做版本的更新。如下圖，如果網站內所裝 jQuery

Mobile 函式庫套件版本為 1.1.0，那麼在更新的分類

中，就會看到 jQuery Mobile 的更新選項，並提示可

更新到 1.1.1 ：

http://jquery.com/download/

http://jquerymobile.com/download/

http://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_3

http://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_3

31


如此一來就不需要在函式庫版本更新後，還得要

一一去網站取得最新的檔案或是 CDN 的連結了。

引用函式庫

除了下載 jQuery Mobile 與 jQuery 函式庫，在

開發 jQuery Mobile 的網頁時，還必須能夠讓網頁

上引用函式庫 (.js) 與樣式表 (.css) 檔案，而方式有下

列幾種：

1. 任一種 ASP.NET 的網站，都可以直接加入引用標

籤來使用，如下引用至 CDN ：

<link href="Content/jquery.mobile-1.1.1.min.css"

rel="stylesheet" />

<script src="Scripts/jquery-1.8.0.min.js"></script>

<script src="Scripts/jquery.mobile-1.1.1.min.js"></script>

這種方法較為不方便的地方在於，函式庫更新後，引

用標籤就必須要隨之更新。

2. ASP.NET MVC 4 的網站，可以使用 Bundles 功能

來引用函式庫；此方法的優點在於函式庫更新之

後，能夠自動套用新版的能力。

設定畫面尺寸大小

另外設計時最好在<head>區段中加入<meta>

標籤設定 viewport，用來通知瀏覽器顯示畫面時尺寸

的大小，以及能否控制縮放。設定 viewport 的好處是

會自動根據瀏覽器或裝置的大小作畫面輸出，如果沒

有設定此標籤，可能會有畫面過小，或畫面超出行動

裝置本身所支援的寬度而造成檢視不易的問題，標籤

如下： < m e t a n a m e = " v i e w p o r t " c o n -

tent="width=device-width, initial-scale=1">

範例中設定 width 為 device-width 表示把畫面

設定為與行動裝置寬度相同； initial-scale 代表畫面

初始的大小，設為 1 代表畫面縮放 100%。

有關於 viewport 的其它設定可以參考 W3C 文

件： http://dev.w3.org/csswg/css-device-adapt/

jQuery Mobile 網頁基本組成

jQuery Mobile 的網頁基本組成是由 <div> 再

加上 HTML5 標籤所組成的，基本組成有三個成員：

header、content 與 Footer，每個成員都使用 <div>

標籤再加上 "data-roles" 屬性來指定，最後在放置到

頁面 (Page) 標籤內即可，以下是簡單的範例：

<div data-role="page">

<div data-role=“header”>

表頭

</div>

<div data-role=“content”>

網頁內容

</div>

<div data-role=“footer”>

表尾

</div>

</div>

設計完成之後，就可以看到 jQuery Mobile 的

網頁基本雛型了，如下圖在 iOS 模擬器中所示：

32


jQuery Mobile 網頁視覺化元素

(以下圖示以 iOS 模擬器為範例)

jQuery Mobile 最有價值的部分之一，就是針對

網頁外觀提供了各種視覺化的元素，並且可以讓我

們再搭配 HTML 5 標籤之後輕鬆的開發，以下為各

視覺化元素的簡介：(部分圖片節錄至 jQuery Mo-

bile 官方網站)

1.文字輸入方塊

<input type="text" name="name" id="basic" value="" />

2.選取數值

<input type="range" name="slider" id="slider-0"

value="25" min="0" max="100" step="5" />

3. 設定開關

<select name="slider" id="flip-a" data-role="slider">

<option value="off">Off</option>

<option value="on">On</option>

</select>

4. RadioButton

<fieldset data-role="controlgroup">

<legend>Choose a pet:</legend>

<input type="radio" name="radio-choice-1"

id="radio-choice-1" value="choice-1" checked="checked" />


id="radio-choice-2" value="choice-2" />





</fieldset>

5. 核取方塊

<input type="checkbox" name=

"checkbox-1" id="checkbox-0" class="custom" />

6. 清單方塊

<select name="select-choice-0" id="select-choice-1">

<option value="standard">Standard: 7 day</option>

<option value="rush">Rush: 3 days</option>

<option value="express">Express: next day</option>

<option value="overnight">Overnight</option>

</select>

33


7. 簡易清單

<ol data-role="listview" >

<li><a href="acura.html">Acura</a></li>

<li><a href="audi.html">Audi</a></li>

<li><a href="bmw.html">BMW</a></li>

</ol>

8.複雜清單

jQuery Mobile 事件

如果要針對 jQuery Mobile 做進一步的開發，事

件是不可或缺的一項學習重點，最經常使用的就是

Pageinit 事件，該事件與 JQUERY 的 $(docu-

ment).ready() 相似，提供給頁面中每一 Page 初始化

使用，簡易的撰寫方式如下：

$('Page 的 ID').live('pageinit',function (event) {

//初始化該做的事情。

});

另外特別的部份在於 jQuery Mobile 也能針對

行動式裝置提供專屬的事件，如滑動與觸摸事件，

可供我們在開發時做各種設計。

其餘事件可以參考 jQuery Mobile 官方文件：

http://jquerymobile.com/demos/1.1.1/docs/api/

events.html

ASP.NET 搭配 jQuery Mobile

基本上，jQuery Mobile 是針對前端 (瀏覽器端)

的介面與程式開發技術，而本身也不具備後端 (伺服

器端) 的能力，所以如果要開發網頁應用程式，勢必要

搭配其他技術。

ASP.NET 本身就具兼具前後端的應用程式開發能

力，但目前對於行動式裝置的前端部份支援，可以由

jQuery Mobile 負責前端的畫面與程式執行能力，而

ASP.NET 只要處理後端即可。

使用 ASP.NET 開發搭配的 jQuery Mobile 網站

也有兩種選擇：

1. ASP.NET Web Form

因為設計時需要搭配伺服器控制項與伺服器端事

件 (ex Postback)，所以挑選控制項時必須要先以能夠

產出符合 jQuery Mobile 所能辨識的為主。

2. ASP.NET MVC (較為恰當)

因為本身開發就是使用純 HTML 與 Http Post/Get

的最基本方式開發，所以搭配 jQuery Mobile 時較為

容易。

34


ASP.NET MVC 4 的支援

ASP.NET MVC 在第四版針對 jQuery Mobile 在

開發上的支援大幅提升了，不僅是頁面樣板部分有直

接提供，還針對行動裝置部份能夠在辨識後提供不同

的畫面。

ASP.NET MVC 4 Template

Visual Studio 2012 能夠在建立網站專案時提供

ASP.NET MVC 4 的樣板，如下圖，專案範本可以先挑

選 ASP.NET MVC 4 Web 應用程式：

選擇之後，還可進一步的選擇開發網站類型 (如：

網際網路應用式、本地網路應用程式或行動裝置應用

程式)，如下圖：

Display Modes

Display Modes 可依照裝置提供不同的瀏覽畫

面，設計方法很簡單：

A. 至 Global.asax 的 Application_Start 事件處理常

式內註冊裝置 Ex: iPhone

DisplayModeProvider.Instance.Modes.Insert(0, new Default-DisplayMode("iPhone")

{

ContextCondition = (context => con-text.GetOverriddenUserAgent().IndexOf

("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)

});

B. 依照裝置名稱建立對應 action 的網頁 Ex: In-

dex.iPhone.aspx，如下圖：

設計完成之後一般瀏覽器檢視就如下圖：

使用 iOS 模擬器檢視就變成另一張所提供的網頁，

如下圖：

35


ViewSwitcher

ViewSwitcher 提供行動式裝置將瀏覽模式切換

至一般瀏覽器的瀏覽模式的選擇，屆時行動裝置在檢

視網頁時，除了提供專屬的畫面之外，還能提供切換

回一般瀏覽器的檢視模式，如下圖，使用 iOS 模擬器

檢視畫面時，會出現一個換回桌上型電腦瀏覽器的連

結：

點選之後，就可以切換到桌上型電腦瀏覽器的檢視

畫面，如下圖：

另外，也能夠切換回行動裝置的版本。

Bundles

ASP.NET MVC 4 內建了 Bundles 功能，你可以

ASP.NET MVC 4 範本所建立出來的網站資料夾＂

App_Start ＂下的 BundleConfig.cs 檔案中找到設定

的程式碼，該功能的好處在於：

A : 合併檔案並壓縮

Bundles 功能能夠將所需要下載的 CSS 與 js 檔

案，依照分組來合併，變成單一檔案並壓縮後供瀏覽

器下載，來達到傳輸效率的最大化，如下圖為使用前

（或使用 Bundles 功能卻將除錯模式開啟），網頁引

用標籤是對應到原始檔案：

而使用後，則是由 Bundles 功能來提供下載：

B : 支援自動對應目錄下的檔案

在使用 jQuery Mobile 函式庫時，經常遇到的問

題就是 jQuery Mobile 與 jQuery 改版的速度很快，當

你還在熟悉 1.1.0 版時，1.1.1 版就已經推出了。而在

改版之後除了檔案要更新之外，另外還得辛苦的 Find

And Replace，將網頁上所有的引用標籤換過一次。

而 Bundles 功能可以統一的指定每次網頁執行時都

要引用特定目錄下的固定特徵的檔案，如下：

bundles.Add(new ScriptBundle("~/bundles/

jquerymobile").Include("~/Scripts/jquery.mobile*"));

如此就可以在檔案變更時，讓 Bundles 功能自動

的替我們更新至每一張網頁。如下圖，當 Scripts 資料

夾下的 jQuery Mobile 函式庫檔案為 jquery.mobile

-1.1.0.js 時，網頁則自動引用該版本標籤：

36


而當我們把 Scripts 資料夾下的 jQuery Mobile

函式庫檔案改為 jquery.mobile-1.1.1.js 時，網頁則

自動更新該版本函式庫的參考：

Visual Studio 2012 新功能

針對 jQuery Mobile 及 HTML5

當 jQuery Mobile 的出現讓行動裝置網頁開發

更方便後，微軟也適逢其時的在 2012 年推出了 Visual

Studio 2012 ；相較於前版，網頁開發強化最多的就

是針對前端網頁開發的能力，包含了 H T M L 、

JavaScript與CSS的編輯與支援；因此Visual Studio

2012 的推出也正好讓透過 jQuery Mobile 來開發行

動裝置網頁設計師們，能有一個強大且方便的設計工

具。

下文是針對 Visual Studio 2012 開發 jQuery

Mobile 中會使用到的新功能來做介紹。

HTML

我們先針對 HTML 編輯部分來做介紹:

支援 HTML5 標準

在 Visual Studio 2012 中撰寫 HTML 網頁或 Web

表單時，預設即支援 HTML5 標準，除了加入的檔案上

方會自動加上：

<!DOCTYPE html>

並且在設計網頁內容時，也會主動支援 HTML5

標籤，如下圖：

HTML5 智慧感知（IntelliSense）功能

Visual Studio 2012 提供了 HTML 智慧型感知

功能，並且支援 HTML5 的標籤，例如要加入 HTML

5 的 Canvas 標籤時，鍵入”<c”，此時智慧感知功

能就會啟動，出現下拉選單來提示可協助輸入 Can-

vas 標籤，如下圖：

HTML 5 程式碼片段（Code Sinppet）功能

除了智慧感知支援 HTML5 之外，程式碼片段功

能在此版本也能夠支援部分 HTML5 標籤的輸入，例

如在程式碼片段網頁選項中的 HTML 分類，就能夠

挑選具有 HTML5 宣告的標記程式碼片段，如下圖：

HTML 自動縮排

在此版本的 HTML 編輯器中，提供了更方便的

標籤縮排功能；經常我們在設計 HTML 標籤時，經

常會不對齊、亂換行，如下圖：

37


而此時我們能在需要整理的最上層標籤上方找

到一個 tip 方塊，此時會出現一個”格式項目”的選項，

如下圖：

點選該項目之後，立刻就可將標籤自動縮排，

完成後如下圖：

CSS

CSS 部分在 Visual Studio 2012 也提供了很多開

發上的新功能：

CSS 內容摺疊功能

以往在網頁上設計 CSS 語法時，只能將所有的

CSS 內容一次全部折疊，如下圖：

而在此次版本內，能夠針對內部的每一個選擇器

來做摺疊，如此就能夠更方便的整理文件內容了，如

下圖：

CSS 色彩選擇器

此版本的 CSS 語法中，如果需要加入色彩值

時，如下圖：

此時可輸入”#”或是”rgb(”這兩組文字，便

可開啟色彩選擇器，如下圖：

如果需要挑選更多樣化一點的顏色，可以按下選

擇器又方的向下箭頭，或是鍵盤的向下鍵，便可開啟

進階選擇器，如下圖：

開啟進階選擇器之後，除了可以選擇更細緻的顏

色，還可以用滴管工具來挑選系統畫面上的任何一處

的顏色，另外還有透明度可供調整。

38


CSS 語法片段功能

CSS 在設計時，Visual Studio 2012 能夠提供

程式碼片段能力，並且提供說明文字，而利用程式

碼片段功能加入 CSS 語法時，語法片段還會加入不

同前置詞的設定來供跨瀏覽器使用，例如當我們要

使用該片段來輸入透明度時，如下圖：

選擇了該片段按下”Tab”鍵兩次，語法片段就

會被加入，如下圖：

而設定中-moz 開頭的設定便是給 Mozilla 相容

的瀏覽器看的。

JavaScript

Visual Studio 2012 這個版本最令人驚艷的部分

之一，就是大大加強了 JavaScript 的編輯能力。以往

在編寫 JavaScript 的程式碼時，常常都讓我們在開發

時都有感覺到”是不是可以再加強一點，就像是寫

Visual Basic 或 C#”?

相信微軟聽到了我們的心聲，終於在 Visual

Studio 2012 將一直以來我們在開發 Visual Basic 或

C#語言時可以使用的各種方便的編輯功能，像是”移

至定義”、程式自動縮排功能、”智慧感知”…等等，

整合至 JavaScript 編輯工具中，讓我們能夠在開發

JavaScript 時，更容易找尋到程式碼，且便於管理。

以下是關於 JavaScript 在此版本的新功能：

排版能力的增強

Visual Studio 2012 在撰寫 JavaScript 程式中的

function 時，游標停留在 function 開頭的「{」號，或

結尾的「}」時，JavaScript 編輯工具就會自動將對應

的括號反白顯示，如下圖所示：

若輸入程式碼，也會自動進行縮排，當在 JavaScript

程式區塊中撰寫完程式碼，並按下鍵盤「Enter」鍵時，

工具就會自動排版程式碼，如下圖所示：

支援 ECMAScript5 標準

Visual Studio 2010 的 JavaScript 編輯工具，提

供 ECMAScript3 標準的驗證機制，能夠協助我們檢查

撰寫完的 J a v a S c r i p t 程式碼是否有符合

ECMAScript3 規範。而 Visual Studio 2012，則遵循

新的 ECMAScript5 標準。

ECMAScript5 標準中新增一個名為”Strict

Mode”的功能，可以讓你的程式碼執行在更嚴謹的環

境中，能夠避免瀏覽器執行到不安全的程式碼，或丟

出例外。

例如在函式中宣告一個物件，而該物件的兩個屬

性名稱重複了，若沒有使用 Strict Mode 功能，Visual

Studio 2012 的 JavaScript 編輯工具不會顯示任何問

題。如下圖所示：

而如果在函式第一行加上"use strict"來啟用

strict 模式，則當宣告的物件屬性名稱重複時，Visual

Studio 2012 的 JavaScript 編輯工具會自動進行語法

的驗證，並回報問題，如下圖所示：

39


另外，在「錯誤清單（Error List）」視窗便會

顯示警告訊息，如下圖所示：

XML 註解功能

Visual Studio 2012 的 JavaScript 能夠像 C#及

Visual Basic 程式語言一樣，利用 XML 註解來加上程

式的說明了，不過做法與 C#及 Visual Basic 不太一

樣，不是寫在函式上面，是寫在函式”裡面”，加入

的方式可以選擇程式碼片段功能或自行鍵入。

如果要使用程式碼片段功能，可以在程式碼片段

功能中的”XML Comments”分類中找到，如下圖所

示：

而程式碼片段功能就能自動偵測該函式的”

name”參數，並替我們加入一行”param”項目來

針對輸入的參數提供註解功能，如下圖所示：

另外也可以加入” summary”項目來提供函式

說明，如下圖，我們加入了一個” summary”項

目，並將函式說明設定為”打招呼”：

如此，在使用該函式時，Visual Studio 2012

便會自動顯示 XML 註解中的說明，如下圖所示：

另外，也可以使用” signature”項目來提供函

式多載（Overload）的註解說明。

移至定義（Go to Definition）

當我們在開發 C#及 Visual Basic 程式語言時，能

夠用”移至定義”功能來尋找到程式碼中所使用到的函

式或類別的定義。 Visual Studio 2012 的 JavaScript

編輯器也提供該功能， JavaScript 編輯器的”移至定

義”功能能夠協助我們尋找變數與函式的定義，例如在

程式碼中呼叫到 SayHello 函式，如果希望能夠檢視該

函式的定義，可以按下滑鼠的右鍵，選擇”移至定義”，

如下圖：

如此工具就會游標切換至該函式定義所在的位

置（就算在外部的 js 檔亦可），如下圖所示：

網頁開發與除錯的新功能

除了上述的三種編輯器能夠提供我們在開發

jQuery Mobile 的幫助之外，Visual Studio 2012 還

有提供其他開發與除錯上的新功能，例如

Multibrowser 支援、Page Inspector、WAI-ARIA 支

援等等，以下是其他開發與除錯上新功能的介紹：

Multibrowser 支援

Visual Studio 2012 能夠讓我們挑選用安裝於系

統中的任一個瀏覽器來測試網頁結果。此功能讓我們

在開發網站應用程式時，可使用各家瀏覽器的來測試

網頁輸出的結果是否如預期。該功能會在開始偵錯按

鈕旁邊，如下圖所示：

40


你也可以選擇最下方的”瀏覽方式”選項，開啟

瀏覽器選擇視窗，並搭配 Ctrl 鍵來同時選擇多個瀏覽

器，並設為預設值，如下圖所示：

如此除錯列就會顯示為＂多重瀏覽器＂，如下圖：

而當要對某張網頁要按下右鍵選擇瀏覽時，選單

中也會顯示＂多重瀏覽器＂。如下圖：

點選後就如下圖，一次就開啟了 Google

Chrome、Internet Explorer 與 Page Inspector ：

但是當要開始偵錯時，就只能挑一個瀏覽器。按

下開始偵錯的按鈕，Visual Studio 2012 會跳出選擇

視窗來讓你挑選一瀏覽器當作偵錯的依據，如下圖：

Page Inspector

Visual Studio 2012 在這個版本提供了強而有力

的網頁測試與偵錯工具” Page Inspector”，該工具

能夠讓我們檢視網頁（包含 HTML, Web Forms,

ASP.NET MVC, or Web Pages）在執行時期的狀態，

像是網頁所使用到的相關檔案列表、CSS 的套用或關

閉與伺服器控制項的對應等等。接下來介紹 Page

Inspector 的相關功能。

啟動 Page Inspector

您可以在偵錯選單中

選擇 Page Inspector 當作

預設瀏覽方式，如圖：

41


或是在檔案總管中對網頁檔案按下右鍵選擇”檢

視 Page Inspector”

如此就可以開啟 Page Inspector 檢視視窗，如

下圖：

檢視網頁組成的清單

Page Inspector 視窗開啟後，可以在視窗左下方

的工具視窗找到”檔案”頁籤，切換至該頁籤後，便

可以看到組成該網頁完整內容所需要的所有檔案，如

下圖所示：

網頁 HTML 原始碼檢視功能

ASP.NET 是動態網頁架構，設計時期所開發的網

頁檔與屆時使用者端瀏覽器所得到的網頁的結果並

一樣；也因此我們經常需要檢視瀏覽器所得到的網

頁結果與我們設計時所預期的是否相同。

Page Inspector 左下方的 HTML 頁籤，能夠讓我

們立刻檢視瀏覽器所得到的網頁結果；如圖所示：

而此功能還可協助我們做畫面的對應，例如點選

視窗中的 HTML 區段，則上方的結果視窗會自動將對

應的畫面內容反白顯示。如下圖，點選 Header 區段

後，上方的 Header 部分就自動被反白：

檢查（Toggle Inspection）模式

檢查（Toggle Inspection）模式則是與上述的方

式相反，可以讓我們點選視窗上方的畫面，左下方

HTML 畫面與右方的網頁檔案畫面都會自動反白對

應的區段作對應。

使用方式為按下右下方的”檢查按鈕”，待游標

變成十字形時，便可移動至視窗上方點選任何一個區

段，左下方 HTML 畫面與右方的網頁檔案畫面都會自

動反白對應，如下圖所示：

樣式表切換

當點選右下方 HTML 頁籤中的 HTML 區段時，右

下方的視窗中的”樣式”頁籤能夠列出該區段所套用

的所有 CSS，並且能夠提供立即切換後檢視結果的功

42


能；如下圖中 p 區段的背景顏色，就能夠利用將屬性

中的核取方塊取消勾選來取消 CSS 的套用：

將核取方塊取消勾選後，該區段的背景顏色就會

立刻消失，如下圖：

CSS 修改

另外除了切換套用之外，Page Inspector 也支援立

即修改的功能，在樣式視窗中可以直接點選屬性兩下來開

啟立即修改功能，如下圖所示：

修改後如下圖：

修改 DOM 內容

與上述的 CSS 修改功能相同，也能夠在左下方

的 HTML 頁籤視窗中來立即修改 DOM 元素的內容，

如下圖所示：

修改後上方預覽視窗也會立刻對應變更，如下圖：

更新列（Update bar）

當啟動 Page Inspector，而又回頭修改了網頁的

檔案內容時，此時 Page Inspector 上方的視窗會出現

更新工作列，來協助我們快速更新網頁內容而不需要

再重新啟動 Page Inspector。

例如在網頁原始檔加入一組新的 p 標籤，如下圖：

43


回到 Page Inspector 後，會發現上方出現黃色的

更新列來供我們點選或是按下”Ctrl + Alt + Enter”來

做立即更新。

WAI-ARIA 支援

WAI-ARIA ( Accessible Rich Internet Appli-

cations Suite) 是 W3C 所制定中的一個標準，此標準

設置的目的是希望能夠讓身障人士更容易存取使用

Ajax、HTML、JavaScript 等技術所設計的網站或網際

網路的內容。而 Visual Studio 2012 現在已經支援這

個標準。

總結

市場在改變，行動裝置應用程式開發目前已經變

成一門顯學，如果希望以現有的網站開發技術觀念來

快速並簡易地開發跨行動裝置的輕量型應用程式，那

麼 jQuery Mobile 搭配 ASP.NET 是您的最佳選擇。

本文也介紹了針對 jQuery Mobile 開發，Visual

Studio 2012 開發工具所提供的新功能。如果您也在

開發 jQuery Mobile，那您一定不能錯過 Visual Stu-

dio 2012。

MSDN 邊做邊學 –使用 jQuery Mobile 及 ASP.NET

開發跨行動裝置網站 (Mobile Web):

http://msdn.microsoft.com/zh-tw/hh875190.aspx


44

HTML 編輯器及專案相容性

作者:黃保翕 (微軟 MVP)

提升 Visual Studio 2012 與

Visual Studio 2010 之間的專案相容性

在以往的 Visual Studio 各版本，每次都會遇

到專案檔升級後無法再用較低的版本開啟的情況，

例如用 Visual Studio 2010 開啟 Visual Studio

2008 的專案並執行自動升級，就會導致該專案再也

無法於 Visual Studio 2008 開發工具中開啟。

然而這個現象在 Visual Studio 2012 中已經

得到改善，在大多數的專案類型裡，例如 Console,

Windows Form, WPF, ASP.NET WebForm, ASP.NET

MVC 3, … 等，預設的情況下使用 Visual Studio

2012 開啟專案後並不會主動提示你要升級專案，也

代表著使用新的 Visual Studio 2012 開發工具開啟

這些專案檔並不會影響團隊其他還在使用 Visual

Studio 2010 的人開啟相同專案，因此在版本控管

方面比較不會遇到問題。事實上，還是有些許專案

類型必須升級專案檔，最主要還是來自於 Visual

Studio 2012 新功能提升的關係，這些升級後的專

案檔將無法相容於 Visual Studio 2010 開發工具，

例如：資料庫專案 (Database Project), ASP.NET

MVC 2 (預設不支援), 安裝專案 (Setup Project), …

等等。

當然，專案到底應不應該升級不用特別去記憶，

只要你使用 Visual Studio 2012 開啟原專案時沒有

任何提示要升級，那就代表這種專案檔可以在

Visual Studio 2010 與 Visual Studio 2012 之間相

容！

若開啟專案後你有看到 (needs conversion) 文

字 (如下圖示)，則代表有該專案不相容於舊版，你

可以決定是否要升級該專案，如果不升級的話，所

有專案都還是能在 Visual Studio 2010 裡正常開

啟。

強化 HTML 編輯器功能

到處都是「智慧標籤」 Smart Tags

透過鍵盤快速鍵 Ctrl + . 即可開啟智慧標

籤 (Smart Tags) 選單，而且幾乎每一個 tag 都有智

慧標籤，預設會有 Format Element (格式化文件)

功能。

如果是伺服器控制項還會出現以前只有在「設

計檢視」的畫面才會看到的智慧標籤，現在 HTML

原始碼檢視視窗裡也能夠快速產生智慧標籤原始

碼：


http://zh.wikipedia.org/wiki/%E6%99%BA%E6%85%A7%E6%A8%99%E7%B1%A4

http://zh.wikipedia.org/wiki/%E6%99%BA%E6%85%A7%E6%A8%99%E7%B1%A4

45

相關動態展示請看這裡：

http://www.youtube.com/watch?

v=HX78y3imlyI&feature=player_embedded

可在 HTML 原始碼檢視新增伺服器控制項所

需的事件處理常式(Events Handler)貼心的小功

能，對寫 ASP.NET Web Form 的人來說很實用，操

作示範如下影片：

強化 HTML 編輯器功能


feature=player_embedded&v=ckfLaqI9cdM

由於大多 HTML 標籤都有頭有尾，例如 

與 、<td> 與 </td> 等等，新版 Visual Studio

在當你修改標籤的開頭時，結尾自動幫你一起變更，

加快修正完成的速度，也減少許多鍵盤輸入的機

會：

相關影片:


v=DqumqHpNSJA&feature=player_embedded

完整支援 WAI-ARIA 與其他 HTML5 元素屬性 Intellisense

支援 WAI-ARIA 與完整的 HTML5 元素屬性與

其屬性值的 Intellisense 功能

相關影片:


v=q9fIjUFLCRg&feature=player_embedded

快速擷取使用者控制項 Extract

to User Controls

此功能對 ASP.NET Web Form 開發人員來說，

也是個方便的小工具，可快速建立使用者控制項：

相關影片:


v=KSQHrXOxTd4&feature=player_embedded

新增許多 HTML5 專屬程式碼片

段 Code Snippets

Visual Studio 2012 新增的程式碼片段 (Code

Snippets) 有好幾個，其中包括：


http://www.youtube.com/watch?v=HX78y3imlyI&feature=player_embedded

http://www.youtube.com/watch?v=HX78y3imlyI&feature=player_embedded

http://www.youtube.com/watch?feature=player_embedded&v=ckfLaqI9cdM

http://www.youtube.com/watch?feature=player_embedded&v=ckfLaqI9cdM

http://www.youtube.com/watch?v=DqumqHpNSJA&feature=player_embedded

http://www.youtube.com/watch?v=DqumqHpNSJA&feature=player_embedded

http://www.w3.org/WAI/intro/aria

http://www.w3.org/WAI/intro/aria

http://www.youtube.com/watch?v=q9fIjUFLCRg&feature=player_embedded

http://www.youtube.com/watch?v=q9fIjUFLCRg&feature=player_embedded

http://www.youtube.com/watch?v=KSQHrXOxTd4&feature=player_embedded

http://www.youtube.com/watch?v=KSQHrXOxTd4&feature=player_embedded

46

※ html5 / xhtml5

※ charset

※ metaie8

※ metaviewport

※ figure

※ audio

※ video

※ svg*

所有 Visual Studio 內建的程式碼片段都是可

以客製化修改的，預設所在路徑如下：

C:\Program Files\Microsoft Visual Studio 11.0

\Web\Snippets\HTML\1033\HTML

先前 Visual Studio 2010 無法使用 Intel-

lisense 的地方，現在都能用了。

支援 jQuery Templates 高亮顯示

j Q u e r y Te m p l a t e 裡常用的 < s c r i p t

type="text/x - jquer y - tmpl">或<scr ipt

type="text/html">表示法，以往是不會有高亮顯

示的，但新版的 Visual Studio 2012 會聰明的判斷，

並予以高亮顯示。

ASP.NET 4.5 跨行動平台開發研討會- 簡報及影片下載

h t t p : / / m s d n . m i c r o s o f t . c o m / z h - t w /

aa570302.aspx

ASP.NET 4.5 跨行動平台開發研討會- 現場錄影重現

ASP.NET 4.5 及 VisualStudio2012 新功能預覽

http://youtu.be/BXSwP_ycgAU

ASP.NET 4.5 Web API 開發實務

http://youtu.be/eqEyivN-z3U

使用 jQuery Mobile 設計跨行動裝置網站

http://youtu.be/ycbfznh-Y4Q

HTML5 及 JavaScript 開發使用 Visual Studio2012

http://youtu.be/EdPoF1_QVGQ

相關連結


http://api.jquery.com/jQuery.template/

https://skydrive.live.com/?cid=FB49C7CED61BD893&id=FB49C7CED61BD893%21814

http://msdn.microsoft.com/zh-tw/aa570302.aspx


http://www.youtube.com/playlist?list=PL5FEB7F1945F8D361





47

CSS 與 JavaScript 編輯器作者:黃保翕 (微軟 MVP)

在 Visual Studio 2010 中要編寫 CSS 或

JavaScript 不是很方便，充其量只能說是個「文字編

輯器」而已，不能被稱為「開發工具」，但這些編輯

器在 Visual Studio 2012 已經大幅進化，眾多的貼

心功能不得不大聲叫好，尤其是 CSS 編輯器改進的

幅度最大，就讓我們來看看有哪些增進的好用功能

吧。

CSS 編輯器

移至定義 (Go to Definition)

新版 Visual Studio 2012 可以讓你在 HTML

原始碼檢視裡直接從 class (樣式類別) 的地方直接

跳到 CSS 檔案裡定義該 class 的位置。

如果該 class 在 CSS 檔案裡出現多次的話，還會

依據 HTML 的上下文(Context)自動判斷該跳到哪

個樣式定義，如下圖為例，當你將游標停留在 float

-right 的地方，並按下鍵盤 F12 功能鍵就會立即將

游標一致相對應的 CSS 檔案中，但是在以下圖示範

例中 float-right 樣式其實在我的 CSS 檔案裡定義

好多次，但由於這是在<footer> 標籤下的 class，

所以移至 CSS 定義時會自動跳到 footer.float-

right 這個樣式裡，是不是非常貼心呢！ [註:經實際

測試還是會有誤判的時候，使用上還是要多注意!]

提升 Intellisense 能力

在 CSS 編輯器中編寫樣式時，可以更享受

Intellisense 的功能，提示輸入時的選項已大幅減少

到僅需選擇的項目，選取項目時眼睛可以更專注於

選擇可能的項目，而不是每次都列出數百個建議讓

你選擇，如圖示是

Visual Studio2010，

另圖片為 Visual

Studio2012 使用

CSS Intellisense

的畫面。


48

在編寫樣式時，也可以僅輸入樣式屬性的首字

字母用以快速輸入樣式。如下圖示，只要輸入 td 就

會自動提示你輸入 text-decoration 或 transition-

delay 等樣式屬性，也算是貼心的小設計。

支援 CSS hacks

由於瀏覽器版本過多，在呈現樣式時經常會需

要靠 CSS Hacks 幫我們解決跨瀏覽器樣式的問

題，然而 CSS Hacks 是非標準的東西，在 Visual

Studio 2010 中一直被排除在外，只要使用了 CSS

Hacks 就會出現格式驗證錯誤。但新版 Visual

Studio 2012 竟然一改其嚴謹的態度，完整支援各

種 CSS Hacks 語法，也代表你在 CSS 文件中使用

CSS Hacks 語法並不會被視為錯誤的語法！

一般來說 CSS Hacks 分為兩種，Visual Studio

2012 通通支援：

1. 樣式屬性的 Hacks ( Attribute Hacks )

2. 選取器的 Hacks ( Selector Hacks )

樣式屬性的 Hacks ( Attribute Hacks )

※正常的語法 color: red;

※只有 IE7, IE8, IE9 才看懂的語法 color/**/: red;

※只有 IE6, IE7 才看的懂的語法 *color: red;

※只有 IE6 才看的懂的語法 _color: red;

選取器的 Hacks ( Selector Hacks )

※只有 IE7 才看的懂的 Selector Hacks *:first-

child + html .style1 { … }

自動排版與階層縮排 Hierar-

chical indentation

CSS 格式化文件功能在 Visual Studio 2010

也有，不過排版時有許多限制，其中一個限制就

是當樣式表中使用特定 CSS Hacks 會導致無法自

動排版 (如下圖示)，由於新版 Visual Studio 2012

已經可以辨識 CSS Hacks，因此自動排版也可以

順利完成。

新版 Visual Studio 2012 在自動格式化 CSS

文件時還新增了樣式自動縮排功能，方便你自動縮

排時較能看懂 CSS 樣式的階層定義，如下圖

示 #loginForm .validation-error 樣式會自動繼

承 #loginForm 的樣式，所以在自動排版時預設就

會進行縮排整理，方便開發人員以更有邏輯的方式

閱讀樣式定義。


49

支援 Vendor specific proper-

ties (-moz-, -webkit, -o, -ms)

完整支援各主流瀏覽器自訂的 CSS3 語法，只

要輸入減號(–)就會自動出現 Intellisense 提示：

支援註解與取消註解快速鍵

舊版 Visual Studio 2010 在 CSS 編輯器中無

法使用快速鍵將部分樣式內容標示為註解，但新版

Visual Studio 2012 已經內建此功能，如果你選擇

Visual C# 2005 鍵盤對應配置(keyboard map-

ping scheme) 的話，就可以用 Ctrl+E, C 將選取的

CSS 內容標示為註解，或用 Ctrl+E, U 將選取的

CSS 內容取消註解。備註: 如果你使用預設鍵盤對應

的話，註解的快速鍵為 Ctr l+K ,C 而取消註解

為 Ctrl+E, U。

顏色選取器 (Color picker)

舊版的 Visual Studio 2010 只能單純的選擇

顏色代表文字，使用上非常不直覺，如下圖示：

Visual Studio 2012 增強的部分，除了提供完

整的調色盤外，還提供色票、透明度(CSS3's RGBA)

與顏色滴管等功能：

這裡特別要提及「色票」的功能！我們在設計

網頁時通常是先經由設計師做美術設計，然後在切

版成網頁與 CSS 樣式，因此網頁上的顏色大多是透

過設計師精心設計過的，然而當網頁交由網頁開發

人員套版後，網頁設計師這時通常已經不會再參與

網頁調整，所以當客戶希望修改成網頁上另一個顏

色時，很有可能開發人員會選錯顏色，或自己隨便設

定一個相近的顏色。

從上圖來看，Visual Studio 2012 貼心的在顏

色選取器第一排直接列出同一份 CSS 文件中曾經

出現過的顏色，如此一來可以讓開發人員更輕易的

選對顏色！如果你繼續將調色盤往右捲，會看到一

個分隔線，這代表他已經列出所有此 CSS 樣式所有

CSS 程式碼片段 Code Snippets

在 Visual Studio 2010 裡並沒有 CSS 類型的

程式碼片段：


http://www.css3.info/introduction-opacity-rgba/

50

這次在 Visual Studio 2012 中也新增了 CSS

類型的程式碼片段，可以更快速完成各式 CSS3 樣

式編寫。

而最特別的地方就在於，你可以透過程式碼片

段自動編寫各家瀏覽器的 Vendor specific prop-

erties 樣式，也可以方便你不用特別記憶各家

Vendor specific properties 的語法或名稱，很直覺

的輸入 CSS3 標準樣式名稱即可。如下圖左，你只要

先輸入 border-radius 後再按下兩次 Tab 鍵，就會

出現如圖右的

結果，Visual

Studio2012 的

CSS 程式碼片

段會全自動幫

你完成 – moz

與 – webkit 的

樣式，非常方

便!


以下就是 Visual Studio 2012 內建支援的

CSS3 程式碼片段清單：

※ CSS3 框線 (Borders)

border-radius

box-shadow

※ CSS3 2D 轉換 (2D Transforms)

transform

transform-origin

※ CSS3 移動效果 (Transitions)

transition

transition-property

transition-duration

transition-timing-function

transition-delay

※ CSS3 動畫效果 (Animations)

@keyframes

※ CSS3 多重欄位 (Multiple Columns)

column-count

column-gap

column-rule

※ CSS3 顏色 (Colors)

opacity

※ CSS3 字型 (Fonts)

@font-face

※ CSS3 Media Query (Responsive Design)

@media

metaviewport (HTML Code Snippet)

自訂 regions 方便整理 CSS 樣式表

如果想在 CSS 樣式表中整理樣式，在新版

Visual Studio 2012 也已內建 region 語法，可以讓

你對某段樣式給予一個名稱並進行折疊或群組起

此功能也有提供 CSS 程式碼片段，只要在 CSS

檔案中先輸入 region 並按下一個 Tab 鍵，就能自

51

動完成 region 的註解格式，並且輸入 region 的名

稱後按下 Enter 鍵即可完成，最後再將需整理進來

此區域的樣式剪貼進來即可。

JavaScript 編輯器

移至定義 Go to Definition

新版 Visual Studio 2012 可以讓你在網頁中或

JavaScript 檔案裡按下 F12 功能鍵快速移至函式

定義或變數宣告的位置。

提升 Intellisense 能力

新版 Visual Studio 2012 完整支援 HTML5 中

所定義的 DOM IntelliSense，也支援包括 HTML5

定義的 JavaScriptAPIs，其中包括有 querySelec-

tor, DOM Storage, cross-document messaging,

與 canvas 等等。而且這些 DOM IntelliSense 都是

由預先定義好的 JavaScript 檔來提供 Intellisense

功能，也代表著這些 Intellisense 都是可以輕易客

製化的！如果你想修改的話，其檔案預設置於以下

路徑：

C:\Program Files (x86)\Microsoft Visual Stu-

dio 11.0\JavaScript\References\domWeb.js

在 Visual Studio 2010 你可以透過 JScript Intel-

liSense 概觀提到的 References 指示詞 (參考註

解)進行設定，但每個檔案都要加上這些參考註解不

太實用，新版 Visual Studio 2012 可在網站專案的/

Scripts/目錄下新增一個 _references.js 檔案，裡面

可以列出所有全站需要加入參考的 Reference 指

示詞，加入並存檔後在網站專案裡任意 JavaScript

檔案裡就會立刻看到所有加入參考的 Intellisense

效果！

註 1 ：若 _references.js 不加入專案也會生效，你可

以不要將該檔案部署到正式網站，這是給

Visual Studio 2012 看的，無須載入到頁面中。

註 2 ：移除 References 指示詞後，並不會立即生

效，可能要重開專案或過一段時間才會反應。

隱含參考 Implicit references

這也是為了提升 JS Intellisense 能力來的，你

可以集中定義所有「跨專案 / 跨方案」都有可能會用

到的 JavaScript 檔，全定義在 Visual Studio 2012

的選項設定中，好讓各專案不用再定義該如何參考

常用的檔案，例如： jQuery, jQuery Validate,

jQuery UI, … 等等。定義隱含參考的地方在 [工具] /

[選項] 裡，設定的地方請參考如圖示：


http://msdn.microsoft.com/zh-tw/library/bb385682(VS.90).aspx#Features

http://msdn.microsoft.com/zh-tw/library/bb385682(VS.90).aspx#Features

52

程式碼縮排(Code outlining) 與

大括弧對應(Brace matching)

支援 ECMAScript5 語法

支援目前最新 ECMAScript5 規格，包括最新的

strict mode 語法與新增的 APIs 支援，若要查詢目

前各瀏覽器支援 ECMAScript5 的程度可參

考 ECMAScript 5 compatibility table 網頁。

支援多載的 Visual Studio 文件

(VSDOC)

在 JavaScript 本身的語言特性裡，原本就不支

援多載(Overload)，然而當一個函式 (Function) 含

有多種不同的參數輸入方式時，在以前是沒辦法提

供多份註解的。新版 Visual Studio 2012 提供更新

版的VSDOC定義語法，讓你可以透過 <siguature>

標籤撰寫多個版本的函式與參數說明。以下是撰寫

範例:


常用快速鍵複習

※ F12-移至定義 (Go To Definition)

※ Ctrl-回到移至定義前的游標位置

※ Ctrl+E,C 標示註解 (HTML, C#, CSS, JavaS-

cript)

※ Ctrl+E, U 許消註解 (HTML, C#, CSS, JavaS-

cript)

相關連結

ASP.NET 4.5 跨行動平台開發研討會- 簡報及影片下載

http://msdn.microsoft.com/zh-tw/

aa570302.aspx

ASP.NET 4.5 跨行動平台開發研討會- 現場錄影重現

ASP.NET 4.5 及 Visual Studio 2012 新功能預覽


ASP.NET 4.5 Web API 開發實務


使用 jQuery Mobile 設計跨行動裝置網站


HTML5 及 JavaScript 開發使用 Visual Studio 2012


https://skydrive.live.com/?cid=FB49C7CED61BD893&id=FB49C7CED61BD893%21814



http://www.youtube.com/playlist?list=PL5FEB7F1945F8D361





53

Visual Studio 2012 – 攻佔 Windows 8 Metro Style

Apps 的唯一工具

Windows 8 Metro Style Apps 開發攻略-Hello Metro Style

序言

隨著 Windows 8 消費者預覽版的問世，間接的

宣告了距離 Windows8 正式版上市的日越來越接

近了。除了和 Windows 7 一樣支援我們已經習慣

使用的 Desktop Application 之外，隨著 Windows

8 本身的種種新功能與硬體支援之外，和 Windows

8 一起被密切注意的大亮點，就是今天要跟各位介

紹的 Metro Style Apps。

開發環境

Metro Style Apps 目前只能在 Windows 8 進

行開發，而無法在 Windows7 或是 Windows

Server 8 上進行開發。不過，好心的微軟還是幫各

位熱血的開發者們準備好了所有開發所需要使用的

工具，從作業系統到開發工具一應俱全。作業系統，

日前已發佈 Windows 8 RTM 版。至於開發工具，

則需要使用 Visual Studio 2012 來進行 Metro

Style Apps 的開發，Windows 開發人員中心提供

的 SDK/Express 版只針對 Windows 8 App 開發的

基本入門功能，適合業餘開發者、初學者及學生使

用；需結合 Web、Cloud、伺服器端及服務開發、

桌面應用開發的專業開發者可到官方網頁 (http://

aka.ms/vs2012tw) 下載供專業開發者及團隊開發

使用之高階版本 ( U l t i m a t e 、 P r e m i u m 、

Professional)，建議 Windows 8 開發者可直接下

載安裝這些高階版本，以提供完整的開發、偵錯及測

試功能，就包含了 Windows 8 及其它類型開發的專

案範本了。

Windows 8 軟體開發/運行平台

Windows 8 的軟體開發/運行平台從圖，我們

可以看出，開發 Metro Style Apps 可以使用的技術

和平台，幾乎和 Desktop Apps 能使用的平台和技

術沒有什麼太大的差別，開發人員一樣可以使用自

已經熟悉的語言和平台來進行開發，而不用為了這個新的平台特別去學習新的技術和語言。例如，熟

悉 Desktop 平台的開發者可以選擇以 XAML 作為

使用者介面描述語言，搭配 C/C++、 C#或是 VB.Net

來進行開發；而習慣 Web 平台的開發者則可以使

用 HTML5/CSS 搭配 JavaScript 來進行開發；另

外，熟悉 Direct X 的開發者則可以使用 C++搭配

HLSL 來進行開發。除了可以使用習慣的平台/語言

和工具來進行開發之外，在開發 Metro Style Apps

時還可以使用 Windows 8 內建、以 C++開發出來

的 WinRT APIs，這些 API 封裝了許多作業系統階

層的動作，包含通訊、媒體、裝置和檔案存取等等

功能，大大的降低 Apps 和作業系統互動的難度、提

升作業系統的安全性，對開發者來說，WinRT APIs

也大幅的減少實作相關功能所要撰寫的程式碼。

當然，除了內建的 WinRT APIs 可以使用之

外，我們也可以使用 C/C++、C#、VB.Net 甚至是

JavaScript 來自行開發可重複使用的 WinRT 元件，

以供不同 Metro Style Apps 使用。而且，Metro

Style Apps 與 WinRT 元件並不會受到開發語言不

同的影響，就算是使用不同的開發語言，在 Metro

Style Apps 使用的開發語言與 WinRT 元件之間，也

會透過投射(Projection)機制而達到可以混用的效

果喔!!


註：文中 Metro Style App 已更名為 Windows Store App (Windows 市集應用程式)

http://aka.ms/vs2012tw


54

Metro Style Apps 的特色

Metro Style Apps 有以下幾個特色：

※使用 Metro 樣式設計：以 Metro 風格設計整個

App 的使用者介面， Metro Style Apps 預設會

使用整個螢幕的版面來呈現內容，避免使用者分

心。

※快速流暢：以相應的速度回應使用者動作。

※以使用者感興趣的內容為出發點：優先以使用者

有興趣的內容設計，優先呈現使用者會感興趣的

內容。

※互動式且以觸控優先：設計時考慮到互動性及操

作性，同時考慮以鍵盤、滑鼠及觸控操作的情境，

並且以觸控的使用者體驗作為優先考量。

※使用不同的版面配置和尺寸規格： Windows8

可以安裝在各種不同大小的行動裝置上，且

Metro Style Apps 可以切換為貼齊顯示模示，故

在設計時需會將不同的解析度與顯示模式列入

考量。

XAML 與內建控制項

除了習慣 W e b 開發的開發者可以透過

HTML5/CSS 來定義使用者介面之外，已經熟悉

Desktop Apps 開發的開發者們就得透過 XAML 來

定義使用者介面了。XAML 這個語言雖然已經「年

紀」不小，而且身為 WPF、Silverlight 和 Windows

Phone 7 的主要介面定義語言，不過，對沒接觸過

以上平台的開發者朋友們應該還是會有點陌生，所

以我們就先來對 XAML 作個比較初步的認識吧!!

XAML 的全名為 ExtensibleApplication

Mar kup Languag e，原為 WP F (W indo ws

Presentation Framework) 的一部份，是一種基於

XML 衍生而出的宣告式使用者介面描述語言，外觀

與 HTML 相似，平台會自動透過.Net Framework

中的反射(Reflection)機制，將 XAML 中描述的物

件，轉換為平台上使用的語言宣告、定義，以方便

在之後供 Code-Behind 的程式碼使用或是進行互

動。例如，我們可以簡單的透過以下的 XAML 語法，

簡單的宣告/定義出一個按鈕：

<Button Name="btnTest">Click Me!!</Button>

在 XAML 裡面，我們常常會看到 xmlns 這個

關鍵字，它就類似於 C#中的 using 和 VB.Net 裡面

的 Imports 關鍵字一樣，代表的是我們要引用的

XML 命名空間，可以讓我們透過指定 xmlns 的方

式，來引用一些既有的元件、類別或是控制項。例

如：

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:AppBarControl"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

如上例，xmlns 冒號(:)後面接的是我們幫該

XML 命名空間取的別名，而等號(=)後面則是要參

考的元件的命名空間路徑或是位置。有些命名空間

的位置會以一個看來像是網址的路徑來表示，那個

是因為 XML 命名空間和真正的元件命名空間是以

一對多的關係互相對應，而通常就是會以這種類似

網址的形式來封裝、映射多個元件命名空間，並不

代表該網址真正存在喔!!而上例的第一行：

xmlns="http://schemas.microsoft.com/winfx/2006/

並未指定任何的別名，因此它會被當作預設使

用的 XML 命名空間，預設的 XML 命名空間可以讓

我們不用透過指定別名的方式，就可以使用該命名

空間裡面的類別或是控制項(例如前面舉的 Button

的例子，就是因為 Button 這個控制項已經被包含

在該 XML 命名空間裡，所以可以直接使用)。相對


55

的，我們在上面的例子引用了 AppBarControl 這個

命名空間，而且將它的別名取為 local，所以我們就可

以透過指定特定命名空間的方式，在後面的 XAML 中

使用該命名空間裡面的控制項或是類別，例如：

<local:Page1/>

<local:Page2/>

目前在預設的 XML 命名空間中，包含了以下的控

制項供 Metro Style Apps 使用：

因為目前有些控制項仍然在開發中，所以沒被

加到目前的開發工具版本裡，之後發行的正式版，

將會有更多的控制項可以使用。

Visual Studio 2012 中提供的

Metro Style Apps 專案樣版

在 Visual Studio 2012 中內建了三種 Metro

Style Apps 的樣版，分別如下：

Blank Application ：

顧名思義，就是空白的專案樣版，只提供一個空

白的頁面，其餘的部份我們都得自行設計。

預設的執行畫面就是空白一片：

Grid Application ：

多頁式的專案樣版，提供了三層的巡覽(分類

總覽頁、單一類別檢視頁、項目詳細資訊頁)檢視模

式。

分類總覽頁:

單一類別檢視頁:


56

項目詳細資訊頁:

Split Application:

兩頁式的專案樣版，提供了分類總覽頁與結合

了類別項目列表與項目詳細資訊的頁面。

分類總覽頁：

類別項目列表與項目詳細資訊頁:

Metro Style Apps 的專案結構

接下來，讓我們就透過 Visual Studio 2012，

使用 Blank Application 專案樣版，來建立我們的

第一個 Metro Style App(以 C#作為開發語言)。首

先，透過 Solution Explorer，來針對 Metro Style

App 的專案結構作個簡單的瞭解吧：與一般的

Desktop Apps 不同的是，Metro Style Apps 預設

的參考元件只會有.NET for Metro style apps 和

Windows 兩個元件，而這兩個元件就包含了所有

平台內建的功能。

所以，除非我們要引用自行開發的 WinRT 元

件庫，否則，是不用像開發 Desktop Apps 那樣，

得要手動的針對某些要使用的功能作元件參考的

動作喔!!如果很好奇的點選 Add Reference 的話，

會看到如下的畫面：


57

意思就是說，所有的.NET Framework 和 Windows

SDK 都被引用進來了。除了預設就加入了整個

Framework 和 Windows SDK 的參考之外，專案中

還會有一個名為 Package.appxmanifest 的檔案，

這個檔案則是定義了整個 Metro Style App 的相關

Metadata、硬體、功能、相容性等等資訊，而且

Visual Studio 2012 供了視覺化的編輯工具，讓我

們可以很方便的對這個檔案進行編輯。

在 Application UI 頁籤裡，可以針對 App 的

顯示名稱、圖示、支援的呈現方式以及外觀相關等

等參數進行設定。

Capabilities 頁籤裡則是針對 App 可以使用

的作業系統及硬體相關支援作設定。

Declarations 頁籤中則是可以設定 App 支援

的延伸功能，例如讓 App 支援在背景模式下工作、

將 App 設定為支援搜尋功能，或是將 App 設定為

開啟某些檔案的工具等等。

Packaging 頁籤中則是可以設定 App 上架及

版本檢核時所需要用到的相關資訊。

而 App 裡所需要使用到的資源檔(例如圖示、圖

片或是多媒體檔案)，則建議都放在 Assets 資料夾

中。需特別留意的是，若圖片是要當作 Logo 圖檔使

用的話，請務

必將其 Build

Action 設定

為 Content，

否則可能會無

法正常顯示

喔!


58

再來要介紹幾個重要的檔案：

App.xaml ：

Metro Style Apps 預設的起始檔，我們可以在

裡面定義供整個應用程式使用的資源或樣式，或是

透過這個檔案設定應用程式相關的事件處理函式；

和其他用來描述頁面長相的 Xaml 檔最大的不同

是：通常 App.xaml 不會放置要直接用來當作使用

者介面的內容。

App.xaml.cs ：

與 App.xaml 相互搭配的 Code-Behind 檔案。

我們可以在裡面撰寫處理整個應用程式事件的函

式，也可以在裡面實作可供整個應用程式存取的變

數，更可以透過它來實作與應用程式生命週期相關

的一些特別處理，例如多工和保存狀態等等功能。

BlankPage.xaml ：

Blank Application 專案樣版預設的主畫面。

應用程式被執行之後，會透過 App.xaml 創建

BlankPage.xaml 中所定義好的使用者介面來供使

用者操作。

BlankPage.xaml.cs ：

和 BlankPage.xaml 相互搭配的 Code-

Behind 檔案，也就是程式的部份。

牛刀小試 Metro Style App

最後，我們藉由把原來空白的畫面，加上 Hello

Metro Style App 這段文字這個小練習，來對開發

工具作個初步的認識，順便作個簡單的小總結。請

以滑鼠雙擊 Solution Explorer 中的 BlankPage.xaml

檔，進入編輯畫面之後，請將左方的 PLATFORM 及

DOCUMENT OUTLINE 兩個頁籤訂選畫面上，下

圖。

眼尖的朋友們應該會發現，編輯 Metro Style App

的 XAML 檔時，它的 Design View 會自動被套上平

板電腦的外框。為了讓我們在設計階段考量到不同

的版面呈現方式，以及設計出能在不同大小的行動

裝置上呈現的使用者介面，這時候，PLATFORM 面

版中的設定值就很有參考價值了。


59

簡單的介紹一下 PLATFORM 面版中各項設定的義

意：

※ Views ：可以切換 Metro Style App 的呈現模

式，共有四種；分別為 Landscape(水平橫向

全螢幕)、Filled(填滿)、Snapped(貼齊)及

Portrait(垂直直立全螢幕)四種模式。

※ Display ：可以用來設定 Design View 中那台平

板電腦的螢幕大小及解析度。

※ Show chrome ：設定是否要顯示 Design View

中平板電腦的外框。

※ Override scaling ：增加內建的顯示縮放比例，

以讓物件看起來更大。

※ Clip to display ：裁切文件中的物件，只留下螢

幕可視範圍的部份

※ Theme ：設定平板電腦使用的佈景主題。

接下來請在 TOOLBOX 面版中找到 TextBlock

控制項，以滑鼠雙擊或是透過拖拉的方式，拖進

Design View 中。再來我們要將 TextBlock 中的文

字內容改為 Hello Metro Style App，這個動作可以

透過以下方式完成：

1.直接以滑鼠雙擊在 Design View 中的 TextBlock

控制項以對裡面的文字進行編輯。

2.直接修改 XAMLVie 中 TextBlock 的 Text 屬性值。

3.透過右下方的 Properties 面版設定 Text 屬性值。

值得特別一提的是，在 Visual Studio 2012

裡的 Properties Grid 中加入了搜尋 Property 的

功能，可以幫助我們更快速的找到我們要編輯的

屬性。

接著請試著練習透過 Properties 面版，將文字

改為紅色、文字大小改為 72px，並將 TextBlock 的

水平及垂直對齊都設為置中。完成後描述該

TextBlock 的 XAML 如下：

<TextBlock HorizontalAlignment="Center" TextWrap-

ping="Wrap" Text="Hello Metro Style App" VerticalA-

lignment="Center" FontSize="72" Foreground="Red"/

>

再來按下鍵盤的 F5 鍵進行除錯，看看執行的結

果吧!!若沒有意外，執行的畫面應該如圖：


60

附錄:使用模擬器進行除錯

已經開始研究 Windows8 的朋友們應該也會

知道，Windows 8 的另一個大革新，就是針對行動

裝置的支援。為了讓開發者們不用另外購買行動裝

置就能輕鬆的測試自己開發的 Metro Style Apps，

這次的 Visual Studio 2012也內建了除錯 Metro Style

Apps 專用的移動裝置模擬器。要透過模擬器進行

除錯也很簡單，只需要在除錯裝置下拉選單中勾選

Simulator 即可。

勾選了以 Simulator 進行除錯並按下鍵盤的 F5

鈕，就可以模擬我們的 Metro Style App 在行動裝

置上執行的樣子囉!

而模擬器的右側有一整排的工具列，每個圖示

的功能如下圖：

相關範例及線上版本請至 MSDN 邊做邊學:

h t t p : / / m s d n . m i c r o s o f t . c o m / z h - t w /

hh976905.aspx




61

使用 JavaScript 製作 Metro Style App -入門篇

微軟最新推出的 Metro style app 多了一個開

發語言新選擇 JavaScript ，網頁程式工程師終於可

以用最熟悉的語言和架構開發視窗程式。這篇文章

利用一個簡單的範例「唐詩兩三首」，列出五位詩人

的作品各三首，帶出使用 JavaScript 製作 Metro

style app 的程式架構，也讓你發現與開發網頁是如

此相似。

開啟 Visual Studio 2012 後點選 Start Page

中的 New Project。

在跳出的 NewProject 對話框左邊，展開 In-

stalled 、展開 Templates 、展開 JavaScript 、點下

Windows Metro style 。

在下方的 Name 欄位打入「 TangPoem 」，再

點選右下的 OK 。

稍待片刻，就會看到專案程式碼編輯畫面。我們

直接點下編輯畫面上方的 Local Machine ，看看專

案在本地端電腦上執行會長什麼樣子。

會看到這是一個兩頁的 App ，第一頁是格子狀

排列的群組列表。


點選中間的 Split Application 。


62

在第一頁點選任何一個群組，會進入第二頁，左

邊是這個群組的資料項目列表，點選任何一個資料

項目，會在右邊看到資料項目的內容。

按下 ALT + F4 終止 App 回到 Start 畫面。將

Start 畫面捲軸移到最右，會發現多了個專案產生的

App 「 TangPoem 」。

重新回到 Visual Studio 2012，將 Solution

Explorer 中的 css、html、images、js 資料夾皆展

開。如果沒看到 Solution Explorer ，請點選左上角

的 View 再點 Solution Explorer。

html 資料夾中有兩個檔案 itemsPage.html 、

splitPage.html ，分別就是 App 中的第一頁群組列

表頁和第二頁群組資料項目列表頁。

css 資料夾中 itemsPage.css、 splitPage.css ，

js 資料夾中有 itemsPage.js 、 splitPage.js，分別就

是 itemsPage.html 、 splitPage.html 使用的 CSS

和 JavaScript 檔案。

另外在 html 資料夾外還有一個 HTML 檔案

default.html ，必需花點功夫說明： Windows 使

用 Internet Explorer 繪製 JavaScript 撰寫的

Metro style app ，但此時 Internet Explorer 的

Process 名稱是 WWAHost.exe 而非 iexplor-

er.exe 。繪製特定頁面，例如 itemsPage.html 時，

並不是將整個 App 導往 itemsPage.html ，而是將

itemsPage.html 的 CSS 、 JavaScript 、 HTML 主

區塊嵌入 default.html 中。所以整個 App 自始自

終都會在同一個頁面 default.html ，也就是同一個

context 中，這點要特別注意。

i m a g e s 資料夾中的圖片 l o g o . p n g 、

smalllogo.pngstorelogo.png、splashscreen.png

分別是 App 的 Logo、小 Logo、Marketplace 中顯

示的 Logo 與載入畫面圖示，你可以自行依其尺寸

替換成你喜歡的圖片。

在這裡我們先將 App 中會使用到的詩人大頭

照匯入。請在 Solution Explorer images 資料夾上

點滑鼠右鍵，選 Add ，再點選 New Folder。


63

將 New Folder 命名為 poets 。

再在 poets 資料夾上點滑鼠右鍵，選 Add ，再

點選 Existing Item。

將剛剛解壓縮出的詩人大頭照選取加入。

整個 App 的資料都在 data.js 中。我們現在就

來修改 data.js 將當中的範例資料取代為我們要顯

示的詩人和詩。請點選 Solution Explorer js 資料

夾下的 data.js ，使 data.js 在左側的編輯窗格展開。

請將變 groupDescription、 itemDescription、

itemContent、lightGray、mediumGray、darkGray

去掉，我們使用不到。再將陣列 sampleGroups 取

代為下面的陣列 poets ：

var poets = [

{ key: "Poet 1", name: "李白", avatar: "images/

poets/1-0.jpg" },

{ key: "Poet 2", name: "杜甫", avatar: "images/

poets/2-0.jpg" },

{ key: "Poet 3", name: "李商隱", avatar: "images/

poets/3-0.jpg" },

{ key: "Poet 4", name: "白居易", avatar: "images/

poets/4-0.jpg" },

{ key: "Poet 5", name: "王維", avatar: "images/

poets/5-0.jpg" }

];


64

請注意 sampleGroups 和 poets 陣列中元件的屬性並不相同。也將陣列 sampleItems 取代為下面的

陣列 poems ：

var poems = [

{ group: poets[0], title: "靜夜思", content: "床前看月光， 疑是地上霜。舉頭望山月， 低頭思故鄉。", thumb: "images/poets/1-1.jpg" },

{ group: poets[0], title: "黃鶴樓送孟浩然之廣陵", content: "故人西辭黃鶴樓， 煙花三月下揚州。孤帆遠影碧空盡， 唯見長江天際流。", thumb:

"images/poets/1-2.jpg" },

{ group: poets[0], title: "早發白帝城", content: "朝辭白帝彩雲間， 千里江陵一日還。兩岸猿聲啼不住， 輕舟已過萬重山。", thumb: "images/

poets/1-3.jpg" },

{ group: poets[1], title: "八陣圖", content: "功蓋三分國， 名成八陣圖。江流石不轉， 遺恨失吞吳。", thumb: "images/poets/2-1.jpg" },

{ group: poets[1], title: "春望", content: "國破山河在， 城春草木深。感時花濺淚， 恨別鳥驚心。烽火連三月， 家書抵萬金。白頭搔更短， 渾欲不勝簪。", thumb: "images/poets/2-2.jpg" },

{ group: poets[1], title: "贈衛八處士", content: "人生不相見， 動如參與商。今夕復何夕， 共此燈燭光。少壯能幾時， 鬢髮各已蒼。

訪舊半為鬼， 驚呼熱中腸。焉知二十載， 重上君子堂。昔別君未婚， 男女忽成行。怡然敬父執， 問我

來何方。問答乃未已， 驅兒羅酒漿。夜雨剪春韭， 新炊間黃梁。主稱會面難， 一舉累十觴。十觴亦不醉，

 感子故意長。明日隔山岳， 世事兩茫茫。", thumb: "images/poets/2-3.jpg" },

{ group: poets[2], title: "樂遊原", content: "向晚意不適， 驅車登古原。夕陽無限好， 只是近黃昏。", thumb: "images/poets/3-1.jpg" },

{ group: poets[2], title: "無題", content: "昨夜星辰昨夜風， 畫樓西畔桂堂東。身無彩鳳雙飛翼， 心有靈犀一點通。隔座送

鉤春酒暖， 分曹射覆蠟燈紅。嗟余聽鼓應官去， 走馬蘭台類轉蓬。", thumb: "images/poets/3-2.jpg" },

{ group: poets[2], title: "錦瑟", content: "錦瑟無端五十弦， 一弦一柱思華年。莊生曉夢迷蝴蝶， 望帝春心託杜鵑。滄海月

明珠有淚， 藍田日暖玉生煙。此情可待成追憶， 只是當時已惘然。", thumb: "images/poets/3-3.jpg" },

{ group: poets[3], title: "賦得古原草送別", content: "離離原上草， 一歲一枯榮。野火燒不盡， 春風吹又生。遠芳侵古道，

 晴翠接荒城。又送王孫去， 萋萋滿別情。", thumb: "images/poets/4-1.jpg" },

{ group: poets[3], title: "琵琶行", content: "潯陽江頭夜送客， 楓葉荻花秋瑟瑟。主人下馬客在船， 舉酒欲飲無管絃；醉不

成歡慘將別， 別時茫茫江浸月。忽聞水上琵琶聲， 主人忘歸客不發。尋聲暗問彈者誰？ 琵琶聲停欲語遲。

移船相近邀相見， 添酒回燈重開宴。千呼萬喚始出來， 猶抱琵琶半遮面。轉軸撥絃三兩聲， 未成曲調先有情。絃絃掩抑聲聲思， 似訴平生不得志。低眉信手續續彈， 說盡心中無限事。輕攏慢撚抹復挑， 初為霓裳後六

么。大絃嘈嘈如急雨， 小絃切切如私語；嘈嘈切切錯雜彈， 大珠小珠落玉盤。閒關鶯語花底滑， 幽咽泉流

水下灘。水泉冷澀絃凝絕， 凝絕不通聲漸歇。別有幽愁暗恨生， 此時無聲勝有聲。銀瓶乍破水漿迸， 鐵騎

突出刀鎗鳴。曲終收撥當心畫， 四絃一聲如裂帛。東船西舫悄無言， 唯見江心秋月白。沈吟放撥插絃中， 

整頓衣裳起斂容。自言本是京城女， 家在蝦蟆陵下住。十三學得琵琶成， 名屬教坊第一部。曲罷曾教善才服，

 妝成每被秋娘妒。五陵年少爭纏頭， 一曲紅綃不知數。鈿頭銀篦擊節碎， 血色羅裙翻酒汙。今年歡笑復明

年， 秋月春風等閒度。弟走從軍阿姨死， 暮去朝來顏色故；門前冷落車馬稀， 老大嫁作商人婦。商人重利

輕別離， 前月浮梁買茶去，去來江口守空船， 繞船月明江水寒。夜深忽夢少年事， 夢啼妝淚紅闌干。我聞

琵琶已嘆息， 又聞此語重唧唧。同是天涯淪落人， 相逢何必曾相識？我從去年辭帝京， 謫居臥病潯陽城。

潯陽地僻無音樂， 終歲不聞絲竹聲。住近湓城地低濕， 黃蘆苦竹繞宅生。其間旦暮聞何物？ 杜鵑啼血猿哀鳴。春江花朝秋月夜， 往往取酒還獨傾。豈無山歌與村笛？ 嘔啞嘲哳難為聽。今夜聞君琵琶語， 如聽仙樂耳暫

明。莫辭更坐彈一曲， 為君翻作琵琶行。感我此言良久立， 卻坐促絃絃轉急。淒淒不似向前聲， 滿座重聞

皆掩泣。座中泣下誰最多， 江州司馬青衫濕。", thumb: "images/poets/4-2.jpg" },

{ group: poets[3], title: "長恨歌", content: "漢皇重色思傾國， 御宇多年求不得。楊家有女初長成， 養在深閨人未識。天生

麗質難自棄， 一朝選在君王側。回眸一笑百媚生， 六宮粉黛無顏色。春寒賜浴華清池， 溫泉水滑洗凝脂；

侍兒扶起嬌無力， 始是新承恩澤時。雲鬢花顏金步搖， 芙蓉帳暖度春宵；春宵苦短日高起， 從此君王不早朝。承歡侍宴無閑暇， 春從春遊夜專夜。後宮佳麗三千人， 三千寵愛在一身。金屋妝成嬌侍夜， 玉樓宴罷醉和

春。姊妹弟兄皆列土， 可憐光彩生門戶。遂令天下父母心， 不重生男重生女。驪宮高處入青雲， 仙樂風飄

處處聞。緩歌慢舞凝絲竹， 盡日君王看不足。漁陽鼙鼓動地來， 驚破霓裳羽衣曲。九重城闕煙塵生， 千乘

萬騎西南行。翠華搖搖行復止， 西出都門百餘里；六軍不發無奈何？ 宛轉蛾眉馬前死。花鈿委地無人收， 

翠翹金雀玉搔頭。君王掩面救不得， 回看血淚相和流。黃埃散漫風蕭索， 雲棧縈紆登劍閣。峨嵋山下少人行，

 旌旗無光日色薄。蜀江水碧蜀山青， 聖主朝朝暮暮情。行宮見月傷心色， 夜雨聞鈴腸斷聲。天旋地轉迴龍

馭， 到此躊躇不能去。馬嵬坡下泥土中， 不見玉顏空死處。君臣相顧盡霑衣， 東望都門信馬歸。歸來池苑

皆依舊， 太液芙蓉未央柳；芙蓉如面柳如眉， 對此如何不淚垂？春風桃李花開日， 秋雨梧桐葉落時。西宮

南內多秋草， 落葉滿階紅不掃。梨園子弟白髮新， 椒房阿監青娥老。夕殿螢飛思悄然， 孤燈挑盡未成眠。

遲遲鐘鼓初長夜， 耿耿星河欲曙天。鴛鴦瓦冷霜華重， 翡翠衾寒誰與共？悠悠生死別經年， 魂魄不曾來入夢。臨邛道士鴻都客， 能以精誠致魂魄；為感君王輾轉思， 遂教方士殷勤覓。排空馭氣奔如電， 升天入地求之

遍；上窮碧落下黃泉， 兩處茫茫皆不見。忽聞海上有仙山， 山在虛無縹緲間。樓閣玲瓏五雲起， 其中綽約

多仙子。中有一人字太真， 雪膚花貌參差是。金闕西廂叩玉扃， 轉教小玉報雙成。聞道漢家天子使， 九華

帳裡夢魂驚；攬衣推枕起徘徊， 珠箔銀屏迤邐開。雲鬢半偏新睡覺， 花冠不整下堂來。風吹仙袂飄飄舉， 

猶似霓裳羽衣舞。玉容寂寞淚闌干， 梨花一枝春帶雨。含情凝睇謝君王， 一別音容兩渺茫。昭陽殿裡恩愛絕，

 蓬萊宮中日月長。回頭下望人寰處， 不見長安見塵霧。唯將舊物表深情， 鈿合金釵寄將去。釵留一股合一

扇， 釵擘黃金合分鈿。但教心似金鈿堅， 天上人間會相見。臨別殷勤重寄詞， 詞中有誓兩心知，七月七日

長生殿， 夜半無人私語時。在天願作比翼鳥， 在地願為連理枝。天長地久有時盡， 此恨綿綿無絕期。", thumb:

"images/poets/4-3.jpg" },

{ group: poets[4], title: "相思", content: "紅豆生南國， 春來發幾枝？勸君多採擷， 此物最相思！", thumb: "images/poets/5-

1.jpg" },

{ group: poets[4], title: "雜詩", content: "君自故鄉來， 應知故鄉事。來日綺窗前， 寒梅著花未。", thumb: "images/poets/5-

2.jpg" },

{ group: poets[4], title: "九月九日憶山東兄弟", content: "獨在異鄉為異客， 每逢佳節倍思親；遙知兄弟登高處， 遍插茱萸少一人。", thumb: "images/poets/5-3.jpg" }

];


65

也請注意 sampleItems 和 poems 陣列中元件的

屬性並不相同。最後將 data.js 下方的 sampleI-

tems.forEach 修改為 poems.forEach 。到這裡

data.js 修改完畢。因應 data.js 陣列 poets 取代陣

列 sampleGroups 時，陣列中元件屬性的更改，我

們要來修改 splitPage.js 。請用 Solution Explorer

打開 js 資料夾下的 splitPage.js 。找到：

element.querySelector("header

[role=banner] .pagetitle").textContent =

this.group.title;

將 this.group.title 更改為 this.group.name ：



this.group.title;



this.group.name;

JavaScrip 到此修改完畢。再來我們修改 HTML

。請用 Solution Explorer 打開 html 資料夾下的

itemsPage.html 。找到 <h1> 中的：

TangPoem

將 TangPoem 取代為「唐詩兩三首」：

唐詩兩三首

再找到片段：

<div class="itemtemplate" data-win-

control="WinJS.Binding.Template">

<img class="item-image" src="#" data-win-

bind="src: backgroundImage; alt: title" />

<div class="item-overlay">

<h4 class="item-title" data-win-

bind="textContent: title"></h4>

<h6 class="item-subtitle win-type-ellipsis"

data-win-bind="textContent: subtitle"></h6>

</div>

</div>

因應 data.js陣列 poets取代陣列 sampleGroups

時，陣列中元件屬性的更改將 <img>的屬性 data-

win-bind="src:backgroundImage; alt: title"改為

data-win-bind="src:avatar;alt: name" ，<h4> 的

屬性 data-win-bind="textContent: title" 改為

data-win-bind="textContent: name" ，再將 <h6>

去掉：




bind="src: avatar; alt: name" />

<div class="item-overlay">

<h4 class="item-title" data-win-

bind="textContent: name"></h4>

</div>

</div>

再使用 Solution Explorer 打開 html 資料夾

下的 splitPage.html 。




bind="src: backgroundImage; alt: title" />

<div class="item-info">

<h3 class="item-title win-type-ellipsis" data-win-


<h6 class="item-subtitle win-type-ellipsis" data-

win-bind="textContent: subtitle"></h6>

<h4 class="item-description" data-win-

bind="textContent: description"></h4>

</div>

</div>

因應 data.js 陣列 poems 取代陣列 sampleI-

tems 時，陣列中元件屬性的更改，將 <img> 的屬

性 data-win-bind="src: backgroundImage; alt:

title" 修改為 data-win-bind="src: thumb; alt:

title" ，再將 <h6> 和 <h4> 去掉：




bind="src: thumb; alt: title" />

<div class="item-info">

<h3 class="item-title win-type-ellipsis" data-win-


</div>

</div>

再找到片段：

<section class="articlesection" aria-atomic="true" aria-label="Item detail" aria-live="assertive"> <header class="header"> <div class="text"> <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2> <h4 class="article-subtitle" data-win-bind="textContent: subtitle"></h4> </div>


66

<img class="article-image" src="#" data-win-bind="src: backgroundImage; alt: title" /> </header> <article class="article-content" data-win-bind="innerHTML: content"></article>

將 <h4> 去掉，<img> 的屬性 data-win-

bind="src: backgroundImage; alt: title" 改為

data-win-bind="src: thumb; alt: title" ：

<section class="articlesection" aria-atomic="true"

aria-label="Item detail" aria-live="assertive">

<header class="header">

<div class="text">

<h2 class="article-title win-type-ellipsis" data-

win-bind="textContent: title"></h2>

</div>

<img class="article-image" src="#" data-win-

bind="src: thumb; alt: title" />

</header>

<article class="article-content" data-win-

bind="innerHTML: content"></article>

</section>

HTML 到此修改完畢。修改 HTML 時，移除了

不少東西，空出了不少空間，所以我們要來修改

CSS ，將詩人的姓名、詩的標題和內文字體放大。

請用 Solution Explorer 打開 css 資料夾下的

itemsPage.css 找到 .itemspage .itemslist .win-

item .item-overlay .item-title ：

.itemspage .itemslist .win-item .item-overlay .item-

title {

-ms-grid-row: 1;

overflow: hidden;

width: 220px;

}

加上 font-size: 21pt; ：

.itemspage .itemslist .win-item .item-overlay .item-

title {

-ms-grid-row: 1;

overflow: hidden;

width: 220px;

font-size: 21pt;

再用 SolutionExplorer 打開 css 資料夾下的

splitPage.css。找到 .splitpage .itemlistsection .itemlist

.win-item .item-info .item-title ：

.splitpage .itemlistsection .itemlist .win-item .item-

info .item-title {

margin-top: 4px;

}

加上 font-size : 17pt;

.splitpage .itemlistsection .itemlist .win-item .item-

info .item-title {

margin-top: 4px;

font-size: 17pt;

}

找到.splitpage .articlesection .article-content ：

.splitpage .articlesection .article-content {

overflow-y: auto;

}

加上 font-size : 15pt;

.splitpage .articlesection .article-content {

overflow-y: auto;

font-size: 15pt;

}

CSS 修改到此完畢。最後我們要修改 App 在

Start 畫面顯示的名稱。請使用 Solution Explorer

打開 package.appxmainfest ，將 Display name

修改為「唐詩兩三首」。

到此整個 App 就完成囉！請按下上方的 Lo-

cal Machine 就可以看到 App 在本地端電腦執行

的樣子。


67

開發小技巧

上方 Local Machine 的右邊有一個向下的小

箭頭。點下選擇 Simulator ，再在 Simulator 上按

一下，可以將 App 在模擬器中執行。

模擬器的右方，有一排按鈕，可以模擬各種觸

控手勢、解析度、App 執行位置、直握橫握等各種

Local Machine 可能無法測試的狀態。

Firefox 、或 Chrome 的開發人員工具，那你應

該會很喜歡下面兩個東西。在模擬器執行的狀態下，

回到 Visual Studio 2012 ，點上方的 Debug ，選

Windows ，會看到兩個選項， JavaScript Console

和 DOM Explorer 。

有 JavaScript Console 當然也就可以在 JavaS-

cript 中使用 console.log debug 。DOM Explorer

也和 Internet Explorer 開發者工具相同，左上有個

Select Element 按鈕。點下後，再到模擬器中點 App

的任一 DOM 元件， DOM Explorer 就會自動展開到

所點元件。

相關範例及線上版本請至 MSDN 邊做邊學:

http://msdn.microsoft.com/zh-tw/dd310332


http://msdn.microsoft.com/zh-tw/dd310332

68

Metro Style App 開發 - 使用 C/C++

W i n d o w s 8 新增了一個應用程式開發平

台－ Metro Style App，開發人員在開發了這類的

app 之後便可以送交至 Windows Store，一般消費

者便可以從 Windows Store 上下載安裝這些通過

審查上架成功的 app，這篇文章是幫助使用 C/C++

程式語言的開發人員，整理如何上手 Metro Style

App 的開發從這張圖可以看得出來，若是使用 C/

C++ 作為程式開發語言，則是搭配 XAML 來作應

用程式介面的設計:

(Windows 8 應用程式開發架構圖)

XAML 是一種 XML 格式的檔案，用來描述操作

介面（User Interface），檔案內容大概像是這樣：

<Page

x:Class="Application1.BlankPage"

xmlns="http://schemas.microsoft.com/

winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/

winfx/2006/xaml"

xmlns:local="using:Application1"

xmlns:d="http://schemas.microsoft.com/

expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/

markup-compatibility/2006"

mc:Ignorable="d">

<GridBackground="{StaticResourceApplicationPage

BackgroundBrush}">

<Buttonx:Name="Button1"Content="Click"Horizont

alAlignment="Left"

Mar-

gin="20,20,0,0"VerticalAlignment="Top"Width="75"

/>

</Grid>

</Page>

這樣便會在畫面上有一個按鈕的元件。從.NET

3.0 以後 XAML 就大量地被運用在應用程式開發

上，若您過去開發過 WPF、Silverlight、或 Win-

dows Phone，都是以 XAML 來作介面設計；然而，

許多具有操作介面應用程式都以類似 XML 方式來

作介面的定義，這樣是非常常見的。

C++/CX

由於所有 Metro Style App 都是基於 WinRT ，

以 C++ 寫成的 app 必須要能與 WinRT 溝通，於是

Microsoft 設計出了 C++/CX （唸作： C plus plus

over component extensions，參考資料： MSDN,

Visual C++ Blog, Wikipedia）讓開發人員得以使

用 C++ 開發 Metro Style App，C++/CX 相容標準

的 C++ （支援到部份 C++11 標準），並且從為

了 .NET CLR 設計的 C++/CLI 中借了部份的程式

語法而成； C++/CX 與 C++/CLI 雖然在語法上很

類似，但是底層的實作完全不同，C++/CX 並不會

使用 CLR 或是 garbage collector，而會直接產生

原生的 x86, x64 或 ARM 的機器語言，這也是為了

讓 Metro Style App 能自然地運行在這些不同的

裝置上。舉例來說，如果要使用 WinRT 所提供的

Vector 來進行操作，用 C++/CX 的寫法可能會像

是這樣：

namespace PC = Platform::Collections;

PC::Vector<int> ̂numbers = ref new PC::Vector<int>();

for (int i = 0; i < 10; ++i)

{

numbers->Append(i);

}

像 ^ 或是 ref 這些關鍵字都是從 C++/CLI 借

來的語法，如果要使用這個 collection 的 iterator，

則可以寫成這樣: // iterator

namespace WFC = Windows::Foundation::Collections;

for (PC::VectorIterator<int> it = WFC::begin(numbers);

it != WFC::end(numbers); ++it )

{

// do something...

}



69

到現在為止都還是使用 WinRT 所提供的元件

來撰寫程式，但事實上還是可以利用 C++ 的 STL

來完成一些工作，比方說在這個 collection 中尋找

某個數值。

PC::VectorIterator<int> findIt =

std::find(WFC::begin(numbers),WFC::end(numbers),

5);

所以完全可以利用既有的 C++資產，關於

C++/CX 更詳細的語法可以參考（上述）MSDN 上

的說明。

開發 Metro Style App

用 C++/CX 搭配 XAML 來開發 Metro Style

App 說穿了也沒什麼，就是一個 XAML 介面搭配

一個 C++/CX 的程式檔案，當你透過 Visual Stu-

dio 2012 建立一個 Visual C++ » Windows Met-

ro Style 下的 Blank Application 專案後，專案中會

有個預設的空白頁 -- BlankPage.xaml。

這個 XAML 檔案就會搭配一組 C++ 的標頭檔

及原始碼檔案： B l a n k P a g e . x a m l . h 以及

BlankPage.xaml.cpp，如果以上述的 XAML 為例，

要定義畫面上按鈕的行為，比方說按下按鈕後顯示

一個訊息對話盒，在 BlankPage.xaml.cpp 裡可以

這樣寫。 void BlankPage::OnNavigatedTo(NavigationEventArgs^ e)

{

using namespace Windows::UI::Xaml::Controls;

auto btn = safe_cast<button^>(this->FindName("Button1"));

btn->Click += ref new RoutedEventHandler(this, &BlankPage::OnClick);

}

// 別忘了在 BlankPage.xaml.h 中宣告這個 method，可以放在 private:

void BlankPage::OnClick(Platform::Object^ sender,

Windows::UI::Xaml::RoutedEventArgs^ e)

{

using namespace Windows::UI::Popups;

auto dlg = ref new MessageDialog("Button clicked");

dlg->ShowAsync();

}

這裡我用了 C++2012 標準中的 auto 來減少

打的字，而在應用程式裡要做的事情大多可以都使

用 WinRT 所提供的元件即可完成。

開發 WinRT Component

WinRT 是一個很特殊的開發框架，整個

WinRT 都是以 C++ 開發完成的，但若你是 Metro

Style App 的開發者，不論你是使用 C++/CX、C#、

VB.net 還是 JavaScript 都有對應的 API 介面可以

呼叫，這是 WinRT 使用了 Language Projection

的技術（註：常見的說法是 Language Binding ，

但在 WinRT 裡以 Language Projection 稱呼），而

WinRT 也允許 app 開發人員得以使用 C++/CX 或

是 C#/VB.net 來開發 WinRT Component。

在 Visual Studio 2012 中，你可以在 Visual

C++ > Windows Metro Style 下找到 WinRT

Component DLL 的專案，只要以這個專案範本就

可以將開發好的 WinRT Component 產生出可以

讓其它 Metro Style App 專案引用參考的 .dll 以

及 .winmd 檔案。比方說建立了一個 Hello-

Component 的專案，然後在 WinRTComponent

class 中新增一個簡單的 method，回傳一個 hello

的字串：

(WinRTComponent.h)

#pragma once

namespace HelloComponent

{

public ref class WinRTComponent sealed

{

public:

WinRTComponent();

Platform::String^ SayHello();

};

}


70

(WinRTComponent.cpp)

// WinRTComponent.cpp

#include "pch.h"

#include "WinRTComponent.h"

using namespace HelloComponent;

using namespace Platform;

WinRTComponent::WinRTComponent()

{

}

String^ WinRTComponent::SayHello()

{

return ref new String(L"hello");

}

如此便可以建置出 HelloComponent.dll 以

及 HelloComponent.winmd 檔案，如此一來，在其

它的 Metro Style App 專案，不論是使用什麼程式

語言進行開發，都可以將這個 dll 及 winmd 加入專

案的參考（References），所以若是使用 C# 的專

案，要呼叫這個 SayHello 函式就可以直接寫成。

var com = new HelloComponent.WinRTComponent();

var helloStr = com.SayHello();

若是 JavaScript，則是:

var com = new HelloComponent.WinRTComponent();

var helloStr = com.sayHello();

// 沒有打錯，會轉成 camel case

是不是覺得 WinRT 很神奇了呢!

總結

使用 C++/CX 開發 Metro Style App，乍看之

下似乎較 C#, JavaScript 要來得麻煩，不過由於它

相容標準 C++ 的緣故，若有既有的 C++ 程式碼，

要在 Metro Style App 上再利用都容易許多（當然，

需要一些轉換成本，至少不是全部重來），而且還

可以用來開發 WinRT Component，能夠將有效能

瓶頸，或是不想輕易放在 JavaScript 檔案中的敏感

資料都以 WinRT Component 來處理；另外就是，

根據以下連結文章說法:

(http://blogs.msdn.com/b/b8/archive/2012/02/09/

building-windows-for-the-arm-processor-

architecture.aspx)

Developers can use our tools to create na-

tive C/C++ code for maximal performance and

flexibility, in addition to the C#, XAML, VB, and

HTML5 based tools, to target apps for WOA, so

long as their code targets the WinRT API set. Ad-

ditionally, developers with existing code, whether

in C, C++, C#, Visual Basic, or JavaScript, are free

to incorporate that code into their apps, so long

as it targets the WinRT API set for Windows ser-

vices. The Windows Store can carry, distribute,

and service both the ARM and x86/64 imple-

mentations of apps (should there be native code

in the app requiring two distributions).

有機會以 C/C++ 開發程式並且搭配 Microsoft 所提

供的開發工具，在 x86/ARM 上各自最佳化效能（作成

WinRT Component），所以如果你是精通 C++ 程式

語言的開發人員，不妨來試試以 C++ 開發 Metro

Style App 吧!

相關範例及線上版本請至 MSDN Blog:

http://blogs.msdn.com/b/ericsk/

archive/2012/05/02/metro-style-app-dev-

using-cpp.aspx


71

Visual Studio 2012 Ultimate 及 Team Foundation Server

2012 新功能

軟體生命週期與團隊開發有著千頭萬緒的問題，

但目標卻很明確：開發團隊持續交付有價值的產出，

以滿足使用者及企業目標。這是一個循環的過程，如

圖 1 所示：

作者:胡百敬 (微軟 MVP)

圖 1 ：遞增價值的軟體生命週期輪迴

或許在部分系統的軟體生命週期中，這個圓圈的

週期很大，以至於近似瀑布式的開發模型。但在現今大

多數企業或個人 App 的環境中，因應快速變化的需求

與挑戰，軟體的生命週期越來越短，而形成快速轉動的

迴圈。需求持續交付開發，開發成果持續更新線上系

統，或提供 App 下載更新，而後再在營運系統中收集

需求。

然而這個理想的狀況在現實世界中卻充滿阻礙，

簡略將可能之問題呈現在圖 2 中：

圖 2 ：軟體開發中遇到的阻礙，讓系統或 App 應用程式無

法持續地增值

軟體是知識的集成，在團隊開發中，知識工作

者的溝通協調是首要問題。在時程、預算、資源皆

有限的情境下，如何才能交付有品質的軟體？

微軟提供的 Team Foundation Server 與 Visual

Studio 一直努力讓團隊開發中的各種訊息透明化，讓

訊息更容易收集、存取、發布、傳達、串聯、搜尋。

作為研發資訊系統的資訊系統，Team Foundation

Server 與 Visual Studio 數千人的開發團隊就是圖 1

的力行者。他們努力讓開發流程的各環節都有直觀好

用之工具，工具的產出可以彼此串聯，使整個軟體生

命週期可順暢地循環。

Visual Studio 2012 Ultimate 及 Team Foun-

dation Server 2012 改良多處舊有功能，並新增許多

新功能，例如：

※提供了全新的使用者介面，讓存取更為快速，操作

更為友善直觀。例如：「Web 存取」介面以 MVC

架構搭配 jQuery 重寫，提供了更完整的設定與

訊息。「Team Explorer」視窗整合更多的資訊，

且在不同頁面中層次分明地呈現。

※團隊專案(Team Project)可以採用內建的Scrum流

程範本。

※結合 PowerPoint 的 StoryBoarding，讓蒐集需求、

與使用者溝通變得更為互動、直觀、有效。

※結合工作項目與擱置集，可凍結手邊的工作，儲存

當下所有的 Visual Studio 環境設定後，關閉所

有已開啟的內容，以執行臨時交付的任務。隨後

再搭配工作項目切換回原工作環境，並復原之

前的內容與設定。

※透過分析程式碼複製品(Code Clone)，可以搜尋

Visual Studio 方案中撰寫近似的程式碼區塊，

以將其轉換成共用函數。

※透過新增的「程式碼檢閱要求/回應」工作項目與擱

置集，提供有流程與通知的程式碼檢閱(Code

Review)。


72

※提供離線的原始檔控制(Source Control)，並以更

直覺、多樣地方式呈現版本差異與合併程式碼。

※可隨手執行的探勘測試，其測試過程中所蒐集的資

訊與結果可以統合成 Bug 資訊，交付開發團隊。

並將測試過程轉換為手動測試的測試步驟與案

例，其後再執行回歸測試。

※結合 PowerShell 與隨處執行的 IntelliTrace，讓系

統管理人員可以在系統的線上環境蒐集資訊，

提供開發人員分析除錯。

※使用者可以透過新增的「Microsoft Feedback

Client」工具程式直接發出新「意見回應」工作

項目至 TFS，讓開發團隊成員知道使用者聲音。

就上述的這些功能而言，是任何開發團隊皆可以

使用的。不限於開發的系統或產品類型，也不專屬於

某種開發流程，與團隊的大小沒有關係，與程式語言、

平台也無涉。換句話說，要收集需求，要控制原始碼，

成員要合作，要執行測試，使用者要反映意見…諸此種

種，都可以借助 Visual Studio 2012 加上 TFS 2012。

限於篇幅，尚有許多工具與功能無法一一詳述，接下

來，舉幾個有趣的新功能與你分享。

「Team Explorer」視窗全新設計「Team Explorer」視窗，除了更有層次

地呈現更多的資訊，也提供更好的操作效能，不必等

待全部的資源都準備好，點選到下一層的畫面時，才

呈現該項目的詳細內容。例如：呈現放在SQL Server

Reporting Services 的報告或 SharePoint 上的文件。

透過「Team Explorer」視窗上方類似網頁瀏覽器

的工具列，可以在不同頁籤中切換，好存取「Team

Explorer」視窗豐富多樣資訊。並能夠在工具列直接

搜尋工作項目內容，更增操作便利性。全新設計畫面

如圖所示：

圖 3 全新設計的「Team Explorer」視窗有層次地呈現

各種資訊。在當點選「Team Explorer」視窗首頁上不

同的項目時，其下層視窗有更豐富的資訊，以往可能

是放到其他的視窗中，現在則部分整合到「Team

Explorer」視窗內。例如：組建的部分資訊整合進來。

用於程式碼控管之「暫止的變更」視窗則直接做進

「Team Explorer」視窗，而非以往獨立的視窗。點選

圖 3「Team Explorer」視窗首頁中「暫止的變更」連

結，將可以看到如圖 4「暫止的變更」頁面：

圖 4 ：「Team Explorer」視窗與程式碼控管之「暫止的變

更」整合，可以更方便地簽入變更的程式碼

當點選「我的工作」時，可以進入專屬的「我的

工作」頁面，呈現透過「工作項目查詢」所取回與自

己當下相關的工作，如圖 5 所示：


73

圖 5 透過「我的工作」頁面可以看到自己在團隊

中各種工作項目與狀態。「我的工作」頁面可以看到自

己正在進行中，被中斷而臨時擱置的工作、待完成而

未做的工作，以及請求他人檢閱程式碼，或他人請求自

己檢閱的程式碼等。你可以在「進行中的工作項目和變

更」和「可用的工作項目」間互相搬移工作項目，或從

「已暫停且擱置的工作」將工作項目移動到「進行中的

工作項目和變更」，並透過各區上方的工具列，更新

不同工作項目的狀態。

而什麼樣的工作項目會在「我的工作」頁面之「可

用的工作項目」區域呈現？可以點選區塊內開起查詢

連結，檢視工作項目查詢的定義，如圖 6 所示：

圖 6 ：「我的工作」頁面之「可用的工作項目」區域預設

呈現自己在此團隊專案中，待辦或進行中的工作

「Team Explorer」歷經了 2005、2008、

2010 三代。至今完全改寫，若你跟我一樣一路走

來，或許，也會有跟我一樣的驚喜。

全新開發 Web 存取

TFS 提供的「Web 存取」由來已久，但直到 TFS

2010 版本都沒有更新。TFS 2012 版以 MVC 架構全新

開發「Web 存取」，將大量的設定轉到 Web 存取，

並以更友善的介面與更快的速度執行。讓不同的團隊

成員都可以在任何地方，任何平台方便地存取團隊資

產，其介面如圖 7 所示：

圖 7 ：透過全新撰寫的 Web 存取，可以瀏覽器更全面地存

取與設定 TFS 所存放的各種資產

從圖 7 可以看到不管是工作項目、資源、组建或

各種設定，現今都可以透過 Web 存取完成。而小組最

愛的 Metro 圖案面板可以即時呈現原始碼變更、組建

狀況與工作項目的情形。只要分別在「Web 存取」的

「工作」、「來源」和「組建」頁面將「工作項目查

詢」、原始碼目錄、組建定義加到「小組的最愛」下，

就自動會在首頁以方塊磚呈現。而點選不同的方塊磚

即可跳到實際的細節內容。如圖 8 所示：

圖 8 ：將重要的資訊透過首頁的方塊磚即時呈現


74

原始檔控制

TFS 2012 的原始檔控制新增「本機工作區(Local

workspaces) 」功能，讓你可以離線編寫程式碼，一旦

連上網路後，自動偵測伺服器與本地兩端的差異，此種

模式也稱為 Modify-Merge-Commit。一般而言，以

往 TFS 提供以伺服器端為主的工作區適合大型團隊所

產出大量的程式碼與檔案，因為是一直連線，所以少量

修改部分內容而要簽入時，Visual Studio 搭配 TFS 可

以區分出變異之處而立刻完成簽入。並透過鎖定，讓團

隊成員同時修改相同程式碼的衝突減少。

但若團隊小，程式碼少，則連線時完整比對並簽

入程式碼並不會太耗時，並因為可離線編寫程式碼而

提供了較大的彈性。其設定畫面如圖 9 所示：

圖 9 ：建立原始檔控制的本機工作區

由於 Visual Studio 的功能已經非常多，要新手記

得在哪個選單找到哪個功能實屬不易。故 Visual

Studio 2012 在最外層主視窗右上角加了一個「快速

啟動」的功能，你只要在圖 9 上方 Visual Studio 視窗

之右上方的文字方塊內輸入功能名稱，它將會自動提

示你選項的取得位置，若直接點選下拉選單中的提示，

也可以立刻叫起該功能。

當離線而無法存取 TFS 時，你依然可以用各種工

具編修本機資料夾內的檔案。一旦 Visual Studio 2012

可以連接到 TFS 後，會自動將變動的內容更新回伺服

器。由於本機工作區會監控目錄的變化，所以若你透過

其他的工具程式變更了本機資料夾內的檔案，在

Team Explorer「暫止的變更」頁面中，於「包含的變

更」和「排除的變更」項目下，會呈現偵測到的變動，

如圖 10 所示

圖 10 ：自動偵測本機資料夾內的檔案的變更

當筆者連不到 TFS 時，以 Notepad 工具程式修

改了兩個檔案，並以檔案總管直接在本機資料夾增加

了兩個檔案。其後再連接到 TFS，Visual Studio 2012

自動判讀了那些新增的檔案要加入到原始檔控管，那

些檔案變更需要簽入。

當離線編輯的使用者多了，大家簽入時彼此程式

碼的衝突勢必增加，TFS 2012/Team Explorer 2012

提供的「合併」編輯器以更友善的介面，讓你以勾選的

方式，選擇要以哪些原始碼放入到合併後的原始碼中，

也可以直接在合併的位置編寫原始碼，而編寫程式碼

的區塊依然提供 IntelliSense 功能，同時在上方「伺服

器」與「本機」區塊中，以斜線的方式標示所編寫程式

的對應位置，如圖下所示：


75

除了「合併」更為友善外，原始碼版本間的差異比

對也呈現了有差異的程式碼在整體程式碼中的位置，

如圖 12 所示：

圖 12 ：以更豐富的方式呈現版本歷程間的差異

從圖 12 右方的縮圖可以知道當下所檢視的程式

碼差異比對是在整個程式碼檔中的位置，以及在那些

位置有變更過的程式碼。你可以滑鼠直接點選區塊，以

跳到該處程式碼。

StoryBoarding 蒐集使用者需求，與使用者溝通系統架構流程，

其過程的優劣是資訊系統成敗的關鍵。Visual Studio

2012 新增結合 PowerPoint所提供的 StoryBoarding，

可以讓系統分析人員較具體地跟使用者討論。因為

PowerPoint 本來就是為了簡報、會議而設計的應用

程式，且廣泛被大眾所用，而非侷限於資訊人員。

藉由 PowerPoint 本身豐富的功能再輔之以適於

描述應用程式介面的範本，在收集需求的場合中，可

以讓使用者自己做，直接參與設計、修改，則使用者

與資訊人員都更能表達自己的看法。內嵌在

PowerPoint 的 StoryBoarding 畫面如下圖 13 所示：

圖 13 ：透過 StoryBoarding 跟使用者討論應用

系統的行為，以收集需求解釋流程若此擁有「分鏡腳

本」之 PowerPoint 檔案是存放在共用位置(一般為

SharePoint)，則可以直接建立與工作項目間的關聯，

如圖 14 所示：

圖 14 ： TFS 工作項目與存放在 SharePoint 小組入口網站

之分鏡腳本建立關聯

利用圖 13 PowerPoint 上方工具列的右方倒數

第二個「分鏡腳本連接」按鈕，叫出圖 13 上方的對話

窗，利用「連接至」按鈕選擇 TFS 中的工作項目，一

般較合理的是連接到代表使用者需求的工作項目，在

此示範的團隊專案是以 Scrum 範本建立，故筆者選取

與某個「產品待處理項目」連結。而開啟該「產品待

處理項目」時，可以看到其內「分鏡腳本」區塊記載

著對這個 PowerPoint 檔案所在之共享區域的連結。

Microsoft Feedback Client

使用者若對應用程式有任何建議，可以在自己的

機器上安裝 TFS 2012/Visual Studio 2012 新增的

「Microsoft Feedback Client」工具程式。透過該程

式可以建立新的「意見回應」工作項目，並直接發出

至 TFS 專案集合中，讓開發團隊成員知道使用者的聲

音。使用者執行「Microsoft Feedback Client」工具

程式時，首先會詢問可連結的 TFS 伺服器內之 Team

專案，如圖 15 所示：


76

圖 15 ：透過「Microsoft Feedback Client」工具程式連結

到某個團隊專案後，就可以發出使用者意見

而後就可以「Microsoft Feedback Client」工具

程式類似精靈步驟的介面，提供對應用程式的建議，如

圖 16 所示：

圖 16 ：使用者可以直接擷取畫面、錄製聲音後送出「意見

回應」工作項目到 TFS

使用者可以直接擷取應用程式的畫面、錄製聲音

後送出「意見回應」工作項目到 TFS 伺服器，開發團

隊可以將此「意見回應」工作項目依其內容，連結到代

表使用者需求的工作項目，或是「Bug」、「工作」…

等各類工作項目，以分派與管理後續的流程。

當筆者初見 Visual Studio 2012 Ultimate 及 Team

Foundation Server 2012 時，首先對全新的介面感到

驚奇。隨著越玩越深，越能感受到微軟的開發團隊為

完滿軟體生命週期所做的努力。畢竟，Visual Studio

及 Team Foundation Server 本身就是全球最大的軟

體公司自己開發團隊之所倚，它有著全球最大的軟體

開發團隊當作使用者，自有最嚴苛的使用者要求。我

們除了善用它之外，每一版 Visual Studio 及 Team

Foundation Server 蘊含其內的設計理念與實務需求

的體現，實是團隊領導者與參與者可賞玩與學習的示

範。


77

擁抱 SCRUM 與 Visual Studio

作者:李智樺

何謂 Scrum?

Scrum 是敏捷開發法中備受歡迎的一員。跟其他

的敏捷開發法一樣，有著一個共同的特性，那就是一種

能夠應變客戶對需求頻繁改變的反覆式(iteration)開

發過程(Scrum 把每個反覆式的開發過程稱為一個衝

刺 Sprint)。基本上 SCRUM 是一個將軟體的開發過程

轉變成為以人為主的開發框架(framework)，他不是

一種方法學(methodology)，也就是說 Scrum 不會告

訴你到底該做些什麼。而只是把該有那些個結構跟步

驟做了分類及說明，真正的實踐方法則彈性的交給開

發人員自行選擇合適的做法及工具去實踐他，而

Visual Studio 2012 及 Team Foundation Server 2012

提供了相對應的工具及範本，是實踐 Scrum 十分方便

的開發管理平台。

多種開發平臺的挑戰最近 App 的程式開發為軟體界注入了新活力，但

由於智慧型裝置的種類多且平臺差異大，造成開發團

隊必須面臨在多種不同平臺上開發相同功能產品的

需求，這一點造成同一開發團隊必須擁有各式不同的

開發平臺，而形成了協同作業上的困難。Visual

Studio ALM (Application Lifecycle Management)

在設計之初，就已經將各種異質系統(包括 Windows,

iOS, Android 等)考慮進去，再加上支援多種程式語言

的整合式操作環境，十分適合跨各式不同的開發平臺

的團隊採用。尤其是在專案的協同開發上，如何運用

SCRUM 的鬆散式架構來克服開發作業上因異質平臺

所帶來的困擾，使得開發團隊能夠在組合上視需求彈

性調整而能夠敏捷應變，成了產品是否能夠成功開發

的重點因素。這樣的案例在國內 App 的開發廠商中屢

見不鮮，例如某實際案例: 一雲端服務產品之開發團

隊，一開始將開發團隊依開發平臺，區分成 iOS 團隊、

Android 團隊及 Windows Station 團隊，產品進度由

各團隊自行負責，每日會議各自舉行，只有在 Scrum

of Scrum 的晚間會議才由各團隊派代表一起參加每

日的站立會議，進行同步協調。

開發團隊按照平臺來分組看起來在自然不過了，

但實施了不久就發現，各個團隊始終無法有一致的進

度，造成始終無法一起交付一個一致性的版本。於是

在實行了幾個反覆式的循環之後，Scrum Master 就

針對這個問題改變了一下實施的方法，將 Scrum 團隊

改變成依功能來區分，分成 A 團隊及 B 團隊讓各平臺

的工程師融合在一起。成功的解決了功能無法一致交

付的問題，順利的完成了產品 1.0 版。這是一個實際的

範例，它說明 Scrum 敏捷開發法如何適用在多變的

App 開發團隊上的運用。(所謂的 Scrum of Scrum 會

議: 是指用來協調幾個開發團隊間的工作所招開的會

議)

Scrum 的結構十分的彈性簡潔，說明如下:下圖

中黑色實線箭頭的部分為 Scrum 敏捷開發法的基本

流程，而灰色虛線箭頭的部分則為 Team Foundation

Server 運用網際網路新增的自動回饋機制，他針對需

求提供者的意見，運用 Windows 既有的功能或是透

過 OFFICE 軟體的支援，對產品 Backlog 進行線上的

溝通修正後的一種即時回饋機制，這使得整個軟體開

發的過程變成為一個完整的迴圈。

SCRUM 框架，分別是由三個角色、四種會議及三

個工作物件(artifacts)所組成。(所謂的 Scrum of

Scrum 會議: 是用來協調幾個團隊間的工作)

產品所有者(Product Owner)

產品所有者代表了客戶的意願。這保證了 Scrum 開發

團隊在做從業務角度來說是正確的事情。產品所有者

負責編寫產品 Backlog，並擁有排出故事的優先順序

權力，如上圖左下方管理產品 Backlog 的藍色長方塊。


78

Scrum Master(Scrum 主管)

Scrum Master 負責控制進行的 Scrum 過程，他

的主要工作是去除那些影響團隊交付衝刺目標的障

礙。Scrum Master 並非團隊的領導(因為團隊是自我

組織的)，而是一個負責遮罩外界對開發團隊的所有干

擾之角色。Scrum Master 確保 Scrum 過程被按照初

衷使用，Scrum Master 是規則的執行者。

開發團隊(Team Member)

負責交付產品的開發團隊。一個團隊通常由 5 至

9 名具有跨職能技能的人（設計者，開發者等）組成，

承擔實際的開發工作。上圖中的大圓圈為一個 Sprint

的開發週期一般以不超過 30 天為限，小圓圈則為每日

循環。大圓圈正好代表一個反覆式開發週期(因此用圓

圈來代表)。

Scrum 四個重要的會議:

Sprint 計劃會議(Sprint planning meeting)

在會議中，產品所有者會與團隊協同工作，確定將

在該衝刺中預備完成哪些產品 Backlog。

計畫會議包含兩個部分，每個部分的長度不超過

會議長度的一半。在會議的第一部分，您的團隊和產

品所有者根據以前的衝刺成績來標識團隊認為可承諾

在衝刺週期中，能夠完成那些故事 Backlog 數目。

在會議的第二部分，團隊確定它將如何開發和測

試這些產品 Backlog。然後團隊將這些產品 Backlog

分解為多個任務(衝刺 Backlog)並估計完成它們所需

的工作量。最後，團隊基於這些估計承諾實現全部或部

分產品 Backlog。

每日站立會議(daily standup)

圖上小圓圈的部分，在會議上，每個團隊成員需要

說明三個問題：

※昨天你完成了那些工作？

※今天你打算做什麼？

※是否遇到什麼障礙？(Scrum Master 需要記下

這些障礙，並設法克服它)

評審會議(Sprint review meeting)

在衝刺的最後一天，團隊將與產品所有者、客戶和

所有利益關係人參與會議，對已完成的工作進行驗收

並確定新的要求。在衝刺的過程中，團隊可能已收集

並合併了回饋的資訊。團隊應該已經對每個完成的產

品 Backlog 執行接受度測試。在該會議中，團隊展示

了在衝刺中完成的每個產品 Backlog。並對產品

Backlog 是否達到預期的成果進行驗收。在許多情況

下，客戶在觀看演示後會更全面地瞭解其附加需求，

並將確定和討論他們所需的更改。

衝刺回顧會議(Sprint retrospective meeting)

在衝刺評審會議後，團隊會在衝刺的最後一天召

開追溯會議，這是最重要的會議。在此會議中，團隊

將審視和檢查它在 Scrum 過程中的工作歷程。根據

此分析，團隊可以決定如何調整開發過程，以便提高

其自身的有效性、效率、品質和滿意度。

三個工作物件(artifacts)

產品 Backlog(Product Backlog)

產 Backlog 是整個項目的概要檔。產品 Backlog

包括所有需求特性的粗略描述，是關於將要開發的是

什麼樣產品之說明描述。產品 Backlog 是開放的，每

個人都可以編輯(但他的重要性則由產品所有人來排

列)。產品 Backlog 包括粗略的估算，通常以天為單位。

估算將幫助產品負責人衡量時間表和優先順序（例

如，如果"增加搜尋功能"估計需要花 3 天或 3 個月，

將影響產品所有者對該特性的渴望）。

衝刺 Backlog（sprint backlog）

是大大細化了的產品 Backlog，包含團隊如何實

現這一個衝刺的需求資訊。任務被分解為以小時為單

位，沒有任務可以超過 16 個小時。如果一個任務超過

16 個小時，那麼它就應該被進一步分解。衝刺訂單上

的任務不會被分派，而是由團隊成員簽名認領他們喜

愛的任務。

燃盡圖（burn down chart）

是一個公開展示的圖表，顯示當前衝刺中未完成

及完成了的任務數目，或在衝刺 Backlog 上未完成的

Backlog 的數目。它顯示了開發團隊的工作進度及


79

實際的效率。這個工作效率的統計結果將會拿來做為

整個專案開發時程需要多久的預估指數。

對一般的 Scrum 而言，這三種工作物件都會以便

利貼的方式出現在「任務看板」上，它分成三個欄位，

抬頭標示成 to do 表示為開始， doing 為正在進行中，

done 表示已完成的衝刺 Backlogs。在 Visual Stu-

dio 中則以電子看板的方式，提供透過 Team Explorer

來更新每日的衝刺進度。

Visual Studio 與 Team Founda-

tion Server

近代的軟體工程不斷的在追求持續整合

(Continuous Integration)與快速回饋的效能。Visual

Studio 與 Team Foundation Server 針對應用程式生

命週期(ALM) 的開發路線規化了二大主題。其一是在

專案管理工具的操作面上進行改良，選擇不強迫使用

者要按步就班進行專案開發控管過程的制式、格式化

的作業框架，這一點無形中移除了專案的束縛，讓

Scrum 足以發揮它的彈性。簡化一般專案控管軟體，

擁有一大堆操做步驟的繁複畫面，讓第一次接觸這類

軟體的使用者能快速上手。另一方面，是針對快速開

發的需求提供自動化流程的各項功能，其中包括了運

用 Power Point 進行虛擬畫面的摹擬校對，亦或是結

合 Share Point 的資料連線操作功能。其目的不外乎，

將開發作業與操作作業結合起來，讓開發團隊在每個

衝刺週期結束後所發佈的軟體版本，在經過使用者實

際測試後，能夠將操作心得亦或是測出來的錯誤情節，

能夠迅速回饋到開發團隊，使開發作業與實際操作情

況作到無縫的結合。

下圖中左側為開發團隊自產品 Backlog 中取出

足夠一個開發週期的產品 backlog，然後開始進行

Sprint 的開發週期。在開發週期結束時交付開發結果

給右側的操作團隊，讓操作團隊進行實務的驗收動作，

再透過 Team Foundation Server 中快速的連結機

制，使得開發者跟使用者能在隨時擁有相同訊息的狀

態下進行他們各自的工作。

應用程式生命週期管理 Applica-

tion Lifecycle Management

Visual Studio 整合式的開發工具，能將開發工

作由工程師獨自撰寫程式到團隊協同開發持續交付

可測試的項目，從頭到尾緊密的結合在一起。提供解

決客戶與開發人員之間的認知斷層，藉由持續提供使

用者實際測試結果及紀錄，快速的回饋給開發團隊，

藉此將資訊透過流程的循環串連起來，讓資訊具有快

速的透通性，減少了開發人員跟客戶之間的認知差

距，不但讓產品的開發作對事，也間接的加快了開發

工作的步調。最近 App 的發展特性，就是功能越加越

多，開發時間越來越短，要支援的裝置與日俱增，同

樣的功能要在 Windows Phone 上跑也要在 iPhone

上可以運作，這樣的要求怎麼說都不是一個小團隊能

夠獨立做到的，加上又需要跨平台，真是難上加難。

傳統軟體工程因此而沒落，因為專案控管軟體本身也

需要彈性，這也是敏捷開發法會這麼快崛起的主要因

素，讓我們一起擁抱 Scrum 吧!

最佳 SCRUM 學習方式，當然是實際參與 SCRUM

開發團隊。但是先前的閱讀或訓練課程當然會大有幫

助，以下是最為人熟悉的 SCRUM 手冊，它可以免費

下載到，或是直接在線上閱讀。

硝煙中的 Scrum 和 XP(有多國語言的版本), 作者為Henrik Kniberg.

http://www.infoq.com/cn/minibooks/scrum-xp-from-the-trenches

Visual Studio Application Lifecycle Manage-ment, ALM 完整的開發資源.

http://msdn.microsoft.com/en-us/library/fda2bad5.aspx

Visual Studio ALM Rangers 這裡頭可以找到許多好的指導原則。

http://msdn.microsoft.com/en-us/vstudio/ee358786.aspx


http://msdn.microsoft.com/en-us/library/fda2bad5.aspx

80


快速產出並反應需求 - 善用 Scrum 開發流程

善用 Scrum 開發流程

近年流行 Scrum 軟體開發是敏捷(Agile)開發中

的一支，適用於重複循環開發流程，快速反應需求變

更，持續為軟體系統或應用程式推出新功能或新版本。

而相關的說明請參閱李智樺顧問的文章 < < 擁抱

SCRUM 與 Visual Studio>>。

Team Foundation Server 以往在建立團隊專案

時(Team Project)一直支援 Agile 範本，而在 TFS

2010 時，可以從網路下載安裝 Scrum 範本。新推出的

TFS 2012 在建立團隊專案時，已經內建第三個專案範

本--Scrum，而不需再額外下載安裝。

Team 專案範本的好處在於藉由工作項目(Work

Items)提供符合開發方法論的工作職掌、工作流程狀

態，工作項目查詢、品質與進度的報表分析…等等，讓

整個開發團隊容易在符合 Scrum 作法的開發流程中，

分析、設計、開發、測試，不斷地接受回饋、調整優先

順序、修正與遞交產出。

透過「Team Explorer」建立以 Scrum 流程範本

為基礎的 Team 專案如圖 1 所示：

圖 1 ：以符合 Scrum 精神的流程範本建立 Team 專案

專案範本內，已經內建了許多工作項目、報表、

分析、小組入口網站…等，擷取 TFS 部分畫面如圖 2

所示：

圖 2 ：專案範本預設為軟體團隊提供輸入、修改、分析、

檢閱開發流程中各項資訊的能力

基於 Scrum 流程範本為 Scrum 開發預設提供之

豐富的工作項目，團隊成員可以依職掌建立、更新這

些工作項目，輸入資料、設定關聯、更新狀態…等，已

反映開發流程中需求、工作、測試、Bug、回應意見…

等。

Team Foundation Server 再利用 SQL Server

建立資料倉儲以及 Analysis Services 建立分析模型，

藉由背景批次更新，會將團隊(包含使用者)建置與維

護軟體生命週期中的資訊載入到資料倉儲，並更新分

析模型。團隊再藉由入口網站、報表、Excel…等分析

工具了解進度、狀況，這對於及時呈現問題，掌握軟

體生命週期有莫大的幫助。

此外，Scrum 例行的「Sprint 計劃會議(Sprint

planning meeting) 」中，若要調整產品待處理項目

(Product Backlog Item)，可以透過 Team Founda-

tion Server 提供的「Web 存取」，直觀地安排產品待

處理項目間的優先順序，或所屬的「衝刺反覆項目

(Sprint) 」。其設定畫面如圖 3 所示：


81

圖 3 ：設定工作項目查詢時，以待處理項目優先權為排序

欄位，透過 Web 存取設定與檢視時，可以輕鬆排優先順序

而要調整每一次「Sprint」的名稱、起始/結束日

期與所在的反覆項目位置，可以直接透過網頁在 Web

存取設定，如圖 4 所示：

圖 4 ：透過 Web 存取設定 Scrum 中各 Sprint 的時程

搭配圖 4 所設定各 Sprint 的時間週期。團隊成員

可以透過「Web 存取」新增的「面板」來反映工作進

度，如圖 5 所示：

圖 5 ：團隊成員可以在網頁面板上更新工作進度

在「面板」上，會自動依據當下的系統時間呈現

所在 Sprint 的資訊。團隊成員可以直接滑鼠雙擊代表

某個工作項目的藍色方框，就能直接編輯該工作項目。

也可以滑鼠拖曳的方式，直接將該工作項目從一個狀

態改成另一個狀態。當點選面板右上角的小圖示後，

會呈現較為清楚的燃盡圖(burn down chart)，如圖 6

所示：

圖 6 ：透過燃盡圖檢視顯示當前衝刺中未完成及完成的工

作時數

在圖 6 所呈現的燃盡圖中，可以看到當前 Sprint

中未完成的工作時數，以及當下 Sprint 的時程。

以上內建關於 Scrum 開發流程的功能皆能以

Team Explorer 或 Web 存取完成，讓開發團隊容易進

入 Scrum 流程外，也能隨時隨地更新與查閱團隊開

發時各個環節資訊，讓整個軟體生命週期更為透明、

可掌控。

Team Foundation Server 所提供的流程範本是

可以高度延伸的，每個開發團隊在選定某個流程範本

後，都可以進一步修改其內的工作項目之資訊欄位與

狀態流程、可更新分析報表與專案文件範本、Excel 線

上分析、小組入口網站的資訊、乃至於組件流程、測

試環境…等等。你可以符合某種開發流程精神的範本

為基礎開始，再自行打造更貼合你們團隊文化的開發

範本，而在未來無數個開發專案中，可以繼續修正與

使用。


82

確保程式碼品質 – Code Review、Code Clone 及

IntelliTrace 的強化作者:胡百敬 (微軟 MVP)

在軟體的生命流程中，從開發走到上線而後維

護，時刻圍繞著品質的問題。為了維護品質，我們制訂

了開發規範、教育訓練、審核機制、過版流程、監控與

警示，標準處理程序…等等。但若僅是徒手完成與落

實，除非團隊有超人的意志力，否則最終將流於形式。

新版 Visual Studio 2012 針對提升團隊開發的程

式碼品質再度提供了許多新功能，讓大型團隊可以系

統性的解決問題，而非盲目地尋找可能的程式品質問

題。新功能眾多，以下舉三個有趣的功能。

程式碼檢閱是維繫程式碼品質的基本功，必須要

在團隊中建立此慣例與文化。當團隊在開發專案時，

會於初始以及在整個開發流程中，陸續訂出規範，例

如命名規則，使用物件與撰寫函數的範本、資料庫存

取規則、安全規範、效能規範…等等，但由於台灣的開

發團隊平均年資都很低，或是團隊成員經驗不足，乃

至於成員不在意規範…等，都導致團隊所研擬的規範

流於空談。而最基本的把關就是程式碼檢閱。

以往團隊要做程式碼檢閱往往是興之所致，偶一

為之。由於團隊開發工具並未整合這個功能，因此不

容易將這項工作標準化，並呈現在開發的日常工作項

目中。Visual Studio 2012 結合 Team Foundation

Server 2012，透過新增的「程式碼檢閱要求/回應」工

作項目與擱置集，提供有流程與通知的程式碼檢閱。

當編寫完程式碼且尚未簽入到原始碼控制前，可

以透過「Team Explorer」視窗發出「要求檢閱」程式

碼的需求，如圖所示：

上圖:(搭配進行中的工作項目與編輯完的程式碼，透

過 Team Explorer 視窗要求其他的團隊成員檢閱程式

碼) 。

Team Explorer 會產生 TFS 新提供的「程式碼檢

閱要求」工作項目，並自動帶著在「我的工作」內「進

行中的工作項目和變更」之下，你所選定的進行中之工

作項目。你只要選定一個以上的「檢閱者」，並稍加說

明就可以「送出要求」。

檢閱者的 Team Explorer 會自動呈現所收到的

「程式碼檢閱要求」工作項目，如圖所示：

上圖:(透過檢閱流程，可以讓檢閱者比較與標註，並回傳檢

閱結果)。

檢閱者點選 Team Explorer 內的檔案，Visual

Studio 自動以程式碼檢閱的方式開啟原始檔，閱讀內

容並加入註解。並將結果傳送給提出檢閱的開發者。

最後檢閱結果回到原開發者手上時，原開發者可以透

過 Team Explorer 所提供的程式碼檢閱頁籤，決定如

何關閉該檢閱需求：完成或放棄。


83

分析程式碼複製品(Code Clone)

程式設計師常常做的一件事情就是複製/貼上相

近功能的程式碼，但重複的程式碼往往是 Bug 的來

源，因為程式設計師修改部分程式碼功能時，往往會

漏了修改其他區塊相同用途的程式碼。而在程式碼重

構的流程中，尋找近似或重複的程式碼並將其轉成函

數是個重要的步驟。但，我們怎麼知道整個方案中，

有哪些程式碼段是相近的呢？

Visual Studio 開發團隊研發了特殊的演算法，可

以為我們回答上述的問題。於新 Visual Studio 2012

版本中，提供「分析程式碼複製品的方案」功能，如

圖所示：

上圖：(透過分析程式碼複製品的功能，比較在方案中近似

的程式碼段落)

選擇主選單「分析」->「分析程式碼複製品的方

案」選項，Visual Studio 2012 會自動分析方案中相

似的程式碼區塊，並在下方的「程式碼複製品分析結

果」視窗中，呈現那些檔案中有近似的程式碼區塊。

你可以直接滑鼠雙擊某筆記錄，在程式碼編輯區域開

啟該檔案以呈現所搜尋的程式碼區塊。或是僅將滑鼠

移到某筆記錄的上方，透過浮動的提示訊息快速檢視

一下彼此近似的程式碼內容。

除了讓 Visual Studio 2012 自行比對近似的程式

碼區塊外，也可以在程式碼編輯視窗中選擇某一段程

式碼後，滑鼠右鍵選擇快捷選單中的「在方案中尋找

相符的複製品」選項，如圖所示：

上圖：(直接選擇某段程式碼，而後在方案中找尋近似的程

式碼段) 。

透過複選程式碼行以指定程式碼範本，Visual

Studio 找到近似的程式碼區塊後，依然會在下方的

「程式碼複製品分析結果」視窗中呈現與該段程式

碼近似的其他程式碼。

強化 IntelliTrace

在 Visual Studio 2010 時，首次提供 IntelliTrace

功能，讓開發者能夠回溯應用程式是如何執行到其當

前狀態的。IntelliTrace 藉由追蹤 .NET 執行環境所發

出的事件，例如存取檔案、registry、資料庫，例外錯

誤…等，為應用程式執行時的行為提供了詳細的資訊。

這可以大幅減輕找尋程式 bug 的負擔。但由於不容易

在測試環境或正式環境方便地執行 IntelliTrace，以收

集應用程式執行在不同環境所觸發的事件。這讓普遍

存在的現象依然無解，開發者無奈地回答測試者或使

用者：「我這裡可以正常執行啊」，資訊不夠永遠是

整個團隊的痛。

Visual Studio 2012 為解決這個問題，提供了單

一.cab 壓縮檔，可以簡單地複製到正式環境。藉由

PowerShell 載入 IntelliTrace 相關模組後，就能夠執

行擷取應用程式執行記錄之功能。

安裝完 Visual Studio 2012 後，預設在以下的目

錄存放了 IntelliTraceCollection.cab 檔案：

C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7 \IDE\CommonExtensions\Microsoft\IntelliTrace\11.0.0


84

解開該檔案並複製到 USB 磁碟後，就可以到要收

錄資料的目的機器開啟 PowerShell。不須任何安裝步

驟，僅需要透過如下的 PowerShell 指令載入相關的模

組：

Import-Module '.\Mi-

crosoft.VisualStudio.IntelliTrace.PowerShell.dll'

載入模組後，你可以 Get-Command 指令確認

有哪些相關指令：

Get-Command *IntelliTrace*

至此的畫面約略如下圖所示：

上圖：透過 PowerShell 載入啟動 IntelliTrace 功能的指令

模組

若想要了解啟動 IntelliTrace 追蹤的指令用途，也

可以透過 Get-Help 指令叫出說明：

Get-Help Start-IntelliTraceCollection

透過 Start-IntelliTraceCollection 指令可以開始

追蹤 IIS「應用程式集區」所支援的網站，指令範例如

下：

Start-IntelliTraceCollection

"FabrikamFiber.Extranet.Web"

c:\IntelliTrace\collection_plan.ASP.NET.trace.xml

c:\LogFileLocation

在上述範例中，追蹤 FabrikamFiber.Extranet.Web

應用程式集區的各種應用程式事件(如存取檔案、資料

庫、例外錯誤 … 等 ) ，而要蒐集那些事件則是由

collection_plan.ASP.NET.trace.xml 收集計畫所指定

(此為微軟預設提供的收集計畫範本檔)。而所收集到

事件紀錄將會放到 c:\LogFileLocation 目錄下。

執行 Start-IntelliTraceCollection 指令後，預設會

等待你按「Y」。在準備好可以錄製應用程式執行事件

後，按下 Y 就開始錄製，其間可以透過 Get-Intelli

TraceCollectionStatus 指令觀察錄製的情形，範例如

下：

Get-IntelliTraceCollectionStatus -ApplicationPool

"FabrikamFiber.Extranet.Web"

Stop-IntelliTraceCollection-

執行完發生問題的程式功能後，可以透過 Stop-

IntelliTraceCollection 指令結束錄製，範例如下：

執行 Stop-IntelliTraceCollection 指令後，依然

會等待你按「Y」才停止錄製。整個過程如圖所示：

上圖：啟動、檢視狀況與停止 IntelliTrace 的事件收集。

結束錄製後，若有錄到事件資料，會在啟動

IntelliTrace 錄製時所指定的目錄下存放.iTrace 檔案，

你可以透過 Visual Studio 開啟該.iTrace 檔，搭配原始

程式碼檢視應用程式觸發各種事件的進程，如圖所

示：


85

上圖:上方可以直接點選事件，進入到觸發該事件

的程式碼。搭配右方的「IntelliTrace」視窗，可以檢

視各事件與程式碼的關係。提醒一點的是，若要同步檢

視事件與程式碼，需要有除錯符號，所以你需要以

Debug 組態編譯。

程式碼品質是需要開發團隊念茲在茲；始終堅

持才能不斷提升，也才能不斷地為資訊系統加入新價

值。但若要徒手做，往往事倍功半。TFS 2012/

Visual Studio 2012 以自身的需求，讓本身數千人的

團隊可以不斷提升品質與價值，因而在不斷在自己這

個產品內迭創新猷。這裡，僅稍述了程式碼檢閱、分

析程式碼複製品與 IntelliTrace 三項功能，以提升程

式碼在開發與執行時的品質。但進入 TFS 2012/

Visual Studio 2012 後，你將會發現 TFS/VS 團隊數

年來對建立更好的團隊開發工具之執著。


86

別再說沒時間測試 – 探勘測試(Exploratory Test)及 Test

Manager 2012 的進化

探勘測試

要談軟體品質，先談軟體測試。要讓軟體滿足使

用者需求，先要讓測試人員以使用者的角度完整測試。

但，系統性地測試有著”起頭難”之困境。以往

可能要由測試人員撰寫測試案例，準備好測試環境、

資料與執行步驟、描述預期結果，而後透過 Microsoft

Test Manager (MTM)工具程式執行測試。換言之，測

試前的準備工作往往耗費時日。而團隊中的任何一個

成員或是使用者可能想直接進行測試，並透過工具記

錄步驟與系統實際反映的狀況，直接彙整執行測試時

蒐集到的資訊發 Bug，且將測試過程轉換為手動測試

的測試案例，其後再執行回歸測試。

要讓測試隨手可做，又要避免測試人員或使用者

想到什麼測什麼(ad-hoc test)，而沒有後續追蹤與回

歸測試。Microsoft Test Manager 2012 工具程式新

增了「探勘測試」功能，簡化了系統性測試的起始難

度，隨手做起。

開啟 Microsoft Test Manager 2012 工具程式

後，在「測試」項目下，可以直接點選「進行探勘測試」，

點選圖 1 中的「瀏覽」按鈕，便可直接啟動對應用系統

的操作測試：

圖 1:透過 MTM 新增的探勘測試，可以在任何時候直接啟

動對應用系統的操作測試

也可以選取圖 1 下方任何一個「產品待處理項目」，

而後點選「瀏覽工作項目」按鈕，則隨後建立的測試

案例將會與該工作項目連結。而不管是使用「瀏覽」

或「瀏覽工作項目」按鈕，都可以選擇其旁邊的向下

箭頭，從下拉選單中選擇搭配選項執行測試，進而在

選項中設定測試所針對的組建、組建組態、測試設定

與環境等相關選項。

接著，開始操作新彈出的測試錄製程式，如圖 2

所示：


圖 2 ：透過步驟錄製程式可以擷取使用者的操作步驟與影

像和聲音

按下圖 2 中的「啟動」按鈕後，可以依照一般操

作應用程式的方式操作待測應用系統，這時錄製程式

會在背景錄下操作過程。當有任何錯誤發生時，可以

透過上方工具列的「加入螢幕擷取畫面」按鈕，讓你

凝結住 Windows 桌面影響，進而選取畫面區域的圖

像貼附到註解內，如圖 3 所示：


87

圖 3 ：擷取應用程式任何錯誤畫面

而後可以直接點選「建立 Bug」按鈕，對 TFS 發

出「Bug」工作項目，如圖 4 所示：

圖 4 ：在 TFS 建立 Bug 工作項目

圖 4 中，可以看到工具程式已將操作過程以 Step

by step 的方式提供文字描述，並將執行測試時，各種

「診斷資料配接器」所擷取的資訊(如操作步驟的錄影

檔案)以連結的方式呈現。

若點選文字區域上方「變更步驟」連結，會叫出

「變更步驟」對話窗(參看下圖 6)，你可在該對話窗中

選擇要留下的步驟。或是直接編寫工具產生的文字，讓

文字敘述可以正確呈現你所做的測試。

建立完 Bug 後，可再建立「測試案例」工作項目。

點選圖 3 上方工具列中的建立測試案例按鈕，會叫出

如圖 5 的「新增測試案例」對話窗：

圖 5 ：將「探勘測試」直接轉成測試案例

從圖5可以看到執行探勘測試時的操作行為已經

轉成手動測試的步驟，你可以再進一步編寫這些步驟

與「預期結果」，讓探勘測試變成可重複執行的手動

測試案例。未來，還可以再進一步轉成「自動程式碼

UI 測試」…等其他類型的測試。另外，透過 Test

Manager 2012 所編寫的測試案例步驟與預期結果支

援豐富格式的文字，讓你可以不同的字形顏色標示重

要的說明。當以 Test Runner 執行該手動測試時，如

圖 5 右方所示，將可提供更明確的訊息。

若點選圖 5 中的變更步驟按鈕，可以叫起「變更

步驟」對話窗，以選擇要留在測試案例中的探勘測試

操作步驟，如圖 6 所示：

圖 6 ：選取 Bug 或測試案例所要記錄的步驟


88

你可以複選圖 6 中的步驟後按下「選取」按鈕，回

到「新增測試案例」對話窗，就可以變更手動測試的步

驟。圖 5 點選儲存按鈕後，回到如圖 7 的「探勘測試」

工具程式畫面：

圖 7 ：「探勘測試」工具程式會記錄曾經執行過的動作

你可以清掉圖 7 中所有的文字內容，繼續探勘應

用系統，並繼續尋找 Bug 與建立測試案例，只是步驟

中會含有所有過程，你會需要個別挑選要放入 Bug 或

測試案例中的步驟。也可以點選「結束測試」，回到

Test Manager 將可以看到新增的手動測試案例。如圖

8 所示：

圖 8 ：檢視既有的測試套件與案例

從圖 8 可以看到「探勘測試」已經轉化成標準的

手動「測試案例」，繼續透過 Test Manager 組織與執

行該測試案例即可。

而在 Test Manager 2012 的「測試」區域之「檢

視探勘測試工作階段」頁籤，可以看到以往曾經執行的

探勘測試之相關資訊與狀態，如圖 9 所示：

不管團隊採用何種開發流程，手動測試都是驗證

需求、找尋 Bug 的基本。以往，開發與測試團隊以及

使用者，或是小型團隊沒有編制，要執行測試的人員

可能憑記憶隨手測，但這些成果不易累積與重用。長

期而言，對提升開發品質的效果有限。現今透過 Team

Foundation Server 2012/Visual Studio 2012「探勘

測試」，能夠輕易地轉化這些 Ad-Hoc 測試，並納入

TFS 管理，這讓團隊的任何人都可以為軟體品質盡一

份心力。


89


網站效能及壓力測試 – 使用 Visual Studio Ultimate 2012

良好的效能是成功的網站必備的條件之一，一個

效能不佳的網站即使能夠提供正確的功能，也會因為

無法有效率地支援使用者的工作，而躋身成功的網站

的行列。因此如何確保網站能夠擁有良好的執行效率，

就變成網站開發技術的顯學。

要確保網站擁有良好的執行，首先必須了解如何

測試網站的效能，經由測試網站的效能發掘網站效能

不佳的瓶頸，並加以改善，才能夠開發出執行效率良好

的網站。

作者:王寧疆 (微軟 MVP)

Microsoft Visual Studio Ultimate 2012 提供完

整的網站效能測試工具，包括可以測試網頁的功能與

效能的[Web 效能測試]，以及能夠測試網站同時被很

多使用者同時瀏覽，即高負載的狀況下的執行效能的

[負載測試]。欲使用 Visual Studio Ultimate 2012 對

網站進行[Web 效能測試]或[負載測試]，必須先建立

[Web 效能和負載測試專案]型態的專案，才能夠對網

站執行[Web 效能測試]或[負載測試]。

[注意]

Visual Studio 2012 的所有版本中, 只有 Visual Stu-

dio Ultimate 2012 支援對網站進行[Web 效能測試]

及[負載測試]。

Visual Studio Ultimate 2012 提供的網站測試

功能，包括[Web 效能測試]和[負載測試]，都不會侷

限於只能測試使用 ASP.NET 技術開發的網站，任何

以 HTTP 協定和 XmlHttp 協定為基礎的網站，包括

使用 ASP、PHP、JSP、AJAX、jQuery 等知名的網

站開發技術開發的網站，都可以利用 Visual Studio

Ultimate 2012 進行測試。

Web 效能測試

您只要為[Web 效能和負載測試專案]型態的專

案加入[Web 效能測試]範本，再瀏覽至欲測試的網

站，並對網站進行操作，就可以將對網站的操作動

作錄製成[Web 效能測試]的內容，您也可以視需要

將錄製妥的[Web 效能測試]的內容轉換成程式碼，加

以修改後，利用程式控制的方式對網站執行測試。圖

1 所示即為使用 Visual Studio Ultimate 2012 提供的

[Web 效能測試]錄製操作網站的動作的情形：

圖 1 ：使用 Visual Studio Ultimate 2012 提供的[Web 效

能測試]錄製操作網站的動作的情形

Visual Studio Ultimate 2012 提供豐富的功能

協助控制[Web 效能測試]的細節，例如透過[Web 效

能測試]錄製到的每一個操作動作都可以設定考慮時

間、回應時間目標、逾時時間、報告名稱等屬性，進

行更精細的測試控制，也可以加上[插入迴圈]和[插入

條件]控制重覆測試的動作，或是依據條件執行測試的

動作，甚至可以利用[驗証規則]和[擷取規則]驗証或擷

取網站執行的結果，或是利用[尋找和取代要求中]功

能搜尋/取代 Request 內容。

執行錄製好的[Web 效能測試]就可以看到類似

圖 2 的畫面，我們可以從執行[Web 效能測試]的結

果畫面的 HTTP 狀態、時間總計、要求位元組、回

應位元組等欄位看到每一個操作網站的動作的效能

資訊和執行結果，或是利用畫面下方的 Web 瀏覽

器、要求、回應、內容、詳細資料等頁籤檢視操作

網站的動作的要求與回應的詳細內容：

90


圖 2 ：執行錄製好的[Web 效能測試]的結果畫面

負載壓力測試

欲使用Visual Studio Ultimate 2012對網站進行

負載測試，必須預先製作或錄製妥至少一個[Web 效

能測試]的內容，做為負載測試的基礎。您只要為預先

建立好的[Web 效能和負載測試專案]型態的專案加入

[負載測試]項目，就可以設定負載測試的內容，包括使

用者負載數、欲模擬的負載模式、使用者使用的瀏覽

器種類與版本、網路連線條件、以及欲搜集的效能計

數器資訊等等。

執行建立妥的負載測試，您將會看到類似圖 3 的

執行畫面，並從執行畫面看到網站負載測試的詳細過

程：

負載測試執行結束後您將可以看到類似圖 4 的畫

面：

圖 4 ：負載測試執行結束後顯示摘要資訊的畫面

您可以從負載測試的結果畫面看到描述網站執

行效能的重要指標，包括網頁回應時間、執行最慢的

前 5 個網頁、每秒能夠處理的 Request(即 RPS)、每秒

能夠執行的異動數、以及平均內容長度。除了這些摘

要資訊以外，我們還可以從圖形、資料表、與詳細資

料等頁籤獲取更多有關負載測試的相關資訊。

Visual Studio Ultimate 2012 支援的負載測試

功能中還有一個非常優秀的功能，那就是製作負載測

試的結果報表。Visual Studio Ultimate 2012 支援自

動將負載測試的結果傳送至 Microsoft Excel 製作負

載測試的結果報告，透過 Excel 方便的報告與圖表功

能顯示負載測試的結果，減輕程式開發團隊製作負載

測試報告的負擔。

圖 5 所示即為利用 Microsoft Excel 製作負載測

試比較報告，比較兩次負載測試數據的報告：

圖 5 ：利用 Microsoft Excel 製作負載測試比較報告

91


圖 6 所示即為利用 Microsoft Excel 製作負載測試趨

勢報告，比較兩次負載測試的數據與進步或退步的趨

勢：

圖 6 ：利用 Microsoft Excel 製作的負載測試趨勢報告

92


高效能及高可靠度網站的完整拼圖 – Visual Studio 與

System Center Operations Manager 作者:王寧疆 (微軟 MVP)

Microsoft Visual Studio 2012 提供各種應用

程式開發的完整支援，從系統分析與設計、開發、測

試、偵錯、部署、甚至包括專案與版本管理，都能夠

有效支援並解決程式開發團隊在程式開發過程中需要

的各項功能，但是系統完成開發並部署到實際的執行

環境之後，所面臨的挑戰才真正揭開序幕。

以開發 ASP.NET 網站為例，程式開發團隊可以

利用 Visual Studio Ultimate 2012 支援的[Web 效能

測試]和[負載測試]等功能在系統的開發與測試階段對

所開發的 ASP.NET 網站進行測試，以了解所開發的網

站在執行效能方面的表現是否能夠滿足使用者的期

望，如下圖所示。(編註: 若網站是使用非微軟技術所開

發，例如 JSP, PHP 等，同樣可以使用 Visual Studio

Ultimate 進行負載測試)

圖 1 ：使用 Visual Studio Ultimate 提供的負載測試功能測

試 ASP.NET 網站負載表現

如果負載測試的表現不佳，程式開發團隊就可以

立即對網站執行效能調整，如果負載測試的表現令人

滿意，就可以將開發好的網站上線。

將通過測試的網站部署到實際的執行環境之後，

網站是否能夠正常地提供服務，包括網站是否能夠提

供良好的效能與安全性，將會因為真實的執行環境的

各種未預期的變數，增加排除網站執行的各種問題的

困難度。對於一個複雜、跨越多台伺服器，整合了

Windows 平台以外的各種異質平台與執行環境，甚至

是部署到客戶端或雲端的 ASP.NET 網站而言，如何找

出問題的根源並有效地加以解決，是系統成敗的無法

逃避的考驗。

Microsoft System Center Operations Man-

ager 2012 是一套可以對 Microsoft .NET 應用程式，

ASP.NET 網站 (包括部署到 Windows Azure 雲端作

業系統的網站)、WCF 服務、Windows 服務、

SharePoint 伺服器、SQL Server 資料庫伺服器、

Microsoft Windows、Linux、與 Unix 作業系統，SQL

Server 資料庫伺服器，以及 Router、Switch、VLAN

(Virtual Local Area Network)等網路裝置進行線上

即時監控的完整解決方案，是建置成功的企業資訊系

統不可或缺的工具。

圖 2 ： System Center Operations Manager 2012 支援

資訊系統線上即時監控的四大功能

1. 監控使用者的操作體驗

System Center Operations Manager 2012

支援的線上即時監控功能能夠協助了解使用者對應

用程式的執行效能與品質的體驗，一旦使用者操作系

統時發生錯誤，或是遭逢資訊系統執行效能不佳，系

統執行異常的資訊就可以立刻反應在監控系統的控

制台或報表分析中，有助於解決資訊系統執行的問

題，提升客戶的滿意度。圖 3 所示即為使用 System

Center Operations Manager 2012 提供的報表功能

分析網站執行效能異常的原因：

System Center Operations

Manager 2012 支援的線上即時

監控功能

93


圖 3 ：使用報表功能分析網站執行效能異常的原因

2. 應用程式、伺服器、與網路裝置監控

System Center Operations Manager 2012 支

援監控系統的健康狀況，並追蹤問題的根源，協助系

統開發團隊快速診斷執行時期發生的問題。

System Center Operations Manager 2012 支

援監控 Microsoft Windows、Linux、與 Unix 系統，

SQL Server 資料庫伺服器、ASP.NET 網站與部署到

Windows Azure 雲端作業系統的網站，WCF 服務，

SharePoint 網站，Microsoft.NET 應用程式，

Windows 服務，以及 Router、Switch、 VLAN(Virtual

Local Area Network)等網路裝置，是資訊系統線上即

時監控作業的完整解決方案。例如圖 4 所示即為使用

System Center Operations Manager 2012 監控部

署到 Windows Azure 雲端平台的 ASP.NET 網站執行

情形：

圖 4 ：監控部署到 Windows Azure 雲端平台的 ASP.NET

網站執行情形

圖 5 所示為使用 System Center Operations

Manager 2012 監控 Microsoft SharePoint Server

2010 網站執行狀況的畫面：

圖 5 ：監控 SharePoint Server 2010 網站執行的情形

除了可以監控資訊系統以外，System Center

Operations Manager 2012 也支援監控網路裝置。

如圖 6 所示:

圖 6 ：監控網路裝置的情形

System Center Operations Manager 2012 不

僅能夠監控 ASP.NET 網站、SharePoint Server 伺服

器、 S Q L S e r v e r 伺服器、也可以用來監控

Microsoft .NET 應用程式，不過監控 Microsoft .NET

應用程式，只能監控應用程式執行時期是否有發生錯

誤?是否有執行效能方面的問題? 如果要深入分析

Microsoft .NET 應用程式的詳細效能數據，可以使用

支援獨立安裝的版本 – Avicode (非整合到 System

Center Operations Manager 2012 的版本)，以便深

入分析 Microsoft .NET 應用程式的詳細效能數據。如

圖 7 所示:

94


圖 7 ：使用 Avicode 解析 Microsoft .NET 應用程式的詳細

效能數據

針對監控 Microsoft.NET 應用程式的需求，

Microsoft 將會在未來的版本更新或 Service Pack 中

提供完整的 .NET 應用程式監控支援。

3. 使用者自訂事件監控

針對監控由橫跨位於不同地點的伺服器與網路

裝置組成的複雜資訊系統，System Center Opera-

tions Manager 2012 支援自訂監控樣版進行跨越多

種網路裝置與多種伺服器的自訂事件監控，以監控複

雜資訊系統的執行狀態。如圖 8 所示:

圖 8 ：利用自訂的監控樣版監控複雜的資訊系統執

行的情形

如果資訊系統會利用 SQL Server 資料庫管理資

料，也可以透過 System Center Operations Man-

ager 2012 監控 SQL Server 資料庫的執行狀況。例如

圖 9 所示:

圖 9 ：監控 SQL Server 資料庫每秒執行的資料庫異動次數

的情形

4. 應用程式模組解構

System Center Operations Manager 2012

支援分析與解構組成資訊系統的模組及模組之間的

相依關係，並分析組成系統的模組之間溝通和執行

的效能數據，可以精準地找出系統執行效能的瓶

頸。如圖 10 所示:

圖 10 ：解析資訊系統中各個模組溝通的架構，以及

模組與模組之間溝通的效能情形

System Center Operations Manager 2012 不

只是一個監控工具而已，它也是一個管理工具，可以

利用監控畫面右方的 Tasks 項目提供的功能進行管理

的工作，包括重新啟動服務、重新啟動應用程式集區

等等。

5. 與 Team Foundation Server 整合 – 開發及系統

管理協同合作

當 System Center Operations Manager 2012

監控到系統執行發生的錯誤時，還能夠協助程式開發

95


團隊利用 Visual Studio 程式開發工具開啟軟體專案，

並指出引發系統執行發生錯誤的原始碼位置，有效縮

短程式開發團隊解決系統執行的錯誤，或是將監控到

的錯誤建立成Team Foundation Server 專案管理平

台的工作項目 (Work Item)，例如開 Bug 單並指派給

程式開發團隊成員進行除錯，與 Visual Studio 和

Team Foundation Server 結合成系統開發的完整解

決方案，讓開發人員與系統管理維運人員可以協同作

業，以確保系統的高可靠性。如下圖所示，

圖 11 ：將監控到的錯誤建立成 Team Foundation Server

的工作項目 (Work Item)

有了 System Center Operations Manager

2012 的幫助，與支援系統分析設計、開發、測試、

偵錯、部署、與專案及版本管理的首選開發工具 -

Visual Studio 整合，將可拼湊出開發資訊系統的完

整拼圖，邁向開發成功的資訊系統之道路。

96


C++ 程式碼品質、程式效能、測試及進階功能

作者:王寧疆 (微軟 MVP)

在支援 Windows 應用程式開發工作方面，Visual

C++一直是巿場上最知名的領導品牌，不管在寫碼、

編譯、連結、或是偵錯方面，都能夠有效支援程式設計

師完成開發應用程式的工作，但是鑒於開發應用程式

的工作並非侷限於寫碼、編輯、連結、與偵錯而己，開

發應用程式的工作從系統分析設計與架構設計開始到

偵錯完成，尚包括關係到所開發的程式碼品質的單元

測試、程式碼分析、效能量測、原始碼版本管理，以及

程式碼審核等重要工作。新版的 Visual C++ 2012 除

了加強支援應用程式開發的基本功能以外，在支援應

用程式生命週期管理(Application Lifecycle Man-

agement - ALM)方面也有很多加強，使用新版的

Visual C++ 2012 將能夠有效支援應用程式開發的生

命週期中各階段所需要的功能，協助程式設計師更有

效率地開發出品質更穩定，執行效率更優良的應用程

式。圖 1 所為應用程式開發的生命週期的五大階段，

也是新版的 Visual C++ 2012 對應用程式開發生命週

期的完整支援範圍：

圖 1 ：應用程式開發的生命週期的五大階段

Visual C++ 2012 對 ALM 的支援

Visual C++ 2012 支援的塑模工具，Unit Test

Framework，程式碼分析功能，效能精靈，加上 Visual

Studio Team Foundation Server 2012 支援的原始

碼版本管理，組建，與 Lab 管理等功能，可以有效支

援程式開發團隊在軟體開發生命週期五大階段的管

理工作。

Visual C++ 2012 支援的架構

與塑模工具

使用 Visual C++ 2012 的程式設計師可以利用

UML 模型文件、有向圖形文件、相依性圖形、及圖

層圖表來描述系統的模型和架構，也可以利用[架構

總管]視窗和[UML 模型總管]視窗管理或了解模型的

元素。圖 2 所示即為執行[架構 | 產生相依性圖形 | 針

對 include 檔]功能，解析 Visual C++ 2012 專案中

原始檔案之間的關聯的相依性圖形：

Visual C++ 2012 對單元測試

的支援

為了確保程式開發團隊開發的程式碼的正確性，

程式設計師應該對所開發的原始碼進行完整的單元

測試。Visual Studio 2012 不但支援實用的單元測試

功能，還可以結合 Test Manager 2012，對應用程式

進行UI測試，甚至實作探勘測試(Exploratory Test)應

用程式測試技術，支援在缺少需求文件或規格文件，

或是文件不完備的場合，透過有經驗的測試工程師對

應用程式進行測試。

認識探勘測試(Exploratory Test)

探勘測試(Exploratory Test)是一種強調測試者

自由度和責任的軟體測試技術，支援由測試工程師自

行設計測試的內容，並根據測試過程得到的結果和資

97


訊改變測試的內容，以得到較佳的測試品質，找出應用

程式潛在的錯誤。其特性在於不需要事先製作測試案

例，由測試工程師從了解應用程式的功能為出發點對

應用程式進行測試，並提供自動產生測試案例的功能，

在測試工作完成後順便補足應用程式測試案例。圖 3

所示即為使用 Visual C++ 2012 的[測試總管]視窗檢

視單元測試結果的畫面：

圖 3 ：利用[測試總管]視窗檢視單元測試結果

圖 4 所示為使用 Microsoft Test Manager 2012 支

援的最新探勘測試技術對應用程式進行測試畫面：

圖 4 ：使用 Microsoft Test Manager 2012 支援的

最新探勘測試技術對應用程式進行測試

Visual C++ 2012 對程式碼

分析的支援

良好的程式碼品質是一個成功的應用程式必備的

條件，良好的程式碼品質代表能夠有效降低應用程式

維護成本，提升使用者的滿意度，對應用程式與開發

團隊具有正面加分的效果。

對應用程式的原始碼執行程式碼分析主要的目的

在於發掘應用程式潛在的錯誤，特別是無法利用單元

測試得知的錯誤，以提升程式碼的品質。

欲導入程式碼分析功能，可以在使用 Visual C++

2012 建立專案的時候，於[MFC 應用程式精靈]的操作

畫面勾選[安全性開發週期(SDL)檢查]選項，加強程式

碼分析的項目，如圖 5 所示：

欲對專案的原始碼進行程式碼分析，只要執行[檢

視 | 其他視窗 | 程式碼分析]功能，開啟[程式碼分析]視

窗，再執行[分析 | 專案名稱]功能，就可以對專案中的

原始碼進行程式碼分析，例如以下的程式碼：

char *p=new char[64];

...

delete p;

就會被分析出有以下的品質問題：

C6283 Primitive array-new scalar-delete mis-

match

'p' 是以陣列 new [] 配置，但以純量 delete 刪除; 必

須以陣列 delete [] 刪除。

StaticAnalysis

98


表示刪除指向動態配置的陣列空間時必須在

delete 運算子的後面加上[]運算子。

圖 6 所示即為顯示在[程式碼分析]視窗中的程式碼分

析結果：

圖 6 ：顯示在[程式碼分析]視窗中的程式碼分析結果

[提示]

直接使用滑鼠的左鍵連按顯示在[程式碼分析]

視窗中的程式碼分析結果兩下，可以立即檢視有品質

問題的原始程式碼。

Visual C++ 2012 對應用程式效

能量測的支援

應用程式的執行效能是另一項程式碼品質的指

標，程式開發團隊可以利用 Visual C++ 2012 提供

的效能精靈量測應用程式的執行效能，找出應用程

式執行的瓶頸。

Visual C++ 2012 支援的效能精靈可以從四個面

向量測應用程式的效能，分別是：

1. CPU 取樣 : 檢視 CPU 的利用率

2. 檢測 : 量測類別的方法被呼叫的次數和耗用的時間

3. .NET 記憶體配置 : 檢視.NET 應用程式使用記憶體

的狀況

4. 資源爭用資料 : 檢視執行緒共時執行的狀況

程式開發團隊可以執行[啟動效能精靈]功能，分

析應用程式的執行效能。圖 7 所示即為使用效能精靈

量測應用程式效能的結果：

Visual C++ 2012 對原始碼版本

管理與程式碼審核的支援

良好的原始碼版本管理與程式碼審核機制也是

維繫程式碼品質不可或缺的一環。使用 Visual C++

2012 開發應用程式的程式設計師可以執行[檔案 | 原

始檔控制 | 將方案加入至原始檔控制]功能，將專案加

入至原始檔控制。圖 8 所示即為加入到原始檔控制的

Visual C++專案的內容：

圖 8 ：加入到原始檔控制的 Visual C++專案的內容

如果要強化簽入到原始檔控制的原始碼的品質，

程式開發團隊可以利用[Team Project]視窗的[要求

程式碼檢閱]連結，實作程式碼審核的動作，審核程式

開發團隊提交的程式碼的寫作風格、命名規則、註解、

執行效能、與安全性等方面都符合程式開發團隊的規

範，讓簽入到原始檔控制的原始碼具有更佳的品質。

99


圖 9 所示即為利用[Team Explorer 視窗]實作程式碼

審核的要求與回應的畫面：

圖 9 ：利用[Team Explorer 視窗]實作程式碼審核的要求與

回應的畫面

100

案例分享雄獅旅遊如何迎接行動化的新世代

彈性的系統架構 x 開發生產力 x 團隊開發管理平台 = 競爭力

觀光旅遊可說是現代人休閒

生活中重要的活動項目，並已是

競爭相當激烈的產業之一。在網

路的應用逐漸融入人們生活後，

更是削減旅遊業彼此間的差異

性，除了淪入價格戰以外，還能再

提供什麼樣的加值服務，吸引消

費者的青睞？眾家業者無不苦思

因應之道，就連業界龍頭雄獅旅

遊也不例外。

立足於旅遊業，在台生根超過 30 年的雄獅旅遊

集團，在多角化經營策略發展下，如今旗下的事業

體，除了雄獅旅行社，還跨足整合行銷、交通運輸、

資訊科技、菁英育成、傳媒等不同領域。更進一步將

整合旗下事業體，轉型邁向「生活產業」，延續集團

競爭力。

得以支持雄獅旅遊集團幾十年來發展，並持續

在業界保持領先地位，IT 基礎建設始終扮演關鍵角

色。早在 1990 年，雄獅旅遊就已自行開發民航電腦

訂位系統與旅遊資訊管理系統，並導入 ERP 進行內

部管控。2000 年雄獅旅遊網開站，團體旅遊線上報

名系統啟用，開始透過網路提供旅遊相關服務。由此

不難發現，雄獅集團對資訊科技發展的投入與重視。

建立團隊開發平台讓改版工作更有

效率

掌管雄獅旅遊網改版作業的雄獅旅行社資訊事

業處互動系統部經理徐鵬湧談起，對一個已經運作 10

年的商務網站而言，改版工作，真是一項大工程！首

先要把資料庫轉換至 SQL Server 2008 架構，光是搬

動這些龐大資料就耗費不少時間，更何況還要進行微

調與測試工作，緊接著才是新版網站系統的重新開發。

為了讓新版雄獅旅遊網能夠如期上線啟用，開

發設計團隊採用的是 Visual Studio 2010 Ultimate

團隊開發工具，搭配 Team Foundation Server

2010 (TFS 2010)控管開發專案，成員得以藉此團

隊開發管理平台進行協同作業，來提升專案執行效

率，管理者更可透過報表的產出，即時掌握專案進

度與品質。

選擇符合產業特性的技術架構才

是王道

所幸這些困擾資訊處系統開發組已久的問題，

在導入 Visual Studio 2010 開發平台後均獲得解

決。由於 Visual Studio 2010 開發平台提供的自動

化介面測試 (Automated UI Tests) 功能，不但可以

做到跨應用模組間的測試，並能記錄完整的測試流

程，同時藉由開發工具提供的 IntelliTrace 智慧偵

錯功能，讓開發工程師清楚瞭解測試結果，並且重

現測試過程以方便除錯。這些由 Visual Studio 2010

所提供的測試功能，不但可以省下測試工程師撰寫

測試案例及報告的時間，也讓專案小組成員在會議

案例分享

只是架構沿用至今，面對消費族群日趨重視使

用者經驗（User Experience），各式行動載具顛覆

人們的生活形態與使用習慣，如今看來，當時所規畫

設計的架構已不合時宜，改版作業勢在必行。

雄獅旅遊網提供團體旅遊、機票、航空自由行、環

遊世界、旅館、票券、國內旅遊旅遊資訊等服務項目，

是採用當時的主流技術 ASP（Active Server Page）開

發建置，運用 2 台伺服器，承載平均約 6 至 10 萬個獨

立 IP 的流量數，至今仍穩定提供相關服務。

101

另外因應行動裝置的需求，也將許多網路服務

以.NET 的 WCF(Windows Communication Founda-

tion) 技術實作，讓各式不同的裝置皆能很容易地存

取網站服務; 最重要的是，讓系統的架構更有彈性，

能快速地因應未來的改版需求。

導入軟體生命週期管理平台，確

保程式品質

旅遊業商品特性之一，就是品項難以達到標

準化，往往會受到時間、地點、人員、消費者本身

需求等因素影響，產生不同限制條件。雄獅旅行社

資訊事業處旅遊系統部資深經理陳憶紋談到，旅遊

服務路線中就曾發生過，條件過於複雜，非欄位判

斷就可完成訂單，這時就需搭配人力進一步了解。

她舉例像是 12 歲以上基本上要算大人，就一

般而言，後台訂單輸入系統的設計條件中，就需要

去配合這類遊戲規則，但是，並非每條旅遊路線都

適用，甚至是有一套獨特的規格條件，因此有時還

是需要產品部中懂得規格的人才能正確判別。而後

台系統設計大都是常用到的功能選項，除非有新推

出的商品或活動，需要另外制定網頁，考量其常態

性，才有進行修改或變更的必要; 另外像表單的設

計也花了一些時間設計，以確保使用者介面是很容

他以過去在團隊中曾發生過的案例談到，執行

開發專案大多會分派工作，由不同組別撰寫程式，當

時其中有一組，程式碼還沒完成就做了簽入（Check

-in），造成最後無法 Compile，當時還得回過頭一

個一個去尋找，到底是哪一個檔案出問題。之後在

TFS 2010 上增設了簽入原則（Check-in Policy），

由系統自動去驗證簽入的程式碼是否可被執行即

可，不僅讓開發流程較順暢，也省去人力檢查麻煩。

此外，每個簽入的檔案、版本，在 TFS 2010 都

會留下詳盡的歷程記錄，像是曾做過的變更、對應

的工作項目、簽入的部分出現 Bug 等，都可在版本

控制的紀錄中查看。這對開發專案管理相當實用。

而目前正在測試階段的應用是工作項目（Work

Item）的管理面，例如將工程師撰寫程式碼所花費

的時間等資訊，皆能夠進一步回饋到 ERP 系統。

對於電子商務系統，最重要的就是確保大量網

友同時在網上下單或查詢，系統的可用性及回應速

度仍能保持一定的水準。要做到這點，就可依賴

Visual Studio 2010 Ultimate 所提供的系統效能

及壓力測試功能。徐鵬湧提到，未來期待新系統或

新模組上線前，皆能善用工具所跑出來的測試報表，

事前找出系統可能的效能瓶頸所在，相信對系統維

運及開發人員都能更安心的確保營運不中斷。

無所不在的旅遊資訊

為了要貼近現代消費者的應用需求，如何讓消

費者所需的相關資訊能夠在各式行動載具中順利

呈現，幾乎是提供網站服務項目中不可或缺的一環。

但這些行動載具的設備規格、系統平台皆有各自的

獨特性技術，也各有其愛好族群，因此為了滿足不

同消費族群，雄獅旅遊網於去年首推的手機訂房、

訂機票服務，就是由 Android 與 iOS，兩組不同人

所開發完成的。

案例分享

對於強調一致性與標準化的 IT 管理系統而言，

要滿足使用者五花八門的需求外，仍然必須確實掌

握可用性與可靠度。就這方面而言，徐鵬湧相當認

同 Team Foundation Server 2010 (TFS 2010) 對

管控開發專案的協助，尤其是做版本控制。

由於旅遊業是以「人」為本的服務業，產業特

性使得旅遊商品與行銷活動的變動性相當大，像是

去年（2011）日本發生 311 大地震，影響消費者赴

日觀光旅遊的意願，或像是今年(2012)台灣櫻花季

很熱門，相關的旅遊商品與行銷活動都必須隨之及

時改變來因應，這時就是考驗系統架構設計是否夠

有彈性，以及開發團隊的能力及速度，才能及時上

線。在旅遊業電子商務網站中，例如讓網友挑旅遊

行程並自行調整套餐內容，都是一種線上表單，而

ASP.NET Web Form 就提供許多實用的控制項，在

Visual Studio 開發工具中直接拖拉放就可以應用，

可以省去許多開發撰寫的時間。至於程式語言，規

劃期間也有評估過 C#，最後選 VB.NET 主因是其承

襲了 ASP 的語法特性，有些部分不需異動，可沿用

或直接參考，對既有的開發人員而言自然較好上手。

前，就能先掌握專案執行狀況，並就每位成員負責專

案範圍提出相關建議，讓專案會議溝通變得更有效率。

易輸入及操作的，因為門市人員要能夠很快速地打

單或是查詢行程，才能提供最佳的服務給消費者。

102

不論如何，前端呈現方式、可以在哪一種設備呈

現，持續不斷的改變已成必然，而企業後端伺服器能否

具彈性，適時將有用的資訊以通用格式轉出才是最重

要，如此才能跟得上前端變化的腳步。徐鵬湧說明，

雄獅旅遊手機訂房、訂機票的運作機制，這部分都是透

過 WCF Data Services 來撈取資料，Export 出來資料

是通用的 JSON（JavaScript Object Notation）文字

資料交換格式，再傳送到各行動載具中處理就可以呈

現，相當方便應用。

其實用微軟技術的最大好處就是可以沿用，不用

時常打掉重練，陳憶紋及徐鵬湧兩位如此強調。而

旅遊業的特性，不僅是行程內容規劃，還要讓需求

者能夠透過各種不同裝置及平台快速的找到資訊，

才能讓企業競爭力立於不敗。

案例分享

這種人力配置雖然不一定符合成本效益，但徐

鵬湧不諱言，目前可找到擁有跨平台技術的人力較

少見。所幸對於下一步計畫支援的 Windows

Phone 手機以及 Windows 8 Metro Style App 的

開發，程式開發方面較不擔心，不僅目前的開發工具

平台就有提供方便、直覺的開發環境，而且現有人員

也懂得.NET 技術，跨入的門檻也相對較低。另外像

Visual Studio 下一版本 Visual Studio 2012 及

A S P . N E T 4 . 5 也更全面支援跨行動裝置網站

(Mobile Web)的開發，例如 jQuery Mobile 套件支

援不同行動裝置平台的 UI 及瀏覽器，以及 HTML5/

CSS 及 JavaScript 的開發支援加強，讓我們邁向行

動裝置開發更容易。

上述案例分享的詳細內容，請上 MSDN

http://msdn.microsoft.com/zh -tw/vstudio/

dd162434.aspx

http://msdn.microsoft.com/zh-tw/vstudio/dd162434.aspx

http://msdn.microsoft.com/zh-tw/vstudio/dd162434.aspx

103

案例分享金士頓科技打造 Windows Store App

即時掌握生產線良率資訊

Visual Studio 2012 助陣，Scrum 敏捷開發實力大增！

遠東金士頓著手開發 Windows Store App，應用

於產線即時檢測及監控，讓生產線上的工程師，在

現場即可透過 Windows 8 平板電腦，從釘選在桌面

動態磚上不斷輪播的即時訊息，瞭解當下生產線的

良率狀況，實現走動式管理。

接著進入 App，藉由綠、黃、灰、紅等不同燈號

所顯現的直覺式畫面，一目瞭然看出各條生產線目前

的良率水準，進而針對出現紅燈異常現象的生產線，

逐層鑽取找出原因，以利研擬因應對策，迅速排除障

礙。

金士頓(Kingston)身為全球最大的記憶體產品獨立製造商，在世界各地設立 4 座工廠，分別座落在美國、

台灣與大陸，共計擁有超過 60 條 SMT 生產線，每月產出逾 2,500 萬個記憶體模組。為確保產品品質之可

靠性，金士頓亟欲結合行動管理，隨時掌握生產線的實際狀況。

這套能在走動間，隨時掌控生產線狀況的 App，

其幕後扮演推手的工具與技術，其實不在少數，但

居於軸心者一是 Scrum 敏捷開發框架，另一則是

微軟 Visual Studio 2012 ；前者是加速 App 開發以

及時反應客戶需求之關鍵，至於後者，不僅是開發

Windows Store App 的唯一工具，也提供 Scrum

所需之工具與流程範本。

Scrum 敏捷開發，彈性面對快速

變動的需求

「從兩年前首度採用 Scrum 敏捷開發，我就對

這個框架(Framework)，懷抱莫大期許，」遠東金

士頓資訊部處長曹世杰說，一開始尚未對 Scrum

深入接觸時，原本以為它旨在讓程式寫得更好更

快，但進一步仔細研究，才發現並非只是如此，因

為 Scrum 關注的是軟體開發之過程、而非技巧，

可幫助企業開發團隊建立自主開發能力，妥善地面

對使用者動態變化的需求，尤其是科技業的變動

大，常需因應市場及客戶狀況隨時變更系統，同時

在專案開發過程中也能清楚地知道目前專案的狀況

及進度。再者因每日專案團隊成員皆會一同進行站

立會議，可幫助同仁互相了解進度及開發中所遇到

的困難，無形中專案成員的成熟度及默契也提升不

少。

遠東金士頓資訊部處長曹世杰（左三）說：「Scrum 關注的是軟體

開發之過程、而非技巧，可幫助企業開發團隊建立自主開發能力，

妥善地面對使用者動態變化的需求。」

但不可諱言，Scrum 敏捷開發僅是就軟體開發

應該有的結構與步驟，做出基本定義與說明，因

此在導入 Scrum 之初，必需持續不斷地在專案過

程中獲取經驗，如此開發團隊成員才愈來愈能掌

握 Scrum 精髓，逐漸地提升自主開發能力，開發

時程也漸能準確預估，並有效縮短開發時程。

案例分享

遠東金士頓資訊部資深工程師邱珮雯，在這次的

Windows Store App 開發專案中扮演 Product

Owner 角色，她回憶過往，從兩年前開始遵照

Scrum 舉行每日站立會議 (Daily stand-up meet-

ing)，只見大家透過白板、便利貼來進行專案管理，

儘管過程有些生澀、工具頗為傳統，但站在使用者角

104

度，很快就能感受到好處，因為有了這個專案進度分

享的場域，Product Owner 不必再向專案團隊追問進

度，就能得知哪些需求已被滿足、哪些尚待執行。

案例分享

活用 Scrum 敏捷開發的電子化工

具-有效提升專案的掌握度

如今透過 Team Foundation Server 2012 提供的

Scrum 敏捷開發工具，原先的白板，變成由「工作

項目狀態」、「User Story」交會而成的 Web 化白

板;原先透過便利貼管理 Backlog 工作項目，也變成

可以在 Web 上隨時拖拉 Backlog，並可輕鬆更改工

時並紀錄工作狀態。而以往開完每日站立會議，還需

費心將便利貼抄錄至 Excel，現在這些耗時的動作通

通免除，使得資訊共享效率更佳，團隊成員也更能專

心在交付給個人的工作項目上。此外，從前必須等到

專案結束才做檢討，現在每一個 Sprint 都可得到回

饋資訊，並透過 Feedback Client 工具 (意見回應工

具)可主動收集使用者的使用經驗回饋，立即就能進

行檢討，並於下一個 Sprint 中改進，有助提升專案

品質及使用者滿意度。扮演 Scrum Master 的資訊

部工程師黃盟樺認為，Scrum 的電子化，確實帶來

莫大便利。 Scrum 工具的價值，並不僅止於此。透

過 Team Foundation Server 2012 自動產生的燃盡

圖 (Burn down chart)，專案時程是否在預定目標

內，都一覽無遺；另藉由團隊成員工作負載的圖表呈

現，Scrum Master 即可看出有無任何人出現「爆

表」情況，如果有，就趕緊調配資源，由其他成員分

擔工作量，避免延誤專案進度。

Visual Studio 2012 提供的 Scrum 敏捷開發工具

與流程範本，使遠東金士頓信心大增，爾後就立基

於敏捷開發框架，推動產線即時檢測監控 App 之開

發計畫。

基於整合與安全-首選 Windows

Store App

為何決定將生產線即時檢測監控系統 App，建構在

微軟 Windows 8 平台上？曹世杰坦言，早先確實曾

考量其他平台，但基於幾個關鍵因素，遠東金士頓仍

以 Windows Store App 為最終選擇。首先，其內部

包括 MES 等製造及產線使用的重要應用程式，皆建

立在 Windows Server、SQL Server 並使用微軟開發

技術所開發，倘若採用 Windows Store App，前後

端整合效率最好。

因為平板在企業內的應用，需考量適合的應用領

域及資訊安全，並非如一般消費性用的平板主要是

用在娛樂及資訊獲得，因此，安全控管是在企業推

展行動應用時，不容忽略的重大課題。而 Windows

Store App 與微軟目錄服務(Active Directory)完全

整合，可藉此建構嚴謹的權限管理機制，例如

Windows 8 的平板可設定，哪些 App 可以安裝，

哪些不行; 而 App 的使用權限也可針對某些同仁才

能使用，例如: 只有生產部門有權限的員工，才能操

作此 App 存取產線資訊。更重要的，該公司軟體開

發團隊對於.NET 技術駕輕就熟，但對其他平台，則

需要從頭學習。

Web 化的專案 Dashboard，專案進度、未

完成工作項目及 Bug 等指標一目了然

105

如今從需求討論、UI 設計一路到程式撰寫，即使

是首次接觸 Windows Store App 實作的開發人

員，也能在 2~3 週內完成開發雛型，再加上企業用

的 App 通常需整合既有內部的應用系統，這也是

Visual Studio 2012 在開發整合上的強項，讓開發

流程一氣呵成，對於企業產生顯著的投資報酬率。

Web 化的白板，適合每日站立會議使用，可馬上調

整 backlog(工作項目)狀態及工時，多地協同開發時

專案資訊容易共享。

想了解 Windows Store App 及 Scrum 敏捷開發–

請上 http://aka.ms/vs2012tw

案例分享

儘管熟悉.NET 技術，但在 App 開發過程中，黃

盟樺不諱言說明，若干開發技術，例如: 首次接觸的

Windows 8 UI 設計，以及觸控、User Experiences

等嶄新設計思維仍需投入學習，幸而微軟提供明確

的設計規範，再加上 Visual Studio 2012 內建了

Windows Store App 的專案範本，讓開發人員無需

擔心 UI 設計是否符合規範或夠水準，只要按照範本

實作，應用程式 UI 也會有一定的設計水準及良好的

使用者操作經驗，大幅縮減 UI 設計的摸索期。

106

案例分享保德信投信打造行動智慧理財網

精進顧客服務品質

憑藉 Visual Studio 2012，開發 HTML5 跨行動裝置網站

案例分享

前身為元富投信的「保德信投信」，1992 年成立至今已屆 20 年，一方面承襲元富投信在地實戰經驗，二

方面掌握保德信集團綿密的國際資訊研究網路，得以練就紮實功力，為顧客提供優質專業的投資組合，進

而擴大服務客戶數及總管理資產。為沿續這些珍貴成果，該公司自我期許，持續精進客戶服務品質。

根據資策會調查，台灣智慧型手機用戶現已突破

300 萬，其中又以 20~40 歲的青壯年族群為大宗，

他們對於基金投資訊息的關注度，無疑是各年齡階

層之最。因此保德信投信認為，如何根據主要客群

的行為模式，營造更便捷的基金資訊傳遞管道，顯

然是當下重大課題。

網站經營的首要課題 – 跨平台以

滿足各式行動裝置

「在過去，投資人必須在智慧型手機小小的螢幕

上，在偌大官網頁面中獲取資訊，使用者在手機上

需要放大畫面才能選取網頁中的選單，操作過程確

實頗為不便，因為原本官網設計主要是給桌上型電

腦瀏覽用; 但隨著使用者隨身拿起手機上網查詢基

金投資資訊的習慣逐漸形成，打造一個友善的行動

裝置網站是必然的」保德信投信行銷部副總經理陳

智敏表示，所以在 2011 年 10 月，該公司決定開

發行動版網站，期望給予顧客更佳的使用者經驗

(UX, User Experience)。

但問題來了，綜觀智慧型手機，主要三大平台:

Windows、iOS、Android，不同手機上的瀏覽

器也不同，也就是說，行動版網站必須滿足各個

平台的智慧型手機使用者，才能算是一個親和友

善的「行動裝置網」。

因此陳智敏將這次「行動智慧理財網」專案，

定調為一項前瞻性計畫，期望藉由一次性開發，

跨越不同平台與行動裝置，讓使用者無論身在何時

何地，不管持有任何智慧型手機，都能方便取得基

金投資的關鍵資訊，或進行線上投資測驗，藉以彰

顯帶給客戶最大的便利性及實用價值。考量既有

HTML 桌面版官網，已奠基於.NET 技術架構開發，

為了營造更好的系統整合性，該公司擇定以專精微軟

開發技術的多奇數位，作為專案合作夥伴。

HTML5 開發，需要最合適的工具

面對行動版網站的開發，最大的難題，乃在於因

應行動裝置多作業系統、多瀏覽器版本、多螢幕大小

之支援度；若要追求高支援度，又需顧及網站執行速

度的流暢性，從實務上來看，兩項目標其實是彼此互

斥的。

舉個簡單例子，以 HTML 及 CSS 來說，在各類行

動裝置上的呈現及效能表現往往不一致；再者，有

時利用最新行動裝置測試出來的華麗效果，一旦放

到舊款裝置，卻

反而呈現畫面延

遲及不順暢，可

以想見，要針對

這些衝突現象逐

一測試，以確保

不同行動裝置轉

場效果之順暢無

虞，的確需要煞費

苦心，堪稱一段繁

在 Visual Studio 2012 中，模擬在各平台瀏覽

器的操作狀況並進行效能及壓力測試，確保

「行動裝置網站」擁有最佳的使用者經驗。

107

案例分享

於是多奇數位採用了 Visual Studio 2012，協助保

德信投信推動行動智慧理財網專案；主因在於，放

眼市面上所有開發工具，Visual Studio 2012 是唯一

可以化繁為簡，同時滿足前述所有需求的工具。

確保網站服務最佳化 - 整合前後端

開發需求並測試網站的效能

不可諱言，要想開發行動版網站，已無法沿用過往

的網頁開發慣性，亦即由設計師完成頁面設計後，然

後再套用程式。取而代之的做法是，網頁 UI 必須使

用大量 HTML/CSS 及 JavaScript，且與後端程式回

應配合，才可營造網頁使用者經驗的最佳抓點。

一旦採用 Visual Studio 2012，藉由 jQuery

Mobile 與 HTML5 等前端技術，再搭配後端

ASP.NET MVC 4 技術，前端及後端皆達到高支援

度，因而加速不同開發階段的整合時程; 另值得一

提，Visual Studio 2012 也提供多樣化擴充套件、元

件下載及範本，讓開發人員可以很快地進行各式各樣

的應用程式開發，以提升開發人員的生產力，也能夠

保留更多時間，聚焦於網站及程式碼品質的提升。

另外因應行動版網頁上線，預估網站流量及同時

間上線使用者（Concurrent User）也會增加，因此

上線前，也可利用 Visual Studio Ultimate 2012 進

行網站的效能及壓力測試，以確保網站可以同時服

務眾多同時上網的使用者。

無所不在的基金投資資訊

拜 Visual Studio 2012 所賜，保德信投信亟欲建立

的跨行動裝置網站，得以在今年 3 月上線，並提供淨

值指數、市場報告、投資測驗、客戶服務、最新活

動、我要開戶等 7 大功能。直至今日，行動智慧理財

網推出已近 7 個月，陳智敏透露，相較於過去只能

以手機造訪桌面版官網的時期，其行動瀏覽客戶數

成長三分之一到二分之一，增幅可謂不小；展望未

來，該公司將持續關注顧客需求的演變，不斷精進

行動版網站的服務品質。

了解跨行動裝置網站及 HTML5 開發–請上


值此時刻，開發團隊對於技術與工具的選擇，便顯

得十分重要，不僅務求支援多元化的行動裝置，更需

顧及開發過程的花費時間、開發後的可維護性與可擴

充性，以及開發工具執行時的反應速度。唯有同時滿

足這些要件，才有助提升開發人員的工作效率，且即

便遭逢需求變更狀況，亦可快速反應與調整，好讓專

案圓滿達陣。

瑣而艱難的開發歷程。

不同手機瀏覽保德信投信「行動智慧理

財網」，皆擁有一致的 UI 及良好的操作

經驗，「網站選單」也是精心設計。

108

為什麼要用 Visual Studio Ultimate 2012 或 Premium 2012 版

打造企業應用軟體及服務，建立[高效率]及[品質導向]的開發團隊

軟體開發功能領域 Premium with MSDN

企業版

(企業應用開發)

Professional with

MSDN 專業版

(入門開發)

Window 8 Store App (x86, x64, ARM)及模擬器(New)、Windows Phone (8/7.5)、Windows Azure、Web & HTML5, jQuery/ jQuery Mobile 支援 (New)

√ √ √

Visual Studio 組件庫及 NuGet 套件管理 (下載元件、範本、免費套件及外掛)、各開發語言支援 (VB, C#, C++, JavaScript, F#)

√ √ √

程式碼品質改善功能

靜態程式碼分析 (Static Code Analysis) 、程式碼度量 (Code Metrics)及程式碼複製品分析 (Code Clone, New)

√ √ 僅基本程式碼分析，較難有效建立程式碼開發標準，以確保程式碼品質

程式碼效能分析 (Performance Profiler) √ √ 基本功能，較難找出無效率的程式碼，需自行撰寫效能偵測的程式碼

單元測試、測試影響分析、程式碼涵蓋率分析 (Code Coverage) √ √ 僅基本單元測試

智慧除錯 – IntelliTrace (重現 bug 發生時的狀況以找出錯誤的程式碼，也可用於上線環境, New)

√ 無法記錄執行過程，自行撰寫 log 以人工方式逐行偵錯

無法記錄執行過程，自行撰寫 log 以人工方式逐行偵錯

程式碼簽入原則 (Check-In Policy, 搭配 Team Foundation Server) √ √ 僅搭配 Pro 版本進行基本簽

入檢查，無法整合 Premium/Ultimate 版的進階檢查及測試進行品質把關

測試及品管功能

自動化功能測試及使用者介面測試 (使用Coded UI Test) √ √ 無、由開發人員或 QA 人員自

行人工測試

測試案例管理及手動測試 (使用 Test Man-ager) √ √ 用文件撰寫測試案例，無法集

中管理、追蹤測試過程並自動產生 Word 測試報告

探勘測試 (Exploratory Test, 使用 Test Manager) (New)

√ √ 手動測試時，無法自動錄下操作步驟，並轉為測試案例

負載壓力測試、Web 效能測試 (Load Test & Web Performance Test) √ 使用人工模擬測試、無自動

化測試工具使用人工模擬測試、無自動化測試工具

設計及架構分析驗證

架構設計或模型工具 – 架構總管 (Architecture Explorer) 、圖層圖 (Layer Diagram)、相依性驗證、程式碼地圖分析(Code Map, New)

√ 無，無法了解系統模組關連性或驗證程式碼撰寫是否符合分層規則，導致系統難以維護

無，無法了解系統模組關連性或驗證程式碼撰寫是否符合分層規則，導致系統難以維護

UML 設計工具 √

(可與 Team Foundation Server 工作項目連結追蹤需求)

僅能讀取 UML, Layer, DGML 圖，無法修改或設計

無、額外使用 Visio 或它牌 UML 工具，無法結合開發工具及工作項目 (Work Item)

團隊協同作業及敏捷開發

敏捷開發完整工具 (內建 Agile/Scrum 開發所需功能，包括 Backlog Management, Sprint Planning, Storyboarding, Feed-back Client) (New)

√ √ 無、可瀏覽小組網站、工作項目整合、程式碼管理

程式碼檢閱 (Code Review) 及工作暫停/繼續 (Task Suspend/Resume) (New) √ √ 無，只能人工進行 Code

Review，並自行標示程式碼差異處及檢閱意見

MSDN 專屬額外權益上線及工作環境用 - Office Professional Plus、Expression Studio

開發測試環境用—Exchange、SharePoint、Lync、System Center 軟體

√ √ 含 Windows 及 SQL Server

產品型錄

Ultimate with MSDN

企業旗艦版

(企業及團隊開發)

109

Visual Studio 2012 及 MSDN 訂閱功能比較

Visual Studio 2012 及 MSDN 訂閱產品功能比較表

Visual Studio Ultimate 2012

with MSDN

企業旗艦版

Visual Studio Premium 2012 with

MSDN

企業版

Visual Studio Professional

2012 with MSDN

專業版

Visual Studio Test Profes-sional 2012 with MSDN

品管人員版

各式開發平台及語言支援

Window 8 Store App(x86, x64, ARM)及模

擬器(New!)、Windows Phone (8/7.5)、

Windows Azure、Web & HTML5,

jQuery/ jQuery Mobile 支援 (New!)

● ● ●

Windows 桌面應用程式、WPF/

Silverlight、Office & SharePoint 開發 ● ● ●

Visual Studio 組件庫及 NuGet 套件管理

(下載元件、範本、免費套件及外掛) ● ● ●

支援語言 : C#, VB, C++, JavaScript, F# ● ● ●

架構設計及塑模工具

架構總管 (Architecture Explorer)、圖層圖

表、相依性驗證 (Layer Diagram and De-

pendency Validation)及程式碼地圖分析

(Code Map, New)

●

架構驗證 (Architecture Validation) ● ●

UML® 2.0 相容圖表 - 活動圖、使用個案、

循序圖、類別圖、元件圖 (Activity, Use

Case, Sequence, Class, Component Dia-

grams)

●

唯讀圖表 (只能

讀取 UML,

Layer, DGML

圖，無法修改

或設計)

程式碼偵錯、診斷及測試工具

程式碼度量 (Code Metrics)、全功能程式碼

剖析 (Profiling) 1、程式碼涵蓋範圍 (Code

Coverage)、分析程式碼複製品 (Code

Clone, New!)、自動程式碼 UI 測試

(Coded UI Test)

● ●

單元測試 (Unit Testing)、靜態程式碼分析

(Static Code Analysis) ● ● ●

Microsoft Fakes (Unit Test Isolation)

(New!) ● ●

IntelliTrace™ (歷史除錯，也可於上線環境

使用) (New!) ●

Web 效能測試、負載壓力測試 (Load Test-

ing) ●

QA 功能及測試人員工具

Microsoft Test Manager ● ● ●

探勘測試 (Exploratory Test) (New!) ● ● ●

測試案例管理 (Test Case Management)、

執行手動測試 (Manual Test Execution)、

手動測試錄影 & 播放 (Manual Test Rec-

ord & Playback)

● ● ●

虛擬環境設定及測試實驗室管理 (Lab Man-

agement) ● ● ●

產品型錄

110

Team Foundation Server

(TFS)及團隊開發

敏捷開發完整工具 (內建 Scrum/Agile 開

發所需功能，包括 Backlog Manage-

ment, Sprint Planning, Storyboarding,

Feedback Client, Kanban Board )

(New!)

● ● ●

程式碼檢閱 (Code Review) 及工作暫停/

繼續(Task Suspend/Resume) (New!) ● ●

程式碼版本管控 2 (取代 VSS, Visual

SourceSafe) 、組建自動化 2 (Build Au-

tomation)、工作項目追蹤 2 (Work Item

Tracking)

● ● ● ●

Visual Studio Team Explorer 2012 2 (可

獨立安裝, 用於檔案總管、 Excel 、 Pro-

ject 中存取 Team Foundation Server)

● ● ● ●

Team Explorer Everywhere for TFS 2

(讓 Java/Eclipse 及 Mac/Linux/Unix 上

的開發者也可存取 TFS 並參與團隊開發)

● ● ● ●

MSDN 訂閱 –

工作及上線環境使用軟體及服務

Windows Azure 平台-微軟雲端運算平台

使用權 (New!) ● ● ●

Visual Studio Team Foundation Server

2012 和一個用戶端存取授權 (CAL, Cli-

ent Access License)

● ● ● ●

Microsoft Office Professional Plus 、

Expression Studio ● ●

Team Foundation Service 雲端版團隊

開發平台 5 ● ● ●

MSDN 訂閱 –

開發及測試環境使用的軟體 3

Windows 8, Windows Server 2012 及

SQL Server 2012 (包含之前的版本)、以

及工具套件(Toolkit)，軟體開發套件

(SDK)，驅動程式開發套件(DDK)

● ● ● ●

Windows 嵌入式作業系統 (Windows

Embedded) ● ● ●

Microsoft Office、Exchange、

SharePoint、Lync、Dynamics 及所有

其它伺服器軟體

● ●

MSDN 訂閱 - 其它專屬權益

Windows Store 市集 + Windows

Phone 市集開發人員帳號 4 (12 個月的使

用權，用以上架 App 到市集, New!)

● ● ● ●

Office 365 開發人員帳號 4 （Office 365

Developer Subscription - 單次 12 個月

的使用權，用以上架 App 到 Office 市

集）

● ●

微軟原廠技術支援服務 4 4 2 2

Microsoft e-learning 課程 (通常包括

10 堂課或 20 小時) 2 2 1 1

表格中加註 (New!) 表示為 Visual Studio 2012 新版功能或新 MSDN 權益

† Azure 的權益依訂閱等級會有所不同，詳細請至 Azure 網站了解更多。

1. 程式碼剖析 (Profiling)，Visual Studio Professional 2012 僅含基本的有限功能，詳細請至網站了解更多。

2. 需要 Team Foundation Server 及一個 Team Foundation Server 用戶端存取授權。

3. 每個使用者授權僅供該名 MSDN 訂閱使用者用於設計、開發、測試及示範系統，不得同一授權多人使用。

4. Windows Store 市集、Windows Phone 市集、Office 365 開發人員帳號，啟動方法詳請參考 MSDN 訂閱網站。

5..當付費計畫 (paid plans)發佈後，付費購買的 MSDN 訂閱將不會有額外收費，仍可持續使用。

UML 是 Object Management Group, Inc 的註冊商標

Windows 是 Microsoft Corporation 在美國和/或其他國家/地區的註冊商標或商標。所有其他商標皆為各別擁有者

的財產。

產品型錄

111

產品與服務項目授權單位價值 (NT$ 計)

Visual Studio Premium 2012 企業版 (新版或舊版皆提供) 1 人授權 258,050 (註一)

Windows 8 + Windows Server + SQL Server + Exchange + Share-Point + Lync Server +System Center +微軟全系列軟體的開發階段與測試人員授權 (不得用於上線環境，僅供開發、測試及展示之用途)

1 人授權 Not for Sale (註二)

Office Professional Plus + Expression Studio 正式版授權 (可用於工作環境、訂閱期間內可升級到最新版)

1 人授權價值 66,330 (註三)

Team Foundation Server + 1 個 CAL (用戶端存取權) 1 人授權 49,020 (註三)

Windows Azure 平台 – 微軟雲端運算平台使用權 (New!) 每月若干使用時數

價值 195,473(註四)

Windows Store 市集 + Windows Phone 市集+ Office 365 開發人員帳號 (12 個月的使用權，用以上架 App 到市集 )

1 份價值超過 8,600

(註五)

微軟最新產品光碟遞送服務 1 份 Not for Sale (註六)

微軟技術支援服務 4 次價值 30,800 (註七)

MSDN 訂閱下載網站帳號 (三年使用權) 1 人授權 Not for Sale

總計價值超過 NT$ 605,273

註一: 以 OPEN 授權購買 Visual Studio Premium with MSDN 計 (2012/9 月起，Visual Studio Premium 並不提供單獨購買，需與 MSDN 一同購買)

註二: 本項所列軟體的 L+SA 使用授權係包含在 MSDN 企業版授權之中，僅供開發階段與測試之用，不會另行開立授權證明。

註三: 本項所列軟體的 L+SA 使用授權價值，係以 Open Value 三年授權計算，該軟體包含在 MSDN 企業版授權之中，可供商業或個人的一般用途，但不會另行開立授權證明。

註四: Azure 的權益依訂閱等級不同，預估價值是以每年的價值計，三年共約 NT$ 195,473，詳請至

http://www.windowsazure.com/zh-tw/pricing/member-offers/msdn-benefits/ 了解更多。

註五: Windows Store 市集、Windows Phone 市集及 Office365 開發人員帳號皆是 US$ 99 元，總價值 US$ 297 元。

註六: 產品光碟可透過 VLSC 網站 (大量授權服務中心) 登計取得

註七: 本項所提供服務係包含在 MSDN 訂閱授權之中，每個訂閱包含四次的技術支援服務，可播打 MSDN

服務專線: 0800-00-88-33 開始使用，不限程式開發相關問題，一次「問題支援請求」(Single Inci-dent) 定價為 NT$ 7,700。

授權提醒: MSDN 訂閱的授權是以每個使用者 (per user) 為基礎來計算。每個使用 MSDN 訂閱資源的人，都必須擁有 MSDN 訂閱的授權，多少人使用就須採購多少套，例如 5 個人會使用到 MSDN 下載的軟體，則需採購 5 套，不得共用授權或是將 MSDN 下載之軟體及光碟供它人使用。建議可以為 IT 及 RD 部門每人皆採購 MSDN，以確保開發及測試用之授權合法。

IT 及開發人員的完整工具包與專業技術支援

採購諮詢: 台灣微軟開發工具服務專線—(02)37253679 Email: [email protected]

MSDN 訂閱提供給 IT 及 RD 人員全系列微軟軟體開發測試、展示環境軟體授權及技術支援，協助

軟體團隊成員進行開發測試。

現在買 Visual Studio Premium with MSDN 訂閱，一次取得 Visual Studio 2012 以及 Windows 8/Windows Server 2012/SQL Server 2012 供開發測試用!

以 Open Value 授權方式購買 Visual Studio Premium with MSDN 三年期，新購每年 NT$

101,810，三年共 NT$ 305,430 (此為 2012/9 月最新訂價)，可以得到以下的產品及服務。

MSDN 訂閱的價值分析

Visual Studio 2012 試用版及學習資源下載： http://aka.ms/vs2012tw

試用 MSDN 訂閱網站 (無帳號者仍可瀏覽/查詢 MSDN 訂閱提供的軟體下載) :

http://msdn.microsoft.com/zh-tw/subscriptions

產品型錄


112

Do more of what you love

2013 年 4 月發行第五版

Microsoft Visual Studio 2012 產品評估指南

Documents