How to add external style sheets in Primefaces mobile

[vbose]

When I add the below line above or within <p:page>, the entire page's style gets messed up especially the navigation/toolbar. What is the work around to add custom style sheets in Primefaces mobile . Also the view transitions are not very smooth if I put any css wrapped in <style></style> tags in top of the page before <pm:page> tag. .
e.g.
<link href="styles/mws.css" rel="stylesheet" type="text/css" />

I even tried the below code but has to effect at all.

Code: Select all

<pm:page title="TEST" swatch="b">
     	   <f:facet name="meta">				
				<link href="styles/mws.css" rel="stylesheet" type="text/css" />				
	  </f:facet>
</pm:page>	

I would highly appreciate any help in this regard. Thanks.

[vbose]

The issue here is PM spits the entire HTML code using the page renderer class and this makes it a little harder to add custom style sheets or any other meta tags within the head element.
I have put in a workaround for this issue by using JQuery to append the link and meta tags to the html head element. Place the script right before </f:view> tag in the page. This does not interfere with the view transitions and I am able to get the desired icon when I add the page to Home Screen as well as link the custom style sheet.

Code: Select all

<script type="text/javascript">
		jQuery(document).ready(function(){
		    jQuery('head').append('<link rel="apple-touch-icon" href="images/dmvlogo.jpg"/>');
			jQuery('head').append('<link rel="apple-touch-startup-image" href="images/splash.png"/>');			
			jQuery('head').append('<meta name="apple-mobile-web-app-capable" content="yes" />');
			jQuery('head').append('<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>');
			jQuery('head').append('<link href="styles/mws.css" rel="stylesheet" type="text/css"/>');
		});
	 </script>

[smallya]

I have the same issue - wondering if there is a standard extensibility capabilities at the PrimeMobile level to do a clean overlay of custom stylesheet.

[vbose]

I am not sure there is one available at this time.

[cagatay.civici]

There is a facet for this;

Code: Select all

<f:facet name="postinit">
   your stuff here
</f:facet>

[krutikf]

Hi optimus.prime,

is it also the correct tag to integrate a javascript like SQLite ? ( look at http://primefaces.prime.com.tr/forum/vi ... ile#p37831 ) ?

Thanxs.

[krutikf]

Hi,

i tried successfully the tag facet for including a Javascript :

<f:facet name="postinit">
<script type="text/javascript" src="js/offlinedb.js">
</script>
</f:facet>

But i want to call a function of it at the moment the view is loaded by the browser. I tried onload="initDB();" in tag view, page and nothing happens:

<pm:page title="MyPage" onload="initDB();">

If i call the function from a button everything works well. The algorithm is quiet simple. I want to initialize a SQLite Database on start to create the tables if they don't exists. The program uses the Database for logon purposes (don't worry, only to identify the user, the authentication runs secure over the server ). Every time the user uses the program i can recognize for which user i have to select the data.