Makale Özeti

CE 6.0 R3'ün en önemli yeniliklerinden biri Silverlight for Windows Embedded teknolojisinin gömülü sistemler için desteklemesidir.Windows Embedded için Silverlight, Windows Embedded CE işletim sistemi için native (C++) dilde destekleyen bir kullanıcı arabirimi framework"üdür.Masaüstü Silverlight uygulama geliştirmeden farklıdır.Grafik arayüzü oluşturmak için XAML dili kullanılmaktadır. Expression Blend 2.0 SP1 ile görsel tasarımlar yapılıp gömülü cihazlarda bu arayüzler kullanılabilir.Böylece daha kullanıcı dostu arayüzler oluşturmamıza olanak sağlanmıştır. CE 6.0 işletim sistemi üzerinde Silverlight uygulamaları geliştirmek için gerekli olan componentler ve basit bir silverlight uygulamasını bu makalede bulacaksınız.

Makale

Windows Embedded CE 6.0 R3 Silverlight Uygulaması-1

CE 6.0 R3'ün en önemli yeniliklerinden biri Silverlight for Windows Embedded teknolojisinin gömülü sistemler için desteklemesidir.Windows Embedded için Silverlight, Windows Embedded CE işletim sistemi için native (C++) dilde destekleyen bir kullanıcı arabirimi framework"üdür.Masaüstü Silverlight uygulama geliştirmeden farklıdır.Grafik arayüzü oluşturmak için XAML dili kullanılmaktadır. Expression Blend 2.0 SP1 ile gorsel tasarımlar yapılıp gömülü cihazlarda bu arayüzler kullanılabilir.Böylece daha kullanıcı dostu arayüzler oluşturmamıza olanak sağlanmıştır. CE 6.0 işletim sistemi üzerinde Silverlight uygulamaları geliştirmek için gerekli olan componentler ve basit bir silverlight uygulamasını bu makalede bulacaksınız.

Bu çalışma için gerekli olan araçlar:

  • Platforum Builder 6.0 R3
  • Expression Blend 2.0 SP1

Öncelikle Silverlight for Windows Embedded (SWE) desteği olan bir OSDesign oluşturmamız gerekmektedir.

Platform Builder->Catalog Items View penceresinden Silverlight for Windows Embedded OsDesign a eklenir.(eğer bulamadıysanız R3 yüklenmemiştir).

Bunun yanında eğer isterseniz XamlPerf de ekleyerek Platform Builder R3 ile beraber gelen örnek 3 tane SWE uygulamasını da işletim sisteminize ekleyebilirsiniz. Bunun için OSdesign da Environment sekmesine variable=SYSGEN_SAMPLEXAMLPERF ve Value=1 şeklinde eklemeniz yeterlidir.Böylece  3 tane örnek uygulama olan Bounce, Bubles,Carousel masaüstünde kısayollarını görebilirsiniz.

İşletim sistemini derledikten sonra örnek uygulamalar sağlıklı olarak çalışırsa işletim sistemi artık SWE uygulamalarınızı çalıştırabilir yetenğine sahip olmuştur.

Kullanıcı Arayüzü Oluşturma:

UI oluşturmak için makalenin başında belirtiğim gibi Expression Blend 2.0 SP1 kullanacağız.

Silverlight Application tipinde bir proje açalım.

Proje adını ve Location bilgilerini girdikten sonra OK deyip devam edelim.Tools-Option bölümüne geçerek EventHandlers özelliğini ClipBoard Only yapalim.

Bu aşamadan sonra arayüzü tasarlamaya başlayabiliriz.Basit bir arayüz olacağından bu çalışmada sadece Buton click event yakalama işlemi için örnek olacağında sadece bir Buton sahneye yerleştireceğiz. Buton özelliklerinden adı verilir.Bu isim önemlidir.eger objeye isim vermezseniz o objeyi kontrol edemeyiz.Ben btnBasla ismini verdim.

Şimdi XAML source koduna baktığımızda aşağıdaki kodları göreceğiz.Bu kodlar page.xaml dosyasında bulunmaktadır. SWE nin ihtiyacı olan sadece bu page.xaml dosyasıdır. Expression Blend 2.0 SP1 ile görsel olarak ve hızlı bir şekilde bu arayüzü oluşturabiliyoruz.Bu da bize uygulama geliştirmede hız katmaktadır.

 <UserControl 
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 x:Class="SilverlightApp1.Page" 
 Width="640"  Height="480"> 
 <Grid  
x:Name="LayoutRoot"  
Background="White"> 
 <Button  
