The Connected Generation

1
The Connected Generation

• 7 8 March 2006
• ICC Gent

2
Master pages, Themes, and Site Navigation

• Andres Sanabria
• Andress_at_Microsoft.com
• Lead Program Manager
• ASP.Net

3
Agenda

• Master Page
• Themes
• Site Navigation
• Summary

4
Web Sites Today

• Most Web Site follow a design template
• Overall layout
• Header
• Footer
• Navigation

5
Web Sites Today
Header
6
Web Sites Today
Navigation
7
Web Sites Today
Content
8
Web Sites Today

• Footer

9
Web Sites Today
Header
Navigation
Content

• Footer

10
Web Sites Today
Header
Navigation
Content

• Footer

11
Current Web Approaches

• User Controls
• Include File

12
Current Web ApproachesUser Controls

• Encapsulate each user interface partinto a user
  control
• Reference each user control fromthe page
• Challenges
• Mismatched html tags
• Ex table tag for the header and footer
• Each page contains references to the appropriate
  User Controls
• Must touch every page to update controls

13
Current Web ApproachesInclude File

• Insert the content of another file into a web
  page
• Challenges
• Mismatched html tags
• Ex table tag for the header and footer
• Each page contains references to the appropriate
  Include file
• Must touch every page to update include file

14
Introducing Master Page

• Enable flexible and reusable userinterface
  templates
• Contains
• Page layout(HTML Table)
• Content(Header, Footer, ML, HTML,ASP.NET
  controls)
• Place holder regions for content in the pages
• Benefits
• Consistent Page Layout
• Shared UI Code Elements
• Can be defined programmatically and declaratively
• Rich Visual Studio Whidbey designer-support

15
How Master Pages WorkDesign time
MySite.master
Default.aspx
lt_at_ Master gt
lt_at_ Page Master/mySiteMaster gt
Header
ltaspContent ContentPlaceHolderIdMainContent /gt
Navigation
ltaspContentPlaceHolder IdMainContent /gt
Footer
16
How Master Pages WorkRuntime
http//serverName/SiteName/Default.aspx
Header
Navigation
Default page content
Footer

• Default.aspxs content replace the contentPlace
  holder of the master page at runtime

17
Creating A Master Page
lt_at_ Master language"VB"gt lthtmlgt lthead
runat"server"gt lt/headgt ltbodygt ltform id"form1"
runat"server"gt lttablegt lttr
gtlttdgtlth1gtlt!-- Header goes here --gtlt/h1gtlt/tdgtlt/trgt
lttrgt lttdgtlth2gtlt!-- Navigation goes here
--gtlt/h2gtlt/tdgtlt/trgt lttrgtlttdgt lt!--
Content Place holder without default content --gt
ltaspcontentplaceholder idLeftSideContent
" runat"server/gt lt/tdgt lttdgt
lt!-- Content Place holder withdefault content
--gt ltaspcontentplaceholder
idRightSideContent" runat"server"gt
ltasplabel runatServer idfoogtDefault
content!!!lt/asplabelgt lt/aspcontentplaceh
oldergt lt/tdgtlt/trgtlt/tablegt
lt/formgt lt/bodygt lt/htmlgt
MySite.master
18
Creating A Master Page
lt_at_ master language"VB"gt lthtmlgt lthead
runat"server"gt lt/headgt ltbodygt ltform id"form1"
runat"server"gt lttablegt lttr
gtlttdgtlth1gtlt!-- Header goes here --gtlt/h1gtlt/tdgtlt/trgt
lttrgt lttdgtlth2gtlt!-- Navigation goes here
--gtlt/h2gtlt/tdgtlt/trgt lttrgtlttdgt lt!--
Content Place holder without default content --gt
ltaspcontentplaceholder idLeftSideContent
" runat"server/gt lt/tdgt lttdgt
lt!-- Content Place holder withdefault content
--gt ltaspcontentplaceholder
idrightSideContent" runat"server"gt
ltasplabel runatServer idfoogtDefault
content!!!lt/asplabelgt lt/aspcontentplaceh
oldergt lt/tdgtlt/trgtlt/tablegt
lt/formgt lt/bodygt lt/htmlgt
MySite.master
19
Using The Master Page
lt_at_ page language"VB" master"/Mysite.master"
gt ltaspcontent id"Content1"
contentplaceholderidLeftSideContent"gt
ltH2gtNavigation lt/h2gt ltasptreeview
idNavigation tree" runat"server
datasourceidNavSource/gt lt/aspcontentgt
ltaspcontent id"Content1" contentplaceholderid
RightSideContent"gt ltasplabel
runat"server"gtSupport sectionlt/asplabelgt
lt/aspcontentgt
Default.aspx
lt_at_ page language"VB" master"/Mysite.master"
gt ltaspcontent id"Content1"
contentplaceholderidRightSideContent"gt
ltasplogin id"Login1" runat"server"gtlt/aspLogingt
lt/aspcontentgt
Login.aspx
20
Using The Master Page
21
Master PageDevice Specific

