|
| |
Continuing our series Advanced Mobile Controls, this
week I will showcase the use of style sheet editor in
VS..NET to
create new Styles. The Visual Studio.NET
development environment helps to build user defined styles in a simple and
straightforward way. The below walkthrough demonstrates the way to build Style
Sheet using the tools provided with
VS.NET.Let’s assume that we have
launched VS.NET, and have selected a Mobile Web Application from the Project
Template by selecting File | New | Projects. We give the project name as
myStyleSheet. Once the MobileWebForm1.aspx appears, we see Mobile Web Form
Form1. Now we place the StyleSheet control just below the Form 1 by dragging and
dropping it from the Toolbar.  Right Click on StyleSheet control and
select the Templating Options.. Menu. This opens a Template Option dialog box,
which is used to create new styles.  In the Template Option dialog box we see
a Dropdown list Style. We select the style for which we have to define
templates. Style is available only if we have configured the templating options
for a StyleSheet control else we need to create a Style by clicking the Edit
button next to the Style Dropdown control. This opens a StyleSheet Styles Editor
Dialog Box. This Styles Editor dialog box is used to add styles for the mobile
Web Forms page and sets properties for each of the styles. We create two
Style’s StyleHTML and StyleWML. In StyleHTML we set the BGColor, ForeColor
property, as we use this Style for HTML supported browser. For StyleWML we just
leave it as it is with out setting any color property since WML doesn’t
support color. Next we select a device filter from the
Applied Device Filter dropdown to select a Device filter. If we need to add a
device filter to the list, click the Edit button. Clicking the Edit button opens
an Applied Device Filter dialog box. This Applied Device Filters dialog box is
used to add, remove, and prioritize device filters associated with a control. An
available device filter can be selected from the Drop-down list. Similarly to
add, delete, or modify filters, click the Edit button to open the Device Filter
Editor dialog box. We Select the Add to List button to apply a device filter to
the control. When we do so, the device filter appears in the Applied Device
Filters list.  We add two device filter isHTML32 and
isWML11 and set the device filter to the respective styles that we created.
 We have created the Style Sheet, now
let’s see how to use this stylesheet in our application. For that we place
a label control in our Mobile Web Form Form1. Right-Click on label control and
select the property.In the Properties
pane, select the DeviceSpecific- PropertyOverrides this will again open the
Applied Device Filer dialog box similar to the one mentioned above. Just add the
isHTML32 and isWML11 device filter and click ok.  Now we will see a property
–override dialog box. Using this Property Overrides dialog box we can
override existing property values for a specific target device. So now we select
the isHTML32 from the Applied Device Filter and set the StyleReference to
StyleHTML and similarly select the isWML11 and set the StyleReference property
to StyleWML. Now we test the application in a desktop
browser that renders HTML content and a Nokia Emulator that renders WML output.
 Output seen in Nokia
Emulator  Output seen in Internet Explorer Creating New
StylesASP.NET Mobile Controls provides
enough methods and properties within the Style base class to render the style
you want on most devices. However, some styles, such as alignment, font, or
color, might not always render properly on some wireless devices. For these
devices you might be interested in creating your own Style and add it to the
control in your own way. Here we will describe the way to create and register
your own Style.All specialized style
classes need to inherit from the Style base
classTo add support for properties in a
specialized style class follow the following procedure - Write a specialized style class that inherits from the
Style base class that Overrides the CreateStyle method of the control,
and return an instance of the specialized style class.
protected override Style
CreateStyle()
{
return
new
NewStyle();
}
- Optionally, create a new property on the control that
strongly types the Style property. This can be used in the next step.
protected MyStyle
MyStyle
{
get
{
return
(NewStyle)Style;
}
}
- For each new property in the specialized class, provide
a property in the control class itself. These will be the public accessors for
the style properties. The implementations of these properties can call the style
object.
protected String
Arabian
{
get
{
return
NewStyle.Arabian;
}
set
{
NewStyle.Arabian
= value;
}
}Further
to add a new style follow this.Declare a public static key string as a member
field, which is initialized to the return value of a call to the RegisterStyle
method defined in the base class. The following code creates a string property
that supports inheritance, and whose default value is the empty string.
public static String Arabian Key =
RegisterStyle(Arabian, typeof(String),
String.Empty, true);The RegisterStyle
method registers the new style property and returns a unique key that can be
used to refer to the style in the property bag. The parameters to the
RegisterStyle method define the name of the property, the data type of
the property, the default value of the property, and inheritance behavior.
The key should be public, because control
adapters also use it to access the inheritance-aware value of the property.
Using the default indexer property of
the base class, create a public property whose implementation accesses the
property bag. public String
Arabian{get{return
(String)this[ArabianKey];}set{this[ArabianKey]
=
value;}}Further
to access the same across a Device Adapter is as simple as
String Arabian= Style[NewStyle.
ArabianKey, true];This piece of code
accesses the Arabian style properties of a control, and sets inheritance to
true.Summary of the Device Specific
ControlsWireless Application
development is just not writing code and makes it run while it needs far more
customization, as current market is flooded with varied devices of different
shape and size with different capabilities. ASP.NET Mobile Controls gives
support to this using Device Specific control, which allows developer to
customize the code as per the end client capabilities. This series of article
has taken a tour of how to make the application customized as per Mobile Client
capabilities. This shows how to apply Styles to the application to give it
better and uniform look across the application. • Device Specific
Rendering – Device Specific Control • Template Device Filter
and Style Sheet Control• External Style
Sheets |
.NET Force is optimised for
Microsoft Internet Explorer 5 browsers.
Copyright © 2004 .NET Force.
Terms and Condition. All rights reserved.
|
 |
|