Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

PPBuildWebAppsClass8

VIEWS: 0 PAGES: 41

									Dynamic Web Programming

BUILDING WEB APPLICATIONS USING
ASP.NET, AJAX AND JAVASCRIPT
AGENDA

9. Building ASP.NET Web Sites
9.1 Style Sheets and Themes
9.2 Master Pages
9.3 Web Site Navigation
Building Web Applications Using ASP.NET, AJAX And JavaScript

 9. BUILDING ASP.NET WEB SITES
                                                           178
9.1 STYLE SHEETS AND THEMES
 Building a professional looking web sites takes more than just
 building your individual pages.
 You want to integrate your pages into a unified web application.
 Using cascading style sheets(CSS) is a cross-platform tool to
 centralize formatting of all your pages.
 Built into ASP.NET is Themes, a tool to even apply formatting at
 the control level for your entire application.
 Master Pages is another ASP.NET feature to implement a
 consistent page format throughout your application.
 Web page consists of three different layers:
    Content (HTML)
    Presentation (CSS)
    Behavior (JavaScript)
                                                                      179
9.1 STYLE SHEETS AND THEMES
   Content layer is always present,
   otherwise there would not be no page.
   This page defines the structure and the
   semantics, contains text, video, pictures.
   Presentation layer defines how content
   is to be presented.
   Behavior layer offers real-time user interaction with the page.
Style Sheets
   Style sheets define formats that can be attached to a page.
   Style sheets consists of rules. Each rule defines the format of a
   single component in your web page: h1.name{ formats }
     Before curly braces: Selector (or rule name) HTML Element.name
     Inside curly braces: property:value
                                                            180
9.1 STYLE SHEETS AND THEMES
 Universal selector; * { } applies to all HTML elements
 Element type refers to a specific HTML element: h1 { }
 No name specified then applies to all h1 headings.
 A class selector applies to specified elements with a specified
 class name or simply to a specified class name (meaning no
 element specified) as shown below:
 p.Intro { } , .Intro {   }
 ID selector refers to one specific element on a page since ID is
 unique within a page: #txtName { }
 In ASP.NET, use class or ID selector as you do not know exactly
 how web controls are translated into html controls!
 ASP.NET label control <span id=”label”>This is text</span>
                              181
9.1 STYLE SHEETS AND THEMES
 Once a rule name is
 defined, add
 formatting info.
 To create style sheets
 in Visual Web Developer,
 select Style Sheet
 template.
 Great interface for
 creating style sheets.
 Create separate folder
 for storing style sheets.
                              182
9.1 STYLE SHEETS AND THEMES
  Use GUI to manager
  Style Sheet formats
  We will create a
  new sample web
  site to incorporate
  styles, themes,
  and master pages.
          8-
Example 8-1: Create
  new sample web
  application
  Name web site
  SampleWebApp
                                  183
9.1 STYLE SHEETS AND THEMES
         8-
Example 8-2: Using Style Sheets
  Create new folder
  named StyleSheets.
  Right-click, select
  Add New Item.
  Select Style Sheet.
  To link a style sheet
  to a web page, drag
  style sheet from
  solution explorer
  into head section.
                              184
9.1 STYLE SHEETS AND THEMES
        8-
Example 8-2 (continued):
                                                                      185
9.1 STYLE SHEETS AND THEMES
 Tools built into Visual Web Developer (Visual Studio) to manage
 your styles:
    The Manage Styles window: This window gives you an at-a-glance
    overview of all the styles that are in scope in the current web page, in a
    single list. To show it, open a web page and choose View Manage Styles
    The Style Sheet toolbar: This toolbar is useful when designing a
    stylesheet, and provides buttons for modifying an existing style or adding
    a new style.
    The CSS Properties window: This window allows you to examine a style in
    detail and modify its formatting properties. To use it, choose View ➤ CSS
    Properties.
    The Apply Styles window: This window is very similar to the Manage Styles
    window. It simply organizes the style sheet information in a different way,
    but otherwise serve the same functionality than the Manage Styles
    window.
                                                                       186
