I’m very happy to announce the creation of AeroGear, the newest project at JBoss! The AeroGear project is all about making mobile development of all kinds as easy as possible with JBoss! This project is focused on three things; education, innovation, and community!

Education

We’ll be covering all aspects of mobile application development! This includes the latest HTML5 technologies used in the mobile web, and in hybrid application frameworks like the Apache Cordova. All the way to JBoss AS based services, mobile RichFaces/JSF2, tooling, and native application support, and prototyping.

To wet your whistle we’ve put together a 5 minute video to show you how easy it is to get from zero to a mobile web application with cloud hosted services on JBoss.

Just in case you missed it at the end, the link to the live hosted demo on Openshift is at http://poh5-aerogear.rhcloud.com.

Assuming that got your interests up, we go a lot deeper. Our step by step guide on building this HTML5 mobile application yourself, including where to fork it on github is available right on our wiki page. There are also guides detailing the specifics on single page applications, HTML5 updates, CSS3, jQuery Mobile, RESTful endpoints, and more here.

Innovation

Our initial focus is on providing excellent examples, tutorials, and techniques for enterprise mobile developers. These will cover mobile web, hybrid, and native applications approaches for working with JBoss and other 3rd party projects. For all you polyglot lovers out there, we’re not limiting ourselves just to Java either, we’ll have pure HTML, and JavaScript demos, TorqueBox and Ruby will make an appearance, and we’ll be looking at other approaches as well.

However, at the same time we'll be developing new mobile[native, hybrid, and web] based frameworks for solving real concerns of enterprise developers. The most immediate of these include offline data synchronization, security, container integration, and support across a broad range of devices.

We’re currently designing and discussing some of these solutions, and want your input! Head over to the AeroGear Developer space for more. We plan on moving pretty fast here and hope to have some real world prototypes up and running soon.

Community

Whether you are a long time Java EE developer looking to migrate existing applications to mobile clients, or client developers looking for a powerful back-end for your applications this is where you can learn more about both, and become part of the community building it!!

We’ve got team meetings on IRC at #aerogear @ irc.freenode.net, user, and developer forums, all of our code is up on github for sharing, and we’re always looking for motivated developers to step up and join the team! We’ll be speaking at up coming conferences and JUGs around the world, as well as having regular blogs, webinars, and screencasts! Watch this space and our forums for the latest.

Success comes with a strong community, and everyone getting involved however they can! Bring your questions, and opinions, and let's hear from you!!

[AeroGear Project] [GitHub] [Twitter] [User Forums] [Dev Forums]

In my previous blog about Brian Leathem becoming the RichFaces project lead, I mentioned that the release of RichFaces 4.1 is imminent. It is not longer imminent, but upon us!

I'm very happy to say that today Brian announced the release of RichFaces 4.1.0.Final!! This is a great release for RichFace and JSF, please take a look at Brian's blog for all the details, and keep an eye out for some follow up blogs highlighting the new features!

The release of RichFaces 4.1 is imminent and with it brings some great advancements to the project and JSF! Among the most notable are additional mobile support, push upgrades, new components, and more.

Recently however, I’ve been focusing on more general mobile and HTML5 initiatives. You can see some of what I’ve been up to in the webinar I had Wednesday Dec. 7th on getting started with HTML5/Mobile development with JBoss (recording will be available soon).

This has meant that I’ve not had the time to dedicate to RichFaces that it deserves, and so I’m thrilled that we have an engineer and leader like Brian Leathem who has agreed to lead the project into the future!! He is already the seam-faces project lead, and has been a critical member of the RichFaces for some time!

Brian and the rest of the RichFaces team have not only done a great job on RichFaces 4.1, but also have some great plans for the future of RichFaces. Brian has started to outline these to start the discussions. This is only going to pick up steam once 4.1 is out!!

I’m not just going to disappear though, mobile and HTML5 are certainly an integral part of RichFaces! Keep an eye out in this space for more from me and JBoss about all aspects of mobile application development including mobile web, hybrid, and native techniques.

I wanted to take a moment and thank the RichFaces team and community! I’m could not be more proud of the people that use and develop RichFaces. Through our forums, weekly meetings, and now github we’ve seen a huge increase in contributors, users, and colleagues. To all of you:

We're going to dive down into the rabbit hole, and follow up on Wesley Hales great video on deploying the mobile web optimized RichFaces TweetStream application to Red Hat's new, free PaaS offering OpenShift Express complete with JBoss AS 7 under the hood!

Whats Been Covered

There has already been a lot of coverage on OpenShift, and the mobile web optimized TweetStream app. So I'm not going to cover old ground. Check out these blogs and videos:

• JBoss & OpenShift Launch Page
• Video describing TweetStream presented by Wesley Hales and myself
• My blog explaining TweetStream in more detail
• Lukas's blog on getting tweetstream running on JBoss AS 7
• Wesley's 4 minutes to the cloud video on OpenShift Express, and TweetStream

OpenShift Express Updates

