Now I Remember! Hello Worldwide Web: There are three things Your First JSF in I always forget. JDeveloper Names, faces, and— the third I can’t remember. Peter Koletzke Technical Director & Principal Instructor —Italo Svevo (1861–1928) 2 Survey Agenda • Job responsibilities? – DBA, developer • What is JSF? • Languages? Note: Examples use JDeveloper 11g and –PL/SQL • Related files ADF Faces. – Java – JSF –C++ • Accessing the database – Other Warning: This material contains • Tools? more depth than you need to – Developer Forms/Reports create apps in JDev 11g. – JDeveloper Slides will be on the NYOUG website soon. Look in the tech – Other journal for the white paper 3 4 JSF Application JSF Code • JavaServer Faces technology • Usually used for a web-based application • Relatively new technology – Technically can be any client – PDA, cell phone – Ratified JCP in 5/2004 • XML-like (or just plain old XML) – Part of Java EE (v.5) – Start and end tag required – Offers reference implementation – code library – Elements, commonly called “components” • Effort to simplify JSP development – Attributes – Component-ize it • High-level components provide much functionality • Its components represent JSP action tags – Integrate the controller – Requires a prefix and tag library definition (.tld file) • No Struts needed to back it – Write less HTML (than JSP) – Tag library definition points to the Java class that • Component handles HTML writing implements the tag • JSF is often run in a JSP file • Following example mixes standard JSF – XML-like tags: elements and attributes with ADF Faces Rich Client 5 6 JSF Code Snippet <af:form id="loginForm" The Result binding="#{backing_login.loginForm}"> <af:panelHeader text="Enter Login Information" <af:panelHeader> binding="#{backing_login.ph1}" id="ph1"> <af:panelFormLayout binding="#{backing_login.pfl1}" <af:inputText> id="pfl1"> <f:facet name="footer"> <af:outputText value="* indicates a required field" binding="#{backing_login.ot1}" id="ot1"/> </f:facet> ... <af:panelFormLayout> <af:inputText binding="#{backing_login.usernameField}" id="usernameField" required="true" maximumLength="20" columns="15" requiredMessageDetail="is required" labelAndAccessKey="&Username" shortDesc="Your name"/> ... <af:outputText> <af:commandButton> <af:commandButton binding="#{backing_login.loginButton}" in a footer facet id="loginButton" textAndAccessKey="&Login" action="#{backing_login.loginButton_action}"/> 7 Demo 1 8 JSF Communication Process The Steps Web Server 1. The browser issues an HTTP request to the web server. Which 2. The web server determines the application and passes Web Browser application? 1 the request to the web container (WLS or OC4J) TP HT st que 2 3 3. The web server reads web.xml to determine that this is a login Re JSF JSP. 4. The JSP is translated to a servlet and compiled (the first Web Container time it is run) 5. The web server passes the request to the Faces Servlet. login.jsp web.xml The Faces Servlet instantiates a life cycle class, which 7 JSP 4 processes the JSP JSF. HTTP translation re & compilation spo *** 6. The servlet accesses any necessary Model layer code to nse login.class 6 obtain values from the data source (such as a database). Database 7. The Faces Servlet then assembles the page and sends Faces 5 Note: JSP translation and it using an HTTP response to the browser. compilation is a one-time process Servlet 9 10 ADF Faces JSF Features • Oracle JSF component libraries • Rich component set – Released to MyFaces open source project in Jan. 2006 – Core library – for application tasks • Trinidad project at myfaces.apache.org – HTML library – for HTML tags, forms – Available in JDeveloper 10.1.3 as ADF Faces – JSP tag library included – In JDeveloper 11g as ADF Faces Rich Client • Can be implemented in other languages • Implements components available in UIX – Include data binding properties – Uses JSF mechanisms – Adds even more functionality to JSF • Embedded controller – Over 150 components, For example, selectOrderShuttle: – Previously, no standard controller for JSPs – Struts was/is a popular controller framework • Event-driven – Events on the component level – Like Forms triggers 11 12 Agenda JSF Files Request • What is JSF? Web Tier Container Faces Servlet Other Model Code Life Cycle Backing bean Database • Related files 1 2 3 Response 6 5 4 • Accessing the database login.jsp login.class faces-config.xml Message bundle HTML Render Kit Not to scale web.xml 13 14 The Files web.xml • web.xml – used to start FacesServlet, which • web.xml –web module deployment instantiates and runs the life cycle class • faces-config.xml – the controller file used to descriptor manage page flow – Contains an entry such as this: • Backing bean – code for the components on the <welcome-file-list> page <welcome-file>forum_query.jsp</welcome-file> • Message bundle – supplies text for the JSP </welcome-file-list> • login.jsp – JSF (JSP) source code that is • Contains the URL pattern used to compiled into login.class • Model layer code – used to obtain values from determine which servlet will take control the data source (such as a database). • Contains the servlet name and • HTML render kit – converts components in memory to HTML tags class file name Demo 2 15 16 web.xml Snippet faces-config.xml <servlet> <servlet-name>Faces Servlet</servlet-name> • Standard Java EE file <servlet-class>javax.faces.webapp.FacesServlet </servlet-class> – The “application configuration resource file” <load-on-startup>1</load-on-startup> – Located in the WEB-INF directory </servlet> <servlet-mapping> • The JSF file that defines controller <servlet-name>Faces Servlet</servlet-name> actions <url-pattern>/faces/*</url-pattern> – Navigation rules </servlet-mapping> • Define the “from” page for a page flow <servlet-mapping> <servlet-name>resources</servlet-name> – Navigation cases <url-pattern>/adf/*</url-pattern> • Define the “to” page for a page flow </servlet-mapping> – Managed bean definitions <servlet-mapping> <servlet-name>resources</servlet-name> – Render kits <url-pattern>/afr/*</url-pattern> – Converters and validators </servlet-mapping> 17 18 Code View of Navigation Rules Navigation Case Outcome </faces-config> • In addition to the “to” page, a navigation <navigation-rule> <from-view-id>/login.jsp</from-view-id> case is assigned an outcome <navigation-case> <navigation-case> <from-outcome>login</from-outcome> <from-outcome>gohome</from-outcome> <to-view-id>/home.jsp</to-view-id> <to-view-id>/home.jsp</to-view-id> </navigation-case> </navigation-case> </navigation-rule> <navigation-rule> • Navigation <from-view-id>/home.jsp</from-view-id> <navigation-case> occurs when <from-outcome>logout</from-outcome> <to-view-id>/login.jsp</to-view-id> action property of </navigation-case> </navigation-rule> a button </faces-config> is set to the outcome name 19 20 Editing faces-config.xml Editing in the Overview Tab • JSF Navigation Diagram – Look under WEB-INF – Double click the faces-config.xml file in the navigator – Use drag and drop to add elements 21 22 Editing in the Structure Window Backing Beans • Backing bean: a Java class file used for code pertaining to a specific page – For example, login.jsp would use a Login.java backing bean • Contain accessors for components on the page and other code for just that page • Optional file: only create it if you need to change the logic • These are registered in faces-config.xml: <managed-bean> <managed-bean-name>backing_login</managed-bean-name> • Use the right-click menu to edit <managed-bean-class>login.view.backing.Login</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> nodes <!--oracle-jdev-comment:managed-bean-jsp-link:1login.jsp--> • Drag and drop to reposition code </managed-bean> Comment line declares that JDeveloper will create • OR use the code editor accessors when you add a component to the JSF page. 23 24 Creating Backing Bean Contents the Bean • Variables for each component • Create a Java class • Setters and Getters for each component from the New Gallery • If JDeveloper created the backing bean – Enter it in faces-config it will maintain it manually – Uses the comment line shown earlier in the • OR from the faces-config.xml file Create JSF Page – Adding a component adds the variable dialog and accessors for that component – Specify the name in – Deleting a component removes them faces-config and the – Renaming a component renames class file name them 25 26 Alternative for Creating the Managed Beans or Backing Beans? Backing Bean • Double click an action component •A bean (JavaBean) is a Java class file (button or link) with a standard set of methods – These dialogs will set up the Java class and register it in faces-config • Managed bean is a Java class file used to handle operations and data for a resource – such as a JSF page • Backing bean is a managed bean that supports a specific page • The terms “managed bean” and “backing bean” are sometimes used interchangeably 27 28 Backing Bean Snippet About Scope package login.view.backing; • Values in a bean or a FacesContext variable are import java.util.ResourceBundle; cleared out of memory at certain times import javax.faces.application.FacesMessage; import javax.faces.application.FacesMessage; • You can declare a scope for these objects: import javax.faces.context.FacesContext; – request: for the HTTP request/response // more imports – session: for the user’s session with the app server public class Login (until they log out or time out) { private RichForm loginForm; – application: across