Functions Using the GUI Painter
 

GUI Examples

Index

  The following are very simple examples - for real world applications, "use the source, Luke".

A Simple Example

The following example will give an understanding in value holders. We will design an application having an interface with several widgets, which operate on the same value holder:
    During application startup, the application will be asked for the aspects (by the interface builder). Your application should provide those as ValueHolders (usually, but not limited to).
    There are 3 possible techniques to do that:
     
    1. implement a method in the instance protocol, which returns the aspect.
      The method should look like:
      2. percentageValue
    |holder|

    holder := builder bindingAt: #percentageValue.
    holder isNil ifTrue:[
	builder
	    aspectAt:#percentageValue
	    put:(ValueHolder with:0)
    ].
    ^ holder
    2. As an alternative, the aspect could also be held in an instance variable (typically, named like the aspect):
      as in: 
      percentageValue
    percentageValue isNil ifTrue:[
	percentageValue := (ValueHolder with:0)
    ].
    ^ percentageValue
      (assuming, that the application contains an instance variable named "percentageValue")

      The GUI Painter can automatically generate aspect methods like the above (via the 'Generate aspect methods' menu item).

      Via the Settings menu, you can control if the aspect method should use the builders bindings dictionary or use an instance variable to hold the aspect.
      Note: This function will not overwrite existing aspect accessor methods - your changed methods are safe from being overwritten when this function is called. This also means, that obsolete aspect methods have to be removed manually.
       

    3. keep a dictionary containing the aspects as an instance variable (called aspects - for example) and set it your applications initialize-method (which is invoked automatically after your application got instantiated).
      i.e.: 
      initialize
    super initialize.

    aspects := IdentityDictionary new.
    aspects
	at:#percentageValue
	put:(ValueHolder with:0).

      and provide access to this value by implementing: 

      aspectFor:aKey
    ^ aspects
	at:aKey
	ifAbsent:[super aspectFor:aKey].

    If you want an update message to be sent to your application (whenever an aspect is changed), you can extent the above method as in: 

    initialize
    |holder|

    super initialize.
    aspects := IdentityDictionary new.
    aspects
	at:#percentageValue
	put:(holder := ValueHolder with:0).

    holder addDependent:self

    This will arrange for the #update:with:from: method to be invoked, whenever a new value is stored into the valueHolder. 

    update:something with:aParameter from:someObject
    super update:something with:aParameter from:someObject.

    ...
    your update code
    ...

    where
        something indicates what has changed (for example #value, #list, etc.),
        aParameter can be an argument passed with,
        someObject is the value holder that has invoked the update message.

    The advantages of using a dictionary for the aspects are:

    V. Save the window spec (by default, it creates a method named windowSpec on a class named NewApplication)
     
Now, you are ready to test it by selecting the menu item Test/Start Application or pressing the button .

The application can also be started in a Workspace by evaluating "NewApplication open", by the SystemBrowser (double-click on the classes name), or by writing a program containing the open-message.
While playing with the demo, you may notice that the range of the sliders value is 0..100, while the thumb wheel has a default range of 0..360. To change this, select the thumb wheel in the GUI Painter, switch to the section Details, and enter 0, 100, 1 into the entry fields Min:, Max:, and Step: respectively.

 
 

An Advanced Example

A somewhat more complicated example could be an application which consists of a interface showing a List and a Text Editor widget. Both widgets are to be aligned vertically, each taking half of the window's height. The list is going to show a list of file names whose contents - when selected - is to be displayed in the lower half.
    IV. We are now ready to create the code for the application. This is done in 2 steps:
    1. generating the window spec method by selecting File/Save or pressing the button  and
    2. generating stub methods to create & access the models by selecting Generate/Aspect Methods
     

    You will be asked for a class and method name, when doing the for the first time. You may want to change the class name to some more useful name. The name of the window spec method usually needs no renaming. If your application consists of multiple interfaces, then different names for the window spec methods are required.

 

Adding a Popup Menu

For some widgets a popup menu can be defined accessible by the right mouse button. In this example, we want to add a popup menu to the view of the file list. It shall contain the menu items Rename and Remove.  

Adding a Dialog

Often, your applications requires some dialogs. Dialogs are defined like the main interface of the application as described above. However, you should care to give each window spec selector a distinct (and user friendly) name. In your application dialogs are opened by evaluating the following code: In the starting phase the dialog fetches its models through corresponding access methods from your application.
In some situations, it is more convenient to prepare a collection of models into a dictionary (associating access selectors to value holder), and passing this collection to Well, let's define the interface of the dialog for the example above: Finally, this example is successfully completed. Be careful in using this simple file browser: Do not remove or rename important files needed by the operation system.

If you like to play with the previous example, the class of this example can be found as "SimpleGUIDemoApplication" in the "CodingExamples_GUI" namespace (autoloaded). Also, the corresponding source code can be found in "doc/coding/SimpleGUIDemoExample.st".
 
 

Hints & Recommendations

The following lists problems encountered by users of the GUI Painter for your reference and tries to answer common questions:

[stx-logo] Copyright © 1998 eXept Software AG, all rights reserved