Tagged: Flex

JSF, Flex, and Elections 2008

On the heels of elections this week, let me show you how you can use JSF and Flex to build nice looking Flash-based charts with elections results. To use JSF and Flex together, I will be using Exadel Fiji.

Let’s start with electoral votes and use a column chart. Below is an example using rich:columnChart component. It’s a static image here, but it’s actually a Flash component in a JSF page. As you move the mouse over columns, a tool tip is shown.

screenshot01.png

1
2
3
4
5
6
7
8
<rich:panel header="Elections 2008">
   <fiji:columnChart value="#{columnChart.data1}" width="350"
	 height="450" title="Electoral votes" captionX="Candidates"
	 captionY="Electoral Votes" barColors="#{columnChart.barColor}"
         toolTipValue="{x} has {y} {name}" rulersValuesHighlight="none">
	<fiji:chartData value="electoral votes" type="name" />
  </fiji:columnChart>
</rich:panel>

fiji:columnChart is a JSF component and renders a Flash chart. What’s really neat is that you can use standard JSF managed beans to provide data for the chart. Here is the managed bean (you can also use Seam components):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class ColumnChart {
 
   private HashMap<String, Integer> data1;
   private ArrayList<String> barColor;
 
   public ColumnChart() {}
 
   @PostConstruct
   public void init() {
      data1 = new HashMap<String, Integer>();
      data1.put("Obama", 349);
      data1.put("McCain", 163);
 
      barColor = new ArrayList<String>();
      barColor.add("#003366");
   }
}

Easy, right?

Let’s move to bar chart using fiji:barChart component. This charts shows percentage of vote each candidate received.

screenshot02.png

1
2
3
4
5
6
<fiji:barChart value="#{barChart.data2}" width="450" height="250"
   title="% Vote" captionX="Candidates" captionY="Vote %"
   barColors="#{barChart.barColor}" toolTipValue="{x} has {y} {name}"
   rulersValuesHighlight="none">
	<fiji:chartData value="% vote" type="name" />
</fiji:barChart>

Managed bean for the chart:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class ColumnChart {
 
   private HashMap<String, Integer> data2;
   private ArrayList<String> barColor;
 
   public ColumnChart() {}
 
   @PostConstruct
   public void init() {
      data2 = new HashMap<String, Integer>();
      data2.put("Obama", 53);
       data2.put("McCain", 46);
 
      barColor = new ArrayList<String>();
      barColor.add("#003366");
   }
}

There are other charts in Fiji such as stackedBarChart, stackedColumnChart and lineChart. You can see them all in action here.

These charts come out of the box with Fiji. What if you want to use a Flash component that you built or someone else did? You can use fiji:swf component to wrap any existing Flash module. I’m going to use a pie chart component made by amCharts.com . I will use the pie chart to show popular vote numbers.

screenshot04.png

1
2
3
4
5
6
7
8
9
<fiji:swf src="/elections/ampie.swf" bgcolor="#FFFFFF" 
   width="520" height="400">
   <f:param name="path" value="/elections" />
   <f:param name="settings_file"
    value="#{facesContext.externalContext.requestContextPath}/elections/ampie_settings.xml" />
   <f:param name="data_file"
    value="#{facesContext.externalContext.requestContextPath}/elections/ampie_data.xml" />
   <f:param name="preloader_color" value="#999999" />
</fiji:swf>

Using fiji:swf it’s possible to wrap any Flash component as JSF component. f:param is then used to provide data for the JSF component and in turn for the Flash module.

If you want to try Fiji, check out this article on dzone.com

Webinar: Using JSF and Flex Components Together

Learn how to use JSF and Flex components together using Fiji. This webinar will demonstrate a simple way to use JSF and Flex components on the same page and application while binding them to the same data model, similar to JSF managed beans. More.

Date: Thursday, October 23, 2008
Time: 2 p.m. (EDT)

Click to register.

Herbstcampus conference – summary

Herbscampus is over, it was a great conference. I had a full day session on RichFaces as well as three other talks (RichFaces, RIA tools: RichFaces, Flex, and JavaFX and using JSF and Flex components together). I’m planning to offer public RichFaces training in Europe soon. Drop me a note if you want to find out more.