9.1 STYLE SHEETS AND THEMES
Themes
  CSS are powerful, so why use Themes? Themes allow you to control
  ASP.NET properties, CSS is “only” for rendered HTML.
  Themes are implemented on the server. Themes do not replace CSS,
  but they have some additional features:
     Themes are control-based, not HTML-based
     Themes are applied on the server
     Themes can be applied through configuration files
     Themes do not cascade in the same way as CSS
  Themes are application specific. Create App_Themes folder.
  Application can contain multiple themes, store them in separate
  folders.
  Create a skin file in the theme folder. Essentially, list of control tags to
  standardize in the application:
  <asp:TextBox runat="server" BackColor="#FFFF99" ForeColor="#CC3300" />
                                                            187
9.1 STYLE SHEETS AND THEMES
 Create one or multiple skin files, at run-time they are all merged
 together into one.
 There is GUI interface, you must type
 skin files manually. (or copy and paste)
 To link a theme to your page:



 You cannot override properties defined by your theme.
 If you want CSS like behavior, then use the StyleSheetTheme
 property in the page directive:
                                                             188
9.1 STYLE SHEETS AND THEMES
 Using this directive allows you to override properties defined in a
 theme at the control level.
 For complex web applications, you probably want different types
 of textbox controls, for example.
 Defining multiple themes for the same control generates a build
 error. You can only have a single default skin for each control.
 To get around this limitation, use SkinID attribute:

 By using SkinID property, you need to specify the SkinID attribute
 in the controls:
                                                                     189
9.1 STYLE SHEETS AND THEMES
 Almost all control properties can be specified in a skin file. If a
 property cannot be declared in a skin, an error is generated.
 For example, you could set all properties for a calendar control in
 a skin file, then simply use the following markup in the aspx
 page: <asp:Calendar ID="Calendar1" runat="server" />
 You may use a stylesheet as part of a theme for a few reasons:
    Style HTML elements that might not correspond to server controls.
    Use a stylesheet because it is more standardized or because it can also
    be used to format static HTML pages.
    Use existing stylesheet and not redo the same formatting in themes.
 Include stylesheet file in theme folder.
 To use themes for the entire app,
 add reference in web.config file.
                                                      190
9.1 STYLE SHEETS AND THEMES
        8-
Example 8-3: Using Themes
  Create App_Themes folder in SampleWebApp project.
  Rename subfolder to BasicTheme.
                                                               191
9.2 MASTER PAGES
  Standardizing the formatting of web site is half the battle.
  Common elements, header, footer, and navigation are needed
  throughout your web app.
  Challenge is to create a simple, flexible layout for entire web site:
     User Controls
     HTML Frames
     Master Pages
Master Page Basic
  Two pages, Master and Content page. At run-time, they are
  merged together.
  Master page defines standard layout, controls, etc.
  Content page is the individual page where non-standard content
  is added.
                                                          192
9.2 MASTER PAGES
 To add a Master page, select the Master Page template.

 Master pages contain ContentPlaceHolder control (not allowed
 in ordinary pages).
 There are two
 ContentPlaceHolder
 controls, one for the head
 section and for the body.
 Master page contains
 form tag, no need for
 content page to add a
 form tag.
 Master pages cannot be requested directly!
                                                           193
9.2 MASTER PAGES
  When creating content
  pages, select Master
  page.
        8-
Example 8-4: Using
  Master Pages
  Add Master Page to
  SampleWebApp project.
  Drag style sheet MainFormat.css into the head section.

  Create content page.
                                                         194
9.2 MASTER PAGES
  The ContentPlaceHolder from the MasterPage is embedded into
  the invididual pages using a Content tag referencing the
  ContentPlaceHolderID from the MasterPage.
  Style sheets can be added to Master Page, but not themes! (Use
  web.config file).
  Supply default content in Master page, is overriden if content
  page provides its own content. Otherwise, default content is
  shown.
         8-
Example 8-4: Using Master Page’s Default Content
                       195
9.2 MASTER PAGES
Advanced Master
  Pages
  HTML uses a
  flow-based layout.
  Page format is
  shifted when
  adding, changing
  content.
  Therefore, use
  table layout or
  CSS positioning
  for stable Master
  page formatting.
                                                    196