The RichFaces team is in the process of migrating our RichFaces Showcase application from Google App Engine to OpenShift Express, we'll have it ready soon. OpenShift offers a number of benefits over GAE, it is a real Java EE container, supports RichFaces push and has a much less restrictive API

Like many other free PaaS offerings OpenShift Express does have a few limitations that you need to consider. The most important ones for our application are limited threads, and JMS support. Note that all of these go away when you move up to OpenShift Flex!

RichFaces Push streamlined

When RichFaces 4.0.0.Final was released our push component was tied to JMS. This provides excellent enterprise level messaging capabilities, but unfortunately requires some setup to use. Since JMS is not provided by Express out of the box we needed to make some changes. So for 4.1.0 we are adding in a few options!

Starting with RichFaces 4.1.0.M1 RichFace Push can be decoupled from JMS. All that is needed is to set a context param:

<context-param>
    <param-name>org.richfaces.push.jms.disable</param-name>
    <param-value>true</param-value>
</context-param>

This will switch push to using an internal message queue. Look for further blogs, and documentation on this in the future. This is also one step closer to our plan to support CDI events as part of RichFaces Push.

Atmosphere updates on the way

Another change that was needed was moving to a snapshot version of Atmosphere. Atmosphere had a bug where it was creating a new thread for each request - ouch! Since OpenShift Express has limited threads available we needed a way around this.

Thankfully this issue was fixed in the Atmosphere 0.8-SNAPSHOT branch. This version of Atmosphere is due to be released in August, and RichFaces will use it by default once it is (likely in the 4.1.0.M2 release).

For now - if you are working on your own RichFaces push application and deploying to Express you'll need to override the Atmosphere version. This is simple enough with Maven, just add the following to your pom:

<dependency>
  <groupId>org.atmosphere</groupId>
  <artifactId>atmosphere-runtime</artifactId>
  <version>0.8-SNAPSHOT</version>
</dependency>

Infinispan cache LOCAL support

As was discussed in some of the linked blogs, the TweetStream application uses Infinispan under the covers to provide caching for the tweet data that we process. Infinispan in cluster mode uses jGroups to provide advanced communication support.

The problem here is the threading that accompanies this. For TweetStream it is important to make sure that you are using Infinispan in LOCAL mode. The latest TweetStream source has been updated to use the LOCAL cache.

Where to go from here

Now that we've gone over updates that are needed to take advantage of OpenShift Express I encourage you do give it a shot on your own. The source code is in the TweetStream git repo. Just follow the readme to setup and build it. Then deploy following the instructions in Wesley's video.

There will be more JBoss and OpenShift blogs and videos coming out, so stay tuned and check out JBoss and OpenShift page for the latest news.

[OpenShift Express] [JBoss OpenShift News] [OpenShift Twitter] [TweetStream git Repo] [RichFaces Twitter]

The JBoss World opening Keynote featured one of the best keynote demonstrations I've ever seen!! Part of that demonstration included a RichFaces application customized for the mobile web call TweetStream. We are going to talk about that app, why it works so well for mobile web development, and how you can get it running on your machine.

The entire JBoss World demonstration included many JBoss projects; such as JBoss AS, Infinispan, Hibernate OGM, CDI, and Errai. A video of the keynote & demo is available through the image on the left. The demo starts around 35:15 minutes in. And yes that WAS my real iPad/iPhone password :-)

The latest JBoss Assylum also features many of the developers giving behind the scenes perspective and humor. Each project will be providing blogs and code for its own part. You can get the latest at the JBoss World Keynote 2011 landing page, and follow along with the #jbwkeynote2011 twitter hashtag!

RichFaces TweetStream Application

Wesley Hales and I were looking for an application to show RichFaces 4 on mobile devices for our JUDCon presentation: Filling the Gap: Going Mobile With JBoss Technologies Today. We came up with a simple idea that would be instantly recognizable, allow audience participation, and with just enough UI complexity. It was around this time that JBoss Keynote was being planned, and TweetStream just fit right in!

TweetStream uses twitter4j to search and filter a stream of tweets containing a set of hashtags, and displays them to the user. It also keeps track and calculates the top 10 tweeters, and the top 10 hashtags. It then uses RichFaces Push to keep the UI updated with the latest content across devices.

In front of this Wesley and I built a set of RichFaces 4 views that provide advanced support for different mobile devices. We targeted webkit browsers that run on iPhones, iPads, BlackBerry, and Android devices. Each view is served through a single URL with device detection for a one bookmark solution. We achieved near native behavior using advanced HTML5/CSS3 techniques to process orientation layout changes, transitions, and more.

If you just can't wait to check out the demo on your own machine we have a version of it hosted on RedHat's OpenShift just follow this link http://bit.ly/tweetstream2. The Filling The Gap presentation was also recorded and contains Wesley and I discussing some of the apps details.

Source Code, OAuth, and IDE Integration

Instead of just explaining the various parts all up front lets just jump right into getting the source code, building it, deploying to JBoss AS and integrating it into JBoss Tools. We'll discuss some of the internals below, or is follow up blogs.

