Cagatay Civici's Weblog

Mobile GPS Navigation App with JSF

cagataycivici — Sun, 15 Nov 2009 15:32:02 +0000

I’ve created various sample mobile apps before such as Translator, Weather, News, Notes, Twitter Client and Mobile Chat (powered by PrimeFaces/Atmosphere Push infastructre) etc. Since these are webapps tuned for mobile app look and feel, I was wondering the limits of a mobile webapp compared to a native app. Geolocation and GPS support might sound like one of these limitations but well, it is not As a proof of concept for a PrimeFaces/TouchFaces app I’ve created the PathFinder, A mobile GPS Navigation app for iphone.

To begin with here’s the final output; There’re two screens, one is for map with directions and other is for settings. Click images for higher resolution.

See it in action

I’ve recorded a short screencast as well running the PathFinder on iPhone Emulator.

All of this is basically a simple JSF page; pathfinder.jsf




	
		
			
			
			
		

		
			
				
			

			
				
					
						
					

					
						
							
						
					

					Find and Go!

					
							
								
							
					
				
			

		

		
			
				
			

			
				

					
						
							
							
								
								
							
						

						
							
							
						
					

				

				Save

That’s just it, now you have a GPS enabled navigation app with a couple of lines. Let’s breakdown the important points to see how it works;

* GEOLocation info is provided by mobile safari, navigation geolocation api is an HTML5 feature supported by major browsers like Safari and Firefox (no IE of course). When you run the application, safari asks for a confirmation since the app tries to access hardware information and on page load places a markers on map with the geo location info.

* Once we have the location, it’s trivial to place a map and do some gmap api coding. ‘Find and Go’ button simply does a geocoding and retrieves the latitude and longitude, with that it asks gmap api for directions and updates the map. Update happens in 5 seconds with the updated geo location info.

* A settings view is also added, I left out the implementation of settings UI but it helps to demonstrate how easy it can be to create another UI for customizations.

Summary

PathFinder is a simple reference app, things can be done with PrimeFaces is limitless. For example, since PrimeFaces also supports Ajax Push, it would be so easy to create location based mobile Comet applications as well.

Finally one thing I’d like to emphasize again, what PrimeFaces has so far (70+ Ajax Components, Ajax Push/Comet, Lightweight design, TouchFaces, GPS enabled apps, …) is just the beginning.

I’m speaking at JSFSummit 09

cagataycivici — Mon, 09 Nov 2009 00:39:13 +0000

I’ll be speaking at JSFSummit 09 in Orlando between December 1-4 with my “Rapid RIA with PrimeFaces” session. I really enjoyed last year in Washington D.C. when the conference was called JSFOne back then.

I’m really looking forward to get together again with folks like Ed Burns, my man Matthias Wessendorf, Martin Marinschek, Max Katz, Kito Mann and Andy Schwartz. It’ll be a great conference!

Mobile Twitter Client with JSF

cagataycivici — Thu, 05 Nov 2009 00:29:33 +0000

I’ve added another sample to TouchFaces showcase applications, this one is called TwitFaces allowing to view someone’s tweets in your iphone. The app integrates with twitter rest api and created with TouchFaces mobile JSF kit of PrimeFaces.

Let’s begin with TwitterService

package org.primefaces.examples.service;

import java.util.List;

public interface TwitterService {

	public List getTweets(String username);
}

And TwitterRSSService, the RSS based implementation using Rome.

package org.primefaces.examples.service;

import java.net.URL;
import java.util.ArrayList;
import java.util.List;
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;

public class TwitterRSSService implements TwitterService {

	private static final Logger logger = Logger.getLogger(TwitterRSSService.class.getName());

	public List getTweets(String username) {
		List tweets = new ArrayList();

		try {
			URL feedSource = new URL("http://twitter.com/statuses/user_timeline.rss?screen_name=" + username);

			SyndFeedInput input = new SyndFeedInput();
			SyndFeed feed = input.build(new XmlReader(feedSource));
			for(Object f : feed.getEntries()) {
				SyndEntry entry = (SyndEntry) f;
				tweets.add(entry.getTitle().substring(username.length() + 2));
			}
		}catch(Exception e) {
			logger.severe(e.getMessage());
		}

		return tweets;
	}
}

And the JSF backing bean called TwitterController powered by PrimeFaces Optimus.

package org.primefaces.examples.touch;

import java.util.List;

import javax.faces.event.ActionEvent;

import org.primefaces.examples.service.TwitterService;
import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;

import com.google.inject.Inject;

@Controller(name="twitterController", scope=Scope.REQUEST)
public class TwitterController {

