- Client Considerations
- General Design Issues and Guidelines
- Design Issues and Guidelines for Browser Clients
- Design Issues and Guidelines for Java Clients
- Summary
- References and Resources
This chapter is from the book
This chapter is from the book
This chapter is from the book
3.3 Design Issues and Guidelines for Browser Clients
Browsers are the thinnest of clients; they display data to their users and rely on servers for application functionality.
From a deployment perspective, browser clients are attractive for a couple of reasons. First, they require minimal updating. When an application changes, server-side code has to change, but browsers are almost always unaffected. Second, they are ubiquitous. Almost every computer has a Web browser and many mobile devices have a microbrowser.
This section documents the issues behind designing and implementing browser clients.
3.3.1 Presenting the User Interface
Browser clients download documents from a server. These documents contain data as well as instructions for presenting that data. The documents are usually dynamically generated by JSP pages (and less often by Java servlets) and written in a presentational markup language such as Hypertext Markup Language (HTML). A presentational markup language allows a single document to have a reasonable presentation regardless of the browser that presents it. These screenshots in Figure 3.1 show the Java Pet Store sample application running in two different browsers.
)
Figure 3.1 Java Pet Store Sample Application Shopping Client Rendered by Two Different Browsers
There are other alternatives to HTML, particularly for mobile devices, whose presentation capabilities tend to differ from those of a traditional desktop computer. Examples include Wireless Markup Language (WML), Compact HTML (CHTML), Extensible HTML (XHTML) Basic, and Voice Markup Language (VoiceML).
Browsers have a couple of strengths that make them viable enterprise application clients. First, they offer a familiar environment. Browsers are widely deployed and used, and the interactions they offer are fairly standard. This makes browsers popular, particularly with novice users. Second, browser clients can be easy to implement. The markup languages that browsers use provide high-level abstractions for how data is presented, leaving the mechanics of presentation and event-handling to the browser.
The trade-off of using a simple markup language, however, is that markup languages allow only limited interactivity. For example, HTML's tags permit presentations and interactions that make sense only for hyperlinked documents. You can enhance HTML documents slightly using technologies such as JavaScript in combination with other standards, such as Cascading Style Sheets (CSS) and the Document Object Model (DOM). However, support for these documents, also known as Dynamic HTML (DHTML) documents, is inconsistent across browsers, so creating a portable DHTML-based client is difficult.
Another, more significant cost of using browser clients is potentially low responsiveness. The client depends on the server for presentation logic, so it must connect to the server whenever its interface changes. Consequently, browser clients make many connections to the server, which is a problem when latency is high. Furthermore, because the responses to a browser intermingle presentation logic with data, they can be large, consuming substantial bandwidth.
3.3.2 Validating User Inputs
Consider an HTML form for completing an order, which includes fields for credit card information. A browser cannot single-handedly validate this information, but it can certainly apply some simple heuristics to determine whether the information is invalid. For example, it can check that the cardholder name is not null, or that the credit card number has the right number of digits. When the browser solves these obvious problems, it can pass the information to the server. The server can deal with more esoteric tasks, such as checking that the credit card number really belongs to the given cardholder or that the cardholder has enough credit.
When using an HTML browser client, you can use the JavaScript scripting language, whose syntax is close to that of the Java programming language. Be aware that JavaScript implementations vary slightly from browser to browser; to accommodate multiple types of browsers, use a subset of JavaScript that you know will work across these browsers. (For more information, see the ECMA-Script Language Specification.) It may help to use JSP custom tags that autogenerate simple JavaScript that is known to be portable.
Code Example 3.1 shows how to validate a Web form using Java-Script's DOM hooks to access the form's elements. For example, suppose you have a form for creating an account. When the user submits the form, it can call a JavaScript function to validate the form.
Code Example 3.1 HTML Form Calling a JavaScriptValidation Function
<form name="account_form" method="POST" action="http://acme.sun.com/create_account" onSubmit="return checkFamilyName();"> <p>Family name: <input type="text" name="family_name"></p> <!- ... --> <p><input type="submit" value="Send it!" /></p> </form>
Code Example 3.2 shows how the JavaScript validation function might be implemented.
Code Example 3.2 JavaScript Validation Function Using DOM Hooks
<script language="JavaScript">
<!--
function checkFamilyName() {
var familyName =
window.document.account_form.family_name.value;
if (familyName == "") {
alert("You didn't enter a family name.");
return false;
}
else {
return true;
}
}
-->
</script>
Validating user inputs with a browser does not necessarily improve the responsiveness of the interface. Although the validation code allows the client to instantly report any errors it detects, the client consumes more bandwidth because it must download the code in addition to an HTML form. For a non-trivial form, the amount of validation code downloaded can be significant. To reduce download time, you can place commonly-used validation functions in a separate source file and use the SCRIPT element's SRC attribute to reference this file. When a browser sees the SRC attribute, it will cache the source file, so that the next time it encounters another page using the same source file, it will not have to download it again.
Also note that implementing browser validation logic will duplicate some server-side validation logic. The EJB and EIS tiers should validate data regardless of what the client does. Client-side validation is an optimization; it improves user experience and decreases load, but you should never rely on the client exclusively to enforce data consistency.
3.3.3 Communicating with the Server
Browser clients connect to a J2EE application over the Web, and hence they use HTTP as the transport protocol.
When using browser interfaces, users generally interact with an application by clicking hyperlinked text or images, and completing and submitting forms. Browser clients translate these gestures into HTTP requests for a Web server, since the server provides most, if not all, of an application's functionality.
User requests to retrieve data from the server normally map to HTTP GET requests. The URLs of the requests sometimes include parameters in a query string that qualify what data should be retrieved. For example, a URL for listing all dogs might be written as follows:
http://javapetstore.sun.com/product.screen?category_id=DOGS
User requests to update data on the server normally map to HTTP POST requests. Each of these requests includes a MIME envelope of type appli_cation/x-www-form-urlencoded, containing parameters for the update. For example, a POST request to complete an order might use the URL:
http://javapetstore.sun.com/cart.do
The body of the request might include the following line:
action=add&itemId=EST-27
The servlet API provides a simple interface for handling incoming GET and POST requests and for extracting any parameters sent along with the requests. Section 4.4.2 on page 98 describes strategies for handling requests and translating these requests into events on your application model.
After a server handles a client request, it must send back an HTTP response; the response usually contains an HTML document. A J2EE application should use JSP pages to generate HTML documents; for more information on using JSP pages effectively, see Section 4.2.6.4 on page 86.
Security is another important aspect of client-server communication. Section 9.2.2 on page 284 covers authentication mechanisms and Section 9.4.2 on page 305 covers confidentiality mechanisms.
3.3.4 Managing Conversational State
Because HTTP is a request-response protocol, individual requests are treated independently. Consequently, Web-based enterprise applications need a mechanism for identifying a particular client and the state of any conversation it is having with that client.
The HTTP State Management Mechanism specification introduces the notion of a session and session state. A session is a short-lived sequence of service requests by a single user using a single client to access a server. Session state is the information maintained in the session across requests. For example, a shopping cart uses session state to track selections as a user chooses items from a catalog. Browsers have two mechanisms for caching session state: cookies and URL rewriting.
A cookie is a small chunk of data the server sends for storage on the client. Each time the client sends information to a server, it includes in its request the headers for all the cookies it has received from that server. Unfortunately, cookie support is inconsistent enough to be annoying: some users disable cookies, some firewalls and gateways filter them, and some browsers do not support them. Furthermore, you can store only small amounts of data in a cookie; to be portable across all browsers, you should use four kilobytes at most.
URL rewriting involves encoding session state within a URL, so that when the user makes a request on the URL, the session state is sent back to the server. This technique works almost everywhere, and can be a useful fallback when you cannot use cookies. Unfortunately, pages containing rewritten URLs consume much bandwidth. For each request the server receives, it must rewrite every URL in its response (the HTML page), thereby increasing the size of the response sent back to the client.
Both cookies and pages containing rewritten URLs are vulnerable to unauthorized access. Browsers usually retain cookies and pages in the local file system, so any sensitive information (passwords, contact information, credit card numbers, etc.) they contain is vulnerable to abuse by anyone else who can access this data. Encrypting the data stored on the client might solve this problem, as long as the data is not intended for display.
Because of the limitations of caching session state on browser clients, these clients should not maintain session state. Rather, servers should manage session state for browsers. Under this arrangement, a server sends a browser client a key that identifies session data (using cookies or URL rewriting), and the browser sends the key back to the server whenever it wants to use the session data. If the browser caches any information beyond a session key, it should be restricted to items like the user's login and preferences for using the site; such items do not need to be manipulated, and they can be easily stored on the client.