Java Technologies. JAVA basics - Pradžiavaldo/jate2013/JavaTech.L11.pdf · Session Outline • You will learn MVC concept • You will get a good understanding of JSF specification

Preparation of the material was supported by the project „Increasing Internationality in Study Programs of the Department of Computer Science II“, project number VP1–2.2–ŠMM-07-K-02-070, funded by The European Social Fund Agency and the Government of Lithuania.

Valdas Rapševičius Vilnius University

Faculty of Mathematics and Informatics

2012.12.31

Java Technologies Lecture XI

2012.12.31 Valdas Rapševičius. Java Technologies 1

Session Outline

• You will learn MVC concept • You will get a good understanding of JSF

specification and tool • You will get familiar with the available component

libraries • And later you will get a broader look into the Java

Web Frameworks and will understand why JSF is “one among many” and what are the trends

2 2012.12.31 Valdas Rapševičius. Java Technologies

Model-View-Controller (MVC)

MVC was first introduced by Trygve Reenskaug, a Smalltalk developer at the Xerox Palo Alto Research Center in 1979, and helps to decouple data access and business logic from the manner in which it is displayed to the user. More precisely, MVC can be broken down into three elements:

– Model. The model represents data and the rules that govern access to and updates of this data. In enterprise software, a model often serves as a software approximation of a real-world process.

– View. The view renders the contents of a model. It specifies exactly how the model data should be presented. If the model data changes, the view must update its presentation as needed.

– Controller. The controller translates the user's interactions with the view into actions that the model will perform. In a stand-alone GUI client, user interactions could be button clicks or menu selections, whereas in an enterprise web application, they appear as GET and POST HTTP requests. Depending on the context, a controller may also select a new view -- for example, a web page of results -- to present back to the user.


MVC Architecture


From Deepak Goyal, Vikas Varma “Introduction to Java Server Faces JSF”. Sun Microsystems

Java Server Faces

• JSF is a spec which defines a component-based MVC framework

• By Sun: A server side user interface component framework for Java technology-based web applications

• JSF 1.2 is included in the larger JEE5 spec • The spec was developed by involving many people from

orgs like Sun, Apache, IBM, Oracle • Not tied to a Web framework, nor a thick-client GUI –

theoretically could be applied to either • A specification and reference implementation for a web

application development framework – Components – Events – Validators & converters – Navigation – Back-end-data integration


JSF: versions and implementations

• Versions – JSF 2.1 (JSR 314, 2010) – JSF 2.0 (JSR 314, 2009) – JSF 1.2 (JSR 252, 2006) – JSF 1.1 (JSR 127, 2004) – JSF 1.0 (JSR 127, 2004)

• JSF implementations implements the JSF API Specification – They contains at least the standard components to display

any of the available basic ("plain vanilla") HTML elements. – Major JSF implementations

• Oracle Mojarra http://javaserverfaces.java.net/ • Apache MyFaces http://myfaces.apache.org/


http://javaserverfaces.java.net/

http://myfaces.apache.org/

JSF: component and utility libraries

• JSF component libraries

– RichFaces (demo) – PrimeFaces (demo) – ICEFaces (demo) – OpenFaces (demo) – Trinidad (demo) – Tomahawk (demo)

– just adds extra on top of the basic implementation, often with more skinnability, ajaxability,

enhanceability, etc.

– The difference is mainly to be found in the available set of components and the degree of customizability.

• JSF utility libraries

– OmniFaces (demo)

– Designed to fill this gap by providing a reuseable standard library of JSF utilities which can be used in combination with every JSF implementation and component library.


http://www.jboss.org/richfaces

http://richfaces-showcase.appspot.com/

http://www.primefaces.org/

http://www.primefaces.org/showcase/ui/home.jsf

http://www.icefaces.org/

http://icefaces-showcase.icesoft.org/showcase.jsf

http://openfaces.org/

http://openfaces.org/demo/overview/homepage.jsf

http://myfaces.apache.org/trinidad

http://www.irian.at/trinidad-demo/faces/index.jspx

http://myfaces.apache.org/tomahawk

http://www.irian.at/myfacesexamples/home.jsf

http://code.google.com/p/omnifaces/

https://showcase-omnifaces.rhcloud.com/

JSF: servlet  <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet>  <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping>


JSF Request Lifecycle


From Deepak Goyal, Vikas Varma “Introduction to Java Server Faces JSF”. Sun Microsystems

JSF structure

• The template (most commonly jsp) defines the interface

• The faces-config defines the navigation and the backing beans

