Part I
Create a Grid Layout


Start a new file for your grid program
    When you first start XB,  you need to select from the File menu select File > New. A new window pops up and you then press the gui program  pushbutton to start a new GUI program. In order to use the PDE Toolkit, you must first create or open a previous GUI program.

Display the the Toolkit
    In the PDE, press the Toolkit icon button. Its popup hint says Display/Hide GuiDesigner Toolkit.

Create a new Window for your Grid
    In the Toolkit  Window, select from the menu, Window > New.

Add kid grids to the window
    Now we just select individual tool grids from the toolkit. Once selected, they appear in the window and can be moved and resized. I have decided to use PressButtons for all of the day kid grids since I want to have the ability to have events occur when a day is selected. This would not be possible if I used Label grids.

    Also note that I can use PressButtons to create Arrow PressButtons. If you set the PressButton style to 16, 20, 24, or 28, you will see that you get the corresponding up, right, down, and left arrows.

    At this stage I am going to also set the various font sizes and weights as well as the text style. I used Courier New for the font. I did not set the font for all of the 42 day PressButton grids. I will do that at a later stage.

    I added text to all the grids so that I could get an idea of what the finished grid would look like. Make sure you press  the Enter key after entering text in the TextString TextBox in the Appearance window.  Otherwise it won't be entered properly in your GUI program.

    So after a bit of sizing and moving the grid looks like this:

Create GUI program
    Our final step is to create our GUI program. You will need to remember to provide a new window name in the TextBox in the Toolkit Window. In this case, I used Calendar which you see shown in the titlebar in the above image. Then to create the GUI program, select Window>ToFunction from the Toolkit menu. Our final output code can be seen in calendar0.x.

That's it. We have finished with our GUI and we now can start our real programming.

Previous    Home     Next

(c) 2000  David SZAFRANSKI