Saturday, August 24, 2013

Next, the frontend, using primefaces mobile

Ok, now that we have the backend, it's time to start playing with some frontend. My first idea was to create something I could access from the blue-ray player or from the smart tv, but neither have a decent browser. Then I've considered learning a little android app development, but the UI is not incredibly complex.

Then I remembered Primeface Mobile UI. It's just JSF, so it's fast and easy. And I've tried a little and it looks good in my xperia :-) It's powered by jQuery mobile, so it's good stuff IMO.

Things that weren't obvious for those who does not like to wait, about primefaces mobile configuration:

[1] you have to install both primefaces and primefaces mobile jars, since the renderer is in the "core" primefaces jar.

<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="Components">
        <pm:view id="main">
            <pm:header title="Header" />
            <pm:content>Content</pm:content>
        </pm:view>
    </pm:page>
</f:view>


[2] the minimal web.xml you need (I like xhtml)

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>Movies</display-name>
    <context-param>
        <param-name>com.sun.faces.allowTextChildren</param-name>
        <param-value>true</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>



No comments:

Post a Comment