Customizing the style of applications generated with the
User Interface Generator.
Introduction
The User Interface Generator, a component of the IBM® InfoSphere Master Data
Management (MDM) Workbench, allows you to generate a role based user interface from
a Unified Modelling Language (UML) User Model. The User Interface Generator
comprises of a suite of Eclipse plugins that can be installed into Rational Software
Architect (RSA) and provides tools to rapidly construct a user model. Once complete, the
user model can be fed through the supplied generator to generate a full role based J2EE
Web application. The rich toooling environment proided by the User Interface Generator
provides several extensions to Rational Software Architect, allowing a modeller to easily
and rapidly construct a user model with only minimal knowledge of UML techniques. The
User Model can be used to model the roles, goals, and tasks within an organization
allowing the modeller to focus upon the business usage of the application and not be
concerned with the technology specific requirements of the generated application. Further
information on User Modelling can be found here.
This article introduces the files used in customizing the look of the generated web
application and demonstrates how to modify these files. You will see how to locate, copy
and update existing files to configure a new style, insert a new company logo, change the
background color, change the major heading style, change the default font, and change the
button style.
To follow the examples below you will need to have installed Rational Software
Architect™ (RSA) version 7.5.4 and the User Interace Generator Toolkit version 1.0 or
above. This article assumes that a generated application has already been created from a
valid User Model that has been created in the tooling, and will focus on the components of
the generated application. Information on how to build a valid User Model and generate an
application can be found here.
Locating, copying and updating existing files to
configure new style
For the purpose of this article I shall be basing my new style on one of the existing default
styles (Mozart) that is provided by the User Interface Generator. You will need to copy
two files and update properties of another two files to register the new styles.
1. Copy and paste mozartstylesheet.css in the theme directory within the generated
Web Application – see figure 1. Rename this file appropriately.
Figure 1. Location of stylesheets within web application project.
figure1.JPG
2. Copy and paste mozart.properties in the com.ibm.uig.web.display package in the src
folder of the generated Web application – see figure 2. Rename this file
appropriately.
Figure 2. Location of properties files within web application
project.
figure2.JPG
3. The userDirectory.properties file contains default login information for the
generated application. Assign your new style to a user in the
userDirectory.properties file within the resources folder of the command bean
project. See figures 3 & 4. Save the file. Logging into the site using the relevant
user id will result in the assigned styles being used.
Figure 3. Location of userDirectory.properties file within
command bean project.
figure3.JPG
Figure 4. userDirectory.properties file.
figure4.JPG
4. The display model contains information that the generator requires to display
certain screen elements for each style available to the generated user interface.
Therefore you need to register the new style in the display model. Locate the
display model file – organization.displaymodel within the resources folder of the
command bean project and open it – see figure 5.
Figure 5. organization.displaymodel.
figure5.JPG
Create a new resource within the Display Model – see figure 6.
Figure 6. organization.displaymodel – create New
Child\Resource.
figure6.JPG
Set properties of resource – see figure 7.
Figure 7. Properties of new Resource.
figure7.JPG
Copy and paste Style
mozart
and change properties – see figure 8. Save file.
Figure 8. Properties of demo Style.
figure8.JPG
This completes configuring the new style. Now you can start to modify the stylesheet and
properties file to personalize the site.
Now would be a good time to run the application on a server, log in as the user to which
the new style was assigned and check that the site looks like the default Mozart style site.
Inserting company logo
The first step in personalizing a website is often the addition of a company logo.
1. Modify the image location in your new copy of mozart.properties (mine is called
demo.properties) – change the value HeaderLeftTextImage to the location of your
company logo:
HeaderLeftTextImage=/components/img/mozart/IBM.gif
becomes
HeaderLeftTextImage=/components/img/demo/rainbow.jpg
2. Put any images you are using into the relevant directory within the web application
project – see figure 9.
Figure 9. Images directory for demo style.
figure9.JPG
3. Modifications to the .properties file require the web application to be rebuilt and
republished to the server. Reloading the browser will require you to sign in again
to view the changed logo. See figure 10.
Figure 10. New logo on site.
figure10.JPG
4. If the image is too big or too small, this can be changed in the stylesheet. Style
.bannerTextImage contains positioning and sizing details for the logo. I have
changed height: 50px; to make the logo a little larger. See figure 11.
Figure 11. Resized logo.
figure11.JPG
Unfortunately this has impacted the rest of the banner so I need to remove the
banner background image by deleting the contents of the styles .headerGroup and
.headerBottomGroup. See figure 12.
Figure 12. Corrected banner.
figure12.JPG
Changing background color
Background color changes are made in the stylesheet. Property background-color in style
html,body needs to be modified to change the color. View color changes in the left hand
pane of the editor – I have set background-color to yellow to demonstrate this. See figure
13.
Figure 13. Background-color modification.
figure13.JPG
In this demo I set background-color: #FFFEBC; to tone it down a little. See figure 14 to view
the site with its new background color.
Figure 14. Demo site with new background color.
figure14.JPG
Changing major heading style
All the header text is defined in the stylesheet. Style .headerText in the default Mozart
stylesheet contains only positioning information so to change the color and size etc; for
this demo I set
color: #474749;
font-size: 11px;
font-weight: bold
See figure 15.
Figure 15. Demo site with new .headerText style.
figure15.JPG
Changing default font
The default font is set in the font-family property in the html,body style. In this example the
default font is Georgia as it is the first font in the list of font families:
font-family: Georgia, Tahoma, Verdana, Arial, Helvetica, sans-serif;
See figure 16.
Figure 16. Demo site with new default font.
figure16.JPG
Changing button style
Changing button styles can quickly alter the look and feel of the site. The Mozart style uses
eight different images to create buttons. These images are stored in the img\mozart
directory within theme. See figure 17.
Figure 17. Location of button images for Mozart style.
figure17.JPG
You can generate your own image files for button backgrounds. In this example I have put
my images into a new directory within theme\img called demo, keeping the same file names
as used in the Mozart style. The stylesheet needs to be modified to point at the new images
in the new directory. The relevant styles are shown below.
.submitButton {
background-image: url('img/demo/button_bg.gif');
.submitButton_depressed {
background-image: url('img/demo/button_depressed_bg.gif');
.submitButton_disabled {
background-image: url('img/demo/button_inactive_bg.gif');
.submitButton_moused {
background-image: url('img/demo/button_ro_bg.gif');
.secondaryButton {
background-image: url('img/demo/button_sm_bg.gif');
.secondaryButton_depressed {
background-image: url('img/demo/button_sm_depressed_bg.gif');
.secondaryButton_disabled {
background-image: url('img/demo/button_sm_inactive_bg.gif');
.secondaryButton_moused {
background-image: url('img/demo/button_sm_ro_bg.gif');
The fonts on the buttons can also be changed to fit in with the rest of the site or if the color
doesn’t show up clearly on the new button image. In this example we modified the
relevant button styles as follows:
.submitButton,
.submitButton_moused,
.submitButton_depressed,
.submitButton_disabled {
font-family: Georgia, Verdana, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
.secondaryButton,
.secondaryButton_moused,
.secondaryButton_depressed,
.secondaryButton_disabled {
font-family: Georgia, Verdana, Helvetica, sans-serif;
color: #090909;
font-weight: bold;
Figure 18 shows the Mozart style buttons.
Figure 18. Mozart style buttons.
figure18.JPG
Figure 19 shows my demo buttons resulting from the above stylesheet changes.
Figure 19. Demo site with new button styles.
figure19.JPG
Summary
Within this article I have demonstrated how the styles generated by the User Interface
Generator can be modified to personalize any application. Because the generated
application is built upon recognized industry standards, organizations can use their
existing skills to customize the generated applications to exactly suit the needs of their
users. This article has provided an overview to the types of customizations that are
possible, but is by no means an exhaustive list of possible changes. There are many more
changes that can be made but, with the help of this article, you should be able to locate
and modify the styles you need.
Resources – links to existing devWorks articles
Learn

Use Rational Software Architect and the User Interface Generator to build a user
model.

Connect your user interface to existing back-end services using the IBM
InfoSphere MDM Workbench User Interface Generator command bean
framework.

The User Interface Generator is a component of the MDM Workbench, which is
available as part of IBM InfoSphere Master Data Management Server.

The MDM Workbench space contains articles and forums with useful information
for users of the MDM Workbench and the User Interface Generator.

Learn more from the User Interface Generator User Guide available from the
Rational library. See the section "Creating UI’s with the User Interface Generator"
in the RSA Infocenter with the tooling installed.
Get products and technologies

Download a trial version of Rational Software Architect.

Download IBM product evaluation versions or explore the online trials in the IBM
SOA Sandbox and get your hands on application development tools and
middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
Discuss

Check out developerWorks blogs and get involved in the developerWorks
community.
Table of contents
Introduction
Locating, copying and updating existing files to configure new style
Inserting company logo
Changing background color
Changing major heading style
Changing default font
Changing button style
Summary
Resources