逐步解說:使用其他內容建立網站定義
本逐步解說示範如何建立功能更完整的網站定義,該定義會併入您可能加入至網站定義的幾個項目。 這是員工定位程式網站定義,可讓您根據員工的名稱和他們工作所在的國家地區,於 Bing 地圖上尋找員工。
本逐步解說將示範下列工作:
使用 Visual Studio 專案範本建立網站定義。
在方案中加入及併入自訂主版頁面。
將視覺 Web 組件加入至方案。
將自訂欄位加入至方案。
加入包含自訂欄位的內容類型。
根據內容類型加入清單定義。
針對與網站定義一起部署的清單加入清單執行個體和預設資料。
將視覺 Web 組件加入網站的 default.aspx 頁面來自訂它。
在視覺 Web 組件上自訂使用者控制項。
將視覺 Web 組件上出現的自訂商標影像加入至方案。
![]() |
---|
您的電腦可能會在下列說明中,以不同名稱或位置顯示某些 Visual Studio 使用者介面項目。 您所擁有的 Visual Studio 版本以及使用的設定會決定這些項目。 如需詳細資訊,請參閱 Visual Studio 設定。 |
必要條件
您需要下列元件才能完成此逐步解說:
支援的 Microsoft Windows 和 SharePoint 版本。 如需詳細資訊,請參閱 開發 SharePoint 方案的要求.
SharePoint Designer 2010。
Visual Studio 2010。
Bing Maps 平台開發人員帳戶認證 您可以在 Bing Maps 帳戶中心 (英文) 註冊免費的開發人員帳戶。
建立網站定義方案
首先,在 Visual Studio 中建立網站定義專案。
若要建立網站定義專案
指向 [檔案] 功能表上的 [新增],然後按一下 [專案],顯示 [新增專案] 對話方塊。
展開 [Visual C#] 或 [Visual Basic] 底下的 [SharePoint] 節點,然後按一下 [2010]。
在範本窗格中,選取 [網站定義]。
在 [名稱] 方塊中輸入 Testsitedef2,然後按一下 [確定]。
[SharePoint 自訂精靈] 隨即出現。
在 [指定網站和安全性層級進行偵錯] 頁面上,輸入您想要偵錯網站定義之 SharePoint 伺服器網站的 URL,或使用預設位置 (http://system name/)。
在 [此 SharePoint 方案的信任層級為何?] 區段中,使用 [部署為陣列方案] 預設值。
所有網站定義專案都必須部署為陣列方案。 如需沙箱化方案與陣列方案的比較的詳細資訊,請參閱沙箱化方案考量。
按一下 [完成]。 專案隨即出現在 [方案總管] 中。
加入商標影像
接下來,將影像加入至方案中,當做網站定義內的公司商標使用。
若要加入影像
在 [方案總管] 中,以滑鼠右鍵按一下專案節點、指向 [加入],然後按一下 [SharePoint「影像」對應資料夾]。
因為 [影像] 資料夾會直接對應到 SharePoint 檔案系統,所以加入其中的檔案會部署到 SharePoint /images 資料夾,並可在 SharePoint 中使用。
以滑鼠右鍵按一下 [影像] 底下的 [TestSiteDef2] 資料夾,指向 [加入],然後按一下 [現有項目]。 選取要當做商標使用的影像檔,然後按一下 [加入]。
另外,您也可以按一下捷徑功能表上的 [新增項目],並建立新的影像,但是您的影像類型選擇會受到限制。 通常使用另一個工具建立影像比較理想。
如果您要將其他影像加入至方案中,請重複步驟 2。 例如,您可以加入另一個影像,當做本主題稍後加入之影像控制項的預留位置。
加入自訂主版頁面
如果您希望網站定義使用自訂主版頁面,您可以將一個定義加入至方案。
若要加入自訂主版頁面
建立主版頁面。 如需詳細資訊,請參閱 ASP.NET 主版頁面。
將自訂主版頁面匯出然後匯入 Visual Studio,如逐步解說:匯入自訂主版頁面及包含影像的網站頁面中所概述。
將主版頁面加入至模組。 若要這樣做,請以滑鼠右鍵按一下 [方案總管] 中的專案節點,指向 [加入],然後按一下 [新增項目]。
在 [加入新項目] 對話方塊的 SharePoint 範本清單中,選取 [模組]。 為此模組提供名稱。
在此模組中,請刪除預設 Sample.txt 檔。
將資料夾加入名為 _catalogs 的模組,然後在其下方加入另一個名為 masterpage 的資料夾。
這會符合 SharePoint 中其他主版頁面的檔案位置。
在 [masterpage] 資料夾下方加入主版頁面。 若要這樣做,請選取模組節點,然後按一下 [專案] 功能表上的 [加入現有項目]。 找出主版頁面,並加以選取。 主版頁面檔案的副檔名為 .master。
將主版頁面的 [部署衝突解決] 設定變更為 [自動]。
在模組中按兩下 Elements.xml,即可在 XML 設計工具中將它開啟。
您必須更新 Elements.xml 檔案來參考主版頁面。
以下列標記取代現有的模組標記。
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <Module Name="[Module Name]" Url="_catalogs/masterpage"> <File Path="[Module Name]\_catalogs\masterpage\[Master Page Name].master" Url="[Master Page Name].master" Type="GhostableInLibrary" /> </Module> </Elements>
請務必使用模組和主版頁面的實際名稱來取代預留位置值。
在 default.aspx 檔案中變更主版頁面的名稱。 例如,如果主版頁面稱為 "newmaster.master",您會使用以下程式碼。
<%@ Page language="C#" MasterPageFile="~/_catalogs/masterpage/newmaster.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
儲存專案。
定義自訂欄位
定義之後用來建立自訂清單的自訂欄位。 這些欄位會提供網站定義中的程式碼所需的額外資料。
若要定義自訂欄位
在 [方案總管] 中,以滑鼠右鍵按一下網站定義節點、指向 [加入],然後按一下 [新增項目]。
在範本清單中,選取 [空元素],並將此元素命名為 SiteColumns。
在 Elements.xml 檔案中,以下列項目取代標記。
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <Field ID="{587DE9D5-618C-42C4-A754-06EA36CF7496}" Type="Text" Name="Latitude" DisplayName="Latitude" Group="Coordinates"/> <Field ID="{5D1CFF2C-8032-4792-AB34-8E0A0520B478}" Type="Text" Name="Longitude" DisplayName="Longitude" Group="Coordinates"/> <Field ID="{8B7E3CC0-40B5-465E-81FE-D63B7471B7CE}" Type="Text" Name="Region" DisplayName="Region" Group="Coordinates"/> <Field ID="{8A152314-DB62-4EC7-96E7-E28F8A253B1D}" Type="Text" Name="StaffNumber" DisplayName="StaffNumber" Group="Coordinates"/> </Elements>
此標記會將四個自訂欄位加入至 SharePoint:Latitude、Longitude、Region 和 StaffNumber。 這些欄位是用來識別員工以及其位置。 您可以視需要加入其他欄位。 使用 [工具] 功能表上的 [建立 GUID] 工具,為每一個額外的欄位產生唯一的 GUID。
注意事項
如果您重新執行這個方案,請註解欄位定義,以避免錯誤發生。
儲存專案。
加入內容類型
建立參考新欄位的內容類型。
若要加入內容類型
在 [方案總管] 中,以滑鼠右鍵按一下網站定義節點、指向 [加入],然後按一下 [新增項目]。
在範本清單中選取 [內容類型],並將新的內容類型命名為 StaffListContentType。
在 [選擇內容類型設定] 頁面上,於基本連絡人類型的清單中選取 [連絡人]。
在 Elements.xml 檔案中,針對內容類型以下列項目取代標記:
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <!-- Parent ContentType: Contact (0x0106) --> <ContentType ID="0x010600a024d6b9cf214430a254b1272eaedc4f" Name="TestSiteDef2 - StaffListContentType" Group="Custom Content Types" Description="My Content Type" Inherits="TRUE" Version="0"> <FieldRefs> <FieldRef ID="{587DE9D5-618C-42C4-A754-06EA36CF7496}" Name="Latitude" DisplayName="Latitude"/> <FieldRef ID="{5D1CFF2C-8032-4792-AB34-8E0A0520B478}" Name="Longitude" DisplayName="Longitude"/> <FieldRef ID="{8B7E3CC0-40B5-465E-81FE-D63B7471B7CE}" Name="Region" DisplayName="Region"/> <FieldRef ID="{8A152314-DB62-4EC7-96E7-E28F8A253B1D}" Name="StaffNumber" DisplayName="StaffNumber"/> </FieldRefs> </ContentType> </Elements>
儲存專案。
加入清單定義
建立參考新的內容類型的清單定義。
若要加入清單定義
在 [方案總管] 中,以滑鼠右鍵按一下網站定義節點、指向 [加入],然後按一下 [新增項目]。
在範本清單中選取 [內容類型中的清單定義],然後將清單定義命名為 StaffListDefinition。
在 [選擇清單定義設定] 頁面上,使用顯示名稱和基底內容類型的預設值。 清除 [加入這個清單定義的清單執行個體] 方塊,然後按一下 [完成]。
這會讓清單定義根據新的內容類型。 您之後會在 onet.xml 檔案中建立此清單的執行個體。
按兩下 Schema.xml 將它開啟。 請注意,已經在檔案的頂端參考自訂欄位。
將預設清單資料加入至 onet.xml
若要在部署網站定義之後,將新的清單定義執行個體與一些預設員工資訊提供給員工清單,請將資料加入至網站定義的 onet.xml 檔。
若要將清單資料加入至 onet.xml
按兩下 onet.xml 檔,將它開啟。
以下列標記取代 <Lists/> 標籤。
<Lists> <List Title="StaffList" FeatureId="fea29b33-8752-45d4-a5bd-6f7a54db7d49" Url="Lists/TestSiteDef2-StaffList" Description="" Type="10000"> <Data> <Rows> <Row> <Field Name="FirstName">David</Field> <Field Name="FullName">David Pelton</Field> <Field Name="Region">Northwest</Field> <Field Name="Longitude">-122.33</Field> <Field Name="Latitude">47.60</Field> <Field Name="StaffNumber">100200</Field> </Row> <Row> <Field Name="FirstName">Joe</Field> <Field Name="FullName">Joe Healy</Field> <Field Name="Region">Southwest</Field> <Field Name="Longitude">-115.13</Field> <Field Name="Latitude">36.15</Field> <Field Name="StaffNumber">100300</Field> </Row> <Row> <Field Name="FirstName">Lisa</Field> <Field Name="FullName">Lisa Andrews</Field> <Field Name="Region">Northeast</Field> <Field Name="Longitude">-73.98</Field> <Field Name="Latitude">40.75</Field> <Field Name="StaffNumber">100400</Field> </Row> <Row> <Field Name="FirstName">Chris</Field> <Field Name="FullName">Chris Ashton</Field> <Field Name="Region">Southeast</Field> <Field Name="Longitude">-84.38</Field> <Field Name="Latitude">33.76</Field> <Field Name="StaffNumber">100500</Field> </Row> </Rows> </Data> </List> </Lists>
將此功能的範圍設定為網站層級。 若要這樣做,請在 [方案總管] 中按兩下此功能檔案,即可在功能設計工具中將它開啟。 在功能設計工具中,將 [範圍] 設定為 [網站]。
儲存專案。
加入 Bing Maps Service 的參考
呼叫 Bing Maps Imagery 服務,提供地圖來顯示選定員工的位置。
若要將 Bing Maps Imagery 服務加入至方案
加入專案的服務參考。 若要這樣做,請在 [方案總管] 中以滑鼠右鍵按一下專案節點,然後按一下 [加入服務參考]。
在 [加入服務參考] 對話方塊的 [位址] 方塊中,輸入下列 URL。
http://dev.virtualearth.net/webservices/v1/imageryservice/imageryservice.svc?wsdl
按一下 [移至],並在 [命名空間] 方塊中輸入 ImageryService,然後按一下 [確定]。
從網站定義中刪除 app.config 檔。
此服務加入的這個檔案會提供必要的端點與繫結。 但是,它無法與 SharePoint 方案一起正常運作,所以之後會透過程式碼加入它的功能。
Bing Maps Web 服務要求您必須擁有 Bing Maps 金鑰,才能提出要求。 請在 Bing Maps 帳戶中心 (英文) 登入您的帳戶來取得金鑰。
建立具有控制項的視覺 Web 組件
接下來,請建立具有控制項的視覺 Web 組件,使其出現在網站定義的主頁面。
若要建立視覺 Web 組件
在 [方案總管] 中,以滑鼠右鍵按一下網站定義節點、指向 [加入],然後按一下 [新增項目]。
在範本清單中選取 [視覺 Web 組件],並針對此 Web 組件的名稱使用預設值 VisualWebPart1。
在 VisualWebPart1UserControl.ascx 的現有標記底下,加入下列程式碼。
<style type="text/css"> .style4 { height: 205px; width: 187px; } .style5 { height: 396px; width: 187px; } .style7 { height: 205px; width: 291px; } .style8 { height: 396px; width: 291px; } </style> <table style="width: 100%;"> <tr> <td align="center" class="style4" valign="middle"> <asp:Image ID="Image1" runat="server" Height="200px" ImageUrl="~/_layouts/images/TestSiteDef2/logo.jpg" Width="350px" /> </td> <td class="style7"> <asp:Label ID="Label1" runat="server" Font-Size="XX-Large" Font-Underline="True" Text="Tailspin Toys"></asp:Label> <br /> <br /> <asp:Label ID="Label7" runat="server" Font-Size="X-Large" Font-Underline="False" Text="Employee Locator"></asp:Label> </td> </tr> <tr> <td class="style5" valign="top"> <br /> <asp:Label ID="Label2" runat="server" Font-Size="Large" Text="Region:"></asp:Label> <br /> <asp:DropDownList ID="DropDownList1" runat="server" Height="24px" Width="352px" onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True"> <asp:ListItem>Northeast</asp:ListItem> <asp:ListItem>Northwest</asp:ListItem> <asp:ListItem>Southeast</asp:ListItem> <asp:ListItem>Southwest</asp:ListItem> </asp:DropDownList> <br /> <br /> <asp:Label ID="Label6" runat="server" Font-Size="Large" Text="Staff:"></asp:Label> <br /> <asp:ListBox ID="ListBox1" runat="server" Width="352px" onselectedindexchanged="ListBox1_SelectedIndexChanged" AutoPostBack="True"></asp:ListBox> <br /> <br /> </td> <td class="style8"> <br /> <asp:Label ID="Label5" runat="server" Font-Size="Large" Text="Map Location:"></asp:Label> <br /> <asp:Image ID="Image2" runat="server" Height="388px" ImageUrl="" Width="465px" /> </td> </tr> </table> <br />
這樣會將下列項目加入至頁面上:標題、商標影像、包含地區的下拉式清單方塊、員工名稱的清單方塊,以及顯示地圖的影像控制項。
開啟位於 VisualWebPart1UserControl.ascx 底下的 VisualWebPart1UserControl.ascx.cs 檔,並使用下列程式碼取代其程式碼。
using System; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; using TestSiteDef2.ImageryService; using System.ServiceModel; using System.ServiceModel.Channels; using System.Text; namespace TestSiteDef2.SiteDefinition.VisualWebPart1 { public partial class VisualWebPart1UserControl : UserControl { protected void Page_Load(object sender, EventArgs e) { } protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { string selectedRegion = DropDownList1.SelectedItem.Text; SPSite site = new SPSite(Context.Request.Url.AbsoluteUri); // Add the SharePoint server name below. string webName = Context.Request.Url.AbsoluteUri.Replace("https://localhost/", ""); webName = webName.Replace("http://[SharePoint Server Name]/", ""); webName = webName.Replace("/default.aspx", ""); SPWeb web = site.AllWebs[webName]; SPList list = web.Lists["StaffList"]; ListBox1.Items.Clear(); foreach (SPListItem item in list.Items) { if (item["Region"].ToString() == selectedRegion) { // LinkTitle == LastName -> see schema.xml ListBox1.Items.Add(item["StaffNumber"] + ": " + item["FullName"].ToString()); } } } protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e) { // Reference the site based on its URL. SPSite site = new SPSite(Context.Request.Url.AbsoluteUri); // Add the SharePoint server name below. string webName = Context.Request.Url.AbsoluteUri.Replace("https://localhost/", ""); webName = webName.Replace("http://[SharePoint Server Name]/", ""); webName = webName.Replace("/default.aspx", ""); SPWeb web = site.AllWebs[webName]; // Reference the new list "StaffList" (as defined in onet.xml). SPList list = web.Lists["StaffList"]; // Get the string entered in the listbox, split it up. // String format: ("XXXXXX: First Last") string fullName = ListBox1.SelectedItem.Text; string[] splitStr = fullName.Split(':'); string longitude = ""; string latitude = ""; // Iterate through list, get the latitude/longitude // values for the selected employee's StaffNumber. foreach (SPListItem item in list.Items) { if (splitStr[0] == item["StaffNumber"].ToString()) { longitude = item["Longitude"].ToString(); latitude = item["Latitude"].ToString(); break; } } // Fetch the Bing map based on the selected employee's // latitude and longitude. ShowMap(longitude, latitude); } public void ShowMap(string Longitude, string Latitude) { Image2.ImageUrl = GetMap(Latitude, Longitude, Latitude + "," + Longitude); } private string GetMap(string Latitude, string Longitude, string locationString) { // Set the address to the Bing Maps imagery service. EndpointAddress address = new EndpointAddress("http://dev.virtualearth.net/webservices/v1/imageryservice/imageryservice.svc"); // Set up the binding, channel, and Bing Maps key. BasicHttpBinding binding = new BasicHttpBinding(); binding.UseDefaultWebProxy = true; ChannelFactory<IImageryService> factory = new ChannelFactory<IImageryService>(binding, address); IImageryService channel = factory.CreateChannel(address); // Add your key below. string key = "[Bing Maps key]"; MapUriRequest mapUriRequest = new MapUriRequest(); // Set credentials using a valid Bing Maps key mapUriRequest.Credentials = new ImageryService.Credentials(); mapUriRequest.Credentials.ApplicationId = key; // Set the location of the requested image. mapUriRequest.Center = new ImageryService.Location(); string[] digits = locationString.Split(','); mapUriRequest.Center.Latitude = double.Parse(digits[0].Trim()); mapUriRequest.Center.Longitude = double.Parse(digits[1].Trim()); // Set the map style and zoom level. MapUriOptions mapUriOptions = new MapUriOptions(); mapUriOptions.Style = MapStyle.AerialWithLabels; mapUriOptions.ZoomLevel = 17; // Set the size of the requested image in pixels. mapUriOptions.ImageSize = new ImageryService.SizeOfint(); mapUriOptions.ImageSize.Height = 388; mapUriOptions.ImageSize.Width = 465; mapUriOptions.Style = MapStyle.AerialWithLabels; mapUriRequest.Options = mapUriOptions; // Add a pushpin to the current location. ImageryService.Pushpin[] MapPins = new ImageryService.Pushpin[1]; MapPins[0] = new Pushpin(); MapPins[0].IconStyle = "34"; MapPins[0].Location = new Location(); MapPins[0].Location.Latitude = Convert.ToDouble(Latitude); MapPins[0].Location.Longitude = Convert.ToDouble(Longitude); mapUriRequest.Pushpins = MapPins; // Open the channel and retrieve the map. ((IChannel)channel).Open(); MapUriResponse mapUriResponse = channel.GetMapUri(mapUriRequest); ((IChannel)channel).Close(); return mapUriResponse.Uri; } } }
將視覺 Web 組件加入至 default.aspx 頁面
接下來,將視覺 Web 組件加入至網站定義的 default.aspx 頁面。
若要將視覺 Web 組件加入至 default.aspx 頁面
開啟 default.aspx 頁面,然後在 WebPartPages 標籤底下加入下列標記。
<%@ Register Tagprefix="MyWebPartControls" Namespace="TestSiteDef2.SiteDefinition.VisualWebPart1" Assembly="$SharePoint.Project.AssemblyFullName$" %>
這一行會將 MyWebPartControls 名稱與 Web 組件及其程式碼產生關聯。 Namespace 參數和 VisualWebPart1Usercontrol.ascx 程式碼檔中使用的命名空間相同。
在 </asp:Content> 項目之後,使用下列標記取代整個 ContentPlaceHolderId="PlaceHolderMain" 區段及其內容。
<asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderMain" runat="server"> <h1> Welcome to Tailspin Toys </h1> <MyWebPartControls:VisualWebPart1 runat="server" /> </asp:Content>
此標記會建立您先前所建立之視覺 Web 組件的參考。
執行和部署網站定義方案
接下來,執行專案並將它部署至 SharePoint。
若要執行和部署網站定義
- 按 F5。 Visual Studio 會編譯程式碼、加入專案的功能、將所有檔案封裝至 .wsp 檔案,然後將 .wsp 檔案部署至 SharePoint Server。 SharePoint 接著會安裝檔案、啟動功能,並顯示 [新增 SharePoint 網站] 頁面。
根據網站定義建立網站
使用新的網站定義建立新的網站。
若要使用網站定義建立網站
SharePoint 網站上隨即出現 [新增 SharePoint 網站] 頁面。
在 [標題和說明] 區段中,輸入「我的新網站」做為標題,並輸入網站的描述。
在 [網站位址] 區段的 [URL 名稱] 方塊中,輸入 mynewsite。
在 [範本] 區段中,按一下 [SharePoint 自訂] 索引標籤,然後選取 [選取範本] 清單中的 [TestSiteDef2]。
保留其他設定的預設值,然後按一下 [建立]。
新網站隨即出現。
測試新的網站
接下來,測試新網站來確定是否正常運作。
若要測試新網站
在 [區域] 底下的方塊中,按一下其中一個位置。
該區域的員工名稱會出現在 [員工] 清單中。
在 [員工] 清單中,按一下員工的名稱。
員工的地圖位置會出現在影像控制項內。
注意事項
如果無法使用 Bing Maps 服務,您可能會得到 "EndPointNotFoundException" 錯誤。 如果發生這種情況,請稍後再重試。