Using default mobile theme in PF 5.0 - Prime Community Forum

Using default mobile theme in PF 5.0

7 posts • Page 1 of 1

jdeviney: Posts: 37; Joined: 24 Jul 2013, 18:12

Quote

12 Sep 2014, 23:07

I am migrating a mobile 1.0 application to pf 5.0. I had a custom theme for the mobile app which worked under pf mobile 1.0 and pf 4.0. That theme no longer works under pf 5.0. So, I am starting over and trying to use the default theme that is bundled in PF 5.0 for mobile. There is a default mobile theme bundled in pf 5.0 correct?

My config:

faces-config.xml

Code: Select all

    
<application>
        <navigation-handler>
            org.primefaces.mobile.application.MobileNavigationHandler
        </navigation-handler>        
    </application>

web.xml

Code: Select all

    <context-param>
        <param-name>primefaces.mobile.THEME</param-name>
        <param-value>mobile</param-value>
    </context-param>

Here is a sample page from the mobile app ...

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"        
        contentType="text/html"
        renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="Mobile" swatch="a">
        
        <f:facet name="preinit">
            <meta name="mobile-web-app-capable" content="yes"/>    
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
            <link rel="canonical" href="http://acme.com"/>
            <link rel="shortcut icon" href="#{resource['icons:apple-touch-icon-152x152.png']}"/>
            <link rel="apple-touch-icon" href="#{resource['icons:apple-touch-icon-152x152.png']}"/>
            <link rel="apple-touch-icon-precomposed" href="#{resource['icons:apple-touch-icon-152x152-precomposed.png']}"/>
        </f:facet>
        
        <!-- pm:view id="defaultView" -->
            <h:form id="defaultForm">
                <pm:header title="Home" swatch="a">
                    <f:facet name="left"><p:commandButton value="Refresh" icon="refresh" ajax="false" update=":defaultForm:certificateCounts" action="#{defaultMobileBean.refresh()}"/></f:facet>
                    <f:facet name="right"><p:button value="Logout" icon="delete" href="lp/j_spring_security_logout?faces-redirect=true"/></f:facet>
                </pm:header>
                <pm:content>
                        <p:growl id="growlMsg" />
                        <p:panel id="certificateCounts" header="Certificate Counts">
                            <h:panelGrid columns="2">
                                <h:outputText value="Today:" />
                                <h:outputText value="#{defaultMobileBean.dailyCertificateCount}" />
                                <h:outputText value="This Month:" />
                                <h:outputText value="#{defaultMobileBean.monthlyCertificateCount}" />
                            </h:panelGrid>
                        </p:panel>
                        <!-- pm:buttonGroup -->
                            <p:commandButton value="Search Users" action="superuser/userSearch.xhtml?faces-redirect=true" ajax="false">
                                <f:attribute name="swatch" value="a" />
                            </p:commandButton>
                            <p:commandButton value="Search Applications" action="superuser/applicationSearch.xhtml?faces-redirect=true" ajax="false">
                                <f:attribute name="swatch" value="a" />
                            </p:commandButton>
                            <p:commandButton value="Access Reports" action="superuser/reportsHome.xhtml?faces-redirect=true" ajax="false">
                                <f:attribute name="swatch" value="a" />
                            </p:commandButton>
                            <p:commandButton value="Access Dashboard" action="superuser/dashboard.xhtml?faces-redirect=true" ajax="false">
                                <f:attribute name="swatch" value="a" />
                            </p:commandButton>
                            <p:commandButton value="Access Full Web Version" action="#{defaultMobileBean.navigateToDefaultHomePageFullVersion()}" ajax="false">
                                <f:attribute name="swatch" value="a" />
                            </p:commandButton>
                        <!-- /pm:buttonGroup -->
                </pm:content>            
            </h:form>
        <!-- /pm:view -->
        
    </pm:page>
    
</f:view>

Java 1.7.0_45
NetBeans 8.0
GlassFish Server Open Source Edition 3.1.2.2 (build 5)
Mojarra 2.1.6 (SNAPSHOT 20111206)
PrimeFaces 5.0.8
PrimeFaces Extensions 2.1.0

smithh032772: Posts: 6144; Joined: 10 Sep 2011, 21:10

Quote

13 Sep 2014, 01:17

i was never aware of this and i don't know what it does. i never used it. do you see this in PrimeFaces 5.0 user guide?

Code: Select all

    <context-param>
        <param-name>primefaces.mobile.THEME</param-name>
        <param-value>mobile</param-value>
    </context-param>

PrimeFaces 5.0 user guide (PrimeFaces Mobile section) has theme, so replace swatch with theme, below. test it and let us know your test results, please.

Code: Select all

<pm:page title="Mobile" swatch="a">

Code: Select all

<pm:header title="Home" swatch="a">

