Web Part與 個人化網頁製作 資策會教育訓練處 王寧疆 MCAD.NET/MCSD.NET/MCT

議程 現代化網頁的需求 認識WebPart WebPart相關的類別 使用WebPart製作可自訂Layout與內容的網頁 在WebPart中使用Server Control 在WebPart中使用User Control 製作WebPart類別 在WebPart之間溝通

現代化網頁的需求 現代化網頁應該具備的條件 提供可自訂Layout與內容的資訊 友善, 親切, 高度人性化 One page for everything Choose the content you want Personalized your way 製作方法 使用ASP.NET 2.0提供的WebPart功能

現代化網頁的範例

認識WebPart – 網頁的零件

AppearanceEditorPart DeclarativeCatalogPart PropertyGridEditorPart WebPart相關的類別關係圖 WebPartManager CatalogZone EditorZone WebPartPageMenu PageCatalogPart AppearanceEditorPart WebPartZone ImportCatalogPart BehaviorEditorPart WebPart DeclarativeCatalogPart LayoutEditorPart ConnectionsZone 不需要放 任何東西 PropertyGridEditorPart xxZone為容器, 用來放置xxPart零件, 另外再加上WebPartManager, WebPartPageMenu

WebPart相關的類別說明 WebPartManager:欲使用WebPart功能的網頁必須使用 的類別 WebPartPageMenu:提供功能讓使用者自訂網頁的類別 ConnectionsZone:管理WebPart之間連結的類別 WebPartZone:放置WebPart的容器 CatalogZone:放置所有可以新增到網頁的WebPart PageCatalogPart:一般的WebPart ImportCatalogPart:副檔名為.WebPart的檔案,可以匯入到網頁 中使用 DeclarativeCatalogPart:使用<WebPartsTemplate>標籤宣告的 Web Part的類別

WebPart相關的類別說明(續) EditorZone:放置所有可以新增到網頁的WebPart 要提供自訂屬性必須製作WebPart類別 AppearanceEditorPart:提供設定WebPart外觀相關屬性的類別 BehaviorEditorPart :提供設定WebPart行為相關屬性的類別 LayoutEditorPart:提供設定WebPart位置的類別 PropertyGridEditorPart:提供設定WebPart自訂屬性的類別 要提供自訂屬性必須製作WebPart類別

使用WebPart製作可自訂Layout與內容的網頁 搜尋亞馬遜網站書籍功能 氣象資訊 翻譯機 最新課程資訊 EditorZone CatalogZone

利用Table定位 WebPartManager WebPartPageMenu WebPartZone WebPartZone EditorZone CatalogZone

為WebPartZone加入內容 加入Server Control 加入User Control 加入WebPart類別 缺乏自訂屬性的功能 製作難度較低 可以自訂屬性 加入WebPart類別 製作難度較高(缺乏視覺編輯功能) 可以改變WebPart的行為

WebPartZone常用的屬性 屬性名稱 內容值 EmptyZoneText WebPartZone沒有內容時欲顯示的文字 HeaderStyle WebPartZone的標題列樣式 PartStyle 定義WebPartZone中WebPart的統一樣式 PartTitleStyle 定義WebPart標題的樣式 VerbStyle WebPart功能表的樣式 CloseVerb Description項目：關閉功能提示訊息 ImageUrl項目：關閉功能圖示 ConnectVerb Description項目：連線功能提示訊息 ImageUrl項目：連線功能圖示 EditVerb Description項目：編輯功能提示訊息 Text項目：編輯功能表文字 MinimizeVerb Description項目：縮小功能提示訊息 ImageUrl項目：縮小功能圖示 RestoreVerb Description項目：還原功能提示訊息 ImageUrl項目：還原功能圖示

在WebPartZone中加入Server Control <asp:WebPartZone ID="SideBarZone" Runat="server" EmptyZoneText="把WebPart加在這裏"> <ZoneTemplate> <asp:Calendar Runat=Server Caption="行事曆" ID="Calendar1"></asp:Calendar> </ZoneTemplate> <RestoreVerb Description="還原 '{0}'" ImageUrl="~/images/RestoreVerb.GIF" Text=""></RestoreVerb> <MenuLabelStyle BorderStyle="Outset"></MenuLabelStyle> <HeaderStyle HorizontalAlign="Center" Font-Bold="True" BackColor="#FFE0C0" BorderStyle="Outset" ForeColor="#0000C0"></HeaderStyle> <MinimizeVerb Description="縮小 '{0}'" ImageUrl="~/images/MinimizeVerb.gif"></MinimizeVerb> </asp:WebPartZone>

