topic

New in asp.net 2 - subjects and skiny.

Creation by that

All created subjects should settle down in a special folder with preserved name App_Themes in root directory of a site. At use as editor Visual Studio this folder will be automatically created if to add to the project a folder such as Theme (it is necessary to click with the right button on the web - project, in the contextual menu to choose item{point} Add ASP.NET Folder and then to choose type of a folder - Theme). The created folder also will represent a subject. Each folder in directory App_Themes is considered a separate subject. The investment each other is not supposed by that. Each subject will usually consist of one or several files skinov with expansion ".skin", and also others, necessary for the task of appearance of a site of files, such as files of cascade tables of styles, pictures, xsl-transformations and so on which also can be ordered in podpapkakh root directory of a subject. Files skinov and tables of styles are usually located radically subjects, and a picture - in a subdirectory images. You can add so much files skinov kontrolov, how much it is necessary. Usually on one type kontrola create one file with patterns, but generally, one ".skin" the file can contain set of diverse elements of management. However if attributes will be stored{kept} in one file only one and the file will be named a name of this type it will allow to simplify search of the necessary pattern considerably. For example, the subject can include the following files: Calendar.skin, Label.skin, Button.skin, TreeView.skin, GridView.skin, etc. Each of these files includes all skiny, concerning to the given type kontrola. Skin kontrola is a pattern of an element of management with adjustments of the properties determining appearance kontrola which subsequently will be used for visual performance given kontrola.

As an example we shall consider creation skina for kontrola "calendar". We shall create file Calendar.skin with the following contents:

<asp:Calendar runat = "server" BackColor = "White"

BorderColor = " * 3366CC " BorderWidth = "1px" CellPadding = "1"

DayNameFormat = "Shortest" Font-Names = "Verdana" Font-Size = "8pt"

ForeColor = " * 003399 " Height = "200px" Width = "220px">

<SelectedDayStyle BackColor = " * 009999 " Font-Bold = "True"

ForeColor = " * CCFF99 "/>

<TitleStyle BackColor = " * 003399 " BorderColor = " * 3366CC " BorderWidth = "1px"

Font-Bold = "True"

Font-Size = "10pt" ForeColor = " * CCCCFF " Height = "25px"/>

</asp:Calendar>

The pattern kontrola looks as the usual task of a server element of management in ASCX or ASPX a file behind that only exception, that in him parameter ID is not underlined. The task of attribute runat = "server" is necessary! After preservation of this file in a folder of a subject and the task of the given subject as current, all kontroly such as Calendar on all pages of a site will be deduced{removed} as it is set in a file skina.

The following example shows application skina to kontrolu such as Label:

<asp:Label runat = "server" ForeColor = "Green"/>

We can place this line in new file Label.skin of our subject and then all kontroly such as Label on our site will have identical color of the text.

All skiny share on two types - skiny by default and called skiny. Skiny not containing attribute SkinID are skinami by default and are applied to all kontrolam the given type. For each type kontrola one can be determined only skin by default. Skin with established atributomSkinID is called called skinom. Properties called skina are applied only to kontrolam, having same value of attribute SkinID, as at skina. At absence in the current subject suitable for kontrola called skina, adjustments from skina by default are applied.

> In the following example for an element of management the shortcut is defined{determined} two skina - one it skin by default with color of text Green and the second skin for shortcuts with error messages and other specific needs with color of text Red.

<asp:Label runat = "server" ForeColor = "Green"/>

<asp:Label runat = "server" ForeColor = "Red" SkinID = "Error"/>

At display of the page resulted below in a browser of the user, the first shortcut will be otrisovan using the general{common} skin by default with the green text, and the second will be displayed with red color of the text.

<body>

<div>

<asp:Label runat = "server" ID = "label1"

Text = " Hello World "/>

<br/>

<asp:Label runat = "server" ID = "label2"

Text = " GoodBye World " SkinID = "Error"/>

</div>

</form>

</body>

