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.
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 :)
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 :)
Thanks for this example. There are just a few examples on the web (primefaces' guide included).
ReplyDeleteThank you for the sensible critique. Me and my neighbor were just preparing to do some research about this. We got a grab a book from our local library but I think I learned more from this post. I am very glad to see such great information being shared freely out there. http://scarprin.com/
ReplyDeleteA very informative article and lots of really honest and forthright comments made! This certainly got me thinking a lot about this issue so thanks a lot for posting! http://celabright.biz
ReplyDeleteThis blog site is very good.
ReplyDeleteNice information sharing for us,
ReplyDeleteThanks
vTiger CRM is an open source CRM software is used mainly for small and medium enterprises.
VTiger
VTiger CRM
vTiger Integration
Perhaps this is a bit off topic but in any case I have been surfing about your blog and it looks really neat. impassioned about your writing. I am creating a new blog and hard-pressed to make it appear great and supply excellent articles. I have discovered a lot on your site and I look forward to additional updates and will be back.
ReplyDeletewww.fadeplex.com
Thanks for taking the time to discuss this I feel strongly about it and love learning more on this topic. If possible as you gain expertise would you mind updating your blog with more information? as it is extremely helpful for me.
ReplyDeleteCanton Fitness
Its not the case that reader must be completely agreed with author's views about article. So this is what happened with me anyways its a good effort I appreciate it. Thanks
ReplyDeletesell house as is
This blog is about making mobile apps. Its important because apps for mobile are getting demanded day by day. In this blog, admin said that to make mobile apps we can use Primefaces Mobile - Weather App. So I found this blog a good tutorial for learning something new..
ReplyDeleteWeb Development
Hi, Thanks a lot for such example. However i'm having serious trouble regarding look and feel. In fact, when I execute my aplication (which I literally copy from your example), it looks like a "plain" web page, i am wondering if there is some sort of css I should configurate ?
ReplyDeleteThanks in advance.