The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Create Web-based user interfaces

Ron Ben-Natan (rbennata@hotmail.com), Freelance writer

Ron Ben-Natan, a Studio B author, is CTO and VP, R&D, at Guardium Inc. -- a leader in data access security solutions. Prior to that, he worked for companies such as Intel, AT&T Bell Laboratories, Merrill Lynch, J.P. Morgan, and ViryaNet. He has a Ph.D. in Computer Science in the field of distributed computing and has been architecting and developing distributed applications for more than 15 years. His hobby is writing about how technology is used to solve real problems, and he is author and co-author of numerous books, including Implementing Database Security and Auditing, Mastering IBM WebSphere Portal, CORBA: A Guide to Common Object Request Broker Architecture, The San Francisco Developer's Guide, and IBM WebSphere: The Complete Reference. He has also written numerous articles and tutorials.

Summary: This tutorial demonstrates how to use JavaServer Faces (JSF) technology within IBM Rational Application Developer Version 6.0. The tutorial walks you through a simple application example that uses JSF technology to implement a simple messaging center. Using Rational Application Developer, see how easy it is to build Web applications that are based on JSF technology and how easy it is to support functions relating to event handling, validation, and navigation using visual tools and declarations rather than having to write long, tedious code.

Tag this!

Date: 19 May 2005
Level: Introductory
PDF: A4 and Letter (893 KB | 48 pages)Get Adobe® Reader®

Activity: 7911 views
Comments:

Before you start

About this tutorial

This tutorial is written for Web developers or Web site builders who want to quickly learn how to use IBM® Rational® Application Developer Version 6.0 to build Web applications that use JavaServer Faces (JSF) technology. This tutorial assumes a basic knowledge of HTML and the Java™ language. However, because Rational Application Developer is easy to use, you'll find the tutorial easy to follow even if you're a beginner to HTML and the Java language.

JSF is an application framework for creating Web-based user interfaces (UIs). This tutorial illustrates how to develop a Web application using JSF technology with a focus on the visual tools provided for building Faces pages within Rational Application Developer Version 6.0. It shows you how to use the JSF tags, how to define validation within your Web forms, how to define navigation between the different Web pages, and how to define what takes place when a button is clicked. Finally, the tutorial shows you what happens behind the scenes, what JSF constructs Rational Application Developer generates, and how all this works. While you will learn the basics of JSF, you won't become an expert in JSF and its very large feature set. For a great introduction to JSF, see the developerWorks tutorial, UI development with JavaServer Faces, by Jackwind Li Guojie.

The tutorial uses a simple application -- the messaging center. Using the messaging center, users can log in and view messages that have been sent to them. They can also send messages to any other user that has access to the messaging center. Because JSF technology brings visual graphical user interface (GUI) development to Web applications, the focus is from the "outside-in" -- that is, starting with the pages, then filling in the blanks. Therefore, you first design the pages, then assign values to attributes belonging to components on your page and write only code that is not generated on your behalf.

The messaging center application you create is not complete, because the purpose of the tutorial is to show you how to use JSF within Rational Application Developer. So, you won't spend any extra time making the application complete unless it teaches you something about JSF.

The tutorial takes you through the entire development and packaging lifecycle. You will:

Create a JSF project and your first JSF page for allowing users to log into the messaging center.
Learn how to use the palette and the Attributes Editor to design pages.
Learn about user interface (UI) components, validation, error handling, and navigation.
Learn all about Backing Beans, which are classes that Rational Application Developer generates in support of UI components. You will put your event-handling code inside this bean.
Learn about Managed Beans and models and see how to manage data that needs to be shared among all pages. You will also see how to use the JSF Expressions Language (JSF EL) to bind components to data.
Build the inbox page and use a fairly complex data grid component.
Finish building the application, test it, package it an as Enterprise Archive (EAR), and learn how to install it on a computer running IBM WebSphere® Application Server.

Prerequisites

If you are a complete newbie to the Java programming language, some of these concepts might be easier to follow if you have a basic understanding of servlets and JavaServer Pages (JSP) technology. See Resources for some links on these topics. Otherwise, while this tutorial does not aim to be a complete overview of JSF, it does give you a pretty good overview of the main features. For more information on JSF, see Resources for some excellent tutorials and sources.

To run the examples in this tutorial, you need Rational Application Developer Version 6.0. You can download the latest trial version of Rational Application Developer Version 6.0 at no charge.

Comments

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=1

Zone=Rational

ArticleID=135636

TutorialTitle=Create Web-based user interfaces

publish-date=05192005

author1-email=rbennata@hotmail.com

author1-email-cc=

Next steps from IBM

Dig deeper into Rational on developerWorks

Try IBM PureSystems. No charge.

IBM PureSystems on a kaleideoscope background

Experience today!

Get started with the cloud-based trial and pattern development kit.

My developerWorks:

My notifications:

Select a language:

Technical topics

Evaluation software

Community

Events

Create Web-based user interfaces

What's this?

What's this?

Table of contents

Next steps from IBM

Dig deeper into Rational on developerWorks

Try IBM PureSystems. No charge.

Share this page:

Follow developerWorks:

My developerWorks:

My notifications:

Select a language:

Technical topics

Evaluation software

Community

Events

Create Web-based user interfaces

What's this?

What's this?

Table of contents

Next steps from IBM

Tags

Dig deeper into Rational on developerWorks

Try IBM PureSystems. No charge.

Share this page:

Follow developerWorks: