Building Mobile Apps With jQuery For Any Device In The Cloud [Conference Tutorial]


OSCON 2011

On Wednesday July 27 during OSCON conference, I will be doing a tutorial on building mobile apps with jQuery in the cloud using Tiggr Mobile Apps Builder. If you are attending the conference, there is still time to sign up for this tutorial.

New Tiggr 1.2.5: faster, better prototypes, with new features

The Tiggr team released version 1.2.5 today. Tiggr now runs faster, loads projects faster and more stable. One of the new features is ability to place tabs either on top or bottom:

Other features include:

  • Controlling the number of rows/columns in table and grid via properties
  • Predefined screen sizes for web and mobile prototypes
  • Mobile navigation bar is now placed in header or footer as jQuery Mobile requires

Read more » [via Tiggr blog]

Presenting Flamingo at Silicon Valley JavaFX User Group

I will be talking about Enterprise JavaFX with Exadel Flamingo at Silicon Valley JavaFX User Group on Wednesday, July 14th, 2010. More info and registration.

Weekend reading list

Two greats posts by Felipe Wasserman (Exadel marketing intern):

RichFaces 4

Exadel Flamingo:

RichFaces workshop in Nuremberg, Germany

I will be teaching a 1-day RichFaces workshop in Nuremberg, Germany during Herbstcampus conference. The workshop is Monday, September 14th. If you are starting a new RichFaces project, this is the perfect place to learn all the core concepts, tags and features in just one day. If you are already using RichFaces, this workshop will fill in many gaps in your knowledge, and you will also be introduced to concepts and features you might never known existed. And it’s all in just one day!

RichFaces workshop
Outline below
Monday, September 14th
More info… (on web site)

In addition to the workshop, I have two regular sessions:

Rich Enterprise Applications with JavaFX
Tuesday, September 15th
More info…

Building Rich Internet Applications with RichFaces
Wednesday, September 16th
More info…

Outline for the workshop:

  1. RichFaces core concepts
    1. Sending an Ajax request
    2. Partial view rendering
    3. Partial view processing
    4. View scope
    5. Using queues to control traffic
    6. More a4j:tags (a4j:repeat, a4j:status, a4j:actionparam, a4j:log and more)
  2. rich: tags
    1. Inputs, in-place edit
    2. Selects
    3. Validation
    4. Data iteration
    5. Menus
    6. Other
    7. RichFaces functions
  3. Skins
    1. Using out-of-the-box skins
    2. Creating custom skins
    3. Loading different skins in runtime
    4. Overwriting styles generated by skins
  4. RichFaces 4.0 and JSF 2 integration

JavaFX-Flamingo-Seam Lighting talk at JavaOne

I’ll be doing a Lighting talk on connecting JavaFX and Seam with Flamingo. The talk is on Thursday, June 6th at 11:45am, at Sun pavilion area.

Simple expandable table with RichFaces

Expandable tables lets you click in a row to get more information about the particular record in this row. In this example, another rich:dataTable component is used to display details about one of the selected wonders.

screenshot01.png

Click on any [+]/[-] to expand/collapse any row:
screenshot02.png

JSF page:


   
      
         Wonder
	 
	 
	 
	 
      
      
         
	    
	         
	            
			Location
			
		    
		    
		       Image
		       
		    
		 
	      
	   
        
     

WonderBean class:

public class WonderBean {
   private WonderService service;
   private Boolean show;

   public Boolean getShow() {
      return show;}
   public void setShow(Boolean show) {
	this.show = show;
   }
   public WonderService getService() {
	return service;
   }
   public void setService(WonderService service) {
	this.service = service;
   }
   public WonderBean() {
	super();
   }
   public ArrayList getWonders() {
	return service.getList();
   }
}

WonderService class:

public class WonderService {

   private ArrayList  list;

