Creating Your Application's UI 

Introduction to this series of articles

This article and related articles describe a number of techniques for constructing your applications user interface and page layout. They include information on the two basic approaches to controlling page layout:

• A data-driven automated approach, where all the data fields are initially generated from a schema and can then be customized using Design view and builders
• A custom layout approach, where page layouts are created in an HTML authoring tool or editor. This custom layout approach has two variations, the "complete page" approach and the "base page and fields" approach, described below.

Both the data-driven approach and the custom layout approach are commonly used in Web Experience Factory. The data-driven approach can often be the quickest for development, but the custom layout approach gives more direct and complete control of the layout.

These slides talk about these general approaches to UI layout and design:

Approaches to UI Design and Layout
Modifying Your Applications Appearance Using Custom HTML
Using the design view to customize your data layout
Writing Page Automation friendly HTML and styles

Page Automation

There are a group of builders in the product designed to make the displaying of data on pages in the application much easier. These builders control many aspects of working with the data. These builders range from high level builders such as the Data Service User Interface builder (DSUI) which creates a fully functional application to builders like the Page Automation Label builder that allows for updating of a fields labels.

The Complete Page approach to custom page layouts

When using this method of page design, the entire page is contained in a single HTML file.

The Base Page and Fields approach to custom page layout

When using this method of page design the outer shell of the page (buttons, marque, headers, footers) are in one HTML file and the field information is in a separate HTML file which are later combined by builders.

Sometimes you receive designs from application designers that are pictures created in an image-editing program, or HTML and style sheets and you need to incorporate into your product. So what is the best way to accomplish this? Many times, developers can start with the user interface generated by Web Experience Factory and modify what the product generated – whether it is the style of the chart or the design of the applications user interface. In many cases this generated UI and modifier builders will allow you to fully customize the application without having to create, edit or modify HTML or style sheets manually. We expect that at this time you have a good definition of what the data and services are since this information will be needed to communicate what data needs to be displayed.

Here is a document that describes these different design methodology's that you can use to handle the user experience designer to developer interaction. It discusses different approaches to Outside-In development where the user interface is designed by user interface designers and the developers take this information and add it to the application.

In most of these methods, a good starting place is the UI that is automatically generated by page automation and using this information you can ask yourself some of the following questions.

Using automated data-driven layouts

Page Automation is the technology of the Factory that builds both JSP pages and Java code based on a schema or other data definition. The core access to this technology is the Data Page builder, which can also be accessed through high level UI builders such as View and Form or Input Form and Data Service User Interface. Part of the power of Page Automation is that it starts by creating an internal model of how the data will be laid out on the page, and then you can use assorted modifier builders, such as Data Field Modifier or Data Column Modifier, to change the internal representation before the actual work of creating the JSP and Java occurs. These builders can be added from the builder picker or through wizards to automatically create a functioning application.

Controlling automated layouts

There are some high level ways to configure and control the look and layout of these application. These include UI themes which allow you to control the overall look and feel of the application. It also allows you to control which templates and styles used and available at an application level.

Working with UI Themes

A theme is a collection of style information that can be used to drive builder inputs that provide the application UI in your model. This information can include but is not limited to HTML templates, style sheets (CSS), base pages, highlighting style, and paging style. A good example of a theme that is used to control the look and feel of type of application is our mobile.uitheme which is found in the WebContent\WEB-INF\factory\themes\mobile directory when you have the mobile feature set in your project. This theme is designed specifically for mobile devices and overrides many of the default settings in the base theme file. To customize or create your own themes you should not modify these files that are under the factory directory but save them in the themes directory we create for you. For information on themes see the Themes and user interface control topic in the Web Experience Factory product help.

Working with HTML Templates

