Creating the User Interface |
|
|
|
Creating the User Interface |
|
|
Creating the User Interface |
|
|
|
Creating the User Interface |
|
|
|
|
||
User's Guide - Chapter 5: Creating the User Interface
Creating the user interface is an integral part of every project since the user interface is the first thing your end users will see when they run your patch. It also serves as a bridge between the information that the user has and that the patch wants. Having an easy to use yet fully functional user interface is something that all developers working with Visual Patch should be concerned about.
This chapter will introduce you to the user interface and get you well on your way to creating a sharp and consistent look and feel for all of your projects.
You can think of the user interface as any part of the patch process that the end user will see. When a screen is displayed, the end user is seeing part of the user interface. When the end user clicks the Next button, the end user is interacting with the user interface.
The basic elements of the user interface are:
• Screens
• Themes
• The Background Window
• Taskbar visibility
• Any actions that generate a user interface element (e.g. Dialog.Message, StatusDlg.Show)
The most important aspects of your user interface are the screens that you choose to display, since this is where your end user will actually interact with the patch. Screens allow you to provide important information, such as whether or not a valid software version was located.
Screens are the individual windows that make up your patch. When you navigate through a patch by clicking the Next and Back buttons, you are navigating from screen to screen, exactly as you would navigate through any wizard.
Tip: You can think of the screens in your project as steps in a wizard, walking your user through the process of patching your software.
The screen manager is where you will configure all of your screens. In Visual Patch, the screens are divided into three stages.
The three patching stages at which screens can be displayed are:
• Before Patching
• Progress
• After Patching
Each screen stage is represented by a tab on the screen manager.
The Before Patching screens are displayed before the actual patching of any files occurs. In general, if the end user cancels the patch during this stage, no files will be patched on their computer.
This stage is used to perform such tasks as letting the user know what version his or her software is being patched to, displaying a license agreement, and collecting user information.
The Progress screen stage is displayed while the files on the end user’s computer are being patched. This stage differs from both the Before Patching and After Patching stages in that only one screen can be displayed (as opposed to a sequence of screens), and it must be a progress screen.
This stage is used to display the file patching progress as it occurs. In other words, while the user’s files are being patched, the screen you chose for the Progress stage will display information about the progress of the patch, such as what file is being patched, what percentage of all files have been patched thus far, and what percentage of the current file has been patched.
The After Patching stage is the final screen stage and occurs after all of the files have been patched on the end user’s computer.
This stage is typically used to show a reboot advisement (if needed), provide any post-patch instructions, and inform the user that the patch has finished successfully.
Adding a screen to your patch is easy. Select the stage where you want to add the screen, and click the Add button at the bottom of the screen manager.
Note: The Progress screen stage is different since a maximum of one screen is allowed. For this stage, the button is labeled "Change" instead of "Add."
Clicking the Add button brings up a screen gallery where you can select from a variety of screen types. Select the type of screen you want and click the OK button to add it to the list of screens for the stage that you’re currently working on.
To remove a screen from your patch, simply select it in the screen list and click the Remove button.
Tip: If you remove a screen from your patch by accident, you can undo the deletion by pressing Ctrl + Z, or by pressing the Cancel button.
In general, the order in which screens appear in the screen manager will be the order in which they appear during that screen stage. The screen that is at the top of the list will appear first and the screen that is at the bottom of the list will be the final screen of that stage.
To change the order of your screens, select a screen in the list and click the Up or Down button until it’s in the desired location. Or, if you prefer, you can simply drag the screen from one position to another.
Tip: You can also use the cursor keys to move a screen up or down in the list. Simply select the screen you want to move, and press Alt+Up or Alt+Down.
To edit a screen’s properties, select it in the list and click the Edit button.
Clicking the Edit button opens the Screen Properties dialog where you can edit and customize all of the settings for that screen.
Tip: You can also edit a screen by double-clicking on it in the list.
The Screen Properties dialog is where you can edit the properties of a specific screen. All Screen Properties dialogs have the same four tabs (although the specific content on these tabs may differ): Settings, Attributes, Style and Actions.
The Settings tab allows you to edit properties that are specific to the selected screen. Each screen type has different settings that are specific to that type of screen. For example, a Check Boxes screen will have settings that apply to check boxes on its Settings tab.
For more information on the specific screen settings, please see the Visual Patch help file.
The Attributes tab contains settings that are common to all screens. The only difference that you will find between Attributes tabs is that progress screens lack options for the Next, Back, and Help buttons. (Those buttons don’t exist on progress screens.)
The Attributes tab is where you can configure which banner style to use, the name of the screen, and the navigation button settings.
The Style tab is where you can override the project theme on a per-screen basis. By default the project theme is applied to all screens throughout your project; however, there might be some instances where you feel a certain screen needs something a bit different in order to stand out. You can use the Style tab to override any of the theme settings on a specific screen. (The changes will only be applied to that screen.)
The Actions tab is where you can edit the actions associated with the screen’s events. For more information on actions please see Chapter 6.
The Settings and Attributes tabs both have a language selector in the bottom right corner. The language selector is a drop-down list containing all of the languages that are currently enabled in the project. It is used for creating multilingual patches.
Selecting a language in the list allows you to edit the text that will be used on the screen when that language is detected.
Session variables play a large part in the way that screens work and how they display their text. Anytime you see something in Visual Patch that looks like %ProductName%, you are looking at a session variable.
Note: A session variable is essentially just a name (with no spaces) that begins and ends with %.
Session variables are very similar to normal variables in that they serve as "containers" for values that may change. We say that values are "assigned to" or "stored in" session variables. When you use a session variable, its name (e.g. %ProductName%) is replaced at run time by its value (e.g. "Visual Patch"). Session variables are basically placeholders for text that gets inserted later.
Session variables are often used in the default text for screens. They are automatically expanded the first time the screen is displayed, so instead of seeing %ProductName% on the screen, the end user will actually see the product name that you entered in the session variable editor (Project > Session variables).
Session variables are also used to store return values when screens or controls need them. For example, an edit field screen will use session variables to store information that the user has entered.
Tip: Session variables can be created and changed at run time using actions like SessionVar.Expand, SessionVar.Get, SessionVar.Remove, and SessionVar.Set.
For more information please see Chapter 7, which discusses session variables in more detail.
Screen navigation can be thought of as the path that the end user takes through the visible part of the patch process. The end user navigates forward through the screens by clicking the Next button, and backward through the screens by clicking the Back button.
The default screen navigation is a linear path from the top of your screen list in the screen manager to the bottom. Generally, the order of your screen list in the screen manager is exactly the order in which the navigation will proceed.
Although there are other ways to control the path through the screens (e.g. using actions to create a "branching" path), in most cases the default behavior is all that is needed.
In its simplest form, screen navigation is when the end user moves forward or backward through your patch by clicking the Next and Back buttons. By default, this moves the end user down or up through the list of screens on the screen manager.
This is actually accomplished using actions. Each screen has Screen.Next and Screen.Back actions on its On Next and On Back events which are performed when the Next and Back buttons are clicked. If you ever need to, you can modify or override the default behavior of any screen by editing or replacing the default actions. Most of the time, however, you will not even need to know that the actions are there.
Navigation buttons are the Back, Next, and Cancel buttons that are usually visible along the bottom (or "footer") of each screen. The Next button moves the end user down the screen list from the top to the bottom, the Back button moves the end user up through the screen list, and the Cancel button stops the user’s navigation by canceling the patch.
The settings for these buttons can be found on the Attributes tab of the screen properties dialog. There you can change the text, enabled state and visible state of these buttons.
The two options for the visibility state are self-explanatory; they make the button either visible or invisible. The two options for the enabled state make the button enabled or disabled. If a button is in the enabled state, it looks and functions like a normal button; it will depress when the user clicks on it, and the text is displayed in its normal color (usually black). When a button is in the disabled state, however, it will not respond to the user’s mouse, and is typically drawn in less prominent gray colors (also known as being "ghosted" or "grayed out").
Each navigation button has an event that will be fired when the button is clicked. These events can be found on the Actions tab of the screen properties dialog.
Note: A Help button is also available on the footer of each screen but is generally not considered a navigation button.
An event is something that can happen during the patching process. When an event is triggered (or "fired"), any actions that are associated with that event are performed. Note that an event must be triggered in order for its actions to be performed.
Each event represents something that can happen while your patch executable is running. For example, all screens have an On Preload event, which is triggered just before the screen is displayed. To make something happen before a screen is displayed, you simply add an action to its On Preload event.
All of the three navigation buttons have an event that will be fired when they are clicked. The events are "On Back" for the Back button, "On Next" for the Next button and "On Cancel" for the Cancel button.
In the case of the three navigation buttons, navigation actions are executed when their respective events are fired. This allows the end user to navigate through the patch from the beginning to the end.
There are other events that are associated with screens but aren’t necessarily related to screen navigation:
• On Preload – just before the screen is displayed.
• On Help – when the help button is selected.
• On Ctrl Message – triggered by a control on the screen.
There are six navigation actions available to you in Visual Patch: Screen.Back, Screen.End, Screen.Jump, Screen.Next, Screen.Previous, and Application.Exit. Of those, the most commonly used are Screen.Next and Screen.Back.
When the Next button is clicked, the user is attempting to navigate from the current screen to the next screen or phase of the patch. The easiest way to implement this behavior is to insert the Screen.Next action on the On Next event. This is done by default for all screens.
The same holds true for the Back button; when the Back button is clicked, the user is attempting to move backwards in the patch to the previous screen. To implement this behavior, a Screen.Back action needs to be executed when the On Back event is fired.
Tip: The Screen.Back action moves backward in the patch’s history in the same way that a Back button does in a web browser. To move up (back) one screen in the screen list, use the Screen.Previous action.
In certain situations, simply moving down the screen list is not the appropriate behavior; instead, jumping to a specific screen in the screen stage is necessary. You can accomplish this by using a Screen.Jump action. If the goal is to jump to the next phase in the patch-i.e., to end the current screen stage-a Screen.End action can be used to jump past all of the screens in the current screen stage.
To interrupt screen navigation-which usually occurs when the Cancel button is clicked-you can use an Application.Exit action. The Application.Exit action causes your patch to stop as soon as it is performed.
Note: For more information on the specifics of screen actions, please see the help file.
In Visual Patch choosing a layout for your screens and the controls on them is simple. You can switch between all three banner styles (top, side, and none) on any screen that you like. The controls on your screens will dynamically position themselves ensuring that all of your information is visible.
Note: A control can be thought of as the visible elements on a screen, from edit fields, to radio buttons, to static text controls. However, when the term "control" is used, it does not generally refer to the navigation buttons or banner text.
Screens in Visual Patch are divided into three basic parts: the header, the body and the footer.
The header runs across the top of each screen and is the area that the top banner fills.
The footer is similar to the header area except that it runs along the bottom of each screen. This is the area of the screen where the navigation buttons are placed.
The body is any part of the screen that is not taken up by the header or footer- it takes up the majority of each screen and contains most of the screen’s information.
In Visual Patch the term banner refers to an area of the screen that is special and somewhat separate from the rest of the screen. You can use the banner area to display some descriptive text, an image, or both.
There are three different types of banner styles available in Visual Patch: none, top, and side.
Setting the banner style to none is the easiest of all three styles to understand since it means that there will be no banner displayed on the screen.
The top banner style will give you a long thin banner across the top of your screen (the header). This is the style that you will probably apply to the majority of the screens in your project. The top banner style supports two lines of text referred to as the heading text and the subheading text. This text is usually used to describe the current screen and/or provide some information about what is required of the end user.
The top banner style also supports an image that will be placed on the right hand side of the banner. Visual Patch will resize this image proportionally so that its height matches the height of the top banner. The width of the image can be as wide as you want and can take up the entire banner if necessary.
Any area of the top banner that is not covered by an image will be painted with a color according to the project theme.
The side banner style will give you a thick banner that runs down the left side of your screen. The side banner will start at the top of the screen and then stop just above the screen’s footer. This is the side banner area.
The side banner style supports an image that will automatically be stretched or resized by Visual Patch to fill the entire side banner area.
One of the best features of the Visual Patch system is the dynamic control layout ability of screens. Visual Patch will dynamically reposition the controls on your screen so that the maximum amount of information stays visible.
Dynamic control layout means that controls will resize and layouts will adjust automatically as you add more text. The layout will be automatically chosen based upon your control settings.
For example, you do not have to worry about fitting your descriptive text within two or three lines. If you want a fourth (or fifth) line just type it in, and all of the controls on the screen will adjust to fit the new lines of text.
The dynamic repositioning of controls takes place within an area called the control area. The control area of a screen occupies a sub-section of the screen’s body area. Its size is controlled by the theme settings.
The best part of the dynamic control layout feature is that it works without any effort on your part. Simply fill your screens with all of the information and controls that you desire, and Visual Patch will re-position all the controls so that everything is visible.
Of course, you still have full control over how controls will be displayed on your screen. Many screens (Edit Fields, Checkboxes, etc.) allow you to add as many as 32 controls to your screen, which Visual Patch will dynamically position. You have the ability to choose how many columns you want the controls displayed in, whether they are distributed horizontally or vertically and, in the case of the Edit Fields screen, how many columns each control spans!
The best way to understand the dynamic control layout feature is to use it. Try playing around with the settings of a Check Boxes screen or Select Folder screen and observe how Visual Patch positions your controls to achieve the best look possible.
A theme is a group of settings and images that control the way your patch looks. You’ve probably encountered themes before when using other applications or even Windows XP. Themes do not change what is displayed; instead, they change how it is displayed.
Themes in Visual Patch control the general appearance of your screens and the controls they contain. Rather then controlling the position of screen controls or the banner style used, themes control the color and font of screens and controls. Themes are project-wide and affect all screens in the patch unless intentionally overridden on the style tab of the screen’s properties.
Themes provide an easy way to change the look and feel of your screens and controls without having to go to each screen and update it every time you wish to apply a new visual style.
You can choose a theme for your project on the theme tab of the Project Settings dialog, which you can access by choosing Project > Settings, and clicking on the Theme tab.
The drop-down list on the Theme tab contains a list of all the themes that are available in the project. Selecting a theme in this drop-down list will apply the theme to all of the screens in your project. For your convenience, a preview of the currently selected theme is displayed on the Theme tab as soon as you make a selection.
As shown above, themes affect the appearance of screens and their controls. For example, choosing a theme that colors static text controls purple will result in all static text controls being purple, and choosing a theme that colors static text controls black will result in all static text controls being colored black.
Visual Patch allows you to create your own custom themes. This provides you with an easy way to share the same custom look and feel between multiple projects.
Here is a brief step-by-step guide to help you in the creation of a custom theme.
Start a new project by choosing File > New Project from the menu, then open up the theme settings by choosing Project > Settings, making sure that the theme tab is selected.
The first step in creating a custom theme is to select an existing theme to base your new theme upon. If you cannot find a suitable theme, simply choose the default theme.
Once you have selected a theme to start from, use the Save As button to save a copy of it under a new name. Choose a name that describes the theme you plan to make; this theme is what you will be modifying in order to create your new theme.
Make sure that your new theme is selected and press the edit button to bring up the theme properties dialog. Here you will be able to edit all of the properties of your theme. Once you have made all of your changes, simply click the Ok button and the changes to your theme will automatically be saved.
Now you have a working theme that will be available to you in all your Visual Patch projects.
Note: If you are not happy with the changes made while editing your theme, simply click the Cancel button and your changes will not be saved.
As stated earlier, project themes affect every screen in your project. While in the vast majority of situations this is the desired effect, there may be a few instances where this is not exactly what you want. Fortunately, Visual Patch allows you to override any or all of the theme settings on any of your screens.
As mentioned in the Screen Properties section, each screen has a style tab associated with it. If you look at the Style tab you will notice that it looks identical to the Theme tab on the Screen Properties dialog except that it has a checkbox in the top left corner labeled "Override project theme."
Choosing the override project theme option will enable the theme settings and allow you to make changes to the theme settings strictly for the current screen. The changes you make on the Style tab will not affect any of the other screens in your project.
Note: If you decide that you want to go back to the project theme on a screen where you have overridden it, simply go to the Style tab and uncheck the Override project theme checkbox. There is no need to re-create the screen.
The background window is an optional maximized window that can appear behind all screens in your patch. Its main use is to focus the end user’s attention on your patch by blocking out the rest of the desktop.
The background window can be enabled in one of three styles:
• Standard – all the features of a normal application window (i.e., a title bar with a close button and a standard window border).
• Bordered – a standard background window without a title bar or close button.
• Kiosk – a standard background window without a title bar, close button, or border.
Note: The text on the window title bar is controlled by the %WindowTitle% session variable.
No matter which of the above styles you choose, you can configure the appearance of the background window through the Background Window tab on the Project Settings dialog (Project > Settings). You can specify what the content of the background window should be (solid color, gradient, or an image), what text will appear on the window, and how the text will look (font, size, and style). You have the option of having a heading, subheading, or footer in any combination, or none at all.
There are a few other options in Visual Patch that relate to the user interface of your patch. These options may not be as important as screens or themes, but they just might provide the elements necessary to perfect your project’s look and feel.
The taskbar is the bar that runs across the bottom of all modern Windows operating systems beginning with the START button on the left. When a program is running, its icon and name will generally appear in a button in the taskbar.
Visual Patch allows you to choose whether or not to show an icon in the task bar and to choose what that icon will be. Both of these settings can be found on the Advanced tab of the project settings: Project > Settings.
To hide the taskbar icon simply check the hide taskbar icon checkbox on the Advanced tab. To choose a custom icon simply check the use custom icon checkbox to turn on the custom icon setting and then click the browse button to locate the icon of your choice.
Note: If you configure your patch to be a silent patch in the advanced settings then no taskbar entry will appear.
Some of the actions available to you in Visual Patch are capable of showing user interface elements. These actions can be divided up into two main categories: Dialog actions and Status Dialog actions.
Dialog actions are used to show pop up dialogs to the end user. Examples include the Dialog.Message action that lets you display a message in a dialog, and the Dialog.TimedMessage action that lets you show a dialog with a message for specific amount of time.
Status dialogs are the other main user interface elements that are available to you through scripting. Status dialogs are mainly used to show progress or status during a lengthy event like an HTTP.Download action or a File.Find action.
Status dialogs are shown and configured using actions like StatusDlg.SetMessage, StatusDlg.ShowProgressMeter, and StatusDlg.Show.
Note: It is generally recommended that progress be shown in a more integrated manner using a progress screen, however there are situations where a status dialog may be more appropriate.
Note: For more information on the Dialog and StatusDlg actions, please see the Visual Patch help file.
Learn More: Indigo Rose Software - Visual Patch - Buy Now - Contact Us