Mobile Twitter Client with JSF

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<String> 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<String> getTweets(String username) {
		List<String> tweets = new ArrayList<String>();

		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<String> 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<String> getTweets() {
		return tweets;
	}
	public void setTweets(List<String> tweets) {
		this.tweets = tweets;
	}
}

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:i="http://primefaces.prime.com.tr/touch"
	contentType="text/html">

	<i:application icon="/images/touch/twiticon.png">
		<i:view id="home" title="TwitFaces">
			<h:form prependId="false">
				<i:tableView>
					<i:rowGroup>
						<i:rowItem>
							<h:inputText value="#{twitterController.username}" />
						</i:rowItem>
					</i:rowGroup>

					<p:commandLink actionListener="#{twitterController.loadTweets}" style="margin:10px 10px;"
					styleClass="whiteButton" value="#" update="display">Get Tweets</p:commandLink>

					<i:rowGroup id="display">
						<ui:repeat value="#{twitterController.tweets}" var="tweet">
							<i:rowItem>
								#{tweet}
							</i:rowItem>
						</ui:repeat>
					</i:rowGroup>
				</i:tableView>
			</h:form>
		</i:view>
	</i:application>

</f:view>

That’s it running twitfaces.jsf displays;

twitfaces

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.

2 Responses to Mobile Twitter Client with JSF

  1. ahmet sertoglu says:

    Hi Çağatay,

    I want to ask a question about jsf dataTable. I am sorry this unconcerned question.

    I am using dataTable for insert&update multiple rows into database. My users want to navigate between dataTable rows with arrow keys(up/down/left/right) and return key.

    My dataTable rows has 3 columns in which has h:inputText component. After User writes the value in h:inputText, with arrow keys or return key wants to go to the next row’s h:inputText. But i couldn’t succeed this action.

    How can i do this ?

    Thanks a lot.

  2. Pingback: Mobile GPS Navigation App with JSF « Cagatay Civici’s Weblog

%d bloggers like this: