Wednesday, October 12, 2011

Site Navigation

Site Structure- logical categories of a website’s pages
Create the site’s structure
Then create the site’s navigation
A Site’s navigation is used to assist user to browse your site
ASP.Net navigation controls:
  • Menu
  • Treeview
  • breadcrumbs
ASP.Net uses a sitemap to document the site’s structure
A sitemap is an XML file
It defines the logical sections of the site
And may tie each section to a URL
After you have your sitemap you can use several ASP.Net controls to navigate the site
  • SiteMapPath
    • Create a breadcrumb
      • A single line of text showing the user their location in the website structure
  • TreeView
    • Provides a hierarchical view of the site’s structure
    • Renders as an expandable/cdollapsible tree
  • Menu
    • Menu items and subitems
Updating the sitemap immediately updates the navigational controls

Define the sitemap

Try this in Visual Studio 2005
  • Open Visual Studio
  • Add a new webform
  • Name it navigate.aspx
  • Add 4 more aspx pages, name them page1.aspx, page2.aspx,page3.aspx,page4.aspx
  • Add text to each page identifying it
  • Add a new item
  • Select sitemap, it should name it web.sitemap
Site Map
Put the sitemap in the root directory.
You need to edit this xml file manually

It has a sitemap element
Inside are a couple siteMapNode elements
Each siteMapNode has a title, URL, and description attribute
Add a siteMapNode for each page

Notice the navigate siteMapNode is surrounding the others
A sitemap can be set up in spite of which directories a page may be in


Using Breadcrumb Navigation


The siteMapPath control displays a breadcrumb
You can use it to show the user where they are in the site
It also allows the user to move back to higher levels
You must have a sitemap for this control
  • Drag a siteMapPath control to page1.aspx
  • Test it
It displays a breadcrumb showing where in the site the user is
  • Add a siteMapPath control to each page

Customize the appearance
  • Change the path separator property to a pipe symbol
                   

There are 3 types of nodes
  • Root Node
    • Each siteMapPath has one root node
  • Current Node
    • Each siteMapPath has one Current node
    • The current node matches the page the user is on
  • General Nodes
    • Rest of the nodes
  • Click the smart tag on the siteMapPath control
  • Select auto Format
  • Pick a different format
            


TreeView

TreeView allows the user to navigate through the entire site
A treeview control requires a siteMapDataSource control which allows the control to automatically get the data for navigation Each node in the tree is rendered as a hyperlink to the particular page
  • Add a SiteMapPathControl to the page
  • Add a treeView control to the page
  • Using the smart tag pick the SiteMapDataSource as the dataSource
  • Test it
There are 4 types of nodes in a treeview
  • Root Node
    • Each siteMapPath has one root node
  • Selected Node
    • The current node matches the page the user is on
  • Parent Nodes
    • A node that has children besides the root node
  • Leaf Nodes
    • Nodes that have a parent but no children

Customizing

Click the autoformat option in the smart tag of the treeView
There are also several property that you can attach a style sheet to
  • nodeStyle
    • default style of all nodes in the treeView
  • HoverNodeStyle
    • Style spplied when the user hovers his mouse over a  certain node
  • levelStyles
    • allows you to apply style info for certain levels of the treeview
Other properties
collapseImageToolTip Tooltop shown to the user hovering over expand and collapse.You can use {0} in the property to use the nodes text
CollapseImageURL Image URL for the collapse icon
ExpandImageURL Image URL for the expand icon
NoExpandImageURL Image URL for leaf icon
ImageSet Package of images can be used to define treeView images
NodeIndent Number of pixels to indent, 20 by default
NodeWrap Boolean property. If node’s text will wrap. Default is false
ShowExpandCollapse Boolean. If expand and collapse icons are show, true by default
ShowLines Boolean. If lines are drawn between each node
The imageSet has a list of packaged images to display next to icons
  • Choices like:
    Custom
  • XPFileExplorer
  • Msdn
  • Windowshelp
  • Simple1 and 2
  • Bulletedlist 1,2,3,4
  • Arrows
  • News
  • contacts
  • Inbox
  • events
  • faq

Each provide different images for expand, collapse, for nonLeaf nodes and images for nonexpendable and nonCollapsible leaf
You can provide your own images by setting it to custom and providing the URLs to the custom images in the CollapseImageURL, ExpandImageURL and noExpandImageURL properties

Menus

The menu will use the sitemap to display each item and it uses submenus for each item in a lower hierarchy
  • Add a menu control
  • Configure it to the siteMapDataAccess Control

The menu control has both static and dynamic parts
The static part is always shown
The dynamic part is shown when the user interacts with it
StaticDisplayLevels property can be used to control how many levels display
  • Set the staticDisplayLevels to 2
  • Set the orientation to horizontal



DisappearAfter property controls how long the submenu appears after the mouse leaves it. The default is 500 for .5 seconds

Appearance of the Menus
The names of the properties start with either static or dynamic
Menu Control Properties
DynamicEnableDefaultPopOutImage
StaticEnableDefaultPopOutImage
If an image is displayed to show an item is a submenu. Default is true
DynamicItemFormatString
StaticItemFormatString
Text of the menu Item. You can use {o} to include the menu item’s sitemap value
DynamicPopOutImageTextFormatString
StaticPopOutImageTextFormatString
Tooltip to display for the pop out. Can use {0}
DynamicPopOutImageURL
Static PopOutImageURL
url of your image if you want to use an image instead of an arrow
StaticSubMenuIndent Indentation between static menu item and its static submenu
Orientation Vertical or horizontal
DynamicHorizontalOffset
DynamicVerticalOffset
Offset in pixelsbetween the right border of a menu and the left border of its submenu item
ItemWrap If text in a menu item should be wrapped. Default is false