Table of Contents Java Server Faces 3/4 tier architecture MVC - PowerPoint PPT Presentation

Table of Contents Java Server Faces � 3/4 tier architecture MVC AWT Java Server Faces 3) JSF in Action Example: Hello Boss Install Java Server Faces � Emmanuel Benoist Motivations Fall Term 2016-17 Navigation � Command-Link and -Button Navigation Rules Display a Table � Event Handling � The Tomahawk Library � Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 1 2 Java Server Faces JSF is a standarized API Developed by a large consortium: People behind Jakarta Struts, Oracle Application Server, Sun Java Stuio, IBM Java Server Faces WebSphere Studio, . . . Java delivers a Reference Implementation http://java.sun.com Other Vendor implementations Apache My Faces Oracle, IBM, Borland, . . . Web development with Swing ideas UI components organised in a tree Event handling for each component Possible to develop using tools. Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 3 4

Three-tier JSF configuration Java Virtual Machine 3/4 tier architecture HTML/HTTP JSF Browser Application Logic Servlet JSP (POJO) JDBC Database (POJO= Plain old Java objects) Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 5 6 Four-tier JSF configuration Single JVM Single JVM MVC HTML/ JSF Application HTTP Browser Event Logic Handler Classes EJB Servlet JSP CMP or BMP Database Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 7 8

MVC: Model View Controler Model View Controler Model An architecture for separating business logic from layout Representation of application data (or state) View part is the most volatil And Functional logic Has to be addapted when changing OS, firm, . . . It is the core of the application Highly coupled applications are difficult to maintain View MVC Pattern Representations of application data To have different representations of the same application This is the participant that a user directly interacts with To provide different look and feels for a user interface Controler To reuse one or more user interface components independently Processes user-driven events of the application data. It may updatae the Model or direct manipulation of the View Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 9 10 Model View Controler (Cont.) Model 2: MVC for the web The Controler may translate some user−driven events Changes to data in the Model may require to changes in model data user interface components in the View to Controler Request update themeselves Model Servlet Updates Browser Model User interface components in the view may request data from the Model Java Beans Forward Changes to the Model data may affect the behaviour of a Controler Response View JSP Displays XML HTML etc Controler receives events resulting from user inferaction View Controler User−driven events may require manipulation of the View (changing one or more interface components or creating new ones) (Model 1 = JSP handling almost everything: forms, logic, sessions variables,. . . ) Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 11 12

Java Server Faces Event / Component Framework Application contains a component tree Java Server Faces Action Handlers and Event Listeners interract with these components JSF = Swing for the web Components are composable (a set of components can form one big component) Components are event-driven They can change their apparence to fit common look and feel Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 13 14 JSF Model-2 Controler Request config Action Handlers & Event Faces Servlet Listeners Example: Hello Boss Component Business Model Component Objects Java Beans Tree Response EJB JDO JavaBeans/ JDBC Delegates Converters Validators Renderers Resources Java Beans Model View Propery Files XML Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 15 16

Example: Hello Boss HelloBean @ManagedBean @SessionScoped public class HelloBean implements Serializable { One page for login, private String name; the user types its username (for the password, just double the public String getName() { return name; } code) public void setName(String name) { this.name = name; } This is stored in a ManagedBean called HelloBean private String greeting; public String getGreeting() { return greeting; } How does it work: public void setGreeting(String greeting) { this.greeting = greeting; } display page hello.xhtml public String response() { Populate to the bean HelloBean if (name!=null && name.equals(”Emmanuel”)) { Execute method response() return ”response”; If the answer is hello go to hello.xhtml } If the answer is response go to response.xhtml greeting=”This is the wrong name”; return ”hello”; } } Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 17 18 View: hello.xhtml View: response.xhtml < !DOCTYPE html PUBLIC ” − //W3C//DTD XHTML 1.0 Transitional// ց < !DOCTYPE html PUBLIC ” − //W3C//DTD XHTML 1.0 ց → EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1 − transitional.dtd” > → Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1 − ց < html xmlns=”http://www.w3.org/1999/xhtml” → transitional.dtd” > xmlns:f=”http://java.sun.com/jsf/core” < html xmlns=”http://www.w3.org/1999/xhtml” xmlns:h=”http://java.sun.com/jsf/html” > xmlns:f=”http://java.sun.com/jsf/core” < f:view contentType=”text/html”/ > xmlns:h=”http://java.sun.com/jsf/html” > < h:head > < f:view contentType=”text/html; charset=iso − 8859 − 1”/ > < title > Hello World! < /title > < head >< title > Response < /title >< /head > < /h:head > < body > < h:body bgcolor=”white” > < h:form id=”responseform” > < h2 > My name is Duke. What is yours? < /h2 > < h2 > # { helloBean.greeting } < /h2 > < h:graphicImage id=”waveImg” url=”# { resource[’wave.med.gif’] } ց < h:form id=”helloForm” > → ” / > < h:graphicImage id=”waveImg” url=”# { resource[’wave.med.gif ց < h2 > Hi, # { helloBean.name } < /h2 > → ’] } ” / > < h:commandButton id=”back” value=”Back” action=”hello” / ց < h:inputText id=”username” value=”# { helloBean.name } ”/ > → > < h:commandButton id=”submit” action=”# { helloBean. ց < /h:form > → response } ” value=”Submit”/ > < /body > < /h:form >< /h:body >< /html > < /html > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 19 20

JSF is event driven Java Server Faces Two types of events Value Changed ( javax.faces.event.ValueChangeEvent ) observes changes to the user interface component property ◮ Expanding a tree, ◮ changing the text of a field Partialy page oriented Action ( javax.faces.event.ActionEvent ) JSF is a descendant of Struts Observes the activation of a descendent of a UICommand ◮ buttons and hyperlinks Value returned and navigation rules Core: Event and Component driven Example I: Value Changed listener on an input text field JSF has the same parents than Swing and belongs to the < h:inputText id=”userId” value=”# { login.userId } ” > same familly. < f:valueChangedListener type=”ch.bfh.jsf.UserLoginChanged” ց → / > < h:/inputText > Example II: Action event listener on a command button < h:commandButton id=”login” commandName=”login” > < f:actionListener type=”ch.bfh.jsf.LoginActionListener” / > < /h:commandButton > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 21 22 Install Java Server Faces Motivations Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 23 24