foxGUIb

GUI Creator for Ruby + Fox

Guide Contents

A First program

Here we show how to create a primitive application with just one line of code. The program converts a number of inches (entered in a text field) into cm (displayed on a label). There are approximately 2.54 cm in an inch. A button initiates the calculation.

The point of this example is to introduce you to the code that foxGUIb creates, and ways adding your code to it. Please note that it is not a 'good' program, mainly because we are not using layout techniques properly. Those come in the second example.

As this is a first program, the steps are described in detail - but it takes longer to read through the steps than to actually carry them out.

Here we go:

  • Create a directory for the program before running foxGUIb. (e.g Inches)

  • Run foxGUIb.

  • In foxGUIb, select Main -> Change Working Directory... , and browse to Inches.

  • Select Main -> New MainWindow. A small design window opens, where your widgets will be placed. This is an exact representation of your eventual program, so (when you become more experienced), you will be able to experiment with widgets and layouts.

  • Click the Button icon in the central widget selector area. A button appears on MainWindow.

    Its name can be changed at the top of the properties area. Rename it to convertButton.

    Its properties can be changed. Check the text= item to unlock it, and enter Convert to cm. Note that it appears on the actual button.

  • Now add a text field, and rename it to inchesField

  • Add a label, rename it to cmLabel, and clear the text property. (The names are your choice - follow whatever naming convention you wish.) The design window looks like:

  • The gui is now complete. We now need to add code to do the calculation when the button is clicked. This can be done outside of foxGUIb (by e.g. extending the class), or conveniently (for a small app) inside foxGUIb. We will do the latter. The extending approach is described later.

    In the widget tree at the left, select convertButton, than select View -> Event editor.

    Uncheck the Show All Events checkbox to see relevent button events, and select the SEL_COMMAND option.

    • '?' provides brief help on the event.

    • Code can be entered: in the area under @convertButton.connect(SEL_COMMAND), enter the code:
      	cmLabel.text=(inchesField.text.to_f * 2.54 ).to_s
      
  • The program is complete. Now it can be saved.

  • In fact, there are two items to save: the description of the GUI, and the code you will run. The description (referred to as the 'layout')is needed so you can revisit the design and modify it.
    • Save the design via Main -> Save Layout As... . You should be in the Inches directory. Modify the suggested filename to e.g Inches.rbin
    • Save the code: choose Code Generator -> Ruby Generator
      Select Top-most Widget, and Ruby Class. Choose a class name - e.g. Inches, and click Browse. In your chosen directory, choose a filename of e.g Inches.rb. Click OK to save the code. Here is a listing of the generated code. It is around 50 lines long, but we only wrote one of them.
    You can now exit from foxGUIb if you wish.

  • Run the file Inches.rb to see your program in action. It looks like:

    You will need to enlarge its window to see all the widgets. We look at sizing and layouts later.

You may have noticed...

  • You can select widgets either in the tree, or by clicking them on the design window. In either case, they are highlighted in blue.
  • The widget tree allows you to delete a widget via right-click. Alternatively, you can right-click on most widgets in the design window to get similar facilities. The other possibilities are explored later.
  • Selecting a widget in the design window allows direct modification of some of its properties. For example, you can type text into a text field, or set the state of a radio button. Of course, the properties can also be modified via foxGUIb as well. Explore!

Extension - a better approach

In the above example, the event code - which did the work - was mixed in with code which sets up the GUI. You may want to separate these activities. In Ruby, you can add code to an existing class by means of a separate file. This is termed 'extension'. Here is how we can use extension.

Work through the above example, but do not insert any event-handling code. To allow us to differentiate the code in this tutorial, save it as InchesX.rb.

Now, with your favourite Ruby editor (or any editor, in fact), create a file named (e.g) ExtendInches.rb, which contains:

require "InchesX"
class InchesX
    #events
    def init

        convertButton.connect(Fox::SEL_COMMAND){
         	cmLabel.text=(inchesField.text.to_f * 2.54 ).to_s
        }

    end   # of events
end

#unit test
if __FILE__==$0
      require 'libGUIb16'
      app=FX::App.new

	w=InchesX.new app
	w.topwin.show(0)
	app.create
	app.run

end
Run the above file. Done!

The 'unit test' code can be copied from InchesX.rb (which is identical to Inches.rb, but with no event-handling)

Note the event code. Any number of events can be handled in the init method.

Instead of extending, we might choose to inherit. The @topwin variable holds the topmost parent. Every widget is accessible as an instance variable.

 


Guide Contents