With the help skinov all properties kontrola, concerning to his{its} appearance can be changed practically. All attributes resolved{allowed} for installation in skinakh should be marked with attribute System. Web. UI.ThemeableAttribute = "true". However there is a number{line} of properties, which task in skine is invalid. For example, such properties as ID and EnableViewState are marked as forbidden to installation in files skinov. Also are not supposed to installation through skiny such attributes, as CommandName class Button, AllowPaging, DataSource class GridView, etc. It Is done{made} by means of attribute ThemeableAttribute = "false". Attribute ThemeableAttribute can be applied and to a class for a designation of support to the data kontrolom adjustments of the parameters through skiny. As an example kontrola not supporting the subject can be resulted kontrol Repeater which inherits to class Control marked with attribute Themeable = "false". Any kontrol, inheriting to class WebControl, on the contrary, has this attribute established in "true" by default.

Scopes that

On a scope distinguish subjects local and the subjects determined globally. Local subjects are stored{kept} in folder App_Themes of the application and can be used only in the given application. Globally - certainly subjects should be located in a folder %SystemRoot%Microsoft. NETFrameworkv2.0.xxxxxASP.NETClientFilesThemes. Any site working by the given machine can use the given subjects. At concurrence of names of a local and global subject to kontrolam adjustments from both subjects will be applied, but the priority will be at properties of a local subject.

Installation of the current subject

There are two ways of the instruction{indication} to pages of a site what from available subjects him{it} to use. The behaviour of the carrying out environment will depend on a way of the instruction{indication} of a subject at job with subjects. So if for this purpose attribute Theme attributes from skinov subjects will have the greater priority, than attributes established at kontrolov will be used is direct on page. In a case of use of attribute StylesheetTheme attributes set in tege kontrola will have the greater priority at otrisovke kontrola, than the attributes received from skina.

The note: In a mode of the designer of page Visual Studio does not display property kontrolov, set in skinakh at established attribute Theme. However, if to set a subject through attribute StyleSheetTheme as collateral action the studio designer starts them to display, accordingly it is possible to see all adjustments in operation without compilation of a site and his{its} viewing in a browser. Also, unfortunately, the studio editor does not support IntelliSense in ".skin" files. Unique way of convenient creation skinov is creation and adjustment of the necessary element on page and the subsequent carry of the text kontrola in ".skin" a file with removal{distance} of superfluous attributes (such as ID and EnableViewState).

Installation of a subject for separate page

In the following example the way of the instruction{indication} of the current subject with use of attribute Theme of @Page directive is shown.

<% Page Language = " C * " AutoEventWireup = "true" CodeFile = "Default.aspx.cs" Inherits = " _ Default " Theme = "Dark blue" %>

<! DOCTYPE html PUBLIC " - // W3C // DTD XHTML 1.1 // EN " "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title> Subjects </title>

</head>

<body>

<div>

<asp:Calendar ID = "Calendar1" runat = "server"/>

</div>

</form>

</body>

</html>

After that, in spite of the fact that kontrolov on the given page we did not do{make} any adjustments of appearance, all kontroly will look how we have set it in corresponding files skinov the current subject.

If in the given example to replace attribute Theme with attribute StylesheetTheme the first inscription will be deduced{removed} by color of a subject, and the second - with the brown color set in tege kontrola.

Installation of a subject for all site

Using a file of adjustments web.config, the subject can be established at a level of the application (and even at a level of the whole machine, using a global file of adjustments machine.config). For this purpose attributes theme and styleSheetTheme the unit <pages> are used.

<system.web>

</system.web>

</configuration>

Installation of a subject for all machine

Similar functionality ideally approaches in a case if on the server some sites which registration should be executed in one style work. It can be the server of the large company which serves some corporate sites or service of creation of homepages of users with an opportunity of a choice of their appearance from several given variants.

To set a subject for all sites working by the given machine it is necessary to appropriate{give} required value to attribute theme the unit <pages> a global file of adjustments machine.config which is in a folder %SystemRoot%Microsoft. NETFrameworkv2.0.xxxxxCONFIG. If such unit no, it{he} should be created. For example, he can look so:

<system.web>

<pages buffer = "true" enableSessionState = "true"

enableViewState = "true" enableViewStateMac = "true"

autoEventWireup = "true" validateRequest = "true"

enablePersonalization = "false" theme = "Dark blue"/>

</system.web>

At installation by that at a level of the machine it is necessary that subjects also have been globally determined, for the additional information see section " Scopes that " given clause{article}.

The note: Attributes Theme and StyleSheetTheme, certain{determined} in @Page directives of pages, will redefine values of the same attributes set in configuration files. And the attributes set in a file web.config will have the greater priority, rather than similar global adjustments from a file machine.config.

Disconnect by that