9.2 MASTER PAGES
        8-
Example 8-6: Using Master Pages with Table Layout
                                                           197
9.2 MASTER PAGES
  Using CSS positioning makes it easier to write markup code, in
  general. This benefit does not apply so much to Master pages.
  Use div tags in conjunction with position
  attributes top, left, right, and z-index.
         8-
Example 8-7: Using Master Pages
  with CSS based layout
  Create following declaration in
  MainFormat.css style sheet.
                           198
9.2 MASTER PAGES
        8-
Example 8-7 (continued):
                                                         199
9.3 WEB SITE NAVIGATION
 ASP.NET contains built-in navigation systems:
    MultiView and Wizard controls
    Site Map model
    Rich navigational controls
 MultiView Control
 MultiView allows you to declare multiple views and show only
 one at a time.
 There is no default interface, you get whatever HTML and
 controls you add.
 ActiveViewIndex
 determines what view
 will be shown. Default is -1, no view is displayed.
 Use list control to implement navigation for views.
                                                                                             200
9.3 WEB SITE NAVIGATION
                                CommandName       Description
                                PrevView          Moves to the previous view.
  Besides using list NextView       Moves to the next view.
                     SwitchByViewID Moves to the view with a specific ID (string name). The ID is taken
  control, use                      from the CommandArgument property of the button control.

  command buttons SwitchByViewIndex from the CommandArgument property of the button control. taken
                                    Moves to the view with a specific numeric index. The index is


  to allow for move backwards and move next.
         8-
Example 8-8: Using MultiView
  Add new
  page, select
  MasterPage
                                                          201
9.3 WEB SITE NAVIGATION
        8-
Example 8-8 (continued)




  Data Source for DropDownList control is Views property of
  MultiView control.
  Member value is ID field, no need to specify DataText since we
  want to see ID field.
  SelectedIndexChanged event of DropDownList sets the selected
  view.
                                                                    202
9.3 WEB SITE NAVIGATION
Wizard Control
  More glamorous version of MultiView control.
  As MultiView control, it shows one view at a time.
  Contains built-in, yet customizable features (navigation buttons,
  sidebar with step links, styles, templates)
  Define content
  inside
  WizardStep
  Most important
  properties:
     Title: Descriptive name of step.
     StepType: Start, Step, Finish, Complete, Auto.
     AllowReturn: Indicates whether user can return to this step.
                                                                                                  203
9.3 WEB SITE NAVIGATION
 In design view, it also shows
 one view at a time.
 Two wizard programming
 model:
    Commit-as-you-go
    Commit-at-the-end
                  Event                 Description
                  ActiveStepChanged     Occurs when the control switches to a new step (either because the
                                        user has clicked a navigation button or your code has changed the
                                        ActiveStepIndex property).
                  CancelButtonClick     Occurs when the Cancel button is clicked. The cancel button is not
                                        shown by default, but you can add it to every step by setting the
                                        Wizard.DisplayCancelButton property. Usually, a cancel button exits
                                        the wizard. If you don’t have any cleanup code to perform, just set
                                        the CancelDestinationPageUrl property, and the wizard will take care
                                        of the redirection automatically.
                  FinishButtonClick     Occurs when the Finish button is clicked.
                  NextButtonClick and   Occurs when the Next or Previous button is clicked on any step.
                  PreviousButtonClick   However, because there is more than one way to move from one
                                        step to the next, it is better to handle the ActiveStepChanged event.
                  SideBarButtonClick    Occurs when a button in the sidebar area is clicked.
                                    204
9.3 WEB SITE NAVIGATION
        8-
Example 8-9: Using Wizard Control
                                                                       205
9.3 WEB SITE NAVIGATION
 Site Map Model
 ASP.NET navigation is flexible, configurable, and pluggable.
 There are three components:
    XML site map to define navigational structure.
    SiteMapDataSource control to parse site map file.
    Display user’s current position, ability to move to another page
    (breadcrumbs,
    lists, menus,
    trees)
                                                             206
