Table of Contents Fast Track to JSF 2

Transcription

1 Table of Contents Fast Track to JSF 2 Fast Track to JavaServer Faces (JSF 2) 1 Workshop Overview / Student Prerequisites 2 Workshop Agenda 3 Typographic Conventions 4 Labs 5 Release Level 6 Session 1: Overview of Java EE and Java Web Applications 7 Lesson Objectives 8 Java EE, Web Apps, and Servlets 9 Java EE and Web Applications 10 Web-Based Architecture 11 Java EE Web Applications 12 Web Application Structure 13 Model View Controller and Java EE 14 MVC Pattern flow 15 What are Servlets? 16 A Simple HTTP Servlet 17 How a Servlet works 18 Object Buckets or Scopes 19 Web Archive - WAR files 20 Example web.xml file 21 Deploying Web Applications 22 Lab 1.1 Setting Up Environment 23 Review 42 Lesson Summary 43 Session 2: Getting Started with JSF 44 Lesson Objectives 45 JSF Overview 46 JSF Purpose and Goals 47 JSF Addresses Servlet/JSP Shortcomings 48 JSF API 49 JSF as MVC 50 JSF Views - Facelets 51 Facelets Defined 52 JavaBean Defined 53 Managed Beans as JSF Model 54 JSF Controller Components 55 Managed Beans - Part of JSF Controller 56 faces-config.xml details 57 faces-config.xml structure 58 Architecture Diagram 59 Your first JSF Application 62 Your first JSF application 63 Configuring FacesServlet in web.xml 64 JSF Controller 65 JSF Controller 66 JSF Controller Other Configuration 67 JSF HelloWorld - Facelet 68 JSF HelloWorld Viewing the Facelet 69 Copyright LearningPatterns Inc. All rights reserved i

2 faces-config.xml 70 Creating / Deploying a JSF Application 71 Lab Hello JSF World 72 Review 86 Lesson Summary 87 Session 3: JSF Managed Beans 88 Lesson Objectives 89 Defining a Managed Bean 90 Review of Managed Beans 91 A simple Managed Bean 92 Managed Beans Lifecycle 93 Declaring a Managed Bean 94 Bean Scopes 95 Using faces-config.xml <managed-bean> 96 Lab 3.1 Create a Managed Bean 97 Managed Beans and JSF Forms 103 Sample Logon Form 104 Examining the Logon Form 105 Linking Input Fields to Bean Properties 106 Submitting the Form 107 Static Navigation Rule 108 Static Navigation Rule 109 Form Processing 110 Lab 3.2 Use a JSF Form 111 Value and Method Binding Expressions 120 Value Binding Expressions 121 Value Binding Expressions & faces-config.xml 122 Data Binding 123 Value Binding Expressions are Read/Write 124 Managed Bean Scopes 125 JSF EL (Expression Language) 126 JSF EL (Expression Language) 127 EL Details 128 JSF EL Implicit Variables 129 Unified Expression Language 130 Lab 3.3 Using Managed Beans 131 Review 134 Lesson Summary 135 Session 4: JSF Navigation 136 Lesson Objectives 137 Navigating in a Web Application 138 Static Navigation Rule 139 Multiple Navigation Rules 140 Dynamic Navigation Rules 141 Data & Method Binding - Complete Example 142 Method Binding Expression Details 143 Dynamic Navigation Rule 144 Dynamic Navigation Rule Illustrated 145 <navigation-rule> and its child elements 146 Additional Navigation Capabilities 147 Default Results Page 148 Lab 4.1 Method Binding and Navigation 149 Copyright LearningPatterns Inc. All rights reserved ii

3 Review 157 Lesson Summary 158 Session 5: Facelets and Tag Libraries 159 Session Objectives 160 Facelets and Lifecycle 161 Facelets Overview 162 Facelets Background 163 UIComponent Tree Behind the Scenes 164 Component Tree Illustrated 165 Page Processing 166 Lifecycle Initial Request 167 Lifecycle Initial Request 168 Lifecycle Postback 169 Tag Library Overview 170 JSF Tag Goals 171 Tag Libraries 172 Tag Library Namespace in a Facelet 173 JSF Tag Libraries 174 JSF Core Tags 175 JSF Core Tag Library 176 Core Tags Overview (1 of 2) 177 Core Overview (2 of 2) 178 Resource Bundles 179 JSF HTML Tags 180 JSF HTML Tag Library 181 Editable Text Components - Input 182 Read-Only Text Components - Output 183 h:inputtext, h:outputtext Tag Examples 184 Bean Values Without h:outputtext 185 h:commandbutton Example 186 Basic Tag Attributes 187 Standard HTML Attributes 188 JSF from above 189 Lab JSF Search Form & Search Results 190 Review 204 Lesson Summary 205 Session 6: h:datatable 206 Using <h:datatable> 207 How Data Tables Work 208 Headers and Footers 209 Complete <h:datatable> code listing 210 <h:datatable> Code Generation 211 Lab Search Results Data Table 212 Session 7: More About JSF Tags 220 Session Objectives 221 <h:commandlink> 222 Working with <h:commandlink> 223 Detail using <h:commandlink> 224 CommandLink - Action Attribute 225 FacesContext and ExternalContext 226 Giving text value to a link 227 Copyright LearningPatterns Inc. All rights reserved iii

4 Unified Expression Language Example 228 h:outputlink 229 Lab CartBean and Cart Display 230 Select Tags 239 Overview 240 selectonemenu Example 241 f:selectitems Example 242 Creating Options Data 243 Grouping Select Items 244 selectmanylistbox 245 selectmanycheckbox 246 [Optional] Lab Use Select Tags 247 JSF Event Model 252 JSF Event Model 253 Action Events and Action Listeners 254 Defining Action Listeners 255 ActionEvent 256 Using Action Listeners 257 Action Listeners at Work 258 Immediate Attribute 259 Defining Listener Classes 260 f:actionlistener 261 Value Change Events 262 Data Model Events 263 Lab Action Listener 264 Review 271 Lesson Summary 272 Lesson Summary 273 Lesson Summary 274 Session 8: JSF Validation 275 Objectives 276 JSF Validation Overview 277 Type one: required attribute 278 Detail using required attribute 279 Type two: JSF Pre-built Validators 280 Detail using JSF Pre-built Validators 281 Detail using <f:validatelength> 282 Custom Validator 283 Register custom validator 284 Using the custom validator 285 Custom validation within managed bean 286 Lab Validation 287 Review 295 Lesson Summary 296 Session 9: JSF Conversion 297 Objectives 298 JSF Data Conversion 299 Type Conversion 300 Implicit Conversions 301 JSF Converters 302 Converter Details 303 Converter Usage 304 JSF Conversion from above 305 Copyright LearningPatterns Inc. All rights reserved iv

5 Custom Conversion 306 Lab Conversion 307 Review 313 Lesson Summary 314 Session 10: Templates 315 View Reuse and Consistency 317 Managing Areas 318 Templates - A Solution to Layout Reuse 319 Building Templates with Facelets 320 A Facelets Template 321 A Template Client File 322 The Resulting Page 323 Including Other Files in Templates 324 Defining a Snippet 325 Including a Snippet in a Client File 326 Including a Snippet in a Template 327 Lab Templates 328 Session 11: JSF Lifecycle 335 Lifecycle Overview 336 Initial Request Lifecycle 337 Restore View, Apply Request Phases 338 Process Events - Common Processing 339 Validation, Update Model, Invoke Application 340 Render Response 341 Affecting The Lifecycle 342 Lifecycle Summary 343 Phase Listeners 344 PhaseListener example (1 of 2) 345 PhaseListener example (2 of 2) 346 Lab Phase Listener 347 Session 12: Additional Topics Backing Beans & Binding to Components Using a Component Instance 353 Binding to a Component Property 354 [Optional] Lab Component Binding JSF and CSS JSF and JavaScript JSF and JavaScript Localization and Resource Bundles Resource Bundle Example 362 Localization with Resource Bundles 363 [Optional] Lab Resource Bundles 364 Session 13: JSP Pages 368 Session Objectives 369 What is a JavaServer Page (JSP)? 370 JSP and JSP Expressions 371 JSPs are Really Servlets 372 Lifecycle of a JSP 373 Custom Tags in JSP 374 Tag Libraries 375 Copyright LearningPatterns Inc. All rights reserved v