Earlier we already have noted, that at installation of parameter Theme parameters from skina will have the greater priority, than properties kontrola, certain{determined} directly in tege kontrola on page and will redefine them at a stage of performance of page. However it not always conveniently also can be situations when we will need to change such behaviour. One of ways of the decision of this problem{task} is disconnect of the mechanism by that for given kontrola. It is done{made} with the help of attribute EnableTheming.

<asp:Label runat = "server" ID = "label1"

Text = " Hello, from OdeToCode "

ForeColor = "Green" EnableTheming = "false"/>

It is necessary to note, what is it property is in cascade distributed to all enclosed kontroly. Thus, at installation of attribute EnableTheming = "false" to an element of management Panel or user kontrolu, all kontroly, located in the given control, also will cease to be displayed with use of properties from files skinov.

It is similarly possible to disconnect subjects for separate page: <% @Page EnableTheming = "False" %>. The given attribute disconnects only use of attribute theme to ignore all installations of a subject including made with use of attribute styleSheetTheme, the design of the following kind is required:

<% Page Theme = "" StyleSheetTheme = "" %>

For disconnect by that at a level of the application it is required to make similar installations already in a file web.config:

<system.web>

</system.web>

</configuration>

Accordingly for disconnect by that at a level of all machine it is necessary to correct section <pages> a file machine.config.

Program installation of the current subject

Besides the task of the current subject in a file of a configuration or in tege pages, program installation of a subject in a mode of performance is possible{probable} also. Installation of a subject should be made before initialization of page, for example in obrabotchike special new event PreInit. As skiny subjects are applied before event Init, their installation in him is already useless, even moreover, attempt to make it will lead to to exception such as InvalidOperationException. Program installation of a subject can be useful in the event that you give users an opportunity to choose to yourselves a suitable subject from the list of the preestablished subjects for a site. The subject preferable to the user can be stored{kept} as one of properties of his{its} structure and to establish her{it} for everyone prosmatrivaemoj pages in obrabotchike events PreInit. an example of program installation of a subject for page:

- A file of a class for reception of the list by that App_CodeDAL.cs:

public class DAL

