 |
 |
 |
|
| Home | Documentation | Writing Weblications ... Contact |
|
Before writing any code, you may want to design a GUI so that you know how users will be interacting with your weblication. Figure out what you want the GUI to look like, how many different windows you'll be using, and how you want to lay things out. You may want to sketch something out before actually creating the GUI.
Create an HTML form as you would otherwise. Assign various JavaScript functions to various events like clicks and mouse-overs. See the short tutorial featuring the Hello World WinApp weblication to see a simple example. Another good example of a WinApp weblication is the Checkers weblication.
We can use the Glade tool to create an interface.
Keep in mind that Glade has no 'undo', so save frequently in case you need to revert back to a previous incarnation of your GUI.
Glade runs in several windows when you start it up.
|
|
The main glade window contains project and file management commands. You can open an existing .glade project file or start a new one. If your GUI has multiple windows, this is where you can select which window you'd like to edit. |
|
|
The palette contains all Glade elements that can be added to your GUI. Elements include text fields, text boxes, drop down lists, buttons, check boxes, and radio buttons. Tables and vertical and horizontal box elements are used for laying out GUIs. |
|
|
The Properties window allows you to configure properties (including names, sizes, positions, signals, etc.) of the elements that you add to your GUI. |
|
|
When you start editing a .glade file, it will have its own window as well. |
Open a new Glade file.
You should have a decent idea of what you want your GUI to look like. Experiment with Glade for a few minutes before trying to create your GUI. Pay attention to how you lay out your rows and columns because it can get quite confusing. To create rows and columns, use the 'table', 'vertical box', and 'horizontal' box buttons on the palette.
To add elements, click on the palette, then click in the appropriate area of the actual GUI that you're designing. To edit an element's properties, select it with the mouse and edit the properties that show up in the Properties window. Note that only one element can go into each cell. If you'd like to squeeze two (or more) elements into a cell, you need to partition it with a box or table element.
Once you've added an element, you can configure its properties in the Properties window. Make sure to name your input elements well so that it will be easy to access them from your JavaScript code. In addition, make sure that you're happy with the sizes of all of the elements - the sizes can be fixed, or the elements can be told to expand (or contract) their sizes until they completely fill a cell. At times you may want to save your Glade project, close Glade, and then reopen your project to ensure your size settings are correct.
To register an action (like a mouse over, button press, button release, etc.), select the appropriate element and click on the Signals tab. Clicking on the button with "..." brings up a list of signals that can be associated with the element. Highlight one of them and click 'add'. Some function name will also be generated (for example, "on_ok_clicked"); this is the name of the JavaScript function (to be written by the weblication writer) that will be called when the event takes place.
Note that it's possible to associate one element with more than one action, if necessary. For example, if you have multiple text entry elements, you may want to associate each with an on_text_changed function, and associate all of the elements with an on_modified function. If on_modified is called, it means that there has been a modification to any of the text elements.
For a more comprehensive overview, consider looking at online Glade tutorials, such as this one.
Wing Yung
Last modified: Thu Apr 4 15:15:43 EST 2002