Web JSF Overview – Internet “101” for EGL/JSF Developers

®

IBM Software Group

© 2006 IBM Corporation

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.

2Last update: 12/04/2007

Course

Course Setup Web/JSF OverviewWeb/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

Units:

JSF/EGL Web Page and Site Design JSF/EGL Web Page and Site Design and Developmentand Development


Unit ObjectivesUnit 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


Topic ObjectivesTopic Objectives

Sub-topics for this section: Internet “101”Internet “101”

Lifecycle of a request and responseLifecycle of a request and response URL/URIURL/URI Browser technologyBrowser technology .CSS.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


The Internet 101 – Terms and ConceptsThe Internet 101 – Terms and Concepts

Request/Response LifecycleRequest/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


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://http://” tells the web browser to make a request on port 80 of type HTTP. “wwwwww” 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.comibm.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:9081Localhost:9081 = “this computer” listen on part 9081 (defined for WebSphere)

• /EGLweb//EGLweb/ = “the root directory of the application”

• /updatecustomer.faces//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=3cid=3 = “pass this JavaBean a request parameter named=cid, assign it the value=3”


BrowserBrowser

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


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


Cascading Style Sheet (.CSS file)Cascading Style Sheet (.CSS file)

Found under \WebContent\theme\Found under \WebContent\theme\

Style ClassesStyle Classes

Style Class previewStyle Class preview


Customize your .CSS FileCustomize your .CSS File

Open stylesheet.css Find the outputText class. Copy/paste it and change its name to: .outputTextBoldoutputTextBold Using Content Assist add the attributes shown within the class Save your changes: Ctrl/S Close the .CSS file – from the Content Area


Use your new .CSS entry in a pageUse 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


Optional .CSS Workshop One – Justifying Column Headers In a dataTableOptional .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.cssScroll 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)


Optional .CSS Workshop Two – Customizing a Submit Button with a GraphicOptional .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;}

.commandExButtonGraphic { background: url("../images/Login.JPG"); font-weight: bold; color: #445544;}

.CSS Entry.CSS Entry


Optional (advanced) .CSS Topic – Dynamic .CSS File ManagementOptional (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):

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

<%<%if ((session.getAttribute("cssFolder") == null ))if ((session.getAttribute("cssFolder") == null )) {{

session.setAttribute("cssFolder","default");session.setAttribute("cssFolder","default");}}%> %> <link rel="stylesheet" type="text/css" href='<%= session.getAttribute("cssFolder") + "/theme/stylesheet.css" %>'<link rel="stylesheet" type="text/css" href='<%= session.getAttribute("cssFolder") + "/theme/stylesheet.css" %>'

title="Style">title="Style">

Web JSF Overview – Internet “101” for EGL/JSF Developers

Documents

Transcript of Web JSF Overview – Internet “101” for EGL/JSF Developers