Pages

Monday, September 10, 2012

JSF 2.1 Tip of the Day: Using <iframe /> Elements with PrimeFaces

Carousel and LightBox
We have some requirements on a project I am working on to display <iframe /> elements which are connected to external pages within our JSF pages. Since JSF supports template language such as plain HTML, we could directly use an <iframe /> in the page. However, it would not match up with our existing page layouts.

PrimeFaces offers a component called a Light Box (<p:lightBox />) which supports <iframe /> elements directly. You can see an example from the PrimeFaces showcase for how to use it.

I thought I would share a more interesting approach using a <p:caraousel /> object to display multiple <iframe /> elements in a more "sexy" approach.

The cool thing is that the code is really easy to implement!

The code was developed using NetBeans 7.2 and Apache Maven. The code can be downloaded here: iframe-example.zip

code


Sunday, September 09, 2012

JSF 2.1 Tip of the Day: Progressive Update, or Graceful Degradation with <f:ajax/>

When designing a web application, you should always consider how the application should perform if JavaScript is disabled. There are some JSF frameworks which will not work at all if JavaScript is disabled. Mojarra, the reference implementation, is designed to work even if JavaScript is disabled.

The design is generally called progressive enhancement. This means that the application will work with basic components, but its functionality is further enhanced using JavaScript and CSS. The same side of the coin is also called graceful degradation. To follow the designs, you must take advantage of the component semantics, for example alt attribute on <img /> tag.

The code below shows you two different ways to use <f:ajax /> to enhance a standard <h:selectBooleanCheckbox />. The second example is not as common. There is also a <h:commandButton /> which can be used just in case JavaScript is disabled.

A best practice when considering your design is to make sure that the form will perform the expected behavior prior to adding AJAX. Once the AJAX is enabled, check to make sure that the behavior is still as expected.

Code


Saturday, September 08, 2012

JSF 2.1 Tip of the Day: Using <f:ajax/> to Update Element Outside A Form

A JSF forum question was asked on how to update a JSF element outside of a <h:form/> element. This is one solution using <f:ajax/>.

Example

JSF Tip of the Day: JavaScript Execute a Button Once

I saw this question on a NetBeans forum from a new developer.

"How do you disable a button on a page after one click?"
I figured since I was going to answer the question anyway, I would publish a quick example of one way to do it.
        

JSF 2.1 Tip of the Day: PrimeFaces 3.4 Advanced Table Example with JPA

PrimeFaces 3.4 Data Table
I was working on an example table to demonstrate some of the PrimeFaces data table capabilities. I think I may use it as an interview problem: "Create an advanced table with the layout seen in this picture using JPA".

The example was developed using Maven on NetBeans 7.2. The source code can be downloaded from here: advanced-table.zip.

Index.xhtml