Height="48"  
HorizontalAlignment="Left"  
Margin="54,46,0,0"  
VerticalAlignment="Top"  
Width="180"  
Content="BASLA"  
x:Name="btnBasla"/> 
 </Grid> 
 </UserControl>
 

Bu noktada page.xaml dosyamız hazır olduğundan artık Platform Builder a geçip bir subproject oluşturabiliriz.

Platform Builder da OSDesign in Subprojects üzerine sağ tıklayıp Add New Subproject.. seçip yeni bir subproject ekleyelim. Subproject tipi olarak WCE application Seçip ve uygulamaya bir isim verip devam edelim.

CE Application türü olarak A simple Windows Embedded CE Application seçeceğiz.Böylece hazır bir Main fonksiyonu ile beraber projemiz oluşacaktır.

Finish deyip sihirbazı kapatalım.

BU işlemlerden sonra Platfrom Builder aşağıdaki gibi gözükecektir.

Şimdi bu uygulamamız bir SWE uygulaması olacağından öncelikle bazı kütüphaneleri XAML runtime için gerekli olan ktüphaneleri source koda ekleyelim.

gerekli olan kütüphaneler:

 //xaml runtime için gerekli header dosyalari 
 #include  "pwinuser.h" 
 #include  "xamlruntime.h" 
 #include  "xrdelegate.h" 
 #include  "xrptr.h"
 

Expression Blend 2.0 ile oluşturmuş olduğumuz page.xaml dosyasını projemize eklemiz gerekmektedir. Bunun için yöntem dosyayı Resource olarak eklemektir.Projeye sağ tıklayıp Add New Item deyip açılan pencereden Resource tipinde projemiz ile aynı isimde bir rc dosyası oluşturup projemize ekleyelim.

Visual Studio Resource View penceresinden eklemiş olduğumuz resource un üzerine sağ tıklayıp Add Resource deyip açılan pencereden New seçelim.

Şimdi bizden Yeni bir resource dosyası seçmemiz beklenmektedir. Fakat listede xaml uzantili dosya bulunmamaktadır. Önemli değil dosya tipini tümü seçip Expression Blend 2.0 SP1 ile oluşturduğumuz page.xaml dosyasını bulup ekleyelim.



Eklemiş olduğumuz page.xaml için bir resource tipi belirlemizi isteyecektir. Buna da XAML adini verelim.

page.xaml eklendikten sonra Platform Builder son hali aşağıdaki gibi olacaktır.

SWE uygulaması için gerekli olan tüm işlemler bitmiştir. Artık Subproject uygulamamızın kodlamasına geçebiliriz.

WINAPI Main bloğu içinde yapmamız gerekenler şunlardır.

Öncelikle XamlRuntimeInitialize ile işletim sisteminde XamlRuntime initialize edilir.Böylece XamlRuntime uygulamamızda kullanabilieceğiz

 if  (!XamlRuntimeInitialize()) //xamlruntime init ediliyor  
        return  -1;

XamlRuntimeInitialize başarılı olunca, SWE runtime uygulamamız içine yüklenmiş olacaktır.Ve arayüz birimlerine yakalayabileceğiz.

Her bir SWE uygulaması bağımsız olarak bir "Application" objesine sahiptir.Bunun sayesinde uygulamanın genel özelliklerine ve yeteneklerine ulaşabiliyoruz.Application objesine elde etmek için GetXRApplicationInstance API si kullanılır.

 // app ptr aliniyor 
 		HRESULT _ret;
 		IXRApplicationPtr ixrAppPtr; 
 		if  (FAILED(_ret=GetXRApplicationInstance(&ixrAppPtr)))
 			return  -1;
 

Bu noktada application objesine kendisinin kullanacağı resource (XAML) nerden bulacağını tanımlamalıyız.Biz XAML dosyasını resource olarak çalıştırılabilir dosyanın içine eklemiştik.Bu yuzden hInstance yakalayıcı ile resource daki XAML e ulaşabiliriz.

 //resource module aliniyor 
 		if  (FAILED(_ret=ixrAppPtr->AddResourceModule(hInstance))) 
 		return  -1;
 

Böylece SWE için pencereyi oluşturabiliriz.

 ///xr penceresi oluşturuluyor 
 		XRWindowCreateParams xrPencere;
 		ZeroMemory(&xrPencere, sizeof (XRWindowCreateParams));
 		xrPencere.Style = WS_OVERLAPPED;
 		xrPencere.pTitle = L"SWE Ornek 1" ;
 		xrPencere.Left = 0;
 		xrPencere.Top = 0;
 
 

