Glade Steps to Produce 'Hello World' dialog box"

  1. Now go to the pallet window and click on the "Dialog" widget as shown in Figure 2.2.1:2A.

    Figure 2.2.1:2A

  2. Glade will then show a New dialog selection box to choose a button configuration for the dialog. Choose the single OK radio button for your dialog box and click the OK button. as shown in Figure 2.2.1:2B,

    Figure 2.2.1:2B

  3. Glade will then display your "raw space" dialog box image in its own window with the default name "dialog1", as shown in Figure 2.2.1:2C,

    Figure 2.2.1:2C

  4. Now you can go to the pallet window and select the label widget,as shown in Figure 2.2.1:2D.

    Figure 2.2.1:2D

  5. Then move the mouse to the new "dialog1" window, click in the "raw space", which will then be transformed into the label widget "label1", as shown in Figure 2.2.1:2E.

    Figure 2.2.1:2E

  6. Now you can go to the Properties window, where the properties of the label1 widget are displayed, and change its label field to "Hello World", as in Figure 2.2.1:2F.

    Figure 2.2.1:2F

  7. Now to change the name of the dialog1 window to "Greeting", go to the project window, Figure 2.2.1:2G, and select the dialog1 window.

    Figure 2.2.1:2G

  8. Change the title of this window as shown in Figure

    Figure 2.2.1:2H


Steps to view the HELLO source code

  1. To see all of the source code in a single gang editing session, we must first select a gang editor from the combo box in the top right of the window, as shown in Figure 2.2.1:10.

    Figure 2.2.1:10

  2. Choosing the KDE Kate editor and clicking the Gang Editing for New Tags and Design button, loads the seven source files generated by Glade into Kate. Figure 2.2.1:11 shows the main.c file, and Figure shows the interface.c file

    Figure 2.2.1:11

    Figure 2.2.1:12


Glade Steps to add buttons to the Hello World dialog box"

  1. Now we are in Glade again with the HELLO project. First, by double clicking on the dialog1 entry in the project window we can bring up the dialog1 window, which is our Hello World GUI image (Figure 2.2.2:1A).

    Figure 2.2.2:1A

  2. To access the individual widgets in the image, we first go up to the View menu and check the Widget Tree box to bring up the Widget Tree (Figure 2.2.2:1B), and expand it to reveal the widget structure of the dialog1 window, since we want to modify its vertical box widget, dialog-vbox1.

    Figure 2.2.2:1B

  3. Looking at the properties of the dialog-vbox1 widget in the above Figure, we see that it has three rows, but is not homogeneous. That is why the Hello World text has no top margin. To get a better idea about its packing structure, we make the rows homogeneous by toggling the Homogeneous button in the properties window (Figure 2.2.2:1C), which changes the GUI image as shown in Figure 2.2.2:1D.

    Figure 2.2.2:1C

    Figure 2.2.2:1D

  4. In order to place the new buttons, we add another row to do dialog-vbox1 (Figure 2.2.2:1E), which opens a "raw" row, as shown in Figure 2.2.2:1F.

    Figure 2.2.2:1E

    Figure 2.2.2:1F

  5. Since we are going to add two buttons, we go to the pallet and choose a vertical box again (Figure 2.2.2:1G), and then click on the "raw" row, which invokes the dialog of Figure 2.2.2:1H, to enter the number of rows to insert. Finally Figure 2.2.2:I shows that two "raw" rows were added.

    Figure 2.2.2:1G

    Figure 2.2.2:1H

    Figure 2.2.2:1I

  6. Now we go to the pallet again, and select the button widget (Figure 2.2.2:1J), and then move the mouse pointer to the first of the raw rows, and click it to insert button1 (Figure 2.2.2:K)

    Figure 2.2.2:1J

    Figure 2.2.2:1K

    Next we go to the properties window and enter the label for button1 (Figure 2.2.2:1L), resulting in Figure 2.2.2:1M.

    Figure 2.2.2:1L

    Figure 2.2.2:1M

    Finally, in the properties window for button1, we click the signals tab (Figure 2.2.2:1N), and at the end of the signal row, we click on the elipsis (...) on the right to select the signal we want button1 to issue, "clicked". This will populate the signal and handler fields (Figure 2.2.2:1O). Then we click the add button (Figure 2.2.2:1P) to attach this handler to the button1 widget properties.

    Figure 2.2.2:1N

    Figure 2.2.2:1O

    Figure 2.2.2:1P

    Now the button1 widget has all the information necessary to generate interface and callback code for button1.
  7. Next we repeat the above process for button2, as shown in Figures 2.2.2:1Q, R, S, T, and U.

    Figure 2.2.2:1Q

    Figure 2.2.2:1R

    Figure 2.2.2:1S

    Figure 2.2.2:1T

    Figure 2.2.2:1U

  8. Now we are done with Glade, so we click the save button (Figure 2.2.2:1W) to save the project information in the xml file ~/EVERGLADE/GladeWork/HELLO/, and quit Glade (Figure to return to EverGlade.

    Figure 2.2.2:1W

    Figure 2.2.2:1X

  9. Back