1 / 65

Raghu Srinivasan raghunathan.srinivasan@oracle Cameron Bateman cameron.bateman@oracle

Eclipse Web Tools Platform – Uncovered : Building JavaServer Faces (JSF) web applications The JavaServer Faces (JSF) Tools Project. Raghu Srinivasan raghunathan.srinivasan@oracle.com Cameron Bateman cameron.bateman@oracle.com. Goals. Review JavaServer Faces (JSF) concepts

gallia
Download Presentation

Raghu Srinivasan raghunathan.srinivasan@oracle Cameron Bateman cameron.bateman@oracle

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Eclipse Web Tools Platform – Uncovered : Building JavaServer Faces (JSF) web applications The JavaServer Faces (JSF) Tools Project Raghu Srinivasan raghunathan.srinivasan@oracle.com Cameron Bateman cameron.bateman@oracle.com

  2. Goals • Review JavaServer Faces (JSF) concepts • Build an end-to-end JavaServer Faces (JSF) web application • Get a thorough understanding of the features in the JSF Tools Project • Preview the new features in the JSF Tools Project

  3. Agenda • Introduction to JavaServer Faces (JSF) Technology • JSF Tools Project Features • Hands on: Develop JSF “Hello JSF” Application • Demo: Deep Dive into JSF Web Application Development • Demo: What’s new in the JSF Tools Project ? • Q&A

  4. Introduction to JavaServer Faces (JSF) Technology

  5. Introduction to JavaServer Faces (JSF) • JavaServer Faces (JSF) is a UI Component Framework for building Java-based Web applications • JSF is a standard specification developed through the Java Community Process (JCP) and is part of the Java EE 5 standards • JSF is based on the Model-View-Controller (MVC) architecture • JSF 1.2 is the current version of the specification • JSF 2.0 (JSR-314) is in the specification stage

  6. JSF Implementations • Reference Implementation (RI) from Sun • https://javaserverfaces.dev.java.net/download.html • Apache MyFaces project • http://myfaces.apache.org/download.html • Implementation consists of • Java API classes representing the JSF framework services • The JavaServer Faces Core Tag Library for wiring components to server-side objects • The JavaServer Faces Standard HTML RenderKit Tag Library for expressing UI components within a JSP page

  7. JSF Technology Key Concepts A basic JSF application consists of: • Web pages defined using JSF UI components • A JSP page built using JSP tags that encapsulate the corresponding JSF Components • Application configuration resource files (faces-config.xml) that defines rules for navigation between the web pages • Managed Beans and Backing Beans for data integrations and to facilitate the UI logic of the application • Helper objects - Event listeners, Validators, and Converters that are registered on the components • web.xml - Register the FacesServlet and its mapping

  8. JSF Technology Key Concepts • JSF UI Components • The basic building block for assembling a JSF web application • Server-side UI Component framework - a JSF Page is represented on the server as a tree of UI Components • JSF defines helper API’s to support the components • Events and Listeners – an Event broadcast and Listener registration model based on the JavaBeans specification • Converters – Pluggable data conversion class that converts markup value to and from the corresponding type in the model • Validators – Pluggable support classes that can ensure that the input values conform to business rules

  9. JSF Technology Key Concepts • Managed Beans • POJO beans registered in a application configuration resource file (faces-config.xml) and accessed from a JSF page • Backing Beans • A managed bean where the UI Components of a page are bound to properties in the bean • Unified Expression Language (EL) • A simple expression language that allows page authors to dynamically read and write data from JavaBeans and invoke methods defined in them

  10. JSF Technology Key Concepts • Page Navigation • JSF provides a simple yet flexible Navigation model that helps in defining page-to-page navigation in response to UI events and model interactions • Navigation rules define the next page to be displayed for a given event or outcome • Navigation rules are configured in the application configuration resource file (faces-config.xml) • Navigation handler is pluggable • Default Navigation Handler derives the next page based on • Current page that is being processed • Current action from that page • Logical outcome of the action

  11. JSF Technology Key Concepts • The Lifecycle • The JSF specification defines a request processing lifecycle that specifies the processing sequence of every request that involves a JSF component tree • Phases • Restore View – Build/Find the view for the current page • Apply Request Values – Each component in the view extracts its values from the request parameters • Process Validation – Run the validators registered on this component • Update Model Values – update the bean properties bound to the value attribute of the component • Invoke Application – Process events and page navigation • Render Response – Render the new page

  12. JSF Technology Key Concepts JSF Lifecycle – Initial Request Client / Browser Restore View Render Response

  13. JSF Technology Key Concepts JSF Lifecycle - Post back Client / Browser Restore View Apply Request Values Process Validation Render Response Invoke Application Update Model

  14. JSF Technology Key Concepts • Renderers • JSF Component model architecture has a clear separation between the functionality of a component and the way it is rendered on a client • Renderer adapts a component to a specific output for a specific client • Encode – represent the value of the component in the target client • Decode – interpret the value in the request parameter and update the component value • RenderKit – a family of Renderers for a specific client such as the HTML render kit

  15. JSF Tools Project Features

  16. JSF Tools Project Features • Web Page Editor for HTML/JSP/JSF pages • Faces Configuration Model, Editor and Wizards • JSF Library Registry • Extensible Frameworks • Support for • The JSF Standard Tag Libraries • The Apache MyFaces Trinidad Tag Library • Support for view description types other than JSP. • Support for JavaServer Faces 1.1 and 1.2 versions

  17. Web Page Editor

  18. Web Page Editor • Multi-page Editor • Visual Page Designer • Provides close-to-WYSIWYG editing experience • Split-pane window shows both the Design and the Source view with options to switch to a Source-only or a Design-only view • Source Editor • Content assists, syntax and semantic validations • Preview Page • Renders the page as it would look in a browser

  19. Web Page Editor • Fly-out Component Palette • Supports Drag & Drop editing • Property View • Groups key attributes of the selected tag in an accordion style tabs • Outline view • Displays the content of the current page in an hierarchical form

  20. Faces Configuration Editor

  21. Faces Configuration Model, Editor and Wizards • Multi-page editor • Overview Page • Summary of elements in the configuration file • Navigation page • Graphical diagram editor for navigational rules • Managed bean page • Form-based editor, Wizards • Component and Others Page • Form-based editor for components, render kits, validators and other artifacts • Source Page • Contents kept in sync with changes in other pages

  22. JSF Library Registry

  23. JSF Library Registry • Define a named collection of JARs including tag libraries, JSF reference implementations and utility jars • Add, remove libraries associated with a project • Automate build classpath and deployment • Extension point for component developers to contribute their libraries

  24. Extensible Frameworks • Design-time Meta-data Framework • Uniform Meta-data support • Define new services and enhance existing services • Design-time Tag Processor • Meta-data driven • Pluggable tag converters • Design-time Application Manager • Provide an approximation of certain JSF runtime state information at design-time. • Pluggable design-time variable, property and method resolvers

  25. Extensible Frameworks • JSF Application Configuration Manager • Provide a unified application configuration model through API, effectively merging all faces configuration models into a single model • Notification services to monitor changes to the EMF objects in the model • Cross model validation will be supportable

  26. Hands on: Develop JSF “Hello JSF” Application

  27. Hello! JSF Tools Project!! • Build and execute a simple JSF application • Setup • Register JSF Libraries • Create a Dynamic Web Project with JSF Facet • Create JSF-JSP pages • Resolve Validation errors • Explore the Visual Page Designer • Explore the Faces Configuration Editor • Create and Register Managed Bean • Define Page Navigation • Run the application

  28. Setup • Configure the workspace with all the requisite software • Download • The Java SE 5 Development Kit (JDK) • http://java.sun.com/javase/downloads/index_jdk5.jsp • Eclipse IDE for Java EE Developers (Europa Winter maintenance) • Includes Eclipse 3.3 + WTP 2.0 + Mylyn • http://www.eclipse.org/downloads/moreinfo/jee.php • Apache Tomcat 6.0 • http://tomcat.apache.org/download-60.cgi • JavaServer Faces RI v1.2 • http://java.sun.com/javaee/javaserverfaces/download.html • JSP (tm) Standard Tag Library 1.2 implementation • https://maven-repository.dev.java.net/repository/jstl/jars/

  29. Register the Tomcat Server • Select Windows > Preferences.. • Select Server > Installed Runtimes. Click Add. • Select Apache Tomcat v6.0 • Select Also create new local server. Click Next • Browse to the Tomcat installation directory. • Click Finish

  30. Start and Stop the Tomcat Server • Select Windows > ShowView >Servers • Right mouse on the server Tomcat v6.0 Server at localhost • Select Start to start the server. Wait for the state to change to Started • Select Stop to stop the server

  31. Make the Web Page Editor the default editor for JSP pages • Select Windows > Preferences.. • Select General > Editors > File Associations • Select *.jsp in the section File Types • Select Web Page Editor In the section Associated Editors • Select Default

  32. Import the JSF-EL Template • Select Window > Preferences... • Select Web and XML > JSP Files > Templates • Select Import • Browse to JSF-EL Template.xml

  33. Register JSF Libraries • Select Windows > Preferences > Web and XML > JavaServer Faces Tools > Libraries. Click on the New.. • Create the SUN-RI library • Select the jars from 3rd-party\JSF12 • Set the implementation flag to true • Create the JSTL library • Select the jars from \3rd-party\JSTL

  34. Create a Dynamic Web Project with JSF Facet • Select File->New->Project.. • Select Web->Dynamic Web Project • Set the name of the project to JSFToolsTutorial. • In the configuration section, select the JavaServer Faces v1.2 Project • On the JSF Capabilities page, add the JSTL library • Click Finish

  35. Create JSF-JSP pages • From the Package Explore view, right-mouse click on the WebContent folder, select New->JSP • For File Name, enter login.jsp • Accept the defaults. Hit Finish. • The page is opened in the Web Page Editor • Open the Properties View • Right-mouse click on the designer canvas and from the context menu, select Show->Properties • Wait for the ‘Reading Properties’ dialog to disappear (only in WTP 2.0.2)

  36. Add CommandButton to the page • From the Palette View, click on the section JSF HTML to display the list of components. • DragAndDrop the CommandButton to the canvas • This wraps the CommandButton with view and form tag • In the properties view, Click on Quick Edit • Set the value attribute to Login • Set the action attribute to ‘login’

  37. Add PanelGrid • From the Palette View, DragAndDrop PanelGrid to the canvas • Notice feedback on the drop target • Drop before the command button, but inside the form • The PanelGrid is created with four OutputText components

  38. Modify the PanelGrid • Click on Item2 and hit Delete • Add InputText after Item1 and before Item3 • Delete Item 4 • Add InputSecret after Item3

  39. Modify the PanelGrid (continued) • Click on Item1 • Change its value in the Source View to ‘Name’ • Click on Item3 • Change its value in the Property View to ‘Password • Click on the inputText tag next to Name • In the Property View, set the value attribute to ‘#{loginBean.name}’. • Save

  40. Create and Register a Managed Bean • Click on Problem View. Note the warning message • ‘loginBean cannot be resolved’ • Open Webcontent->WEB-INF->faces-config.xml • Switch to the Managed Bean Page • Click on session in the list and select add • Select the Create Java class option • For Package name, enter jsftutorial • For Class name, enter LoginBean • Complete the wizard • Save

  41. Create the Managed Bean class • Click on the hyperlink Managed Bean class* to edit the Java class, jsftutorial.LoginBean.java • Add two string properties, name and password • Generate Setters and Getters • Right-mouse click on the editor and select Source->Generate Getters And Setters • Save • Validate the login.jsp page • In the Package Explorer, Right-mouse click on ‘login.jsp’ and from the context menu, select ‘Valdate’

  42. Explore Content Assist • Open the login.jsp • Click on the inputSecret tag for password • In the Source Page, click next to the tag, inputSecret and hit Ctrl+Space to get Content Assist. Type ‘J’ to narrow choice to JSF Value EL binding. Select it. • Use ContentAssist to bind the value attribute to #{loginBean.password} • Save

  43. Add Welcome page • Add a welcome.jsp page

  44. Define Page Navigation • In the Package Explorer, navigate to and open the file WEB-INF/faces-config.xml • Click on the Navigation Rule tab • From the Package Explorer, DragAndDrop the login.jsp and welcome.jsp to the Navigation tab. • Connect the two pages. Click on the Link control in the Palette, select the login page and draw a line to the welcome page. • Select the line in the Navigation tab and in the property view, set the value of the from-outcome to login

  45. Run the Application on the Server • In the Package explorer, select login.jsp • From the Context Menu, select Run As.->Run On Server • Follow the wizard

  46. Demo: Deep dive into JSF web application development

  47. Deep dive into JSF web application development • Build a typical JSF web application and get an in-depth understanding of the features in the JSF Tools Project • Build scalar forms • Build a tabular form • Explore syntax and semantic validation • Use Resource Bundles • Enhance Look and Feel • Run, debug the application

  48. Build Scalar Forms • Use the Web Page Editor to build JSF-JSP pages • Drag and Drop components from the palette • Set the value of properties of a component • Use Property View to add non-visual child component • Navigate to the parent, child of a component • Use the Source Editor • Get a preview of the page

  49. Build a Tabular Form • Use the Web Page Editor to build a form with the Data Table component • Add the Data Table component to a page • Add columns • Using the Context Menu, the Properties View and Drag and Drop from the palette • Select a column • By direct interaction with the designer canvas, Using the Context Menu, Using the Outline View • Move a column by Drag and Drop and Using the Outline View • Add Table Header and Footer

  50. Enhance Look and Feel • Use CSS styles to give a uniform Look and Feel for the application • Explore the CSS Style Editor in the Visual Page Designer • Set inline styles for components • Use style classes • Use the Preview page to get instant feedback

More Related