View
839
Download
1
Category
Tags:
Preview:
Citation preview
Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User Interface Elements
Fritz OnionCofounder Pluralsight LLChttp://pluralsight.com/fritz/
Introduction to ASP.NET 2.0
A four-part webcast series for developers new to Microsoft® ASP.NET (two deliveries: Microsoft® Visual C# and Microsoft® Visual Basic .NET)
Lectures with accompanying labs
Date Topic
Mon, Feb. 19, 10 A.M. ASP.NET 2.0 Fundamentals (C#)
Tue, Feb. 20, 10 A.M. User Interface Elements (C#)
Wed, Feb. 21, 10 A.M. DataBinding and AJAX (C#)
Thu, Feb. 22, 10 A.M. Configuration and Deployment (C#)
Mon, Feb. 19, 1 P.M. ASP.NET 2.0 Fundamentals (VB)
Tue, Feb. 20, 1 P.M. User Interface Elements (VB)
Wed, Feb. 21, 1 P.M. DataBinding and AJAX (VB)
Thu, Feb. 22, 1 P.M. Configuration and Deployment (VB)
Agenda
Master pages
Creating templated sites
Implementation
Uses
Themes and skins
Defined
Components of
Uses
Navigation controls
TreeView
Menu
SiteMapPath
Master Pages
Application-wide templates now easy to define
Create one 'master' page with place holders for content
<!-- MasterPage.master --><%@ master language="C#" %><html><body><form runat="server"><h1>My common header</h1><asp:contentplaceholder id="MainContentPlaceHolder"
runat="server" />...
<!-- Page1.aspx --><%@ page language="C#" master="~/MasterPage.master" %><asp:content id="Content1"
contentplaceholderid="MainContentPlaceHolder"runat="server">
<asp:button id="Button1" runat="server" text="Button" /></asp:content>
Master Pages: Designer Support
Master page
portion is visible
but read-only
Content
placeholders
are editable
Master Page Implementation
The MasterPage base class inherits from UserControl
At run time, the master page is injected as the first control in each content page
Content controls on content pages are then injected into content placeholder elements
Similar to technique used by many templating systems in ASP.NET version 1.1 today
Accessing the Master Page
Since the master 'page' ends up being just another control on each page, you can interact with it like any other composite control
void Page_Load(object sender, EventArgs e){HtmlForm f = (HtmlForm)Master.FindControl("_theForm");if (f != null){
// use f here...}
}
Strongly Typed Master Page Access
Can strongly type master page access
Useful when accessing properties in master
Make sure same master page is always set
<%@ Page Language="C#"MasterPageFile="~/MasterPage.master"Title="Page2" %>
<%@ MasterType VirtualPath="~/MasterPage.master" %>
<%
<% %>
%>
Changing the Master Page
You can set the master page programmatically, but only before the Init event fires:
protected override void OnPreInit(EventArgs e){this.MasterPageFile = "othertemplate.master";
base.OnPreInit(e);}
Themes
Support for 'skinnable' sites using themes
<%@ Page Language="C#" Theme="SmokeAndGlass" %>
<%@ Page Language="C#" Theme="BasicBlue" %>
What Is a Theme?
A directory under App_Themes
Contains one or more .skin files
.skin file contains control declarations with default attributes
Contains zero or more .css files
Contains zero or more subdirectories with resources
<!-- FallTheme.skin -->
<asp:button runat="server" borderstyle="Solid"
borderwidth="2px" bordercolor="Gold"
backcolor="DarkRed" />
...
Changing Themes
You can programmatically change a themeMust be done in PreInit event handler of page
protected override void OnPreInit(EventArgs e)
{
Page.Theme = "autumn";
base.OnPreInit(e);
}
You can enable themes globally in web.config<configuration>
<system.web>
<pages theme="autumn" />
...
You can disable themes locally <asp:TextBox EnableTheming="false" ...
Theme Application
By default, .skin properties override local properties
Use @Page 'StyleSheetTheme' for the inverse
Exempt controls locally from themes with EnableTheming='false'
Exempt an entire page with @Page 'EnableTheming='false'
SkinIDs
Can define multiple controls of the same type in .skin
Uniquely identify each control with 'SkinID'
Select which control skin to apply in target control with 'SkinID'
<!-- FallTheme.skin -->
<asp:TextBox runat="server" backcolor="DarkRed" />
<asp:TextBox runat="server" backcolor="DarkRed"
Font-StrikeOut="true" SkinID="strikeOut" />
Navigation Controls
Three new controls targeted at site navigation
TreeView
Hierarchical rendering with images and text
Menu
Both dynamic and static rendering supported
SiteMapPath
'Breadcrumbs' control
All three controls can use SiteMapProvider
Default data source draws from web.sitemap
Standard XML format for page navigation
SiteMapProvider
SiteMapDataSource uses the default SiteMapProvider
Defaults to XmlSiteMapProvider implementation which reads XML data from web.sitemap file
<siteMap
xmlns="http://schemas.microsoft.com/..." >
<siteMapNode title="Home" url="~/Default.aspx" description="Go To Home">
<siteMapNode title="Departments" url="~/departments/default.aspx"
description="Go To Departments page"> ...
SiteMapProvider
XmlSiteMapProviderweb.sitemap
SiteMapPath Control
Provides 'breadcrumbs' implementation
Data retrieved directly from SiteMapProvider (no need to explicitly connect to data source)
<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana"
Font-Size="0.8em" PathSeparator=" : ">
<PathSeparatorStyle Font-Bold="True" ForeColor="#990000" />
<CurrentNodeStyle ForeColor="#333333" />
<NodeStyle Font-Bold="True" ForeColor="#990000" />
<RootNodeStyle Font-Bold="True" ForeColor="#FF8000" />
</asp:SiteMapPath>
<siteMap
xmlns="http://schemas.microsoft.com/..." >
<siteMapNode title="Home" url="~/Default.aspx" description="Go To Home">
<siteMapNode title="Departments" url="~/departments/default.aspx"
description="Go To Departments page"> ...
TreeView Control
Truly hierarchical tree control
Can be bound to any XML data source (more later)
Convenient to bind to SiteMapDataSource to provide tree-navigation for a site
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="siteMapDataSource"
ImageSet="Simple" NodeIndent="10">
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle Font-Underline="True"... />
<NodeStyle Font-Names="Verdana" ... />
<HoverNodeStyle Font-Underline="True" .../>
</asp:TreeView>
<asp:SiteMapDataSource ID="siteMapDataSource"
runat="server" />
Menu Control
Dynamic or static menu rendering
Can be driven from any XML data source
Most common to map onto SiteMapDataSource<asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6"
DataSourceID="siteMapDataSource"
MaximumDynamicDisplayLevels="10" StaticSubMenuIndent="10px" />
<asp:SiteMapDataSource ID="siteMapDataSource" runat="server" />
Summary
Master pagesStandard implementation of templated pages
Designer/runtime support
Themes and skinsCollection of pluggable UI elements
Unify images, .css, and control declarations
New navigation controlsStandard implementations of Menu, Tree, and SiteMapPath
Flexible, provider driven (or data source driven)
UI is extremely customizable
Lab Work
Lab 2 builds a site using the UI elements presented in this module
Create a new site with a master page
Define a theme with a style sheet and a skin
Create navigation with a sitemap, menu, and sitemappath
Questions and Answers
Submit text questions using the “Ask” button.
Don’t forget to fill out the survey.
For upcoming and previously live webcasts: www.microsoft.com/webcasts
Got webcast content ideas? Contact us at: http://go.microsoft.com/fwlink/?LinkId=41781
Today's webcast was presented using Microsoft®
Office Live Meeting. Get a free 14-day trial by
visiting: www.microsoft.com/presentlive
Recommended