• Mechanism to override the master page based on
  the requesting device
• Improve the end user experience

lt_at_ page language"VB" master"/Mysite.master
" iemaster/MysiteIE.master Longhornma
ster/MysiteLonghorn.master Mozillamaster
/MysiteMozilla.master gt lt_at_ page
language"VB" master"/Mysite.master" gt
ltaspcontent id"Content1" contentplaceholderid
LeftSideContent"gt ltH2gtNavigation lt/h2gt
ltasptreeview idNavigation tree" runat"server
datasourceidNavSource/gt lt/aspcontentgt
ltaspcontent id"Content1" contentplaceholderid
RightSideContent"gt ltasplabel
runat"server"gtSupport sectionlt/asplabelgt
lt/aspcontentgt
Default.aspx
22
Master PageNested Master

• Enable developers a way to define a Master page
  for a master
• Useful when site enforces a layout but allow site
  section with a nested to define sub-layouts

23
Master PagesNested Master
Content Place Holder
Site.Master
24
Master PagesNested Master
Content Place Holder
DevelopmentTools.Master
25
Master PagesNested Master
HowToBuy.aspx
Partners.aspx
26
How Master Pages WorkNested Master
ProductSection.master
MySite.master
lt_at_ Master gt
lt_at_ Master Master/mySiteMaster gt
Header
ltaspContent ContentPlaceHolderIdMainContent
/gt
Navigation
ltaspContentPlaceHolder IdMainContent /gt
ltaspContentPlaceHolder IdLeftSide /gt
ltaspContentPlaceHolder IdCenter/gt
ltaspContentPlaceHolder IdRigth/gt
Footer
27
Master PagesNested Master
lt_at_ Page language"VB"gt lthtmlgtlthead
runat"server"gtlt/headgtltbodygtltform id"form1"
runat"server"gt lttablegt lttr
gtlttdgtlth1gtlt!-- Header goes here --gtlt/h1gtlt/tdgtlt/trgt
lttrgt lttdgtlth2gtlt!-- Navigation goes here
--gtlt/h2gtlt/tdgtlt/trgt lttrgtlttdgt lt!--
Content Place holder without default content --gt
ltaspcontentplaceholder idLeftSideContent
" runat"server/gt lt/tdgt lttdgt
lt!-- Content Place holder withdefault content
--gt ltaspcontentplaceholder
idRightSideContent" runat"server"gt
ltasplabel runatServer idfoogtDefault
content!!!lt/asplabelgt lt/aspcontentplaceh
oldergt lt/tdgtlt/trgtlt/tablegt
lt/formgt lt/bodygt lt/htmlgt
MySite.master
28
Master PagesNested Master
lt_at_ master language"VB master"/Mysite.master"
gt ltaspContent contentplaceholderidRightSide
" runat"server"gt lttablegt lttr gt
lttdgtlt!-- some content goes here --gtlt/tdgt
lttdgtltaspcontentplaceholder idMainContent"
runat"server /gtlt/tdgt lt/trgt lttr gt
lttdgtlt!-- Footer content--gtlt/tdgt lt/trgt
lttablegt lt/aspcontentplaceholdergt
ProductSection.master
29
Master PageProgrammability

• Page can access the master page
• Page.Master property
• Can access public properties in Master
• FindControl to access controls
• Page can set its master page dynamically
• Page.MasterPageFile property
• Dynamically set Master from the page
• Ex. Co branding of the site