   public ArrayList getList() {
	return list;
   }
   @PostConstruct
   public void init () {
	list = new ArrayList ();
	list.add(new Wonder("Chichen Itza", "Mexico", "http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Chichen-Itza-Castillo-Seen-From-East.JPG/90px-Chichen-Itza-Castillo-Seen-From-East.JPG"));
	list.add(new Wonder("Christ the Redeemer", "Brazil", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/50/CorcovadofotoRJ.jpg/90px-CorcovadofotoRJ.jpg"));
	list.add(new Wonder("Colosseum", "Italy", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg/90px-Colosseum_in_Rome%2C_Italy_-_April_2007.jpg"));
	list.add(new Wonder("Great Wall of China", "China", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/GreatWallNearBeijingWinter.jpg/90px-GreatWallNearBeijingWinter.jpg"));
	list.add(new Wonder("Machu Picchu", "Peru", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/90px-Before_Machu_Picchu.jpg"));
	list.add(new Wonder("Petra", "Jordan", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/PetraMonastery.JPG/90px-PetraMonastery.JPG"));
	list.add(new Wonder("Taj Mahal", "India", "http://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Taj_Mahal_in_March_2004.jpg/90px-Taj_Mahal_in_March_2004.jpg"));
	}

   public WonderService() {
   }
}

Wonder class:

public class Wonder implements java.io.Serializable{

   private String name;
   private Details details;

   public String getName() {
	return name;
   }
   public void setName(String name) {
	this.name = name;
   }
   public Wonder(String name, String location, String imageUrl) {
	super();
	this.name = name;
	this.details = new Details (location, imageUrl);
   }
   public Details getDetails() {
	return details;
   }
}

JSF configuration file:


  wonderBean
  data.WonderBean
  request
  
   service
   data.WonderService
   #{service}
  
 
 
  service
  data.WonderService
  session

RichFaces – using built-in filtering

I have shown you how to use RichFaces built-in sorting feature. Let me show you how to use built-in filtering. We are going to use the same 7 Wonders of the World table. To get basic filtering working is simple. Here is how the page looks:



   
      Name
      
   
   
      Location
      
   
   
      Image
      
    


For each column for which we want to enable filtering, we add two attributes, filterBy and filterEvent (lines #4 and #8). filterBy is bound to a bean property on which to do the filtering, while filterEvent sets the event on which to invoke filtering. Once we set the two attributes, running the page will produce an input field in column headers.

For Name column, filtering will be invoked on onkeyup event while on the Location column it’s on onblur event (meaning you have to tab our or click somewhere outside the table). The built in filtering function uses startWith() method to filter. In other words, whatever is entered is checked against each value in the list.

Before filtering:

screenshot017.png

After entering letter ‘C’ in Name column:

screenshot023.png

Redefining the filtering function will be covered in next post.

Beyond "Hello World" tutorial – Introduction to JBoss RichFaces

This article posted on DZone.com introduces JBoss RichFaces, however this time the tutorial goes beyond the standard “Hello World” example.

Dissatisfied with JSF?

It’s not difficult to find forums, blog postings and other resources from people who are just starting with JSF and are dissatisfied with the framework to say the least. Most people who are starting with JSF are coming from JSP, Struts, or a similar built-in-house framework. When they start evaluating JSF, they bring the same style and development approach to JSF that they used with JSP and Struts. This is exactly where all the problems start.

You can’t take that approach and use it with JSF. JSF provides a completely different paradigm to Web development – the user interface is development out of UI components. It’s very different from what people are used to doing with JSP and Struts. So when they try to do simple things in a JSP-like way in JSF, they fail and get frustrated. You might hear “but I could do this in JSP in about 5 minutes”. Of course you could, but JSP is really not more than mixing Java and HTML. JSP provides so little abstraction that you can do basically anything – even if in most cases it isn’t done correctly. But, the key is that it was still accomplished one way or another.

This approach simply doesn’t work anymore in JSF. Before you become dissatisfied with JSF, it’s important to spend at least some time learning the framework and understanding how it works before actually evaluating it for a project. Put your JSP or Struts approach to the side for a moment and learn how to build Web applications using UI components. I promise you, you will have much more success with JSF this way.