Aşğıda yazılması gereken diğer kodlar ile ilgili açıklamalar comment altında belirtimiştir.

 //Resource XAML objesinden IDR_XAML1 Resource olarak set edilir 
 		XRXamlSource xrXamlSrc;
 		xrXamlSrc.SetResource(hInstance,TEXT("XAML" ),MAKEINTRESOURCE(IDR_XAML1));
 
 		//Visual Host dan bir instance alinir ve Pencere ve XAML bilgileri olusturulur 
 		IXRVisualHostPtr ixrVisualHost;
 		if  (FAILED(_ret=ixrAppPtr->CreateHostFromXaml(&xrXamlSrc, &xrPencere, &ixrVisualHost))) 
 			return  -1;
 
  		//XamlRuntime FrameWork Elementi olusturuluyor 
 		IXRFrameworkElementPtr ixrFrameElement;
 		if  (FAILED(_ret=ixrVisualHost->GetRootElement(&ixrFrameElement))) 
 			return  -1;
 		//Butonş islemi icin IXRButtonBasePtr alinir 
 			IXRButtonBasePtr button;
 			if  (FAILED(_ret=ixrFrameElement->FindName(TEXT("btnBasla" ), &button))) 
 			return  -1;
 			//Kendi olusturdugumuz Buton Olay yakalayicisina butona click delegate edilir. 
 			BtnOlayYakalayicisi yakalayici;
 			IXRDelegate<XRMouseButtonEventArgs>* clickdelegate;
 			if  (FAILED(_ret=CreateDelegate(&yakalayici,&BtnOlayYakalayicisi::Tikla,&clickdelegate)))
 			return  -1;
 			//ClickEventHandler Butona Set Edilir. 
 			if  (FAILED(_ret=button->AddClickEventHandler(clickdelegate))) 
 			return  -1;
 			//Pencere acilir 
 			UINT exitcode;
 			if  (FAILED(_ret=ixrVisualHost->StartDialog(&exitcode)))
 			return  -1;
 			//ClickDelegeate Release set edilir 
 			clickdelegate->Release();

Yukardaki kodlarda kullanılan ButtonOlayYakalayicisi sınıfı aşağıdaki gibi yapılmıştır.Tikla metodu ile bir adet mesageBox gösterilmiştir.

 class  BtnOlayYakalayicisi
 {
 
 public :
 	HRESULT Tikla(IXRDependencyObject* kaynak,XRMouseButtonEventArgs* args)
 	{       
 		MessageBox(NULL,TEXT("Tik Tik!" ),TEXT("SWEOrnek" ),MB_OK);
 	    return  S_OK;
 	}
 };
 

Buraya kadar SWE uygulamamız bitmiştir. Fakat bir gözden geçirdiğimde resource kullandığımız için resource.h dosyasını da projeye include edilmelidir.

 #include  "stdafx.h" 
 //xaml runtimeççin gerekli header dosyalari 
 #include  "pwinuser.h" 
 #include  "xamlruntime.h" 
 #include  "xrdelegate.h" 
 #include  "xrptr.h" 
 //resouce kullanabilmekççin 
 #include  "resource.h"
 

Son olarak xamlruntime için c++ libraryleri subproject e eklememiz gerekecektir.

Subporject adına sağ tıklayıp yukardaki örnek de verdiğim isim SWEOrnek1 üzerine sağ tıklayıp open deyip açalım ve açılan dosyada TARGETLIBS bölümü aşağıdaki gibi değiştiriniz.

TARGETLIBS= \
$(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\coredll.lib \
$(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\xamlruntime.lib \ 
$(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\uuid.lib \ 

Böylece XAML için gerekli kütüphaneler eklenmiş oldu.

Son olarak aynı dosyanın en sonuna aşağıdakini de ekleyiniz.

INCLUDES=$(_OEMINCPATH)

Şimdi İşletim sistemini Subprojectler ile beraber derlediğinizde projeniz işletim sistemine eklenmiş olacaktır. \Windows klasörü altına yerleştirilmiştir. Direk Run komutu ile SWEOrnek1.exe yazıp çalıştırdığınızda projeniz çalışacaktır.

Buraya kadar Windows Embedded Silverlight ile ilgili temel olarak nasıl uygulama geliştireceğimize giriş yapmış olduk. Bundan sonra elimden geldiği kadar SWE için birkaç tane daha tutorial oluşturmaya çalışacağım.

_hasan.
blog: www.aytis.com