One very advanced and very powerful technique that can be applied when building a custom UI theme is to control the automatic generation of HTML by using HTML template files that guide the actions of the page automation builders. When working with a large system that requires maximum re-use, this technique can greatly reduce the need to hand-craft the look and feel of each individual page. Using a HTML template for all pages in an application helps you achieve a consistent look and feel. These templates are found in the WebContent\factory\html_templates directory. To customize or create your own templates you should not modify these files that are under the factory directory but save them in the html_templates directory we create for you. For information on HTML templates see Introducing WebSphere Portlet Factory HTML Templates and What are page automation templates?.

Working with Style Sheets

Cascading style sheets enable you to define a consistent look and feel throughout your Web site by maintaining the contents (Web pages) and the design (the style sheet) separately. Style sheets for the automated pages are controlled by the current theme. These files are found in the WebContent\factory\html_templates directory. A good example of style changes that redefine styles that are used by page automation are the style files found in WebContent\factory\html_templates\mobile directory when you have the mobile feature set in your project. These style are designed specifically for mobile devices. To customize or create your own templates you should not modify these files that are under the factory directory but save them in the style_sheets directory we create for you. Or you can create and use your own style sheets and by changing the the HTML templates to use the styles you defined.

Working with base pages for non-data elements

The high level user interface builders use a layered approach to the HTML that they use. Allowing a developer to change the overall look, feel and layout of the application by changing things like navigation, banners, headers/footers, etc separate from the fields and data that is displayed on the page. A good example of base page changes that redefine look and feel of the application are the html files found in WebContent\factory\pages\mobile directory and subdirectories when you have the mobile feature set in your project. These pages are designed specifically for mobile devices. To customize or create your own templates you should not modify these files that are under the factory directory but save them in the pages directory we create for you. Or you can create and use your own base pages and by changing the the HTML templates to use the pages you defined.

For information on working with base pages and custom page layout see Modifying Your Application's Appearance Using Custom HTML.

Working with the design view for field customization

This document explains to developers how to use the layout manager builders in the product to customize page automation generated pages. Using this method you do not have to directly edit HTML. The design panel in the model editor shows a visual representation of a visible element that is selected in either the Application Tree or the Pages panel. Clicking the Design tab exposes the Design panel. This panel lets you quickly and conveniently see visible elements in your model without having to generate the web application and lets you make design changes. It supports the adding and manipulation of builders and their inputs allowing a user to modify field layouts and attributes. This view allows you to add high level layouts( two column, T layout, Inverted T and I layout) or use drag and drop to rearrange the layout of your fields on the page. All changes are stored as inputs to builders and are dynamically applied at generation time.

For more information on design view customization

Using the design view to customize your data layout.

Working with custom HTML UI designs

This document explains the different processes used when working with an outside design firm or user experience designers who hand off HTML and CSS files or photo-shopped images of what the desired UI should be. In this case it still is useful to create the page automation generated pages to get information about the field and group names.

Are you receiving the HTML that is the complete page or designed in the base page/ field section design?

Complete Page - see how to pull the pages back into DSUI, View & Form and Data Page
Base page/field - see base pages and page automation data areas
See - Modifying Your Application's Appearance Using Custom HTML
This document is useful for developers that need to work with separate HTML developers. It explains the best ways to extract and consume HTML that is integrated with page automation including

• base pages and page automation data areas
• how to export HTML to use as a starting point
• where to put the new HTML file
• modifying your HTML without breaking things
• how to pull the pages back into DSUI and View & Form

How do I prepare my HTML designers to produce HTML that is easier to be consume page automation?

See - Writing Page Automation friendly HTML and styles
This document is useful for HTML developers to know what tags and what attributes are used on pages by page automation including

• how to write / modify HTML so that it meshes well with page automation
• field naming and mapping
• suffixes that page automation looks for
• special named elements

Improving the eclipse HTML editing experience

The eclipse we install with the product includes an HTML editor that allows you to work with the HTML but does not include a preview or design view. If you use the Rational Application Developer it has some good HTML tools. But if you are staying with the base eclipse there is an optional Web Page Editor that does provide these capabilities.
See - Web Page Editor in IBM Web Experience Factory