IBM Director Console look-and-feel

Changes have been made to the latest release of the IBM Director Console to facilitate a common look and feel. This work unifies IBM Director's look and feel over multiple platforms. This is important because the console will be supported on Linux in addition to Windows.

The look-and-feel differences manifest themselves both in the coloring and in the way the controls are drawn. With the new look and feel the colors are softer and easier on the eyes. The scrollbar thumb is pale and does not draw attention away from the window contents. The scrollbar thumb adopts its active color when it has the focus. The tree nodes are represented in a way unique to the product and not with Windows plus mark.

From a development perspective, a UIDirectorLookAndFeel class and a number of supporting UI classes were added to IBM Director. These classes are loaded by the IBM Director Console upon startup. Most of the look-and-feel changes appear throughout the entire product without any programmer intervention after the console loads the UIDirectorLookAndFeel class. However, several areas require attention by SDK developers. They will be discussed in the following sections. While IBM Director console extensions might be required to make some accommodations in their code, previous experience has demonstrated that the changes are straight-forward and easily accomplished.

look-and-feel coding guidelines

Use the following guidelines when creating code for IBM Director.

  1. Do not interfere with IBM Director’s look and feel

    The IBM Director framework will load the UIDirectorLookAndFeel class upon startup. From this point on, everything running in IBM Director’s JVM will automatically adopt this look and feel. Make certain that IBM Director console extensions do not inadvertently attempt to load any other look and feel (that is, there should be no calls to UIManager.setLookAndFeel()).

  2. Use the correct status indicator

    All status indicators should be identical to the one on the main console. This should not be a problem for console extensions that inherit from TWGTaskFrame since the constructor TWGTaskFrame( true ) will automatically provide the correct status indicator widget.

  3. Use TWGConsoleColor

    A new class, com.tivoli.twg.console.TWGConsoleColor, has been created. This is a class built on ColorUIResource which contains static convenience methods that will return colors by name (such as getWhiteColor()) or type (such as getMenuColor()). Use of this class ensures centralization and consistency of type throughout the product. If a color is altered in the future, code using this class will require no changes.

    It is recommended that IBM Director console extensions replace any calls to SystemColor.xxxx or Color.xxxx with corresponding calls available in TWGConsoleColor.

  4. Implement IBM Director tool bar look And feel

    Tool bar buttons are now unique items with their own UI class. They assume the same background color of the toolbar. Since JButton widgets are inclined to paint themselves with the button background color, developers might find that some of their toolbar items occasionally refuse to paint properly. A simple solution to this problem is to make the following simple changes:

    Below are two code snippets. The first one uses JToolBar and JButton classes to create a toolbar. The second one uses UFToolbar and UFToolBarButton to create a toolbar. The return type of the createToolBar method does not need to be changed to return a UFToolBar because UFToolBar subclasses JToolBar.

    Example code using JToolBar and JButton:

    private JToolBar toolbar;
    private JButton deleteButton, refreshButton;

    private JToolBar createToolBar()
    {

    Image image = null;

    // create toolbar
    toolbar = new JToolBar();
    toolbar.setFloatable(false);

    // add refresh button
    image= class.getClassLoader().getResource("images/reload_s.gif");

    refreshButton = new JButton( new ImageIcon( image ) );
    refreshButton.setBackground( toolbar.getBackground() );
    toolbar.add( refreshButton );

    refreshButton.addActionListener(listener);
    refreshButton.setToolTipText(getFromBundle("EventmgrLogTipButtonRefresh"));
    image= class.getClassLoader().getResource("images/rfrsh24r.gif");

    refreshButton.setRolloverIcon(new ImageIcon(image));

    // add delete button
    image = class.getClassLoader().getResource("images/delete_s.gif" );

    deleteButton = new JButton( new ImageIcon( image ) );
    deleteButton.setBackground( toolbar.getBackground() );
    toolbar.add( deleteButton );
    deleteButton.setEnabled(false);
    deleteButton.addActionListener(listener);
    deleteButton.setToolTipText(getFromBundle("EventmgrLogTipButtonDelete"));

    image = class.getClassLoader().getResource("images/delet24r.gif");
    deleteButton.setRolloverIcon( new ImageIcon( image ) );

    // return the configured toolbar
    return toolbar;
    }

    Even though the background of each JButton is set to use the same background color used by the tool bar, the results are not correct using this typical sequence of code.

    Example code using UFToolbar and UFToolBarButton:

    import com.tivoli.uif.controls.UFToolbar;
    import com.tivoli.uif.controls.UFToolBarButton;


    private UFToolbar toolbar;
    private UFToolBarButton deleteButton, refreshButton;

    private JToolBar createToolBar()
    {
    Image image = null;

    // create toolbar
    toolbar = new UFToolbar;
    toolbar.setFloatable(false);

    // add refresh button
    image= class.getClassLoader().getResource(“images/reload_s.gif");
    refreshButton = new UFToolBarButton ( new ImageIcon( image ) );
    toolbar.add( refreshButton );
    refreshButton.addActionListener(listener);
    refreshButton.setToolTipText(getFromBundle("EventmgrLogTipButtonRefresh"));
    image= class.getClassLoader().getResource("images/rfrsh24r.gif");
    refreshButton.setRolloverIcon(new ImageIcon(image));

    // add delete button
    image = class.getClassLoader().getResource("images/delete_s.gif" );
    deleteButton = new UFToolBarButton ( new ImageIcon( image ) );
    toolbar.add( deleteButton );
    deleteButton.setEnabled(false);
    deleteButton.addActionListener(listener); deleteButton.setToolTipText(getFromBundle("EventmgrLogTipButtonDelete"));

    image = class.getClassLoader().getResource("images/delet24r.gif");

    deleteButton.setRolloverIcon( new ImageIcon( image ) );

    // return the configured toolbar
    return toolbar;
    }

    The setBackground methods called in the first example are no longer required. The UFToolBarButton has its own UI identification that enlists the tool bar button UI class to paint it correctly.

    Making these simple changes solves the toolbar problems. It is a simple matter to search a directory or directories (ignoring case) for toolbar. This will identify files where changes of this type are likely to be required.

  5. Add rollover icons for all tool bar items:

    All toolbar items should be provided with rollover icons. In the course of fixing toolbars, defects were written against some IBM Director framework windows to correct this problem. IBM Director console extensions should be checking for conformity as well. To meet Accessibility requirements, it is necessary to be able to determine focus traversal over toolbar items. Rollover Icons serve this purpose in the IBM Director product.

    The preceding examples set rollover icons for the tool bar items being added to the toolbar using the setRolloverIcon method inherited from JButton. When the focus is placed on a toolbar button, via either mouse or keyboard action, its rollover icon will be activated. This allows the user to see which item on the toolbar has been selected.

    There are a set of IBM Director icons that should be used consistently throughout the product.

  6. Set Dialog Colors

    Dialogs are used in many ways. Some are very similar to windows while others are more like the message boxes implemented with JOptionPanes. Many of IBM Director’s dialogs were originally designed to have the darker background of the menu bar.

    The IBM Director framework code for dialogs such as these was changed to set the background to the color of the menu bar. A code snippet for a login dialog similar to that for IBM Director is shown below. Five lines were added to the original code to accomplish the change.

    All IBM Director console extensions are unique in their use of dialogs. If there is a dialog in the code of an extension that doesn’t look like it belongs with the product when run under IBM Director, it is a simple matter to correct.

Login Dialog Construction With UIDirectorLookAndFeel Adjustments:

public void buildView()
{

client = new JPanel();
client.setBackground( TWGConsoleColor.getMenuColor() );

// Create the main panel all controls are placed into and
// initialize the layout, alignment and border parameters.
client.setLayout( new BorderLayout() );
client.setBorder( new EmptyBorder( 20, 30, 30, 30 ));

// Get the splash screen image to load from the product information file.
String loginImage = getLoginImage();
Image image = class.getClassLoader().getResource( loginName, false );

// Create a panel containing the Image name
JLabel temp = new JLabel( new ImageIcon( image ));
client.add( "North", temp );

// Create the panel that we will place all of the prompt/text pairs into.
JPanel p1 = new JPanel();
p1.setBackground( client.getBackground() );
p1.setLayout( new BoxLayout( p1, BoxLayout.Y_AXIS) );
p1.setBorder( new EmptyBorder( 30, 10, 10, 10 ));
client.add( p1 );

// Read in all of the PROMPTS and get the maximum width for them.
int maxWidth = readAndCalcMaxPromptLength();

// Create a panel for the server name input row.
JPanel serverNameRow = new JPanel();
serverNameRow.setBackground( client.getBackground() );

BoxLayout boxlayout = new BoxLayout( serverNameRow, BoxLayout.X_AXIS );
serverNameRow.setLayout( boxlayout );

// Create the prompt and entry field for the server name.
JLabel serverNamePmt = new FixedLabel( userPmts[0], maxWidth );

serverNameRow.add( serverNamePmt );
serverNameRow.add( Box.createHorizontalStrut( 10 ) );
serverNameEdit = new JTextField( 15 );
serverNameEdit.addFocusListener( this );
serverNameEdit.addKeyListener( this );
serverNameRow.add( serverNameEdit );

// Add the server name row and spacer to the panel.
p1.add( serverNameRow );
p1.add( Box.createVerticalStrut( 10 ) );

// Create a panel for the user full name input row.
JPanel userNameRow = new JPanel();
userNameRow.setBackground( client.getBackground() );
userNameRow.setLayout( new BoxLayout( userNameRow, BoxLayout.X_AXIS ));

// Create the prompt and entry field for the user id.
JLabel userNamePmt = new FixedLabel( userPmts[1], maxWidth );

userNameRow.add( userNamePmt );
userNameRow.add( Box.createHorizontalStrut( 10 ) );
userNameEdit = new JTextField( 15 );
userNameEdit.addFocusListener( this );
userNameEdit.addKeyListener( this );
userNameRow.add( userNameEdit );

// Add the user name row and spacer to the panel.
p1.add( userNameRow );
p1.add( Box.createVerticalStrut( 10 ) );

// Create a panel for the password input row.
JPanel passwordRow = new JPanel();
passwordRow.setBackground( client.getBackground() );
passwordRow.setLayout( new BoxLayout( passwordRow, BoxLayout.X_AXIS ));

// Create the prompt and entry field for the password.
JLabel passwordPmt = new FixedLabel( userPmts[2], maxWidth );
passwordRow.add( passwordPmt );
passwordRow.add( Box.createHorizontalStrut( 10 ) );
passwordEdit = new JPasswordField( "", 15 );
passwordEdit.addFocusListener( this );
passwordEdit.addKeyListener( this );
passwordRow.add( passwordEdit );
// Add the password row to the panel.
p1.add( passwordRow );

// Add a Help button to the dialog.
helpButton = new UFButton( generalResources.getString( "HelpButton" ), true );
addButton( helpButton );

}

Notice that five lines were added to the original code. The first line that was added was added to the client panel:

client.setBackground( TWGConsoleColor.getMenuColor() );

In the preceding line, the main panel of this dialog has its background color set to the menu color. The remaining four lines that were added all follow the same convention. Since the four controls that make this call were intended to match the client panel, they all set the background to match the client background:

p1.setBackground( client.getBackground() );

If the menu color changes in the future, this dialog will respond without any changes to its code. If the client background is changed, all matching controls will conform.

You must follow the new guidelines on Accessibility for colors and blinking objects. Also, see the topics on best practices for the layout of GUI panels and Tables for more information on employing color to enhance the user-experience.