6 taglib Directive in JSP 376 Custom Tags in a JSP file 377 How a JSP works with a Custom Tag 378 logonform.jsp JSP Version 379 logonform.xhtml Facelets Version 380 Facelets vs JSP in our Logon Form 381 [Optional] Lab JSP 382 Lab 13.1: JSP 383 Recap 386 Recap of What We've Done 387 Resources 388 Copyright LearningPatterns Inc. All rights reserved vi

7 Introduction Fast Track to JavaServer Faces (JSF 2) The Java Developer Education Series Copyright LearningPatterns Inc. All rights reserved. 1

8 Introduction Workshop Overview / Student Prerequisites Hands-on workshop that will introduce the important concepts in the JavaServer Faces (JSF) Framework JSF is an advanced MVC framework for creating Web applications with Java After completing the course, students will be able to build their own JSF based "Faces" web application Course is 50% lecture and 50% lab exercises - labs are applied to creating a simple online music store (JavaTunes) The student should have a working knowledge of Java plus: Familiarity with basic Web app structure - HTTP, HTML, etc. Familiarity with Servlets and Java Web apps We will review the basics of Java Web applications first And then delve into JSF programming Welcome to JSFs! Thank you for choosing us to provide you with the very highest standard of technical training! We take great pride in our attention to detail in designing the very best quality courseware in the industry. This course is the result of many developer-months of planning, design, development, and review. Every course is very carefully designed using proper guidelines for instructional technology, including the use of specific performance objectives, relevant laboratory exercises, and professional quality content layout to ensure the most effective transfer of knowledge. Because we realize that no work is ever perfect, we are constantly striving to improve our materials. Throughout this course you will have ample opportunity to provide us with your feedback on all aspects of this course. Your feedback is extremely valuable to us. Again, many thanks for entrusting us with your educational needs. Enjoy the course! Copyright LearningPatterns Inc. All rights reserved. 2

9 Introduction Workshop Agenda Session 1 Overview of Java EE & Java Web Apps Session 2 Getting started with JSF Session 3 JSF Managed Beans Session 4 JSF Navigation Session 5 Facelets and Tag Libraries Session 6 h:datatable Session 7 More About JSF Tags Session 8 JSF Data Validation Session 9 JSF Data Conversion Session 10 Templates Session 11 JSF Lifecycle Session 12 Additional Topics Session 13 JSP Pages High level agenda for the class Copyright LearningPatterns Inc. All rights reserved. 3

10 Introduction Typographic Conventions Code that is inline in the text will appear in a fixed-width code font, such at this: JavaTeacher teacher = new JavaTeacher() Any class names, such as JavaTeacher, method names, or other code fragments will also appear in the same font If we want to emphasize a particular piece of code, we'll also bold it (and in the slide, change it's color) such as BeanFactory Filenames will be in italics, such as JavaInstructor.java We sometimes denote more info in the notes with a star * Lastly, longer code examples will appear in a separate code box as shown below package com.javatunes.teach; public class JavaInstructor implements Teacher { public void teach() { System.out.println("BeanFactories are way cool"); } } There really isn't anything we need to tell you here - but the star means it would be useful to take a look Copyright LearningPatterns Inc. All rights reserved. 4

11 Introduction Labs Lab The workshop consists of approximately 50% discussion, 50% hands-on lab exercises, including a series of brief labs Many of the labs follow a common fictional case study - JavaTunes, an online music store The labs are contained directly in the course book, and have detailed instructions on what needs to be done The course includes setup zip files that contain skeleton code for the labs Students just need to add code for the particular capabilities that they are working with There is also a solution zip file that contains completed lab code Lab slides contain an icon like the one in the upper right corner of this slide The end of each lab is clearly marked with a stop like this one to the right STOP Copyright LearningPatterns Inc. All rights reserved. 5

12 Introduction Release Level This manual has been tested, and contains complete instructions, for running the labs using the following platforms: JSF 2.1 (Tested with the Mojarra release) Eclipse Java EE IDE (Tested with the Helios/3.6 release) Tomcat 7 Java 6 (Required for Tomcat 7) Most recent similar versions of most of the software will likely work except for potentially small configuration changes For example, another version of JSF 2.x or Eclipse All labs have been tested on Microsoft Windows using the software listed above Copyright LearningPatterns Inc. All rights reserved. 6

13 Session 1 - Java EE Overview Session 1: Overview of Java EE and Java Web Applications Java EE, Web Apps, and Servlets Overview of Custom Tags Copyright LearningPatterns Inc. All rights reserved. 7

14 Session 1 - Java EE Overview Lesson Objectives NOTE: If you are quite comfortable with Servlets and Java Web Applications, you can skip this entire session You should do Lab 1.1 even if you skip the review Understand the basics of Java EE (Enterprise Edition) Understand the basics of Servlets Understand scope in Java EE applications Understand how to deploy a web application Review of using Custom Tags Why custom tags? How to use a simple tag Brief Introduction to JSTL Tags (JSP Standard Tag Library) Copyright LearningPatterns Inc. All rights reserved. 8

15 Session 1 - Java EE Overview Java EE, Web Apps, and Servlets Java EE, Web Apps, and Servlets Overview of Custom Tags Copyright LearningPatterns Inc. All rights reserved. 9

16 Session 1 - Java EE Overview Java EE and Web Applications Java EE is Java s standard architecture for building scalable, distributed, reliable, Enterprise applications EE is Enterprise Edition which simply means "Server Side" Java These applications normally have many components: Browser HTTP Web Server Web Application JDBC Database Uses JSF Client Middleware (J2EE space) JDBC Backend RMI Rich Client RMI EJB EIS resources Java EE specification provides technologies to more easily develop multitier, enterprise services Defines the APIs and how they interact - Current release is Java EE 5, though many are still using J2EE 1.4 (the name of the previous release) For all things Java EE: Other parts of the Java EE platform Include Glassfish Application Server - Sun-based open source Java EE server Java EE Compatibility Test Suite - Set of standard tests to determine if a particular product conforms to the specification Java EE Blueprints - Documents from Sun that describe design guidelines for Java EE applications Web Applications and their place in Java EE Java EE is a very complex architecture, with many components and standards to deal with. Even this picture sells the complexity of J2EE somewhat short. Web applications provide the HTML based presentation tier of Java EE JSF leverages Java EE to accomplish the goal of simplifying web application development. Copyright LearningPatterns Inc. All rights reserved. 10

17 Session 1 - Java EE Overview Web-Based Architecture Java Web applications provide the HTML based presentation tier Below is a popular Java EE architecture for Web applications It is relatively simple, yet suitable for many types of applications presentation business storage application server DB server browser HTTP Servlets JSP, JSF data access JDBC database The presentation code and business code reside in the same tier. Database access can be implemented directly in the servlets/jsps, but is often encapsulated into a data access layer. Many types of systems can be built with this relatively simple architecture. Many other architectures are possible For example, you can utilize EJB and persistent entities for the business layer and data access layers We'll focus mainly on the presentation layer, and in particular on JSF, in this course Copyright LearningPatterns Inc. All rights reserved. 11

18 Session 1 - Java EE Overview Java EE Web Applications Web application - A standard structure defined in Java EE for organizing the resources in a Java EE system It is a collection of Servlets, JSP (JavaServer Pages), JavaServer Faces components (JSF) and other files Most frequently collected inside of a WAR (Web Archive) file This is the standard Java EE way to package up server programs for the Web This WAR file can be deployed directly in Java EE application servers (e.g. WebLogic server, and JBoss app server) Every web app has a standard directory structure and includes an XML configuration file - web.xml Called the "Deployment Descriptor" (DD) A war file is basically a zip file with added information in it It is compatible with the zip format, and war files can be manipulated using most zip tools There is also a utility program that comes with Java to create and work with war files (the jar tool) War files are based on the Jar (Java Archive) file format Of course, a War can contain JSF components, but we will wait to introduce them In this session, we'll review basic servlet/jsp based Web apps Copyright LearningPatterns Inc. All rights reserved. 12

19 Session 1 - Java EE Overview Web Application Structure <Web application base directory> [static content files: HTML, forms, images, etc.] [dynamic content: facelets, JSP] [other directories for content] WEB-INF web.xml Web application configuration file classes [.class files: servlets and others] lib [JAR files] The WEB-INF directory is just a normal directory of this name It s an unusual name, but don t be confused by that. It s just a directory Copyright LearningPatterns Inc. All rights reserved. 13

