Introduction | Chapter 1 | Chapter 2 | Chapter 3 | Chapter 4 | Chapter 5 | Chapter 6 | CLOS Intro

Allegro CL version 8.0

## Chapter 2: Add a Toolbar and Revise the Buttons

1. Start Allegro CL if you exited in Chapter 1. Open the gui-builder-tutorial project we left in Chapter 1. If you have restarted Allegro CL, a dialog may appear asking if you want to open that project, along with any other projects recently worked on. If not, use File | Open Project and choose the file gui-builder-tutorial.lpr in your tutorial project directory, which is C:\Program Files\allegro-projects\gui-builder-tutorial\ or allegro-projects/gui-builder-tutorial/ on Linux if you used the defaults. The Recent menu may also provide a way to open the project. You should now be where you stopped at the end of Chapter 1.

### Add a Toolbar

2. Inspect the doodler form by double clicking anywhere on its grid or by selecting the form and clicking Tools | Inspect Selected Object.
3. In the doodler inspector, double click on the toolbar property to change it to t.

> A blank toolbar should appear at the top of the Doodler form, just under the title bar. It appears as a slender sunken rectangle spanning the length of the form.

4. Sketch in a multi-picture-button across the length of the toolbar in the Doodler window. The steps are:
   1. Click on the multi-picture-button icon on the Components toolbar. The icon for multi-picture-button is not the most obvious: it is towards the right and looks like two adjacent squares:

> 2. Point the mouse cursor somewhere near the upper left corner of the Doodler toolbar and click. The multi-picture-button control will appear inside the toolbar, ready to be resized.

> 3. Click on one of the sizing handles and drag the mouse to the right until the control almost fills the toolbar. Release the mouse key when you are satisfied with the size of the control.

5. The multi-picture-button will now be the selected object. You should see sizing handles on the perimeter of the control indicating that it is selected. This also means that it is the object being shown in the inspector. If it is not shown, select it by clicking on it.
6. In the multi-picture-button inspector, change (if necessary) height to 22, left to 2, and top to 2.

> ### Entering Numeric Values in the Inspector

> Since these are numeric values, click once on each value field to select it. Type in the number with the field selected (you’ll see it darkened, indicating that it has the keyboard focus), and hit ENTER to register the value in the inspector.

> If you double click the value, you’ll see an Edit Expression window appear with the current value of the property in it. Type the new value in that window. Click the OK button to register the new value and close the window.

## Change the Buttons

7. Still inspecting the multi-picture-button, select the range property and click on the Extended Editor button (the one with three dots). An Edit Expression window will open and display the range.

> Select the entire range by double clicking at the very beginning of the expression in the window. Delete the expression. Change the range to the expression shown below.

> This will change the look, number, and behavior of the buttons on the multi-picture button, but not the size of the bounding-box. The bounding-box of the control will remain the same size. You can change that later by clicking on the control and dragging the sizing handles in closer to the boundaries of the buttons.

> ### Pasting Code into the Extended Editor: ignore messy-looking code

> You can copy and paste directly from the Tutorial into the Extended Editor (using Control-V keyboard equivalent of Paste). Ignore any extra line feeds in the newly pasted text; they will disappear once you commit the code to the Editor window by clicking OK.

> Paste this code into the Extended Editor (the code is delibrately mis-indented, in order to show that the Editor will re-indent code automatically; other code in this document will be correctly indented):

>     (list
>      (make-instance 'button-info
>      :name :erase
>      :image "erase.bmp"
>      :tooltip "Erase"
>      :help-string "Erase and redisplay image.")
>      (make-instance 'button-info
>      :name :curve
>         :image "curve.bmp"
>      :tooltip "Curve"
>      :help-string "Create and modify curves.")
>         (make-instance 'button-info
>        :name :scroll-to-center
>       :image "center.bmp"
>          :tooltip "Scroll to Center"
>        :help-string "Scroll to center of page."))

8. Once you commit the code by clicking OK and closing the window, notice that there are three new buttons in your toolbar. Those are illustrated by the erase.bmp, curve.bmp, and center.bmp bitmaps you’ve given Lisp as arguments to the button-info instances above. You copied those bmp files into your project directory in step 6 of chapter 1. Here is the toolbar in the doodler window now:

9. Now re-examine the range of the multi-picture-button using the Extended Editor button in the inspector. It may look different from the example you pasted (or entered) from above. The code has been parsed by the Lisp, fleshed out, and reformatted to fit the correct internal representation. This is a feature of the Extended Editor. Close the Extended Editor when you are done examining the code.
10. Click on the Save All button or choose File | Save All to save all changes.

> ### .bml Files

> Once you’ve saved a form with .bmp files associated with it, a .bml file is created by the IDE. This file holds the Lisp representation of the bitmap. The .bmp file is no longer referred to or needed once you’ve got a .bml file.

> If you change a .bmp file’s characteristics after creating a .bml file, the change will not be noted until a new .bml file is created.
> See Also: doc/cg/cg-pixmaps.htm.

11. Click on the Run Project button on the standard toolbar to run the Doodler. There is now a new toolbar in your Doodler window with three buttons called Erase, Curve, and Scroll to Center. Roll the mouse over them for a moment to see their ToolTips.

> ### ToolTip Delay

> The IDE is deliberately set up with a property called tooltip-delay. This prevents you from seeing annoying flashes of ToolTip messages whenever you drag the cursor across a large expanse of screen.

> After you’ve started focusing on a tool, there is a slight delay until you see the first ToolTip. Once you’ve focused on one tool and then moved to another, there will be no delay in the ToolTip popping up.

12. When you are finished looking at the running application, use the Stop button to stop and close the Doodler.

13. Go to chapter 3 . If you wish to, you can stop working on the tutorial now and return to it later. All the work you have done has been saved.

Copyright © 2001-2004 Franz Inc. All rights reserved.

Introduction | Chapter 1 | Chapter 2 | Chapter 3 | Chapter 4 | Chapter 5 | Chapter 6 | CLOS Intro

Allegro CL version 8.0