Very short introduction to JavaServer Faces

Size: px

Start display at page:

Download "Very short introduction to JavaServer Faces"

Maurice Perkins
5 years ago
Views:

1 Very short introduction to JavaServer Faces

2 Example of an JSF application Application consists from two HTML pages The first page allows to enter a number, and as a result outputs squared number Example of declarative validation is shown The second page shows the last calculated result Example of user session and declarative navigation JavaServer Faces 2

3 A backing bean public class Calculator implements Serializable { // Read/write property "number": private int number = 5; public int getnumber() { return number; } public void setnumber(int number) { this.number = number; } // Read-only property "result": private Integer result = null; public Integer getresult() { return result; } // Method to square a number public void square() { result = number * number; } // Method to navigate to the second page public String bye() { return "bye"; } } JavaServer Faces 3

4 Approach taken by modern UI frameworks: data binding We declaratively define what form field must be bind with what class field Web framework: moves data through the binding automatically performs conversion and validation JavaServer Faces 4

5 The first HTML page index.xhtml <!DOCTYPE html> <html lang="en" xmlns=" xmlns:h=" xmlns:f=" xmlns:p=" <h:head><title>jsf calculator</title></h:head> <h:body> <h1>jsf calculator</h1> <h:form id="f1"> <h:outputlabel for="number" value="number: "/> <h:inputtext id="number" value="#{calculator.number}" required="true" p:type="number" p:placeholder="enter number"> <f:validatelongrange minimum="-500" maximum="500"/> </h:inputtext> <h:message for="number" style="color: red"/> JavaServer Faces 5

6 The first HTML page index.xhtml Result: #{calculator.result} <h:commandbutton value="square" actionlistener="#{calculator.square}"/> </h:form> </h:body> </html> JavaServer Faces 6

7 The second HTML page bye.xhtml <!DOCTYPE html> <html lang="en" xmlns=" xmlns:h=" <h:head><title>the last result</title></h:head> <h:body> <h1>bye bye</h1> The last result: #{calculator.result} </h:body> </html> JavaServer Faces 7

8 Pass-through elements <!DOCTYPE html> <html lang="en" xmlns=" xmlns:jsf=" xmlns:f=" <head jsf:id="head"> <title>jsf Calculator</title> </head> <body jsf:id="body"> <h1>jsf Calculator</h1> <form jsf:id="myform"> <label jsf:for="number">number: </label> <input type="number" placeholder="enter number" required="true" jsf:id="mynumber" jsf:value="#{calculator.number}"> <f:validatelongrange minimum="-500" maximum="500"/> </input> <span jsfc="h:message" for="mynumber" style="color: red" /> <br/> Result: #{calculator.result} <br/> </body> </html> <button jsf:actionlistener="#{calculator.square()}">square</button> <button jsf:action="#{calculator.bye()}">bye bye</button> </form> JavaServer Faces 8

JSF component suites PrimeFaces (http://www.primefaces.

9 JSF component suites PrimeFaces ( Apache Tobago ( TreeTable component example (PrimeFaces): JavaServer Faces 9

10 JSF patarimai ir geriausios praktikos Labai rekomenduoju! Komponentų pavyzdžiai su naudojimo instrukcijomis JavaServer Faces 10

11 3-tier Web systems based on Java EE Thin-client approach: Client Browser Internet Application Server Presentation: JSF Business Logic: EJB + CDI DBMS Data Access: EJB + JPA Tables/Triggers/ Stored procedures Client machine runs Browser, that executes: HTML (and HTML is being created on the server) CSS JavaScript, but only for AJAX and/or form field rendering No JavaScript framework is being used (Angular, Backbone, etc.) 3-tier architecture 11

12 3-tier Web systems based on Java EE MVC on the client (or REST) approach Client still is using only Browser, but: HTML is being created on client-side by JS Framework Some JS framework is being used Often framework is MVC driven JavaServer Faces 12

13 JS Framework Example: Backbone JavaServer Faces 13

Java EE 6: Develop Web Applications with JSF

Oracle University Contact Us: +966 1 1 2739 894 Java EE 6: Develop Web Applications with JSF Duration: 4 Days What you will learn JavaServer Faces technology, the server-side component framework designed