My Technical Blog

MIX09 is started and it has already showed something great! Silverlight 3 beta is released and it’s added so many features that are interesting! I’ve installed it immediately but not yet to try it out. Go to www.silverlight.net to look more.

Last year, I was working with Silverlight 2 beta and wrote a demo for MIX08. At that time, it still had some bugs in it. I still remember that I tried to simulate Memorablia in hardrock.com. I got a partially success but not achieve all. That’s was a very good experience.

Recently, I have written an article in Linux Pilot. It is related to ASP.NET AJAX. You may curious that why Microsoft Technologies can appear in Linux’s magazine. Well, I not good at PHP and a little bit better in JSP. The one I really interested in is ASP.NET. That’s why I wrote. But I also introduced how to host ASP.NET project on Linux. Not bad, right? I used it to finish my Final Year Project in my Associate Degree. The result is good, at least finish all required functionality. Comparing to other groups that use other technologies, like PHP and JSP, I can get an “A” on it.

I liked open source in the past, when I build the Linux Cluster for Kowloon Technical School (My high school). I used Red Hat Linux 9.0 and 16 Pentium 4 machines to build a powerful cluster. I used Povray 3.1 to render graphics on the cluster to show-off to the public. Well, I like it. But sometimes, I feel that free and open source software is not always reliable and required relatively complex installation and deployment.

I then touched .net and learning C#, although Java was the perferred language for studying at that time. Java seems did not have too much improvement, but .net did. e.g. WPF, WCF, LINQ and improvement in Visual Studio. Well, sometimes, I hate Netbeans when it crash. This emotion is more serious if i am rushing for assignment’s deadline. Sometimes, it made all my codes gone. Poor am I, I have to start again.

In the competition of various platform, we are benefited from it. .net has great improvement and update very frequently. Ruby on Rails becomes the hottest topic in the web. Google opens their mobile OS and platform. All of that are really great I can say.

No matter which platform, programmer has one responsibility only, which is to provide secure and stable software to customers. The technologies simplify the jobs for us but does not change the aims of programming.

Well, a friendly reminder, I will write another article for next month Linux Pilot. The topic is about ASP.NET AJAX Toolkit, which is a open source toolkit in codeplex.com and fully base on ASP.NET AJAX framework. I still thinking how to present it. If you want to have a look, go to UST library or buy your own copy in Bookshops. You can also get the latest information of Linux in both Hong Kong and the world.

Recently, someone would like me to build a small website for him, which is needed to interact with map. Usually, many people think about Google Map at the very beginning. The website intended to give visitors a better user experience. I suggested to use Silverlight (You know, I’m not familiar with Flash) and Virtual Earth from Microsoft. There’s a API to access Virtual Earth by JavaScript, which is easy but not user friendly for Silverlight.

VIEWS (from Codeplex)

VIEWS was originally from Microsoft Research and finally become a Codeplex’s project. For details, please go to http://www.codeplex.com/views. I don’t want to copy right here. Download the latest version and let’s start!

1. Open a new Silverlight 2 project with an associate asp.net project. I called it VIEWSapps.

2. In the VIEWSappsTestPage.html, which is in the associate html project – VIEWSapps.Web, add the following code in between the head tag:

<script type=”text/javascript” src=”http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1″></script>

3. In the downloaded zip file, the is a JavaScript file called “views.js”. Copy it to the VIEWSapps.Web project and add the following script to the head tag as well:

<script type=”text/javascript” src=”views.js”></script> 

4. Inside the above html file, add area for the map:

<div id=’mapContainer’ style=”position:relative; width:640px; height:480px;”></div>

5. In Silverlight, add the VIEWS.dll and ScriptInterop.dll as the project reference. In the page.xaml.cs, add the folllowing code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using VIEWS;

using System.Windows.Browser;

namespace VIEWSapps

{

    public partial class Page : UserControl

    {

        private VEMap map;

        public Page()

        {

            InitializeComponent();

            Loaded += new RoutedEventHandler(Page_Loaded);

        }

        void Page_Loaded(object sender, RoutedEventArgs e)

