Dynamic Web Programming BUILDING WEB APPLICATIONS … · 2013-11-01 · The ContentPlaceHolder from the MasterPage is embedded into the invididual pages using a Content tag referencing

BUILDING WEB APPLICATIONS USING

ASP.NET, AJAX AND JAVASCRIPT

Dynamic Web Programming

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

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)

178


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

179


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>

180


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.

181


Use GUI to manager

Style Sheet formats

We will create a

new sample web

site to incorporate

styles, themes,

and master pages.

182


183


184


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.

185


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

186


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:

187

App_Themes

Basic

BasicSkin.skin

Advanced

TextBox.skin

DropDown.skin

ListBox.skin


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:

188


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.

189


190

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.

191

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!

192

Master Page

<head>

<asp:ContentPlaceHolder>

</asp:ContentPlaceHolder>

</head>

<body>

<form>

<asp:ContentPlaceHolder>

</asp:ContentPlaceHolder>

</form>

</body>

Web Page

<asp:Content>

</asp:Content>

<asp:Content>

</asp:Content>

9.2 MASTER PAGES

When creating content

pages, select Master

page.

193

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.

194

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.

195

Header

Navigation

controls

Footer

Content

Column 1 Column 2

Row 1

Row 2

Row 3

9.2 MASTER PAGES

196

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.

197

9.2 MASTER PAGES

198

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.

199


Besides using list

control, use

command

buttons to allow for move backwards and move next.

200

CommandName Description

PrevView Moves to the previous view.

NextView Moves to the next view.

SwitchByViewID Moves to the view with a specific ID (string name). The ID is taken

from the CommandArgument property of the button control.

SwitchByViewIndex Moves to the view with a specific numeric index. The index is taken

from the CommandArgument property of the button control.


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.

201


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.

202


In design view, it also shows

one view at a time.

Two wizard programming

model:

Commit-as-you-go

Commit-at-the-end

203

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

PreviousButtonClick

Occurs when the Next or Previous button is clicked on any step.

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


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)

205

Data

XMLSiteMapProvider

Custom SiteMapProvider

SiteMap

API

SiteMapDataSource

SiteMapPath

TreeView

Menu

Web.SiteMap File

Custom Data


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.

206


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.

207


Add SiteMapPath control to Master page.

By default, hierarchy levels are separated by > signs, can be

customized.

208

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.


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.

209


TreeView

properties

TreeNode

properties

210


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

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.


Text The text displayed in the tree for this node.

ToolTip The tooltip text that appears when you hover over the node text.

Value 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.

-- Root

--

--

Parent1

Parent2

Child1

Child2

Child3

NodeIndent

No

de

Sp

acin

gN

od

eS

pa

cin

gVe

rtic

al P

ad

din

g

HorizontalPadding

Ch

ildN

od

eP

ad

din

g


TreeNode

Styles

211


ImageUrl The URL for the image shown next to the node

NodeSpacing The space (in pixels) between the current node and the node above

and below

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

parent node and the following sibling node


Different styles of TreeView control

Menu Control

Bind to data source, or fill it manually

(declaratively,programmatically).

Not quite as rich as TriewView control.

212


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 Properties

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.

213


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.


Styles for static and dynamic items

214

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.


215

Documents

Dynamic Web Programming BUILDING WEB APPLICATIONS … · 2013-11-01 · The ContentPlaceHolder from the MasterPage is embedded into the invididual pages using a Content tag referencing