When you go to a conference like this and talk to people, only then you start to realize how many companies in Europe are using JBoss products and of course RichFaces. I participated in a panel discussion named “Web 2.0 – Dead End” (funny name) with Ed Burns and Jens Schumann. We basically discussed the various Web 2.0 tools and platforms and where we are headed in the near future. We discussed many points that I cover in my talk RIA Tools: JSF/RichFaces, Flex and JavaFX.

Exadel Fiji was well accepted. People are starting to understand that you can only do so much with a browser, and if you need to display rich charts and graphs, then Flex is a better solution. With Fiji, you use JSF and Flex components together, while binding Flex components to standard JSF managed beans. Here is an article I wrote on Fiji.

I guess a little bit surprisingly, but there was quite of interest in JavaFX. No one is using JavaFX to build any applications yet (version 1.0 is not out yet, end of this year), but many people are patiently waiting to see what Sun will offer in this new RIA tool and platform.

Finally, one of the most exciting things is that I got a chance to meet James Gosling and even had lunch with him.

Herbstcampus conference – Nuremberg, Sept 15-18

I’m speaking at the Herbstcampus conference being held in Nurembergnext week, September 15-18.

This will be an exciting event for me. For the first time in Europe, I will be teaching a full-day JBoss RichFaces class:

September 15: A full-day, hands-on training for JBoss RichFaces

In addition, an ebook version of my upcoming “Practical RichFaces” book is now available, and I will be giving out a number of free copies at the show.

I will also be doing the following sessions:

If you or anyone from your company is planning to attend, I would like to offer you a discount. When registering just use this special Exadel 25% off registration form.

New JSFOne session: Using JSF and Flex Components Together

jsfone_spkr_125x125.jpg

Besides my previously scheduled sessions JBoss RichFaes and Rich Internet Applications Tools: JSF/RichFaces, Flex, and JavaFX I’m doing a new session on Using JSF and Flex Components Together.

Here is the session abstract:

This session will demonstrate a simple way to use JSF and Flex components on
the same page and application while binding them to the same data model
(like JSF managed beans).

JSF and various rich component libraries enable the building of sleek
and sophisticated AJAX-based RIA applications. To kick it up a notch,
Flex components can be used to create a user experience beyond what the
browser allows. Flex applications run inside a Flash player virtual
machine plug-in and provide far richer experiences than the browser
alone. However, using JSF components and Flex components on the same
page is a challenge today without some “plumbing” layer underneath.

Speaking at The Ajax Experience 2008, Boston

In addition to presenting JSFOne in early September, I’m also speaking at The Ajax Experience, in Boston on Wednesday, October 1st. My session title is: Enterprise Rich Internet Application Tools: JSF, Flex, and JavaFX (read more on conference web site).

I like Boston very much, and early October is definitely one of the best times to be in Boston because fall foliage.

I’m speaking at JSF*One conference

jsfone_spkr_125x125.jpg

I’m happy to announce I will be speaking at JSF*One conference being held in Vienna, VA, September 4-6th. The conference is being organized by Kito Mann along with No Fluff Just Stuff Symposiums. It’s going to be a great conference, it’s loaded with JSF heavy weights: Ed Burns, David Geary, Kito Mann , Keith Donald, Chris Schalk, Michael Yaun, Ed Burns, Max Katz, Ted Goddard, Jeremy Grelle, Stan Silvert, and others.

If you are planning or already using JSF, and want to learn how to build RIA applications with JSF or other technologies (Flex/JavaFX) this will be a great conference to attend.

I’m doing two talks:

Thursday, September 4 at 5PM
JBoss RichFaces

Friday, September 5 at 3:30PM
Rich Internet Applications Tools: JSF/RichFaces, Flex, and JavaFX

The other added bonus is that JSF*One will be running along The Rich Web Experience East. Your pass to JSF*One will also let you into The Rich Web Experience – you can completely immerse yourself into Ajax/RIA world for a few days.

I’ll be glad to chat with anyone about their RIA plans.