公告資訊

未經授權,禁止轉載網站文章與內容。如有需要可以跟我聯絡,謝謝!!




2008年12月29日 星期一

.NET Framrwork Configuration Tool 何處尋 ?

剛剛慧真問了我一個問題:只安裝VS 2008 (.NET Framework 3.5)的開發環境,要從哪裡啟動.NET Framework組態設定工具呢?

找了半天,在MSDN的說明文件中,寫著下面一段話:

"在 .NET Framework 2.0 (含) 以後版本中,Mscorcfg.msc 是隨 .NET Framework 2.0 軟體開發套件 (SDK) 而安裝的"

所以如果在只安裝VS 2008的開發環境中,要使用.NET組態設定工具的話,請另外下載並安裝.NET Framework 2.0 SDK吧!!

2008年10月3日 星期五

Silverlight 2.0線上講堂 - 22:在Silverlight 2.0應用程式中存取JavaScript

剛剛休假回來,就有一堆的朋友發Email或是留言給我,希望我在Silverlight 2.0 線上講堂中可以提供更多的課程內容。當然,時間上允許的話,我會盡快的把計畫好的課程內容放上去,同時也謝謝這麼多的朋友一起參與線上講堂的學習。接下來的兩堂課中,我將為各位介紹如何讓Silverlight 2.0的應用程式可以和網頁中的HTML與JavaScript互動。

首先,假設我們已經使用Silverlight 2.0 技術完成了下面的橫幅廣告:

現在希望當使用者點選廣告圖片時,可以超連結到廣告商的網站,應該要怎樣做呢?

1. 首先,使用VS 2008開啟Silverlight 2.0 應用程式專案(你可以使用前面做過的例子,或是新增一個Silverlight 2.0 應用程式,裡面放上一張圖片當作廣告)。

2. 在要觸發JavaScript的XAML標籤上,加入MouseLeftButtonUp事件的處理常式,並按下滑鼠右鍵,選取[巡覽至事件處理常式]。

快照1 

 

在Silverlight 2.0 的基本類別函式庫中,定義了一個System.Windows.Browser的命名空間,裡面包含了幾個重要的物件類別:

  • HtmlPage:表示目前裝載Silverlight 2.0 控制項的網頁。
  • HtmlWindow:表示網頁中的Window物件。
  • HtmlDocument:表示網頁中的Document物件。

   只需要透過這些物件,我們就可以從Silverlight 2.0 的控制項中存取網頁中的Html控制項內容,或是執行JavaScript!

3. 首先,在XAML程式原始檔的最前面,加上引用System.Windows.Browser命名空間的宣告:

using System.Windows.Browser;

4. 當使用者點選圖片之後,我們希望可以將網頁超連結到廣告商的網址。因此先取得網頁中的Window物件:

HtmlWindow window = HtmlPage.Window;

HtmlWindow物件提供了Navigate方法,你只需要將網址封裝成Uri物件帶進去執行即可:

window.Navigate(new Uri("http://www.silverlight.idv.tw"),

     "_blank");

若是要觸發網頁中的JavaScript函式的話,也可以直接透過HtmlWindow物件所提供的Invoke方法,再依序輸入JavaScript的函式名稱及參數值即可。

5. 若是要動態的搭配DOM控制網頁中的Html控制項的話,你就必須要先取得網頁中的Document物件:

HtmlDocument doc = HtmlPage.Document;

再透過GetElementById或是GetElementByTagName方法,你就可以在Silverlight 2.0 的程式中控制裝載SIlverlight 2.0 控制項的網頁內容了!! 例如下面的程式碼可以將網頁的背景色設為粉紅色,3秒之後再調整回來:

HtmlDocument doc = HtmlPage.Document;
object data = doc.GetProperty("bgColor");
doc.SetProperty("bgColor", "pink");
System.Threading.Thread.Sleep(3000);
doc.SetProperty("bgColor", data.ToString());

這次的課程完成的效果如下(點選圖片開啟連結):

2008年10月1日 星期三

伯朗藍山咖啡,掰掰......

前幾天,金車公司打著"全系列食品衛生署檢驗合格"的廣告,讓我以為真的可以放心喝我喜歡的伯朗藍山咖啡了。但是當我看到他們的檢驗報告之後,我決定再也不喝了......

目前所謂的檢驗報告,可以分為兩種:

1. "財團法人"食品工業研究所的報告(如金車食品1金車食品2、克寧奶粉(及所有雀巢食品)):以HPLC-UV方式檢驗,最低檢驗極限2.0ppm。

2. SGS等其他民間公正檢驗單位報告(如西雅圖咖啡、摩卡咖啡):以LC/MS/MS方式檢驗,最低檢驗極限0.05ppm。

或許你會覺得,都已經是ppm(mg/Kg)了,0.05ppm跟2.0ppm應該是沒有差吧 ! 舉兩個例子給你參考:

1. 以我最愛喝的伯朗藍山咖啡為例,一罐是250ml,一天我可以喝3~4罐。若是以食工所的檢驗報告而言,4罐的伯朗藍山咖啡裡面最多包含2mg的三聚氰胺;而通過SGS的西雅圖咖啡1000ml最多只含0.05mg的三聚氰胺。不管人體每日容許值是多少,健康無價,原本就不應該出現在咖啡的東西,每天加2mg給你吃,你安心嗎?

2. 其實衛生署放寬標準,最可惡的就是圖利財團。以奶粉為例,若是你是廠商,"不小心"進了一公斤含2.5ppm三聚氰胺的毒奶粉,請問你會怎樣做?

    a. 若是要通過食工所的檢驗,只需要每公斤毒奶粉滲入250g以上的沒有毒奶粉稀釋,

         2.5mg / 1.25 Kg = 2 ppm

         就可以重新包裝上架上去賣。

    b. 若是要通過SGS檢驗,就必須每公斤毒奶粉滲入50Kg以上的沒有毒奶粉稀釋,

         2.5mg / 50 Kg = 0.05 ppm

         才可以重新上架去賣,但是這樣成本很高。

而我們偉大九劉政府的衛生署,只要廠商通過食工所的檢驗(2.0ppm),就可以在電視上大言不慚的說通過檢驗,並且重新上架販售 -- 換句話說,就是鼓勵廠商採用 a.的解決方案 -- 犧牲國人健康,圖利廠商解套。

因此,不要再相信 "衛生署檢驗合格" 的東西就可以吃的鬼話了 ! 要買乳製品之前,請先看清楚廠商的檢驗報告 -- 若是"財團法人"食品工業研究所檢驗通過的產品,我建議你還是不要買的好。所以為了我的健康,

伯朗藍山咖啡,掰掰了.....

克寧奶粉,掰掰了..... 

雀巢咖啡,掰掰了.....      

2008年9月20日 星期六

Silverlight 2.0 線上講堂通知(09/20)

原本計畫要在這一個月多寫一些內容的,但因為我在恆逸資訊有很多課,加上異位性皮膚炎發作要多休息,所以最近就沒有很多時間可以維護線上講堂的內容。謝謝很多朋友透過線上以及Email來關心線上講堂的進度,你們的問題我也都會盡快回覆給各位。

在這裡先通知各位線上講堂的同學,下個星期(9/21~~9/26)我休假去了,所以無法在線上回答各位的問題,同時線上講堂也休息一星期。如果你有任何的問題,仍然還是可以透過Email跟我聯絡(john_chang@uuu.com.tw),我會在回國之後盡快回覆的,謝謝。

2008年9月19日 星期五

Microsoft Online Services

你對於建置系統這檔子事累了嗎 ?

為了實現軟體即服務(SaaS),微軟現在提供了許多的線上軟體服務 -- Microsoft Online Services,讓中小企業的 IT 人員,可以花最少的時間與建置成本,就可以直接線上使用微軟的產品,建置企業所需要的解決方案。這些線上產品包括了:

  • Office Live Meeting
  • Exchange Hosted Service
  • Exchange Online
  • Sharepoint Online
  • Office Comminications Online
  • Dynamics CRM Online

透過這些線上的產品,將來中小企業的 IT 人員就不需要在公司中安裝跟維護這一些產品,相對的也可以節省更多的建置成本 !

除此之外,SQL Server目前也提供了免費線上存取的資料服務 -- SQL Server Data Service (SSDS),讓MIS人員可以將程式中的資料,直接存放在微軟所提供的線上資料庫當中。換句話說,對於中小企業而言,將來只需要購買SDSS的服務,就不需要再去採買、維護SQL Server資料庫所需要的伺服器 ! 而目前SDSS提供了免費註冊使用的Beta 版,想要使用微軟雲端運算架構建置系統的開發人員,不妨去試用看看!!

而在不久的將來,微軟的產品BizTalk Server、Windows 作業系統等,也都會可以透過這種方式使用;對於系統操作、管理、開發方式等,微軟的雲端運算的SaaS架構都會帶來重大的改變 !

問題與回應(09/19)

1.

不好意思~我是一個想自學Silverlight的學生,我想請問一下八月那篇的講堂14的最後小練習:

3. 接下來,將 MyCarouselWeb測試專案當中的HTML測試網頁開啟。
開啟後將網頁中的<object> ... ...</object>標籤範圍中的內容,
複製到TimeSampleWeb網站的測試網頁的HTML內容中。

問題是:我把<object>標籤的內容全部貼到TimeSampleWeb html的<object>裡面

不過跑出來還是只有TimeSample的效果而已
我也把MyCarousel的XAP檔加到ClientBin裡面了
是否貼的位置不對呢?

這是我MyCarousel的object標籤內容

<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">

<param name="source" value="ClientBin/MyCarousel.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>

這是我TimeSample的object的標籤內容

<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">

<param name="source" value="ClientBin/TimerSample.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>

後來我發現這兩個標籤檔的內容幾乎一樣~所以我把<param name="source" value="ClientBin/TimerSample.xap"/>的TimerSample.xap改成MyCarousel.xap
沒想到還是跑出TimerSample的效果= =

==>

這問題發生的主要原因,就是因為在VS 2008專案預設建立的測試頁中,會將Silverlight的控制項的width與height屬性預設都設為100%,因此你只需要將網頁中的兩個<object>標籤的width跟height屬性調整成Silverlight表單的大小即可。

順便記住下面的這一個小技巧:

將Silverlight 2.0 表單嵌入網頁中使用時,記得根據網頁顯示需要,調整Silverlight控制項的width與height屬性 !

2008年9月11日 星期四

瀏覽器之戰? 你錯了....

9/3 號,Google發表了Chrome瀏覽器測試版以來,很多人以為以後將會是Google瀏覽器對抗IE的時代,但是事實是這樣的嗎?

如果你有安裝Chrome瀏覽器,你會發現到主要的功能其實跟Firefox差不多(目前為止)。根據Google的說法,未來Chrome瀏覽器將採開放式的架構,針對用戶端提供更穩定、快速的瀏覽效果。但我覺得更重要的是,在Google瀏覽器當中,提供了一個新的JavaScript Engine-- V8。

關於V8,你可以參考Google V8 JavaScript Engine的說明。簡單的說,這一個新的JavaScript Engine最主要的特點,包括:

1. 更快,你可以參考Benchmarks的資訊

2. 可將JavaScript編譯成機器碼執行

"There are no intermediate byte codes, no interpreter.",

"This greatly improves the speed at which most JavaScript code can be executed."。

3. 更有效率的資源回收機制(Garbage Collection)。

注意到重點了嗎? 很多人都將Google推出瀏覽器的重點擺在跟IE比較功能與穩定性,但這有啥好比較 ? 目前IE 8還沒有正式推出,唯一有新功能的瀏覽器是Firefox 3.0,要比也是先跟Firefox比,IE 有啥可以比的?

Google瀏覽器推出的真正的意義,應該是Google宣示要開始在用戶端程式環境的部分,正式開始跟微軟一別苗頭了! 長久以來,Google致力於開發與提供網路服務平台;而用戶端的環境,則是一直由微軟所掌控(參考Windows作業系統的市占率)。但是隨著網際網路開發技術的發展,"作業系統" 的作用,慢慢的簡化成為開機用的程式而已。換句話說,在Browser + Web Service(SaaS)的架構發展完成之後,用戶端程式開發的重點,就變成要使用哪一種 "技術" 來建立使用者操作介面與用戶端的功能

若是你使用過Chrome瀏覽器瀏覽www.silverlight.idv.tw,你會發現SIlverlight 2.0的應用程式沒有辦法正常的執行。換句話說,雖然Chrome是使用公版(開放原始碼計畫Webkit)下去發展的,但是實作的部分卻不一樣。所以未來微軟若是要將Silverlight 2.0 術推廣到Goole瀏覽器上面的話,勢必要再推出一個新的Silverlight安裝套件的版本。然而,微軟會為每一種瀏覽器,都提供Silverlight的安裝套件嗎?

這問題我就暫時不回答了,但是從V8的JavaScript引擎的架構來說,從編譯成機器碼到提供資源回收器這些特性來說,都和Silverlight 2.0執行環境目標差不多 -- 換句話說,Google推出瀏覽器,真正的意義,應該是要在用戶端環境透過JacaScript技術和Silverlight宣戰! 兩者之間目前的差異:

1. Silverlight 2.0 提供了比較方便的開發、設計環境。

2. JavaScript提供了跨不同瀏覽器平台,用戶端不需要安裝額外套件就可以執行的能力。

若是從本質上看來,就類似從前的JavaScript技術與Activex Control技術的對抗 -- 只是這次JavaScript技術有Google加持,Silverlight有.NET做後盾,那一種技術會成為主流,我想未來的半年,會是一個關鍵。不過微軟這次兩邊都押寶(ASP.NET AJAX、Silverlight 2.0),因此了不起最多輸一半,也不至於會在用戶端的開發技術中出局就是了.....

2008年9月9日 星期二

問題與回應(09/09)

Brian來信問了一些問題,也有人問過類似的問題,所以統一回應一下:

1.

當我初始化一個控制項後,我可以對控制項作move嗎? (所有的控制項都這樣嗎?)

我舉一個例子, 假如我有個textbox, 當我page load 時 已經出現在page中,

如果我想讓滑鼠拖曳著textbox可以在page上動,請問做得到嗎,我有自己試過,但是不像image, rectangle...那麼好處理

==>

要開發拖曳的功能其實一點都不難,只要透過滑鼠事件處理一下就可以了:

下次線上講堂再插入一堂課來教各位好了,不過程式碼很簡單,你可以參考SDK自己先開發看看。我在My Windows Desktop專案中把這功能做到元件當中,你可以下載這一個組件:

然後加入參考到Silverlight專案當中,在Page的建構子中將需要支援拖曳的控制項加入Canvas控制項,然後將控制項名稱傳入RegisterDragDrop方法中:

public Page()
{
    InitializeComponent();
    MyExtenders.MyWindows.RegisterDragDrop(txtName);
}

這樣就可以了。

(不過這一個組件還在開發中,因此暫時提供給各位的是還沒有final的版本)

2.

有沒有教學的網站或是sample 是在教如何customize 控制項的 另外自訂的控制項如何讓silverlight 參考到

(是當成silverlight的resource嗎)

==>

自訂控制項的部分,線上講堂後面會安排課程介紹;另外,你也可以參考Silverlight 2.0 SDK,裡面也有介紹作法。。不過在你要自訂控制項之前,可以先思考一下:

"我要擴充的是功能,還是操作介面 ?"

"真的有需要重複使用嗎 ?"

"自訂控制項對效能有多大的影響 ?"

如果你只是要使用Silverlight 2.0 開發一些有動態效果的Banner,我建議你一般不需要自訂控制項--除非你是要發展Rich Client的應用程式或是要賣Silverlight 2.0擴充元件。

3.

上禮拜麻煩你做一個textbox sample, 當我滑鼠沒按到textbox 時 textbox是沒有邊框的

當我按到textbox時 textbox 邊框是虛線 ,如果來得及的話,可以教一下我 我還是沒辦法從blend2 to silverlight project做出來

==>

請參考Silverlight 2 線上講堂 -21:淺談控制項外觀效果,謝謝。

Silverlight 2 線上講堂 -21:淺談控制項外觀效果

上個星期有位Brian朋友在線上問我,如何在使用者滑鼠移到TextBox控制項的時候,在TextBox控制項的外面顯示虛線的框線,提示使用者輸入資料。Brian說,想用繼承的方式建立一個自訂的TextBox控制項,然後再去客製化外觀。我一聽,天啊! 千萬不要有這樣的想法!! 趕緊先加了一堂課來為各位說明一下外觀的控制技巧。

在建立Silverlight 2.0應用程式外觀的時候,各位千萬要記住一句話,那就是:

"外觀要用設計師(Designer)的想法來思考!!"

不要動不動就想到元件,想到繼承,然後把簡單的事情給複雜化。如果是物件導向跟繼承、override就可以解決的事,交給VS 2008就好了,要Expression Blend做啥?

要做出Brian想要的效果,其實很簡單,讓我們來看看技巧在哪:

1. 首先,我們要先用一些設計工具"畫"出虛線的外框,開啟小畫家。

2. 你沒聽錯,就是Windows內建的--"小畫家"。

3. 將畫布調整成適當的大小(大約比TextBox控制項大一點),然後選取填入色彩按鈕( 快照2 ),再從色盤中選取黑色,再點選畫布,將畫布填滿黑色:

快照1

4. 選取圓角矩形按鈕( 快照3 ),在下方選取粗一點的框線,然後從色盤中選取你喜歡的顏色,最後在畫布中建立矩形區域:

快照4

5. 接下來選取粉刷工具( 快照6 ),然後選取矩形的筆觸,然後從色盤中選取黑色:

快照5

6. 接著,在畫布上的矩形上,每隔一段間隔圖上黑色,虛線的框線就完成了:

快照7

7. 將這一個圖檔存成View.jpg。然後使用VS 2008新增一個Silverlight應用程式專案,取名為MyTextBox。

8. 使用Expression Blend 2.5設計工具開啟MyTextBox專案,將<UserControl>標籤中的子元素(預設是Grid)換成Canvas,並且將大小設為400x100,底色為黑色。