9.3 WEB SITE NAVIGATION
 XMLSiteMapProvider to retrieve site map information from an
 XML file.
 It looks for Web.sitemap file in root of virtual directory.
 Create site map XML file by using built-in template.
 Structure of this file is comprised of introductory XML definition
 and the schema definition followed by the actual site map info.
 Parent Node:
 <siteMapNode> </siteMapNode>
 Insert more nodes in between
 previous tags.
 Nesting determines whether
 child or parent node.
                                                                              207
9.3 WEB SITE NAVIGATION
   Inside node tag, you must define three properties, url, title,
   description.
   Use Master
   page to add
   navigation.
   Add SiteMap
   data source
   control to read
   site map XML file: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
SiteMapPath Control
   Provides breadcrumb navigation, showing current location and
   navigate back up the hierarchy.
   Works directly with ASP.NET navigational model, no need to bind
   data source.
                                                                                                        208
9.3 WEB SITE NAVIGATION
 Add SiteMapPath control to Master page.
 By default, hierarchy levels are separated by > signs, can be
 customized.      Property        Description
                  ShowToolTips                 Set this to false if you do not want the description text to
                                               appear when the user hovers over a part of the site map path.
                  ParentLevelsDisplayed        Sets the maximum number of parent levels that will be shown
                                               at once. By default, this setting is -1, which means all levels
                                               will be shown.
                  RenderCurrentNodeAsLink      If true, the portion of the page that indicates the current page
                                               is turned into a clickable link. By default, this is false because
                                               the user is already at the current page.
                  PathDirection                You have two choices: RootToCurrent (the default) and
                                               CurrentToRoot (which reverses the order of levels in the path).
                  PathSeparator                Indicates the characters that will be placed between each level
                                               in the path. The default is the greater-than (>) symbol.
                                               Another common path separator is the colon (:).

                  Style                   Template                  Applies To
                  NodeStyle               NodeTemplate              All parts of the path except the root and
                                                                    current node.
                  CurrentNodeStyle        CurrentNodeTemplate       The node representing the current page.
                  RootNodeStyle           RootNodeTemplate          The node representing the root. If the root
                                                                    node is the same as the current node, the
                                                                    current node template or styles are used.
                  PathSeparatorStyle      PathSeparatorTemplate     The separator between each node.
                                                            209
9.3 WEB SITE NAVIGATION
TreeView Control
   Powerful, impressive navigation control
   Wide range of styles that can transform appearance.
   Simply set a few properties to change the TreeView from a help
   topic index to a file and folder directory listing.
   Use XML data to bind, any other data source (database), or
   manually or programmatically create nodes.
   Use <asp;TreeNode> tag within the <Nodes> section to define
   parent and child nodes, same way as with XML site map.
   Many properties to customize the control, especially behavior
   and appearance.
                                                                                                 210
9.3 WEB SITE NAVIGATION
              Property       Description

 TreeView     ImageSet       If set to custom, then specific image TreeView properties are being
                             used. If set to one of the built-in sets (such as Windows Help), all

 properties                  images are predetermined (such as CollapseImage, ExpandImage,
                             etc.)
              NodeIndent     The space (in pixels) to indent each node.
              NodeWrap       Whether the node text should be word wrapped.
              ShowLines      Whether to show lines connecting the tree nodes.



 TreeNode     Property
              Text
                             Description
                             The text displayed in the tree for this node.

 properties   ToolTip
              Value
                             The tooltip text that appears when you hover over the node text.
                             Stores a nondisplayed value with additional data about the node (such
                             as a unique ID you will use when handling click events to identify the
                             node or look up more information).
              NavigateUrl    If set, the user will be automatically forwarded to the corresponding
                             URL when this node is clicked. Otherwise, you will need to react to the
                             TreeView.SelectedNodeChanged event to decide what action you want
                             to perform.
              Target         If the NavigateUrl property is set, this sets the target window or frame
                             for the link. If Target is not set, the new page is opened in the current
                             browser window. The TreeView also exposes a Target property, which
                             you can set to apply a default target for all TreeNode instances.
              ImageUrl       The image that’s displayed next to this node.
              ImageToolTip   The tooltip text for the image displayed next to the node.
                                                                                                                              211
  9.3 WEB SITE NAVIGATION
                                                Property            Description
                                                ImageUrl            The URL for the image shown next to the node
         TreeNode                               NodeSpacing         The space (in pixels) between the current node and the node above
                                                                    and below
         Styles                                 VerticalPadding     The space (in pixels) between the top and bottom of the node text and
                                                                    border around the text
                                                HorizontalPadding   The space (in pixels) between the left and right of the node text and
                                                                    border around the text
                                                ChildNodesPadding   The space (in pixels) between the last child node of an expanded
