ECLIPSE WEB TOOLS PLATFORM developing java web applications PHẦN 4 ppt

CHAPTER 7

The Presentation Tier

The inmates are running the asylum.

—Alan Cooper

Introduction

Software architecture and design is largely a process of taking a complex system

and dividing it into smaller, more manageable subsystems. One of the most

important lines of division is that which separates the user interface of a system

from its core. The core of a system is often referred to as its business logic and

the user interface as its presentation logic. We discussed the architectural aspects

of this division previously in Chapter 5. We discuss WTP support for presenta￾tion logic in this chapter and for business logic in the next, Chapter 8.

The division between presentation and business logic is especially important

in Web applications for two reasons. First, the user interface is likely to change

very frequently to improve its usability and to take advantage of new presentation

technologies, but the core is likely to be stable. For example, in a banking system

the core operations of transferring money between accounts or paying bills don’t

change much from year to year, but the bank is very likely to continually improve

its ease of use. If there is a clear separation between the presentation logic and the

business logic, then the presentation logic can be changed and tested much more

quickly, cheaply, and reliably. Second, if the business logic is independent of the

presentation logic, then it can be reused in other contexts and made available

via other channels. For Web applications, this means that the same business logic

can be accessed, for example, by Web browsers, voice response units, and Web

services. The set of components that implements the presentation logic of a Web

199

application is referred to as the presentation tier. This chapter describes the

structure of the presentation tier for Java Web applications and the tools in WTP

for developing it.

A large number of powerful technologies, such as HTTP, HTML, CSS,

JavaScript, XML, XSLT, servlets, JSP, and JSF, are available for constructing the

presentation tier of Java Web applications. The fact that you are reading this

book means that you are probably a programmer and are therefore very capable

of mastering these technical aspects of user interface development. However,

most programmers lack the training to design the nontechnical aspects of the

user interface. By nontechnical aspects, we mean things like the way in which the

user interacts with the application, and its graphical look and feel. If your devel￾opment project can afford it, bring in some trained professionals to help you

with those aspects. However, adding experts to your team is not always an

option, and in any case a basic understanding of these issues is very useful. So

before we launch into a discussion of Web technologies, let’s spend a little time

talking about interaction design and graphic design.

Interaction Design

In his book The Inmates Are Running the Asylum [Cooper2004], Alan Cooper

defines the concept of interaction design, which, simply put, is the process of

viewing the application through the eyes of the intended users and designing it

accordingly. As the title suggests, this process is not the norm in software devel￾opment. Instead, the user interaction typically is designed by developers who are

focused on the internal structure of the application, with the result that the

application frequently has an abominable user interface. How often have you

heard the excuse, “We can’t do it that way because the code doesn’t allow it.”

when you suggested an improvement to an awkward user interface? Interaction

design avoids those problems by putting the users first and designing the applica￾tion to support the desired user experience.

The main tool of interaction design is the persona. A persona is a fictitious

user of the application, described in graphic detail. You should define one or

more personas for each major user role that the application supports. Each per￾sona is given a name and a lifelike description. The goal is to make the develop￾ment team start thinking about the personas as if they were real people. It is

especially important to describe the skill set of each persona to ensure that the

user interface does not make incorrect assumptions.

Let’s define the personas for League Planet now. We’ll begin with a

description of the user roles. All users of League Planet are expected to be

comfortable on the Web. They’ll have e-mail accounts and know how to use

200 CHAPTER 7 • The Presentation Tier

typical Web applications such as Google or Amazon. The main user roles in

League Planet are, in order of increasing sophistication: fan, player, manager,

and administrator.

❍ A fan is a user that follows some sports. Since League Planet is for ama￾teur sports, a fan is typically a family member or friend of one of the play￾ers. A fan can browse the site for information about leagues, teams,

players, and games without signing in. However, when fans sign in, they

are shown information according to their interest profile and are given

additional capabilities. Fans can register interest in specific items and

request notification of certain events, for example, when the location or

time of a game changes, when the score of a game changes, or when a spe￾cific player scores. Fans can also participate in discussions, communicate

with each other, and arrange transportation to and from games.

❍ A player is a user who participates in some sports. Players are typically

school children, teenagers, or young adults. Each player is assigned an

account and has all the fan capabilities. Players can control the display of

their statistics and can update their own biographical and contact

information.

❍ A manager is a user who registers and sets up the leagues, teams, players,

games, and so forth. Managers are expected to have actual experience in

managing amateur sports leagues and teams. Managers need to keep accu￾rate records and enter this information into League Planet.

❍ Finally, an administrator is a user who runs League Planet. An administra￾tor creates and deletes accounts, and monitors the operation of the Web

site. League Planet is a geographically distributed organization, so its

employees need a Web user interface that allows them to administer the

site from any location and at any time. Administrators are information

technology professionals.

Now let’s create some personas for these roles:

❍ Anne French, Fan: Anne is a 42-year-old mother of two teenage boys,

Max and Jason, who both play hockey. Max is 14 and Anne drives him

to practices and games. Jason is 18 and drives a car, but Anne likes to

attend his games. Anne has her own personal computer and uses it

mainly for e-mail and shopping online. Although Anne can install and

update software, she dreads doing so since something always goes wrong

and she has little patience for troubleshooting. Anne is especially inter￾ested in the car-pooling application available in League Planet since

Max’s hockey practices are at odd hours. She’d also like to receive text

Interaction Design 201

message notifications about schedule changes on her cell phone. She

hopes the League Planet user interface will be a no-brainer.

❍ Kenny Pau, Player: Kenny is a 12-year-old baseball player. He uses the

family personal computer mainly for playing Doom, Quake, and Halo.

However, he is also very adept at using Google to do research for his

homework assignments. Although he thinks it would be very cool to

have his own Web page for baseball stats at League Planet, he is not pre￾pared to learn HTML like those loser geeks who belong to the computer

club at school.

❍ Sheila MacPherson, Manager: Sheila is a 21-year-old university student,

majoring in psychology. She’s the captain of her college’s Ultimate Frisbee

team and thinks it would be great to use League Planet to coordinate both

the regular schedule and playoffs. Sheila uses her laptop computer for all

her university assignments. She is very comfortable with spreadsheet soft￾ware, which she uses for her psychology labs and personal finances. She

hopes League Planet will be as easy as that.

❍ Peter Alverez, Administrator: Peter is a 26-year-old Webmaster. He

obtained a bachelor of computer science degree from a state university

where he picked up UNIX system administration skills in his spare time by

running one of the labs. After graduating, he did Web development for a

small start-up that went broke after two years. He recently has been hired

by League Planet as an administrator. Peter lives thousands of miles and

several time zones away from the League Planet main office and will work

remotely.

The astute reader will notice that we have employed the mnemonic

device of starting the last name of each persona with the same letter as their

user role. However, after a while these personas should become so familiar

to us that no mnemonic will be necessary. The personas should come alive to

us. For example, when we design the player user interface we should be ask￾ing ourselves what Kenny would think of it. If we are tempted to introduce

some Wiki-like syntax for marking up the player biographies, then we

should quickly reject it on the grounds that Kenny would think it was turn￾ing him into a geek. On the other hand, if we think that managers might like

to import and export team information in comma-separated value format,

then we should tell ourselves that Sheila, the spreadsheet expert, would

probably appreciate that.

202 CHAPTER 7 • The Presentation Tier

Graphic Design

Graphic design includes the layout of Web pages and the selection of colors,

typography, and images. Creating a pleasing graphic design requires both talent

and training and is best left to a skilled professional. Although some program￾mers do possess artistic ability, they are the exception. The rest of us can, how￾ever, take some steps to improve the situation.

If you cannot employ the services of a professional graphic designer, then you

can at least learn how to avoid the most obvious errors. In their classic book, Web

Pages That Suck [Flanders1996], Vincent Flanders and Michael Willis teach good

design principles by looking at bad examples. Their book is both informative and

highly entertaining.

For a very accessible introduction to the principles of visual design and

typography, see The Non-Designer’s Design Book [Williams1994] by Robin

Williams. This book discusses the use of proximity, alignment, repetition, and

contrast in design and also explains how to select and combine typographic

elements. Although this book was written for print media, it applies equally well

to the Web. For specific guidelines for Web design, see the sequel, The

Non-Designer’s Web Book [Williams1998], by Robin Williams and John Tollett.

If you are interested in acquiring UI design skills, there are excellent

resources available. Designing Interfaces [Tidwell2005] by Jennifer Tidwell

takes an overall look at Web usability, but is for people who already know basic

UI terminology and core UI design concepts. You can also find professional

advice on the Web at sites such as Luke Wrobleski’s LukeW Interface Designs at

http://www.lukew.com/

Even if you are an expert graphic designer, you should separate the graphic

style elements from the presentation logic as much as possible so they can be

changed independently. In the extreme case, you might want to allow the end

user to change the graphic design elements while the application is running. One

of the simplest techniques you can use is stylesheets. A stylesheet lets you sepa￾rate the presentation of a Web page from its content. There are two standard

stylesheet technologies in common use on the Web: CSS and XSLT. We’ll discuss

the tools available in WTP for developing CSS and XSLT later (see the sections

Iteration 2: CSS and Iteration 4: XML and XSLT).

CSS is the most widespread stylesheet technology. CSS lets you control the

color, font, alignment, spacing, and other display properties of HTML tags. The

presentation logic of your Web application should avoid directly specifying these

display properties in the HTML. Instead, HTML tags should include a class