在WebPartZone中加入User Control <%@ Page Language="VB" .. %> <%@ register tagprefix="UserControlPart" tagname="Course" src="Course.ascx" %> … <asp:WebPartZone ID="CourseZone" Runat="server" DragHighlightColor="244, 198, 96"> <PartTitleStyle BackColor="#2254B1" ForeColor="White"></PartTitleStyle> <ZoneTemplate> <UserControlPart:Course ID="CoursePart" Runat=server/> </ZoneTemplate> <PartStyle BorderColor="#81AAF2" BorderStyle="Solid" BorderWidth="1px"></PartStyle> </asp:WebPartZone>

在WebPartZone中加入WebPart類別 <%@ Page Language="VB" .. %> <%@ register tagprefix="WebPartClass" namespace="MyWebPart" Assembly="MyWebPart" %> … <asp:WebPartZone ID="CourseZone" Runat="server" DragHighlightColor="244, 198, 96"> <PartTitleStyle BackColor="#2254B1" ForeColor="White"></PartTitleStyle> <ZoneTemplate> <WebPartClass:WeatherPart ID="Weather1" Runat=Server Title=" 出門看天氣" ZipCode="92108“ /> </ZoneTemplate> <PartStyle BorderColor="#81AAF2" BorderStyle="Solid" BorderWidth="1px"></PartStyle> </asp:WebPartZone>

WebPartPageMenu常用的屬性 屬性名稱 內容值 BrowseModeVerb Text項目：瀏覽網頁的內容 CatalogModeVerb Text項目：請選擇欲加入網頁的WebPart ConnectModeVerb Text項目：連結到網頁上其他的WebPart DesignModeVerb Text項目：調整網頁的Layout DropDownButtonText 執行 EditModeVerb Text項目：調整Web Part屬性 Text 調整網頁的版面或樣式

EditorZone常用的屬性 屬性名稱 內容值 ApplyVerb Text項目：套用 CancelVerb Text項目：取消 OkVerb Text項目：確定 InstructionText 完成設定Web Part屬性設定後, 請按下[確定]或[套用]鍵完成設定屬性的動作 ErrorText 屬性設定錯誤 HeaderCloseVerb Text項目：關閉

編輯EditorZone的內容 <asp:EditorZone ID="EditorZone1" Runat="server" InstructionText=".."> <PartTitleStyle HorizontalAlign="Center" Font-Italic="True" /> <HeaderCloseVerb Text="關閉"></HeaderCloseVerb> <PartStyle BackColor="White" BorderColor="#81AAF2" /> <CancelVerb Text="取消"></CancelVerb> <ApplyVerb Text="套用"></ApplyVerb> <ZoneTemplate> <asp:AppearanceEditorPart ID="AppearanceEditor1" Runat="server" /> <asp:LayoutEditorPart ID="LayoutEditor1" Runat="server" /> <asp:PropertyGridEditorPart Runat="server" ID="PropertyGridEditor1" /> </ZoneTemplate> <OKVerb Text="確定"></OKVerb> <HeaderStyle HorizontalAlign="Center" Font-Bold="True" /> </asp:EditorZone>

CatalogZone常用的屬性 屬性名稱 內容值 HeaderText 選擇可以動態加到網頁的WebPart AddVerb CloseVerb Text項目：關閉 HeaderCloseVerb SelectTargetZoneText 加入到:

編輯CatalogZone的內容 CatalogZone預設會放置被關閉的WebPart供使用者選擇並加入到網頁中的WebPartZone中 你也可以準備ImportCatalogPart和DeclarativeCatalogPart供使用者選擇

CatalogZone內容範例 <asp:CatalogZone ID="CatalogZone1" Runat="server"> <ZoneTemplate> <asp:DeclarativeCatalogPart Runat="server" ID="DeclarativeCatalogPart1" Title="樣版WebPart"> <WebPartsTemplate> <UserControlPart:DeclarativeCatalogPartDemo ID="DCP1" Runat="server" /> </WebPartsTemplate> </asp:DeclarativeCatalogPart> <asp:PageCatalogPart Runat="server" ID="PageCatalogPart1" /> </ZoneTemplate> </asp:CatalogZone>

使用WebPart製作的網頁範例

編輯WebPart屬性

改變WebPart的位置

新增WebPart到網頁中

製作WebPart的三種方法 利用Server Control製作WebPart 利用User Control製作WebPart 實作IWebPart介面

利用Server Control製作WebPart <asp:WebPartZone ID="SideBarZone" Runat="server" EmptyZoneText="把WebPart加在這裏"> <ZoneTemplate> <asp:label runat="server" id="linksPart" > <a href="http://www.asp.net">ASP.NET site</a> <br> <a href="http://www.gotdotnet.com">GotDotNet</a> <a href="http://www.Microsoft.com">Microsoft.com</a> </asp:label> <asp:Calendar Runat=Server Caption="行事曆" ID="Calendar1"></asp:Calendar> </ZoneTemplate> </asp:WebPartZone>

利用User Control製作WebPart 整合一個以上的控制項 加入程式碼, 例如到資料庫查詢即時新聞 呼叫Web Service提供的功能 …

製作User Control DataSetDataSource DataList <asp:DataList ID="DataList1" Runat="server"> <ItemTemplate> <asp:Hyperlink NavigateUrl='<%# Eval("Url") %>' ..> </asp:Hyperlink><br /> .. </ItemTemplate> </asp:DataList>

在User Control中呼叫Web Service 提供即時新聞 氣象資訊查詢 股巿行情查詢 匯率查詢 交通路況 eBay auction Hotmail Inbox ….

提供即時新聞的User Control <%@ Control Language="VB" AutoEventWireup="false" CompileWith="NewsPart.ascx.vb" ClassName="NewsPart_ascx" %> <asp:DataList ID="DataList1" Runat="server" BorderColor="Tan" BackColor="LightGoldenrodYellow" Height="400px"> <ItemTemplate> <table> <tr> <td width="70">新聞來源</td> <TD><%#Eval("source")%></TD> </tr> </table> </ItemTemplate> </asp:DataList>

呼叫提供即時新聞的XML Web Service Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Me.Load Dim ws As GetCustomNews = New GetCustomNews Dim s As String = ws.GetCustomNews("Computer") Dim sr As StringReader = New StringReader(s) Dim ds As DataSet = New DataSet ds.ReadXml(sr) DataList1.DataSource = ds.Tables(0) DataList1.DataBind() End Sub

提供翻譯功能的User Control <%@ Control Language="VB" AutoEventWireup="false" CompileWith="TranslatePane.ascx.vb" ClassName="TranslatePane_ascx"%> <table> <tr> <td><asp:Label ID="Label1" Runat="server" Text="英文:"></asp:Label></td> <td><asp:TextBox ID="txtEng" Runat="server">Hello</asp:TextBox></td> <td><asp:Button ID="btnTranslate" OnClick="Button1_Click" Runat="server" Text=“ 翻譯" /></td> </tr> <td><asp:Label ID="Label2" Runat="server" Text="中文:"></asp:Label></td> <td colspan=2><asp:TextBox ID="txtChn" Runat="server"></asp:TextBox></td> <td><asp:Label ID="Label3" Runat="server" Text="日文:"></asp:Label></td> <td colspan=2><asp:TextBox ID="txtJpn" Runat="server"></asp:TextBox></td> </table>

呼叫提供翻譯功能的XML Web Service Imports com_webservicex_www … Sub btnTranslate_Click(ByVal sender As Object, ByVal e As _ System.EventArgs) Dim ws As TranslateService = New TranslateService txtChn.Text = ws.Translate(Language.EnglishTOChinese, txtEng.Text) txtJpn.Text = ws.Translate(Language.EnglishTOJapanese, txtEng.Text) txtFre.Text = ws.Translate(Language.EnglishTOFrench, txtEng.Text) End Sub

查詢股價資訊的User Control <%@ Control Language="VB" AutoEventWireup="false" … %> <asp:Label ID="Label1" Text="公司代號:" Runat="server"></asp:Label> <asp:TextBox ID="TextBox1" Runat="server>MSFT</asp:TextBox> <asp:Button ID="btnQuery" Text="查詢" Runat="server" OnClick="btnQuery_Click" /> <hr /> <asp:DataList ID="DataList1" Runat="server" BackColor="White"> <ItemTemplate> <table> <tr> <td style="width: 100px" align="right"> <span style="font-family: 新細明體">最新價格:</span></td> <td style="width: 100px" align="right"><%# Eval("Last") %></td> </tr> ... </table> </ItemTemplate> </asp:DataList>

製作查詢股價資訊的功能 Imports com_webservicex_www Imports System.IO Imports System.Data Sub btnQuery_Click(ByVal sender As Object, ByVal e As System.EventArgs) Dim ws As StockQuote = New StockQuote Dim sr As StringReader = New _ StringReader(ws.GetQuote(TextBox1.Text)) Dim ds As DataSet = New DataSet ds.ReadXml(sr) DataList1.DataSource = ds DataList1.DataBind() End Sub