	@Inject private TwitterService twitterService;

	private String username;

	private List tweets;

	public void loadTweets(ActionEvent actionEvent) {
		tweets = twitterService.getTweets(username);
	}

	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}

	public List getTweets() {
		return tweets;
	}
	public void setTweets(List tweets) {
		this.tweets = tweets;
	}
}

Finally create your app as a JSF page, twitfaces.xhtml;

That’s it running twitfaces.jsf displays;

TwitFaces is a very simple app, a full blown twitter client can be written on top of it easily using TouchFaces/PrimeFaces.

Online Demo

Check out TwitFaces app live on PrimeFaces Online Demos.

PrimeFaces Reorg

cagataycivici — Tue, 03 Nov 2009 00:12:48 +0000

Two PrimeFaces modules, Optimus and FacesTrace are moved to the PrimeFaces Extensions as spin-off projects and PrimeFaces UI module is renamed as PrimeFaces.

Main goal of PrimeFaces has always been to be the ultimate JSF component suite, by this change PrimeFaces became all about UI again.

Dynamic Images with JSF

cagataycivici — Mon, 02 Nov 2009 00:22:53 +0000

Legacy way to display binary images is to create a servlet and send the byte content as a stream. This requires a dedicated servlet and probably different servlets dealing with handling cases.

PrimeFaces features a simple but powerful StreamedContent API and p:graphicImage component to display any binary image easily. This binary image could be images stored in a database or images created programmatically on-the-fly. Following are a couple examples for demonstrating how easy it is to display binary images with PrimeFaces.

Images Stored in Database
This example retrieves a blob from a jdbc resultset and provides it’s inputstream as a StreamedContent.

public class BackingBean {

	private StreamedContent dbImage;

	public BackingBean() {
		InputStream dbStream = //Get inputstream of a blob eg javax.sql.Blob.getInputStream() API
		dbImage = new DefaultStreamedContent(dbStream, "image/jpeg");
	}

	//getters and setters
}

Generated Chart Images
JFreeChart is a popular open source charting library, PrimeFaces also have flash based cool charts but if you want
to use JFreeChart instead you don’t need a wrapper JSF component for this. Just create your chart and define it as
as a streamed content.

public class BackingBean {

	private StreamedContent chartImage;

	public BackingBean() {
		try {
			JFreeChart jfreechart = ChartFactory.createPieChart("Turkish Cities", createDataset(), true, true, false);
			File chartFile = new File("dynamichart");
			ChartUtilities.saveChartAsPNG(chartFile, jfreechart, 375, 300);
			chartImage = new DefaultStreamedContent(new FileInputStream(chartFile), "image/png");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	private PieDataset createDataset() {
		DefaultPieDataset dataset = new DefaultPieDataset();
		dataset.setValue("Istanbul", new Double(45.0));
		dataset.setValue("Ankara", new Double(15.0));
		dataset.setValue("Izmir", new Double(25.2));
		dataset.setValue("Antalya", new Double(14.8));

		return dataset;
	}

	//getters and setters
}

This chart example truly demonstrates the power of PrimeFaces StreamedContent, I’ve created a JSFChartCreator component long time ago which became quite popular in JSF community. The problem was when you wrap a huge API like JFreeChart, flexibility gets lost since it’s just too hard to support every different setting in JFreechart API with a wrapper component. StreamedContent and p:graphicImage simply makes any other JSF component wrapping JFreeChart obselete. Instead with this way you still have the full power of chart api and a very easy way to display it.

Runtime Barcode Creator
Similar to the chart example, an on-the-fly generated barcode can easily be presented. This example uses barbecue project to create barcodes.

public class BackingBean {

	private StreamedContent barcode;

	public BackingBean() {
		try {
			File barcodeFile = new File("dynamicbarcode");
			BarcodeImageHandler.saveJPEG(BarcodeFactory.createCode128("PRIMEFACES"), barcodeFile);
			barcode = new DefaultStreamedContent(new FileInputStream(barcodeFile), "image/jpeg");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	//getters and setters
}

Online Demo
Examples I’ve given here are also available live at PrimeFaces Showcase.

Summary
One of the design principles behind PrimeFaces is to hide complexity and keep the flexibility, this is just one example of it in PrimeFaces.

Primus RC Trailer

cagataycivici — Sun, 25 Oct 2009 23:58:34 +0000

Web Based Ajax Terminal

cagataycivici — Wed, 21 Oct 2009 08:19:11 +0000

PrimeFaces brings desktop terminals to the web, p:terminal is an ajax powered JSF component to execute commands defined on server side. Usage is very simple, just place the terminal and provide a command handler.

Code

CommandHandler is a simple java method taking two parameters, first one is the name of the command and second parameter is an array of command arguments.

    public String handleCommand(String command, String[] params) {
		if(command.equals("greet"))
			return "Hello" + params[0];
		else if(command.equals("date"))
			return new Date().toString();
		else
			return command + " " + not found;
	}

Terminal in Mock OS X
I’ve integrated terminal to famous PrimeFaces Mock OS X, there’s a terminal icon in the dock displaying the terminal in a dialog. Check out the terminal in Mock OS X demo. CommandHandler is the one I’ve posted above with greet and date commands.

More Demos
There’re two more terminal demos;
* Terminal in a dialog
* Full page Terminal

Aim of PrimeFaces is to create the Ultimate Component Suite to rule them all. What PrimeFaces has so far is just the beginning.

Benchmarking Ajax JSF Libraries

cagataycivici — Sun, 18 Oct 2009 18:04:33 +0000

Mert Caliskan posted a simple ajax performance test comparing PrimeFaces, RichFaces and Trinidad. He used simple partial page rendering examples in demo applications which reveals PrimeFaces is 2x/3x faster than RichFaces and Trinidad. Also Alex Smirnov tested the same demo apps and got a set of different results.

Well benchmark tests usually cause debates, I’ve also done similar tests but to improve the accuracy and cause less debates I’ve created three different applications rather than using showcases. All applications are deployed on tomcat6, use server side state management and facelets for view. The box used for testing is a mac book pro 2.4 ghz with 4gb ram running snow leopard.

Let’s start with PrimeFaces.

PrimeFaces

Page: primeppr.xhtml

Configuration: None (PrimeFaces is a lightweight library so basically there’s nothing to configure

RichFaces

Page: primeppr.xhtml

Configuration: As far as I know disabling forceparser improves RichFaces performance, so I set forceparser to false.

Trinidad

Page: trinidadppr.xhtml

Configuration: I’ve disabled debug setting of Trinidad in trinidad-config.xml.

Results

For 10 requests for the exact simple use case, average processing times are;

PrimeFaces: 8.4 ms

RichFaces: 16.7 ms

Trinidad: 9.7 ms (Note that Trinidad has more optimization features like view state caching which can improve the performance even further.)

I believe these results can be realized as more accurate compared to other two tests I’ve mentioned because for my tests rather than using the different showcase apps I’ve created the same application three times with each library.

I’m glad that PrimeFaces is performing well, the reason is as a result of aiming to keep things simple. PrimeFaces has no servlet filter, html parser, custom viewhandler, custom statemananger and etc. This helps PrimeFaces to keep things clean, do less computation, use less memory and be lightweight. Even acouple of PrimeFaces users were kind enough to provide testimonials which proves it.

Mobile Ajax Push for iPhone with PrimeFaces

cagataycivici — Mon, 12 Oct 2009 23:24:46 +0000

PrimeFaces 1.0.0.RC aka PRIMUS will introduce the new Ajax Push aka Comet features powered by Atmosphere, after doing the initial integration I’ve created a sample chat application for a demo. It’s a simple app with login and message sending capabilities powered by http-streaming. I’ll also add support for long-polling approach soon.

After creating it, I took the integration one step further and using TouchFaces, created an iPhone app as a chat client. App will also work well with other mobile devices such as Android Phones, Palm Pre, Nokia S60 and more, any handheld device with a webkit browser is supported well.

Following is a short screencast, begins with demonstrating how easy it’s to use PrimeFaces Push and then adds more flavour with the TouchFaces client. Don’t forget to watch the video in HD. You can also play with this stuff via the online demo of PrimeFaces. Mobile chat client is also available at the TouchFaces section of PrimeFaces showcase.

PrimeFaces Talk Video and Slides

cagataycivici — Sun, 11 Oct 2009 21:17:11 +0000

Last week, I gave my “Rapid RIA with PrimeFaces” talk at an event organized by London Java Web Users Group. The session is recorded

and available as a 90 minute podcast. Slides are also available at PrimeFaces project page.

My next stop is JSFSummit 2009 where I’ll be doing an updated version of this talk in Orlando, USA. See you there!

Last week, I gave my “Rapid RIA with PrimeFaces” talk at an event organized by London JUG. The session is recorded and available as a 90 minute podcast. Slides are also available at PrimeFaces project page and you can watch the podcast at skills matter site.

My next stop is JSFSummit 2009 where I’ll be doing an updated version of this talk in Orlando, USA. See you there!