wesleyhales.com

RichFaces Mobile Designs - Day 3

03 August 2011

Java | mobile | richfaces |

So I made it over the hump of this mobile design week of madness. Below you will find a dark theme with a component skin for the rich:accordion component.


Day 3: About The Design


Here we have another phone based design broke out into 3 pages.
The first page is a standard menu so not much to say there. The bottom menu bar is a little different from my first design – following the lead of the native twitter iPhone app.
RichFace Mobile Skin1



As you can see with the second page (below), this is not a standard accordion panel type of component. When you touch an option from page one, the accordion expands on a different page and only focuses on that specific panel. Not sure if it could work, but accordion collapse/expand style of components don‘t make a ton of sense to me on limited screen real estate.
RichFace Mobile Skin1



So after you go through the menu options and decide on a component, you are taken to the detail/demo screen(below) where you can play around with your component of choice.

Note the small orange page marker dots at the bottom. The user would have the ability to flip through each component in the given section by swiping horizontally.
RichFace Mobile Skin1




Going Mobile With RichFaces! Design Proposals - Day2

02 August 2011

Java | jsf | mobile | richfaces | web |

Day 2 of the RichFaces skinning and we have the first approach for tablet devices. Tablets are a little harder to design for because of a few reasons:

1) Your design sits on the fine line between desktop and mobile. You are designing your app for a max 1024 pixel resolution (in landscape mode) but you must also take advantage of mobile usability (which you will see in page2)

2) Similar to the iPad Mail.app, it‘s almost like you are designing 2 different UI‘s for landscape and portrait modes. For portrait you need more drop down menus, and for landscape you can try to fit everything on one page without the drop downs.


RichFace Mobile Skin1

Day 2: About The Design


Here we have the interaction broken out into 2 pages. The first page shows the primary menu and isn‘t all that exciting.

Notice how, unlike the iphone design from Day 1, I left the browser button overrides within the app itself. Tablet web apps are completely use case driven so this will vary. But since we have so much more real estate, we can play around with standard navigation options that keep the user's attention focused on the app itself.



RichFace Mobile Skin1





The second page is what you see after selecting a menu item from page 1 (click to enlarge). Here we have the title bar at the top left with a built in back button which takes the user back to the first screen.

To the right of the title you see the secondary menu represented by rounded rectangles. Next is the main content of the page broken out into content and actionable panels.

And finally you have the big arrows to the right and left. These arrows are “thumb reachable” which is a common usability pattern in portrait mode tablets. It provides an easy page flip access to all of the RichFaces components within the top level category.


The great thing about CSS3 transitions is that you can really make a UI like this scream and flow seamlessly. So you can imagine how tapping an arrow with your thumb will slide in a new component demo and gracefully highlight the secondary menu option at the top.


So this concludes our design for Day 2. As I said earlier, this is more of a use case driven design. WE could spawn a very minimalistic skin and component look and feel from this. However, It would be more to display the power behind RichFaces ajax and templating features as the user moves through the app.

Going Mobile With RichFaces! Design Proposals - Day1

01 August 2011

Java | jsf | mobile | richfaces | web |

Today marks an important day in the RichFaces project as we continue to head down the mobile web road. Since we have such a great community of users and followers, we want you to be involved with the design process.
So each day this week, I will come up with a new proposed design/theme for RichFaces Mobile and we want to hear your feedback.

I will announce each new design (both for tablet and phone) via twitter with a link back to this article. I will try my best to pick apart each design and describe why I did what I did, and hope you can give me some real world feedback. We want this project to actually make sense and be usable to what you guys are facing in the real world. Without further adieu....


RichFace Mobile Skin1Our first task is to tackle the RichFaces showcase of components. Classifying what is mobile ready and which components may need a little work.

Day 1: About The Design


Here we have what could be the RichFaces component showcase skin. This is what I will be posting a new version of each day this week.

In this design we have the standard browser “functionality take over” at the top header. The custom back button is essential to mobile web design and must be overridden here – following the pattern of previous designs.

Nothing too different about the standard menu options and detail options (center stage). Following convention here as well. One thing I am adhering too are the usability guidelines set forth by Jakob Nielsen‘s Usability of iPad Apps and Websites

To get the full tab bar at the bottom (and to replicate the native feel) the user must bookmark the application. I think it makes sense for this menu to be contextual to the app and provide other alternate routes.




Runtime Type Detection and Usage with Weld

04 May 2011

Java | cdi | hornetq | infinispan | jms | jsf | richfaces | seam | weld |

About TweetStream


tweetstreamIn developing the TweetStream demo for the JBoss World keynote and JUDCon presentation, I wanted to use CDI in a way that would choose the implementation of a given type at runtime. With Qualifiers and Producers, CDI gives you the power to do this.
A little bit about the usecase: The TweetStream application is an app that Jay Balunas and I developed over the past few months for our presentation at JUDCon and JBoss World 2011. It was purposely developed with a myriad of JBoss community projects to showcase how you can build a mobile HTML5 web application (which runs on Android and iOS devices) with things like scalable data grid, JMS, JSF2, HTML5/CSS3 and other middleware technologies. This application (TweetStream) was also chosen to be part of the literally incredible JBoss World 2011 keynote.
So, we had 2 scenarios – 1) for our presentation we needed a mobile app that could run solely on it’s own so that users could pull the source code, see how we did things, and run it. 2) For the keynote, we had to make our app integrate with the Infinispan datagrid that was already setup as part of the keynote demo. The data stored on this grid utilized Drools and complex event processing as part of the keynote, so our app had to consume that data for that environment.
So we got our tweet data from the true source (twitter4j) during our JUDCon presentation, and then from the data grid during the keynote. We could have used CDI alternatives, but I wanted a true solution with no XML configuration and runtime detection.


The Code...


So we have 2 Qualifier Types:
@TwitterLocal for the JUDCon demo impl
@TwitterServer for the keynote impl

We used infinispan in both instances, but our @TwitterLocal is a single node caching a direct twitter stream from Twitter4J.

Now that we have our types defined as follows…

@Qualifier

@Retention(RetentionPolicy.RUNTIME)

@Target({ElementType.TYPE, ElementType.METHOD, ElementType.FIELD, ElementType.PARAMETER})

public @interface TwitterServer

{

}



@Qualifier

@Retention(RetentionPolicy.RUNTIME)

@Target({ElementType.TYPE, ElementType.METHOD, ElementType.FIELD, ElementType.PARAMETER})

public @interface TwitterLocal

{

}

We need not only an implementation of each, but also a deciding bean that tells us which type to use.

First, our implementation of each Type implements an interface:

public interface TwitterSource {

  public void init();

And our implementations have a different usage of the init method. TwitterLocal starts the stream coming from twitter and updates the infinispan cache. TwitterServer starts a method which allows us to start receiving data from the keynote which uses complex event processing and a datagrid with 6–8 nodes.

So now, how do we decide which Type to use? There are a few different ways to do it, but in the case of this being a demo and not a lot of time on my part. I used this approach:

public class TweetStream {



  @Inject

  @Any

  Instance<TwitterSource> twitterSource;



  class TwitterLocalQualifier extends AnnotationLiteral<TwitterLocal> implements TwitterLocal

  {

  }



  class TwitterServerQualifier extends AnnotationLiteral<TwitterServer> implements TwitterServer

  {

  }



  boolean initialCheck = true;

  boolean demoexists = false;



  @PostConstruct

  private void init()

  {

     getTwitterSource().init();

  }





  @Produces

  public TwitterSource getTwitterSource()

  {

     if (initialCheck)

     {

        try

        {

                   Class.forName("org.jboss.jbw2011.keynote.demo.model.TweetAggregate");

           log.info("Running in JBW2011 Demo Mode.");

           demoexists = true;

        }

        catch (ClassNotFoundException ex)

        {

           log.info("Running in local JUDCon2011 Demo Mode.");

        }

        initialCheck = false;

     }



     Annotation qualifier = demoexists ?

        new TwitterServerQualifier() : new TwitterLocalQualifier();

     return twitterSource.select(qualifier).get();

  }

This is all in the source code. Feel free to pull it and make improvements or run it to see it in action. There are many more blog posts to come from this demo, so stay tuned…

Going Mobile With RichFaces 4 - Part 1: Drag and Drop

16 February 2011

Java | jquery | JSF | richfaces |

Richfaces 4 just reached Milestone 6 and now would be a great time for the community to step up and check how the components run on mobile platforms.
First off, Richfaces 4 currently does not offer mobile support but it is definitely the direction they are heading. And the RF team has taken all the necessary steps to allow the client side code to be extended and improved by way of jQuery.

Today I am going to add touch support to the RF drag and drop component. We all know that touch events and gestures are not the same as a mouse click. So one must consider a couple of different approaches before implementing a final solution:

1) Override the default touch events with their mouse counterparts.
This is easy since you are basically overriding the default functionality of touch and gesture events. There are 3 mouse events to replace to get this component working:
touchstart,touchmove,touchend

2) Extend jQuery core components and add the “drag” functionality alongside “touch”
A little more difficult and fortunately the jQuery team is working on the mobile upgrade to ui.draggable – so this should be available in the next few weeks/months.

(tested on live iPhone4 and iOS simulator iPad)

I originally started out using the touch and gesture events to do the drag and drop. This allowed for a smoother UX but unfortunately, the internal plumbing of Richfaces required a complex extension/wrap of rf.ui.draggable (to add the new touch functions) and some custom bindings like rf.Event.bind(this.dragElement, ‘touchstart‘+this.namespace….) in dnd-draggable.js.
In the end, it was just easier for me to use this script and re-map the 3 main touch events.

I looked at many different approaches starting with SenchaTouch which btw is pointless if you are going to leverage existing jQuery, then moving to a few different jQuery utilities.
The basic question here, which can be applied to any component framework, is “What’s the best mobile approach for supporting product xyz?” Every product out there that touches the UI has to cross this gap. Touch interfaces today… tangible UI’s tomorrow… and the vicious cycle continues. And majority of the time, the best way to get started is to build an emulator so that your product can work today. This will buy you the time to build the native functionality that takes full advantage of the target platform.
Unfortunately the script I used here doesn’t always work and there are still a few more components in Richfaces that do not work with this duck punch approach. So I will try to make this a series and blog about & fix the other components on mobile platforms.

The old days of drag and drop are not as simple as they used to be. With multi touch surfaces you have the ability to accelerate your drag and throw it across the page, rotate it, and auto scrolling when you drag the object off the page, etc... Just something to think about when designing a similar component.

Replacing FacesMessages with Growl alerts

10 August 2009

Java | growl | jsf | richfaces |

I saw a tweet from(@maxandersen) the other day and decided to try adding Growl like messages in a standard JSF/Richfaces application using jGrowl. It is quite simple and my approach could definitely be improved upon.

This is really just javascript on the front end and can be used with any backend message generating system.

Code Used:

Include the scripts in the head:

Note the loading of jquery in the Richfaces page...

 
 
 <a4j:loadScript src="resource://jquery.js"/> 
<link rel="stylesheet" href="/css/jquery-plugins/jquery.jgrowl.css" type="text/css"/> 
 <script type="text/javascript" src="/js/jquery-plugins/jquery.jgrowl.js"></script> 
 
  

Write a simple script to extract the message:

... and add any customizations you may need to jGrowl. One thing to take note of here is that you cannot use the $ sign for jQuery in a Richfaces app. This is because of the RF framework using prototype.js by default and it too uses the $ sign. So every 3rd party jQuery script that you use, you must s/$/jQuery/g (find and replace all usages of '$' with 'jQuery')

 
function showError() 
{ 
jQuery.jGrowl.defaults.position = 'center'; 
if (document.getElementById('errorMessage') != null) 
{ 
jQuery.jGrowl(jQuery('#errorMessage').html(), { 
sticky: false, 
life: 10000 
}) 
} 
} 

And tell the script to run after page load:

jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:

 
$(document).ready(function(){ 
showError(); 
}); 

Here is a live screen shot of the script in action using a generate h:message.

JBoss Portlet Bridge Beta2 Released!

11 April 2008

Java | bridge | portlet | richfaces | seam |

The JBoss implementation of the JSR-301 spec allows developers the ability to develop portlets with any mixture of Seam, RichFaces, and JSF. One of the main goals of the 301 specification is to make life easier on the JSF developer who chooses to integrate his web application into a portal environment. The JBoss Portlet Bridge project builds on that vision of no-hassle integration and setup.

Read more about what is included in this release.

JBoss Portlet Bridge project page.

JBoss Portlet Bridge with Seam support released

14 February 2008

Java | bridge | jsf | portlet | richfaces | seam |

It has been quite a while in the making (a couple months) and we finally have a beta release of the portlet bridge.

The JBoss Portlet Bridge is an implementation of the JSR-301 specification to support JSF within a portlet and with added enhancements to support other web frameworks. Currently the bridge supports any combination of JSF, Seam, and RichFaces to run inside a portlet.

See the project page for more details and a live demo.


Page and Component Modal with a4j:status

20 January 2008

Java | demo | jboss | modal | richfaces |

I haven't really had a chance to look at RichFaces OOB modal, but I had written this one over a year ago when Ajax4JSF was still on java.net

Due to an overwhelming interest in the previous article I decided to spend some time developing this modal into a demo application and to add some new features. Modals are good to some and hated by others, they have their place and can certainly add some cleaner usability to any website. The cool thing about a modal window is that the user doesn't feel like they are being redirected to another page. They can still keep their focus on the content at hand while multitasking and spawning another workflow.

So what about component based modals? We know good and well what a page-locking modal is, but has anyone tried to implement a modal that only covers the area of the active ajax component?

This is a component based modal. It basically blocks out the activated component per ajax request.

This demo is already setup and ready to go, check it out here and the instructions on getting it running are in the home page description. This is the same demo I used in my previous Running Seam on Tomcat... article - now updated to the latest version of Seam and cleaned up a bit (and also put it under Google code vcs).

And that's not all! To make life even easier I wrapped the modal(s) up in a nice and neat Facelets component. The modals also allow for unlimited modals-per-page. Meaning that you can have 10000 modals on one page without conflicts ;). Here's how you use it:

 
 
<hc:modal modalId="loading-modal" modalContainerId="loading-modal-msg" hidden="true" width="129px"> 

 Content that you want in the modal goes here... 
</hc:modal> 
 
 


... then put the a4j:status tag inside of an a4j:region. Note the javascript methods being called. You could use these in any onclick event that needs to present a modal.


 
 <a4j:status for="stat1" forceId="true" id="ajaxStatus" 

 onstart="alertModal('loading-modal','loading-modal-msg');" 
 onstop="hideContentModal('loading-modal','loading-modal-msg');"> 

 <f:facet name="start"> 
 
 </f:facet> 
 </a4j:status> 
 


This is a work in progress and maybe some day I will cleanup my js, explain why I did things the way I did them, and package this up in a component jar. For now this is it.

Seam 2.0GA in JBoss Portal (in 5 minutes)

15 November 2007

Java | jboss | portal | richfaces | seam |

**Update - See this article for more info.