查詢亞馬遜網站書籍的User Control <%@ Control Language="VB" AutoEventWireup="false" CompileWith="Book.ascx.vb" ClassName="Book_ascx" %> <asp:DataList ID="DataList1" Runat="server" BorderColor="#DEDFDE" BackColor="White"> <ItemTemplate> <table> <tr> <td rowspan=3><img src='<%# Eval("ImageUrlSmall") %>' /></td> <td><asp:HyperLink ID="HyperLink1" Runat=server NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("ProductName") %>'></asp:HyperLink></td> </tr> </table> </ItemTemplate> </asp:DataList>

使用亞馬遜網站的書籍查詢功能 Imports System.Net Imports System.IO Imports System.Data Partial Class Book_ascx Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Me.Load strResult = SearchAmazon.SearchBook(TextBox1.Text) End Sub End Class Public Class SearchAmazon Public Shared Function SearchBook(ByVal author As String) As String Dim url As String = http://xml.amazon.com/onca/xml3?t=webservices-20 …. End Function

製作WebPart類別 繼承自WebPart類別 實作IWebPart介面 使用Web Custom Control製作 使用User Control製作

製作WebPart類別 - 繼承自WebPart類別 自訂屬性 Imports System.Web.UI.WebControls.WebParts Public Class WeatherPart Inherits WebPart <Personalizable(), WebBrowsable()> _ Public Property ZipCode() As String Get Return m_ZipCode End Get Set(ByVal value As String) m_ZipCode = value End Set End Property Protected Overrides Sub RenderContents(ByVal hw As HtmlTextWriter) … End Sub End Class 負責產生WebPart內容

製作WebPart類別 -實作IWebPart介面 <%@ Control Language="VB" AutoEventWireup="false" CompileWith="TranslatePane.ascx.vb" ClassName="TranslatePane_ascx" %> <%@ Implements Interface="System.Web.UI.WebControls.WebParts.IWebPart" %> <script runat="server"> Public ReadOnly Property Subtitle() As String Implements IWebPart.Subtitle Get Return m_Subtitle End Get End Property … </script> <table> <tr> …. 必須實作下列屬性: Subtitle Title Description CatalogIconImageUrl TitleIconImageUrl TitleUrl 負責定義WebPart內容(可以視覺編輯)

在WebPart之間溝通 為網頁加入ConnectionsZone類別 在WebPartManager中定義資訊提供者和資訊消費者 <asp:WebPartManager ID="WebPartManager1" Runat="server"> <StaticConnections> <asp:connection ID="Connection1" providerid="Motor1" ProviderConnectionPointID="MotorIDProvider" consumerid="Order1" ConsumerConnectionPointID="MotorIDConsumer" /> </StaticConnections> </asp:WebPartManager> 指定資訊提供者 指定資訊消費者

製作資訊提供者 Imports System.Web.UI.WebControls.WebParts Interface IMotorInfo Property MotorID() As Integer End Interface Public Class MotorPart Inherits WebPart Implements IMotorInfo <ConnectionProvider("MotorIDProvider", "MotorIDProvider")> _ Private Function ProvideMotorInfo() As IMotorInfo Return Me End Function … End Class 定義提供者和消費者溝通的介面 資訊提供者名稱

製作資訊消費者 Imports System.Web.UI.WebControls.WebParts … Public Class OrderPart Inherits WebPart <ConnectionConsumer("MotorIDConsumer", "MotorIDConsumer")> _ Private Sub GetMotorInfo(ByVal MotorInfo As IMotorInfo) If Not MotorInfo Is Nothing Then m_MotorID = MotorInfo.MotorID FindOrders() Else Throw New NotSupportedException("No connection data found.") End If End Sub End Class 指定資訊消費者

在WebPart之間溝通 透 過 介 面 溝 通

ConnectionsZone常用的屬性 屬性名稱 內容值 HeaderText 連結設定區 InstructionTitle 管理[{0}]的連結對象 InstructionText 管理WebPart之間目前的連結設定 NoExistingConnectionTitle 未設定任何連結 NoExistingConnectionText 請點選上方的超連結設定WebPart之間的連結 ConnectVerb Text項目：連結 DiconnectVerb Text項目：中斷 HeaderCloseVerb Text項目：關閉 CloseVerb CancelVerb Text項目：取消 ConnectToProviderText 設定資訊提供者的連結對象 ConnectToProviderTitle 從Web Part取得資料