30
Master PageConfiguration

• Page level configuration
• Site wide configuration

lt_at_ master language"VB master"/Mysite.master"
gt
ltconfigurationgt ltsystem.webgt ltpages
masterPageFile"MySite.Master" /gt
lt/system.webgt lt/configurationgt
31
Nested Master Pages
32
Agenda

• Master Page
• Themes
• Site Navigation
• Summary

33
Web Sites Today

• Customize the visual appearance of aweb site or
  page
• Enforce a look and fell in the site
• Current web approaches
• Inline Style
• Challenges
• Developer must touch every control
• Dynamic controls does not get default style
  information
• CSS Stylesheet
• Challenges
• Dynamic controls does not get default style
  information
• Does not work on control properties,
  collectionor templates

34
Introducing Themes

• A mechanism to customize the visual appearance of
  user interfaces
• Contains
• Skin
• Set of properties to be applied to one or more
  server controls of a given type
• Style
• CSS files
• Resources
• Images
• Master Pages
• Benefits
• Consistent Look and feel for a control(s)or
  application

35
Themes

• Application Themes
• \themes directory of application
• Theme name is defined by the directory name

36
Theming Label Control
37
How To Create A Theme

• Create a Themes directory
• Create a Directory in the theme directory
• Add the skins and other files

38
How To Create A Skin

• Create text file with .skin extension
• Add control-level definitions
• Properties (if property exposed as theme-able)
• Including Databinding code
• Templates
• Collections
• To create an optional skin for apre-define
  control
• Define the SkinId property of the control

39
Creating A Skins

• lt ! Default Skin --!gt
• ltasplabel runat"server"
• font-namesverdana,arial" font-size"10pt
• ForeColor"000066" BackColor"transparent" /gt
• lt ! Title Skin --!gt
• ltasplabel runat"server" idfoo skinidTitle
• font-names"verdana,arial" font-size"18pt"
• ForeColor"000066" BackColor"transparent"
  font-bold"true" font-underline"true" /gt

LabelControlSkins.Skins
40
Using Theme And Skin

• On the page
• Define a reference to the theme
• Note Links are page relative
• On a control
• Define nothing. If a default control skin exists
  it will be picked up
• Define the skinid on the control will utilize
  the named skin
• Prevent themeing by
• EnableThemeingfalse on page or control
• All child controls inherit the parent setting

41
Using Theme And Skin
lt_at_ Page language"VB themeBabyBoygt lthtmlgtlthe
ad runat"server"gtlt/headgtltbodygtltform id"form1"
runat"server"gt lttablegt lttr
gtlttdgtlth1gtltasplabel runatServer skinidTitle
idfoo textDefault /gtlt/tdgtlt/trgt lttrgt
lttdgtlth2gtlt!-- Navigation goes here
--gtlt/h2gtlt/tdgtlt/trgt lttrgtlttdgt lt!--
Content Place holder without default content --gt
ltaspcontentplaceholder idLeftSideContent
" runat"server/gt lt/tdgt lttdgt
lt!-- Content Place holder withdefault content
--gt ltaspcontentplaceholder
idRightSideContent" runat"server"gt
ltasplabel runatServer idfoogtDefault
content!!!lt/asplabelgt lt/aspcontentplaceh
oldergt lt/tdgtlt/trgtlt/tablegt
lt/formgt lt/bodygt lt/htmlgt
Default.aspx
42
Building A Theme And A Skin
43
Themes Configuration

• Page level configuration
• Site wide configuration

lt_at_ master language"VB themeBasicBlue" gt
ltconfigurationgt ltsystem.webgt ltpages
theme"SmokeAndGlass" /gt lt/system.webgt lt/config
urationgt
44
ThemesProgrammability

• Theme can be set programmatically

// Themes are set in the PreInit method void
PreInit (object sender,System.EventArgs args)
this.Theme Profile.ThemeName
ltpersonalization enabledtruegt
ltprofilegt ltproperty nameThemeName /gt
lt/profilegt lt/personalizationgt
45
Setting A Theme Programmatically
46
Agenda

• Master Page
• Themes
• Site Navigation
• Summary

47
Web Sites Today

