Presentation is loading. Please wait.

Presentation is loading. Please wait.

Master Pages and Site Navigation Minder Chen

Similar presentations


Presentation on theme: "Master Pages and Site Navigation Minder Chen"— Presentation transcript:

1 Master Pages and Site Navigation Minder Chen mchen@gmu.edu

2 Master page & Navigation - 2 © Minder Chen, 1994-2006 Microsoft ASP.NET 2.0 UI Features Master Pages –Manage the “skeleton” of your site –Manage the XHTML Themes –Manage the CSS. –Manage the “skin” of your site Menu, Tree View, “Breadcrumbs” –Tools to get around your site Themes and Skins –CSS Additional UI Ticks and Tips

3 Master page & Navigation - 3 © Minder Chen, 1994-2006 Master Pages Master Page Content Page

4 Master page & Navigation - 4 © Minder Chen, 1994-2006 Master Page Basics Masters define common content and placeholders ( ) Content pages reference masters and fill placeholders with content ( ) <asp:ContentPlaceHolder ID="Main" RunAt="server" /> <asp:ContentPlaceHolder ID="Main" RunAt="server" /> <%@ Page MasterPage- File="Site.master" %> <asp:Content ContentPlaceHolderID= "Main" RunAt="server" /> <%@ Page MasterPage- File="Site.master" %> <asp:Content ContentPlaceHolderID= "Main" RunAt="server" /> Site.masterdefault.aspxhttp://.../default.aspx

5 Master page & Navigation - 5 © Minder Chen, 1994-2006 Resulting Page Master Page Architecture <asp:ContentPlaceHolder runat=server ContentName=”Main”/> <asp:ContentPlaceHolder runat=server ContentName=”Footer”/> <%@Master%>. Master file “A.master” <%@Page Master=”A.master”%>. <asp:Content runat=server ContentName=”Footer”> </asp:Content> <asp:Content runat=server ContentName=”Main”> </asp:Content> Content file “B.aspx”

6 Master page & Navigation - 6 © Minder Chen, 1994-2006 Create a New Master Page

7 Master page & Navigation - 7 © Minder Chen, 1994-2006 Use Table for Layout Control

8 Master page & Navigation - 8 © Minder Chen, 1994-2006 Set up the Master Page

9 Master page & Navigation - 9 © Minder Chen, 1994-2006 Defining a Master Page ACME Inc.

10 Master page & Navigation - 10 © Minder Chen, 1994-2006 Master Pages: Creating a master page 1. Create a master page with.master extension 2. Define a master directive: 3. Add content: Can contain any html or control page content Define replaceable place-holder regions: Use an control Add default content within it (optional)

11 Master page & Navigation - 11 © Minder Chen, 1994-2006 Modified Master Page Untitled Page Minder Chen ASP.NET Learning Web Site

12 Master page & Navigation - 12 © Minder Chen, 1994-2006 Default Content ContentPlaceHolder controls can define content of their own ("default content") Default content is displayed ONLY if not overridden by content page... This is default content that will appear in the absence of a matching Content control in a content page

13 Master page & Navigation - 13 © Minder Chen, 1994-2006 Create a Content Page

14 Master page & Navigation - 14 © Minder Chen, 1994-2006 Add a Content Page based on a Master Page

15 Master page & Navigation - 15 © Minder Chen, 1994-2006 Create a Content Page: Applying a Master Page This content fills the content place holder "Main" defined in the master page (site.Master)

16 Master page & Navigation - 16 © Minder Chen, 1994-2006 Using a Master Page 1. Create an ASP.NET page (.aspx extension) 2. On the page directive: attribute to reference master Set the title attribute 3. Optionally add content to override the master: a. Only controls or server-side script allowed b. controls replace regions in the master: The contentplaceholderid identifies master’s region controls can contain any page content

17 Master page & Navigation - 17 © Minder Chen, 1994-2006 A Content Page with a Master Page Applied