20 Session 1 - Java EE Overview Model View Controller and Java EE Java EE applications generally follow a Model-View- Controller structure (MVC) - (also called Model 2) A common way of developing applications with user interfaces View: Way of representing the data to a human user In JSF usually a facelet (which can contain JSF components) used to generate the HTML was JSP in earlier versions Controller: Intermediary between Model and View In Java EE Servlets are used as the controller JSF has its own controller architecture, built on top of servlets Model: Representation of the business domain Not concerned with user interface or application flow In Java EE typically a combination of data and Java Objects of some sort to handle the persistence & business logic (e.g. EJB) We don't focus on the model in this course MVC was called a Model 2 architecture when used with Java EE The first design pattern that become widely adopted after JSP was introduced was "page centric" with most of the Java code in JSP pages - this became known as Model 1 Model 1 systems were not cleanly designed, and were hard to work with Model 2 was the 2 nd architecture that became largely popular in the early evolution (hence the name) JSF encourages a Model 2 architecture. It encapsulates much view code in custom tags to reduce Java usage in the JSP The view may, of course, also contain other resources such as graphs and images The model is really independent from the presentation layer The presentation layer calls on the model to generate data, but is not really concerned with how the model is implemented Copyright LearningPatterns Inc. All rights reserved. 14

21 Session 1 - Java EE Overview MVC Pattern flow V "Next Think twice about going from View to Model Why? DB Entity EJB M FILE Best View" GUI POJO JSF HTML Session EJB Servlet C POJO JavaBean Helper(s) The flow starts with the View, and the user's interaction with any given view. The interaction is processed by the controller, which decides whether or not to tweak the model (e.g. Create, Read, Update, Delete) The model returns with some data, or a change is made to the model, or there is no need to work with the model. The controller then decides what is the "Next Best View" to show to the user, and the flow starts all over again. POJO means Plain Old Java Object, which is NOT a J5EE component, as it does NOT require container services. POJOs are making a comeback after heavy weight components failed to deliver based on high expectations. A normal JavaBean (not EJB), and a custom Controller helper (of any non component type) may be considered a POJO. For more on the MVC pattern see, Copyright LearningPatterns Inc. All rights reserved. 15

22 Session 1 - Java EE Overview What are Servlets? Servlets are Java components that run on the server in response to client requests Run within a Web container in an application server Container is a name for a set of services that must be available to a servlet for it to execute properly Subclass javax.servlet.httpservlet to create a servlet, and override its doget() method The servlet is deployed to an app server in a WAR The App Server will instantiate it and invoke it (when appropriate) The container will execute its doget() method in response to a "GET" request and dopost() in response to a "POST" The resulting output will go back to the browser Servlets are the J2EE way to respond dynamically to client requests They work alongside JSPs which we talk about later Servlets are really instances of a class whose methods are invoked by the servlet container The Web container services can be provided entirely by the server or by a server plug-in Tomcat can act as a plug-in servlet container for well known servers like Apache Three ways to make a GET request: 1. Write the URL in the browser's "address" text field 2. Any <a href=" " ></a> hyperlink is automatically a GET 3. <form method="get" > </form> One way to make a POST: <form method="post" > </form> Watch out for using a form with GET is it not safe since the information will be visible on the URL Copyright LearningPatterns Inc. All rights reserved. 16

