Transcript Java Purefaces - B6 Systems, Inc.

Pittsburgh Java User Group– Dec 9 2009
Java PureFaces: A JSF Framework Extension
JAVA PUREFACES
 Web development and JSF review
 Java PureFaces - a JSF extension
 Briefly discuss current state of the project
 Q&A
Web Development
 First, static web content
 Written in HTML
 Sent directly to the browser
 Next, dynamic web content
 Web containers, Java servlets, JSP
 HTML is dynamically generated and then sent to browser
Web Development
 JSP - Java Server Pages

UI code writing in JSP and on the server

Difficult to maintain

Not a programming language
 Attempts to solve JSP downfalls – new frameworks

Struts, Tapestry, WebObjects, Spring MVC, JSF, Wicket, GWT, etc.

Try to solve issues such as error handling, validation, code reuse, etc.
 Use tags to bind data to the server

Wicket and GWT provide Java solutions
Java is the way to go.
Quick JSF Overview
 What is it?



A server side user interface component framework for Java™ technology-based
web applications – wikipedia
A specification and reference implementation for a web application development
framework containing components, events, validators & converters, navigation,
etc. – wikipedia
Developed by SUN and part of the J2EE SPEC!
 Uses static template pages (containing mix of JSF special tags and
HTML tags)
 Uses “backing-bean” on the server side for binding. Ex:
#{address.city}
 Navigation & backing-beans are defined in static files
What JSF looks like..
JSP Page
Backing Bean
faces-config.xml
http://www.exadel.com/tutorial/jsf/jsftutorial-guessnumber.html
It can get very big quickly.
(Each thing needs to be set up for each view)
You can see the JSF GuessNumber demo here
But…
JSF supports UI Component creation through Java.
Ex: <h:panelGroup binding="#{root.render}"></h:panelGroup>
What is Java PureFaces?
 An extension of JSF.

Uses standard JSF and RichFaces to create PureFaces components
 All UI development is in Java

CSS and JavaScript are easy to plug-in
 Can be added to an existing application

Add a purefaces bean in the configuration file and easily bind into existing pages
using :
<h:panelGroup binding="#{root.render}"></h:panelGroup>
 Simple API.

new PureOutput(“Hello World”);
Java PureFaces vs. JSF
Very simple.
…and the JSP page and
simple bean only need to be
defined once at the
beginning of the project.
Source code available at http://www.b6systems.com/javaPureFaces.html
Java Purefaces components
PureFaces online component demo
The demo source is available at http://www.b6systems.com/javaPureFaces.html
To run it locally, unzip it and run “mvn tomcat:run”. Get maven here
PureComponents
 Direct wrappers of existing JSF components
 Encapsulation of the JSF components has advantages:

Simplifies the API for the developer

PureComponents are serializable
 Creating Custom components is simplified

Components can quickly be created in PureFaces – no tags or configuration

Application-specific components are POJO
To create a component or whole view, just implement PureComponent
Custom components
public class LabelAndInputComponent<E> implements PureComponent {
private String label;
private PureEditableValue<E> editableValue;
public LabelAndInputComponent(String label, E value) {
this.label = label;
this.editableValue = new PureEditableValue<E>(value);
}
public PureComponent createUIComponent() {
PurePanelGrid grid= new PurePanelGrid(2);
grid.add(new PureOutput(label).setStyleClass("labelStyleClass"));
grid.add(new PureInput(editableValue).setStyleClass("inputStyleClass"));
return grid;
}
public E getValue(){
return editableValue.getValue();
}
}
Custom components
private LabelAndInputComponent<String> field =
new LabelAndInputComponent<String>("A Label", "default text"); // example
/** Create a DIV element that contains a label component */
public PureComponent createUIComponent() {
PureDiv div = new PureDiv();
div.setStyleClass("divStyleClass");
div.add(field);
return div;
}
// ex: get the value from the field now using field.getValue();
Source code from PureFaces article on The Server Side
Java PureFaces features
 Simplified with maintenance in mind: 80% of your cost

Simple: Straightforward SWING-like API (without having to have a member for each UI
component)

