2011年2月26日 星期六

新一代智慧型手機平台Windows Phone 7開發專欄(一)

前言:
2010年十月份到現在,差不多三個月的時間,微軟WP7 Marketplace上的軟體數量已經超過5500個應用程式,並持續以每天約100個新應用程式的數量遞增,隨著Steve Ballmer(microsoft CEO)2011 CES上釋出的訊息,我們知道微軟除了將會在今年二月份有第一次的重大更新之外(內容包含許多人期待的Copy & Paste以及CDMA的支援),接下來連續兩季都會有更多WP7作業系統上的升級,諸如多工的支援、HTML5的支援等等,這讓許多的開發人員更加地躍躍欲試

 

緣起

 

        台灣微軟在12/8日舉辦了一場堪稱特殊的記者會,不但邀請了很多記者,還找了台灣率先支持Windows Phone 7手機平台,已經投入WP7軟體開發的廠商共襄盛舉。

        這場記者會堪稱特殊,除了舉辦記者會的地點突破傳統的選在文藝氣息濃厚的敦南誠品之外,更特別的地方是乍看之下,這場記者會似乎辦得有些太早。Windows Phone 7手機已經在台灣銷售了嗎? 答案是『Yes』,但手機不是還沒有支援中文輸入嗎? 答案也是『Yes』。

        目前在全球銷售的Windows Phone 7手機,是一款支援multi-language顯示的多國語言手機,但其中內建的Apps以及輸入功能,則都並非是中文的,在這種情況下,依舊在亞太地區銷售,這次微軟是否太急躁了一些???