23 Session 1 - Java EE Overview A Simple HTTP Servlet package com.javatunes.web; import javax.servlet.http.*; import javax.servlet.*; import java.io.*; public class SimpleHttpServlet extends HttpServlet { public void dopost(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { response.setcontenttype("text/html"); PrintWriter out = response.getwriter(); } } // This output is sent back to the client out.println("<b>life is good</b>"); out.close(); There is a lot here we don t go into detail on here The important point, is that we can write Java code here (out.println( <b>life is good</b> )) and the container takes care of all the mechanics of getting this output back to the client We generally don't generate output in such a simplistic way we'll see more sophisticated ways to do this later, like using a JSP In a more complex application, you could first do more complicated things, like a database lookup, and then use it to send output to the client Copyright LearningPatterns Inc. All rights reserved. 17

24 Session 1 - Java EE Overview How a Servlet works WEB BROWSER APPLICATION SERVER <form method="post" </form> WEB HTTP REQUEST HTTP RESPONSE Servlet dopost() {//respond} Dynamic HTML Content Life is good HD web.xml Servlet Container 1. Instantiates Servlet 2. Invokes init() 3. Invokes doxx() There are other aspects to the Servlet Container that are not discussed here (such as complex multithreading issues) If the Servlet already exists in the container it is not instantiated, it is used as is, with another thread invoking on the Servlet at runtime. An existing Servlet does not have init() invoked again, only once, like a constructor Additional methods not mentioned above: doget(), destroy(), etc. and any custom methods We did not put the full method signature simply to save space For all Java EE web applications the Deployment Descriptor (web.xml) must be present for the application to work as that is the file that maps the URL patterns (requests) to the Servlet class file needed for instantiation The Servlet Container reads the web.xml upon starting the web application Many objects are omitted from the Servlet Container diagram above, such as: ServletContext, HttpSession, HttpServletRequest, HttpServletResponse, ServletConfig, etc. Copyright LearningPatterns Inc. All rights reserved. 18

25 Session 1 - Java EE Overview Object Buckets or Scopes Servlets/JSPs share data in order to cooperate The Servlet API offers three main buckets, or scopes, for holding shared objects (in javax.servlet) Request scope - ServletRequest/HttpServletRequest Application scope - ServletContext Session scope - HttpSession To access the scope, you use the associated object For example, ServletRequest for the request scope In a servlet, you use setattribute() and getattribute() to put things on and take things off the scope request.setattribute("president", "Abraham Lincoln"); Servlets may share data with other servlets to compartmentalize functionality Servlets may store data for other parts of a Web app The different buckets for sharing data allow you flexibility in: How long the shared data stays available Who can get to the data When the data is available Copyright LearningPatterns Inc. All rights reserved. 19

26 Session 1 - Java EE Overview Web Archive - WAR files Web applications are stored in WAR files Basically a zip file with a ".war" extension containing: JSP, html files web.xml web application deployment descriptor Classes: servlets, JavaBeans and support classes Java libraries (jar files) The web.xml Deployment Descriptor - is an XML file used to configure the Web app Defined in the spec, stored in the WEB-INF directory - it contains: Servlet definitions and Servlet URI mappings ServletContext init parameters Session configuration Error pages Security, JNDI environment, Referenced EJBs Maps resources such as JDBC connections, URL factory, JMS resources, and mail resources Copyright LearningPatterns Inc. All rights reserved. 20

27 Session 1 - Java EE Overview Example web.xml file Below, is a web.xml mapping a servlet to the URL /hello The XML namespace information in <web-app> is part of the specification <?xml version="1.0" encoding="utf-8"?> <web-app id="webapp_id" version="2.4" xmlns=" xmlns:xsi=" xsi:schemalocation=" <servlet> <servlet-name>helloworld</servlet-name> <servlet-class>com.hello.helloworldservlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>helloworld</servlet-name> <url-pattern>/hello</url-pattern> </servlet-mapping> </web-app> This simple example only demonstrates a servlet mapping Much more is possible in web.xml Copyright LearningPatterns Inc. All rights reserved. 21

28 Session 1 - Java EE Overview Deploying Web Applications Deployment of WAR files is application server specific For many application servers, you can copy WAR files to a specific directory, and the server will automatically deploy them For others, you must use deployment tools to deploy WAR files in the application server Many app servers allow you to do both Copyright LearningPatterns Inc. All rights reserved. 22

29 Lab Setup Lab 1.1 Setting Up Environment Copyright LearningPatterns Inc. All rights reserved. 23

30 Lab Setup Lab 1.1 Set up the Environment Lab Overview: In this lab, we'll set up our environment & Eclipse You will get a brief introduction to the major capabilities of Eclipse - enough to be able to work with it, but not in-depth We'll also deploy and test a simple web application to get ready for the upcoming labs Objectives: Become familiar with, and set up Eclipse Start up the Eclipse and create a Tomcat server in it Become familiar with the lab structure Create, deploy, and test a Web project Note: No JSF is involved in Lab 1.1; that will come later Builds on previous labs: None Approximate Time: minutes Copyright LearningPatterns Inc. All rights reserved. 24

31 Lab Setup Information and Tasks to Perform Lab Within a lab, information only content is presented in the normal way the same as in the student manual pages Tasks that the student needs to perform are in a box with a slightly different look to help you identify them An example is given below Tasks to Perform Look at these instructions, and notice the different look of the box as compared to that above Make a note of how it looks, as future labs will use this format Make sure that you have Eclipse installed Likely installed in a directory like C:\eclipse Make sure that you have Java installed Likely installed in a directory like C:\Program Files\Java Make sure that you have Tomcat installed Likely installed in a directory like C:\apache-tomcat OK Now get out your setup files; we're ready to start working If any of the software is not installed, then you'll have to install it They are all downloadable from the web Copyright LearningPatterns Inc. All rights reserved. 25

32 Lab Setup Extract the Lab Setup Zip File Lab To set up the labs, you'll need course setup zip file * The file name should be something like: LabSetup_JSF2_Eclipse-Tomcat-Mojarra_.zip Our base working directory for this course will be C:\StudentWork\JSF This directory will be created when we extract the Setup zip It includes a directory structure and files (e.g., Java files, XML files, other files) that will be needed in the labs All instructions assume that this zip file is extracted to C:\. If you choose a different directory, please adjust accordingly Unzip the lab setup file to C:\ Tasks to Perform This will create the directory structure, described in the next slide, containing files that you will need for doing the labs The setup zip will either be given to you on a CD or supplied by your instructor Copyright LearningPatterns Inc. All rights reserved. 26

33 Lab Setup Lab Directory Structure Lab StudentWork\JSF will eventually contain the following folders: workspace: Workspace dir workspace\labnn: Lab dir LabNN\build : Compiled code LabNN\src\java : Java source LabNN\WebContent : HTML, JSF pages LabNN\WebContent\pages :JSF pages LabNN\WebContent\WEB-INF: web.xml, faces_config.xml, etc. LabSetup: files needed for lab work LabSetup\LabNN: directory for any lab with additional setup files The Lab01.1 directory and all its subdirectories will be created when we create the project for the labs Copyright LearningPatterns Inc. All rights reserved. 27

34 Lab Setup The Eclipse Platform Lab Eclipse ( is an open source platform for building integrated development environments (IDEs) - Used mainly for Java development - can be extended via plugins and used in other areas (e.g. C# programming) Originally developed by IBM Released into open source IBM's RAD environment is built on top of Eclipse Eclipse products have two fundamental layers The Workspace files, packages, projects, resource connections, configuration properties The Workbench editors, views, and perspectives We will set up the workspace and workbench, then describe it in more detail at the end of the lab The Workbench sits on top of the Workspace and provides visual artifacts that allow you to access and manipulate various aspects of the underlying Workspace resources. Copyright LearningPatterns Inc. All rights reserved. 28

35 Lab Setup Eclipse and Web Projects Lab We'll use the Eclipse Java EE edition in this class Has support for Java Web applications Eclipse organizes Java Web apps using Dynamic Web Projects Dynamic Web projects contain Java EE resources such as servlets, JSP pages, plus static resources (HTML) You establish project properties for the Web Project at creation time and can modify them later It provides a custom editor for the web.xml file The Eclipse Web project organization is different from how the final Java EE Web application organization will be It is designed to make it easy for you to work with the resources When deployed, a standard WAR is build Eclipse also provides Static Web projects that can be used when you aren't generating dynamic content and don't want any of the overhead associated with dynamic Web content When you create the project, you can set many properties for it, including: Build path, project references, default server for deployment, and the application s context root Uses the build path value to resolve references in the compiling code The web.xml file holds many additional settings Servlets to be run in project Initial (welcome) pages and error pages Environment values and JNDI references to resources made in servlets/jsp s Copyright LearningPatterns Inc. All rights reserved. 29

36 Lab Setup Web Project Organization Lab Organized in the following folders src: Contains all Java source files WebContent: Contains all Web resources WebContent\WEB-INF: Same as Java EE WEB-INF Usually use Web Perspective or J2EE Perspective All visible elements are not necessarily deployed with the project e.g. the src folder is not deployed - only compiled classes Eclipse creates a standard WAR file when it deploys Before Web components are developed you must create and configure a new Web Project You can specify the build path for the project to include external jar s or class files When Web projects are created, Eclipse automatically creates the associated Deployment Descriptor (DD) web.xml - DD for Web project in WEB-INF folder The src folder contains all Java source Servlets, supporting classes, JavaBeans When you compile these classes, the compiled output is put in the WEB-INF\classes directory The WebContent folder contains all Web resources HTML files, JSP files, image files, etc. Only content in this folder (or a sub-folder) can be accessed in the Web application HTML and JSP pages must be correctly placed relative to the context root Media files, JAR files, loose class files and other resource libraries must also be correctly placed Both the Web and Java EE views are useful for managing Web projects Web perspective contains HTML/JSP oriented views not in J2EE perspective Copyright LearningPatterns Inc. All rights reserved. 30

37 Lab Setup Getting Started With Eclipse Lab Tasks to Perform Make sure you have Eclipse installed - likely in C:\eclipse Launch Eclipse: Go to c:\eclipse and run eclipse.exe A dialog box should appear prompting for a workspace location Set the workbench location to C:\StudentWork\JSF\workspace If a different default workspace location is set, change it You can also put a shortcut on your desktop to start Eclipse Copyright LearningPatterns Inc. All rights reserved. 31

38 Lab Setup Workbench and Java EE Perspective Lab Tasks to Perform In the window that opens, close the Welcome screen (see notes) You should in a Java EE perspective That's fine, this perspective is good for what we do If you need to open the Java EE perspective, (Shouldn't need to do this now) you can do so by clicking the Perspective icon at the top right of the Workbench, and select Other Java EE (as shown below) Eclipse opens with a Welcome screen which allows you to navigate to different things (such as tutorials) We will not be using this, so we will close it and go directly to the Workbench To close it, just click the X on the Welcome tab Copyright LearningPatterns Inc. All rights reserved. 32

39 Lab Setup The Java EE Perspective Lab Copyright LearningPatterns Inc. All rights reserved. 33

40 Lab Setup Creating a Server Lab We will use the Tomcat to run our Web applications - first we need to create a server in Eclipse * Tasks to Perform 1. Go to the Servers view, right click, and select New Server 2. In the next dialog, select Apache Tomcat V7.0 * and click Next 3. In the next dialog, browse to your Tomcat install directory, and click Finish (see note about Java SDK error message) If you use a Tomcat version other than 7.0, then select the appropriate version in the dialog where you choose the server You need at least Tomcat 7, though later versions should work also Eclipse for Java EE has support for deploying Web applications to a configured server It also has support to start and stop the servers from within Eclipse If you see the warning message at bottom, you can ignore it This is a bug in some Eclipse versions Tomcat 7 does NOT need a Java SDK it uses the Eclipse JSP compiler If you see this warning message at other times, you can also ignore it Copyright LearningPatterns Inc. All rights reserved. 34

41 Lab Setup Create a Web Project Lab Tasks to Perform Create Dynamic Web project File New Dynamic Web Project * Call it Lab01.1 *, select the Tomcat runtime, and click Next (click Next twice in Eclipse 3.5) In the next dialog, change the Context Root to javatunes (all lower case - as below) Click Finish There are multiple ways to create a new project: Click on the New Wizard button in left side of the toolbar Right click in the Package Explorer View, select New... etc. We will be using a Servlet 2.5 / JSP 2.1 Web project because we are using JSF 1.2 in this course JSF 1.2 requires these versions or newer Note - When you call the project Lab01.1, it's stored in workspace\lab01.1 We supply a skeleton directory structure in the Lab01.1 directory that will be included in your project It includes some files and directories that you'll use Copyright LearningPatterns Inc. All rights reserved. 35

42 Lab Setup The Project Explorer View Lab Look at the Project Explorer View Java EE oriented display Not file oriented Organized into groups based on type of project Resources in a project are displayed in a view specific way For example the deployment descriptor (also shown as web.xml under WEB-INF) Copyright LearningPatterns Inc. All rights reserved. 36

43 Lab Setup Navigator View Lab Tasks to Perform Open the Navigator View (Window Show View Navigator) Look at the Navigator view to see the Web project you just created File system like view Organizes Java source, Web content Knows about deployment descriptors Note that Eclipse can create the deployment descriptor, web.xml, for you (we supplied one in this lab) Double click on web.xml to open it for viewing and editing Copyright LearningPatterns Inc. All rights reserved. 37

44 Lab Setup The web.xml file (Source Tab) Lab Review the web.xml file by clicking the source tab <web-app> is the root element, and contains the schema declaration from the servlet/java EE specification <display-name> is a descriptive name used by tools <welcome-file-list> is a list of default files to be displayed if a file is not specified on the request URL We've set this to the index.html file that we include in the setup files Copyright LearningPatterns Inc. All rights reserved. 38

45 Lab Setup Deploying an Application Lab Tasks to Perform To deploy to the server, right click on the Lab01.1 project, and select Run As Run on Server In the next dialog box select the existing Tomcat v7.0 server Also select Always use this server when running this project, as we will always use this server Click Finish Note that running a Web app on the server will automatically start the server Copyright LearningPatterns Inc. All rights reserved. 39

46 Lab Setup Viewing the Web Application Lab Eclipse will automatically open a Web browser for you onto the Web application using the correct URL (see notes on port number) Note that if you use IE as your browser, it is sometimes misleading because it caches Web pages, and it's hard to clear the cache Also-sometimes the browser window comes up before the server has loaded the Web app - try a reload if a resource can't be accessed If you ever feel your having browser issues, open an external browser viewing the same URL (note that you don't have to specify any file since we have a welcome file) That's it your Web app is up and running The Tomcat server listens on port 8080 by default You can change the browser that is used by Eclipse as follows Go to the menu item Window Web Browser Choose the Web browser you want to use You can use a different Web browser such as Firefox if you have it installed, or you can choose Internet Explorer to use an external instance of IE - which is easier to shut down to clear the cache Copyright LearningPatterns Inc. All rights reserved. 40

47 Lab Setup Server Startup Lab You can open the Console view to see output from the server startup This is useful to look for exception stack traces in later labs Note that server startup may take some time, especially the first time you start the server You can also look at the server status in the Servers view STOP Copyright LearningPatterns Inc. All rights reserved. 41

48 Session 1 - Java EE Overview Review 1) What is a Servlet? 2) When creating a Servlet, what class do you extend? What method do you need to define? 3) What is a Servlet used for? 4) What are the 3 scopes in the Servlet API? What is the difference between these scopes? 5) How are web applications packaged? 6) How are web applications deployed? Copyright LearningPatterns Inc. All rights reserved. 42

