Question

I want to make a form using Primefaces Mobile with jsf2.0 and primefaces-3.0.M2, but after deploying in jboss server and running it on browser(desktop), the look and feel is not so great. Am i missing some jar files?? Also is there any emulator where i can check and run the mobile webpages. I am using the showcase example at http://www.primefaces.org/showcase-labs/mobile/index.jsf

Answer 1

If your mobile/no mobile applications are separated, you have to insert in your faces-config.xml the following line

<application>
    <default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>
</application>

if your mobile/no mobile views are in the same application you have to

write a viewhandler by overriding calculateRenderKitId API and decide
when to display the page in mobile mode. This approach is suggested if
your mobile and non-mobile pages are in same application and you need
to switch renderkits on-the-fly (from Primefaces Mobile Documentation).

Here a simple ViewHandler class that uses the Spring Mobile functionalities to switch between mobile and non-mobile pages.

import javax.faces.application.ViewHandler;
import javax.faces.application.ViewHandlerWrapper;
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpServletRequest;

import org.springframework.mobile.device.Device;
import org.springframework.mobile.device.DeviceUtils;
import org.springframework.mobile.device.site.SitePreference;
import org.springframework.mobile.device.site.SitePreferenceUtils;

/**
 * @author <a href="mailto:gesuino.napoli">Gesuino Napoli</a>
 *
 */
public class MobileViewHandler extends ViewHandlerWrapper {

    private ViewHandler wrapped;

    public MobileViewHandler(ViewHandler wrapped) {
    this.wrapped = wrapped;
    }

    @Override
    public ViewHandler getWrapped() {
        return this.wrapped;
    }

    @Override
    public String calculateRenderKitId(FacesContext context) {
        HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest();
        Device device = DeviceUtils.getRequiredCurrentDevice(request);
        SitePreference sitePreference = SitePreferenceUtils.getCurrentSitePreference(request);
        if (device.isMobile() || sitePreference == SitePreference.MOBILE) {
            return "PRIMEFACES_MOBILE";
        }
        return this.wrapped.calculateRenderKitId(context);
    }
}

Then register the ViewHandler into the faces-config.xml

<application>
        <!-- <default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id> -->
        <view-handler>com.acme.myproject.web.util.viewhandler.MobileViewHandler</view-handler>
....
</application>

If you want to test your application with an android emulator you can download and installate the sdk-android

1. Install Android SDK
2. Install ADT Eclipse plugin
3. Create an Android Virtual Device (AVD)

To do this follow this link: http://developer.android.com/sdk/index.html.

Then, follow this post to “Getting Your Android Emulator to Read Virtual Hosts on your Development Machine” – http://dillieodigital.wordpress.com/2012/03/19/soup-to-nuts-getting-your-android-emulator-to-read-virtual-hosts-on-your-development-machine/