Continuing our series Advanced Mobile Controls, this
week I will showcase the use of External Style Sheets and then we will look in
to the way to build custom styles.
External StyleSheet
As introduced earlier, External style sheets allow you to
define a StyleSheet control in a separate file as a user control, and
allow referencing that file from multiple mobile pages on a site or a project.
This allows managing a consistency in style across the site and bound all styles
into a single definition.
To provide a
consistent look across multiple pages of an application, controls can reference
external style sheets. An external style sheet is a mobile user control in an.
ascx file, which contains a StyleSheet control. To gain access to external
styles, a mobile Web Forms page must contain a StyleSheet control. Set the
StyleSheet control's ReferencePath property to the path name of the. ascx file
containing the external style sheet. By doing this, we have access to all the
styles declared in the External Style
Sheet.
It’s important to remember
that the styles in the external style sheet are called external styles.
The styles in the StyleSheet control attached to the current page are
called internal styles. Controls on the page can reference both the
internal and external styles by name. If an internal style and an external style
have the same name, only the internal style will be visible to controls on the
page. In this way, applications can use external style sheets to provide default
styles across all of their pages, while still being able to use internal styles
to override the defaults on particular
pages.
Let’s declare an external
StyleSheet in a user control in Example shown below
Example: Style Sheet
Control (MobileStyle.ascx)
<%@ Register TagPrefix="Mobile"
<!-- StyleSheet declaration starts here
-->
<mobile:StyleSheet id="StyleSheet1"
runat="server">
<Style Font-Size="Large”
Font-Name="Arial" Font-Bold="true" ForeColor="Red" Font-Italic="True"
Name="Style1"/>
<Style Font-Size="Normal" Font-Name="Arial"
Font-Bold="false" BackColor="Blue" Font-Italic="true" Wrapping="NoWrap"
Name="Style2" />
</mobile:StyleSheet>
<!-- StyleSheet declaration ends here
-->
Save the above piece of code as
MobileStyle.ascx. This is the external stylesheet, which we have made as a user
control. The above example shows how we will refer to these Styles in our main
Page.
Example : Using
Style Sheet Control for applying Styles
<%@ Page
Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB"
%>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile"
%>
<!-- External StylSheet is included here
-->
<Mobile:StyleSheet id="StyleSheet1"
ReferencePath="MobileStyle.ascx"
runat="server" />
<!-- Mobile Form one starts here
-->
<mobile:Form id=Form1 runat="server"
stylereference="Style1"
title="External
Stylsheet">
<mobile:label runat=server Text="This is
Style1"
stylereference="Style1"
/>
<mobile:label runat=server Text="This is
Style2"
stylereference="Style2"
/>
</mobile:Form>
<!-- Mobile Form one starts here
-->
In the above shown example we have applied
Style1 to the Form control while on applying some other Style to the specific
control inside the Form that Style will override the Form defined style. This
makes StyleSheet a great control to use for defining the consistent Style across
the application as well you can specify the specific Style if needed in some
control.The display of this sample will
be shown in the Figure below Figure External
StyleSheet example
Customizing the Stylesheet with
Template
As with styles, you can share
template sets for a control by placing them in a <Style> element in
a style sheet. By setting the StyleReference property of a templated
mobile control, you can make it inherit template sets from the style. The
following sample illustrates how you can take the template sets defined in the
preceding sample, move them to a style sheet, and share them among multiple
forms.
Example : Using
Style Sheet with Templates
<%@ Page
Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB"
%>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile"
%>
<!-- StylSheet declaration starts here
-->
<mobile:Stylesheet id="StyleSheet1"
runat="server">
<style name="Style1" font-size="Small"
font-name="Arial">
<DeviceSpecific>
<Choice
Filter="IsHtml">
<HeaderTemplate>
<table width="100%"
height="100%"
cellspacing="1">
<tr><td
bgcolor="#004444">
<img
src="Logo.gif">
</td></tr>
<tr><td
bgcolor="#cfffff"
valign="top"
height="100%">
</HeaderTemplate>
<FooterTemplate>
</td></tr>
<tr><td bgcolor="#004444"
height="4"></td></tr>
</table>
</FooterTemplate>
</Choice>
<Choice>
<HeaderTemplate>
<mobile:Image
id="Image1" runat="server"
ImageURL="Logo.wbmp"
AlternateText="This is Mobile Site
Logo">
</mobile:Image>
</HeaderTemplate>
</Choice>
</DeviceSpecific>
</style>
</mobile:Stylesheet>
<!-- StylSheet declaration ends here
-->
<!-- Mobile Form One starts here
-->
<mobile:Form id="Form1" runat="server"
StyleReference="Style1">
This is just not a site but power of advance
technology.<br />
<mobile:Link id="Link1" runat="server"
Text="Continue"
NavigateURL="#Form2">
</mobile:Link>
</mobile:Form>
<!-- Mobile Form One ends here
-->
<!-- Mobile Form Two starts here
-->
<mobile:Form id="Form2" runat="server"
StyleReference="Style1">
<mobile:Label id="Label1" runat="server"
Text="You have entered the Site.Welcome!!!! on
board">
</mobile:Label>
</mobile:Form>
<!-- Mobile Form Two ends here
-->
This
sample makes use of a DeviceSpecific choice and supplies the specific content
using Template control .The output on WAP device and HTML rendering device will
be as shown below. Figure Display on WAP
Emulator
Figure
Display on Internet explorer
ConclusionThis
ends this part of this series in the next part we will see the use of style
sheet editor in VS.NET to create new Styles. If you have any query related to
Mobile Development using .NET then use the 48 Hrs help section to post your
queries. We will try to address your query with in 48 Hrs.Click Here
to see more articles on Mobile Technology