18 Master page & Navigation - 18 © Minder Chen, 1994-2006 Code for AboutUS.aspx Title="About US" <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> This is a web site developed by Minder Chen to help others to learn ASp.NET 1.X and 2.0. He has used ASP.NET for more than 3 years by now and has developed a Web-based Decision Support System using ASP.NET. He can be reached at minderchen@hotmail.com

19 Master page & Navigation - 19 © Minder Chen, 1994-2006 Applying a Master Page to a Site

20 Master page & Navigation - 20 © Minder Chen, 1994-2006 The Page.Master Property Retrieves reference to master page –Instance of class derived from System.Web.UI.MasterPage –Null if page doesn't have a master Used to programmatically access content defined in the master page –Use FindControl for weak typing –Use public property in master page for strong typing (preferred)

21 Master page & Navigation - 21 © Minder Chen, 1994-2006 Site Navigation Navigation UIs are tedious to implement –Especially if they rely on client-side script New controls simplify site navigation –TreeView and Menu - Navigation User Interface (UI) –SiteMapDataSource - XML site maps –SiteMapPath - "Bread crumb" controls Public site map API provides foundation ProviderProvider -based for flexibility

22 Master page & Navigation - 22 © Minder Chen, 1994-2006 Site Navigation Schema Site Navigation API Site Maps Web.sitemap Other Data Stores Controls Menu TreeView SiteMapPath SiteMap- DataSource SiteMap- DataSource SiteMap SiteMapNode XmlSiteMapProvider Other Site Map Providers Other Site Map Providers

23 Master page & Navigation - 23 © Minder Chen, 1994-2006 Example of Menu Controls and SiteMapPath

24 Master page & Navigation - 24 © Minder Chen, 1994-2006 Navigation

25 Master page & Navigation - 25 © Minder Chen, 1994-2006 Create a Site Map

26 Master page & Navigation - 26 © Minder Chen, 1994-2006 Web.sitemap XML document is "very" case sensitive <siteMapNode url="AboutUs.aspx" title="About Us" description="Authors and purposes">

27 Master page & Navigation - 27 © Minder Chen, 1994-2006 SiteMapDataSource Data source control representing site maps –Site map = List of pages and URLs –Nodes can include descriptive text Permits TreeViews and Menus to be populated with links through data binding Supports "security trimming" –Specified nodes visible only to specified roles Provider-based for flexible data storage

28 Master page & Navigation - 28 © Minder Chen, 1994-2006 Bind Menu Control with SiteMapDataSource

29 Master page & Navigation - 29 © Minder Chen, 1994-2006 Menu 200+ Properties; here are the top 4: –Orientation = Horizontal –StaticDisplayLevels = 2 –StaticSubMenuIndent = 0 –DisappearAfter = 300

30 Master page & Navigation - 30 © Minder Chen, 1994-2006 Menu Control Tag DataSourceID="SiteMapDataSource1" Orientation="Horizontal"

31 Master page & Navigation - 31 © Minder Chen, 1994-2006 SiteMapPath Controls "Bread crumbs" showing path to page –By default, renders current node as static text –By default, renders parent nodes as hyperlinks Highly customizable UI –Nodes can be stylized and templatized –Separators can be stylized and templatized Integrates with site map providers to acquire path info

32 Master page & Navigation - 32 © Minder Chen, 1994-2006 Stylizing SiteMapPath

33 Master page & Navigation - 33 © Minder Chen, 1994-2006 Menu or Tree: Choosing the right control FeaturesMenuTreeview ExpansionPopOutExpand in Place Download on DemandNoYes CheckboxesNoYes TemplatesYesNo LayoutHorizontal & Vertical Vertical Mobile & DownlevelYes Style OptionStatic, Dynamic, Level Level or Parent/Root/Leaf by data item Selection ModelLink & HoverPostback, link & disabled

34 Master page & Navigation - 34 © Minder Chen, 1994-2006 Theme and Skin