please download and read PrimeFaces 5.0 user guide (PrimeFaces Mobile section) from beginning to end.

Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

jdeviney: Posts: 37; Joined: 24 Jul 2013, 18:12

Quote

15 Sep 2014, 16:54

smithh032772 wrote:i was never aware of this and i don't know what it does. i never used it. do you see this in PrimeFaces 5.0 user guide?
Code: Select all
    <context-param>
        <param-name>primefaces.mobile.THEME</param-name>
        <param-value>mobile</param-value>
    </context-param>
PrimeFaces 5.0 user guide (PrimeFaces Mobile section) has theme, so replace swatch with theme, below. test it and let us know your test results, please.
Code: Select all
<pm:page title="Mobile" swatch="a">
Code: Select all
<pm:header title="Home" swatch="a">
please download and read PrimeFaces 5.0 user guide (PrimeFaces Mobile section) from beginning to end.

1) Yes, it was in the 5.0 user guide, that's why I tried using it.

2) I will try "theme" in place of "swatch". For the record there are references to both. The 5.0 user guide and tag docs are not in sync. The tag docs still reference "swatch" and there is no mention of "theme".

3) I read the mobile section and I've already addressed all other pf 4.0 migration issues in the non-mobile application.

Java 1.7.0_45
NetBeans 8.0
GlassFish Server Open Source Edition 3.1.2.2 (build 5)
Mojarra 2.1.6 (SNAPSHOT 20111206)
PrimeFaces 5.0.8
PrimeFaces Extensions 2.1.0

jdeviney: Posts: 37; Joined: 24 Jul 2013, 18:12

Quote

15 Sep 2014, 18:18

Update - still no luck applying a theme to a mobile application that worked under pf 4.x and pf mobile 1.0.

1) "theme" is not a valid xhtml component attribute per what is implemented in pf 5.0.8. "swatch" is what 5.0.8 has implemented even though the user manual references "theme".

2) I tried creating, downloading and jar ing a new custom (default with swatches a,b,c) mobile theme per the instructions in the 5.0 user manual. I followed instructions to the letter. My new theme jar is deployed inside of a war.

Deployment structure:

Code: Select all

lp.war
|__WEB-INF
      |__lib
           |__pfmobiletheme-1.0.jar
                |__META-INF
                     |__resources
                          |__primefaces-lpmobile
                               |__jquery.mobile.icons.min.css
                               |__theme.css
                               |__theme.min.css
                               |__images
                                    |__ajax-loader.gif
                                    |__icons-png
                                         |__*.png

web.xml:

Code: Select all

    <context-param>
        <param-name>primefaces.mobile.THEME</param-name>
        <param-value>lpmobile</param-value>
    </context-param>

This does not work.

For clarification. My war deployment includes a regular pf web application as well as a pf mobile application. I am not currently using the new pf theme feature for the regular web application, just for the mobile application.

Any other suggestions?

Java 1.7.0_45
NetBeans 8.0
GlassFish Server Open Source Edition 3.1.2.2 (build 5)
Mojarra 2.1.6 (SNAPSHOT 20111206)
PrimeFaces 5.0.8
PrimeFaces Extensions 2.1.0

jdeviney: Posts: 37; Joined: 24 Jul 2013, 18:12

Quote

15 Sep 2014, 23:58

I see in the latest mobile theme showcase ...

Code: Select all


        <link type="text/css" rel="stylesheet" href="/showcase/javax.faces.resource/mobile/jquery-mobile-icons.css.jsf?ln=primefaces" />
        <link type="text/css" rel="stylesheet" href="/showcase/javax.faces.resource/mobile/jquery-mobile-structure.css.jsf?ln=primefaces" />
        <link type="text/css" rel="stylesheet" href="/showcase/javax.faces.resource/mobile/primefaces-mobile.css.jsf?ln=primefaces" />
        <script type="text/javascript" src="/showcase/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces"></script>
        <script type="text/javascript">
            $(document).on('mobileinit', function() {
                $.mobile.ajaxEnabled = false;
                $.mobile.pushStateEnabled = false;
                $.mobile.page.prototype.options.domCache = true;
            });
        </script>
        <script type="text/javascript" src="/showcase/javax.faces.resource/mobile/jquery-mobile.js.jsf?ln=primefaces"></script>
        <script type="text/javascript" src="/showcase/javax.faces.resource/primefaces-mobile.js.jsf?ln=primefaces"></script>

I take it these links are now required under pf 5.0 for mobile theme support? They were not needed under pf 4.x and pf mobile 1.0 SNAPSHOT. I am still trying variations of this and so far no luck.

What am I missing?

Java 1.7.0_45
NetBeans 8.0
GlassFish Server Open Source Edition 3.1.2.2 (build 5)
Mojarra 2.1.6 (SNAPSHOT 20111206)
PrimeFaces 5.0.8
PrimeFaces Extensions 2.1.0