49 Session 5 - Facelets and Tag Libraries Session 5: Facelets and Tag Libraries Facelets and Lifecycle Tag Library Overview JSF Core Tags JSF HTML Tags Copyright LearningPatterns Inc. All rights reserved. 159

50 Session 5 - Facelets and Tag Libraries Session Objectives Review how tag libraries work in a facelet page Describe the goal of the JSF Custom Tag libraries Give an overview of the JSF Core and HTML libraries Explain how JSF tags work together Copyright LearningPatterns Inc. All rights reserved. 160

51 Session 5 - Facelets and Tag Libraries Facelets and Lifecycle Facelets and Lifecycle Tag Library Overview JSF Core Tags JSF HTML Tags Copyright LearningPatterns Inc. All rights reserved. 161

52 Session 5 - Facelets and Tag Libraries Facelets Overview Facelets is a language for building JSF views Replaces JSP pages It is a lightweight page declaration language that uses standard XHTML to create pages Supports JSF, JSTL, and Facelet tag libraries Supports the JSF EL Provides templating mechanism for code reuse and standardization Look very much like the JSP pages they replace Use standard (X)HTML syntax, instead of JSP syntax Use XML namespaces to support tag libraries Use EL expressions very similarly to how JSP does Copyright LearningPatterns Inc. All rights reserved. 162

53 Session 5 - Facelets and Tag Libraries Facelets Background Facelets were designed specifically to work with JSF They replace the previous JSP page technology They have significant advantages over JSP, including simplicity, better performance, and more capability Facelets are build with JSF in mind A facelet is converted directly into a component tree, which we'll cover in more detail shortly As opposed to a JSP file which is converted into a servlet * Facelet tag libraries are used to add components to a JSF page Each tag has a corresponding component that is used to build a component tree representing the page With facelets, this mapping is very direct and efficient Though it was possible to integrate the JSF lifecycle with JSP, it was cumbersome and inefficient There were basically two lifecycles involved The JSP, which was compiled, turned into a servlet, and executed at every request had its lifecycle The complex JSF lifecycle, and its associated component tree This led to a lot of difficulty Copyright LearningPatterns Inc. All rights reserved. 163

54 Session 5 - Facelets and Tag Libraries UIComponent Tree Behind the Scenes When a JSF page is processed by the JSF runtime, a component tree of UIComponent is built to represent the JSF components in the page The component tree is the server side representation of the page, and is independent of the view technology (e.g. facelets) JSF defines a UIComponent subclass for each UI component We'll cover this at a high level now, since the details aren't relevant to this session The component tree reflects the structure of the JSF tags in the page For example, if you have nested tags, you'll have nested UIComponent objects All UIComponents appear in a root component representing the root of the tree * See the javax.faces.component.uicomponent javadoc for more information Building the component tree involves the tag handler for each JSF tag in the page For each tag, its tag handler works with the JSF runtime to build the component tree (the tags instantiate the associated UIComponent) Copyright LearningPatterns Inc. All rights reserved. 164

55 Session 5 - Facelets and Tag Libraries Component Tree Illustrated Our logon form page contains a JSF form, two input fields, and a submit button, and its component tree is shown below UIViewRoot represents the root of the component tree UIForm represents the form Each UIInput represents one the textfields UICommand represents the Submit button A RenderKit renders view specific markup (e.g. HTML) Request UIViewRoot browser Response RenderKit UIForm UIInput UIInput UICommand Web Container When a page is rendered for a client, a specific renderer is used to generate the markup For example, an HTML renderer for an HTML request, or a WML renderer for a wireless client RenderKits are used to display the data in the component tree The same component tree can be used with different RenderKits to create different markup A JSF user interface component is the basic building block for creating a JSF user interface. A particular component represents a configurable and reusable element in the user interface, which may range in complexity from simple (such as a button or text field) to compound (such as a tree control or table). Components can optionally be associated with corresponding objects in the data model of an application, via value expressions. The user interface for a particular page of a JSF-based web application is created by assembling the user interface components for a particular request or response into a view. The view is a tree of classes that implement UIComponent. The components in the tree have parentchild relationships with other components, starting at the root element of the tree, which must be an instance of UIViewRoot. Components in the tree can be anonymous or they can be given a component identifier by the framework user. Components in the tree can be located based on component identifiers, which must be unique within the scope of the nearest ancestor to the component that is a naming container. For complex rendering scenarios, components can also be attached to other components as facets. [JavaServer Faces Specification Sec. 3.0] Copyright LearningPatterns Inc. All rights reserved. 165

56 Session 5 - Facelets and Tag Libraries Page Processing The component tree is an integral part of the page processing Used for both rendering the page and in processing requests When a page is rendered (as HTML to be sent to the browser), the component for each tag is used to generate the HTML representing that tag Regular HTML in the page is just passed through to the browser When a form is submitted and needs to be processed, the form data is given to the component tree and extracted from the request Each component has an id, and the id is included in the form data submitted in the request, making it easy for each component to extract its own data Copyright LearningPatterns Inc. All rights reserved. 166

57 Session 5 - Facelets and Tag Libraries Lifecycle Initial Request Let's take an initial look at the JSF lifecycle * When a request for a JSF page comes in, the component tree (called the view), must be built (or restored from memory) This is called the Restore View phase in the JSF lifecycle It is the first thing done in response to a request For an initial request, the component tree is built from scratch The facelet file is compiled, and is used to generate the component tree in general, tags become components This component tree (represented by a UIViewRoot) is given an id based on the request details Once the component tree is built, the response is rendered immediately for an initial request Called the Render Response phase done by traversing the component tree and having the components render themselves The JSF lifecycle is fairly complex, and will be covered in additional detail later The id for the request is generated according to an algorithm in the JSF specification Copyright LearningPatterns Inc. All rights reserved. 167

58 Session 5 - Facelets and Tag Libraries Lifecycle Initial Request A FacesContext object stores all per-request state data After Restore View, the FacesContext will hold the view (the root of the component tree) associated with the request Upon an initial request, the component tree is built, stored in the FacesContext, and the response is then immediately rendered Initial Request - Render Response In the case of an Initial Request, the FacesContext will hold a newly built view Copyright LearningPatterns Inc. All rights reserved. 168

59 Session 5 - Facelets and Tag Libraries Lifecycle Postback Postback: A request that comes from a JSF page where the component tree already exists e.g. on a form submit from a JSF page the page will have been rendered at least once before (when initially requested) JSF stores all the views (component trees) between requests Upon a postback, the JSF controller will find the associated view (using the view id), and restore it * At the end of the Restore View phase, the FacesContext will hold the restored view The request is ready for additional processing For a postback, this processing is more complicated than an initial view We'll look into it more later A ViewHandler is used by the JSF controller to restore the view The ViewHandler responsible for recreating a view tree exactly identical to the one that was used to previously render the view to the user How it does this is up to the implementation Copyright LearningPatterns Inc. All rights reserved. 169