        {

            map = new VEMap(“mapContainer”);

            HtmlPage.RegisterScriptableObject(“SLMAP”, map);

            map.LoadMap();

        }

    }

}

 
6. Build the project, right click VIEWSappsTestPage.html in the Solution Explorer and click “View in Browser”. You will see the following effect:

Interact with Silverlight

That’s a very simple Virtual Earth map, but how to customize it?

1. Add a text box and button in the XAML, the page.xaml will become:

<UserControl x:Class=”VIEWSapps.Page”

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

    Width=”400″ Height=”300″>

    <Grid x:Name=”LayoutRoot” Background=”White”>

        <TextBox Height=”21.772″ HorizontalAlignment=”Stretch” Margin=”79,25,50.1040000915527,0″ x:Name=”location” VerticalAlignment=”Top” TextWrapping=”Wrap”></TextBox>

        <Button Height=”33″ HorizontalAlignment=”Stretch” Margin=”149.89599609375,93,50.1040000915527,0″ x:Name=”SearchButton” VerticalAlignment=”Top” Content=”Find” Click=”SearchButton_Click”/>

    </Grid>

</UserControl>

2. In page.xaml.cs, insert the following method to handle the button click: 

        private void SearchButton_Click(object sender, RoutedEventArgs e)

        {

            map.Find(“”, location.Text);

        }

3. Compile the project, view that html file, you will see the following:

Go to find you home place by your own apps!

Finally…..

Hope you will like this simple example. VIEWS has a lot of functions and works with Silverlight very well. Even though the Microsoft Virtual Earth is not accurate and update like Google Map, it has a lot of cool stuffs to play with. But we still can play with Google Map with WCF, since it use web service to distribute its service. Let’s try something interest next time, see you then.

Finally, exams over. It was terrible life during these two months. Dealing the stuffs for Leo Club, working part time job in Microsoft, tones of mid-term exams and assignments, those are gone. Luckly, I still alive.

About this blog, I have planned something to post here. I will catch up this percious semester break. Let see.

Well, The previous post has benn updated. All related pictures have benn added already. You may doubt that why I still talking about Silverlight 2.0 beta 2. The reason is simple, because the article was written in last month. At that time, the latest version was still beta 2. Why don’t I update it? Simple, Because of the mid-term tests and assignments. However, all the basic stuffs are the same in the shipped Silverlight 2, so don’t worry. 

I am planning to write a series of postes about Silverlight, depending on my time. Hope you can enjoy it!

Last month, a Linux magazine asked me to write an article. I had free to choose every topic, so I said how about Silverlight. He said that’s good idea and I started writing. About a week over, i finished it but he rejected it. The reason was Silverlight 2 was not able to run in Linux Platform. As a Linux magazine editor, he not accepted it. So, I chose another topic, which was about ASP.NET AJAX. It must able to run in Linux and all other platform now……

I am now posting this article here. So for those who benefit from Chinese, you can read it completely. But for others, I encourage you to learn Chinese. Of course, I will translate it in English at soon. Enjoy it! It was writing for Silverlight 2 Beta 2, but the basic stuffs are almost the same with the shipped version now.

I am processing some screen shot, probably will finish in one or two days.

新世代RIA平台—Silverlight (一)

互聯網上的網站，最初只是由一個一個的超連結(hyperlink) 組成，內容只有簡單的文字和圖片，或動態的GIF，慢慢隨著JavaScript的出現，我們可以利用它，來進行一些用戶輸入、數據和動態畫片的處理，並演變成現在的AJAX。AJAX的出現，使現在的網上應用 (web applications) 有更佳的用戶體驗(User Experience) ，例如Gmail和Facebook等就是最佳的例子。

雖然AJAX能讓網頁展示更多的資訊，並且比傳統的HTML網頁更為動態，令網頁更接近桌面應用(desktop application) ，但開發的過程十分複雜，涉及大量的JavaScript代碼，容易造成漏洞(bugs) 。再者，AJAX只是一種瀏覽器與伺服器間的溝通機制，欠缺許多圖象、動畫、音訊和視訊等方面的支持。

Silverlight的背景

Silverlight的出現彌補了以上方面的不足，也彌補了AJAX開發的複雜性。Silverlight本身是瀏覽器上的一個plug-in，並有誇平台的特性，可在不同的瀏覽器上運行，例如Internet Explorer、Firefox和Safari。

在Microsoft .net Framework 3.0中，WPF (Windows Presentation Foundation) 是其中的一個大元件，當中的特別之處是，開發者可利用WPF開發出尤如Windows Vista絢麗的介面，並且支持動畫、高清影片播放等。WPF亦將設計師和開發者的工作分開，設計師可利用不同的工具去進行設計，例如Microsoft Expression Blend，這個檔案會被儲存成一個XML的檔案，在這裡稱為XAML (XML Application Markup Language) ，開發者就能根據這個XAML，為介面加上程序代碼。這樣的工序既簡潔，而且令程序更易於管理。

利用WPF開發的程序暫時只可在Windows XP / Vista上執行，但Silverlight卻利用WPF上述的優勢，將之擴展至不同平台。Silverlight借用一部份的.net framework和WPF，所以在Silverlight上會看到很多WPF的影子，基本上，WPF與Silverlight的開發過程是一樣的，但Silverlight並沒有承繼整個WPF的功能，比如3D介面的開發，因為WPF中3D部份的運算是依賴DirectX，而其他的操作系統並沒有DirectX的支持，也不一定每個用戶擁有DirectX的顯示卡，所以3D的功能並沒有納入在Silverlight中。而且WPF的體積龐大，亦不可能完全放在4MB的plug-in中。

在北京奧運期間，NBC利用Silverlight，建立nbcolympics.com，用作直播高清的奧運賽事，十六天的比賽中，一共直播超過2200小時的片段，而在此段期間，Silverlight的Run-time每日就有八百萬次下載的紀錄，用戶可以在網站內，同一時間流暢地欣賞數段賽事，並可藉著Silverlight本身對視頻支持上的優勢，免費觀看高清的寶事直播。

Silverlight至現在有兩個版本，Silverlight 1.0和2.0，1.0主要是依靠JavaScript來作背後的控制和處理，在2.0版本，有一個大的躍進，加入.net 語言的支持，如Visual Basic 和C#，也支持其他動態語言，如Ruby和PHP，加上.net的library，令Silverlight也承繼了.net平台上開發的一些優勢。除了可在微軟平身的ASP.NET上加上Silverlight插件外，也支持HTML、PHP、JSP等不同的網頁格式，令不同平台上的網頁開發者也可體驗Silverlight的好處。而Silverlight 2.0現正處於beta 2的階段，相信會在今年年底前正式推出。

開發環境

Silverlight本身並無限制使用任何的開發工具，但暫時最方便和最高效的開發工具為Visual Studio 2008和Blend 2.5 June 2008 Preview，前者主要用作Silverlight程式背後的代碼開發，而後者主要用作前端的介面和動畫的設計。讀者如沒有安裝Visual Studio的話，可以下載90天的測試版，而Blend 2.5暫時仍處於測試階段，所以亦可免費下載。

開發所需軟件：