upstate: Posts: 2; Joined: 01 Jul 2014, 19:22

Quote

21 Oct 2014, 17:53

I too am having difficulty applying a custom mobile theme.

1. used themeroller mobile site to create a theme.
2. jared the contents of the zip as per the user guide.
3. placed jar in classpath
4. continued to use "swatch" attribute in mobile pages.
5. added the mobile them context parm in web.xml

Was anyone able to get custom mobile themeroller themes to work?

Is the only recourse to edit stylesheets inside the core primefaces mobile distro?

jobor: Posts: 33; Joined: 19 Dec 2011, 22:34; Location: the Netherlands

Quote

22 Oct 2014, 15:25

Hello,

I did make a new theme with ThemeRoller for JQuery Mobile Version 1.4.3 (and it works with PrimeFaces Mobile !!).
Downloaded the ZIP file and unpacked the ZIP file. But then I did something different.

I copied the content of jquery.mobile.icons.min.css to a text editor like UltraEdit. There I changed the minimal formatting to a more readable CSS formatting so every CSS declaration of an image icon starts on a new line.

Then I changed the normal image urls to PrimefFaces urls. Don't change the CSS declarations with data:image/svg+xml

Example of one of the lines to change

Code: Select all

.ui-nosvg .ui-alt-icon.ui-icon-video:after,.ui-nosvg .ui-alt-icon .ui-icon-video:after{background-image:url(images/icons-png/video-black.png)}

Changed to PrimeFaces format while I'm creating a theme called tweespan. So use your own name instead of my tweespan

Code: Select all

.ui-nosvg .ui-alt-icon.ui-icon-video:after,.ui-nosvg .ui-alt-icon .ui-icon-video:after {background-image:url("#{resource['primefaces-tweespan:images/icons-png/video-black.png']}")}

After doing the replacement and check if everything changed the right way I copied the whole block of all the image CCS declarations and pasted the whole block in the theme.css.

Code: Select all

/*!
* jQuery Mobile 1.4.3
* Git HEAD hash: b9c6473e3d90af26570e6f14e5a0307897ab385c <> Date: Tue Jul 1 2014 15:37:36 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors
* Released under the MIT license.
* http://jquery.org/license
*
*/
/*! jQuery Mobile 1.4.3 | Git HEADhash: b9c6473 <> 2014-07-01T15:37:36Z | (c) 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */

/*
----------DO PASTE HERE ALL THE MODIFIED IMAGE CSS declarations
 */

/* Globals */
/* Font
-----------------------------------------------------------------------------------------------------------*/
html {
	font-size: 100%;
}
body,
input,
select,
textarea,
button,
.ui-btn {
	font-size: 1em;
	line-height: 1.3;
	            font-family: sans-serif /*{global-font-family}*/;
}
etc etc etc

After doing this I did throw away the 2 files jquery.mobile.icons.min.css and theme.min.css
So my directory structure for the JAR looks like wit only the theme.ccs file in the direcory primefaces-tweespan

Code: Select all

+META-INF
    +resources
        +primefaces-tweespan
             theme.css
            +images
                +icons-png

In the theme.css one CSS declaration for the AJAX loader should be adjusted to (change tweespan to your own theme name!!)

Code: Select all

/* Loader */
.ui-icon-loading {
	background: url("#{resource['primefaces-tweespan:images/ajax-loader.gif']}");
	background-size: 2.875em 2.875em;
}

When the loader is not working in your pages what also happened to me you can declare the CSS in the page like below.
Storing the ajax-loader.gif in the normal way of JSF in the path resources/default/images.

Code: Select all

	<h:head>
		<style>
			/* Loader */
			.ui-icon-loading {
				background: url("#{resource['default:images/ajax-loader.gif']}");
				background-size: 2.875em 2.875em;
			}
		</style>
	</h:head>

JAR the directory structure starting at the directory META-INF. I named my JAR tweespan.jar and did put it in the WEB_INF/lib directory of the mobile webapp.

Then declare that you want to use your theme in the web.xml

Code: Select all

    <context-param>
        <param-name>primefaces.mobile.THEME</param-name>
        <param-value>tweespan</param-value>
    </context-param>

Johan

With regards,
Johan Borchers

Mac OS X 10.15.7
NetBeans 12.3
OpenJDK Zulu11.37
JSF Mojarra 2.3.14
PrimeFaces 10.0.0
Tomcat 9.0.43
MySQL 5.6.x

Post Reply

7 posts • Page 1 of 1

Return to “PrimeFaces”

Information

Who is online

Users browsing this forum: No registered users and 35 guests

Important

This forum is now read-only. We've moved to GitHub Discussions.

Join us there for new discussions and support:

https://github.com/orgs/primefaces/discussions

Powered by phpBB™ • Design by PlanetStyles