60 Session 5 - Facelets and Tag Libraries Tag Library Overview Facelets and Lifecycle Tag Library Overview JSF Core Tags JSF HTML Tags Copyright LearningPatterns Inc. All rights reserved. 170

61 Session 5 - Facelets and Tag Libraries JSF Tag Goals At a very high level, the goals of JSF Custom tags are: Provide the basic building blocks used to create view pages Delegate all dynamics to UIComponent code written for you Work with the JSF Expression Language (EL) Provide tag syntax, and tag attributes for you to set, which create customized view component objects at runtime Provide a tag-nesting structure for flexibility and easy rendering of results Of course, the general goals of custom tags were also important Provide a way to include dynamic data in a view Provide a clean way to generate complex HTML (e.g. for a table with dynamic data) The view component hierarchy and lifecycle is complex and will be explained more fully later Copyright LearningPatterns Inc. All rights reserved. 171

62 Session 5 - Facelets and Tag Libraries Tag Libraries Tag library : A collection of tags that encapsulates functionality to be used from within a JSF page. Used to define the functionality of a JSF page Usually consist of: A JAR file which holds the implementing code A TLD (Tag Library Descriptor) - An XML file which is a descriptor of the library (usually included in the jar) A URI in the TLD identifies the Tag Library in a page It appears in the namespace declarations of a JSF page and links it to the tag library The core library TLD except below contains the URI <description> tags for HTML </description> <tlib-version>2.1</tlib-version> <short-name>h</short-name> <uri> The jar file will go in the WEB-INF/lib directory Copyright LearningPatterns Inc. All rights reserved. 172

63 Session 5 - Facelets and Tag Libraries Tag Library Namespace in a Facelet An XML namespace is used in a facelet to notify the container that the page relies on a tag library Makes the tags in the tag library available for use in that page The taglib directive specifies two things uri: Declares which tag library is being used (see note) prefix: Abbreviation for the tag library in this page only Below, we show the namespace for the JSF html library We've seen this use before, now we know what it means Note how it matches the URI from the taglib shown previously <html xmlns=" xmlns:h=" <h:outputtext value="#{logon.username}" /> </html> The namespace URI is not an actual location URI - it is basically just a unique identifier This URI is specified in the TLD file in the jar that contains the library When it is used as a namespace in a facelet, the JSF runtime will search for a matching URI in all the TLD files it can access - when it finds a match, it uses that TLD file to get information about the tag library and the tags it contains The prefix becomes a shorthand for the tag library, and can be used to specify tags It is just an easy to use abbreviation for the tag library You can use anything you like as the prefix, but certain prefixes have become standard, and it's not recommended to use different ones (e.g. html: for the html tag library, f: for the core, etc) In our sample pages, we are not including the standard HTML tags for brevity Copyright LearningPatterns Inc. All rights reserved. 173

64 Session 5 - Facelets and Tag Libraries JSF Tag Libraries We'll first cover two of the main JSF tag libraries Core: Tags for work NOT tied to a specific rendering protocol HTML: Tags for work directly meant to be rendered as HTML These tags are designed to be used in facelets Other rendering options are available, however facelets are now the preferred, and default, view technology These tags are based on the earlier JSP versions in JSF 1.x JSF tags are complex, often with many allowable "attribute" values, a JSF Expression Language (EL) value binding (VB), method binding (MB), etc. We will lightly review each tag We will discuss thoroughly a few tags that are most useful from each library, and see in detail how they are best used Copyright LearningPatterns Inc. All rights reserved. 174

65 Session 5 - Facelets and Tag Libraries JSF Core Tags Facelets and Lifecycle Tag Library Overview JSF Core Tags JSF HTML Tags Copyright LearningPatterns Inc. All rights reserved. 175

66 Session 5 - Facelets and Tag Libraries JSF Core Tag Library The JSF core tags are independent of any RenderKit The tags generally use the standard f prefix - <f:tagname> The tags cover a wide range of functionality, including page related tags like f:view, event handling tags, validator and conversion tags, & more We introduce it in a facelet using a namespace, & the appropriate URI, as shown below <html xmlns=" xmlns:f=" Generally, we use these tags with other component tags - e.g. HTML based tags which we'll look at later The prefix for the core library could be anything, but f: has become standard If you look in jsf-impl.jar at the META-INF\jsf_core.tld file, you will see an element <uri> This must match the uri you use in the taglib directive All JSF implementations must provide a tag library containing core actions that are independent of a particular RenderKit. The corresponding tag library descriptor must meet the following requirements: Must declare a tag library version (<tlib-version>) value of 1.2. Must declare a URI (<uri>) value of Must be included in the META-INF directory of a JAR file containing the corresponding implementation classes, suitable for inclusion with a web application, such that the tag library descriptor will be located automatically by the algorithm described in Section 7.3 of the JavaServer Pages Specification (version 2.1). The tags in the implementation of this tag library must not cause JavaScript to be rendered to the client. Doing so would break the requirement that the JSF Core Tag library is independent of any specific RenderKit. [JavaServer Faces Specification Sec. 9.4] Copyright LearningPatterns Inc. All rights reserved. 176

67 Session 5 - Facelets and Tag Libraries Core Tags Overview (1 of 2) Container tags: f:view: Root tag for all JSF tags (optional for facelets) f:subview: Root tag for pages included in other JSF pages Event Handling tags: - Add various listeners to the parent tag f:actionlistener, f:phaselistener, f:setpropertyactionlistener, f:valuechangelistener List item tags: Represent a single item or multiple items in a view (e.g. for a checkbox) f:selectitem, f:selectitems Converter tags: Specify an arbitrary, Number, or DateTime converter on parent f:converter, f:convertdatetime, f:convertnumber Remember these core tags are NOT dependent upon the final rendering protocol <f:view> is the root of the JSF Tag hierarchy Optional for facelets, it must appear once in every JSP as the parent of all other JSF Tags The event listener tags add different kinds of listeners depending on the tag itself For example, f:actionlistener registers an action listener on a parent component phaselistener registers a PhaseListener instance on a UIViewRoot component setpropertyactionlistener registers a special action listener whose sole purpose is to push a value into a backing bean when a form is submitted valuechangelistener registers a value-change listener on a parent component In a JSP, the list item tags are used in conjunction with <h:selectxx> tags Conversion can also be done with the "converter" attribute on any <h:tagname> action that allows for conversion Copyright LearningPatterns Inc. All rights reserved. 177

68 Session 5 - Facelets and Tag Libraries Core Overview (2 of 2) Validator tags: Specifies a validator on a component f:validator, f:validatedoublerange, f:validatelength, f:validatelongrange Specifies a custom validator, DoubleRangeValidator, LengthValidator, or LongRangeValidator, respectively Other tags: <f:ajax>: Add Ajax behavior to a component <f:loadbundle>: Loads a resource bundle <f:param>: Adds name/value pair to immediate parent tag <f:attribute>: Adds an "attribute" to the immediate parent <f:facet>: Specifies a special relationship to enclosing tag (e.g. a table header for a table) <f:verbatim>: Encapsulates non-jsf content (i.e JSTL tags) f:param substitutes parameters into a MessageFormat instance and adds query string name-value pairs to a URL See also <h:commandbutton> and <h:commandlink> Remember these core tags are NOT dependent upon the final rendering protocol Copyright LearningPatterns Inc. All rights reserved. 178

69 Session 5 - Facelets and Tag Libraries Resource Bundles The JSF core library provides support for messages (e.g. button text, error messages) via Resource Bundles Two important issues Enforcing a consistent style across a Web application e.g. All form submit buttons should use the label "Go for it" Localizing applications for different locales e.g. Providing English and Spanish versions of a Web application Resource Bundles are based on properties files Containing name-value pairs for the messages in your app You use the names (keys) in JSP pages and in your code At runtime, JSF looks up the correct text message <f:loadbundle> is used to load a message bundle We'll cover this in more detail later The properties files use the usual Java properties file format Underneath the hood, Message Bundles are powered by the core Java I18N capabilities (I18N is the abbreviation for Internationalization) I18N - 18 letters between the starting I and ending n. Some of the key concepts in Java I18N: Locale : Represents a choice of country and language ResourceBundle : A class supplying the fundamental tools for supporting messages in multiple languages Property files are often used to initialize messages in systems dealing with I18N issues Rather than putting a string in an application, you put in a property file key, which is then looked up for the string Multiple property files may be present for different languages, with the appropriate property file being chosen at runtime by including the Locale in the different file names Copyright LearningPatterns Inc. All rights reserved. 179

