This article describes the architecture and features of the Web application development tooling in WorkSpace 1.5, how to develop these powerful JSF DataWindow components, and then use them in a JSF Web application, as well as how to integrate Web applications into a Service Oriented Architecture.

JavaServer Faces (JSF) is a specification created by the Sun Java Community Process. It specifies a framework for easily creating Web-based applications with an emphasis on server-side components to handle business logic and data retrieval. Using JSF can make it easy to implement sophisticated data-centric Web applications.
JSF provides the following:

• A UI framework of components to describe the definition or behavior of the UI
• A rendering model of libraries to render the presentation to different markup languages
• A validation model of libraries to validate user inputs
• A navigation model of rules to handle page flows
• Lifecycle management to link the different models together

Web application development tooling in Sybase WorkSpace 1.5 provides full support for JSF application development. It provides a visual page designer that supports a WYSIWYG development experience to help customize the look-and-feel of the Web page. It provides a data-binding feature to help you bind the presentation to business logic using drag-and-drop. It uses patented DataWindow technology to bring the convenience of codeless development of data-driven applications to Web applications via a JavaServer Faces component. By simple visual drag-and-drop, one can develop very powerful JSF DataWindow components in various display styles. The DataWindow engine has the intelligence to update, create, and delete the data source, freeing the developer to code only the business logic.

Web Application Development Architecture
Sybase Workspace 1.5 is built on the Open Source Eclipse platform. As shown in Figure 1, the Web application development tooling component of Sybase WorkSpace leverages the Eclipse Graphical Editing Framework (GEF) and Enterprise Modeling Framework (EMF) and is built on top of the Eclipse Web Tools Platform (WTP). WTP provides basic J2EE application development lifecycle support, including the design, development, testing/debugging, and deployment of Web applications to the runtime container.WorkSpace Web application development tooling provides an environment that lets you develop Web applications in a visual environment, integrate them with existing business logic, and reuse the PowerBuilder business logic already in DataWindows. It also integrates with the WorkSpace service framework thatlets Web pages access data via service invocation, and present the service data on the Web page. To extend the architecture, it also provides an environment to integrate the existing business logic written in Enterprise JavaBeans (EJB).

Eclipse Perspectives
Web Application Development tooling in Sybase WorkSpace 1.5 provides two perspectives: the Web application development perspective and the debugging perspective.

The Web application development perspective (see Figure 2) provides a navigation view that displays Web projects and their components in a tree view. It provides a Web page designer that delivers a graphical and text-based development experience to design and develop Web pages in a WYSIWYG environment. It provides a JSF configuration editor, which is a form-based editor allowing the application to be customized in a visual environment. The JSF configuration editor is Open Source and contributed to the Eclipse JSF project. A resource bundle editor is provided that allows for externalizing strings used in the internalized application. A form-based editor allows for customizing an application in the web.xml file.

The debugging perspective lets you debug and test the business logic and JSF pages in a runtime environment. You can watch variables and call stacks, step-by-step debug into pages as well as business components.

Web Project and JSF Artifacts Creation
By leveraging the WTP, the Web application development tooling in WorkSpace 1.5 provides wizards for creating a Web project and enabling JSF support, which will prepare all necessary runtime libraries for the project's runtime environment. During project creation, a wizard dialog lets you enable JSF, DataWindow, and SOAP service support. Enabling JSF support will prepare Sun's JSF 1.1 Reference Implementation runtime libraries. Enabling the DataWindow support lets Web applications access database data using the JSF DataWindow UI component. Runtime libraries of DataWindow support will also be prepared and included in the project. Enabling SOAP service support lets Web applications invoke any of the services that are published to the UDDI registry, or the services that are hosted in the Sybase Unwired Orchestrator server or Sybase EAServer.

Web page creation wizards are also provided to guide you in creating JSF pages, HTML pages, and regular JSP pages from pre-built templates. Any customized templates can be imported into the project besides the defaults for the application to use. After the pages are created, any pages can be tested and debugged on the configured EAServer 5.3 or Tomcat 5.0 runtime server.

Customizing Pages in the WYSIWYG Page Editor
The Web Page Editor is a graphical and text-based editor, leveraging the GEF and the WTP's structure source editor (SSE) model. The editor can be customized to a full graphical mode, a full text mode, or a split mode with both graphical and text views (see Figure 3 for an example of the editor in split mode). The graphical and text editor are synchronized when a selection is made in either editor. Content-assist and syntax-highlighting features, which let you do context-sensitive code completion, are also available when using the text-based editor to create the page.

A palette view consists of all Web page controls, including HTML, JSP, and JSF controls, which are simply dragged and dropped to the canvas of the graphical editor or to the source of the text-based editor. When a control is dropped, a widget will be displayed on the canvas and a tag associated with the control with required attributes will be inserted in the page. For example, if a CommandButton is dragged and dropped onto either the canvas or the source code panel, a button widget will be displayed on the canvas:

The following code will be generated in the JSP file automatically:

<h:commandButton value="CommandButton"></h:commandButton>

A Properties View is provided to modify the attributes of each widget in the canvas. This is a multi-tab view that consists of a "Quick Edit" tab and an "Attributes" tab. The "Quick Edit" tab displays the tag's most commonly used attributes with dialog fields for easily entering or updating the values of each attribute. All other attributes are hidden in the "Attributes" tab and listed in a table format, where you can enter and update the values of any attribute.

When entering or modifying attributes in the Properties View, you can enter either the attribute's actual value or click on the binding button to display a value binding dialog. This dialog will list out all available properties and methods in the JavaBeans and let you bind the value to an expression, a property, or a method in a JavaBean.