s WEB FORMS UI in VB.NET

Generator PDF-417 2d barcode in VB.NET s WEB FORMS UI

ASP .NET 2.0 supports the concept of themes for a website, where the visual appearance of the site is defined by a theme: a group of files in a theme-specific subdirectory beneath the App_Themes directory in the virtual root. A theme is a group of style sheets, graphics, and control skins that describe the appearance of a site. A given site can have many themes, and you can even allow the user to choose between them if you so desire. Notice how all of the regions in the master page are set up using div tags. No appearance characteristics are specified in the page itself. Instead, the actual appearance is defined by a CSS style sheet contained within the current theme for the site. The PTWeb site includes and uses a Basic theme. The use of the Basic theme is set up in web.config: <pages theme="Basic" styleSheetTheme="Basic"> The theme property sets the default runtime theme, while styleSheetTheme sets the theme for use at design time in Visual Studio. The styleSheetTheme property should be removed when the website is deployed to a production server. The files defining this theme are in the App_Themes/Basic folder beneath the virtual root. You should notice that the names of the css and skin files match the name of the theme folder itself. Having the names match allows ASP.NET to automatically realize that it needs to use these files when the theme is selected for the website. The files in this theme are listed in Table 10-4. Table 10-4. Files in the Basic Theme

The style sheet for the site The skins for GridView, DetailsView, and Login controls The background graphic for the header region The graphic for the rounded corner in the upper-left

Combined, these files define the look and feel of the site. This includes defining the appearance of the regions in MasterPage.master. For instance, the header region is defined in the css file like this: #header { background-image: url('images/background.jpg'); background-repeat: no-repeat; height: 64px; line-height: 60px; text-align: left; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bold; font-style: italic; padding-left: 10px } A control skin defines the appearance of specific controls in the website, such as GridView, TextBox, and so forth. For instance, the appearance of the Login control is defined in the skin file like this:

<asp:Login runat="server" BackColor="#DEDEDE" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="10pt"> <TitleTextStyle BackColor="Black" Font-Bold="True" Font-Names="Verdana" Font-Size="10pt" ForeColor="White" /> </asp:Login> Each type of control in Web Forms has different options you can set in a skin file, allowing you to set the appearance of each control in many ways. By making the site theme-enabled, you can easily change the appearance of the site later by creating a new theme directory and similar theme files, and setting the theme property in web.config to use the new theme.

The header region of the page is the title area across the top. It contains a single Label control named PageTitle. This control displays the title of the current content page, based on the Title property set for that page. The following code is included in MasterPage.master to load this value: Protected Sub Page_Load( _ ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load PageTitle.Text = Page.Title End Sub As each content page loads, not only does the Load event for the content page run, but so does the Load event for the master page. This means that code can be placed in the master page to run when any content page is loaded in this case, to set the title at the top of the page.

The navigation region displays the navigation links down the left side of each page. To do this, a web.sitemap file and associated SiteMapDataSource control are used to load the overall structure of the site into memory. This data is then data bound to a TreeView control for display to the user. The web.sitemap file is an XML file that contains a node for each page to be displayed in the navigation region: < xml version="1.0" encoding="utf-8" > <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="~/Default.aspx" title="Home" description="Main page" /> <siteMapNode url="~/ProjectList.aspx" title="Project list" description="Project list" /> <siteMapNode url="~/ResourceList.aspx" title="Resource list" description="Resource list" /> <siteMapNode url="~/RolesEdit.aspx" title="Project roles" description="Project roles" /> </siteMapNode> </siteMap> The site map concept can be used to define hierarchical website structures, but in this case, I m using it to define a flat structure. Notice how each <siteMapNode> element defines a page except the first one. That root node is required in the file, but since I m defining a flat structure,