Getting Started

Step 1 - Design a Window

  1. Open Glade, and create a new file (File/New menu item)
  2. Click on the Window icon (leftmost item under the Toplevels tab)
    This click will add a main window to your glade program. It will be named window1.
  3. Next, click on the Common tab in the Window Properties pane (lower right) and scroll down a bit to the Widget Flags section.
  4. Check the Visible checkbox.
    If you don't make the main window visible, how are you going to be able to tell if your program is running? :)
  5. Save it with the extension .glade -- e.g. test.glade

This will produce a .glade xml file which describes the interface.

You don't need to be concerned with this xml, there's no need even to look at it, much less edit it.
However, the sample below is provided just to satisfy your curiosity:


<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.16.1 -->
<interface>
  <requires lib="gtk+" version="3.0"/>
  <object class="GtkWindow" id="window1">
    <property name="visible">True</property>
    <property name="can_focus">False</property>
    <property name="title" translatable="yes">Glade Test 1</property>
    <child>
      <placeholder/>
    </child>
  </object>
</interface>

Step 2 - Link to Euphoria

Create a Euphoria program to load and run the .xml you just created:

include GtkEngine.e

add(builder,"~/demos/examples/glade/test1.glade") -- make sure this points to the actual name and location of the glade file you just created

main()
Save this as test1.ex, perhaps.

Step 3 - Test Run

You will always run from an x-terminal (mate-terminal, etc) until your program is completely finished. There is no way around this if you ever expect to get it completely debugged.

Run the program $> eui test1

test1

Step 4 - Adding Widgets

  1. Go back to Glade, and select a container. Box will do nicely (under the Containers tab)
  2. Drag and drop it into the window (use the default number of items, click Create)
  3. Click on File (in the little 3-sided box under Containers, also)
    Drop it into the top panel in the window
  4. Click on the OK button (under the Control and Display tab)
    Drop that into the bottom panel of the window
  5. Click on the actual button (in the window) to select it.
  6. Select the General tab under Button properties (lower right pane)
  7. Scroll down to the Button Content section, click Stock Button, and from the combo box select Quit (scroll down the list)
  8. Click on the Signals tab in the Button properties pane.
  9. Select the clicked signal, and where it says <Type here>, enter Quit -- no quotes please
  10. Be sure to hit enter or click on something else so that your typed entry will be saved. This is a quirk of Glade
  11. Save your work Ctl-s, File/Save, or click on the "save the current project" toolbar icon.
test2

You'll now have a window with a fairly complete menu and a functioning Quit button.
But wait! The button works, but the File/Quit menu item doesn't! Let's fix that:

  1. In Glade, click on the File menu item on your new window (not the Glade File menu, your new menu)
    1. This will select menuitem1 in the upper right Glade pane
    2. Click the arrow to open the submenu (menu1)
    3. Click its arrow to expand the actual menu items
    4. Select imagemenuitem5 That will be your File/Quit menu item.

  2. From the Menu Item Properties pane (lower right) select the Signals tab.
  3. Select the activate signal, and as you did with the Quit button, type in Quit.

Now your File menu Quit option will, erm... quit.


Step 5 - Connecting Euphoria Functions

Let's add some actual Euphoria code next. Follow the steps directly above, but this time click on the Help menu item, and expand the list so that you can select imagemenuitem10 (Help/About).

Save your work, and run the program again. In your terminal you should something like:

---------------------------------------------------------------------
-- Undeclared function in /home/irv/demos/examples/glade/test1.glade
---------------------------------------------------------------------

-----------------------------------------------------------------------
global function help_me() 
-----------------------------------------------------------------------

return 1
end function

What to do? Copy the function prototype and paste it into your Euphoria program. Then edit it to look like the one below:

test3

-----------------------------------------------------------------------
global function help_me() 
-----------------------------------------------------------------------
Info(,,"About","My fine program!")
return 1
end function

Run it again, and click on the Help/About menu item. Note that your program is still only 7 lines of code.


On to topic two