35 Master page & Navigation - 35 © Minder Chen, 1994-2006 Add a Style Sheet in a Theme

36 Master page & Navigation - 36 © Minder Chen, 1994-2006

37 Master page & Navigation - 37 © Minder Chen, 1994-2006

38 Master page & Navigation - 38 © Minder Chen, 1994-2006 Style Builder – Build Style Rule H1 { font-size: 30px; color: yellow; font-style: italic; font-family: 'Comic Sans MS'; background-color: blue; font-variant: small-caps; }

39 Master page & Navigation - 39 © Minder Chen, 1994-2006

40 Master page & Navigation - 40 © Minder Chen, 1994-2006 Apply Themes to the Web Site

41 Master page & Navigation - 41 © Minder Chen, 1994-2006 To apply a theme to an individual page

42 Master page & Navigation - 42 © Minder Chen, 1994-2006 Themes: Architecture Basically: –Inserts a link to your CSS Style Sheet –Updates properties on your controls Two groups of files: –Your site – Nothing here changes –Theme A – Style Sheets, Images, Skins At runtime these files are associated

43 Master page & Navigation - 43 © Minder Chen, 1994-2006 Themes: Recommended usage Do as much as you can inside the Style Sheet Foreground Images can’t be controlled by CSS, so use Skins Advanced controls, use Skins

44 Master page & Navigation - 44 © Minder Chen, 1994-2006 Themes: Advanced scenarios StyleSheetTheme vs. “Just” Theme Dynamically Switching Themes Extreme Changes

45 Master page & Navigation - 45 © Minder Chen, 1994-2006 Skin

46 Master page & Navigation - 46 © Minder Chen, 1994-2006 SkinFile.skin <%-- Default skin template. The following skins are provided as examples only. 1. Named control skin. The SkinId should be uniquely defined because duplicate SkinId's per control type are not allowed in the same theme. 2. Default skin. The SkinId is not defined. Only one default control skin per control type is allowed in the same theme. --%> <asp:Button runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" SkinID="Red" /> <asp:Button runat="server" BackColor="Blue" ForeColor="Yellow" Font-Name="Arial" Font-Size="14px" />

47 Master page & Navigation - 47 © Minder Chen, 1994-2006

48 Master page & Navigation - 48 © Minder Chen, 1994-2006 Sample Code You need to use Theme in order to use Skin <%@ Page Language="VB" Theme="Theme1" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) End Sub Contact Information Email:

49 Master page & Navigation - 49 © Minder Chen, 1994-2006 UI Tricks and Tips

50 Master page & Navigation - 50 © Minder Chen, 1994-2006 UITricksTips.aspx Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) LabelMsg.Text = "" LabelDefault.Text = "" If IsPostBack Then TextBoxPassword.Focus() End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) LabelMsg.Text = "Thank you for testing this. Please continue!" End Sub Protected Sub ButtonDefault_Click(ByVal sender As Object, ByVal e As System.EventArgs) LabelDefault.Text = "You click the default button!" End Sub function HelloAlert() { alert("Hello World"); } Untitled Page <form id="form1" runat="server" defaultfocus="TextBoxUserName" defaultbutton="buttonDefault">

51 Master page & Navigation - 51 © Minder Chen, 1994-2006 Continued… U ser Name:" AssociatedControlID="TextboxUserName"> <asp:TextBox ID="TextBoxUserName" AccessKey="u" runat="server" AutoCompleteType="displayName" /> <asp:RequiredFieldValidator ID="RequiredFieldValidatorUserName" runat="server" ErrorMessage="User name for secured login" ControlToValidate="TextboxUserName" ValidationGroup="userlogin" > <asp:Label ID="LabelPassword" runat="server" AccessKey="p" AssociatedControlID="TextboxPassword" Text=" P assword:"> <asp:Button ID="buttonSumit" runat="server" Text="Secured Login" ValidationGroup="userlogin" /> <asp:Label ID="LabelEmail" runat="server" AccessKey="p" AssociatedControlID="TextboxEmail" Text=" E mail:"> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Email is required for login with email" ControlToValidate="TextboxEmail" ValidationGroup="email" > <asp:Button ID="buttonLoginWithEmail" runat="server" Text="Login with Email" ValidationGroup="email" OnClientClick="HelloAlert();" /> <asp:Image ID="Image1" runat="server" AlternateText="ASP.NET Logo" ImageUrl="~/images/asp_net_logo.gif" DescriptionUrl="~/AboutUs.aspx" />

