Modifying the default Vibe OnPrem icons

  • 7007607
  • 19-Jan-2011
  • 27-Apr-2012

Environment

Novell Vibe OnPrem 3

Situation

While most style changes can be easily made using the administrative UI and simple modifications of the Vibe OnPrem style sheets, there are certain icons which require a more complex approach. These icons appear in the "Masthead", "Action Toolbar" and "Navigation Panel" such as the administration, logout and help icons.

See Figure 4-1 in Section 4.5, "Customizing Vibe Styles" for a reference of where exactly these are located in the Vibe OnPrem UI.

Resolution

This section lists the pre-requisites necessary to modify one or more icons in the areas mentioned above, some general guidelines followed by an example to change the Logout icon. This process involves recompiling the Google Web Toolkit (GWT).

Pre-requisites:
  1. Setup a Kablink Teaming development environment. A very detailed guide can be found on the Kablink Community located here.
  2. Shipping Vibe OnPrem 3.0 (stable) source code can be checked-out from here.
    Note: The icons/images are located in the gwt/src/org/kablink/teaming/gwt/public/images/ folder.
If you encounter problems or have questions setting up the Kablink Teaming development environment, it is recommended you seek help in the Kablink Community.

General guidelines for changing an icon:
  1. Open the java file that creates the UI for the area you are interested in.
  2. Search for GwtTeaming.getImageBundle() in the file opened in step #1 until you find the method call that loads the image you want to change.
  3. Open GwtTeamingImageBundle.java and search for the method you identified in step #2.
  4. Look at the statement on the line prior to the method definition and find the name of the image being used.  The statement typically starts with "@Source(".
  5. On the file system, replace the image identified in step #4 with the image of your choice.
  6. With the help of the 'ant deploy' command on the gwt directory, your changes should deploy to your Vibe OnPrem installation specified in the app.server.<username>.properties file.

Changing the Logout icon:

This example will walk you through the process of changing the Logout icon in the Masthead following the guidelines listed above:
  1. Open the java file that creates the UI for the Masthead:
    MastHead.java

  2. Search for GwtTeaming.getImageBundle() until you find the method call that loads the image you want to change:
    There are 2 logout images used, GwtTeaming.getImageBundle().logout1() and GwtTeaming.getImageBundle().logout2()

  3. Open GwtTeamingImageBundle.java and search for the method you identified in step #2:
    Search for logout1() and logout2()

  4. Look at the statement on the line prior to the method definition and find the name of the image being used.  The statement typically starts with "@Source(":
    For logout1(), the prior statement reads, @Source("org/kablink/teaming/gwt/public/images/logout1.png").  logout1.png is the file to replace.
    For logout2(), the prior statement reads, @Source("org/kablink/teaming/gwt/public/images/logout2.png"), logout2.png is the file to replace.

  5. On the file system, replace the image identified in step #4 with the image of your choice:
    To replace the 1st logout image, go to the directory, org/kablink/teaming/gwt/public/images, on the file system and replace the file logout1.png with the new image file.
    To replace the 2nd logout image, go to the directory, org/kablink/teaming/gwt/public/images, on the file system and replace the file logout1.png with the new image file.

  6. Using the 'ant deploy' command, the above changes are successfully deployed to the Vibe OnPrem installation.