jdeveloper 10g and javaserver faces: high-performance uis on the web avrom roy-faderman senior...
TRANSCRIPT
JDeveloper 10g andJavaServer Faces:
High-Performance UIs on the Web
Avrom Roy-FadermanSenior Programmer
May, 2006
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
“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
ServerServer
“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
JavaServer Faces
• The J2EE standard Model 2 Web Applicaton Architecture
• Special tag libraries for JSPs/JSPX documents Html Core
• Separate controller
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>
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>
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"); }}
ADF and MVC
Business Services
View (Web and Wireless Clients)
View and Controller (Desktop Clients)
Model
Controller (Web and Wireless Clients)
• Oracle ADF is a framework based on MVC architecture
ADF and MVC
ADF Business Components
ADF Faces Components
ADF Swing
ADF Data Bindings
ADF Binding Filter
• Oracle ADF is a framework based on MVC architecture
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} />
Database
ADF Data Bindings
Business Service
Traditional “Web 1.0 Cycle”
Requestsubmittedto server
Pagedownloaded
to user
User fillsout form
Serverrenders
page
User clicksbutton or link
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
Web Cycle with PPR
Requestsubmittedto server
Componentsdownloaded
to user
Usermanipulatescomponent
Serverrenders
components
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
AsynchronousJavascriptAndXML• 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