70 Session 5 - Facelets and Tag Libraries JSF HTML Tags JSF Tag Overview JSF Core Tags JSF HTML Tags Copyright LearningPatterns Inc. All rights reserved. 180

71 Session 5 - Facelets and Tag Libraries JSF HTML Tag Library The JSF HTML tags represent HTML form components, and other basic HTML elements These elements display data or collect data from a user The tags generally use the standard h prefix - <h:tagname> The library is composed of tags providing HTML versions of the standard JSF components They represent a combination of a UIComponent class, and an HTML RenderKit renderer The tags work with the HTML renderer to create and return HTML code back to the browser for each component The namespace for the HTML tags would look like: xmlns:c=" The prefix for the html library could be anything, but h: has become standard Copyright LearningPatterns Inc. All rights reserved. 181

72 Session 5 - Facelets and Tag Libraries Editable Text Components - Input There are four main editable text components h:inputhidden - Adds a hidden variable to a page h:inputsecret - Standard password field h:inputtext - Standard text field h:inputtextarea - Standard text area Represented by a subclass of UIInput and a renderer Each component has a subclass, e.g. HtmlInputHidden, which has functionality specific to the component Each component is rendered with an associated renderer - e.g. the Hidden renderer for inputhidden The renderer knows how to generate markup for the component Input components allow a number of attributes Standard HTML and JSF specific - we'll look at these later The h:inputsecret component accepts one line of text with no spaces and displays it as a set of asterisks as it is typed The h:inputtext component accepts a text string of one line The h:inputtextarea component accepts multiple lines of text UIInput is in the package javax.faces.component The HTML subclasses are in the package javax.faces.component.html The name of the tag, e.g. inputhidden, is made up of the UIComponent name, and the renderer name The renderers are part of a RenderKit, which, along with the Renderer and RenderKitFactory classes, define the JSF interface for rendering The RenderKit classes are not part of the JSF spec, but are included with implementations Because of this, different implementations may generate different HTML markup for the components Copyright LearningPatterns Inc. All rights reserved. 182

73 Session 5 - Facelets and Tag Libraries Read-Only Text Components - Output There are four main read-only text components h:outputlabel - Standard read-only label (Uses the for attribute to specify the component to be labeled) h: outputlink - Displays an <a href=" "> tag h: outputformat - Displays a localized message h: outputtext - Displays a text string of one line Represented by subclass of UIOutput and a renderer Has a specific component subclass and renderer - similar to the input components Output components also allow a number of attributes We'll look at the usage of a few of the tags, but not all Once you see how they work, they are easy to use Read the tlddocs! The h:outputlabel component displays a component as a label for a specified input field The h: outputlink component links to another page without generating an action event Copyright LearningPatterns Inc. All rights reserved. 183

74 Session 5 - Facelets and Tag Libraries h:inputtext, h:outputtext Tag Examples Below are <h:outputtext> examples displaying text value attribute contains text to be displayed escape attribute indicates if characters that are sensitive in HTML (e.g. <) should be escaped (true by default) #{item.artist} is a value binding expression <h:outputtext value="this is <b>okay</b>" escape="false"/> <h:outputtext value=" and so is this..."/> <h:outputtext value="#{item.artist}" /> The <h:inputtext> example displays an input text field value attribute contains data to be displayed #{logon.username} is a value binding expression Enter Name: <h:inputtext value="#{logon.username}"/> Copyright LearningPatterns Inc. All rights reserved. 184

75 Session 5 - Facelets and Tag Libraries Bean Values Without h:outputtext You can now use the EL expressions directly in the page, without a tag This is most convenient for outputting expression values without using h:outputtext This form also escapes HTML characters, so it can be used when user input is involved For example, the line at bottom inserts the value of the item's artist property in place of the EL expression The only time you really need h:outputtext, is when you want to do something more complex e.g. set escape="false" or use another feature of the tag The value of the item's artist property is #{item.artist}" Copyright LearningPatterns Inc. All rights reserved. 185

76 Session 5 - Facelets and Tag Libraries h:commandbutton Example <h:commandbutton> creates a button which submits a request, and takes some action Essentially this JSF tag renders as the HTML tag: <input type="x" value="y"> Where x is the type of button: "submit" (default), "reset" etc. And where y is the label on the button The attribute "image" can be used to create an image button The action attribute must specify either: A logical outcome string specifying the next page A managed bean method that returns a logical outcome string <h:form> <h:commandbutton type="submit" value="search" action="#{search.catsearch}" /> </h:form> The above assumes that there is a public String catsearch() method on the "search" managed bean The managed bean method that is invoked will generally do some processing before it returns an outcome It may use the data passed in on the request, as well as business logic, to determine what outcome string to return The outcome string is then used to determine the next page to display to the user Copyright LearningPatterns Inc. All rights reserved. 186

77 Session 5 - Facelets and Tag Libraries Basic Tag Attributes These basic attributes are shared by many JSF tags id: Identifier for a component binding: Reference to component used in a backing bean rendered: A boolean; false suppresses rendering styleclass: Cascading stylesheet (CSS) class name value: A component s value, typically a value binding valuechangelistener: Method binding for value changes converter: Converter class name validator: Class name of validator attached to a component required: If true, requires a value to be entered in the field Not all tags allow all attributes - Look at the TLD docs Note that for each allowed attribute, the UIComponent class will have a get/set method for it - e.g. getrendered() Each tag has a different set of attributes that it can respond to There are many details, and the best place to look at these is in the tlddocs For example, it doesn't make sense to use a validator or a valuechangelistener on an output tag, so these generally don't allow these attributes Additionally, each specific tag may or may not allow a given attribute, depending on its purpose Since the attribute values in the JSP page have to be communicated to the component class specific to a tag, the component class must have get/set methods for each attribute allowed by the tag For example, HtmlInputText must have get/set methods for every attribute allowed for h:inputtext, This is true for the basic attributes described on this page, as well as the HTML attributes described later The id attribute is only required if another component or server-side class has to refer to the component Otherwise, JSF automatically generates an id value for a component Copyright LearningPatterns Inc. All rights reserved. 187

78 Session 5 - Facelets and Tag Libraries Standard HTML Attributes There are generally two kinds of standard HTML attributes HTML 4.0 Attributes like accesskey, title, charset DHTML Events like onclick Many of these are supported, and most of these are passed directly into the generated HTML The TLD docs describe which attributes a tag supports The render kit docs describe if the tag looks at the attribute, or just passes it through to the generated HTML The example below shows the use of HTML 4.0 attributes These are both passed through to the generated HTML <h:inputtext size="20" tile="search Keyword" value="#{search.keyword}" /> The basic concept of how the HTML attributes work is straightforward The details are numerous, and the best place to look for them is with the docs that come with the JSF distribution The TLD docs are under the vdldocs directory, and the render kit docs are under the renderkitdocs directory The UIComponent classes use a lot of inheritance to deal with tag the functionality For example, HtmlInputText is in the hierarchy shown below: java.lang.object +--javax.faces.component.uicomponent +--javax.faces.component.uicomponentbase +--javax.faces.component.uioutput +--javax.faces.component.uiinput +-- javax.faces.component.html.htmlinputtext Copyright LearningPatterns Inc. All rights reserved. 188

79 Session 5 - Facelets and Tag Libraries JSF from above BROWSER JSF Page <f:view> <h:inputtext value= "#{search.keyword}" /> </f:view> Request Response WEB APP SERVER InputTextTag managed bean value="sarah" HtmlInputText keyword= "Sarah" HD faces-config.xml <managed-bean-name> search </managed-bean-name> In the slide, we look at the <h:inputtext> tag This has a tag handler object of type InputTextTag The handler creates a HtmlInputText object (a subclass of UIComponent) when the page is evaluated The tag handlers are implementation specific, and we generally don't need to even look at them - however, it's good to have an idea of how this all works together When the JSF page data is sent to the server, the Tag Handler object(s) work with UIComponent(s) to bind the data to managed bean(s) on the server When the JSF page is being rendered on the browser, it gets data from the managed bean(s) it is bound to via the UIComponent object(s) Copyright LearningPatterns Inc. All rights reserved. 189

80 Lab JSF Search Form/Results Lab JSF Search Form & Search Results Copyright LearningPatterns Inc. All rights reserved. 190