NodeIndent
                                                                    parent node and the following sibling node

             --                 Root




                  --           Parent1


                                       Child1



                                       Child2


                       HorizontalPadding




                  --           Parent2


                                       Child3
                                                                                                   212
9.3 WEB SITE NAVIGATION
  Different styles of TreeView control
    Property            Description
    NodeStyle           Applies to all nodes.
    RootNodeStyle       Applies only to the first-level (root) node.
    ParentNodeStyle     Applies to any node that contains other nodes, except root nodes.
    LeafNodeStyle       Applies to any node that doesn’t contain child nodes and isn’t a root
                        node.
    SelectedNodeStyle   Applies to the currently selected node.
    HoverNodeStyle      Applies to the node the user is hovering over with the mouse. These
                        settings are applied only in up-level clients that support the necessary
                        dynamic script.



Menu Control
  Bind to data source, or fill it manually
  (declaratively,programmatically).
  Not quite as rich as TriewView control.
                                                                                                                                 213
  9.3 WEB SITE NAVIGATION
          Menu Control Properties
Property            Description
Text                The text displayed in the menu for this item (when displayed).
ToolTip             The tooltip text that appears when you hover over the menu item.
Value               Stores a nondisplayed value with additional data about the menu item (such as a unique ID you will use when
                    handling click events to identify the node or look up more information).
NavigateUrl         If set, when this node is clicked, it automatically forwards the user to this URL. Otherwise, you’ll need to react to
                    the Menu.MenuItemClick event to decide what action you want to perform.
Target              If the NavigateUrl property is set, this sets the target window or frame for the link. If Target isn’t set, the new
                    page is opened in the current browser window. The Menu also exposes a Target property, which you can set to
                    apply a default target for all MenuItem instances.
Selectable          If false, this item can’t be selected. Usually you’ll set this to false only if the item is a subheading that contains
                    selectable child items.
ImageUrl            If set, it is the image that is displayed next to the menu item (on the right of the text). By default, no image is
                    used.
PopOutImageUrl      The image that’s displayed next to the menu item (on the right) if it contains subitems. By default, this is a
                    small solid arrow.
SeparatorImageUrl   The image that’s displayed immediately underneath this menu item, to separate it from the following item.


          Supports different menu styles for different levels.
          Best to use only two styles, one for the main, visible level (root)
          and the other one for the fly out menus.
                                                                                                                 214
9.3 WEB SITE NAVIGATION
  Styles for static and dynamic items
   Static Style          Dynamic Style          Description
   StaticMenuStyle       DynamicMenuStyle       Sets the appearance of the overall “box” in which all the menu items
                                                appear. In the case of StaticMenuStyle, this box is shown on the page,
                                                whereas with DynamicMenuStyle it is shown as a pop-up.
   StaticMenuItemStyle   DynamicMenuItemStyle   Sets the appearance of individual menu items.
   StaticSelectedStyle   DynamicSelectedStyle   Sets the appearance of the selected item. Note that the selected item is
                                                not the item that is currently being hovered over. It is the item that was
                                                previously clicked (and triggered the last postback).
   StaticHoverStyle      DynamicHoverStyle      Sets the appearance of the item that the user is hovering over with the
                                                mouse.



        8-          Web.sitemap,
Example 8-10: Using Web.sitemap, XML file and Navigation
  controls
                            215
9.3 WEB SITE NAVIGATION
        8-
Example 8-10 (continued):

								
To top