asp.net session 04
TRANSCRIPT
-
7/30/2019 ASP.net Session 04
1/30
Slide 1 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
In this session, you will learn to:
Create custom controls
Work with styles
Work with themes
Objectives
-
7/30/2019 ASP.net Session 04
2/30
Slide 2 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
Developers use various Web server controls to enable users
to interact with Web pages.
There might be a situation where:
You need some functionality that is not provided by the
in-built Web server controls.You might want to reuse the same set of controls, which you
have added to one Web page, on another Web page.
In such situtaions, you can create a custom control with the
required customizations and then reuse it in as many Web
applications as you want.
Creating Custom Controls
-
7/30/2019 ASP.net Session 04
3/30
Slide 3 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
You can create the following types of custom controls:
Web user controls
Web custom controls
Templated user controls
Creating Custom Controls (Contd.)
-
7/30/2019 ASP.net Session 04
4/30
Slide 4 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
Web user controls:
Are containers that can be created by combining one or more
Web server controls.
Are similar to ASP.NET Web pages in the context that they
contain both a user interface page and code.
Various characteristics of a Web user control are:
The file name extension of a user control is .ascx.
It contains the @Control directive instead of the @Page
directive.
It cannot run as a stand-alone file. It needs to be added to an
ASP.NET page to make it work.
It does not contain an , , or element.
These elements must be present on the Web page that is
hosting these controls.
Web User Controls
-
7/30/2019 ASP.net Session 04
5/30
Slide 5 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
A Web user control on a Web page must be registered
before it is used.
You can register a Web user control by using the
@ Register directive, as shown in the following code
snippet:
The preceding code snippet contains the following three
attributes:
TagPrefix
TagName
Src
Web User Controls (Contd.)
Let us see how to create and use a Web user control
-
7/30/2019 ASP.net Session 04
6/30
Slide 6 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
Web custom controls:
Provide an approach to reuse logic in an ASP.NET application.
Are written as classes.
Are written entirely by using managed code and have no
markup files.
Are compiled into an assembly before the deployment of the
application.
Web Custom Controls
-
7/30/2019 ASP.net Session 04
7/30Slide 7 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
Web custom controls are of the following three types:
Controls that combine two or more existing controls
Controls that extend the functionality of an existing control
Controls that are not similar to any existing control
Web Custom Controls (Contd.)
Let us see how to create and use a composite control
Let us see how to create and use a Web custom control
that extends the functionality of an existing control
Let us see how to create and use a Web custom
control that is not similar to any existing control
-
7/30/2019 ASP.net Session 04
8/30Slide 8 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
A templated user control:
Allows developers to modify the layout of its user interface by
defining their own templates.
Allows the separation of control data from its presentation.
Does not have a user interface. Instead, it simply implements
a naming container and includes a class whose properties and
methods are accessible to the host page.
Templated User Controls
-
7/30/2019 ASP.net Session 04
9/30Slide 9 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
To create a templated user control, you need to perform the
following steps:
1. Add an ASP.NET PlaceHolder control in the .ascx file of the
user control to specify the place where you want the template
to appear.
2. Implement a property of type ITemplate in the code of the
user control.
3. Define a server control class that implements theINamingContainer interface as a container in which an
instance of the template can be created.
4. Apply the TemplateContainer attribute to the property thatimplements ITemplateand pass the type of the templates
naming container as the argument to the attributes
constructor.
Templated User Controls (Contd.)
-
7/30/2019 ASP.net Session 04
10/30Slide 10 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
5. For each data item, write code in the Page_Init event
handler of the user control to:
a. Create an instance of the naming container class.
b. Create an instance of the template in the naming container.
c. Add the naming container instance to the Controls property of
the PlaceHolder server control.
Templated User Controls (Contd.)
Let us see how to create and use a templated user control
-
7/30/2019 ASP.net Session 04
11/30Slide 11 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
The look and feel of a Web page depends upon the
appearance and arrangement of the HTML elements
contained in it.
Therefore, you need to format the HTML elements
contained in your Web page to make it look attractive.
Styles enable a programmer to apply consistent formatting
across the entire website.
Styles are used to define a set of formatting options, which
can be reused to format different HTML elements on a
single or multiple Web pages.
Working with Styles
-
7/30/2019 ASP.net Session 04
12/30Slide 12 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
You can define styles in any of the following ways:
Using inline styles
Using an embedded style sheet
Using an external (linked) style sheet
Working with Styles (Contd.)
-
7/30/2019 ASP.net Session 04
13/30Slide 13 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
Inline styles:
Are style definitions that are applied to the style property of a
particular HTML element.
Are placed directly inside the element on which it has to be
implemented.
Are used when you want to apply one-time formatting to an
HTML element.
To use inline styles in a Web page, you need to use the
style attribute in the relevant HTML tag.
Using Inline Styles
-
7/30/2019 ASP.net Session 04
14/30Slide 14 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
An embedded style sheet is a group of styles that aredefined by using the tag.
The tag needs to be placed within the
tag on your Web page.
The embedded style sheet:Is used when you want to apply a unique style to the various
elements on a Web page.
Enables you to define all the styles for a Web page at one
place, which reduces the time required to design a Web page.
Using an Embedded Style Sheet
-
7/30/2019 ASP.net Session 04
15/30Slide 15 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
The style definitions in an external style sheet are stored in
a separate file having the .css extension.
An external style sheet is used when you want to apply the
same style rules to more than one Web page on a website.
The external style sheet can contain styles for individualelements or generic styles that can be applied to any
element.
Using an External (Linked) Style Sheet
Let us see how to create styles by using style builder
Let us see how to modify a style rule by using the CSSproperties window
Let us see how to create a Style Sheet
-
7/30/2019 ASP.net Session 04
16/30Slide 16 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
ASP.NET themes:
Are a collection of properties that enable you to define the
appearance of Web pages and controls on your website.
Can include skin files, cascading style sheet files (.css files),
and graphics.
Give your Web pages a consistent appearance across the
website.
Working with Themes
-
7/30/2019 ASP.net Session 04
17/30Slide 17 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
You can use a theme in Web applications by creating a skin
file and attaching them to the Web pages on which you want
to apply the theme.
Skin files are:
Used to define the property settings for ASP.NET Web servercontrols.
Created and stored in a theme folder, which is placed inside
the folder named App_Themes. The App_Themes folder is
placed inside the top-level directory of your Web application.
Creating a Theme
-
7/30/2019 ASP.net Session 04
18/30Slide 18 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
You can define multiple themes for your Web application,
but can apply only one theme on a given page at a time.
You can create multiple skin files in a theme directory or
place all the control tags in a single skin file.
Creating a Theme (Contd.)
Let us see how to create a theme
-
7/30/2019 ASP.net Session 04
19/30Slide 19 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
You can apply a theme either to a particular Web page or to
all the Web pages on a website.
If a theme is applied to a particular Web page, the theme
settings are applied only to that Web page.
If you apply the theme to the entire website, the themesettings are applied to all the Web pages on the website.
Applying a Theme
-
7/30/2019 ASP.net Session 04
20/30Slide 20 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
Applying a theme to a Web page:
To apply a theme to a particular Web page, you need to bind
the theme at the page level.
If you bind the theme at the page level, the styles and skins are
only applied to that Web page and its controls.
To bind a theme at the page level, you need to set the Themeattribute of the @ Page directive.
For example, the following @ Page directive specifies that the
theme, SkinFile, is applied to the Web page:
Applying a Theme (Contd.)
-
7/30/2019 ASP.net Session 04
21/30Slide 21 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
If you have defined settings for the control locally as well as in
the theme, the settings defined in the theme override the local
control settings, thus, maintaining a consistent look.
However, if you have used a stylesheet theme, then the local
page settings override the settings defined in the stylesheet
theme.You can use stylesheet theme if you want the theme to be
applied only to those controls whose settings have not
explicitly been defined at the page level.
Applying a Theme (Contd.)
-
7/30/2019 ASP.net Session 04
22/30Slide 22 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
If you do not want the theme property to be applied to aparticular control, you can set the EnableTheming property of
that control on the Web page to false, as shown in the
following code snippet:
Applying a Theme (Contd.)
-
7/30/2019 ASP.net Session 04
23/30
Slide 23 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
In addition to applying a theme at the design time, you can apply
a theme dynamically.
To apply a theme dynamically, you need to set the Page.Theme
orPage.StyleSheetTheme property in the Page_PreInit
event in your code.
For example, you have created a skin file, SkinFile.skin, in theSkinFile folder. To set this theme dynamically, you need to write
the following code snippet:
protected void Page_PreInit(object sender,EventArgs e)
{
Page.Theme = "MyTheme"; //name of the folder in
//which you have stored the
//skin file.
}
Applying a Theme (Contd.)
-
7/30/2019 ASP.net Session 04
24/30
Slide 24 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
Applying a theme to a website:
To apply the theme to all the Web pages on a website, you
need to bind the theme at the website level.
If you bind the theme at the website level, the styles and skins
are applied to all the Web pages and controls on the website
unless you override a theme for an individual Web page.
Applying a Theme (Contd.)
-
7/30/2019 ASP.net Session 04
25/30
Slide 25 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
To apply a theme to the entire website, you need to configurethe element in the web.config file, as shown in the
following code snippet:
...
Applying a Theme (Contd.)
-
7/30/2019 ASP.net Session 04
26/30
Slide 26 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
Skin files standardize the look and feel of controls across all
the Web pages on a website.
There may be situations where you want multiple occurrences
of a control to appear differently on the same Web page.
ASP.NET allows you to create multiple settings for the samecontrol by using multiple skins.
Creating Multiple Skins
-
7/30/2019 ASP.net Session 04
27/30
Slide 27 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
When you create more than one theme for the same control,
ASP.NET generates an error stating that a control can have a
single default skin.
The error can be avoided by using a named skin.
A named skin can be created by supplying the SkinIDattribute.
Creating Multiple Skins (Contd.)
-
7/30/2019 ASP.net Session 04
28/30
Slide 28 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
The following code snippet can be used to create multiple
skins for a button control:
Creating Multiple Skins (Contd.)
-
7/30/2019 ASP.net Session 04
29/30
Slide 29 of 30Ver. 1.0
Developing Web Applications Using ASP.NET
In this session, you learned that:
The three types of custom controls are:
Web user controls
Web custom controls
Templated user controls
Styles are used to define a set of formatting options that can
be reused on a single or multiple Web pages.
Styles can be defined in any of the following ways:
Using inline styles
Using an embedded style sheet
Using an external (linked) style sheetInline styles are style definitions that are applied to the style
property of a particular HTML element.
An embedded style sheet is a group of styles that are definedby using the tag.
Summary
-
7/30/2019 ASP.net Session 04
30/30
Developing Web Applications Using ASP.NET
The style definitions in an external style sheet are stored in a
separate file having the .css extension.
ASP.NET themes are a collection of properties that enable you
to define the appearance of Web pages and controls on your
website.
You can apply a theme either to a particular Web page or to allthe Web pages on a website.
To bind a theme at the page level, you need to set the Theme
attribute of the @ Page directive.
To apply a theme to the entire website, you need to configurethe element in the web.config file.
You can create more than one theme for the same control.
Summary (Contd.)