81 Lab JSF Search Form/Results Lab Lab Objectives Lab Overview: In this lab you will learn more about how to configure JSF managed beans You will use a provided utility class (SearchUtility) to retrieve data (a collection of items representing a search result) that the managed bean will store The data will be used in a view to display the search results (just the number of items in the collection to start) Objectives: Be able to write and configure a JSF "managed bean" Be able to write a JSF page that works with a managed bean that stores data and uses that data to render a view Become more familiar with faces-config.xml Builds on previous labs: Lab 4.1 Approximate Time: minutes Copyright LearningPatterns Inc. All rights reserved. 191

82 Lab JSF Search Form/Results The JavaTunes Online Store Lab The Web application we are creating is a small piece of the JavaTunes online music store We'll display a search form in this lab to search the store The search form sends a request that does a search and forwards to a results page that displays the results The results page will allow you to add items to a shopping cart, which are then displayed on a shopping cart display page We'll be working with this online store in the rest of the labs In this lab, we will add functionality to our web app to allow the user to search for music titles by keyword Copyright LearningPatterns Inc. All rights reserved. 192

83 Lab JSF Search Form/Results Complete Web Application Flow Lab User submits the search form User clicks on an Add to Cart link Item is added to shopping cart SearchBean CartBean searchresults.xhtml cartdisplay.xhtml Search results page displayed in browser Lab 5.1 Cart contents page displayed in browser Displays the contents of the shopping cart Copyright LearningPatterns Inc. All rights reserved. 193

84 Lab JSF Search Form/Results Files you will work with Lab Tasks to Perform Copy the files in LabSetup\Lab05.1 into the package com.javatunes.util (see notes for detailed instructions) MusicItem a simple JavaBeans style value class with info about a musical CD-ROM that has title, artist, etc. properties It has the get methods at bottom (set methods not shown) SearchUtility has methods to search the CDs in the catalog See next slide for details // MusicItem getters - Setters not shown public Long getid() public String gettitle() public String getartist() public java.util.date getreleasedate() public BigDecimal getlistprice() public BigDecimal getprice() To paste files directly into the Eclipse project do the following Select them from the setup directory using Windows Explorer, right click and select Copy Go to the Project Explorer view in Eclipse, right click on the package com.javatunes.util, and select Paste Note that if you add files into a project directory using the filesystem then you need to tell Eclipse about it Refreshing the project (by right-clicking on it and selecting Refresh) will tell Eclipse to look at the file system and find any new files You shouldn't need to do that if you follow the directions above Copyright LearningPatterns Inc. All rights reserved. 194

85 Lab JSF Search Form/Results SearchUtility Class Lab com.javatunes.util.searchutility Used by the servlet to perform the query, and includes the following public methods: static Collection<MusicItem> findbykeyword( String keyword) keyword - string within artist and/or title properties to search for returns a collection of MusicItem that match the keyword static Collection<MusicItem> findbykeyword( String keyword, float maxprice) keyword - string within artist and/or title properties to search for maxprice - maximum price to qualify for inclusion in search returns a collection of MusicItem (matches with price<=maxprice) static MusicItem findbyid(long id) id - Item id to search on returns single MusicItem with matching id, or null if not found Copyright LearningPatterns Inc. All rights reserved. 195

86 Lab JSF Search Form/Results Write a Managed Bean class Lab Tasks to Perform We'll need a managed bean to store the keyword entered by the user, and to handle the search functionality Create a managed bean class for this called SearchBean in the package com.javatunes.beans (see notes for creation details) Put it on session scope, with the configuration name of search It should have two properties with getters and setters - A string called keyword, and a List<MusicItem> called searchlist Define a third property searchsize with a getter (no setter) defined as: return getsearchlist()==null? 0 : getsearchlist().size(); Import com.javatunes.util to use the supplied classes Write a method public String catsearch() which will: Use the keyword from the search form and findbykeyword() from SearchUtility to get a Collection<MusicItem> objects as a result Store the results in the searchlist property of the SearchBean * Return a string with a meaningful value for navigation (see notes) Create the class in the same way as you created the LogonBean class earlier Right click on the com.javatunes.beans package in the Java src folder, and select New Class, specify the class name and package, then click Finish Add in the appropriate annotations in the source file A common navigation return values is "success" - Be consistent between this & the navigation rules searchsize shouldn't have a setter - It is a calculated property based on searchlist In catsearch(), you can do a search as follows String keyword = // TODO - where is the keyword stored in SearchBean List<MusicItem> results = (List<MusicItem>) SearchUtility.findByKeyword(keyword); // TODO - Set the searchlist property to results // TODO return a proper navigation string SearchBean contains a List, and not a Collection, because some JSF tags require a List For example, h:datatable, which we use later, requires a list since it allows indexing, which is very efficient for a list, but would be very inefficient of something like a set We know that SearchUtility returns a list, so you can just do a cast otherwise we'd need to convert somehow, for example by creating a list and copying in the results Copyright LearningPatterns Inc. All rights reserved. 196

87 Lab JSF Search Form/Results Creating the JSP views Lab Tasks to Perform Create two more JSF pages to implement the search functionality (in the pages folder): searchform.xhtml searchresults.xhtml Create these using the wizards, and declare them as JSF pages using facelets as before searchform.xhtml should hold a JSF form that has one input field to input a search keyword (see next slide) searchresults.xhtml will eventually hold a list of search results For now, it will be simpler Later we will make a full blown table with detailed results Copyright LearningPatterns Inc. All rights reserved. 197

88 Lab JSF Search Form/Results Creating the JSP views Lab Tasks to Perform Do the following in searchform.xhtml Add an h:form element as in previous forms Use the h:inputtext tag to provide a text field that will hold the keyword value of what you are searching for in the JavaTunes Catalogue Use two tag attributes for the h:inputtext size=" " where you should specify the length of the field value=" " where you should specify a value binding expression for the property you want to bind to You want the keyword property in the search bean - what is the value binding expression for this? Copyright LearningPatterns Inc. All rights reserved. 198

89 Lab JSF Search Form/Results Creating JSF Pages continued Lab Tasks to Perform Also in searchform.xhtml, use h:commandbutton to submit the form and invoke the method which will perform a JavaTunes Catalogue Search Use two tag attributes: value=" " where you specify the text that will appear on the button action=" " where you specify a method binding expression for the method to be invoked - What would that be for the search bean's catsearch() method? In searchresults.xhtml we also work with the search bean, except now we pull data out of the bean and display it Display the search bean's searchsize property (containing the number of items the search returned) Use the EL without using h:outputtext We'll display the actual search results in a later lab Copyright LearningPatterns Inc. All rights reserved. 199

90 Lab JSF Search Form/Results Use the JSF navigation-rule mechanism Lab Tasks to Perform Add an additional <navigation-rule> element* to faces-config.xml: The view you are coming from is /pages/searchform.xhtml On the "success" outcome, you should go to the view /pages/searchresult.xhtml Publish/restart, then browse to pages/searchform.faces Enter something to search on (try "a" or "Annie") and submit * Remember, that the navigation rule contains the following elements: <navigation-rule> <from-view-id> TO DO </from-view-id> <navigation-case> <from-outcome> TO DO </from-outcome> <to-view-id> TO DO </to-view-id> </navigation-case> </navigation-rule> Where <from-view-id> means the page from which you invoke a managed bean Where <from-outcome> means the java.lang.string that is returned by the managed bean method invoked Where <to-view-id> means the page to which you want the FacesServlet to pass control (you can think of it as a call to the javax.servlet.requestdispatcher forward() method) Copyright LearningPatterns Inc. All rights reserved. 200

91 Lab JSF Search Form/Results Search Results Example Lab [Optional] Tasks to Perform Modify the <navigation-rule> for the logon form so the "success" result goes to the search form Now, when we log in, we should end up at the search form Run the application again, and test all the pages out You should start at the login form, login, go to the search form, do a search, and eventually wind up at the search results page In future Lab Exercises we will properly format the returned java.util.list of MusicItem JavaBeans that correspond to the search term known as the "keyword" in our SearchBean. For now, we are simply display the number of items in the Collection to make sure we have a result. Copyright LearningPatterns Inc. All rights reserved. 201

92 Lab JSF Search Form/Results Results: Logon then Search Lab The logon form followed by a search form with a keyword entered Notice that when you click the "Search" button in searchform.xhtml that while the navigation-rule does a forward to the searchresults.xhtml the URL remains the same in the browser window Copyright LearningPatterns Inc. All rights reserved. 202