I am developing one mobile application using Asp.net. i know how to use mobile Stylesheet. But i want to add external CSS file in my project like normal application.How can i use CSS file in mobile application?
I have used like that but still it not working.. I am checking the "isWML11" in Choice Filter. I am using OpenWave Simulator.
i have also added the lines in Web.Config.
I have used like that but still it not working.. I am checking the "isWML11" in Choice Filter. I am using OpenWave Simulator.
i have also added the lines in Web.Config.
//You can use various styles here
<mobile:Style Name="exstyle1" Alignment="NotSet" BackColor="#fdfeba" Font-Size="Large" Font-Name="Arial" ForeColor="Red" Font-Italic="True"></mobile:Style>
<mobile:Style Name="exstyle2" Font-Name="Times New Roman"
//End of style defentions
</mobile:StyleSheet>
Then in your aspx page, include this tag inside <body> before the <mobile:form> tag,
Thanks for your guidance.Sameway i have implemnted it on my mobile application and its work for label but not work for <mobile:button> control for back color.
Can you please tell me how i will implement style sheet for mobile button control?
The best way to do this, I've found is to use Adapters. Here is a quick an dirty.
Create your own Form class that inherits from Mobile.Form. I added an extra property so I could set the stylesheet to the appropriate path.
using System;
using System.Configuration;
using System.Web.UI.MobileControls;
using System.Web.UI.MobileControls.Adapters;
public class MyForm : Form
{
public string CssPath
{
get
{
if( ViewState["CssPath"] != null)
return (string)ViewState["CssPath"];
else
return string.Empty;
}
set
{
ViewState["CssPath"] = value;
}
}
}
//Now Create the Form Adapter
public class HtmlMyFormAdapter : HtmlFormAdapter
{
protected new MyForm Control
{
get
{
return (MyForm)base.Control;
}
}
Obviously, you will need to replace AssemblyName with the actual name of your assembly, as well as the MyNameSpace with the actual Namespace for you control.
Then in your markup you will need to add a Register tag.
Then on any page you want to use CSS, you simply use your Form control.
<Custom:MyForm Title="MyTitle" ID="frmMyForm" runat="server" CssPath="PathToCss.css">
<!--Other Controls here-->
</Custom:MyForm>
You can duplicate this technique on any control you want more control over. I've created adapters for the Form, Link, Label, and List controls, because I wanted it to display differently, plus I wanted to add Class attributes.
jmd_maa
0 Points
5 Posts
How to include External css file in Mobile Application.
Dec 08, 2008 08:36 AM|LINK
Hello,
I am developing one mobile application using Asp.net. i know how to use mobile Stylesheet. But i want to add external CSS file in my project like normal application.How can i use CSS file in mobile application?
i dn`t want to use StyleSheet like that.
<
mobile:StyleSheet ID="lblStyleSheet" runat="server"> <mobile:Style Name="lblBusiness" ForeColor= "LightSkyBlue" Font-Bold="True" ></mobile:Style></
mobile:StyleSheet>SKT_01
Participant
1930 Points
435 Posts
Re: How to include External css file in Mobile Application.
Dec 08, 2008 06:45 PM|LINK
Hello,
please use a script template:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test_Mobile_CSS.aspx.vb" Inherits="Test_Mobile_CSS" %> <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <mobile:Form ID="Form1" Runat="server"> <mobile:DeviceSpecific ID="DeviceSpecific1" Runat="server"> <Choice Filter="isHTML32" Xmlns="http://schemas.microsoft.com/mobile/html32template"> <ScriptTemplate> <link rel="stylesheet" href="Common.css" type="text/css" /> </ScriptTemplate> </Choice> </mobile:DeviceSpecific> <mobile:TextBox ID="TextBox1" Runat="server"> </mobile:TextBox> <mobile:TextBox ID="TextBox2" Runat="server"> </mobile:TextBox> <mobile:TextBox ID="TextBox3" Runat="server"> </mobile:TextBox> </mobile:Form> </body> </html>jmd_maa
0 Points
5 Posts
Re: How to include External css file in Mobile Application.
Dec 09, 2008 10:29 AM|LINK
Thanks a lot... :)
Plz see that code...
<%@ Page Language="C#" AutoEventWireup="true" Inherits="VisitorsMobileContent" Codebehind="VisitorsMobileContent.aspx.cs" %><%
@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> <html xmlns="http://www.w3.org/1999/xhtml" ><
body> <mobile:Form id="Form1" runat="server"> <mobile:DeviceSpecific Runat="server"> <Choice Filter="isWML11"> <ScriptTemplate> <link rel="stylesheet" href="/Templates/CSS/general_styles.css" type="text/css" /> </ScriptTemplate> </Choice></mobile:DeviceSpecific>
<mobile:Panel ID="Panel1" Runat="server" BreakAfter="True"> <mobile:Image ID="Image1" Runat="server" ImageUrl="../images/Small_flag.JPG" /> <mobile:Image ID="Image2" Runat="server" ImageUrl="../images/SmallBanner_Visitor.JPG" /> <mobile:Label Runat="server" CssClass="citizens_bg" CssLocation="/Templates/CSS/general_styles.css" id="lblcontents" StyleReference="lblVisitors">Content Page</mobile:Label>I have used like that but still it not working.. I am checking the "isWML11" in Choice Filter. I am using OpenWave Simulator.
<filter name="isHTML32" compare="preferredRenderingType" argument="html32"/>i have also added the lines in Web.Config.
<
filter name="isJPhone" compare="Type" argument="J-Phone"/> <filter name="isWML11" compare="PreferredRenderingType" argument="wml11"/><
filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10"/> <filter name="isGoAmerica" compare="Browser" argument="Go.Web"/><
filter name="isMME" compare="Browser" argument="Microsoft Mobile Explorer"/> <filter name="isMyPalm" compare="Browser" argument="MyPalm"/><
filter name="isPocketIE" compare="Browser" argument="Pocket IE"/> <filter name="isUP3x" compare="Type" argument="Phone.com 3.x Browser"/><
filter name="isUP4x" compare="Type" argument="Phone.com 4.x Browser"/>jmd_maa
0 Points
5 Posts
Re: How to include External css file in Mobile Application.
Dec 09, 2008 11:21 AM|LINK
Thanks a lot... :)
Plz see that code...
<%@ Page Language="C#" AutoEventWireup="true" Inherits="VisitorsMobileContent" Codebehind="VisitorsMobileContent.aspx.cs" %><%
@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> <html xmlns="http://www.w3.org/1999/xhtml" ><
body> <mobile:Form id="Form1" runat="server"> <mobile:DeviceSpecific Runat="server"> <Choice Filter="isWML11"> <ScriptTemplate> <link rel="stylesheet" href="/Templates/CSS/general_styles.css" type="text/css" /> </ScriptTemplate> </Choice></mobile:DeviceSpecific>
<mobile:Panel ID="Panel1" Runat="server" BreakAfter="True"> <mobile:Image ID="Image1" Runat="server" ImageUrl="../images/Small_flag.JPG" /> <mobile:Image ID="Image2" Runat="server" ImageUrl="../images/SmallBanner_Visitor.JPG" /> <mobile:Label Runat="server" CssClass="citizens_bg" CssLocation="/Templates/CSS/general_styles.css" id="lblcontents" StyleReference="lblVisitors">Content Page</mobile:Label>I have used like that but still it not working.. I am checking the "isWML11" in Choice Filter. I am using OpenWave Simulator.
<filter name="isHTML32" compare="preferredRenderingType" argument="html32"/>i have also added the lines in Web.Config.
<
filter name="isJPhone" compare="Type" argument="J-Phone"/> <filter name="isWML11" compare="PreferredRenderingType" argument="wml11"/><
filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10"/> <filter name="isGoAmerica" compare="Browser" argument="Go.Web"/><
filter name="isMME" compare="Browser" argument="Microsoft Mobile Explorer"/> <filter name="isMyPalm" compare="Browser" argument="MyPalm"/><
filter name="isPocketIE" compare="Browser" argument="Pocket IE"/> <filter name="isUP3x" compare="Type" argument="Phone.com 3.x Browser"/><
filter name="isUP4x" compare="Type" argument="Phone.com 4.x Browser"/> Thanks again...SKT_01
Participant
1930 Points
435 Posts
Re: How to include External css file in Mobile Application.
Dec 09, 2008 02:49 PM|LINK
Hello,
the above solution works only on devices with PreferredRenderingType HTML32 and ECMAScriptVersion greater or equal 1.0.
On WML devices the code within the script template is added after the opening <card> tag. You have to ensure that the server renders WML 1.1 to the Openwave emulator if you use <Choice Filter="isWML11">.
I think it is better to ask questions about the Openwave Emulator in the Openwave Developer Forum.
srikanthsund...
Member
198 Points
73 Posts
Re: How to include External css file in Mobile Application.
Dec 10, 2008 08:51 AM|LINK
hi, this is what i've done to use external style sheet dont know whether its right or wrong but it worked... i tried using vs2008...
create a user control... You can select a mobile user control template... I had named that as stylesheet.ascx...
<%@ Control Language="C#" AutoEventWireup="true" Inherits="TestApp.stylesheet" Codebehind="stylesheet.ascx.cs" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
The page by default contains the above two lines of code...
Then type...
<mobile:StyleSheet ID="StyleSheet1" Runat="server">
//You can use various styles here
<mobile:Style Name="exstyle1" Alignment="NotSet" BackColor="#fdfeba" Font-Size="Large" Font-Name="Arial" ForeColor="Red" Font-Italic="True"></mobile:Style>
<mobile:Style Name="exstyle2" Font-Name="Times New Roman"
//End of style defentions
</mobile:StyleSheet>
Then in your aspx page, include this tag inside <body> before the <mobile:form> tag,
<mobile:StyleSheet ID="StyleSheet1" ReferencePath="stylesheet.ascx" Runat="server">
</mobile:StyleSheet>
then you can use the syles to your controls like
<mobile:Form id="Signup_Form" StyleReference="exstyle1" runat="server">
<mobile:TextBox id="txt1" StyleReference="exstyle2" runat="server"/>
Your styles will reflect when you run your app... Hope that helps you out...
jmd_maa
0 Points
5 Posts
Re: How to include External css file in Mobile Application.
Dec 12, 2008 11:46 AM|LINK
Thanks Siikanth :),
I have done this before as you described, but i want to use .CSS file in the project I am not getting the way how to do that.
rakhisaraf
Member
2 Points
1 Post
Re: How to include External css file in Mobile Application.
Jan 27, 2010 12:12 PM|LINK
Hello Srikant,
Thanks for your guidance.Sameway i have implemnted it on my mobile application and its work for label but not work for <mobile:button> control for back color.
Can you please tell me how i will implement style sheet for mobile button control?
Thanks in advance
Rakhi
kfowler67
Member
2 Points
2 Posts
Re: How to include External css file in Mobile Application.
Jan 27, 2010 08:17 PM|LINK
The best way to do this, I've found is to use Adapters. Here is a quick an dirty.
Create your own Form class that inherits from Mobile.Form. I added an extra property so I could set the stylesheet to the appropriate path.
using System;
using System.Configuration;
using System.Web.UI.MobileControls;
using System.Web.UI.MobileControls.Adapters;
public class MyForm : Form
{
public string CssPath
{
get
{
if( ViewState["CssPath"] != null)
return (string)ViewState["CssPath"];
else
return string.Empty;
}
set
{
ViewState["CssPath"] = value;
}
}
}
//Now Create the Form Adapter
public class HtmlMyFormAdapter : HtmlFormAdapter
{
protected new MyForm Control
{
get
{
return (MyForm)base.Control;
}
}
protected override bool RenderExtraHeadElements( HtmlMobileTextWriter writer )
{
if( writer != null )
{
if( this.Control.CssPath.Length > 0 )
{
writer.WriteBeginTag( "link" );
writer.WriteAttribute( "rel", "stylesheet" );
writer.WriteAttribute( "href", this.Control.CssPath );
writer.WriteAttribute( "media", "screen" );
writer.WriteAttribute( "type", "text/css" );
writer.WriteLine( "/>" );
}
}
}
}
//Now for the most IMPORTANT part. You must make an entry into your Web.Config to map the adpater.
<mobileControls>
<device name="HtmlDeviceAdapters2" inheritsFrom="HtmlDeviceAdapters">
<control name="MyNameSpace.MyForm, AssemblyName" adapter="MyNameSpace.HtmlMyFormAdapter, AssemblyName"/>
</device>
</mobileControls>
Obviously, you will need to replace AssemblyName with the actual name of your assembly, as well as the MyNameSpace with the actual Namespace for you control.
Then in your markup you will need to add a Register tag.
<%@ Register TagPrefix="Custom" Namespace="MyNameSpace" Assembly="AssemblyName" %>
Then on any page you want to use CSS, you simply use your Form control.
<Custom:MyForm Title="MyTitle" ID="frmMyForm" runat="server" CssPath="PathToCss.css">
<!--Other Controls here-->
</Custom:MyForm>
You can duplicate this technique on any control you want more control over. I've created adapters for the Form, Link, Label, and List controls, because I wanted it to display differently, plus I wanted to add Class attributes.
Very cool stuff! Hope this helps!