9. 在[Project]視窗中選取MyTextBox專案,按下滑鼠右鍵選取[Add Existing Item...],將View.jpg加入專案當中。

10. 將View.jpg從[Project]視窗中拖曳到畫布上,此時Blend設計工具會自動建立Image控制項。調整Image控制項到適當大小,然後到[Properties]視窗中設定Image控制項的Name屬性值為imgBorder:

快照8

11. 將TextBox控制項加入表單中,放置在Image控制項的框線範圍中,調整成適當大小(可以透過View-->Zoom in幫忙)。然後到[Properties]視窗中設定Image控制項的Name屬性值為txtName,並清除Content屬性的內容。完成的結果如下:

快照10

12. 接下來,選取imgBorder控制項,在[Properties]視窗中設定[Appearance]的Visibility屬性值為Collapsed,隱藏imgBorder控制項。

13. 完成之後,選取[File]-->[Save All],存檔並關閉Expression Blend設計工具。

   ----------------  操作介面設計完成  -------------------

14. 使用VS 2008開發工具開啟MyTextBox專案中的Page.xaml,在TextBox控制項元素中設定MouseEnter事件對應的處理常式,然後按下滑鼠右鍵選取[巡覽置事件處理常式]:

快照11

快照12

15. 在txtName_MouseEnter事件處理常式中,加入顯示imgBorder控制項的程式碼如下:

private void txtName_MouseEnter(object sender, MouseEventArgs e)
{
    imgBorder.Visibility = Visibility.Visible;
}

16. 重複步驟14,建立MouseLeave事件的事件處理常式txtName_MouseLeave。在txtName_MouseLeave事件處理常式中,加入隱藏imgBorder控制項的程式碼如下:

private void txtName_MouseLeave(object sender, MouseEventArgs e)
{
    imgBorder.Visibility = Visibility.Collapsed;
}

17. 完成之後建置專案,然後執行測試網頁。完成的效果如下:

稍微修改一下,又可以有不一樣的效果。例如,讓使用者按下框線矩形區域,才可以輸入資料:

很簡單,不是嗎 ? 不要再去想啥控制項繼承、自訂控制項之類的動作,記住下面的這句話:

"外觀要用設計師(Designer)的想法來思考!!"

你就不會被一些錯誤的觀念,誤導到錯誤的方向,走進死胡同!

2008年9月8日 星期一

問題與回應(09/07)

1.

請問我在XXX講師網站中,看到有介紹可以開發支援輸入密碼的TextBox控制項,但是我按照步驟做出來卻有很多的問題。在您的範例網站首頁中,我看到老師有開發登入表單的功能,請問一下老師是不是有更好的解決方式?

==>

其實在My Windows Desktop專案中,已經做好登入表單的功能--當然也包含可以輸入密碼的TextBox控制項。要製作可以輸入密碼的TextBox控制項程式碼並不難,但是有一些需要注意的"眉角"。如果你是照著他所提供的範例做不出來的話,可能要請你去問XXX講師,看看他是操作步驟寫錯,還是copy了別人網站不完整的範例。

陸陸續續也有很多朋友問我關於控制項客製化的問題,先給大家一個觀念:Silverlight應用程式中,UI的問題不是靠物件導向解決的,千萬不要把問題複雜化。

我的可以輸入密碼的TextBox控制項中還有一些小bug,不過大致上完成的差不多了,有興趣可以先試一下這一個例子:

至於程式碼的部分,會再安排在後面的講堂課程中介紹。

2008年9月5日 星期五

Silverlight 2 線上講堂 -20:使用OpenFileDialog開啟用戶端檔案

在Silverlight 2.0的執行環境當中,除了提供使用者操作介面的動態效果之外,也提供了部分存取用戶端資源的方式,像是可以透過OpenFileDialog開啟用戶端的檔案,以及使用IsolatedStorage暫存區等等。

然而在使用上必須要注意的觀念是:雖然Silverlight 2.0相對於DHTML技術而言,可以算是Rich Client的技術,但是仍然是執行在瀏覽器中的程式,因此無論是在安全性或是存取用戶端資源的動作來說,都受到瀏覽器框架設定的限制。若是你要開發的是可以完整存取用戶端資源的真正Rich Client的程式的話,請使用WPF或是傳統的Windows Form的技術。

接下來的線上講堂,我們將透過前面學過的分散式架構開發技巧,開發可以將用戶端檔案上傳到伺服器端的程式。首先我們先學習使用OpenFileDialog物件,顯示"開啟舊檔"對話方塊的技巧。

1. 使用VS 2008新增一個Silverlight應用程式專案,取名為OpenFileSample。

2. 使用Expression Blend 2.5設計工具開啟OpenFileSample專案,將<UserControl>標籤中的子元素(預設是Grid)換成Canvas,並且將大小設為800x600,底色為黑色。設定完成的XAML組態如下(紅色為調整過的設定):

<UserControl x:Class="OpenFileSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800" Height="600">
    <Canvas x:Name="LayoutRoot" Background="Black">

    </Canvas>
</UserControl>

3. 從Expression Blend 2.5設計工具列中,加入一個按鈕到Canvas控制項中。然後在[Properties]-[Layout]視窗中,將Width屬性值設為400,Height屬性值設為40,Left屬性值設為200,Top屬性值設為40:

快照1

4. 接著,在[Properties]--[Common Properties]視窗中,將Content屬性值設為"開啟文字檔/圖檔";然後在[Text]視窗中,將字型大小設為16:

快照2

5. 將來我們希望可以透過這一個Silverlight表單顯示文字檔或是圖檔的內容,你有兩種選擇:

    a. 先將顯示資料的控制項置入表單當中,再透過Visibility屬性控制顯示的時機。

    b. 當程式執行時再動態的建立控制項,加入Canvas當中顯示。

   若是你有搭配使用者操作介面設計師一起工作,或是沒有其他的動態改變顯示介面需求的話,建議你選擇 a.,因為比較容易控制項顯示的操作介面,同時須要維護的程式碼比較少;若是你有需要像Silverlight 2.0 - My Windows Desktop一樣有很多需要結合程式的動態頁面效果的話,那我才建議你採用 b.的方式。在這一個練習當中我們先教大家 a.的做法,後面進階一點的課程再來教大家。

6. 從工具箱中選取TextBox控制項,然後置放在Canvas控制項上:

快照3

   在[Properties]視窗中將TextBox控制項名稱設為txtData;然後在[Properties]--[Layout]視窗中,將Width屬性值設為600,Height屬性值設為420,Left屬性值設為100,Top屬性值設為130。最後在[Properties]--[Common Properties]視窗中,清除Text屬性值。

7. 完成之後,在[Objects and Timeline]視窗中選取Hide/Show按鈕,在設計工具中隱藏TextBox控制項,以免影像到後面的動作:

快照4

8. 選取工具列中的Assert Library按鈕,開啟[Assert Library]視窗:

快照5

選取[Assert Library]視窗右上角的Show All核選方塊,然後選取Image控制項,加入Silverlight表單的Canvas控制項中:

快照6

9. 在[Properties]視窗中將Image控制項名稱設為imgData;然後在[Properties]--[Layout]視窗中,將Width屬性值設為600,Height屬性值設為420,Left屬性值設為100,Top屬性值設為130。

10. 完成之後,選取[File]-->[Save All],存檔並關閉Expression Blend設計工具。

   ----------------  操作介面設計完成  -------------------

11. 使用VS 2008開發工具開啟Page.xaml,在Button控制項元素中設定Click事件對應的處理常式,然後按下滑鼠右鍵選取[巡覽置事件處理常式]:

快照7

快照8

12. 接下來,我們要在Button控制項的Click事件處理常式(Button_Click)中,加入顯示開啟舊檔對話方塊的程式碼。如果你有在Windows Form當中使用OpenFileDialog控制項的經驗的話,那你將會覺得相當的得心應手。

在Silverlight 2.0應用程式中,OpenFileDialog是定義System.Windows.Controls命名空間中的類別,提供了下面的屬性成員:

Filter 篩選要顯示的檔案類型
FilterIndex 預設篩選的檔案類型
Multiselect 是否允許多選
SelectedFile 使用者選取的檔案
SelectedFiles 允許多選時,使用者所有選取的檔案

設定好之後,只需要呼叫ShowDialog方法,就可以顯示對話方塊了!

13. 再加入更多程式之前,首先先在Page.Xaml.cs程式檔最前面宣告引用下面的命名空間:

using System.IO;
using System.Windows.Media.Imaging;

14. 接下來,在程式碼中建立下面的副程式,根據輸入的檔案類型,開啟檔案並透過TextBox控制項或是Image控制項顯示檔案內容:

private void ShowData(FileDialogFileInfo file)
{
    if (file.Name.EndsWith(".txt")) {
        using (StreamReader reader
            = file.OpenText()) {
                txtData.Text = reader.ReadToEnd();
                reader.Close();
                txtData.Visibility = Visibility.Visible;
                imgData.Visibility = Visibility.Collapsed;
                return;
        }
    }

    if (file.Name.EndsWith(".jpg")) {
        using (Stream data = file.OpenRead()) {
            BitmapImage image = new BitmapImage();
            image.SetSource(data);
            imgData.Source = image;
            imgData.Visibility = Visibility.Visible;
            txtData.Visibility = Visibility.Collapsed;
            return;  
        }
    }

}

其中,輸入參數FileDialogFileInfo的用途主要是用來接收使用者在OpenFileDialog物件中所選取的檔案資訊用的。

15. 接下來,在Button_Click事件處理常式中加入開啟對話方塊的程式碼。首先建立OpenFileDialog物件實體,然後透過Filter屬性設定所要篩選的檔案類型。Filter屬性值必須要設為下面格式的字串:

"檔案類型說明文字|篩選條件"

完成設定之後,再呼叫ShowDialog方法顯示[開啟舊檔]對話方塊。若是使用者有選取檔案,則ShowDialog方法會回傳true,此時再將使用者所選取的檔案資訊透過ShowData方法顯示即可。完成的程式碼如下:

private void Button_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog1 = new OpenFileDialog();
    openFileDialog1.Filter = "Text Files (*.txt)|*.txt|JPEG Files (*.jpg)|*.jpg;
    openFileDialog1.FilterIndex = 1;
    openFileDialog1.Multiselect = false;

    if (openFileDialog1.ShowDialog() == true)
    {
        ShowData(openFileDialog1.SelectedFile);
    }
}

16. 最後,在Page初始化完成之後,加入程式碼將TextBox控制項與Image控制項的Visibility屬性值設為隱藏(Collapsed),程式碼如下:

public Page()
{
    InitializeComponent();

    txtData.Visibility = Visibility.Collapsed;
    imgData.Visibility = Visibility.Collapsed;

}

17. 完成之後建置專案,然後執行測試網頁,就可以透過Silverlight 2.0的表單,開啟並顯示用戶端的文字檔或是圖檔內容了! 下面是完成的結果:

 

但是就像一開始跟各位介紹的一樣,雖然我們可以在Silverlight 2.0應用程式當中開啟用戶端的檔案內容,但是因為瀏覽器框架本身執行環境上的限制,在預設狀況之下我們是無法透過Silverlight 2.0應用程式將檔案再回存到用戶端的檔案系統中。不過這沒有關係,因為這一個表單的主要用途,並不是開啟用戶端的檔案;在雲端運算的分散式架構下,使用者的檔案資料是存放在Server上的! 因此將來擴充這一個表單的功能,就可以提供使用者上載、新增、修改、儲存Server端檔案資料的介面,而在用戶端並不需要安裝額外的軟體! 我想,這才是SIlverlight 2.0表單迷人的地方。

2008年9月3日 星期三

Google的瀏覽器

連Google都已經加緊腳步推出瀏覽器,看來雲端運算的地盤爭奪戰已經開始了.....

瀏覽Google瀏覽器的特點

點選這裡下載Google瀏覽器(Chrome)Beta

2008年8月29日 星期五

Silverlight 2 線上講堂通知(08/29)

接下來的課程,隨著我手上的專案與範例的進行,有些已經寫好了,也有些已經寫的差不多了,下個星期開始會陸續刊載:

Silverlight 2 線上講堂 - 20:使用OpenFileDialog 開啟用戶端檔案

Silverlight 2 線上講堂 - 21:開發檔案上載服務

Silverlight 2 線上講堂 - 22:簡單ListBox資料繫結

Silverlight 2 線上講堂 - 23:ListBox Template與資料繫結

Silverlight 2 線上講堂 - 24:開發記事本工具(操作介面)

Silverlight 2 線上講堂 - 25:開發記事本工具(程式)

Silverlight 2 線上講堂 - 26:Silverlight 2 應用程式開發觀念(3)

Silverlight 2 線上講堂 - 27:效能最佳化 -- 隨選下載組件

Silverlight 2 線上講堂 - 28:與JavaScript共舞(1)

Silverlight 2 線上講堂 - 29:與JavaScript共舞(2)

Silverlight 2 線上講堂 - 30:動態切換介面與定位技巧(1)

Silverlight 2 線上講堂 - 31:動態切換介面與定位技巧(2)

Silverlight 2 線上講堂 - 32:與ASP.NET整合(1)

其他的主題會在適當的時機再擇期公布................

謝謝大家!

2008年8月28日 星期四

在轉與不轉之間......

記得當年DHTML剛出來的時候,跑馬燈、跟著滑鼠跑的彩色文字等效果曾經興盛一時。當年的網頁常常見到五顏六色、動態切換、旋轉的文字及圖片效果,看得讓人頭昏眼花、眼花撩亂......

但是慢慢的,大家就發現了很多的效果其實是不需要的--於是DHTML從絢爛歸於平實,恢復到目前單純的狀態(有多少網頁還要跑馬燈的效果???) -- 與伺服器端的程式整合,隨著操作狀態做適當的反應。

一樣的過程,現在正反應在所謂的"RIA"的技術當中。由於Flash技術稱霸用戶端的動態效果技術已經行之有年了,因此當微軟的Silverlight技術推出之後,很多人很自然的就會拿來和Flash技術做比較。但畢竟微軟是作開發工具起家的,雖然Silverlight提供了許多和Flash一樣的動態效果的支援,無奈提供給設計人員使用的Expression Blend設計工具,目前看來就是稍微遜色一些(我是說"目前",別忘了Flash已經出來多久了......)。

但是相對的,我必須說,Silverlight 2.0 在提供給開發人員用的部分來講,功能就相當方便了!!  若是以開發人員的角度來看,無論是與伺服器端ASP.NET程式結合,或是呼叫用戶端的JavaScript,VS 2008開發工具都可以提供相當充分而且完整的支援 -- 甚至包含除錯的部分,通常這也是開發工具在分散式架構中最難支援的部分。

因此,在Silverlight 2.0 線上講堂中,我們是以開發人員的角度來看待Silverlight。更明確一點的角色分配如下:

  • 設計人員:

負責設計畫面(操作介面),以及設計Storyboard(時間軸)動作。

  • 開發人員:

負責開發與伺服器端服務結合的程式,以及撰寫事件觸發程序觸發Storyboard。

基於這一個出發點,因此當初在設計"Silverlight Desktop"(暫定名稱)時,曾經想過設計一個單純的桌面就好,因為還有很多功能等著完成(包含講堂中的課程內容,又有點拖稿了...)。不過一時手癢,又把文字旋轉的功能加了進去,免得大家覺太單調 -- 不過就像雞肋一樣,拿掉也不會覺得可惜。在此之前,其實有跟很多人討論過關於用戶端操作介面的想法,結論是除非你要設計的是一個遊戲的操作介面,要不然的話,過於豐富的使用者操作介面的內容,使用者不一定會接受(別忘了,用Flash設計的首頁下方,都會放一個"SKIP"按鈕 !!!)。

因此,在透過Silverlight 2.0設計使用者操作介面的動作時,也應該是在"適時"的時候,給予使用者適當的反應即可。依照這一個標準來看,Silverlight Desktop上的文字旋轉功能的確是多餘的,但是在我還沒有做完遊樂場的小遊戲之前,我想還是暫時讓它保持旋轉吧!!

2008年8月27日 星期三

Silverlight 2 線上講堂 - 19:Microsoft Silverlight Streaming Host

如果,你在開發Silverlight 2.0 線上講堂的練習的時候,除了使用Visual Studio 2008 檢視完成的結果之外,也想讓其他的朋友也可以在你的網頁上瀏覽你完成的成果的話,你可以將完成的Silverlight應用程式發布到微軟所提供的Microsoft Silverlight Streaming Host,然後在繫結到你的網頁中使用。操作步驟如下:

1. 開啟http://www.microsoft.com/silverlight/overview/streaming.aspx,然後點選[Get it free]按鈕。

快照1

2. 若是你有MSN live 帳號(Microsoft Passport)的話,這時候應該就會自動登入,並且建立關聯。接下來選取左邊選單中的[Manage Applications]選項:

快照2

然後選取[Upload an application] 按鈕。

快照3

3. 輸入一個128字元以內的應用程式名稱之後,然後按下[Create]按鈕:

快照5

4. 接下來,按下[瀏覽]按鈕,選取封裝Silverlight 2.0應用程式的XAP檔(必須小於105MB),然後按下[Upload]按鈕:

快照6

5. 接下來進行應用程式的設定。先按下[Create]按鈕:

快照7

接著,從組態設定表單中,設定將來Silverlight 2.0應用程式顯示的外觀,完成之後按下[Update]按鈕:

快照8

6. 接下來,就可以在網頁上看到開啟測試網頁的路徑:

快照9

以及在網頁下方也會出現嵌入網頁的連結:

快照10

7. 接下來,只需要將連結加入你的網頁或是Blog的設定當中,就可以嵌入Silverlight應用程式到網頁中了!

除了直接嵌入的方式之外,Silverlight Streaming Host也提供可以使用Live Control的方式將Silverlight應用程式嵌入網頁中使用,只需參考網頁中Method 2的設定步驟即可:

快照11

像是前面做過的圖片跑馬燈、圖片輪播器、網頁banner等以用戶端瀏覽器為主要執行環境的Silverlight應用程式,都可以使用這個方式上載到Silverlight Streaming Host之後嵌入到網頁中使用。

另外,這一個網站也提供每位使用者10GB的空間可以放影片的資料,上載的步驟如下:

1. 選取左邊的[Manage Videos]連結,然後按下[Upload a video]。

快照12

2. 然後確定你所要上載的是Silverlight技術所支援的影片格式(以WMV為主),選取核選方塊之後按下[Browse]按鈕選取影片路徑。輸入影片標題之後,按下[Upload]按鈕:

快照15

3. 接下來你會看到[Copy File]的視窗出現:

快照16

4. 經過一段時間的等待....影片上載完成之後,就可以透過Silverlight應用程式中的MediaElement來播放了!! 在影片的說明頁中,會提供直接將影片嵌入網頁中顯示,以及使用MediaElement控制項播放時所需要的連結資訊:

快照17

2008年8月26日 星期二

小寶的評語......

昨天利用一點時間,把Silverlight 2.0範例網站的首頁(http://www.silverlight.idv.tw)簡單的做了一下,因為真的是太多人看到IIS 7.0的首頁以為進到偽裝站台(我也不知為啥.....)。第一版大功告成之後,請我們家小寶來看了一下。Demo 完畢之後,她只淡淡的說了一句.......

"你們這些搞電腦的,美術都要再加強一下!"

"東西動來動去,看得我頭好暈......"

Orz

2008年8月25日 星期一

問題與回應(08/25)

經過了非常、非常忙的幾個星期之後,整理一下大家的問題回覆一下:

1.

首先感謝Rojar細心的又找出了一些Visual C# 2008精研講座書中的錯誤:

P.426. 表13-8的GetFileWithoutExtension的說明,應更正為"不包含檔名"。

(原錯字為"附")

P.441  第三行:"才可註冊公域組件" ==> 應更正為"才可註冊到全域組件中公用"。

   倒數第三行:"系統功能都定義在.NET平台中"

                ==> 應更正為:"系統功能都定義在.NET平台中"

P.515 "註冊到部資料交換服務中" ==> "加入部資料交換服務"

AddService 我想以後就稱為加入服務吧,雖然有時上課我會說成"註冊"。

P.520 操作步驟4,應為「加入」-->「欄位」。

P.522 操作步驟4,介面名稱應更正為 IHelloService (書中誤植為IHelloServive)。

P.537 操作步驟23,應更正為"右邊的條件分支"。

P.550 Employee屬性名稱應為EmpName;順便提醒要記得引用System.Runtime.Serialization命名空間!

P.618 執行範例程式前,請檢查一下connString連線字串的設定,與你的開發環境是否一致。

Rojar,如果你將來失業,我可以推薦你去做技術編輯了......

(但是V大人,我還是不能沒有你.......Orz)

2.

老師,請問一下為什麼我進到www.silverlight.idv.tw,看到的是IIS 7的首頁呢?

老師我覺得你的說明與例子都比之前聽過的那些研討會清楚的很多,請問一下你最近會開課或是講Silverlight的研討會嗎?

==>

www.Silverlight.idv.tw 的網站目前是用來放線上講堂的範例的網站,因為我最近很忙,所以暫時用IIS 7的預設頁面當做是首頁。另外,在這網站上,我有一個關於Silverlight 2.0的計畫正在開發當中,目前還不到公布的時機(不過也快了.....),等時機成熟各位就會知道了。暫時我會先做一個簡單的首頁把範例連結放上去,這樣看起來可能會好一些.....

至於開課的話,因為目前Silverlight 2.0才到Beta 2,因此暫時還是先以線上講堂的形式幫助大家了解這一個新技術。Silverlight 2.0線上講堂的內容主要是針對開發人員做規劃的,因此和你去聽以介紹動畫效果的為主要內容的研討會,應該方向會不太一樣,所以你才會有這樣的感覺。如果你是想開發出像廣告banner般動畫效果的設計人員,你把Silverlight 2 講堂前幾堂課的基本操作學會,再去聽聽研討會或是WebCast應該就夠了;但若是你是要結合Silverlight 2.0技術開發分散式架構應用程式的話,那我建議你可以跟著線上講堂的進度操作練習,等到Silverlight 2.0正式推出之後,你可以馬上上手了。

至於研討會的部分,我想因為我的行程很滿,所以可能就要跟上次說的一樣,需要透過LiveMeeting的方式,在晚上有空的時間再來跟各位交流。第一次會在九月初舉辦,確定的時間會公布在Silverlight 2.0網站和blog的公告區,敬請期待......

3.

請問老師ASP.NET、AJAX、跟Silverlight有沒有推薦的中文書?

==>

除了上課需要的指定教材之外,我是幾乎沒在看中文書的。因此每次學員問我這樣的問題,我的答案一定是:"你去書局每本都翻翻看,覺得買回去之後會看到最後一頁的才買。"。如果真的沒有辦法抉擇的話,你可以考慮恆逸的老師出的書。我不敢說書裡不會有錯字(編輯大人會盡力幫忙),但是至少不會有錯誤的觀念,而且也不會有一堆火星文在書中。

如果可能的話,我會建議你先聽過課之後再去找書來參考,這樣你才會更清楚你需要的是哪方面的書。

2008年8月23日 星期六

Silverlight 2 線上講堂通知(08/23)

接下來要開始介紹如何開發網路磁碟機,以及製作網路版的記事本。
各位有興趣的話可以先試一下網路磁碟機的範例:


          網路磁碟機 - (1)

2008年8月22日 星期五

關於在WPF當中使用Windows控制項的做法

首先,要先了解的是,WPF與Windows表單是不同的架構,所以在WPF表單中使用Windows控制項的時候,有些效果會無法控制,像是可見的 WindowsFormsHost 項目一定是在其他 WPF 項目的上層,而且不會受到疊置順序影響、不支援旋轉等等。

若是你一定需要在WPF表單中嵌入Windows控制項,甚至是動態建立Windows控制項操作的話,請參考下面步驟:

1. 在WPF專案中,透過[加入參考]方式,參考WindowsFormsIntegration.dll、System.Windows.Forms.dll 兩個組件。

2. 在XAML的<Window>標籤中,加入下面的命名空間宣告:

xmlns:wf
= "clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

3. 在WPF表單要顯示Windows控制項的位置,加入WindowsFormsHost控制項,然後就可以加入Windows控制項:

<WindowsFormsHost Margin="12,52,66,110" Name="windowsFormsHos2">
    <wf:Button Text="Click!!"   BackColor="Pink" FlatStyle="Flat"/>
</WindowsFormsHost>

4. 若是希望可以透過程式進行動態配置控制項動作的話,就必須在WindowsFormsHost控制項中加入FlowLayoutPanel或是TableLayoutPanel,參考下面的XAML樣式:

<WindowsFormsHost Margin="12,52,66,110" Name="windowsFormsHost1">
     <wf:FlowLayoutPanel/>
</WindowsFormsHost>

   接下來,就可以在程式中,動態加入Windows控制項了!!

private void button1_Click(object sender, RoutedEventArgs e)
{
    System.Windows.Forms.FlowLayoutPanel flp =
       this.windowsFormsHost1.Child as System.Windows.Forms.FlowLayoutPanel;
    System.Windows.Forms.Button btn = new System.Windows.Forms.Button();
    btn.Text = "Hello!";
    flp.Controls.Add(btn);
}

2008年8月20日 星期三

Silverlight 2 講堂 - 18:透過WCF與Server端程式整合(動作效果)

我在 "微軟新一代分散式架構與網際網路開發技術剖析(3)" 文章中,說明了Silverlight 2.0應用程式在新一代應用程式架構中所扮演的角色,特別是以做為展示層技術而言,Silverlight 2.0 應用程式比AJAX多了很多的好處:

1. 不需要學JavaScript。

2. 提供了BCL,使用 .NET程式開發經驗就可以建立前端(瀏覽器)動態效果。

3. CLR提供了自動記憶體管理與有效率的程式執行環境 (理論上,Beta2 還不錯)。

4. 提供了WCF以及Sydication等方式與雲端運算環境溝通。

5. 支援LINQ與XML資料繫結技術。

但是你要注意的是:Silverlight 2.0是執行在瀏覽器中的應用程式! 因此你所開發的程式,主要是用來處理展示層中的運算邏輯的! 換句話說,Silverlight 2.0就程式開發的角度來看的話,與ASP.NET AJAX扮演的角色較為相近。與ASP.NET AJAX技術相比較,Silverlight 2.0應用程式的好處,主要就是前面所列的幾點;但是Silverlight 2.0應用程式與ASP.NET伺服器端執行環境整合性沒有ASP.NET AJAX方便,則是他的弱點。

上篇文章提到了Silverlight 2.0典型的應用程式開發模型如下圖:

Silverlight2-rt 

這一堂課就讓我們利用上次的WCFHelloWorld專案,來討論實作一下這一個模型。

1. 先使用VS 2008開啟上次的WCFHelloWorld解決方案,開啟WCFHelloWorldWeb網站專案的App_Code目錄下的MyService.cs原始檔。

    分散式架構開始實作之前必須要先定義溝通的規格。在MyService.cs原始檔當中的[ServiceContract]與[OperationContract]就是用來宣告規格定義的。關於WCF的一些基礎操作各位可以先看我的"Visual C# 2008 精研講座"書中的介紹。

2. 在DoWork方法中,我們加入一行程式碼,將WCF服務的運算時間延長到8秒:

[OperationContract]
public string DoWork(string username)
{
    // Add your operation implementation here
      System.Threading.Thread.Sleep(8000);
      return "Hello, " + username +
          ". Time is " + DateTime.Now.ToLongTimeString();
}

      分散式架構中,你無法估算遠端元件需要花多少時間運算。因此在這次的練習中,我們就模擬呼叫一個需要長時間執行的服務(但非批次性工作,注意!!);然後在呼叫服務的過程當中,我們就可以加入一些動態的效果。

3. 使用Expression Blend 2.5開啟WCFHelloWorld專案,然後開啟Page.xaml。

4. 選取txtAnswer(下面的)TextBox控制項,然後到[Properties] -->[Misecellaneous]視窗中,選取IsReadOnly:

LOGO

4. 在txtAnswer下方,加入一個長度約略和txtAnswer相等,高度較txtAnswer高的Canvas控制項。然後再從工具箱中選取一個TextBlock控制項,加入Canvas控制項當中:

快照2

5. 在TextBlock控制項中,輸入等待服務回應時,所要顯示的文字。參考完成結果如下圖:

快照3

6. 選取TextBlock控制項,然後到[Properties]視窗中,將其名稱設為tbMessage;然後在[Brushes]視窗中,設定Foreground(前景色)為白色(不用太精確,沒有關係):

快照4

    然後TextBlock當中的文字就會以白色顯示如下:

快照5

7. 新增一個Storyboard,取名為ShowWaitMessage。

第0秒的時候,將TextBlock控制項的Left屬性設為0。

第1.5秒的時候,將TextBlock控制項的右邊文字尾端對齊Canvas控制項的右邊界。

第3秒的時候,將TextBlock控制項的Left屬性設為0。

完成之後停止錄製時間軸。

8.  接著在[Appearance]視窗中,將Visibility屬性值設為Collapsed。

快照6

接著存檔之後Build專案,然後關閉Expression Blend設計工具。

(設計人員工作完成)

9. 使用VS 2008開發工具開啟WCFHelloWorld專案中的Page.xaml.cs程式檔。

10. 在Button_Click事件處裡常式中,加入顯示TextBlock控制項,並啟動ShowWaitMessage時間軸的程式:

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyServiceReference.MyServiceClient proxy
        = new WCFHelloWorld.MyServiceReference.MyServiceClient();


    proxy.DoWorkCompleted += new EventHandler<WCFHelloWorld.MyServiceReference.DoWorkCompletedEventArgs>(proxy_DoWorkCompleted);

    proxy.DoWorkAsync(txtName.Text);

    tbMessage.Visibility = Visibility.Visible;
    ShowWaitMessage.RepeatBehavior = RepeatBehavior.Forever;
    ShowWaitMessage.Begin();

}

