Before you start

About this tutorial

The latest release of IBM® WebSphere® Studio and the Portal Toolkit plug-in provide new features for developing front-end applications using JavaServer Faces (JSF). These new features enable developers to quickly and easily use visual rapid-application development tools and provide a rich set of interesting user interface components not easily created or maintained in the past.

In addition to a toolbox of user interface (UI) components, JSF developers have at their disposal a framework for both managing and validating data in a very stable and structured way. Because the open JSF standard defines this process, you can build IDE tools that make the initial development a much simpler task. This is where the attention is focused in this tutorial -- taking advantage of the frameworks capabilities for holding and checking data and exploring the toolset to see how easy it is to implement these in your portal-based applications.

This tutorial provides a basic, but complete, understanding of both the framework in general and the process for developing complex applications that tie into back-end resources from within the WebSphere Portal environment.

Back to top

Should I take this tutorial?

This tutorial is intended for WebSphere Portal developers who are interested in the latest JavaServer Faces tooling in WebSphere Studio.

Generally, developers should have a good understanding of Java development to get through this tutorial, though most of the steps use wizards and visual components. The few locations that require coding provide detailed explanations on what to type and what the code does. For the most part, how the application works behind the scenes is not as important as what the visual components do and how to use them within a portal-specific JSP.

Back to top

Prerequisites

To complete the steps in this tutorial, you need the following software installed on your computer:

• IBM WebSphere Studio V5.1.2
• IBM Portal Toolkit V5.0.2.2
• IBM DB2® Universal Database V8.1, or higher
• FacesPortletFiles.zip contains sample code and JavaBeans.

Download the Portal Toolkit V5.0.2.2. Install WebSphere Studio, accepting all defaults, and run the Portal Toolkit installer, installing both the toolkit and the test environment.

Install DB2 accepting the defaults and install the Sample database from the First Steps window which should load on install. If the First Steps window does not load, select it from Start Menu > Programs > IBM DB2.

The FacesPortletFiles.zip file holds the JavaBeans you will use, as well as the code, in a file called CutandPasteCode.txt. It contains the code some of the steps have you to write. You can cut and paste snippets from here. Unzip FacesPortletFiles into c:\temp -- it will create a directory called FacesPortletFiles in c:\temp.

Back to top

Application overview

The application utilized in this tutorial accesses and updates employee data stored in a back-end repository. In a real-world development scenario, JavaServer Faces should provide a separate front-end layer that accesses some core components that, if designed well, do not rely on any specific style of front-end interface. Typically, these core components would be JavaBeans, EJBs, or other components that hold all the business logic. These would likely be provided by other developers on your team who are skilled in Java technology but not necessarily in UI design. The components should also be flexible enough to be used, perhaps, by any type of front-end, whether it is a Swing-based rich client, Web service, or -- as you will do today -- a Web front end.

The application in this tutorial builds upon a couple of JavaBeans that are generic enough to be used in such applications and function basically as an interface to data stored in an IBM DB2 database.

The application loads those JavaBeans and layer rich components on JSPs that access these JavaBeans gaining access, in turn, to the data behind the scenes.

By the end, you will see how a framework as flexible as JavaServer Faces and the tools provided by both WebSphere Studio and the Portal Toolkit make short order of integrating and maintaining a portal-based front end.

1 of 7 | Next

Comments

Back to top

Table of contents

• Before you start
• Set up the environment
• Build the project
• Run the application
• Wrap up
• Resources
• About the author

---

1 of 7 | Next

Next steps from IBM

Rational Application Developer provides a comprehensive Integrated Development Environment (IDE) used to develop Web 2.0 applications requiring J2EE, Servlets and JavaServer Pages (JSPs).

---

• Try: Try the free Rational Application Developer (RAD), which helps developers quickly design, develop, test, analyze, and deploy high-quality Java, Javaserver pages, J2EE and Web 2.0 applications.
• Article: See how Rational Application Developer and Service Data Objects have been extended to JavaServer Pages to create data views and database queries using a simple, wizard-based, drag-and-drop technology.
• Tutorial: Take a look at developing a J2EE Web application and JavaServer Pages (JSPs) for both an HTML input form and the HTML output from the server, using Rational Application Developer.
• Demo: This demo highlights the enhanced Web 2.0, rich Internet application development features in Rational Application Developer including AJAX and Java Persistence API application development.
• Buy: Rational Application Developer for WebSphere Software

Dig deeper into WebSphere on developerWorks

Discover knowledge paths

Skill-building guides for WebSphere, Linux, open source, cloud, Java, business analytics, and more.

Special offers