Transcript JSFIntro

95-733 Internet Technologies
Java Server Faces
Model/View/Controller Design
Pattern for Web Development
Slides adapted from “Core JavaServer Faces” by Geary and Horstmann,
the J2EE Tutorial from Sun Microsystems, and “Developing a Visual
Web JSF Application” from NetBeans.org.
95-733 Internet Technologies
Master of Information System
Management
1
Three Main Parts to JSF
Framework
• A Collection of GUI components for
drag and drop web site
development
• An event driven programming
model
• A component model supporting
third party component
development
95-733 Internet Technologies
Master of Information System
Management
2
Detailed Features of JSF
•
•
•
•
•
•
•
•
•
Bean management
Validation model
Component library that permits extensions
Flexible rendering (not necessarily XHTML)
Configurable navigation
State management
Conversion Model
Relies on JSP and Servlet technology
Think “GUI Building” for the web
95-733 Internet Technologies
Master of Information System
Management
3
JSF Fundamentals
• Tags correspond to components in
a component tree
• A request normally goes through
several stages of processing on the
server
• A built-in FacesServlet handles
request processing and the JSF life
cycle
95-733 Internet Technologies
Master of Information System
Management
4
JSF Life Cycle Overview (From
the J2EE Tutorial)
95-733 Internet Technologies
Master of Information System
Management
5
Restore an old or construct a new component
page (or view)
95-733 Internet Technologies
Master of Information System
Management
6
An old view (component tree) has been retrieved so allow
each component in the view to inspect data values. These values will
be redisplayed if validation or conversion errors are found.
Adds events to an event queue.
95-733 Internet Technologies
Master of Information System
Management
7
The submitted values are stored as “local values”.
If the data is invalid or conversions are not possible
then Render Response is called directly and the
user sees the bad data.
95-733 Internet Technologies
Master of Information System
Management
8
Local values
are OK and
are used to
update the
beans.
95-733 Internet Technologies
Master of Information System
Management
9
The action method associated with the button or
link that caused the form to be submitted is
executed. The method returns a string for the
navigation handler. The navigation handler uses
95-733 Internet Technologies
the string to determine the next page.
10
Master of Information System
Management
The selected page is rendered into a markup language.
95-733 Internet Technologies
Master of Information System
Management
11
Development Steps
• Build Model from Java Beans
- Lifetime Configured by developer
and managed by JSF
- Request, Session, or Application
Scope
- Setters and getters accessed through
JSF pages
• Use UI Components to build JSF pages
- Include JSF Tags, Validation and
Event Listeners
• Define Page Navigation rules in faces.config.xml
95-733 Internet Technologies
Master of Information System
Management
12
NetBeans JSF
Demonstration(0)
The example is from:
http://testwww.netbeans.org/kb/docs/web/helloweb.html#01
Goal: Display a form on the browser. When submitted, the web
server will call our application. The application will execute
code in a java bean associated with the page. The bean will
update page elements. JSF will render the same page with
the changed data and send the page back to the web browser.
95-733 Internet Technologies
Master of Information System
Management
13
Netbeans JSF
Demonstration(1)
By adding a binding
attribute we add
setters and getters
to a component.
1. File>New Project
2. Java Web Application
3. Name the project HelloWeb
4. Visual Web Java Server Faces
5. In properties for page1, enter a page title
6. Navigator>Page1>page1 Right Click Add Binding Attribute
7. Expand Woodstock Basic section of palette
8. Drag a label to page enter “Name:” return
9. Drag a text field to page enter “Enter your name” enter
10. In properties of text field, change textField1 to nameField
11. Right Click text field Add Binding Attribute
12. In properties of label component, enter nameField as for property
13. Drag a button to the page, type “Say hello” and enter.
14. Right click button and choose Add Binding Component.
15. In button properties, change id from button1 to helloButton
16. Drag static text component to the page.
95-733 Internet Technologies
17. In properties
static text field, change id to helloText
14
Master of Information System
18. Right Click static
text
and
Add
Binding
Attribute
Management
Netbeans JSF
Demonstration(2)
19.
20.
21.
22.
Drag a Message Group to the page. Good for error reporting.
Double Click the button component.
The Java bean for page1 is visible.
Replace body of helloButton_action with :
public String helloButton_action() {
String name = (String)nameField.getText();
helloText.setText("Hello, " + name + "!");
return null;
}
23. Click Run Main Project.
95-733 Internet Technologies
Master of Information System
Management
15