前端開發技術再晉級 Silverlight 3 & Expression 3正式登場

前端開發技術再晉級
Silverlight 3 & Expression 3正式登場
文／圖 董大偉．責任編輯／洪羿漣

不到22個月的時間，Silverlight已推出了第3版。什麼因素使得微軟在全球景氣尚未明朗之際，依舊投入大量的人力與物力，一反常態的讓Silverlight這個看似不會帶來任何額外收入的開發技術推陳出新？究竟微軟對於Silverlight乃至於RIA(Rich Internet Application)的計畫和目標為何？開發人員在面對眾多的RIA技術時，又該如何因應與選擇？這些問題，都將在本篇特別報導中探討。

---

當你看到這篇文章的時候，微軟已經正式的釋出了Silverlight 3.0版，台灣微軟也在7月16日舉辦了上市發表會，介紹了新版Silverlight 3及其開發工具組Expression 3 Studio。

還記得Silverlight第一次出現的時間是在2007年的夏天，然而時至今日，短短2年不到，Silverlight不僅已經推出了第3個版本，同時累積的下載次數已經超過了4億次。微軟聲稱，全球有超過1/3的個人電腦安裝了Silverlight。不僅如此，也有總計超過40萬名程式設計師和多媒體設計人員已經使用Silverlight技術，來建構出各式各樣的商業應用。其中包含了去年夏天的北京奧運、麥克傑克森的線上直播紀念音樂會…等，同時此刻，包含美國NBC在內的多家媒體也正在積極著手導入Silverlight技術。

在企業應用方面的表現，則包括新光證券的線上下單系統、新浪財經網的即時看盤系統，以及.NET平台上知名的BPM(Business Process Management)軟體公司K2最新推出的產品K2 blackpoint等，也都以Silverlight作為其主要的RIA(Rich Internet Application)與展示層開發技術解決方案。

同時，微軟此次推出的Silverlight 3版本，不僅在多媒體與影像處理上有大幅的效能改善與功能上的增強，同時也額外增加了超過60個控件，以及諸如Out Of Browser等功能。這些功能對於RIA應用程式的開發，有著相當重要的幫助，算得上是微軟在RIA應用程式開發解決方案上的一個里程碑。


RIA市場狀況
RIA這個名詞早在2002年就被Macromedia提出，總括來說，所謂的RIA是一種具有近似於傳統Windows應用系統功能與特性的網際網路應用程式(Web Application)，相較於傳統用ASP/ASP.NET/PHP/JSP所開發、執行於純HTML模式下的Web Application，RIA同時具有比Windows應用程式更優秀的操作介面與操控的便利性，以及Web應用程式容易部署與更新的優勢。

然而，微軟非但不是第一個提出RIA解決方案的廠商，甚至在Silverlight第一個版本出現之前，Macromedia的Flash/Flex技術早已獲得許多開發人員的青睞，作為RIA解決方案的重要選擇之一。不僅如此，2005年Adobe併購Macromedia後，更趁勢提出了AIR(Adobe Integrated Runtime)概念，企圖讓RIA或傳統Web Application，不僅可以跨作業系統，並且還可以不需要瀏覽器即可獨立執行。

當然此舉也代表了Adobe正式踏入微軟固有的Windows應用程式開發領域，對微軟來說造成不小的壓力，這使得微軟似乎不僅加快了Silverlight推出的時程，同時一路以Adobe AIR作為假想敵。諸如Silverlight 3中的新功能Out Of Browser技術，即是微軟回應Adobe AIR概念的解決方案。

從上述介紹中讀者可以想見，Silverlight技術面對Adobe AIR的步步逼近，可說是快馬加鞭，這似乎也是Silverlight在短短不到2年的時間中就迅速推出3個版本的原因之一。對微軟來說這個改版動作可說是前所未有的積極，那麼在這次的改版當中，Silverlight 3究竟提出了哪些吸引人的新功能，來迎戰其他正虎視眈眈的各家RIA解決方案呢？


全新的多媒體影音與3D圖形動畫能力
此次Silverlight 3的改版針對了許多功能提出了增強，大致可分為幾個層面來看。首先是針對多媒體影音播放的支援，Silverlight 3開始支援H.264/Advanced Audio Coding (AAC) Audio，以及IIS7 Smooth Streaming技術和Full HD(1080p)播放。這些支援不僅讓Silverlight可以播放高品質的視訊，同時可依據使用者瀏覽影片時當下的頻寬與CPU狀況，即時地偵測並動態切換下載的視訊解析度，讓整個收視影片的過程中，即使在不穩定的頻寬或網路速度下，影片依舊可以流暢的被觀賞。(圖1)


