Professional Documents
Culture Documents
NET
Objectives
Ver. 1.0
Slide 1 of 30
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.
Ver. 1.0
Slide 2 of 30
Ver. 1.0
Slide 3 of 30
Ver. 1.0
Slide 4 of 30
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:
<%@Register TagPrefix="ABC" TagName="Header" Src="mycontrol1.ascx" %>
Ver. 1.0
Slide 5 of 30
Ver. 1.0
Slide 6 of 30
Let us see how to create and use a Web custom control that is not similar to any existing control
Ver. 1.0
Slide 7 of 30
Ver. 1.0
Slide 8 of 30
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 the INamingContainer interface as a container in which an instance of the template can be created. 4. Apply the TemplateContainer attribute to the property that implements ITemplate and pass the type of the templates naming container as the argument to the attributes constructor.
Ver. 1.0
Slide 9 of 30
Ver. 1.0
Slide 10 of 30
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.
Ver. 1.0
Slide 11 of 30
Ver. 1.0
Slide 12 of 30
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.
Ver. 1.0
Slide 13 of 30
An embedded style sheet is a group of styles that are defined by using the <style> tag. The <style> tag needs to be placed within the <head> </head> 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.
Ver. 1.0
Slide 14 of 30
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 individual elements or generic styles that can be applied to any element.
Let us see how to create styles by using style builder Let us see how to modify a style rule by using the CSS properties window Let us see how to create a Style Sheet
Ver. 1.0
Slide 15 of 30
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.
Ver. 1.0
Slide 16 of 30
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 server controls. 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.
Ver. 1.0
Slide 17 of 30
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.
Let us see how to create a theme
Ver. 1.0
Slide 18 of 30
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 theme settings are applied to all the Web pages on the website.
Ver. 1.0
Slide 19 of 30
Ver. 1.0
Slide 20 of 30
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.
Ver. 1.0
Slide 21 of 30
If you do not want the theme property to be applied to a particular control, you can set the EnableTheming property of that control on the Web page to false, as shown in the following code snippet:
<asp:Button ID="Button1" runat="server" ... EnableTheming="false" />
Ver. 1.0
Slide 22 of 30
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 or Page.StyleSheetTheme property in the Page_PreInit event in your code. For example, you have created a skin file, SkinFile.skin, in the SkinFile 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. }
Ver. 1.0
Slide 23 of 30
Ver. 1.0
Slide 24 of 30
To apply a theme to the entire website, you need to configure the <pages> element in the web.config file, as shown in the following code snippet:
<configuration> <system.web> <pages theme="MyTheme"> ... </pages> </system.web> </configuration>
Ver. 1.0
Slide 25 of 30
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 same control by using multiple skins.
Ver. 1.0
Slide 26 of 30
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 SkinID attribute.
Ver. 1.0
Slide 27 of 30
The following code snippet can be used to create multiple skins for a button control:
<asp:Button runat="server" ForeColor="White" BackColor="Orange"/> <asp:Button runat="server" ForeColor="White" BackColor="Green" SkinID="AlternateSkin"/>
Ver. 1.0
Slide 28 of 30
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 sheet
Inline 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 defined by using the <style> tag.
Ver. 1.0
Slide 29 of 30
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 all the 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 configure the <pages> element in the web.config file.
You can create more than one theme for the same control.
Ver. 1.0
Slide 30 of 30