Master Pages Navigation Minder

7/31/2019 Master Pages Navigation Minder

1/71

Master Pagesand

Site Navigation

Minder [email protected]


2/71

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/71


Master Pages


4/71


Master Page Basics

Masters define common content andplaceholders ()

Content pages reference masters and fillplaceholders with content ()


5/71


Resulting Page

Master Page Architecture

< asp : ContentPlaceHolder

runat = server

ContentName = Main / >

< asp : ContentPlaceHolder

runat = server

ContentName = Footer / >

.

Master file A.master

.

< asp : Content

runat = server

ContentName =Footer

>

< / asp : Content >

< asp : Content

runat = server

ContentName = Main >

< / asp : Content >

Content file B.aspx


6/71


Create a New Master Page


7/71Master page & Navigation - 7 Minder Chen 1994-2006

Use Table for Layout Control



Set up the Master Page



Defining a Master Page

ACME Inc.



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)



Modified Master Page

Untitled Page

Minder Chen ASP.NET Learning Web Site



Default Content

ContentPlaceHolder controls can definecontent of their own ("default content")

Default content is displayed ONLY if notoverridden by content page

...

This is default content that will appear in the absence of a

matching Content control in a content page



Create a Content Page

C



Add a Content Page based on a Master Page



Create a Content Page: Applying a Master Page

This content fills the content place holder "Main" defined in the master page (site.Master)

U i M t P



Using a Master Page

1. Create an ASP.NET page (.aspx extension)

2. On the page directive: attribute to reference masterSet the title attribute

3. Optionally add content to override the master:a. Only controls or server-side script allowedb. controls replace regions in the master:

The contentplaceholderid identifies masters region controls can contain any page content

A C t t P ith M t P A li d



A Content Page with a Master Page Applied

C d f Ab tUS



Code for AboutUS.aspx

This is a web site developedby 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 usingASP.NET. He can be reached at [email protected]

A l i M t P t Sit



Applying a Master Page to a Site

Th P M t P t



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 contentdefined in the master page

Use FindControl for weak typing

Use public property in master page for strongtyping (preferred)

Sit N i ti



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

Provider-based for flexibility

Sit N i ti S h


22/71


Site Navigation Schema

Site Navigation API

Site Maps

Web.sitemapOther

Data Stores

ControlsMenu TreeView SiteMapPath

SiteMap-DataSource

SiteMap

SiteMapNodeSiteMapNode SiteMapNode

XmlSiteMapProviderOther Site Map

Providers

Providers

Example of Menu Controls and SiteMapPath


23/71


Example of Menu Controls and SiteMapPath

Navigation


24/71


Navigation

Create a Site Map


25/71


Create a Site Map

Web sitemap


26/71


Web.sitemap

XML document is "very" case sensitive

SiteMapDataSource


27/71


SiteMapDataSource

Data source controlrepresenting site maps

Site map = List of pages andURLs

Nodes can includedescriptive text

Permits TreeViews andMenus to be populated withlinks through data binding

Supports "securitytrimming"

Specified nodes visible onlyto specified roles

Provider-based for flexibledata storage

Bind Menu Control with SiteMapDataSource


28/71


Bind Menu Control with SiteMapDataSource

Menu


29/71


Menu

200+ Properties; here are the top 4:

Orientation = Horizontal

StaticDisplayLevels = 2

StaticSubMenuIndent = 0

DisappearAfter = 300

Menu Control Tag


30/71


Menu Control Tag

SiteMapPath Controls


31/71


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 acquirepath info

Stylizing SiteMapPath


32/71


Stylizing SiteMapPath

Menu or Tree: Choosing the right control


33/71


Menu or Tree:Choosing the right control

Features Menu TreeviewExpansion PopOut Expand in Place

Download on Demand No Yes

Checkboxes No Yes

Templates Yes No

Layout Horizontal &Vertical

Vertical

Mobile & Downlevel Yes Yes

