Web JSF Overview – Internet “101”
Download
Report
Transcript Web JSF Overview – Internet “101”
®
IBM Software Group
Web JSF Overview – Internet “101” for EGL/JSF Developers
This unit introduces you to the technical concepts of the Internet, for the JSF and EGL
web application development you’ll be learning how to do in these tutorials.
© 2006 IBM Corporation
Course
JSF/EGL Web Page and Site Design
and Development
Units:
Course Setup
Web/JSF Overview
JSF Properties Deep Dive
Essential JSF Components
Additional JSF Components
JSF dataTables
Page Flow and State Management
AJAX Controls and JavaScript
JSF Component Tree and Dynamic Property Setting
Web-Site Design and Template Pages
Appendices
Internationalization
Page Design Best Practices
Additional Use Cases
Last update: 12/04/2007
2
Unit Objectives
At the end of this unit, you will be able to:
Define and describe the following elements of Web Programming:
EGL and Web Pages- Architectural view
Terms and concepts in Internet such as URL, HTML, .CSS
Last update: 12/04/2007
3
Topic Objectives
Sub-topics for this section:
Internet “101”
Lifecycle of a request and response
URL/URI
Browser technology
.CSS
Dynamic Content Web Pages
Terms and concepts
JSPs and Servlets
JSF
– Terms and concepts
– Lifecycle
EGL and JSF
Faces-config.xml
RBD JSF/Web/EGL Tooling
Template pages
Customizing the palette
Last update: 12/04/2007
4
The Internet 101 – Terms and Concepts
Request/Response Lifecycle:
Uniform Resource Locator
Connect to a TCP/IP network:
Through your ISP - internet
Through an intranet/extranet
Enter a logical URL/URI address –
press “GO” in the browser to make
a request:
www.amazon.com
A global-database receives the
request
And resolves the logical address
into a physical address of a server
that can respond to the request by
either:
Serving a page
Passing the request to an application
that can respond (dynamic data
content web application)
If a dynamic content application,
your EGL JSFHandler eventually
gets control of the request (through
a JSF framework), and processes it
And returns data (bound to JSF
components) which end up
processed by the JSF framework
(Java) classes – which emits HTML
and sends a response (reply) back
to the user’s PC
Last update: 12/04/2007
5
What’s in a URL (Uniform Resource Locator)
Uniform Resource Locator (URL) is a technical, internet-term used as a synonym for Uniform
Resource Identifier (URI) – which is used by your browser to access and retrieve:
Documents, Pages, Graphics
…from a unique address of a network-based application or web server connected to the internet
Here is a sample URI dissected:
http://www.ibm.com
“http://” tells the web browser to make a request on port 80 of type HTTP.
“www” tells the browser to connect to a DNS (Domain Name Server) on the world wide web.
Once connected to the DNS server, the hypertext, or “ibm.com” is resolved to an IP address. This
IP address is returned to the client browser which then makes a direct connection to the web server.
Here is a more interesting URI:
http://localhost:9081/EGLWeb/updatecustomer2.faces?cid=3
• Localhost:9081 = “this computer” listen on part 9081 (defined for WebSphere)
• /EGLweb/ = “the root directory of the application”
• /updatecustomer.faces/ = “launch the JavaBean associated with the managed-bean
“updatecustomer2” defined in faces-config” (note the .faces tells the web server to do this)
• cid=3
Last update: 12/04/2007
= “pass this JavaBean a request parameter named=cid, assign it the value=3”
6
Browser
The browser (Internet Explorer,
Firefox, Netscape, Mozilla, etc.).
Browser software:
Understands and can render
HTML on the user’s PC
Understands and can execute
JavaScript – on the user’s
machine (called “client/side”
processing)
Understands and can execute
AJAX commands on the
user’s machine
More on AJAX coming up
later in this course
Last update: 12/04/2007
7
The Importance of Testing Your Pages Using Different Browsers
Very important! Note the screen captures below. The page on the left was rendered
in IE 6. The exact same page on the right, rendered using Mozilla’s Firefox.
In this case, the differences are cosmetic. However, there are documented
operational differences between these two common browsers (obviously a concern!)
IE6 and IE7 FireFox
Last update: 12/04/2007
8
Cascading Style Sheet (.CSS file)
Style Class preview
Style Classes
Found under \WebContent\theme\
Last update: 12/04/2007
9
Customize your .CSS File
Open stylesheet.css
Find the outputText class.
Copy/paste it and change its name to: .outputTextBold
Using Content Assist add the attributes shown within the class
Save your changes: Ctrl/S
Close the .CSS file – from the Content Area
Last update: 12/04/2007
10
Use your new .CSS entry in a page
From Page Designer, open allcustomers.jsp
Select each of the column headers and change its Properties/Classes entry to: outputTextBold
Run allcustomers.jsp on Server – and note the bold headings for the columns.
i.e. Select allcustomers.jsp, Run As -> Run on Server
Last update: 12/04/2007
11
Optional .CSS Workshop One – Justifying Column Headers In a dataTable
You’ve noticed that the dataTable column headers are currently center-aligned. What if you
wished to left-or right-justify them? No problem-O. From \WebContent\theme\
Open stylesheet.css
Scroll to find: .headerClass {
Add to the following new attribute:
text-align: left;
Run allcustomers.jsp on Server
and note the column heading justification
(We’ve abbreviated FName/LName
in order to show the feature)
Last update: 12/04/2007
12
Optional .CSS Workshop Two – Customizing a Submit Button with a Graphic
You may wish to use images for Submit Buttons. On the updatecustomer.jsp, You can do this in two ways:
1. For complete image/button substitution, simply select the button, and from Properties, specify images:
2. For background image substitution, from the .CSS file,
Add a new entry with background-image as a URL
And note that you may want to change the font and color
.commandExButtonGraphic {
background: url("../images/Login.JPG");
font-weight: bold;
color: #445544;
}
.CSS Entry
Last update: 12/04/2007
13
Optional (advanced) .CSS Topic – Dynamic .CSS File Management
You may have a scenario where you need to supply an entirely different .CSS file, based on each
individual user’s login preferences (say, if these preferences were stored in the database, each user needs
their own .CSS file). One way of solving this requirement is as follows (also, reads the Notes***)
1. Inside of your application’s .JTPL/.HTPL (template pages), add the following JSP expression (scriptlet):
<%
if ((session.getAttribute("cssFolder") == null ))
{
session.setAttribute("cssFolder","default");
}
%>
<link rel="stylesheet" type="text/css" href='<%= session.getAttribute("cssFolder") + "/theme/stylesheet.css" %>'
title="Style">
Note that you can put this text near the
top of the file, in Source edit mode
2. In your Login page (.egl), set the “cssFolder” session attribute to the name of a folder that exists under
\WebContent\ which contains the customized artifacts (in our case a \theme\ sub-folder, and stylesheet.css
file
Last update: 12/04/2007
14