420 likes | 651 Views
JDeveloper 10g and JavaServer Faces: High-Performance UIs on the Web. Avrom Roy-Faderman Senior Programmer May, 2006. Agenda. A Brief History of Java Web Apps JavaServer Faces ADF Faces Q&A. A Brief History of Java Web Apps. Productivity and Maintainability Capabilities and Performance.
E N D
JDeveloper 10g andJavaServer Faces:High-Performance UIs on the Web Avrom Roy-Faderman Senior Programmer May, 2006
Agenda • A Brief History of Java Web Apps • JavaServer Faces • ADF Faces • Q&A
A Brief History of Java Web Apps • Productivity and Maintainability • Capabilities and Performance
Servlets • Java classes executed on the server in response to HTTP requests • Originally used to output HTML • This use required extensive and awkward Java coding
JSP Model 1 • Files closely resembling HTML except for: • Some specialized tags • “Scriptlets” – embedded bits of Java code • Compiled into Servlets • HTML portions outputted directly into generated HTML • Specialized tags run bits of Java • Scriptlets run directly
Problems with JSP Model 1 • Hard to Change Page Flow • Mix of Java (sometimes extensive Java) and Tags on Same Page
Model 2 Architectures • Separate out “View” and “Controller” • View renders UI • Controller handles page flow and responds to user requests • No hardcoded links in view • Generally no procedural code in view
A Brief History of Java Web Apps • Productivity and Maintainability • Capabilities and Performance
“Thick Client” vs. Web: The Past • Requires customized client • Large downloads • High-interactivity • High-performance • Runs in unmodified web browser • Small downloads • Low-interactivity • Low-performance Server Server
“Web 2.0” • Still run in unmodified browser • Relatively small download size • Much more interactive than traditional web apps • Much higher-performance than traditional web apps
Agenda • A Brief History of Java Web Apps • JavaServer Faces • ADF Faces • Q&A
JavaServer Faces • The J2EE standard Model 2 Web Applicaton Architecture • Special tag libraries for JSPs/JSPX documents • Html • Core • Separate controller
JavaServer Faces • JSF JSP and Components • Page Flow • Managed Beans
Simple JSF JSP Code • <body> • <h:form> • <h:selectOneMenu id="color" • required="true"> • <f:selectItem itemLabel="Red" • itemValue="red" /> • <f:selectItem itemLabel="Green" • itemValue="green" /> • </h:selectOneMenu> • </h:form> • </body>
JavaServer Faces • JSF JSP and Components • Page Flow • Managed Beans
The JSF Controller: Page Flow • All page flow information mainained in faces-config.xml • JDeveloper has graphical representations of page flow
JSF Navigation Cases • Navigation cases referenced in JSF JSP/JSPX pages • Converted into destination by controller • <h:commandLink action="goHome">Go home! • </h:commandLink>
JavaServer Faces • JSF JSP and Components • Page Flow • Managed Beans
Managed Beans • The JSF Controller can be configured to automatically create and manage Java objects • Controller or view can access “managed properties” on these objects • Scoping: • Application • Session • Request
Accessing Managed Properties: JSP • “JSP Expression Language” • Syntax: #{beanName.propertyName} • Can even have nested properties: #{beanName.property1.property2} • Use these expressions as attributes for tags <h:outputText value="#{homeBean.mainLabel} />
Managed Bean Classes • Each managed bean has a class that you can edit • Constructor runs at the beginning of the application/request/session • Methods that allow you to access managed properties • Put complex logic in here instead of putting it in the view
Managed Bean Example <h:outputText value="#{homeBean.mainLabel} /> public class NavigationBean { public NavigationBean() { if /* some condition */ { setMainLabel("Red"); } else { setMainLabel("Green"); } } /* … */}
Conditional Page Flow • Instead of referring to a JSF navigation case, refer to a function that *returns* one. • <h:commandLink action="#{homeBean.nextAction}">Go on! • </h:commandLink> public String nextAction() { if /* some condition */ { return("goStatus"); } else { return("goOrder"); } }
Agenda • A Brief History of Java Web Apps • JavaServer Faces • ADF Faces • Q&A
ADF Faces • Oracle ADF • The ADF Binding Filter • Partial Page Refresh
ADF and MVC • Oracle ADF is a framework based on MVC architecture View and Controller (Desktop Clients) View (Web and Wireless Clients) Controller (Web and Wireless Clients) Model Business Services
ADF and MVC • Oracle ADF is a framework based on MVC architecture ADF Swing ADF Faces Components ADF Binding Filter ADF Data Bindings ADF Business Components
ADF Faces • Oracle ADF • The ADF Binding Filter • Partial Page Refresh
ADF Binding Filter • Runs with each HTTP request • Sets up a Struts managed bean, “bindings”, containing all ADF data bindings <af:inputText value="#{bindings.EmpName.inputValue} /> ADF Data Bindings Database Business Service
ADF Faces • Oracle ADF • The ADF Binding Filter • Partial Page Refresh
Component Trees • You can think of a JSP/JSPX document as being a tree of components • <afh:body> • <af:form> • <af:selectOneMenu id="color" • required="true"> • <af:selectItem itemLabel="Red" • itemValue="red" /> • <af:selectItem itemLabel="Green" • itemValue="green" /> • </af:selectOneMenu> • </af:form> • </afh:body>
Partial Page Refresh • Use Javascript to submit a form at times other than when a user presses a button or link • On server, re-render only a portion of component tree • Download only the appropriate fragment of HTML
ADF Faces and PPR • Many components always use PPR • Table sorting • Table pagination • Expandable tables and menus • … • Almost all components can use PPR • Requires some manual work
Simple PPR Example • <af:inputText id="myTextField" autoSubmit="true" partialSubmit="true" /> • ... • <af:outputText id="myTextOutput" value="#{homeBean.calculatedVal}" partialTriggers="myTextField" />
A Few Words about AJAX • Asynchronous • Javascript • And • XML • PPR is an important part of “Web 2.0” • But PPR, by itself, isn’t truly asynchronous • ADF Faces (and regular JSF) “supports” full AJAX, but really only in that it supports Javascript