圖1：透過Smooth Streaming技術，依據頻寬與CPU狀況，即時地偵測並動態切換下載的視訊解析度，以保持最順暢的影片收視。

對於影片的智慧財產保護，Silverlight 3可使用AES加密或Windows Media DRM，對於商業應用上的支援顯得更加的完善。同時，在影像與動畫功能方面，Silverlight 3開始支援透視3D圖形(Perspective 3D Graphics)，這讓開發人員無須撰寫額外的程式碼或建立3D模型，即可享有視覺上的3D效果。(圖2)


圖2：加入支援透視3D圖形。

除此之外，Silverlight 3內建了Bitmap API，並支援了像素特效技術(Pixel Shader effects)，讓Silverlight中的每一個物件(UI Element)，都可以輕易的具有模糊、陰影等效果。當然，設計師也可以自行建立各種特效，例如水紋、風動、版畫…等，在Silverlight當中重複使用。(圖3)


圖3：當滑鼠點選到圖片時，物件的Effect屬性將帶來水紋的特殊效果。

針對動畫部分，Silverlight 3也內建了數種動畫效果(Animation Effects)，例如球體的彈跳，或是卡通人物跑動時的彈回動作等，這些特效不僅可讓設計師建立動畫時更便利，且建立出的動畫更加的生動自然，開發人員也可以自行建立其他的動畫特效。


RIA應用程式功能躍進
Silverlight 3當中最引人注目的，莫過於衝著RIA需求而來的各種功能提升。Silverlight 3以及伴隨著一起推出的Silverlight 3 Toolkit，為RIA開發人員一口氣帶來了超過60個新的控件。除了過去在Silverlight 2.0 Toolkit中我們已經看到過的圖表控件、TreeView、TabControls、AutoComplete、ButtonSpinner等，以及與Layout有關的DockPanel、WrapPanel、ViewBox等容器控件之外，還額外新增加了TransitioningContentControl、RatingControl等眾多新控件。

同時，亦將可套用在控件身上的控件外觀主題樣式擴充到9種，讓開發人可以透過簡單的指令，即可隨意替換場景中的控件外觀。較特別的是新版Silverlight當中還包含了SaveFileDialog功能，讓開發人員終於可以將檔案寫入用戶端，這讓過去Silverlight無法寫入用戶端檔案的問題獲得解決。


直接存取資料庫
針對遠端資料庫存取作業，Silverlight 3亦加入了相當多的增強，包含支援在.NET 4.0將正式推出的.NET RIA Services，讓開發人員可以透過Silverlight輕鬆建構出可執行於網際網路上的RIA資料庫應用程式。

過去，由於RIA應用程式的執行位置在用戶端，要存取到遠端資料庫伺服器中的數據，勢必要在伺服器端建立一層Web Services或是WCF Services，再透過Silverlight呼叫以間接存取位於遠端資料庫中的資料。

.NET RIA Services的出現則大幅簡化了遠端資料庫存取動作所需要撰寫的程式碼，.NET RIA Services可配合LinqToSql或ADO.NET Entity Framework，依照設計好的Data Model自動建構出可讓Silverlight直接存取的服務層。如此一來，當開發人員要在Silverlight應用程式中抓取遠端資料庫中的數據時，將會更加的直覺與便利。

不僅如此，Silverlight 3同時配合.NET RIA Services新增了DomainDataSource控件，開發人員可利用此控件結合DataForm、DataGrid、DataPager，建立出Master-Details資料庫應用程式。DomainDataSource不僅可以自動存取遠端的資料庫，同時也支援了篩選、排序，以及分頁載入等功能，讓遠端的資料存取再也不是問題。


DataForm自動繫結資料來源的欄位
上述的DataForm本身就是相當值得一提的控件，該控件不僅支援新增、修改、刪除、以及上下筆切換等常見的功能，還同時支援了ASP.NET Dynamic Data技術中使用到的DataAnnotations修飾字(Attributes)。這讓DataForm不僅可以自動抓取到與之繫結的資料來源所具有的欄位，將欄位以表單的形式自動地呈現在畫面中，更可以透過DataAnnotations修飾字，讓DataForm在自動產生表單欄位的同時，一併加入說明或提示文字、並且支援Regular Expression驗證規則，同時該控件也像ASP.NET中的FormView一樣，支援客製化欄位以及ReadOnlyTemplate、EditTemplate、NewItemTemplate等不同模式下的樣板功能。(圖4)


圖4：DataForm將欄位以表單的形式自動地呈現。

整體來說，DataForm的功能比起ASP.NET中的FormView有過之而無不及，配合DomainDataSource以及.NET RIA Services，讓Silverlight 3的開發人員在建構RIA應用程式時更加的得心應手。


SEO(搜尋引擎最佳化)與Deep Linking功能
過去，Silverlight和其他大多數RIA解決方案一樣，一直有一個令開發人員困擾的問題，就是「搜尋引擎的支援不足」，該問題在Silverlight 3中也獲得解決。

由於Silverlight 2與其他類似的RIA開發工具一樣，所建立的網站或RIA應用程式，幾乎千篇一律地只有一個網址，不像傳統的Web應用程式，可以透過不同的網址來定址到不同的畫面(或功能)，並且也無法透過QueryString輕易的將參數傳入到應用程式當中，當然更無法在應用程式中直接支援瀏覽器的上下頁切換功能。

然而這個現象不啻是與搜尋引擎作對，讓搜尋引擎沒有辦法正確地定址到Silverlight應用程式中的場景或特定頁面，使得利用Silverlight所開發出的RIA應用程式或網站，就硬生生的少了被搜尋引擎找到的機會(放在網際網路上時也降低了曝光率)。

在Silverlight 3當中，則透過了Navigation Framework與Deep Linking機制，讓開發人員可以為特定場景或Silverlight的Xaml頁面建立專屬的URL，同時也支援類似過去開發人員在ASP.NET中所使用的網址列QueryString機制。如此一來，我們就可以利用這樣的網址：「http://store.StudyHost.Com/#/Products$AK47」，來表達一個特定的頁面(或是一筆資料，例如購物網站中的某個產品)，這樣搜尋引擎也可以順利的尋獲，同時使用者也可以藉由輸入網址，來存取(瀏覽)到特定的Silverlight場景。(圖5)


圖5：購物網站中的一個產品即代表一個網址。

除此之外，Silverlight 3當中也針對RIA提供了諸如Application library caching、Local Connection等效能改善機制，讓RIA的開發較無後顧之憂。


Out of browser與離線瀏覽
為了回應Adobe提出的AIR概念，Silverlight在3.0版正式加入了在瀏覽器外執行的能力(Out of Browser)，讓利用Silverlight技術所開發出的應用程式，可以直接在作業系統的桌面上執行，不需要掛在瀏覽器當中。(圖6)


圖6：Silverlight技術的應用程式，可直接在桌面上執行。

不僅如此，也提供了API用以判斷目前系統的連線狀態(是否已連上網際網路)，以及執行狀態(是否執行在瀏覽器內或瀏覽器外)，這讓Silverlight得以撰寫出具備離線功能的應用程式，可在離線時把資料暫存在用戶端，待連線後再透過Web/WCF Services或是.NET RIA Services，將資料回寫到伺服器端。

同時，Out of Browser功能也支援自動更新，應用程式將定時檢查伺服器上是否有新版本，並於啟動時自動進行更新。在用戶端的部署也相當容易，只需要輕輕一點，即安裝完成，同時亦可自動在「桌面」或是「開始功能表」中建立捷徑，這讓遠端的安裝部署無須再讓MIS人員花費額外的心思。

除此之外，其他諸如Windows 7的Multi-Touch支援，也是相當引人注目的部分。當然，Silverlight 3在4.7M大小的Run-Time中依舊還有尚未納入支援的機制，諸如WebCam與Audio的擷取與錄製的功能，以及報表列印等功能。同時目前尚未看到Silverlight針對Mobile的支援也是較令人遺憾的部分。


Expression Blend 3與SketchFlow
關於開發工具的部分，對於.NET開發人員來說，開發Silverlight應用程式一直都需要同時使用Visual Studio與Expreession Blend，這個現象到目前為止仍未改變。

此次釋出的Silverlight 3，伴隨著Silverlight 3 Tools for Visual Studio 2008 SP1以及Expression Blend 3這兩套主要的開發工具。儘管設計師單獨使用Blend 3確實可以開發Silverlight網站，但是對於大多數早已經習慣使用Visual Studio 2008的程式開發人員來說，Visual Studio和Blend 3混用依舊是比較理想的選擇。

目前Visual Studio 2008 Sp1並未完整的支援Silverlight開發，例如並不支援在Xaml場景的預覽畫面中。針對控件進行拖曳與佈置，非得要使用Blend 3才行，動畫的設計也是如此，這部分預估將會在Visual Studio 2010的版本中有所改善。

