JSF Components – A Quick Example Using ICEFaces

by on December 26, 2012 9:01 am

This is a continuation of my previous entry on component based java frameworks. In this post, I would like to give a couple of examples of the kinds of components that can be used to quickly bring up a user interface.

I would like to first reiterate that what you choose is going to depend on your needs for a particular project. JSF and component libraries are perfect for certain situations, but may not be a good choice at all for others. If you want to have a lot of control over the JavaScript, then this is not the solution. However, in some cases, component libraries can help you get your user interface up and running both quickly and effectively.

JavaScript can be very fun to work with, especially now in the time of HTML5. I am in no way encouraging anyone to stay away (go play with the new frameworks for JavaScript and you will be saying how much fun it can be too. Really!). Nor am I pushing IceFaces as the best component library; I’m using it as an example because I was recently working on a project where it was successfully used.

Setup

If you want to use ICEFaces, then you will need to go to the website and get the appropriate download. Open the PDF guide and step through the Eclipse setup (hint: if you’ve downloaded the files, be sure to select local content when doing the Eclipse install not the archive). You will need to pick a JSF implementation to use. I recommend using STS for easier setup. You can select from several JSF implementations. Or you can download your desired implementation manually and setup the library as described in the document.

For this demo, I am using Apache MyFaces. Also note that there are lots of ways to set up a JSF project – I’m using this one for simplicity.

Component Libraries

Just a quick reminder: JSF implementations offer up the basic HTML components while component libraries add the extra stuff to make UI development quick and easy.

For this example, I am using ICEFaces ACE Components. ICEFaces offers two sets of components: ICE components and ACE components. The ICEsoft website states that ICE components are primarily geared towards legacy browser support, specialized applications and application migration. The ICEsoft website describes ACE Components (Advanced components) as “ideally suited to ICEfaces projects that are able to leverage the power of modern browsers to provide a richer, more dynamic and responsive user-interface.”

Here we will use the following ACE Components: ace:dataTable, ace:tabSet, ace:menuBar, ace:menuItem and ace:tabPane.

Examples

This example application is far from complete. I am pulling partly from the freely available ICEFaces demo application as a base and creating parts of an admin console for a silly bingo game application. I’m viewing this as the first step to an administrative page where the a user can both create a game and edit existing games.

The facelets template (template.xhtml) is set up and imported into the index page. The template defines the header, body and divs. The index then defines the ui items using ui:define. ui:define is a JSF facelets templating tag that defines named content to be inserted into a template. The name attribute value must match that of a ui:insert tag in the target template for the named content to be included.

I have created an underlying Game.java class and a MenuBarBean.java class. MenuBarBean is where the tableData list is populated. In this example, I am using static content inserted into the dataTable upon initialization for simplicity.

A Basic Menu Bar

In template.xhtml:

<div class="topMenu">
		<h:form id="form">
			<ace:menuBar id="#{menuBarBean.menuBarId}" autoSubmenuDisplay="true"
				styleClass="menuBar">
				<ui:insert name="menuItems" />
			</ace:menuBar>
		</h:form>
	</div>

In index.xhtml:

<ui:define name="menuItems">
	<ace:menuItem value="Home" url="#" icon="ui-icon ui-icon-home"
		styleClass="menuBarItem" />
		<ace:submenu label="New Game" styleClass="menuBarItem">
			<ace:menuItem value="Create From Scratch" />
			<ace:menuItem value="Use Game Template" />
		</ace:submenu>
		<ace:submenu label="Predefied Games" url="#" styleClass="menuBarItem">
			<ace:menuItem value="Crazy Holiday Bingo" />
		</ace:submenu>
	</ui:define>

I’ve used the submenu option. The urls are currently undefined, however you can see how this would be linked up.

Alright, so let’s see what this looks like. You can see the three new menu items here and the submenu items created for the New Game selection.

Next we have the dataTable. Here are the contents of the dataTable.xhtml file, which is then used in the index.xhtml. The ui:composition tag is a templating tag that wraps content to be included in another Facelet.

In dataTable.xhtml:

ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ace="http://www.icefaces.org/icefaces/components">
		<ace:dataTable rows="10" value="#{menuBarBean.tableData}" var="game"
			paginator="true" paginatorPosition="bottom">
			<ace:column id="id" headerText="Id">
				<h:outputText id="idCell" value="#{game.id}" />
			</ace:column>
			<ace:column id="gameName" headerText="Game Name">
				<h:outputText id="gameNameCell" value="#{game.gameName}" />
			</ace:column>
			<ace:column id="creator" headerText="Creator">
				<h:outputText id="creatorCell" value="#{game.creator}" />
			</ace:column>
		</ace:dataTable>
</ui:composition>

In template.xhtml:

<div class="contentBody">
	<h:form id="form2">
		<ace:tabSet>
			<ui:insert name="tabItems" />
		</ace:tabSet>
	</h:form>