Single UI Location : Changing the UI can be done in one place. There is no need
to keep a JSP page in-sync with its bean.

Easy refactoring: Everything is in Java. Use of existing, robust refactoring tools
makes it easy.

Testing: All bindings can be tested by creating the component or view in a
simple JUNIT test.
Java PureFaces features
 Ajax-enabled

Built-in by using RichFace

PureFaces API includes methods for adding Ajax
 CSS & JavaScript

PureFaces makes it easy to use semantic HTML and add CSS / JS

RichFaces jQuery component makes it easy to target complex JSF component
elements by adding scripts only where necessary (no additional JS files to load).
PureFaces Demo Link
Under the hood...
 Binding attributes to any object

Get around using backing beans by using the JSF ValueChangeListener to go back
into the application and set up values when the form is submitted

We created a class called InputValueChangeListener to set these values like this:
PropertyUtils.setNestedProperty(obj, attribute, changeEvent.getNewValue());

PureFaces Demo Link
Bindings are tested when the object is created, so they can be tested with JUNIT
Under the hood...
 Binding buttons and links to any objects

Get around backing beans by using JSF ActionListeners

We created an ActionListener called CommandActionListener to execute
Runnables, and a Runnable named MethodCommand to execute a method in an
object. MethodCommand does this using reflection:
runningClass.getDeclaredMethod(methodName, classes).invoke(obj, args);

PureFaces Demo Link
Bindings are tested when the object is created, so they can be tested with JUNIT
Under the hood...
 Creating a new UI on Ajax event

We add an ActionListener to the RichFaces AjaxSupport component.

We then use a Runnable to update the JSF component tree with whatever is
configured to be updated on a specific ajax-event.
PureFaces Demo Link
PureBaseBean
UI design
«interface»
PureComponent
+createUIComponent() : UIComponent
+getRender() : UIComponent
+getPureComponent() : PureComponent
 UI with Java PureFaces in practice

Start with the interface requirements
DemoView
 Design the behavior of the implementation (standard OO design)
-demoComponents : DemoComponent
 Break up the view per the application design DemoComponent
-selectedDemoComponent
: DemoComponent
1 or custom application components
 Create any new components
1
+header() : PureComponent
 Add basic CSS, and jQuery to target HTML
only accessible
after HTML is created
+getSourceCode()
: <unspecified>
+createComponentLinksView() : PureComponent
1
*
+createDemoView()
PureComponent
 Use firebug in FireFox to tweak and get
the final CSS, &: test
in all browsers (and
+createComponentDemoPanel() : PureComponent
most likely fix some IE compatibility issues)
+setSelected(in demoComponent : DemoComponent)
 Tools



Eclipse: for just about everything. In debug mode, changes are immediately
available without reloading app
Browser tools: firebug in FireFox, developer tools in IE8 and Chrome. IETester for
previous versions of IE. Also, Web
Developer in FireFox InputAjaxDemo
has some nice features
InputDemo
AjaxLog: component included in RichFaces to help debug any ajax interactions
not working as expected
To summarize...

Virtually all development is in Java



There is a single JSP page and a simple bean to connect it to the application
All PureComponents are POJO.
Extremely dynamic

Views are created directly from the application and can easily be redefined on the fly (ex:
panelGrid demo)

Direct object-model access


Simpler maintenance, Faster development




No need to worry about what is accessible only through the bean
Views can be tested through JUnit.
Everything can be done using Java tools (refactoring, etc.)
Simpler, documented API
Ajax- enabled
Current state
 Component development

Need to implement more components. Built on as-needed basis
 Depends on Session to store the UI
 Combines aspects of UI Development with Java Developer role

many JSF developers handle both
What’s next?
 We are trying to raise awareness in the community so that:


We can get outside opinions and suggestions
Others can help expand and grow the framework extension.
 There is more information available:




http://www.b6systems.com/blog
http://www.theserverside.com/tt/articles/article.tss?l=IntroducingJavaPureFaces
Source code at http://www.b6systems.com/javaPureFaces.html
Demo available at http://www.b6systems.com/pureFacesComponents/demo.jsf
JSF
RichFaces
Java PureFaces
Want more information? Email [email protected]