1.       Visual Studio 2008 Professional Edition (http://msdn.microsoft.com/en-us/vs2008/products/cc268305.aspx )

2.       Microsoft Expression Blend 2.5 June 2008 Preview (http://silverlight.net/GetStarted )

3.       Silverlight Tools Beta 2 for Visual Studio 2008 (http://silverlight.net/GetStarted )

讀者可依次安裝上述軟件和工具，而所有的軟件均支持Windows XP / Vista。而Silverlight Tools Beta 2暫時只支持Visual Studio 2008 Professional以上的版本，但相信待正式版推出後會支持更多不同的版本，包括免費的Visual Studio 2008 Express Edition。

第一個Silverlight程序

為介紹Visual Studio和Blend在開發上的不同特性，以下的示範會同時使用這兩種軟件。而以下示範使用的將會是Visual Studio 2008 Team Suite，但在操作上各個版本基本上是一致的。

1.       打開Visual Studio 2008，在工具欄中選擇File -> New -> Project，或按快捷鍵Ctrl + Shift + N。

2.       New Project的視窗隨之彈出，在左邊Project Type的選項中，選擇Visual C#，並隨之選擇Silverlight，右邊的Templates列表中就會出現兩種Silverlight類型的Project，在這次的示範，我們需要使用Silverlight Application的Template，並取其名為OurFirstSilverlightProject。如圖所示(01.jpg)。

3.    在選擇Project類別後，隨之會有一個視窗彈出，名叫Add Silverlight Application，按上OK後，除了Silverlight的Project會被創建外，還會附帶一個ASP.NET加上HTML的Project，這裡的原因要稍作解釋。Silverlight的Project，當在編譯(Compile) 後，會產生一個XAP的檔案，但這個檔案不能被獨立執行，Silverlight的程式永遠只可在瀏覽器上執行，為方便進行調試，Visual Studio會自動創建一個ASP.NET + HTML的Project，並自動連結上該Silverlight程式。(02.jpg)

4.       當一切初始化完成後就會看到以下的畫面：(03.jpg)

Page.xaml是預設的檔案，本身是一個類(Class) ，也是程式被執行後第一個被創建的物件(Object) 。而Page.xaml也是一個XML檔案，用來描述整個Silverlight程序的介面。

簡單起見，我們的第一個例子就用代碼，繪製一個button，在<Grid x:Name=”LayoutRoot” Background=”White”></Grid>中加上以下代碼：

<Button x:Name=”firstButton” Content=”Click Me!”FontSize=”40″ />

在上面的Design View中就會馬上看見以下效果：(04.jpg)

以上的代碼中，Button就是創建一個Silverlight的按扭，而當中的x:Name是這button獨一無二的名字，將來要利用C#代碼控制或改動這個button，就是依靠這個名字。

5.       要在瀏覽器上看到效果，首先要編譯整個Project，在工具欄選擇Build -> Build OurFirstSilverlightProject，完成後，在最底的狀態欄上，會顯示Build succeed。在右面的Solution Explorer中，右擊OurFirstSilverlightProjectTestPage.html，並選擇View in Browser。瀏覽器會馬上打開，並可得到圖中所示的效果。(05.jpg)

6.       但上述的button只是一個簡單的示範，背後完全沒有任何的程式，以下我們將加入一小段的C#代碼作簡單的示範。打開Blend 2.5，並在工具欄上選擇File -> Open -> Project / Solution。選取剛才在Visual Studio創建的Project，即OurFirstSilverlightProject.sln。(06.jpg)

7.       在右邊Project的欄目中雙擊Page.xaml以開啟。Page.xaml被開啟後，會看見左邊的Objects and Timeline欄中，顯示出這個檔案相對應的XML結構。首先增加整個程式的解象度，在左邊的Objects and Timeline欄中選擇[UserControl] ，然後在右邊Properties中，可以看到相應的設定。

8.       修改右邊Layout的Width和Height，分別改成800和600，如圖中所示。(07.jpg)

9.       firstButton仍然佔據整個畫面，我們將它縮小，並加上其他的元件。在Objects and Timeline欄目中選擇firstButton，如之前[UserControl] 一樣，會在Properties中看到相應元件的設定，firstButton的Width和Height的預設值為Auto，將它們改成100和50，並在Text中將字體大少由40改成16。以及在Common Properties中將Content的值改成Red。(08.jpg)

10.   現在我們畫上一個新的Button，在最左側的工具欄中，選取Button。(09.jpg) 並在Page.xaml上畫上。同樣在Objects and Timeline中選擇剛畫上的Button，在Properties中的Name裡，給它起一個名字，叫作secondButton，將Width和Height改成100和50，最後在Common Properties中將Content的值改成Blue，同樣將字體大少改成16。

11.   在工具欄中選擇Rectangle，在畫面中畫一個長方形，並同樣在它的Properties中，給他起一個名字，叫作Rect，在Properties中的顏色版中，隨意給長方形上一個顏色。(10.jpg)

12.   我們就用兩個不同的按扭，改變正方形的顏色。Silverlight和以前的Windows Form程式一樣，都是事件驅動(Event Driven)的，這次我們就在每一次按動Button的時候，改變長方形的顏免，所以我們要為每個按扭寫上處現這個行動的方法(method) 。選擇firstButton，在Properties中，按下Name的旁邊一個如閃電的按扭Events。(11.jpg)

13.   Properties會變成圖中所示般 (12.jpg)

所顯示的是Button中可能出現的事件，我們需要處理Click這個事件，所以在Click的欄中雙擊，Blend會自動打開Visual Studio，並開啟一個method，等待加入代碼。我們要令Rect變成紅色，所以在private void firstButton_Click(object sender, RoutedEventArgs e) 中要加入以下C#代碼：

Rect.Fill = new SolidColorBrush(Colors.Red);

14.   而secondButton的步驟和以上一樣，只是在private void secondButton_Click(object sender, RoutedEventArgs e) 中加入以下代碼：

Rect.Fill = new SolidColorBrush(Colors.Blue);

15.   最後在Visual Studio，在工具欄上按Build -> Build OurFirstSilverlightProject，並和步驟5一樣，右擊OurFirstSilverligthProjectTestPage.html，選擇View in Browser，完成後會如圖中所示。(13.jpg)

Silverlight 與 Moonlight

Silverlight與Moonlight有著密切的關係，Moonlight是Silverlight的Linux版本，Moonlight讓Silverlight的程式可以在Linux上運行，同時也提供Linux的SDK來開發Silverlight程式，換句話說，開發者除了可在Windows上編譯和執行Silverlight程式外，同樣可在Linux上完成同樣的工作。(14.png)

而Moonlight是基於一個開源的計劃— Mono，由Novell支助，將.net framework移值至Linux平台，讓.net的程式可以誇平台至Linux上編譯(Compile) 和執行。Mono的主要元件包括C# Compile、Mono Runtime、Base Class Library和Mono Class Library，Base Class Library是由微軟提供予Mono的開發團隊，所以基本的功能與在Windows上開發無異，但Linux和Windows不境是兩個不同的操作系統，某些功能不能完全移植，例如圖象介面(GUI) ，因為Linux和Windows是基於完全不同的圖象介面系統。雖然Mono暫時只支持C#，但卻繼承許多.net framework的長處，例如automatic memory management、garbage collection、generics和threading。(15.png)

至於Moonlight，正式版已隨著Silverlight 1.0發佈，而現在Moonlight對Silverlight 2.0的支持就處於Alpha階段，亦和現在的Silverlight 2.0 beta 2一樣，支持最新的C# 3.0開發語言，相信在Silverlight 2.0在今年後期正式發佈後，Moonlight亦會緊隨其後更新，讓Silverlight的程式在不同的平台上運行。

總結

Silverlight可說是近期互聯網上的一個新勢力，有不少絢麗的網上應用也利用Silverlight開發。而hardrock.com上的一個應用，可說是一個很好的例子，讀者可以登上http://memorabilia.hardrock.com/。這是利用Silverlight 2.0上的一個新的功能— Deep Zoom來製作。筆者在未來數期會繼續向大家介紹Silverlight的開發，包括Deep Zoom，敬請大家密切留意！

It is my first post here. Well, why I open a blog here? Some friends told me here is more convenient than live.com Space. Originally I was using Space in live.com, but it too messy for me.

My first impression here is not bad, more clear and concise than previous one that I used. So, I will post something I know here regularly. (Hopefully I can.) I am a Microsoft’s Fans, especially diving in developing Silverlight apps and games in Xbox by XNA Framework!

As a computer science student, I don’t like to deal with data structures, algorithms and discrete maths everyday. I knows they are very and really important. I spend most of my time in dealing with them, but I want something interesting and fun as well. Also, I hopes the folks like me, as a student in computing, spend some times to play the cutting edge technologies. You will definitely benefit from it.

Good luck!