Exercise 8.1 Exploring Look and Feel
InstallAnywhere provides many options for altering the look and feel of the installer. You can add splash screens, display a list of steps or an image along the left side of the installer panel, add a background image that will display behind the steps, or add billboards and graphics (even animated graphics) that display in the large right-hand display of the installer.
Installer UI Modes
Defined by the Allowable
UI
Modes, InstallAnywhere installers can run in several different modes defined by the end-user interface.
AWT:
The classic InstallAnywhere interface, this mode results in a simple gray installation interface. AWT mode is compatible with Java 1 VMs, including Microsoft JView.
Swing:
Swing is the newer end-user interface provided by the Java 2 specifications. InstallAnywhere's Swing installer interface provides a rich end-user experience, including background graphics, rendered HTML, and alpha transparency for graphics used in the installer. The InstallAnywhere installer itself is an example of a Swing installer.
Console:
Console mode provides a TTY, or terminal-style, interface that can allow an interactive installation on a system lacking a graphical end-user interface. (Please note that you may still need to set a display and/or have Xwindows running.)
Silent:
Silent installers are, as the name implies, silent installers that require and provide no end-user interaction. Silent installers can either run without any input or accept data from a properties file containing the values for specific InstallAnywhere variables used to control the installation.
Splash Screens
InstallAnywhere installers present a splash screen at the initial launch of the installer. This screen is displayed for a few seconds while installer resources are extracted and the installer environment is set up. The splash screen is an ideal introduction to your product and an opportunity to set its mood and image. The splash screen will also appear on the HTML page generated for the InstallAnywhere Web Install Applet.
Background Images
InstallAnywhere has the ability to add customized background images to your installer. This feature allows you to create a truly unique installer by superimposing the left-hand installer steps or image screen and the right-hand informational or interactive rectangle upon a background image.
GUI Panel Additions
The Additions to GUI Installer Panels option allows developers to display a list of steps or an image along the left side of the installer's panel.
Billboards
Billboards are graphics that the installer will display during the installation of files. You can use files to convey a marketing message, a description of your product, or simply something fun for your end-user to see as the file installation is occurring. Each billboard you add will be displayed for an even amount of time, based on actions within the installation. If you have very few files and many billboards, each will only be displayed for a short time.
One of the more interesting features of the Billboard action is the support included for animated GIF files. This allows you to add animations to your billboard, providing your end-user with a rich media experience during installation.
Help
Help is available to the users of the InstallAnywhere installer. Help files may be written in either HTML or plain text. With HTML you use HTML tags to define formatting. With plain text there is no formatting. Help may be associated with a panel, or the same Help text may be displayed regardless of the panel being shown to the end-user.
Exploring the Look and Feel Task
The Look and Feel task includes several subtasks defined in the tabs across the top of the task. Each of these tasks controls a specific portion of the installer.
1. | Open the OfficeSuite project you created earlier and browse to the Project | Look and Feel | General
UI
Settings task.
The Installer
UI
| Look and Feel subtask contains three tabs that enable developers to configure the look and feel of the installer and to customize many graphic elements and progress panels within it. Within these three tabs are different preview buttons that will display the look and feel of the installer with the current settings.
The Installer
UI
| Look and Feel | General
UI
Settings tab sets general look and feel settings for the installer. Developers select whether the installer will work in GUI, Console, or Silent mode. (An installer may support all the modes at the same time.) The preferred graphics mode, whether AWT (built with Java's Abstract Window Toolkit) or Swing (an addition to AWT), can also be set. Swing offers the ability to display a background image, such as a company logo, in the installer. The specific background image can also be defined in this tab of the Installer
UI task.
|
2. | Set the UI modes.
- a. In the Allowable
UI
Modes section, select AWT and Swing.
- b. In the Preferred GUI Mode section, select Swing.
If we wanted a Silent or Console installer, we could enable these modes here.
The Preferred GUI Mode option sets which mode the installer will prefer. The Swing option will only be available if the virtual machine against which the installer is running is Swing compliant. If AWT is chosen as the preferred mode, the installer will run in AWT mode when a graphical mode is available.
|
3. | Explore splash screens.
- a. In the Startup Splash Screen Image section, click the Preview button to see an example of the splash screen.
InstallAnywhere installers present a splash screen at the initial launch of the installer. This screen is displayed for a few seconds while the installer prepares the wizard.
- b. Click Choose to select an image for the splash screen.
Several splash images can be found in the Images and Docs folder.
The splash screen will also appear on the HTML page generated for the InstallAnywhere Web Install Applet. It can be a GIF, PNG, or JPEG file of any size, although the preferred size is 470 × 265 pixels.
|
4. | Select a background.
- a. In the Installer Background Image section, select Preview.
- b. In the Installer Background Image section, click Choose.
- c. Select a background graphic of your liking.
- d. In the Installer Background Image section, select Preview.
The InstallAnywhere installation includes a number of background images, which are free for your use (and notably without royalties). These images are located in the graphics/background folder within the InstallAnywhere installation.
The background image is behind the entire GUI image, behind both the left area (which can have install steps) and the right informational rectangle. The background image you choose will appear in every panel in your installer. Background images are only supported in Swing GUI installers.
|
5. | Make additions to the GUI installer panels.
- a. In the Additions to GUI Installer Panels section, select Add images or a list of installer steps on the left side of the installer panel.
While selecting Add images or a list of installer steps, watch the remaining two tabs of the Installer
UI
| Look and Feel task. As the option is selected, the Installer Panel Additions and Install Progress Panel tabs will become active.
If Additions to GUI Installer Panels is not selected, the Installer Panel Additions or Install Progress Panel tabs will not be accessible because there will be no additional progress panels to modify. These additional panels are either images or labels.
- b. Select the Installer Panel Additions tab.
The Look and Feel | Installer Panel Additions tab allows developers to customize installer panels for the left-hand-side install-progress-steps rectangle.
- c. In the Types of Additions to Installer Panels, select Images.
If Images is selected, no install labels will be displayed. Selecting Images provides the ability to select a default image in the Default Installer/Uninstaller Panel Image section of the Installer Panel Additions tab. When Images is selected, the default image may be overridden by specifying an image in the Install Progress Panel tab. The developer may also choose not to display an image or to use the same image as the previous panel.
Later we will show that you can also put a background image behind steps in the left-hand-side install-progress-steps-rectangle.
- d. Click Preview.
- e. In Types of Additions to Installer Panels, select List of Installer Steps.
Selecting List of Installer Steps provides labels that can be customized.
If List of Installer Steps is selected in the Look and Feel | Installer Panel Additions tab, the Installer Steps Background Image option will be available, if Use This Image as the Background behind the List of Installer Steps is selected. The Installer Steps Background Image option enables developers to select a specific image to display in the rectangle on the left-hand side, where installation step labels will be displayed.
When using Swing, a transparent image can be displayed on top of the background image selected in the Look and Feel | General
UI
Settings tab.
NOTE
The size of the install progress pane is 380 × 270 pixels. Installer dimensions may change slightly by platform to display text and different fonts better.
- f. Alter the order of steps.
Using the arrows allows you to change the order of the steps.
- g. Edit labels.
To change a label, select the installer step whose label you want to change and click the Edit label button. For instance, “Pre-Installation Summary” can be changed to “Summary.”
- h. Change icons.
Choose Icons… enables developers to alter the small square graphics to the left of the text labels. The default icons are double arrows for the current step or steps to be completed and a check mark for installation steps that have been completed.
|
6. | Select Look and Feel | Billboards.
Billboards are images that appear in the large right-hand pane of the installer while files are being installed. Billboards generally convey a marketing message, a description of the product, or simply something fun for the end-user to see as the installation is occurring.
- a. In the Billboard section near the bottom of the window, click Preview.
- b. Click the Add Billboard button near the center of the screen.
- c. In the InstallAnywhere 6 EnterpriseOfficeSuiteSourceFiles ImagesandDocs folder, select billboard1.gif.
There are several billboard graphics available in the Images and Docs directory within the OfficeSuite Source Files folder. In this case, we advise adding two billboards to the installation (if you add more than two, the appearance of the panels will be too short due to the small number of files in this installation).
Billboards can be GIF, PNG, or JPEG files, and should be 587 × 312 pixels in size.
NOTE
The size of the billboard panel is 587 × 312 pixels. Installer dimensions may change slightly by platform to display text and different fonts better. - d. Click Choose.
- e. Select billboard2.gif.
- f. Click Preview.
Each billboard added will be displayed for an even amount of time, based on actions within the installation. If an installation has very few files and many billboards, each billboard will only be displayed for a short time. Several billboard graphics may be added for larger (and longer) installations. For small installations, like the tutorial OfficeSuite example, only one billboard will show. Billboards may also be assigned to features and will only be displayed if the features they are associated with are installed.
When adding multiple billboards, the billboards will display in the order they are shown in the Project | Billboards | Billboard List.
|
7. | Explore Help options.
- a. Browse to Installer
UI
| Help.
- b. In the top section, select Enable installer help.
- c. In Help Text Format, select HTML.
- d. In Help Context, select Use the same help text for all panels.
- e. In the Title text field, enter “Sample Help Text.”
- f. In the Help Text text field, enter <b>OfficeSuite</b> Help<p> This is an <i>example</i> of HTML Help.
- g. Click Preview.
- h. Click Close.
|
8. | Rebuild the project.
- a. Click Build.
- b. Click Build Project to build the OfficeSuite installer.
- c. Click the blue arrow on the lower left of that dialog to see the build details console.
|
9. | Test the Web applet page customization.
|
10. | Test the installer customizations.
|