ConnectionsZone常用的屬性(續) ConnectToConsumerText 設定資訊消費者 ConnectToConsumerTitle 傳送資料至Web Part ConnectToProviderInstructionText 設定資訊提供者的連結對象 ConnectToConsumerInstructionText GetText 取得: GetFromText 自: ProvidersTitle 提供者 ConsumersTitle 消費者 ConsumersInstructionText 欲取得資訊的對象 ProvidersInstructionText 使用此資訊的WebPart ConfigureVerb 編輯 SendText 傳送: SendToText 至:

利用ConnectionsZone控制提供者與消費者的連結

利用ConnectionsZone擴充網頁的內容 供應商 客戶

WebPart Import/Export – 共享設定 將ExportMode屬性設定成All或NonSensitiveData 只有繼承自WebPart類別的WebPart可以設定 將WebPart的設定匯出成副檔名為(.WebPart)的XML文件 將WebPart標註成Personalizable的屬性匯出 由使用該WebPart的網頁匯入儲存在.WebPart檔案中的屬性內容值 必須依靠ImportCatalogPart類別

.WebPart檔案範例 <?xml version="1.0" encoding="utf-8"?> <webParts> <webPart> <metaData> <type name="MyWebPart.WeatherPart" /> <importErrorMessage>Cannot import this Web Part.</importErrorMessage> </metaData> <data> <properties> <property name="TitleIconImageUrl" /> … </properties> </data> </webPart> </webParts>

ImportCatalogPart常用的屬性 屬性名稱 內容值 Title 匯入Web Part設定 UploadButtonText 匯入 UploadHelpText 選妥.WebPart檔案後按下[匯入]鍵執行匯入. BrowseHelpText 請使用[瀏覽]鍵瀏覽到欲匯入的.WebPart檔案 PartImportErrorLabelText 匯入Web Part發生錯誤 ImportedPartLabelText 匯入WebPart設定

美化WebPart 設定WebPartZone的屬性 製作Theme與Skin 套用Theme CssClass屬性 HeaderStyle屬性 FooterStyle屬性 PartStyle屬性 PartTitleStyle屬性 CloseVerb, MinimizeVerb, RestoreVerb屬性的ImageUrl屬性 製作Theme與Skin 套用Theme

製作Theme 製作Theme <asp:WebPartZone Runat="server" CssClass="clsPartContainer"> <PartTitleStyle CssClass="clsPartHead"></PartTitleStyle> <FooterStyle CssClass="clsPartBottom"></FooterStyle> <CloseVerb ImageUrl="~/images/CloseVerb.gif"></CloseVerb> <RestoreVerb ImageUrl="~/images/chevronUp.gif"></RestoreVerb> <HeaderStyle CssClass="clsPartContainer"></HeaderStyle> <MinimizeVerb ImageUrl="~/images/chevronDown.gif"></MinimizeVerb> <PartStyle CssClass="clsPartContent"></PartStyle> </asp:WebPartZone>

套用Theme 套用Theme到網頁 套用Theme到整個網站 <system.web> <%@ Page theme="Theme名稱" ... %> 套用Theme到整個網站 <system.web> <pages theme="Theme名稱" /> … </system.web>

加入登入管制 使用ASP.NET Configuration Tool 使用Login相關的控制項 使用ASP.NET 2.0的Membership功能

啟動ASP.NET Configuration Tool 使用WebSite|ASP.NET Configuration功能

加入Login.aspx網頁 加入Login控制項 不同的使用者各自擁有自己的WebPart設定

For VS.NET 2003的使用者 下載Web Part Templates for Visual Studio .NET http://www.microsoft.com/downloads/details.aspx?FamilyID=cac3e0d2-bec1-494c-a74e-75936b88e3b5&DisplayLang=en

AppearanceEditorPart DeclarativeCatalogPart PropertyGridEditorPart 摘要 WebPartManager CatalogZone EditorZone WebPartPageMenu PageCatalogPart AppearanceEditorPart WebPartZone ImportCatalogPart BehaviorEditorPart WebPart DeclarativeCatalogPart LayoutEditorPart ConnectionsZone 不需要放 任何東西 PropertyGridEditorPart xxZone為容器, 用來放置xxPart零件, 另外再加上WebPartManager, WebPartPageMenu

參考資料 http://msdn.microsoft.com/msdnmag/issues/04/06/ASPNET20Portals/ http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnvs05/html/WebParts.asp Introducing ASP.NET 2.0, Dino Esposito, Microsoft Press