使用Silverlight for Embedded开发绚丽的界面(2)
5.Step by Step
為了偷懶,我只是簡單翻譯一下一個國外朋友的博客文章,文章不錯,我只是在此基礎(chǔ)上做一點補充,并提供帶Embedded XAML Runtime引擎的SDK(下一篇文章),讓你可以在這個SDK提供的模擬器上測試你編寫的SE Application,這樣你不需要每次都編譯一下CE OS的subproject。但是有一點需要申明,在模擬器跑起來的效果會很差,一方面因為沒有硬件加速(沒有硬件加速的情況下不可能使用任何技術(shù)實現(xiàn)即非常絢麗又快速的效果),另一方面PC上的顯示器清晰度比一些CE高DPI的設(shè)備低很多。
原文地址:http://geekswithblogs.net/WindowsEmbeddedCookbook/archive/2009/10/01/silverlight-for-embedded-tutorial.aspx
1.使用Expression Blend 2生成XAML等資源
創(chuàng)建一個Silverlight application:
你需要使用Expression Blend 2 SP1,該版本支持Silverlight 2。從向?qū)е心銜吹侥阈枰x擇開發(fā)語言是C#還是Visual Basic,SE只能用C++編寫,很可惜Expression Blend目前并不支持C++,所以我們不需要Expression Blend生成的任何代碼。
那么怎樣不讓Expression Blend幫我們生成的C#或者VB.NET代碼呢?請看下圖:
創(chuàng)建一個新的項目之后,Expression Blend已經(jīng)幫你生成好一個空XAML文件(默認叫page.xaml)。
我們從Silverlight提供的控件集中拖一個簡單的按鈕:
使用屬性窗口我們給新按鈕分配一個名稱:
屬性窗口允許你自定義按鈕的各種屬性:顏色、旋轉(zhuǎn)角度(你可以讓一個垂直的按鈕旋轉(zhuǎn)45度!)、透明度等等。
我們在下一篇文章中體驗這些特性,現(xiàn)在我們僅僅保持按鈕原樣,并保存XAML文件。
如果你用一個記事本打開一個XAML文件你會發(fā)現(xiàn)它們非常簡單:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <UserControl?xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"??? xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"?x:Class="SimpleApp.Page" Width="640"?Height="480"> ????<Grid?x:Name="LayoutRoot"?Background="White"> ????????<Button?Height="87"?Margin="189,106,209,0"?VerticalAlignment="Top"?Content="Button"?x:Name="MyButton"/> ????</Grid> </UserControl> |
UserControl作為頂部容器包含我們的按鈕,Grid用于布局(對象被組織成以列和行的形式)。
按鈕具有各種屬性,比如在grid cell中的定位、對齊方式、content(字符串值“Button”)和name(字符串值”MyButton”)。
?
2.編碼
到這一步我們做好了Design,下一步我們可以啟動Platform Builder,在我們自己的OS Design項目上創(chuàng)建一個新的subproject。(在后面我會提供一個Alchemy SDK,在這個SDK上編寫SE based Application你甚至不需要安裝任何CE系統(tǒng)的開發(fā)環(huán)境。)
在solution窗口,右擊新建一個subproject,創(chuàng)建一個WCE Application:
選擇A simple Windows Embedded CE application:
這會創(chuàng)建一個應(yīng)用程序僅僅包含WinMain函數(shù),對與我們第一個SE應(yīng)用程序來說已經(jīng)夠了。
第一件要做的事是包含一些頭文件:
?| 1 2 3 4 | #include "pwinuser.h" #include "xamlruntime.h" #include "xrdelegate.h" #include "xrptr.h" |
下一步我們添加Expression Blend為我們生成好的XAML到程序資源中。
包含資源文件到exe文件中,我們需要添加一個資源腳本文件(rc文件)到subproject中:
在subproject上右擊,選擇”add\new item”并從對話框中選擇資源文件并起一個名字:
創(chuàng)建一個新資源:
現(xiàn)在可以導入XAML文件,XAML中的數(shù)據(jù)將被以二進制的形式包含到exe文件中:
為新資源起個類型名字叫”XAML”:
這里為了方便我們保留資源默認的ID (IDR_XAML1)不變,在一個真正的項目中,起個meaningful names是更好的主意:
為了使用資源ID,我們在我們的cpp文件中需要包含"resource.h":
?| 1 | #include "resource.h" |
然后在WinMain中我們開始使用XAML運行時,首先需要初始化它:
?| 1 2 | if?(!XamlRuntimeInitialize())??????? return?-1; |
如果XamlRuntimeInitialize執(zhí)行成功,SE的運行時會被你的應(yīng)用程序加載并準備好處理UI。
每個SE應(yīng)用程序只有一個”Application”對象讓我們用來訪問全局應(yīng)用程序的屬性和特性。
為了訪問它們,我們需要使用GetXRApplicationInstance?API。
?| 1 2 3 4 5 | HRESULT?retcode; ?IXRApplicationPtr app; ?? ?if?(FAILED(retcode=GetXRApplicationInstance(&app))) ?????return?-1; |
資源問題我們都已經(jīng)包含到exe中了,所以我們傳遞我們的HINSTANCE句柄給它就可以了:
?| 1 2 | if?(FAILED(retcode=app->AddResourceModule(hInstance))) ????return?-1; |
現(xiàn)在我們已經(jīng)初始化了Application對象,我們可以創(chuàng)建主窗口并讓SE管理它的內(nèi)容:
?| 1 2 3 4 5 6 7 8 9 10 11 | XRWindowCreateParams wp; ZeroMemory(&wp, sizeof(XRWindowCreateParams)); wp.Style?????? = WS_OVERLAPPED; wp.pTitle????? = L"S4E Test"; wp.Left??????? = 0; wp.Top???????? = 0; XRXamlSource xamlsrc; xamlsrc.SetResource(hInstance,TEXT("XAML"),MAKEINTRESOURCE(IDR_XAML1)); IXRVisualHostPtr vhost; if?(FAILED(retcode=app->CreateHostFromXaml(&xamlsrc, &wp, &vhost))) ????return?-1; |
VisualHost對象"hosts"運行時并讓我們可以訪問它的內(nèi)容,以及從資源中加載我們的XAML(使用XRXamlSource對象)。
SE應(yīng)用程序中的對象以對象樹的方式組織起來。訪問對象樹中的對象,我們需要得到指向這棵樹根部(root)的指針:
?| 1 2 3 | IXRFrameworkElementPtr root; if?(FAILED(retcode=vhost->GetRootElement(&root))) ????return?-1; |
從樹的根部我們可以通過在Expression Blend中指定的name來訪問我們的按鈕:
?| 1 2 3 4 | IXRButtonBasePtr btn; if?(FAILED(retcode=root->FindName(TEXT("MyButton"), &btn))) ????return?-1; |
為了能夠收到用戶點擊按鈕時的通知,我們需要提供一個委托(delegate)。使用C#開發(fā)的朋友對委托的概念應(yīng)該比較清楚,在這里一個委托即是一個指向具有指定原型(prototype)的C++實例的成員的指針。?
我們可以在我們的cpp文件中聲明一個簡單的C++類,并在其中實現(xiàn)按鈕點擊事件的委托:
| 1 2 3 4 5 6 7 8 9 | class?BtnEventHandler { public: ????HRESULT?OnClick(IXRDependencyObject* source,XRMouseButtonEventArgs* args) ????{ ????????MessageBox(NULL,TEXT("Click!"),TEXT("Silverlight for Windows Embedded test"),MB_OK); ????????return?S_OK; ????} }; |
當按鈕被點擊時我們的事件處理器(event handler)僅僅是簡單的顯示一個消息框。
正如你看到的事件處理器(event handler)有2個參數(shù):一個指向產(chǎn)生事件(我們的按鈕)的對象的指針和一個包含事件參數(shù)的結(jié)構(gòu)體的指針。?
為了連接事件處理器(event handler)和按鈕,我們需要創(chuàng)建一個委托對象:
| 1 2 3 4 5 6 | BtnEventHandler handler; IXRDelegate<XRMouseButtonEventArgs>* clickdelegate; if?(FAILED(retcode=CreateDelegate(&handler,&BtnEventHandler::OnClick,&clickdelegate))) ????return?-1; if?(FAILED(retcode=btn->AddClickEventHandler(clickdelegate))) ????return?-1; |
事件處理器已經(jīng)連上我們的按鈕了,現(xiàn)在只需要等待用戶去點擊我們漂亮的按鈕并顯示我們的UI:
?| 1 2 3 | UINT?exitcode; if?(FAILED(retcode=vhost->StartDialog(&exitcode))) ????return?-1; |
指向委托對象的指針并不是一個智能指針(smart pointer),我們需要顯式釋放它:
?| 1 | clickdelegate->Release(); |
在我們build我們的subproject前我們需要添加頭文件所在的目錄和一些SE需要的庫文件。
右擊subproject打開source script添加如下代碼:
?| 1 2 3 4 5 6 | INCLUDES=$(_OEMINCPATH) and libraries: TARGETLIBS= \ ????$(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\coredll.lib \ ????$(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\xamlruntime.lib \ ????$(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\uuid.lib \ |
(你需要在sources script 中已經(jīng)包含了TARGETLIBS directive)
現(xiàn)在你可以在設(shè)備上跑起來應(yīng)用程序并點擊按鈕了!
你可以從這里下載到Demo代碼:?
http://cid-9b7b0aefe3514dc5.skydrive.live.com/self.aspx/.Public/SilverlightSample.zip
下一篇文章:使用Silverlight for Embedded開發(fā)絢麗的界面(3)
作者: 王克偉出處:?http://wangkewei.cnblogs.com/?
版權(quán)聲明: 本文的版權(quán)歸作者與博客園共有。轉(zhuǎn)載時須注明本文的詳細鏈接,否則作者將保留追究其法律責任的權(quán)利。
您可以從這里更方便的找到我的文章。 《新程序員》:云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作,文字、視頻、音頻交互閱讀
總結(jié)
以上是生活随笔為你收集整理的使用Silverlight for Embedded开发绚丽的界面(2)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 使用Silverlight for Em
- 下一篇: 使用Silverlight for Em