• Need a consistent way to provide navigation
• Current solution
• Add hyperlinks within pages
• User controls that encapsulate the hyperlinks
• Challenges
• Manage large site navigation
• Maintain navigation while page move around

48
Site Navigation

• Provide a consistent, and easy way to manage
  navigation for a site
• Site Map
• Describe the logical structure of the site
• Build in support for XML Site Map
• Site Map OM
• APIs to interact with the Site Map
• Site Map Datasource
• Bind to data bound controls
• Site Map Controls
• Rich control that display navigation on your
  pages, drivenof the Site Map
• Site Map Provider
• ASP.NET Extensible model

49
Site Navigation Site Navigation Summary
User Interface
SiteMapPath
ltasptreview /gt
Data Bound controls
SiteMapPathDataSource
Application Programming Interface
Site Map
Provider Model Design Pattern
Data Storage
XML File App.Sitemap
User Defined
50
Site Navigation Site Map

• Contains the site's structure description
• File called app.SiteMap
• XML file format

ltsiteMapgt ltsiteMapNode title"Home"
description"Home" url"default.aspx" gt
ltsiteMapNode title"Products" description"Our
products" url"Products.aspx?foobar"gt
ltsiteMapNode title"Hardware" description"Hard
ware choices" url"Hardware.aspx" /gt
ltsiteMapNode title"Software" description"Soft
ware choices" url"Software.aspx" /gt
lt/siteMapNodegt lt/siteMapNodegt
lt/siteMapNodegt lt/siteMapgt
51
Site Navigation Site Map Data source
lt_at_ page language"VB" theme"Smokeandglass"gt ltht
mlgt ltbodygtltform runat"server"gt
ltaspsitemapdatasource id"SiteMapDataSource1"
runat"server" startingnodetype"Current"
sitemapviewtype"Flat" /gt
ltaspbulletedlist id"BulletedList1"
runat"server" displaymode"HyperLink" datasour
ceid"SiteMapDataSource1" datatextfield"Title"
datavaluefield"Url" bulletstyle"Circle
" gt lt/aspbulletedlistgt
lt/formgt lt/bodygt lt/htmlgt
52
Introducing Site Navigation Site Navigation
Controls

• TreeView
• Rich server control for rendering hierarchy
• Provides client script anddown-level renderings
• Also supports adaptive UI for mobile devices
• Supports a wide variety of UI customizations
• Node images, expand/collapse icons, tree lines,
  checkboxes, styles and themes
• Supports navigation or postback selection
• Integrates with SiteMapDataSource
• Can create tree nodes declaratively, from code,
  or through binding to a data source
• Can populate nodes on demand from the client
  using new ICallBackHandler feature

53
Site Navigation Site Navigation Controls
lt_at_ page language"VB" gt lthtmlgt ltbodygt ltform
id"form1" runat"server"gt
ltaspsitemapdatasource id"SiteMapDataSource1"
runat"server" startingnodetype"Current"
/gt ltasptreeview id"TreeView1"
runat"server" datasourceid"SiteMapDataSource1"
gt lt/asptreeviewgt lt/formgt lt/bodygt lt/html
gt
54
Introducing Site Navigation Site Navigation
Controls

• TreeView

55
Introducing Site Navigation Site Navigation
Controls

• SiteMapPath
• Linear path view from root to current node
• also known as a breadcrumb or eyebrow
• No Site Map Datasource control required
• Object Model
• PathDirection Gets or sets the order that the
  navigation path nodes are rendered in.
• PathSeparator Gets or sets the string that
  delimits SiteMapPath nodes in the rendered
  navigation path.
• ParentLevelsDisplayed Define the number of
  parent to display.

56
Using The Navigation Controls
57
Site Navigation Site Map Provider

• Extensible framework
• Provide a way to describe information about your
  site in some other way than XML
• Retrieve site information from a DataBase
• Define a site map file that has a different
  layout than the app.sitemap file
• Responsible for retrieving and storing the Site
  map information

58
Summary

• Now easier than ever before to
• Build Site structure by using Master Page
• Define a common look and feel in a site by using
  Themes and Skins
• Provide a rich site navigation by using Site Map,
  Site Map Control, Site Map Datasource

59
Questions ??
60
(No Transcript)