• Backing beans handle action processing, navigation processing, and connections to the logic (business) layer

• Wrapper bean wraps the data POJOs for JSF handling

• Logic layer beans can be injected as defined in the faces-config

• Model is basic data POJO

10

Template (jsp)

Backing Bean (java)

Logic Layer (rest of app)

faces-config (xml)

Wrapper (java)

model (java)

2012.12.31 Valdas Rapševičius. Java Technologies

JSF: template • JSP files most of the time

– Heavily reliant on tag libraries (taglibs) – Core (f) - basic page definition tags – Html (h) - defines standard html tags

• Must learn a large set of restrictive taglibs – Difficult to work with since it does not look like normal html – Even more difficult to write new ones

• Large use of EL (expression language) • Can encourage mixing code with html

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <f:view> <html><head><title>Items</title></head><body> <h:form id="items"> <h:dataTable id="itemlist” value="#{JsfBean.allItems}” var="entry"> <h:column> <f:facet name="header"> <h:outputText value="${entry.title}"/> </f:facet> <h:selectBooleanCheckbox id="itemSelect" value="#{entry.selected}" rendered="#{entry.canDelete}"/>


JSF: faces-config.xml

• Defines the backing beans – Syntax not like Spring (unfortunately) – Name used in EL in template – Scope controlled (request, session, etc.)

• Defines navigation rules – Based on views

• Where from (view) • Which outcome (id) • Where to go (view)

– Can match outcomes using wildcards


JSF: faces-config.xml example

<faces-config> <navigation-rule> <from-view-id>/jsf/JsfItems.jsp</from-view-id> <navigation-case> <from-outcome>newItem</from-outcome> <to-view-id>/jsf/JsfAddItem.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>*</from-outcome> <to-view-id>/jsf/JsfItems.jsp</to-view-id> </navigation-case> </navigation-rule> <managed-bean> <managed-bean-name>JsfBean</managed-bean-name> <managed-bean-class>org.example.jsf.JsfBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>logic</property-name> <value>#{someLogicBean}</value> </managed-property> </managed-bean> </faces-config>


JSF: Backing Beans

• Typical bean with getters and setters and additional methods to handle actions – Store data needed for processing the user actions using

setters – Retrieve data using getters and methods – Process actions using methods

• Often includes code to wrap data objects • Connects to the rest of the application

– Typically via injection • Non-recursive (i.e. not like Spring), will not instantiate

dependencies of dependencies


JSF: Wrapper Beans

• Wraps basic data POJO • Required to avoid putting UI information in the data POJO • Often includes basic setters and getters for the UI related properties

– Can be methods as well • Also includes a setter and getter for the data POJO

public class JsfItemWrapper { private Item item; private boolean isSelected; // is this item selected by the user public JsfItemWrapper(Item item) { this.item = item; } public Item getItem() { return item; } public void setItem(Item item) { this.item = item; } public boolean isSelected() { return isSelected; } public void setSelected(boolean isSelected) { this.isSelected = isSelected; } }


JSF: Converter • Standard Converter

<h:inputText id="birthDate" value="#{UserRegistration.user.birthDate}"> <f:convertDateTime pattern="MM/yyyy"/> </h:inputText>

• Custom Converter

– Create class

public class PhoneConverter implements javax.faces.convert.Converter { ... }

– Register in faces-config.xml

<converter> <converter-id>lt.vu.mif.jt.PhoneConverter</converter-id>  <converter-class>lt.vu.mif.jt.PhoneConverter</converter-class> </converter>

– Use it

<h:inputText id="phone" value="#{UserRegistration.user.phone}"> <f:converter converterId="lt.vu.mif.jt.PhoneConverter" /> <!– opt --> </h:inputText>


JSF: Validator • Standard Validator

<h:inputText id="Username" value="#{UserBean.userName}"> <f:validateLength minimum="6" maximum="15"/> </h:inputText> <h:message for="userName" />

• Custom Validator

– Create class (in case of the problem throw new ValidatorException(message); )

public class PhoneValidator implements javax.faces.validator.Validator { ... }

– Register in faces-config.xml

<validator> <validator-id>phoneValidator</validator-id> <validator-class>lt.vu.mif.jt.PhoneValidator</validator-class> </validator> – Use it

<h:inputText id="Phone" value="#{userBean.phone}" required="true"> <f:validator validatorId="phoneValidator" /> </h:inputText>


JSF Core Tags

Tag Description f:view Creates the top-level view f:subview Creates a subview of a view f:facet Adds a facet to a component f:attribute Adds an attribute (key/value) to a component f:param Constructs a parameter component f:actionListener Adds an action listener to a component f:valueChangeListener Adds a valuechange listener to a component f:setPropertyChangeListener (JSF 1.2) Adds an action listener to a component that sets a bean property to a given value. f:converter Adds an arbitrary converter to a component f:convertDateTime Adds a datetime converter to a component f:convertNumber Adds a number converter to a component f:validator Adds a validator to a component f:validateDoubleRange Validates a double range for a component’s value f:validateLength Validates the length of a component’s value f:validateLongRange Validates a long range for a component’s value f:loadBundle Loads a resource bundle, stores properties as a Map f:selectitems Specifies items for a select one or select many component

f:selectitem Specifies an item for a select one or select many component

f:verbatim Adds markup to a JSF page


http://www.horstmann.com/corejsf/jsf-tags.html







http://www.horstmann.com/corejsf/f_propertyChangeListener












Tag Description h:form HTML form h:inputText Single-line text input control. Examples h:inputTextArea Multiline text input control. Examples h:inputSecret Password input control. Examples h:inputHidden Hidden field h:outputLabel Label for another component for accessibility h:outputLink HTML anchor. Examples h:outputFormat Like outputText, but formats compound messages h:outputText Single-line text output. Examples h:commandButton Button: submit, reset, or pushbutton. Examples h:commandLink Link that acts like a pushbutton. Examples h:message Displays the most recent message for a component h:messages Displays all messages h:grapicImage Displays an image. Examples h:selectOneListbox Single-select listbox. Examples h:selectOneMenu Single-select menu. Examples h:selectOneRadio Set of radio buttons. Examples h:selectBooleanCheckbox Checkbox. Examples h:selectManyCheckbox Set of checkboxes. Examples h:selectManyListbox Multiselect listbox. Examples h:selectManyMenu Multiselect menu. Examples h:panelGrid HTML table h:panelGroup Two or more components that are laid out as one h:dataTable A feature-rich table control h:column Column in a dataTable










































JSF: Development Steps

• Simple JSF 1.* application demo – Develop model objects which hold the data – Add model objects (managed bean) declarations to

Application Configuration File faces-config.xml – Create Pages using UI component and core tags – Define Page Navigation in faces-config.xml – Configure web.xml


JSF 2.0

• View Declaration Language and Facelets – Improving JSF by Dumping JSP

• http://onjava.com/pub/a/onjava/2004/06/09/jsf.html • Composite Components • Implicit, Conditional Navigation • Ajax support (<f:ajax/>) • Scopes

– View, Flash, Custom • Managed Bean Annotations

– @ManagedBean @SessionScoped public class Foo { }

• Project stage config parameters – javax.faces.PROJECT_STAGE – javax.faces.VALIDATE_EMPTY_FIELDS

• Bean Validation (JSR-303) • More stuff


http://onjava.com/pub/a/onjava/2004/06/09/jsf.html

JSF 2.0: Composite Components (1)

• Create file greet.xhtml and put it to /META-INF/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/composite"> <head> <title>My First Composite Component</title> </head> <body> <composite:interface> <composite:attribute name="who"/> </composite:interface> <composite:implementation> <h:outputText value="Hello, #{cc.attrs.who}!"/> </composite:implementation> </body> </html>


JSF 2.0: Composite Components (2)

• Use it in the page <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:greet="http://java.sun.com/jsf/composite/greet">  <greet:hello who="World"/> </html>


JSF: Development Steps

• Simple JSF 2.* application demo – Refine object model by adding annotations – Clean faces-config.xml – Implement composite component – Use it in the page – Configure web.xml


Facelets

• In JSF 2.0, Facelets is the default view declaration language (VDL) instead of JavaServer Pages (JSP).

• With Facelets, you don’t need to configure a view handler as you used to do in JSF 1.2. Facelets is a JSF-centric view technology.

• Facelets is based on compositions. A composition defines a JSF UIComponents structure in a Facelets page. A Facelets application may consist of compositions defined in different Facelets pages and run as an application.

• Resources: – http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdld

ocs/facelets/


http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/

http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/

Facelets tags

Tag Library URI Prefix Example Contents

JavaServer Faces Facelets Tag Library

http://java.sun.com/jsf/facelets

ui: ui:component ui:insert

Tags for templating

JavaServer Faces HTML Tag Library

http://java.sun.com/jsf/html h: h:head h:body h:outputText h:inputText

JavaServer Faces component tags for all UIComponent objects

JavaServer Faces Core Tag Library

http://java.sun.com/jsf/core f: f:actionListener f:attribute

Tags for JavaServer Faces custom actions that are independent of any particular render kit

JSTL Core Tag Library http://java.sun.com/jsp/jstl/core

c: c:forEach c:catch

JSTL 1.2 Core Tags

JSTL Functions Tag Library

http://java.sun.com/jsp/jstl/functions

fn: fn:toUpperCase fn:toLowerCase

JSTL 1.2 Functions Tags


Facelets template example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" <head> <link href="styles.css" rel="stylesheet" type="text/css"/> <title> <ui:insert name="title">Default Title</ui:insert>\ </title> </head> <body> <ui:debug/> <div class="heading"> <ui:insert name="heading"/> </div> <div class="content"> <ui:insert name="content"/> </div> </body> </html>


Facelets page example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"> <body> <ui:composition template="/layout.xhtml"> <ui:define name="title">A List of Contacts</ui:define> <ui:define name="heading">Contacts</ui:define> <ui:define name="content"> <ui:include src="contactsTable.xhtml" /> </ui:define> </ui:composition> </body> </html>


JSF in theory

• Web applications that work more like desktop apps – Easier to program – Less concern about request cycle

• Better scoping and separation – Application/Session/Request

• Component bindings from UI to model • Abstract component tree that is independent of the

target (HTML, etc.) • Good separation of the logic and presentation


JSF in practise

• Harder to work with than the average web application framework – Big learning curve – Have to understand the request cycle well

• Especially the ways JSF may short circuit it

• Prevents you from accessing half the capability of HTML – Abstraction done via custom taglibs which make the templates

into “JSF XML” – Logic in template and custom tags defeat the goal of

separation of UI and logic • JSF event-model introduces the need for wrappers to

actually deal with model – Must keep the component tree and event-model in session


Java Web Frameworks


Java Server Faces?


From Matt Raible at http://raibledesigns.com

Java Web Framework Criteria

• Developer Productivity • Developer Perception • Learning Curve • Project Health • Developer Availability • Job Trends • Templating • Components • Ajax • Plugins or Add-Ons

• Scalability • Testing Support • i18n and l10n • Validation • Multi-language Support (Groovy /

Scala) • Quality of Documentation/Tutorials • Books Published • REST Support (client and server) • Mobile / iPhone Support • Degree of Risk



Comparison Matrix

Source: http://bit.ly/jvm-frameworks-matrix



http://bit.ly/jvm-frameworks-matrix

Top Web Frameworks (2012)

• Top at raibledesigns.com – Grails (90) – Spring MVC (85) – Ruby on Rails (82.5) – Vaadin (82.5) – Play (82.5) – GWT (80)

• Top at Devoxx 2010

– GWT – Rails – Spring MVC – Grails – Wicket / Struts 2

• Top at Rich Web Experience 2010 – Grails – GWT – Rails – Spring MVC – Tapestry / Vaadin

• Top at TheServerSide Java

Symposium 2010 – Grails – GWT – Rails – Spring MVC – Vaadin



JSF perspectives?

• Trends – http://www.google.com/trends/explore#q=jsf&cmpt=q – http://www.indeed.com/jobtrends?q=jsf&l= – http://www.indeed.com/jobtrends?q=jquery&l= – http://www.indeed.com/jobtrends?q=jquery%2C+java&l=

• Modern Principles Web Developer

– http://blogs.atlassian.com/2012/01/modern-principles-in-web-development/ – ... embraces JavaScript – ... is learning mobile frameworks like jQuery Mobile, Sencha Touch, PhoneGap

or Native – ... is using HTML5 and CSS3 – ... is developing REST APIs with the stateless framework that best supports their

language – IE dies out (http://gs.statcounter.com/#browser-ww-monthly-200807-201212)


http://www.google.com/trends/explore

http://www.indeed.com/jobtrends?q=jsf&l

http://www.indeed.com/jobtrends?q=jquery&l

http://www.indeed.com/jobtrends?q=jquery,+java&l

http://blogs.atlassian.com/2012/01/modern-principles-in-web-development/

http://gs.statcounter.com/











Session Conclusions

• You must understand now the MVC and JSF, as the standard Java MVC for Web

• Hopefully you have got a good understanding about Web Frameworks and their trends

Documents

Java Technologies. JAVA basics - Pradžiavaldo/jate2013/JavaTech.L11.pdf · Session Outline • You will learn MVC concept • You will get a good understanding of JSF specification