Silverlight 2 Twitter 例程
使得Silverlight如此強大的一件事情是,開發人員和設計師在Silverlight項目上一起合作的容易性。開發人員可以使用Visual Studio打開和編輯Silverlight 2項目,得到一個強大的以代碼為中心的 .NET 開發環境,而設計師則可以使用Expression Blend 2 SP1打開和編輯同個項目,使用一個創造性的工具,精雕細琢,創造出優化的用戶體驗設計。
Silverlight中發布的WPF UI框架通過支持象布局管理,控件,樣式,模板和資源這樣的概念,進一步促成了很好的設計師/開發人員工作流程,有助于避免設計師和開發人員在集成功能,行為和有表現性的設計時相互妨礙的場景。
Silverlight 2 Twitter 例程
上個月,我貼出了一個深入的博客教程,教你如何建造一個Silverlight 2 Digg應用,你可以在這里閱讀。該教程主要針對開發人員,著重于介紹在建造Silverlight 2應用時涉及的基本編程概念。
今天,Celso Gomes 和 Peter Blois 發布了一個很酷的十分鐘長的錄像教程,展示如何使用Expression Blend來對一個Silverlight 2 Twitter Messenger應用進行樣式化。你可以在 這里觀看這個錄像,你可以在這里下載完成后的Silverlight Twitter應用的源代碼。
這個錄像很好地示范了設計師如何不用改動后臺代碼,就可以對一個Silverlight應用重新樣式化。在樣式化過程中,該錄像還展示了Expression Blend 2提供來建造極其豐富的用戶體驗的一些強大的功能。Celso 從該應用的開發人員版本開始,然后對UI進行定制和精雕細琢,使其擁有一個好玩的twitter(鳥鳴)角色的主題:
應用模型
該Silverlight Twitter客戶端是宿主于一個ASP.NET服務器應用之中的,該應用呈示了一個web服務,允許Silverlight Twitter應用與Twitter服務進行通訊(因為Twitter不允許來自客戶端應用的直接訪問)。而Silverlight客戶端與ASP.NET web服務器之間的通訊是通過Windows Communication Foundation (WCF)實現的。
該客戶端應用使用了“Model-View-Presenter (MVP)”模式(也稱為“Model-View-ViewModel”模式),這是在大型WPF應用中常用的模式。雖然這是個很簡單的應用,他們還是想要利用MVP帶來的靈活性,以及為將來發展留下空間。
保持視覺表現和應用邏輯的分離,還允許設計師不用影響基本的應用流程,而做出比較復雜的視覺上的改動,這個錄像提供了一些該架構促成的樣式化靈活性的例子。
樣式化過程
在錄像中,Celso著重強調了Resources(資源)可以怎樣幫助設計師很快地改變顏色。例如,一個常見的畫刷資源(Brush Resource),可以被用來改變應用中所有文本元素的顏色:
Celso展示了使用Expression Blend 2 SP1從圖形來創建新的用戶控件是多么地容易(只要在設計器上選擇多個元素,右擊鼠標,選擇“Make Control”菜單項即可):
#p#
還展示了如何在這個新的用戶控件中創建新的狀態(用了視覺狀態管理器的功能,現在WPF也提供了該功能),創建鳥的動畫效果(飛翔,眨眼等等)
Celso還展示了如何創建每個狀態的動畫效果,改變象Key Spline曲線和Repeat Behavior這樣的高級屬性:
他還展示了如何從圖畫創建出定制的按鈕(這些圖畫可以來自于XAML或象Photoshop或Illustrator這樣的任何其他設計工具),一個Button控件的所有狀態都有現成提供。
Expression Blend還允許你輕松的改變象List Boxes這樣的復雜控件,設計師可以訪問所有的樣式,模板和狀態,不用編寫任何代碼就可以完全地定制List Box的所有部分:
【編輯推薦】