Primefaces Mobile - Weather App Example

As a Java developer, I usually get requests of building mobile apps. I like building Java application; enterprise, web and mobile. The latest projects that I have been involved with make heavy use of JSF and Primefaces in particular.

	<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:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html">
	<pm:page title="PrimeFaces Mobile Weather">
	<!-- Main View -->
	<pm:view id="main">
	<pm:header title="Weather">
	<f:facet name="right">
	<p:button value="Settings" icon="gear" href="#settings" />
	</f:facet>
	</pm:header>
	<pm:content>
	<h:form id="mainForm">
	<h:outputText value="Select City:" />
	<h:selectOneMenu value="#{weatherController.city}">
	<f:selectItems value="#{weatherController.cities}" />
	</h:selectOneMenu>
	<p:separator />
	<p:commandButton value="Get Forecast" update="display" actionListener="#{weatherController.retrieveConditions}"/>
	<p:outputPanel layout="block" style="text-align:center">
	<h:outputText id="display" value="#{weatherController.conditions}" />
	</p:outputPanel>
	</h:form>
	</pm:content>
	</pm:view>
	<!-- Settings View -->
	<pm:view id="settings">
	<pm:header title="Weather">
	<f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
	</pm:header>
	<pm:content>
	<h:form id="settingsForm">
	<h:outputText value="Select Unit:" />
	<h:selectOneMenu value="#{weatherController.unit}">
	<f:selectItem itemLabel="Celcius" itemValue="c" />
	<f:selectItem itemLabel="Fahrenheit" itemValue="f" />
	</h:selectOneMenu>
	<p:separator />
	<p:commandButton value="Save" actionListener="#{weatherController.saveSettings}" update=":mainForm:display"
	action="pm:main"/>
	</h:form>
	</pm:content>
	</pm:view>
	</pm:page>
	</f:view>

view raw home.xhtml hosted with ❤ by GitHub

	package com.etapix.beans;
	import java.io.Serializable;
	import java.util.LinkedHashMap;
	import java.util.Map;
	import javax.annotation.PostConstruct;
	import javax.faces.bean.ManagedBean;
	import javax.faces.bean.ViewScoped;
	/**
	*
	* @author Armel
	*/
	@ManagedBean
	@ViewScoped
	public class WeatherController implements Serializable{
	/**
	* Creates a new instance of WeatherController
	*/
	private String conditions;
	private String city;
	private String unit = "c"; //default
	private Map<String, String> cities;
	private WeatherService weatherService = new YAHOOWeatherService();
	@PostConstruct
	public void init() {
	cities = new LinkedHashMap<String, String>();
	cities.put("Istanbul", "TUXX0014");
	cities.put("Barcelona", "SPXX0015");
	cities.put("London", "UKXX0085");
	cities.put("New York", "USNY0996");
	cities.put("Paris", "FRXX2071");
	cities.put("Rome", "ITXX0067");
	}
	public String getCity() {
	return city;
	}
	public void setCity(String city) {
	this.city = city;
	}
	public String getConditions() {
	return conditions;
	}
	public void setConditions(String conditions) {
	this.conditions = conditions;
	}
	public String getUnit() {
	return unit;
	}
	public void setUnit(String unit) {
	this.unit = unit;
	}
	public Map<String, String> getCities() {
	return cities;
	}
	public void retrieveConditions() {
	conditions = weatherService.getConditions(city, unit);
	}
	public void saveSettings() {
	conditions = null;
	}
	}

view raw WeatherController.java hosted with ❤ by GitHub

	package com.etapix.beans;
	import java.net.URL;
	import java.util.logging.Logger;
	import com.sun.syndication.feed.synd.SyndEntry;
	import com.sun.syndication.feed.synd.SyndFeed;
	import com.sun.syndication.io.SyndFeedInput;
	import com.sun.syndication.io.XmlReader;
	import java.io.Serializable;
	/**
	*
	* @author Armel
	*/
	public class YAHOOWeatherService implements WeatherService, Serializable {
	private static final Logger logger = Logger.getLogger(YAHOOWeatherService.class.getName());
	public String getConditions(String city, String unit) {
	try {
	URL feedSource = new URL("http://weather.yahooapis.com/forecastrss?p=" + city + "&u=" + unit);
	SyndFeedInput input = new SyndFeedInput();
	SyndFeed feed = input.build(new XmlReader(feedSource));
	String value = ((SyndEntry) feed.getEntries().get(0)).getDescription().getValue();
	return value.split("<a href")[0]; //Remove links
	} catch (Exception e) {
	logger.severe(e.getMessage());
	}
	return "Unable to retrieve conditions";
	}
	}

view raw YAHOOWeatherService.java hosted with ❤ by GitHub

I am quite confortable with JSF and therefore I decided to build a mobile application using JSF and Primefaces Mobile. Primefaces Mobile wraps JQuery as a JSF component so that you do not have to write any Javascript. This approach has huge benefits: JQuery is a well tested framework used by large companies such as Google and Microsoft.

I will make this post quite brief. I wanted to know how easy it would be to recreate the demo from the Primefaces Mobile labs page.

Here is a screenshot of the final application running in Firefox 11 (Windows 7 64 Bit).

This was a simple example taken directly from the website therefore I was expecting to a short exercise to make build and make it run. Well not so fast.

I created a Maven based Java EE 6 project using Netbeans IDE 7.1.1. After browsing Google for a bit, I spent a few minutes getting the right repository and dependency in place.

Once the dependency where in the place, I had to create the beans required for the actual JSF page to work. I found the Primefaces Mobile backing beans on Google Code. So now I had everything setup and running. At first glance, the application seemed to running fine and working. Then I tried the application on my iPad and the Android Emulator, and nothing was working. The user interface was displayed but the "get forecast" button was not making any Ajax calls.

So I started to debug the application everytime I had some spare time. I also noticed that, while running on a desktop browser, the application would be able to an Ajax called and updated the screen with the values (see screenshot above) but you wanted to make another to find out the temparature of let's say London, the nothing would actually unless you refresh the page and try again. OK, so it's not working as expected but the example on Primefaces Mobile labs worked fine on my iPad, emulator and desktop browser (IE 9 excluded).

So I ran the application using the NetBeans debugger and decided to look through Firebug. The first call goes through and stops at the breakpoint but subsquent calls do not even get to the managed bean. Firebug shows that the other code are being retrieve from the cache. I manually set all the HTTP headers so that it does not cache any content but this is still the same result NOT WORKING!

I have uploaded the code to GitHub click on the link to download it.

In conclusion, it's not plug-and-play to make the examples on Primefaces.org labs work. The documentation for the examples are quite poor and I hope that the good folks from Primefaces can take look at my code and tell us what I am doing wrong.

A part from that, Primefaces is a good JSF framework that I use on a daily basis on multiple projects therefore I cannot really put them down but I wished the mobile examples work and tell us what is needed to make it work.

Please share your experience in the comments below or advice on how to fix it. Feel free to download the code from GitHub and have a look to.

Happy coding :)