52 Master page & Navigation - 52 © Minder Chen, 1994-2006 Continued… <asp:Button ID="ButtonDefault" runat="server" Text="Default Button" OnClick="ButtonDefault_Click" /> Test <asp:Button ID="Button1" runat="server" Text="Test Keep Scroll Position" OnClientClick="return confirm('Are you sure you want to submit?');" OnClick="Button1_Click" />

53 Master page & Navigation - 53 © Minder Chen, 1994-2006

54 Master page & Navigation - 54 © Minder Chen, 1994-2006 TreeView Controls Render hierarchical data as trees –Expandable and collapsible branches –Nodes are navigable, selectable, or static and can include check boxes Content defined by TreeNode objects –TreeNodes can be added declaratively, programmatically, or through data binding –TreeNodes can also be demand-loaded Highly customizable UI

55 Master page & Navigation - 55 © Minder Chen, 1994-2006 Declaring a TreeView <asp:TreeNode Text="Programming.NET" RunAt="server" Navigateurl="Classes.aspx?id=1" /> <asp:TreeNode Text="Programming ASP.NET" RunAt="server" NavigateUrl="Classes.aspx?id=2" /> <asp:TreeNode Text="Programming Web Services" RunAt="server" NavigateUrl="Classes.aspx?id=3" /> <asp:TreeNode Text="Consulting" RunAt="server" NavigateUrl="Consulting.aspx" /> <asp:TreeNode Text="Debugging" RunAt="server" NavigateUrl="Debugging.aspx" />

56 Master page & Navigation - 56 © Minder Chen, 1994-2006 Key TreeView Properties NameDescription ShowExpandCollapseSpecifies whether expand/collapse indicators are shown ExpandDepthSpecifies the TreeView's initial expand depth LevelStylesSpecifies appearance of nodes by level RootNodeStyleSpecifies appearance of root nodes LeafNodeStyleSpecifies appearance of leaf nodes SelectedNodeStyleSpecifies appearance of selected nodes HoverNodeStyleSpecifies appearance of nodes when cursor hovers overhead NodeStyleSpecifies default appearance of nodes

57 Master page & Navigation - 57 © Minder Chen, 1994-2006 Create a New Site Map

58 Master page & Navigation - 58 © Minder Chen, 1994-2006 XML Site Map <siteMapNode title="Training" url="Training.aspx" description="Training for.NET developers"> <siteMapNode title="Programming.NET" url="Classes.aspx?id=1" description="All about the.NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" />

59 Master page & Navigation - 59 © Minder Chen, 1994-2006 TreeViews and Site Maps <siteMapNode title="Training" url="Training.aspx" description="Training for.NET developers"> <siteMapNode title="Programming.NET" url="Classes.aspx?id=1" description="All about the.NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> <siteMapNode title="Training" url="Training.aspx" description="Training for.NET developers"> <siteMapNode title="Programming.NET" url="Classes.aspx?id=1" description="All about the.NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> Web.sitemap

60 Master page & Navigation - 60 © Minder Chen, 1994-2006 Changing the File Name <add name="AspNetXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider, System.Web,..." siteMapFile="Acme.sitemap" />

61 Master page & Navigation - 61 © Minder Chen, 1994-2006 Attributes NameDescription descriptionDescription of node rolesRole or roles for which this node is visible* titleTitle of this node urlURL of this node * Multiple roles can be specified using comma- or semicolon-delimited lists