反倒是Blend 3在這次改版中有重大的功能新增，不僅加入了SketchFlow，也支援了從Photoshop和Illustrator匯入檔案的功能。設計人員(Designer)不僅可自由地逐層檢視和匯入Photoshop 檔案，圖層亦可輕易地重新群組，而檔案中的元素則保留其原始格式，並且在Expression Blend中仍然可進行編輯。

另外，Blend 3支援Behaviors功能，這讓設計人員不需撰寫程式碼即可在其應用程式中加入互動功能。而開發人員則可以利用豐富的 API，來撰寫設計人員所需要的各種功能、動作與行為，並將其包裝成可重複使用的元件，讓設計人員在Blend 3中直接使用。

至於鼎鼎大名的SketchFlow，則是為了讓設計人員可從設計概念出發，並建立互動式原型(prototype)，讓創意於設計階段即能完整呈現(如圖7)。利用此機制可讓設計師與其他人員(例如客戶、外包廠商或程式開發人員)溝通設計想法，並能方便的收集其對於設計內容中的註解及回覆意見。


圖7：SketchFlow建立互動式prototype呈現創意。


企業端的整合應用與開發人員的挑戰
在微軟的推廣與行銷之下，已有不少企業正考慮將Silverlight導入於公司的MIS資訊系統當中，最常見的應用像是EIP(企業入口網站)與辦公室自動化、BI(商業智慧)、數位儀表板、BPM或Workflow等，都是Silverlight適合導入的典型應用。

相較於傳統的Windows或Web應用程式，RIA不僅具備操作介面上的優勢，同時也較過去的更易於部署。然而企業在導入前亦需思考幾個問題，包含用戶端的作業系統與瀏覽器是否支援，以及資訊系統的開發或改版成本。

無論從什麼角度來看，RIA似乎是未來商業應用程式勢必會走的方向之一。從網際網路盛行以來，傳統的Windows與Web應用程式之間，似乎就一直有著此消彼長的趨勢。當時Adobe提出的AIR概念似乎不無道理，如果有一個理想的技術，讓慣於開發Web應用程式或RIA的開發人員，能夠不需要修改程式碼就可以讓開發好的應用程式直接在Windows環境中運行，如同是傳統的應用程式，顯然是有著相當大的吸引力。而不管是Adobe AIR或是Silverlight 3，目前都正朝向這個目標邁進。

對於熟悉.NET技術的開發人員來說，Silverlight確實具有相當的吸引力。然而在面對大型的企業商務應用當中，導入此開發技術，勢必將一併導入LinqToSql/ADO.NET Entity Framework以及.NET RIA Services等技術，同時也必須將開發環境升級至Visual Studio 2008甚至是2010，其中的成本以及開發人員的學習曲線也是一個必須衡量的因素。


Silverlight的競爭力
就現況來看，幾乎是所有開發平台都有從網際網路一口氣整合到桌面應用程式乃至於Intranet應用程式的目標與企圖心，從微軟的Silverlight、Adobe的AIR、JavaFX，一直到Google GWT，以及其他各種AJAX技術(例如jQuery)，幾乎人人都想分一杯羹，這其中有軟體大廠，也有開放原始碼陣營。

儘管微軟並非技術的原創者，對趨勢的掌握度偶而也會發生令人跌破眼鏡的狀況，但是面對競爭對手時的敏感度卻總是極高。微軟挾著.NET已累積的龐大開發人員作為後盾，和幾乎所向披靡的銀彈優勢，讓微軟在技術上常常可以後發先至，此次的Silverlight就是一個很好的例子。

從2007年釋出第一個版本至今短短不到兩年的時間內，改版的速度、累積的下載人數與應用數量，其成長幅度比起對手陣營可說不遑多讓。儘管在技術領先和成熟度上相較於其他陣營所推出的解決方案似乎互有長短，但微軟在行銷活動上的實力，以及打持久戰的續航力恐怕是對手所望塵莫及。在微軟與北京奧運、NBC等合作中，你也會發現微軟使盡全力，對於Silverlight推廣以及未來RIA發展的企圖心不言可喻。

不論如何，從這次Silverlight 3所具備的能力來看，面對RIA的應用，Silverlight 3似乎已經準備好了。現在要問的是，身為開發人員的你，面對這股RIA的趨勢，你是否也已經準備好了呢？下一期登場的[Silverlight 3技術專欄]，大家一起來練功吧！