attribute that abstractly defines their content, and the display properties of each

Graphic Design 203

class should be specified in a CSS document. Although CSS is very powerful, it is

limited in that it cannot change the order in which the page content is presented.

If you need to rearrange the content, use XSLT.

XSLT allows very general rearrangements and transformations of the page

content. However, to use XSLT the page content must be well-formed XML.

While CSS is applied in the Web browser, XSLT may be applied either in the Web

browser or the Web server. Applying XSLT on the Web server is generally a safer

option in practice since not all browsers support XSLT, and those that do sup￾port it may have subtle differences.

CSS and XSLT are in fact complementary technologies. Although it is possi￾ble to include display properties in the output of XSLT, it is generally a better

design to limit XSLT to rearranging and transforming the page content into

HTML with class attributes so that CSS can be applied to it in the Web browser.

XSLT is a much more complex format than CSS, so it is therefore easier to make

changes to display properties if they are specified in CSS.

In summary, good graphic design requires talent and training. The presenta￾tion logic should therefore use stylesheets to separate the page content from its

graphic design elements so they can be more easily changed by a skilled profes￾sional. However, if you have to create the graphic design yourself, at least be

aware of the basic principles and try to avoid the most common errors.

The Structure of the Presentation Tier

The first Web browsers were fairly simple, being limited to presenting HTML

pages and handling fill-in forms. However, as desktop computers became more

capable, Web browsers evolved to include many powerful processing technolo￾gies, including scripting languages such as JavaScript; plug-ins for Flash, Java,

PDF, and so forth; and XML languages such as XSLT, SVG, and MathML. This

increase in client-side processing power enabled a new architecture for the pres￾entation tier. Rather than do all the processing on the server, processing could

now be done either on the server or the client, wherever it made the most sense.

Consider the problem of data entry. Many Web applications contain fill-in

forms that may have dozens of data entry fields. In this situation, there is much

scope for user error. Some fields may be required, some may be numeric values

that must lie within a certain range, while others, such as e-mail addresses and

telephone numbers, may need to obey certain syntax rules. The server side of the

application should be bulletproof. It should assume that it will receive bad data

and always perform a complete set of validity checks. However, if the validity

checks are only performed at the server, then the user experience will be poor. If

the data contains several errors, the user may have to repeatedly submit the form

204 CHAPTER 7 • The Presentation Tier

to resolve all the problems. Each time the user submits the form there will be the

usual network and server processing delays. A better design is to perform as

many validity checks as possible on the client. This will improve the responsive￾ness of the application and produce a better user experience. It will also have the

benefit of reducing the load on the server. Of course, there will always be a cost￾benefit trade-off when deciding what validations can be done on the client. For

example, checking that a street address matches a zip code requires a database

that is too large to be sent to a client.

Another excellent use of client-side processing is data presentation. For

example, consider the result of a database query presented as a multi-column

table. The user may want to view the data sorted by different columns or as a

chart in different styles. With client-side processing, the raw data can be sent to

the Web browser once and then redisplayed many times according to the user’s

selections. Again, the benefit is improved response time and reduced server load.

In traditional multi-tiered distributed applications, the presentation tier is

called Tier-1, the business logic tier is Tier-2, and the persistence tier is Tier-3.

Tier-1 is traditionally a desktop computer with a windowing user interface.

However, the presentation tier in modern Web applications is in fact physically

split between the Web browser client and the Web application server. The client

side is sometimes referred to as Tier-0, although this term is often used for lim￾ited capability wireless devices such as cell phones and PDAs.

In J2EE parlance, a multi-tiered distributed application is spread over a

client tier, a middle tier, and an Enterprise Information System (EIS) tier. The

client tier is the end-user device such as a desktop computer or cell phone. The

middle tier consists of several modules such as Web containers and EJB contain￾ers. The EIS tier consists of databases, Enterprise Resource Planning (ERP) sys￾tems, and other legacy applications. Refer to section 1.2.1.1 in Multitier Model

of Designing Enterprise Applications with the J2EE Platform, Second Edition

[Singh2002], for more details. Thus in J2EE, the presentation tier physically con￾sists of the client tier and a Web container on the middle tier. WTP currently sup￾ports development for a presentation tier that consists of a Web browser on the

client tier and a Web container on the middle tier.

One of the hottest new Web browser technologies is Asynchronous

JavaScript and XML (AJAX). In this approach, the Web browser makes

asynchronous requests for XML data from the server. The use of asynchronous

requests means that the user interface is not blocked waiting for the server to

respond. Instead, when the response is received, a user-supplied callback func￾tion is invoked to process the data. XML is used here as a data interchange for￾mat. Clearly, Web services are an important potential source of AJAX data. For

more information on using AJAX with J2EE, see Asynchronous JavaScript

The Structure of the Presentation Tier 205