62 Master page & Navigation - 62 © Minder Chen, 1994-2006 Security Trimming <siteMapNode title="Announcements" url="Announcements.aspx" description="Information for all employees" roles="*" /> <siteMapNode title="Salaries" url="Salaries.aspx" description="Salary data" roles="Managers, CEOs" /> Visible only to Managers and CEOs Visible to everyone

63 Master page & Navigation - 63 © Minder Chen, 1994-2006 Enabling Security Trimming <add name="AspNetXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider, System.Web,..." securityTrimmingEnabled="true" siteMapFile="web.sitemap" />

64 Master page & Navigation - 64 © Minder Chen, 1994-2006 SiteMapDataSource Properties NameDescription SiteMapProviderName of provider used to obtain site map data StartingNodeOffsetStarting node identified by level (default = 0) StartingNodeUrlStarting node identified by URL StartFromCurrentNodeSpecifies whether starting node should be the root node (false) or the current node (true). Default = false ProviderProvider used to obtain site map data ShowStartingNodeSpecifies whether to show the root node

65 Master page & Navigation - 65 © Minder Chen, 1994-2006 Hiding the Root Site Map Node <asp:SiteMapDataSource ID="SiteMap" ShowStartingNode="false" RunAt="server" /> <siteMapNode title="Training" url="Training.aspx" description="Training for.NET developers"> <siteMapNode title="Programming.NET" url="Classes.aspx?id=1" description="All about the.NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> <siteMapNode title="Training" url="Training.aspx" description="Training for.NET developers"> <siteMapNode title="Programming.NET" url="Classes.aspx?id=1" description="All about the.NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> Web.sitemap

66 Master page & Navigation - 66 © Minder Chen, 1994-2006 Using SiteMapPath

67 Master page & Navigation - 67 © Minder Chen, 1994-2006 Key SiteMapPath Properties NameDescription CurrentNodeStyleStyle used to render the current node CurrentNodeTemplateHTML template used to render the current node NodeStyle NodeStyleTemplate PathSeparatorStyleStyle used to render node separators PathSeparatorTemplate Style used to render non-current nodes HTML template used to render non-current nodes HTML template used to render node separators PathSeparatorText used for node separators (default = ">")

68 Master page & Navigation - 68 © Minder Chen, 1994-2006 Site Map Providers Site maps are provider-based –Provider interprets site map data and provides it to SiteMapDataSource controls –Provider also tracks current position and provides it to SiteMapPath controls ASP.NET 2.0 ships with one provider –XmlSiteMapProvider Use custom providers for other data stores

69 Master page & Navigation - 69 © Minder Chen, 1994-2006 Site Map API System.Web.SiteMap represents site maps –RootNode property identifies root node –CurrentNode property identifies current node SiteMapNode represents nodes –Interrogate properties of node –Walk up, down, and sideways in the hierarchy The magic underlying SiteMapPath controls Great for customizing SiteMapPaths

70 Master page & Navigation - 70 © Minder Chen, 1994-2006 Using the Site Map API ' Write the title of the current node to a Label control Label1.Text = SiteMap.CurrentNode.Title ' Write the path to the current node to a Label control Dim node As SiteMapNode = SiteMap.CurrentNode Dim builder As New StringBuilder (node.Title) While Not (node.ParentNode Is Nothing) node = node.ParentNode builder.Insert (0, " > ") builder.Insert (0, node.Title) End While Label1.Text = builder.ToString ()

71 Master page & Navigation - 71 © Minder Chen, 1994-2006 SiteMap.ResolveSiteMap Fired by SiteMapPath controls Used to perform on-the-fly customization of paths displayed by SiteMapPath controls –Add nodes to site map for pages that don't appear in the site map –Change the properties of the current node Register handler in Application_Start


Download ppt "Master Pages and Site Navigation Minder Chen"

Similar presentations


Ads by Google