note: I'm assuming you have git, Maven, Java 1.6, JBoss AS 6 Final, and JBoss Tools 3.2 for IDE integration

The TweetStream source code is part the RichFaces organization on github.com. You can use git to clone the repo with: git clone git@github.com:richfaces/tweetstream.git. We'll talk about the structure after we get it running.

Twitter4j & OAuth

While we would love to let you use our twitter account credentials, that would not be so good. This means that you'll need to go through the steps outlined in the README to get twitter4j setup.

Twitter has a good step by step process for this on there OAuth page. Once you go through that you'll be able to update the twitter4j.properties file with these values:

oauth.consumerKey=**************************
oauth.consumerSecret=**************************
oauth.accessToken=**************************
oauth.accessTokenSecret=**************************

Once that's done all that is left is deploying the application!

JBoss AS 6

In the base /tweetstream directory run mvn package to build the standalone version of the application. You should now have the file /tweetstream/target/tweetstream.war. Copy this file to the $JBOSS_HOME/server/default/deploy directory.

At this point your can start the server, but I would recommend you start with the $JBOSS_HOME/bin/run.sh -b 0.0.0.0 if you want to access the server from external clients, like your mobile phone ;-)

Once the application starts up you can see it at http://localhost:8080/tweetstream. If you want to try out your smartphone or tablet you may need to modify you firewall to allow port 8080 through. Then access using your tablet, or phone at http://your.ip:8080/tweetstream.

Importing into JBoss Tools

Importing this project into JBoss Tools 3.2 is easy because it uses m2eclipse under the covers. All you need to do is choose File-->Import-->Existing Maven Project, and point it to where you cloned the source code. Eclipse will run through it's normal project import, and in a few minutes have the new project ready to go.

A couple of things to note:

• Add your JBoss AS 6 server as normal and you can configure TweetStream to be deployed
• You may see build issues in the /jbw project - I'll explain that in a minute

Structure and Key Files

Now that you have the application running, and hopefully imported into JBoss Tools lets talk about the structure and some of the key areas to look at.

As I alluded to above this application was originally just going to be for Wesley and my JUDCon talk. When it became part of the JBoss World Keynote demo we needed to support two different back-ends. We did this by using the power of CDI, and Maven to create two profiles. A standard profile for JUDCon, and a keynote version. Below is a brief explanation of the various modules:

/tweetstream  #Core application and views
/shared       #Classes files needed across the other two modules
/jbw          #Keynote specific source files to hook into the different backend

The build errors you get in eclipse for the /jbw directory is because of missing dependencies related to the keynote demo. At some point in the near future we'll be releasing the whole keynote demo, but for now Tweetstream is moduler enough to run on its own.

The way we were easily able to shift our backend so easily is a testament to not only JBoss, but to the Java EE as a whole. The pieces fit together well, and with CDI, and JSF we were able to swap in a completely different backend with very little effort.

As I said we'll be following up this blog with deep-dives into the various details, but for now, here are some things to take a look at:

Device detection

We use a great little project called mobileESP to help us with device detection. It is a basic user-agent sniffer that we wrapped in a CDI bean to do our bidding in a class called UserAgentProcess.java. This could be swapped out for any of the other device detection libraries such as the WURLF API.

We take advantage of JSF 2.0 and facelets templating to provide a single point of access per view to act as a dispatcher for different devices. This provides a single bookmark and URL no matter what device you are accessing it from. You can review that in the home.xhtml

Orientations detection and updates

Using CSS 3 @media selectors makes this a breeze. We use this to great effect in for the tablet view. Always keeping the top tweeters, and top hashtags in the best location.

• tabletHome.xhtml
• ipad.css - should be named tablet.css ;-)

SmartPhone transitions

Making the page handle the page transitions on smartphones was also easier than you'd think. You can review the details in the phoneHome.xhtml file.

Misc

• Page templates
• HornetQ config files
• TweetStreamListener.java and Twitter4j property files

Improvements That Can Be Made

TweetStream was developed quickly and with a singular goal in mind. There are some great opportunities for improvements, future RichFaces components, and more. I would like to encourage anyone who is interested to take look in more detail. Here are some possible ideas for improvements

• Streamline device detection
• Customizable search filters
• Layout components to support transitions
• RichFaces Mobile Skins
• Combine, and compress CSS
• Performance analysis and update
• Drill-downs on tweets and tags
• Flush out the desktop version

There are a lot more possibilities, fork it, play, and lets see what you can come up with!! We'll be standardizing and integrating some of these things into RichFaces, and other parts of JBoss so stay tuned!!

Where to go from here

Wesley and I are going to post additional blogs and dig into some of the features just touched on above. All of this should give you a good starting point for your own mobile web application using RichFaces 4 and JBoss! Also, as I mentioned above there are going to be several more blogs related to the JBoss World Keynote demo that will detail Infinispan, Hibernate OGM, the plug computers and more!!

[JBW Keynote Page] [JBW Keynote Twitter] [JBW Asylum] [TweetStream Online] [TweetStream Git Repo] [RichFaces Twitter]