ILOG Views Controls

In this section, you will create a simple application with two panels. The first panel has two buttons (Open and Close) which will allow the user to open or close the second application panel. A check box will indicate if the second panel is opened or closed. During the different steps, ILOG Studio will be used to design the user interface and generate C++ code.

To begin the first step, launch ILOG Studio. (If you have any trouble launching ILOG Studio, or if you need more information, please refer to ILOG Studio user's manual.)

The editor starts with a main window that contains two windows (the application window and the edited-panel window), and a palette-dockable window showing all the objects available for the graphic interface. It should look like this:

The palette window shows all the graphic objects available for designing the interface panel. The tree at the top of the palette window shows the different groups of available objects. At this stage, you only use gadgets.

Your panel will be designed in the edited panel window, which is now empty. To use a gadget in your panel, simply drag and drop it from the palette window into your panel window.

To begin, drag and drop a button from the palette window into the panel-editing window. The black handles around the button show that it is selected. You can move it and resize it. Now double click on this button. This operation opens a new window, called the inspector. In the button inspector, you can change the label (the message displayed in the button) and define a callback for the button.

To change the button label, click the Specific tab to access the button-specific properties, and change the Label field with open instead of the Button existing label.

The rest of the inspector window lets you customize other properties, such as adding icons to buttons, or specifying label alignment. If you uncheck the Show Frame box, the button border will not be drawn until the mouse rolls over it. This feature illustrates the Windows 98 look-and-feel for the new style of tool bars and menu bars (also called "cool bars" or "rebars"). You can also specify an auto-repeat period if you want the button action to be repeated as long as the button is pressed.

Now you can specify a callback for this button. A callback is a C++ method that is called when an action is triggered on the gadget. With buttons, the generic callback is called when the user clicks on the button (this is the most commonly used callback). For instance, the Focus In callback will be called when the button gets the keyboard focus, and the Enter Gadget callback will be called when the mouse pointer rolls over the button. Each callback can have a value that is passed to the callback method as an argument.

In this example, a C++ method called OpenPress is called when the user clicks the Open button. You can now do the same with a second button. Change its label to Close, and define a callback called ClosePress. If you want to improve the appearance of your interface, you might consider aligning the buttons using ILOG Studio's alignment function.

Now add a toggle to indicate the state of the second window. The procedure is the same as for buttons: drag and drop a toggle, and double click to show its inspector.
In the inspector, click the General tab:

• It is important to specify a name for this gadget because you will need to access it in order to change its state through the C++ API. Enter any name in the Name field; this will be useful later.
• Having a tooltip for the gadget makes the application more friendly. Tooltips are visible when the user keeps the mouse pointer on the gadget for a few seconds. To add a tooltip for this gadget, enter a message in the Tooltip field.
• This toggle is an indicator. The user is not supposed to change its state interactively, so you should switch the State to Inactive (instead of the default state, Active).

Now you can test your panel by pressing the Test button  
The panel should appear like this:

You may notice that buttons react normally when you press them. Since you have defined a callback for them, a small window pops up each time you press a button to indicate the name of the callback.

If you move the mouse over the toggle and keep it there, you should see the tooltip you've defined. This feature is very useful for designing user-friendly interface panels.

Now it's time to save your work. Click the Save button, and save this first panel as MainPanel.ilv. If your application has several panels, you will have an ILV file for each panel.

To finish Step 1, you need to create the second window of our application, a very simple panel with nothing but a message inside. Create a new gadget window (select the File�New�Gadgets command) and put a message-label gadget in it. Double click to edit its properties, and enter a simple message. If you want to change the font, select your message label and edit its resources by clicking in the resource bar:

The resource bar lets you change the graphic resource of an object, such as colors (foreground and background), font, pattern, the line style, or line width.

When you're done, your panel should look like this:

Save it as SecondPanel.ilv and proceed to the next step.