Upload
necia
View
43
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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 DevelopmentWeb 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 DevelopmentWeb 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 OverviewQuick JSF Overview
What JSF looks like..What JSF looks like..
http://www.exadel.com/tutorial/jsf/jsftutorial-guessnumber.html
JSP Page Backing Beanfaces-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?What is Java PureFaces?
Java PureFaces vs. JSFJava 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 Java Purefaces componentscomponents
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
PureComponentsPureComponents
To create a component or whole view, just implement PureComponent
Custom componentsCustom componentspublic 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 componentsCustom 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 featuresJava 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 featuresJava 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...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 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);
Bindings are tested when the object is created, so they can be tested with
JUNIT
Under the hood...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...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 designUI design+getRender() : UIComponent+getPureComponent() : PureComponent
PureBaseBean
+header() : PureComponent+createComponentLinksView() : PureComponent+createComponentDemoPanel() : PureComponent+setSelected(in demoComponent : DemoComponent)
-demoComponents : DemoComponent-selectedDemoComponent : DemoComponent
DemoView
+createUIComponent() : UIComponent
«interface»PureComponent
+getSourceCode() : <unspecified>+createDemoView() : PureComponent
DemoComponent
InputDemo InputAjaxDemo
1 *
11
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...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 stateCurrent 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?What’s next?
Want more information? Email [email protected]