</div>

In index.xhtml:

<ui:define name="tabItems">
	<ace:tabPane label="Favorites">
		<ui:include src="WEB-INF/templates/dataTable.xhtml" />
	</ace:tabPane>
	<ace:tabPane label="Still in Progress">
		<ui:include src="WEB-INF/templates/dataTable.xhtml" />
	</ace:tabPane>
</ui:define>

Here you can see the two new tabs that were created and the populated dataTable:

As you can see, we were able to quickly get important parts of our user interface up and running with some commonly-needed components.

For further information check out the following websites:

– Adrienne Gessler, asktheteam@keyholesoftware.com

  • Share:

2 Responses to “JSF Components – A Quick Example Using ICEFaces”

  1. djkieras says:

    Good intro! If you are doing any accessibility work regarding Section 508, ICEFaces actually considers those requirements and scenarios in their components as often as they can. So if you are forward-thinking and choosing a framework to support that down the road, know that there’s not just the convenience of getting up and going quickly, but some real depth to ICEFaces that will serve you well long-term.

Leave a Reply

Things Twitter is Talking About
  • Interested in #Backbone & #Marionette but not sure where to start? Check out the Marionette-Require-Boilerplate: http://t.co/XDj43BwSS3 #SPA
    April 22, 2014 at 4:50 PM
  • Responsive Design can help in giving your users a consistent app experience across devices. Quick tutorial - http://t.co/BDrT5LvgRo
    April 22, 2014 at 2:31 PM
  • Tips & tricks to save time in the #Eclipse IDE - http://t.co/uGgCkchwNk (keystroke combos, navigation, time tracking & more)
    April 22, 2014 at 8:40 AM
  • Join us! Looking to add to our team a developer w/ advanced #JavaScript & #NodeJS exp (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 21, 2014 at 7:35 PM
  • Looking into #ExtJS but don't know where to start? Check out our video tutorial series to find your way around - http://t.co/XFYDT6YNWA
    April 21, 2014 at 4:35 PM
  • We've been tinkering with JS library Famo.us since its public release 4/10. What we've learned so far via a POC app - http://t.co/S77TSKHDKd
    April 21, 2014 at 2:03 PM
  • RT @CompSciFact: Rivest, Shamir, and Adleman published the RSA public key cryptography algorithm in 1978.
    April 21, 2014 at 11:13 AM
  • DYK? When we share/RT/blog/etc, it doesn't mean that Keyhole endorses it - we just like variety of opinions! Info: http://t.co/MXhB9lE9tV
    April 19, 2014 at 3:01 PM
  • A huge welcome to Justin Graber who joined the Keyhole team this week!
    April 18, 2014 at 3:25 PM
  • Pssst... @kc_dc early bird pricing ends on Sunday. Shoot us a note if you want to save 10% off of your ticket with our sponsor promo code!
    April 18, 2014 at 2:49 PM
  • Join our team! Looking for a developer w/ advanced #JavaScript & #NodeJS experience (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 18, 2014 at 11:21 AM
  • .@befamous has huge potential to make HTML5/JS/CSS web pages feel as native apps. Here's our inital tech takeaways - http://t.co/S77TSKHDKd
    April 18, 2014 at 9:50 AM
  • Why to use AngularUI Router instead of ngRoute - http://t.co/tBnj5ZCkOw
    April 17, 2014 at 7:55 PM
  • RT @joemccann: Total Number of GitHub Repositories by Programming Language http://t.co/30cekDsE4s
    April 17, 2014 at 4:25 PM
  • JSF + AngularJS = AngularFaces? http://t.co/mXvOTwVbb6 // Interesting insight. Thoughts?
    April 17, 2014 at 3:45 PM
  • RT @MikeGelphman: Great news, guys: @TobiasRush founder of @eyeverify is our latest @MobileMidwest speaker addition http://t.co/8fE8oNfPnX
    April 17, 2014 at 1:35 PM
  • .@befamous was released publicly 4/10 & we've been tinkering with it since. What we've learned so far via a POC app - http://t.co/S77TSKHDKd
    April 17, 2014 at 8:33 AM
  • Famo.us' main idea is for HTML5/JS/CSS web pages to feel like native mobile apps. So, @zachagardner tried it out - http://t.co/S77TSKHDKd
    April 15, 2014 at 6:40 PM
  • @JKFeldkamp Thanks for your RT! Such a neat technology. We're so excited @zachagardner is getting involved. Have a great day!
    April 15, 2014 at 4:00 PM
  • .@zachagardner has been tinkering with Famo.us (@befamous) released 4/10. What he's learned so far with a POC app - http://t.co/1jMqBfZURn
    April 15, 2014 at 2:29 PM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2013 Keyhole Software, LLC. All rights reserved.