將RepeatBehavior屬性值設為Forever之後,動畫效果就會一直重複執行。

11. 在proxy_DoWorkCompleted事件處理常式當中,當存取服務動作完成時,呼叫Stop方法停止時間軸,並隱藏tbMessage控制項:

void proxy_DoWorkCompleted(object sender, WCFHelloWorld.MyServiceReference.DoWorkCompletedEventArgs e)
{
    Dispatcher.BeginInvoke(delegate()
    {
        ShowWaitMessage.Stop();
        tbMessage.Visibility = Visibility.Collapsed;
        txtAnswer.Text = e.Result;
    });
}

12. 完成之後建置WCFHelloWorld專案,然後執行測試網頁,你會發現當呼叫遠端服務時,文字輸入方塊下方就會出現動態的文字效果了!!

所以說,如果開發人員要學好使用Silverlight 2.0技術開發應用程式的話,就要先有正確的觀念,千萬不要被一些不正確的資訊誘導,以為Silverlight 2.0的重點是在啥圖片或是動畫效果。17、18算是開始與伺服器端邏輯結合的入門範例,接下來我將再帶各位操作更進階的範例,讓你知道怎樣寫好Silverlight 2.0應用程式 -- 而不光只是會放大縮小圖片而已......

2008年8月18日 星期一

微軟新一代分散式架構與網際網路開發技術剖析(3)

介紹完了ASP.NET的架構之後,接下來來談一下Silverlight 2.0的技術。很多人以為,Silverlight 2.0技術的出現,是為了和Flash抗衡,爭奪RIA技術的王座。但從 "Silverlight 2 講堂 -15:Silverlight 外傳(WPF篇)" 這一篇文章中你不難瞭解到,其實Silverlight技術的真正目標,是希望一統網際網路應用程式在用戶端中的開發環境,讓 .NET開發人員在不需要花太多時間學新東西的前題之下,就可以開發與維護套用到各種不同環境的使用者操作介面 -- 當然,也要一舉擺脫在用戶端環境中,JavaScript對於開發人員(或是微軟 ?)所帶來的陰霾。

同時,Silverlight 2.0應用程式也是微軟網際網路開發技術當中,實現MVC設計模式很重要一個展示層技術。如果你對Silverlight 2.0應用程式的開發觀念還不太清楚,請先參考:

透過Silverlight 2.0執行環境支援BCL與CLR,以及可以直接使用C#或是VB開發程式邏輯的特性,讓你很容易就可以將企業級分散式架構的控制元件,在發佈成網路服務(Web Services)或是WCF服務之後,就直接整合到瀏覽器中的Silverlight應用程式當中使用。參考的架構圖如下:

Silverlight2-mvc

企業級MVC-2

當然,這些在雲端中的服務,也可以提供給一般的 .NET 應用程式使用。如此一來,對於企業級分散式架構而言,也就很容易就可以實現軟體服務化(SaaS)的架構。

在 .NET Framework 3.5 平台中,你可以採用下面的方式設計企業級分散式應用程式:

1. 定義在各服務層級之間溝通的功能與訊息規格(Contracts)。

2. 透過SQL Server Data Service、ASP.NET Data Service等技術開發元件模組(Model)。

3. 透過WF(Windows Workflow Foundation)技術,設計工作流程,再發佈成控制元件(Controller)。

4. 透過Silverlight、WPF、Windows Form等技術,建立展示層操作介面(View)。

5. 在各層級之間,可以透過WCF(Windows Communication Foundation)技術,根據事先設計的規格繫結。

而在Silverlight 2.0所建立的展示層當中,更可以結合動畫效果,增加程式在執行時期與使用者之間的互動性。一個典型的Silverlight 2.0應用程式執行的架構如下圖:

Silverlight2-rt

1. 當使用者觸發操作介面畫面元素(element)的事件時,透過事件處裡常式呼叫WCF服務的代理元件。

2. WCF服務的代理元件在用戶端瀏覽器的Silverlight執行環境中,透過非同步方式存取在雲端中的服務。

3. 呼叫遠端服務的同時,也可以啟動事先設計好的Storyboard動作流程,產生動化效果。

4. 當代理元件接收完成遠端服務的執行結果之後,將資料更新到使用者操作介面的元素中,此時也可以搭配Storyboard動作流程產生動態效果。

在 "Silverlight 2 講堂 - 17:透過WCF與Server端程式整合" 文章中,已經介紹了Silverlight 2.0應用程式存取Server端服務的關鍵;後續的講堂課程當中,將會更深入的介紹Silverlight 2.0應用程式的開發。跟上我們的進度,你就會知道其實Silverlight 2.0的設計目標不是只有跑跑動畫而已。還是一句老話:"內行的看門道,外行的看熱鬧"............

2008年8月17日 星期日

微軟新一代分散式架構與網際網路開發技術剖析(2)

在前面我們說明了一些關於ASP.NET的基礎架構,也談到了ASP.NET先天上的一些限制,接下來,讓我們從分散式架構的角度來談一下這些網際網路的開發技術。

講到網際網路的分散式架構,就不可以不談到MVC設計模式。我們在教SCWCD(Sun Certified Web Component Developer)認證課程時,都一定會介紹如何透過MVC架構設計並建立網際網路應用程式;但是在教ASP.NET的課程時,一方面是ASP.NET提供了很豐富的伺服器控制項要學,另一方面前面也提到了因為ASP.NET架構上先天的一些限制,所以要完全實作MVC設計模型也不容易。也可以能是因為這樣,所以大部分ASP.NET的開發人員都不熟悉MVC設計模式。如果你沒有這一方面的概念的話,你可以先參考下面的一些資訊:

若是要了解MVC架構的話,下面這張圖可以說明的相當清楚:

mvc-structure-generic