Style Option Static, Dynamic,Level

Level or Parent/Root/Leafby data item

Selection Model Link & Hover Postback, link & disabled

Theme and Skin


34/71


Theme and Skin

Add a Style Sheet in a Theme


35/71


Add a Style Sheet in a Theme


36/71



37/71


Style Builder Build Style Rule


38/71


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/71


Apply Themes to the Web Site


40/71


Apply Themes to the Web Site

To apply a theme to an individual page


41/71


To apply a theme to an individual page

Themes: Architecture


42/71


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

Themes: Recommended usage


43/71


Themes:Recommended usage

Do as much as you can inside the Style Sheet Foreground Images cant be controlled by

CSS, so use Skins

Advanced controls, use Skins

Themes: Advanced scenarios


44/71


Themes: d a ced sce a os

StyleSheetTheme vs. Just Theme

Dynamically Switching Themes

Extreme Changes

Skin


45/71


Skin

SkinFile.skin


46/71


SkinFile.skin


47/71


Sample Code


48/71


Sample CodeYou need to use Theme in order to use Skin

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

End Sub

Contact Information

Email:

UI Tricks and Tips


49/71


U c s a d ps

UITricksTips.aspx


50/71


U c s ps asp

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 SubProtected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

LabelMsg.Text = "Thank you for testing this. Please continue!"

End SubProtected 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

Continued


51/71


Continued


52/71


Test

Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test

Test
Test
Test
Test
Test
Test
Test


53/71


TreeView Controls


54/71


Render hierarchical data as trees

Expandable and collapsible branches

Nodes are navigable, selectable, or static and caninclude 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

Declaring a TreeView


55/71


g


56/71


y p

Name Description

ShowExpandCollapse Specifies whether expand/collapse indicators are shown

ExpandDepth Specifies the TreeView's initial expand depth

LevelStyles Specifies appearance of nodes by level

RootNodeStyle Specifies appearance of root nodes

LeafNodeStyle Specifies appearance of leaf nodes

SelectedNodeStyle Specifies appearance of selected nodes

HoverNodeStyle Specifies appearance of nodes when cursor hovers overhead

NodeStyle Specifies default appearance of nodes

Create a New Site Map


57/71


p

XML Site Map


58/71


p

TreeViews and Site Maps


59/71


p

Changing the File Name


60/71


g g

Attributes


61/71


p

Name Description

description Description of node

roles Role or roles for which this node is visible*

title Title of this node

url URL of this node

* Multiple roles can be specified using comma- or semicolon-delimited lists

Security Trimming


62/71


y g

Enabling Security Trimming


63/71


SiteMapDataSource Properties


64/71


Name Description

SiteMapProvider Name of provider used to obtain site map data

StartingNodeOffset Starting node identified by level (default = 0)

StartingNodeUrl Starting node identified by URL

StartFromCurrentNode Specifies whether starting node should be the root node(false) or the current node (true). Default = false

Provider Provider used to obtain site map data

ShowStartingNode Specifies whether to show the root node

Hiding the Root Site Map Node


65/71


Using SiteMapPath


66/71


Key SiteMapPath Properties


67/71


Name Description

CurrentNodeStyle Style used to render the current node

CurrentNodeTemplate HTML template used to render the current node

NodeStyle

NodeStyleTemplate

PathSeparatorStyle Style 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

PathSeparator Text used for node separators (default = ">")

Site Map Providers


68/71


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

Site Map API


69/71


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

Using the Site Map API


70/71


' Write the title of the current node to a Label controlLabel1.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 ()

SiteMap.ResolveSiteMap


71/71

Fired by SiteMapPath controls

Used to perform on-the-fly customization ofpaths displayed by SiteMapPath controls

Add nodes to site map for pages that don't appearin the site map

Change the properties of the current node

Register handler in Application_Start

Master Pages Navigation Minder

Documents

Transcript of Master Pages Navigation Minder