祭出高額獎金

 

        然而即便如此,我們還是看到台灣地區有許多死忠愛好者和科技嘗鮮族不顧一切的殺了進來,原先頗令人擔心的問題卻沒有發生,超乎預期的,大家對於這次微軟推出的新機,在操作介面上的改進幾乎是一致好評,而台灣地區的用戶當然苦惱於沒有中文輸入功能,但微軟的軟體市集上,在上市當月就率先上架了數款內建中文輸入功能的簡訊以及電子郵件傳送程式,也算是對台灣地區的使用者有所交代。當然大家在採購前就已經知道第一時間是不具備中文輸入功能的,因此失望的情緒並沒有擴大,反倒是對這次微軟洗心革面的新操作介面感到新奇。
        在12/8日的記者會當天,微軟不僅介紹了新上市的手機,還同步對開發人員釋出利多,祭出高額獎金鼓勵Windows Phone 7軟體開發,不僅前30名成功送出WP7 App到微軟Marketplace可獲得免費的手機之外,若持續一周下載次數位於前100名還可獲得一萬元美金,最多可獲得三萬元美金的高額獎金(活動網址:http://www.microsoft.com/taiwan/promo/wp7isv/ )使得許多廠商開始躍躍欲試,畢竟現在Marketplace中軟體數量不過數千,前100名似乎還頗有可挑戰的空間。

        而在同一時間,微軟還為開發人員舉辦了北中南巡迴的WP7開發人員技術研討會,透過一整天的課程,讓開發人員能夠迅速地掌握到WP7應用程式與遊戲軟體的開發技巧,並且立即可將應用程式上傳到軟體市集。

三螢一雲啟動

 

        這一連串的動作,我們可以看到微軟的企圖心。
        要知道WP7的重新出發,是微軟從去年開始談的三螢一雲(three screens and a cloud)的重要一步,而對於.NET開發人員來說,Visual Studio 2010Silverlight開發技術則是實現三螢一雲的重要平台。
        去年一切都還在朦朧之中的雲端技術,在今年開始漸漸地明朗,微軟的Windows AzureSQL Azure都已經正式上線,而Silverlight則正式的從Web應用程式開發跨入了行動裝置的領域,現在開發人員可以透過單一一套的開發工具(VS2010)使用同樣的開發技術(Silverlight)建立出橫跨數種平台(PC, Web, Mobile, Pad…etc)的應用程式。
        而雲端技術則剛剛好可作為行動裝置(Mobile, Pad)Web應用程式的運算與資料儲存後台。我們大概都沒有辦法否認,未來五年,軟體的重點會從PC上往兩端移動,一端是Cloud, 另一端是Mobile(Phone or Pad),過去的Client-Server, N-tier,慢慢的就變成Mobile to Cloud
        從去年開始投入WP7應用程式的開發,現在我們寫的WP7應用程式,已經開始往這樣的架構發展,我用WP7當作Cliend,透過Silverlight撰寫應用程式,好處是我知道未來可以很快地移轉到PCPad, Services則可透過WCF/Web Services來撰寫,如果你願意,可以架設在Windows Azure,最後把資料存放在SQL Azure,在這個架構裡面,WP7是很好的資料呈現平台,大型的運算我放在Windows Azure,運算後的結果在WP7上呈現,但RAW Data可以放到SQL Azure中。
        由於WP7的開發透過Silverlight,這和我們現在開發Web應用程式以及PC應用程式(OOB)的方式完全相同,所以我只需要把程式重新compile,即可在WebPC上執行。
從這一期開始,我們會陸續和大家介紹Windows Phone 7應用程式開發的技巧,並且逐步與微軟的Azure雲端技術進行結合。

第一個Windows Phone 7應用程式

 

        維持一貫的傳統,微軟在開發工具上的努力是有目共睹的,這使得要開發一個能動的Windows Phone 7應用程式異常容易,當安裝好了VS2010與所有的開發套件之後(您也可以從網站上下載免費的Windows Phone Developer Tools開發工具),您可以在專案範本中找到底下的Template

        新增的專案架構中,可以很清楚地發現,UI的描述是透過SilverlightXAML(基本的Silverlight開發技術請參考筆者2010年於Run!PC的專欄),預設狀況下所呈現出的黑底白字是Windows Phone的『Metro style』:

而專案的架構非常簡單:
        App.XamlApp.Xaml.cs是全域應用程式宣告檔案,和過去Silverlight時代的App.Xaml位階相同,我們可以在其中定義一些需要被應用程式當中每一個頁面(.xaml)存取到的共用物件。
WP7應用程式還不僅於此,其中有幾個Event相當重要,分別是:
l   Application_Launching
l   Application_Activated
l   Application_Deactivated
l   Application_Closing

        這幾個事件相當特別,由於預設的狀況下,WP7應用程式並非多工實行,因此同時間只能執行一個前景應用程式。因此應用程式的啟動與切換之間,上述的事件就會觸發,便於開發人員保留應用程式處理中的資料(詳細的細節容後再述)

LayoutRoot ContentPanelTitlePanel

 

        接著我們來看應用程式當中的控制項佈置區域。每一個WP7頁面(Page)都由PhoneApplicationPage標記開始,任何一台的WP7手機,都是480x800解析度因此您會發現預設的UI是以480x800解析度開始。

比較需要注意的是描述在PhoneApplicationPage標記中的SupportedOrientations以及SystemTray

上面的XAML碼對應到UI上則是:
        開發人員可以隨意的在ContentPanel中佈置控制項,請留意ContentPanelGrid型態的容器,因此位於ContentPanel中的物件將會透過Grid方式進行佈置(請參考Silverlight Grid物件容器特性),而TitlePanel則可由開發人員決定是否需要如果不需要則直接將XAML Code刪除即可:


例如,我們在場景中佈置了幾個控制項:


則場景中的XAML碼變為:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="72" HorizontalAlignment="Left" Margin="101,44,0,0" Name="textBox1" Text="0" VerticalAlignment="Top" Width="220"  InputScope="Number" />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="42,24,0,0" Name="textBlock1" Text="身高:" VerticalAlignment="Top" />
    <TextBox Height="72" HorizontalAlignment="Left" Margin="101,161,0,0" Name="textBox2" Text="0" VerticalAlignment="Top" Width="220"  InputScope="Number"  />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="42,139,0,0" Name="textBlock2" Text="體重:" VerticalAlignment="Top" />
    <Button Content="計算BMI" Height="72" HorizontalAlignment="Left" Margin="290,239,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
</Grid>


接著我們可以直接在ButtonClick事件當中撰寫程式碼:
程式一:
private void button1_Click(object sender, RoutedEventArgs e)
{
    double height, weight, bmi;
    //取得輸入數字
    double.TryParse(this.textBox1.Text, out height);
    double.TryParse(this.textBox2.Text, out weight);
    //計算BMI = 體重(公斤) / 身高(公尺)平方
    height = height / 100;
    bmi = weight / (height * height);
    MessageBox.Show("BMI:" + bmi);
}


        上面這段程式碼可讓使用者在手機上輸入完身高體重後,按下計算BMI鈕時,以MessageBox方式跳出計算結果:

Application BarIcon

 

        如果你仔細觀察,每一個頁面的XAML碼中,預設都註銷掉了一段由『<phone:PhoneApplicationPage.ApplicationBar>』開頭的區段,我們稱為ApplicationBar

        為維護應用程式操作和外觀的一致性,ApplicationBar是微軟針對WP7應用程式開發所建議的標準選單設計方式,有MenuItemIconBar兩種,可透過XAML碼來描述,例如:

呈現出的結果如下:

        使用者點選選單的『』時,選單會以凸顯式方式彈出,如果選單的Opacity="0.5",則選單會以半透明的方式呈現出來。


        請特別注意,選單所使用到的Icon(範例中放置於Images資料夾)BuildAction必須是設定為Content類型:

        如此一來,我們的應用程式當中就有選單可以使用了,當使用者點選時(例如Icon),我們只需要在Click事件當中判斷點選的Icon,並撰寫相對應的程式碼即可:
private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
    //取得點選的icon文字
    string item = (sender as Microsoft.Phone.Shell.ApplicationBarIconButton).Text;
    switch (item)
    {
        case "設定":
            ///要進行的工作
            break;
        case "儲存":
            ///要進行的工作
            break;
        default:
            break;
    }
}

 

場景切換

 

        當然,WP7應用程式也允許您建立多個頁面,並且在頁面當中進行切換,您可以在專案當中,透過Add New Item新增一個頁面:
        您會發現,新頁面和剛才我們的MainPage.xaml如出一轍,擁有完全一樣的架構,在主場景當中,您可以透過底下這樣的程式碼,切換到新增的頁面:
NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));


        切換到新頁面之後,使用者可以透過手機上的『←』退回鈕返回前一頁,每一隻WP7手機都有三個按鈕,分別是『退回』鈕、『Windows主選單』鈕、『搜尋』鈕:
        當然,您可能希望在切換頁面的時候有一些動畫效果,或者是關注到頁面切換時資料交換以及記憶體資料保存的問題,這部分我們就留在下一期為各位介紹了。

結語

       
        這一期我們為各為介紹了WP7應用程式開發的一些基本概念,並帶領開發人員著手建立了一個相當簡單的WP7應用程式,您會發現,由於開發工具的便利,單單要開發一個WP7的應用程式是相當簡單的,特別是針對已經具有Silverlight開發經驗的技術人員。然而由於目前WP7尚未支援多工,因此在應用程式之間的切換和記憶體資料保存的部分,需要特別進行一些處理,關於這個部份,在下一期我們則會介紹在場景切換中的一些重要觀念與技巧,逐漸進入到更深入的WP7應用程式開發領域。

沒有留言:

張貼留言