(圖片資料來源:http://java.sun.com/blueprints/patterns/MVC-detailed.html)

從這張圖你可以很清楚的看出來,ASP.NET的伺服器控制項實際上扮演的是是View與Controller的角色,因此很多開發人員就以為將資料存取與一些Domain的邏輯獨立出來,就算是完成MVC設計模式了。事實上,在JSP當中對於MVC設計模式還分為Model 1與Model 2兩種模型來探討,所謂的Model 1模型就是由JSP同時扮演View與Controller的角色-- ASP.NET預設實作的也是Model 1的模型,因此前面的做法若要說是MVC架構的話,也不能算錯。ASP.NET實作MVC Model 1的架構如下:

ASP.NET Model 1

但Model 1模型通常用在一般的網站或是比較小型的專案,若是要講企業級分散式架構的話,就需要套用到Mode 2的模型。但是因為在ASP.NET預設的架構當中,所有顯示層的改變都需要回伺服器端透過Page與伺服器控制項來處理,造成View與Controller無法分離,因此無法實作出MVC Model 2的模型。

一般來說,目前講MVC設計模式,大多指的也是Model 2的模型。在企業級的應用程式當中,我們必須要同時兼顧到延展性、維護性與效能等等的需求;而在軟體服務化(Software as a Service,SaaS)的趨勢當中,唯有Mode 2的模型,才可以真正的幫助企業建立以服務為導向(Service-Oriented Architecture)的架構。因此我在三月份的網誌 "ASP.NET 3.5的Web API範例" 以及五月份的研討會 "建立以工作流程與訊息為導向的企業級應用程式架構" 當中,就曾經說明過這樣的設計架構。因此採用MVC設計模式,搭配WCF(Web Service)技術,我們就可以讓企業級的應用程式的使用者,透過各種不同類型的方式來存取應用程式--當然,我們只須要建立新的展示層服務就可以了,參考下圖:

 企業級MVC

而為了讓ASP.NET可以支援Model 2的MVC設計架構,因此在ASP.NET 3.5當中,內建了ASP.NET AJAX技術。透過在用戶端瀏覽器中所擴充的Microsoft AJAX Library,不僅可以非同步執行方式更新網頁,更可以直接從用戶端瀏覽器中,直接存取伺服器端的Web Service或是Page Method(其實也是一種Web Service)。因此當你將控制元件(Controller,不要說啥"控件"了) 發佈為Web Service之後,就可以同時提供給ASP.NET AJAX表單,以及其他前端的展示層技術來使用。

***   注意一下,這裡談的ASP.NET AJAX指的是微軟官方所提供的ASP.NET AJAX架構,而非ACT (Ajax Control Toolkit)。其實在ASP.NET 3.5 技術當中,你只要學會將伺服器控制項放到UpdatePanel中使用,就已經相當夠用了。至於ACT,再怎樣強也強不過Silverlight 2.0。

當然,因為ASP.NET AJAX是屬於用戶端瀏覽器中的開發技術,所以也可以支援透過JavaScript來產生動態的效果。ASP.NET AJAX提供了兩種主要的開發模型:

  • 整合伺服器控制項(改善使用者操作經驗)

AJAX1

記得我曾說過:"ASP.NET + AJAX到ASP.NET 4.0還是無敵" 的話吧! 沒錯! 因為就目前開發一般的網際網路應用程式而言,ASP.NET提供了許多支援資料繫結的伺服器控制項(GridView、ListView....等等),加上LINQ、Entity Framework等技術的支援,以及ASP.NET自己本身內鍵的一些服務,整合了ASP.NET AJAX技術之後,要開發出所謂RIA效果的資料存取表單,簡直是易如反掌,打遍天下無敵手啊!! (你可以參考 ASP.NET 3.5 GridView 範例)

 

  • 直接存取網路服務 (做為MVC前端技術)

AJAX2 

透過這一個模型,就可以在ASP.NET當中實現MVC架構!! 然而,Ajax Client Library在瀏覽器中必須要透過JavaScript來開發程式。但若是又回到以JavaScript為主的開發技術的話,微軟勢必沒有辦法主導其技術規格,同時競爭者也多;再者,對於開發人員而言,又要回到ASP時代,為了開發及維護伺服器端與用戶端瀏覽器中的不同技術所開發的程式,而萬分痛苦的年代........

於是乎,微軟有了一統用戶端瀏覽器中執行環境的念頭。關於這一段就請大家參閱:

Silverlight 2 講堂 -15:Silverlight 外傳(WPF篇)

(未完待續..........)

微軟新一代分散式架構與網際網路開發技術剖析(1)

自從.NET 3.0加入了WF、WCF、WPF,ASP.NET推出了ASP.NET AJAX等技術之後,就不斷的有同學問我:"老師,請問一下,我現在到底該學甚麼? ","老師,請問一下,我可以將這些技術應用在哪些地方?" 等這一類的問題,我想你應該可以從這一篇文章中找到答案。

ASP.NET技術推出之後,挾其內建的容易使用、而且可以輕易整合伺服器端資源的伺服器控制項以及Page物件模型,對於網際網路應用程式的發展,不啻跨入了一個新的世代。雖然直譯加編譯式的動態伺服器網頁開發技術早在JSP當中就已經實現了,但是ASP.NET透過伺服器控制項簡化動態網頁開發的架構,間接也帶動了JSP後來衍生出JSF的技術架構(或許Java社群終究還是會實作出來,who knows ?),促使網際網路應用程式開發技術邁入一個新紀元。

但是不管網際網路開發技術如何發展,動態網頁的基礎架構仍然是分為用戶端瀏覽器與伺服器端兩個執行環境,因此不管動態伺服器網頁開發技術(ASP、ASP.NET、JSP、PHP....等)如何演進,都必須要搭配用戶端瀏覽器中執行的程式,才能完成完整的功能。當然,在用戶端瀏覽器中執行程式的首選,就是幾乎所有瀏覽器都有支援的JavaScript。然而對於微軟而言,我想這會是他們不願意樂見的,因為畢竟JavaScript的發展不是他們所能掌控的,因此微軟將以VB語法為基礎的VBScript執行引擎與ActiveX技術嵌入IE中,試著吸引眾多VB的開發人員改用VBScript開發用戶端瀏覽器中執行的程式。

但是畢竟網際網路是一個開放式的平台,不是只有微軟平台的開發人員,加上微軟似乎高估了其他開發人員對於VBScript的支持度,因此JavaScript慢慢的成為用戶端瀏覽器中開發程式的標準,而VBScript則回歸到微軟平台中系統管理人員建立管理指令集的好用工具。這期間,微軟仍不放棄掌控用戶端開發執行環境的念頭,因此和昇陽為了沒有按照標準規格建立的JVM(Java Virtual Machine)而打了場官司 -- 依舊是敗下陣來。

但你別以為微軟因此就放棄了掌控用戶端開發執行環境的想法,事實上,在IE當中雖然你是宣告"text/javascript",不過在IE當中還是採用微軟實作的JScript引擎去執行的,微軟的文件中說明著這一點:

"Netscape developed the JavaScript programming language. JScript is the Microsoft implementation of ECMAScript, as defined by the specification of Ecma International. Both JavaScript and JScript are ECMAScript-compliant languages."

***  對於微軟Scripting技術有興趣的話,可以參考Microsoft Windows Script Technologies

就像在用戶端動態網頁(DHTML)的技術當中,IE所提供的DOM(Document Object Model)也與W3C所規範的略有不同,因此DHTML的開發人員往往需要為了讓程式可以在不同的瀏覽器中呈現效果,而需要撰寫不同版本的Script。而當年開發ASP(Active Server Pages)最麻煩的地方,就是要在動態網頁內容中混用JavaScript與伺服器端的程式,往往讓許多剛入門的開發人員傷頭腦筋......

而ASP.NET的伺服器控制項技術的出現,對於被ASP像義大利麵條似的開發方式搞得昏頭轉向的開發人員而言,無疑的大大減輕了開發動態網頁的步驟:除了Page會自動維護狀態,並根據伺服器端程式處理結果自動轉譯(render)HTML內容之外,許多的伺服器控制項也會根據用戶端瀏覽器自動載入網頁執行所需要的JavaScript。然而,所有的問題都解決了嗎?

事實並非如此,雖然ASP.NET的精神,是希望開發人員只需要會使用伺服器端的程式搭配伺服器控制項,就可以完成開發動態網頁的動作。但是畢竟ASP.NET是以伺服器端為主的開發技術,若是用戶端沒有觸發PostBack動作的話,就無法回伺服器端完成動作;而若是每個動作都PostBack,對於使用者的操作經驗(User Experience)與執行效能也都會有影響。因此在ASP.NET 3.5當中,就整合了ASP.NET AJAX的技術到其中,將ASP.NET伺服器控制項的功能發揮到極致 -- 而開發人員只要學會將伺服器控制項放到UpdatePanel控制項當中,再加上一些程式與設定,就可以完成以前ASP需要寫一堆程式才可以完成的結果!!

然而,ASP.NET技術也不是沒有限制的:

首先,ASP.NET依賴伺服器端控制項與Page物件維護其頁面中的狀態,因此造成維護使用者狀態及切換頁面的邏輯不易獨立設計,造成ASP.NET不易實作MVC設計模型。

再者,ASP.NET 3.5雖然整合了ASP.NET AJAX技術,但是因為並非每一個用戶端的事件(OnMouseMove、OnBlur....等等) 伺服器控制項都有支援,因此仍然有許多的動態效果是ASP.NET無法直接支援的(先天的限制,非戰之罪....)。雖然我們可以透過ASP.NET的ClientScriptManager動態載入必要的自訂JavaScript,滿足用戶端所需要的動態效果;但若是可以讓網際網路開發人員在不需要透過任何其他的技術(Java,或是任何Java開頭的......) 就可以完成用戶端動態效果的開發,那世界豈不是更美好!!!

(未完待續.............)

2008年8月16日 星期六

又見火星文......

最近公司同事拿一本中文書給大家參考,隨便翻開一頁,標題寫著:

"單一孩子的Element"

        ==> 我才知道程式設計也講一胎化.............. Orz

"孩子內部還是可以有別的孩子"

        ==> 太深奧了,是靈異小說嗎? "專業"的編輯出來說明一下吧?

其他的部分就懶得看了,還好我手上有那本的原文書............

2008年8月14日 星期四

Silverlight 2 講堂 - 17:透過WCF與Server端程式整合

原本這一堂課應該繼續介紹Silverlight 2.0應用程式開發觀念(3),但是我想目前透過Silverlight 2 講堂 -14:Silverlight 2 應用程式開發觀念(1)Silverlight 2 講堂 -16:Silverlight 2 應用程式開發觀念(2)兩堂課,大家對於Silverlight 2.0應用程式的開發應該已經有一些基本觀念了;再加上這星期剛好我在恆逸資訊開WF(Windows Workflow Foundation)的課程,因為課程內容東西太多,今天又是最後一次上課,所以我想先插入一堂介紹Silverlight 2.0應用程式如何透過WCF(Windows Communication Foundation),在新一代分散式架構中與Server端程式整合的課程,一方面讓WF課程的學員可以對於我在課堂中所介紹的.NET分散式架構可以有更清楚的概念,另一方面,這也是你未來要開發Silverlight 2.0應用程式時,相當重要的一個關鍵技術。Silverlight 2.0應用程式開發觀念(3),就順延推出吧!

在前面的技術文件--淺談新一代的MVC設計模式 -2--中,就已經揭露了"新一代ASP.NET應用程式的發展,已經不再是以"網頁"、"Web表單"為中心,而是改以"工作流程"為主要的設計中心"的觀念;而在"軟體即服務"(Software as a Service)的概念之下,搭配WCF的技術,我們可以更進一步的說:"新一代應用程式的發展方式,就是以"工作流程"為主要的設計中心,再搭配不同的前端介面供使用者操作"。而其中一種前端介面,就是Silverlight 2.0應用程式。

Silverlight 2.0應用程式是發展新一代分散式系統很好用的前端展示層介面(View)技術,怎麼說呢? 因為在Silverlight 2.0的執行環境當中,雖然提供了BCL,但是受限於瀏覽器的關係,有很多的動作與用戶端環境的資源無法直接完全存取(例如:檔案系統),因此必須要搭配Server端的控制元件與模組,才能發展完整的功能。我會在另一篇文章中比較Silverlight 2.0與ASP.NET開發技術的差異,以及介紹發展新一代分散式系統架構的設計模式(好像又拖稿了.......);這一堂課,我們先來介紹如何將前端的Silverlight 2.0應用程式透過WCF技術結合後端的WCF服務元件;而聽過我的WF課程的同學,你可以更進一步的試著將Server端的工作流程先透過State Machine Workflow設計好,發佈成WCF服務之後,再套用在這裡為各位介紹的模型中。

1. 首先,開啟VS 2008 開發工具,新增一個Silverlight應用程式專案以及測試網站,取名為WCFHelloWorld。

2. 使用Expression Blend 2.5 設計工具開啟WCFHelloWorld專案,從左邊工具列中拖放兩個TextBox控制項、一個Button控制項,空間配置如下圖:

快照1

2. 在[Properties]視窗中,將上面的TextBox控制項命名為"txtName",下面的TextBox控制項命名為"txtAnswer"。

3. 將WCFHelloWorld專案存檔,然後先建置專案(Build Solution)一次,關閉Expression Blend設計工具。

4. 回到VS 2008開發工具中,在測試的網站專案(名稱應該預設叫WCFHelloWorldWeb)中,按下滑鼠右鍵,選擇[加入新項目],你會看到如下圖的[加入新項目]視窗:

快照2

5. 重點來了,在[加入新項目]視窗中你會看到一個叫做[Silverlight-enabled WCF Service]的項目。要建立給Silverlight 2.0應用程式存取的WCF服務元件,你不一定要選這一個項目;但是選擇這一個項目建立WCF服務元件時,VS 2008會幫你將WCF組態自動設為BasicHttpBinding繫結,所以就算你還不懂WCF技術也可以先練習。

*** 若是你想使用Silverlight 2.0技術開發應用程式,基本的WCF與WF技術操作技巧還是必須要知道。若是你目前還沒有這兩種技術的基礎,建議你可以先參考我的"Visual C# 2008精研講座"這本書後半部的章節。

在[加入新項目]視窗選取[Silverlight-enabled WCF Service]項目之後,將[名稱]設為MyService.svc,然後按下[加入]按鈕。

6. 此時VS 2008 開發工具應該會自動開啟在App_Code目錄下的MyService.cs原始檔,在原始檔中將DoWork方法程式調整如下:

    [OperationContract]
    public string DoWork(string username)
    {
            // Add your operation implementation here
            return "Hello, " + username +
                ". Time is " + DateTime.Now.ToLongTimeString();
    }

完成之後先存檔,然後建置一下網站專案。

7. 在WCFHelloWorld專案中按下滑鼠右鍵,選取[加入服務參考]。接著按下[加入服務參考]視窗中的[探索]按鈕,VS 2008就會自動找到剛剛加入到WCFHelloWorldWeb專案中的MyService服務的定義。將[命名空間]設為"MyServiceReference"之後,按下[確定]按鈕,VS 2008開發工具就會在WCFHelloWorld專案中建立存取WCF服務所需要的代理元件(proxy)的定義。

快照4

8. 開啟Page.xaml檔案,在XAML編輯器中,建立Button控制項的Click事件對應的事件處理常式(Button_Click),然後按下滑鼠右鍵,選取[巡覽至事件處理常式]。

9. 在Click事件處理常式中,加入建立存取WCF服務的Proxy元件的程式如下:

MyServiceReference.MyServiceClient proxy
    = new WCFHelloWorld.MyServiceReference.MyServiceClient();

10. 在Silverlight 2.0應用程式中,Proxy元件是以非同步方式呼叫WCF服務的。因此接下來,先註冊當Proxy元件以非同步方式呼叫WCF服務執行完成時,所會觸發的事件的處理常式;然後再呼叫Proxy元件以非同步方式呼叫WCF服務。完整的Click事件處理常式程式碼如下:

private void Button_Click(object sender, RoutedEventArgs e)
{
        MyServiceReference.MyServiceClient proxy
            = new WCFHelloWorld.MyServiceReference.MyServiceClient();

        //註冊接收結果的事件處理常式
        proxy.DoWorkCompleted += new EventHandler

               <WCFHelloWorld.MyServiceReference.DoWorkCompletedEventArgs>  

                (proxy_DoWorkCompleted);

        //以非同步方式呼叫WCF服務功能

        proxy.DoWorkAsync(txtName.Text);
}

11. 接下來在proxy_DoWorkCompleted方法中,透過第二個DoWorkCompletedEventArgs

型別參數的Result屬性取出WCF執行結果,並顯示在txtAnswer控制項中:

void proxy_DoWorkCompleted(object sender, WCFHelloWorld.MyServiceReference.DoWorkCompletedEventArgs e)
{
    Dispatcher.BeginInvoke(delegate()
    {
        txtAnswer.Text = e.Result;
    });
}

12. 完成之後建置WCFHelloWorld專案,然後開啟HTML或是ASP.NET測試網頁執行。輸入名字之後,按下按鈕就可以呼叫WCF服務,測試結果如下:

快照6

如果你需要很炫的效果的話,你可以利用前面學過的技巧加上一些動畫效果就可以了。你可以參考:Silverlight 2 講堂 -3:讓畫面動起來這一篇前面的課程。

很多人在Silverlight 1.0的時代,就被一些錯誤的資訊誤導,以為Silverlight是要用來對抗Flash的技術,所以Silverlight的重點技術是動畫與多媒體。在上完這堂課之後,你就會發現,Silverlight 2.0技術的真正精髓,是在於結合了.NET平台技術之後,就可以透過各種不同方式,與Server端的程式進行整合。後面的課程我將會陸續再介紹其他的整合技巧與應用,敬請期待喔!!

最新回應

Loading...

即時與版主對話


(若狀態顯示"忙碌"時,我可能無法馬上回應。你可以留下Email,我會盡快跟你聯絡,謝謝喔!!)