Business Graphic Objects

To create a business graphic object, you will assemble standard ILOG Views objects together into a specific design. In this example, you will create a prototype composed of a gauge and a label, to display a value in both analog and digital formats.

First, launch the prototype editor prstudio.exe (ILOG Studio with prototypes). This editor is based on the standard ILOG Views Studio. The only difference is the prototype management. If you want to know more about the use of ILOG Studio, please refer to the corresponding section of this tutorial: "Gadgets and Studio" or refer to the ILOG Studio User's Manual. When PrStudio starts, it shows a main window and a palette window containing already defined prototypes. In fact, the palette window contains several categories of objects that can be selected through the graphic tree. The category selected by default is the "samples" category of prototypes.

To create a new prototype, select File - New - Prototype command. A new window is opened in the workspace to let you create your new prototype, and the "Prototype Inspector" is popped up.

Design
As we want to use basic ILOG Views objects, we need to pop up the necessary palette window. Click on the "Gauges" category in the palette window (scroll down to see it), and you should see the available gauges. We will use the circular gauge (the last one).
In fact, this gauge is composed of two objects: a circular scale and a needle. Drag and drop these two objects into your prototype window. For alignment, press the alignment button in PrStudio main window toolbar 

When the alignment window appears, select the two objects you've just dropped into your window, and press the "Center Horizontally" and "Center Vertically" buttons.

Now select the "Gadgets" category in the palette window, and drag and drop a "Message Label" gadget. Move it to where you want it. Edit it by double-clicking on it with the node selection tool (arrow button at the top of the vertical toolbar on the left side of the window). Select the "Specific" tab and change the default value from "MessageLabel" to "0". In the same tab, you can change the alignment to "Center" so that the displayed string is centered in the gadget. Click "Apply" to apply your changes in the Prototype window.

Note: You may also edit the circular gauge (needle) and the scale to change the start angle to 225 and the range to -270. Edit the scale and go to the "Angle" page to modify the start angle and range. Edit the gauge (needle) and go to the "Specific" page to do the same. Also change the gauge default value ("Value" field on the "Specific" page) to 0 to be consistent with the label. You will probably have to adjust the dimensions of the needle, so the changes to the default value will cause the needle to point to the correct number on the scale.
At this point, you should see something like this:

The design of your prototype is now defined. If you want a fancier object, you may change the graphic resources (like colors or line thickness).

Behavior
To define the prototype behavior, you will need to use the prototype inspector. It should be already opened. If not, double-click on the prototype in the editing window using the Group Selection tool (second button from the top on the vertical toolbar on the left).
In the prototype inspector:

• The "Values" page shows the properties of the prototype. You will use it later.
• The "Nodes" page shows all the basic ILOG Views objects used to compose the prototype. Here, you should have three objects called IlvCircularGauge, IlvCircularScale and IlvMessageLabel. Change the names by selecting them and updating the "Node Name" field with Needle, Scale and Label.
• The "Accessors" page lets you define the prototype's internal properties and its behavior. In this example, you will define a value that affects the position of the needle and the value displayed in the label.

In the "Name" field, enter "GaugeValue" or another name.
The "Action" field is a pull-down cascade list. Choose the "Data" category and the "Export" option.
In the "Type" field, select "Int" (integer).

Below these text fields is a table with only the "Accessor" row. If you click on the right cell, it will show a pulldown list showing the possible values for this accessor.

First click on "All types" to see all the possible values, go to the "Needle" node, open it, and then select "value". The accessor is now Needle.value.

The "GaugeValue" accessor will now automatically affect the circular gauge value. Click the "Add" button to validate the new accessor. It will appear in the accessor list.

Click on the "Values" tab: you see a new property named "GaugeValue" and its default value is 0. Click on the default value cell and change the value. As soon as you validate, the prototype is updated to reflect the change. For example, change it to 10.

Go back to the accessor page. You will now add another accessor so that the value is also displayed in the label. Click on Needle.value in the left pane. In the "Accessor" row, change "Needle.value" to "label.label" by manipulating the drop-down list (You might have to click "all types" to reveal the "label" field in the list for the "Label" object). Then click the "Add" button to add this new action to the prototype. The new action is created, related to the same accessor. When "GaugeValue" changes, it updates the needle position and the label content.

Go back to the "Values" page, and change the GaugeValue again. The prototype should be correctly updated. The new value should be updated by both the text and the gauge.
Now close the prototype inspector and save your prototype in a library. The libraries allow you to group prototypes together, and each library appears in the palette window. You may choose an existing library or create a new one. For example, enter "Tutorial" as a new library name. Enter the library file name (.ipl file), and enter a name for your gauge. It will appear later in the palette window. Your prototype will be saved as two files: a graphic file (SuperGauge.ilv) and a behavior definition file (SuperGauge.ivp).
The palette window now looks like this:

Without any C++ coding, you have created a complex graphic object that changes when its internal value changes. The prototype editor provides many other features, such as animation capabilities (with timers), conditional expressions, operations, ILOG Script integration, etc. You will see in the following steps how this prototype can be used in panels and C++ applications.