Java Purefaces - B6 Systems, Inc.

thickbugΛογισμικό & κατασκευή λογ/κού

28 Οκτ 2013 (πριν από 3 χρόνια και 9 μήνες)

68 εμφανίσεις

JAVA
PUREFACES


Pittsburgh Java User Group


Dec 9 2009


Java PureFaces: A JSF Framework Extension


Web development and JSF review


Java PureFaces
-

a JSF extension


Briefly discuss current state of the project


Q&A




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


Web Development

Java is the way to go.





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

Quick JSF Overview

What JSF looks like..

http://www.exadel.com/tutorial/jsf/jsftutorial
-
guessnumber.html

JSP Page

Backing Bean

faces
-
config.xml



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>


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”
);

What is Java
PureFaces
?

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


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


PureComponents

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


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).


Java
PureFaces

features

PureFaces Demo Link


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());



Bindings are tested when the object is created, so they can be tested with JUNIT

Under the hood...

PureFaces Demo Link


Binding buttons and links to any objects


Get around backing beans by using JSF
ActionListeners



We created an
ActionListener

called
CommandActionListener

to execute
Runnable
s, and a
Runnable

named
MethodCommand

to execute a method in an
object.
MethodCommand

does this using reflection:

runningClass.getDeclaredMethod(methodName, classes).invoke(obj, args);



Bindings are tested when the object is created, so they can be tested with JUNIT

Under the hood...

PureFaces Demo Link


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.



Under the hood...

PureFaces Demo Link


UI with Java PureFaces in practice


Start with the interface requirements


Design the behavior of the implementation (
standard OO design
)


Break up the view per the application design


Create any new components or custom application components


Add basic CSS, and jQuery to target HTML only accessible after HTML is created


Use firebug in FireFox to tweak and get the final CSS, & test in all browsers
(and
most likely fix some IE compatibility issues)



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 has some nice features


AjaxLog
: component included in RichFaces to help debug any ajax interactions
not working as expected


UI design


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


No need to worry about what is accessible only through the bean



Simpler maintenance, Faster development


Views can be tested through
JUnit
.


Everything can be done using Java tools (refactoring, etc.)


Simpler, documented API



Ajax
-

enabled


To summarize...


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



Current state


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


What’s next?

JSF
RichFaces
Java PureFaces
Want more information? Email
JavaPureFaces@B6Systems.com