{

public string [] GetThemes ()

{

// We receive the list of ways to podpapokam folders App_Themes

string [] folders = System. IO.Directory. GetDirectories (

System. Web. HttpContext. Current. Server. MapPath (" ~/App_Themes "));

// otrezaem from the found full ways only names of folders

for (int i = 0; i <folders. Length; i ++)

{

folders [i] = new System. IO.DirectoryInfo (folders [i]) .Name;

}

return folders;

//// Reception of the list globally - certainly that

// string [] globalThemes = Directory. GetDirectories (

// Path. GetDirectoryName (typeof (object) .Assembly. Location)

// + "\ASP.NETClientFiles\Themes");

}

- A file of a pattern of page with necessary kontrolami Default.aspx:

<% Page CodeFile = "Default.aspx.cs" Inherits = " _ Default " %>

<html>

<title> we Work with subjects </title>

</head>

<body>

<div>

<asp:DropDownList ID = "ddlThemeSelector" runat = "server" AutoPostBack = "True" DataSourceID = "odsDALGetThemes"/>

<asp:ObjectDataSource ID = "odsDALGetThemes" runat = "server" SelectMethod = "GetThemes" TypeName = "DAL"/>

</div>

</form>

</body>

</html>

- A file of a code of page Default.aspx.cs:

public partial class _Default: System. Web. UI.Page

{

protected override void OnPreInit (System. EventArgs e)

{

if (IsPostBack ** Request. Form [ddlThemeSelector. ClientID]! = null)

{

// Profile. Theme = Request. Form [ddlThemeSelector. ClientID];

Page. Theme = Request. Form [ddlThemeSelector. ClientID];

}

protected override void OnLoad (System. EventArgs e)

{

// We select a correct element at initial loading page

// It is necessary for a designation of the current subject set statically

if (! IsPostBack)

{

// We shall fill in the list the data from a source

ddlThemeSelector. DataBind ();

// We shall find recording the current subject and we shall mark her{it} as selected

System. Web. UI.WebControls. ListItem li = ddlThemeSelector

.Items. FindByText (Theme?? StyleSheetTheme?? " ");

if (li! = null)

{

li. Selected = true;

}

Pay attention, that in a code of processing of event PreInit we cannot address directly to the selected element of the list ddlThemeSelector, and are compelled to search for it{him} in parameters of the come form. This consequence{investigation} of that at the moment of approach of event PreInit of value kontrolov on the form are not initialized yet by the values.

In a similar way it is possible to establish value of property Theme of page, for installation of property StyleSheetTheme the similar approach is not applicable. For program installation of value of property StyleSheetTheme it is necessary to redefine it{him}. In our case, at a choice of a subject from the list, the code turns out such:

public override String StyleSheetTheme

{

get

{

if (Request. Form ["ddlThemeSelector"]! = null)

{

return Request. Form ["ddlThemeSelector"];

}

return "Yellow";

}

Value "ddlThemeSelector" is received from a resulting code html:

<select name = "ddlThemeSelector" onchange = " javascript:setTimeout (' __ doPostBack (' ddlThemeSelector ', ") ', 0) " id = "ddlThemeSelector">. In this case we cannot use a design of a kind ddlThemeSelector. ClientID for reception of a name of parameter in a collection of parameters of the form as at the moment of the reference{manipulation} ispolnjajuhhej environments{Wednesdays} to the given property kontroly on page do not exist yet.

At storage of a subject in a structure of the user the code will look a little differently:

public override String StyleSheetTheme

{

get

{

if (! Profile. IsAnonymous ** Profile. Theme! = null)

{

return Profile. Theme;

}

return "Yellow";

}

Installation of parameter SkinID for separate kontrola is identical to installation of parameter Themes. This parameter also should be established not later event PreInit of page:

protected override void OnPreInit (System. EventArgs e)

{

lblFirst. SkinID = "BoldStyle";

}

Subjects and cascade tables of styles (CSS)

Cascade tables of styles it is very powerful tool, allowing to adjust any properties influencing appearance html-kontrolov, and also to operate their arrangement on page. The basic difficulty of application of tables of styles in ASP.NET will be, that for their effective use it is necessary to know thoroughly how this or that server kontrol is interpreted in resulting html ispolnjajuhhej environment{Wednesday}. It is not always possible also the majority of programmers of server decisions do not understand it, and do not want to understand, fairly believing, what is it destiny of professionals in the field of html-imposition. However experts on imposition understand nothing in server tegakh, therefore cannot effectively adjust them, achieving required result. It is available the conflict, to allow which in many respects and there is a problem{task} of the mechanism that, plus using subjects simply enough to separate only design things from patterns with kontrolami. Henceforth verstal`hhiku it is not necessary to dig in patterns of pages, nenarokom cutting out kontroly and deleting superfluous attributes from his{its} point of view. Now all adjustments concerning appearance kontrola, can be born in separate files - files skinov. However adjustment of all properties server kontrolov in skinakh will inevitably lead to to increase in the size of generated page as all properties from skinov will be specified directly in attribute style tegov given to the client, and these are long enough lines of parameters. Would be much more economical to specify in skinakh only specific for server kontrolov properties which cannot be set through styles, and all other properties to set in tables of styles and to specify to server elements in skinakh only css-classes through attribute CssClass. Fortunately to those give such opportunity. It is possible to add one or the several ".css" files in a root folder of a subject or any her{it} podpapki. ASP.NET will automatically apply all files with tables of styles to all pages of the site using the chosen subject, by addition of <link directive to each file in heading of page given to the client. The only thing, that for this purpose is necessary is a presence of attribute runat = "server" in tege <head> pages. Pages created with use of the studio editor already contain this attribute.

Scopes skinov and tables of styles are blocked. Both those and other approaches can be used, for example, for the task of completely mad kind of display of text fields. For example, in a file skina we can specify such set of properties:

<asp:TextBox ForeColor = "gray" Font-Bold = "true" BorderColor = "red" runat = "server"/>

, And we can set corresponding style through css:

input

{

border-color:Red;

font-weight:bold;

color:Gray;

}

However in the first case we shall receive in resulting html-? for everyone tektovogo fields on a site recording of such kind:

And in the second - such:

And file StyleSheet.css of the sizes of 68 bytes which will once be loaded on the client and subsequently will not be downloaded any more from a site, and will undertake from kesha a browser.

Creation of css-classes for kontrolov demanding specific registration and the subsequent comparison of the given classes server kontrolam through installation of attribute CssClass will be obvious that the optimum approach.

Example of the task of a css-class:

.txtMad

{

border-color:Red;

font-weight:bold;

color:Gray;

}

Example of the task of a class kontrolu in a file skina TextBox.skin:

<asp:TextBox CssClass = "txtMad" runat = "server"/>

Resulting html:

However it is not necessary to be fond too of optimization, in the ends - ends compression of the traffic can give out with ease much the best results, than several weeks of job above optimization of the size of given out pages. Some simple principles which will help to make the correct decision on application of this or that approach in each concrete case:

* Webs - designers feel themselves at use of css-files much more confidently. If all design for a site is done{made} by professional designers it is better to ask than them to use everywhere css. In that case at updating design everything, that from you is required, it to replace a corresponding file .css.

* If the developer to him job with skinami will be more habitual is engaged in design. Skiny look in accuracy as descriptions kontrolov, besides the developer should not penetrate into all subtleties of what HTML-code generitsja at rendering of this or that server kontrola. Everything, that from him{it} is required - installation of values to the predetermined properties server kontrolov.

* Skiny are applied on the party{side} of the server, therefore can be used for installation of specific properties server kontrolov. For example, for kontrola Calendar such property is DayNameFormat. CSS in any way does not allow to operate with such properties.

* CSS it is in turn focused on the client and allows to operate the parameters of display inaccessible on the server. For example, position kontrolov on page, spaces and colors of page, registration of links, etc.

* Adjustments of cascade tables of styles can be easily redefined if necessary directly on page, the properties set in skinakh, are absolute and cannot be redefined (except for special receptions considered above).

* Various browsers differently interpret properties of cascade tables of styles. Rendering of the properties set in skinakh, can be redefined depending on type of a browser of the client (ASP.NET gives such opportunities).

Subjects and images

In a directory of a subject you can place a picture. Images in subjects are especially useful for such kontrolov, as TreeView and Menu which allow to change the standard images used by them at rendering.

All that from you is required thus is it to specify in skine a relative way to a picture. ASP.NET itself will take care of reduction of this way a correct full way. In css-files also it is necessary to specify relative ways for the given subject.

Behind side scenes of process

At reception of search to ASP.NET 2.0 site ispolnjajuhhaja environment{Wednesday} compiles each subject from directory App_Themes in assembly. Each assembly contains a class representing a subject - this class is the successor of class System. Web. UI.PageTheme. The given class also contains property LinkedStyleSheets which returns a file of lines - the list of ways to all files with expansions ".css" which are located in a folder of a subject.

The class also contains property ControlSkins which realizes interface IDictionary. Keys in the given registry are types (for example Label or TextBox). Values are delegates on methods which create kontrol required type and apply to it{him} all properties determined for him{it} in a file skina.

For example, our file skina for a shortcut is compiled in the following method:

private Control __ BuildControl __ control11 (Control ctrl) {

Label label1 = (Label) ctrl;

label1. ForeColor = Color. Green;

return label1;

}

During processing page with the established subject ispolnjajuhhaja environment{Wednesday} touches all kontroly on page and the delegate on a method - obrabotchik tries to find suitable for the given type kontrola. If such delegate is, he is caused and kontrol is replaced with the version generated as a result of a call with already applied properties skina.

Subjects and elements of management of own development

If you create the elements of management also can involve subjects for the kontrolov. By default you kontroly already should allow adjustment through subjects if you inherit them from class WebControl. Management of support of that is carried out by means of attribute EnableTheming. For example for disconnect of an opportunity of adjustment through subjects of yours kontrola use value of attribute false:

namespace MyOwn. ServerControls

{

[EnableTheming (false)]

public class SimpleDate: WebControl {

private DateTime _date;

public DateTime Date {

get {return _date;}

set {_date =value;}

}

protected override void RenderContents (HtmlTextWriter

controlOutput) {

controlOutput. Write (_date. ToString (" dd. MM.yyyy HH:ss "));

}

Also with the help of attribute Themeable it is possible to supervise availability of similar adjustment to concrete property:

namespace MyOwn. ServerControls {

public class SimpleDate: WebControl {

private DateTime _date;

[Themeable (false)]

public DateTime Date {

set {_date =value;}

}

[HMTL] <h3> the Conclusion </h3> [/HTML]

Application by that allows to adjust quickly and conveniently uniform appearance of a site and on-line to operate him{it}, and also to create set various skinov for a site and quickly to change them in execution time.