by date
Plan for John Vanderbeck
Plan for John Vanderbeck
| Name: | John Vanderbeck | |
|---|---|---|
| Date Posted: | May 14, 2004 | |
| Rating: |  5.0 out of 5 | |
| Public: | YES | |
| Comments: | YES | |
| RSS Feed: |  or Subscribe with  . | |
| Profile Page: | View profile page for John Vanderbeck |
Blog post
Dynamic GUIs with the Torque GUI Builder
I've been rather quiet the last few days or so, but I haven't been idle. For the show tool that i've been working on, I wanted to have a GUI system that was dynamic. This system would present users with GUI options that were most relevant to the task at hand.
I knew that the best bet would be to design a seperate system that would make working with GUIs dynamicly a lot easier, and so that's what i've been doing the last few days. A few minutes ago, after writing a huge amount of code with no testing (I hate stretches of code like that) I finally managed to get the whole framework in place and cheered when it all worked.
So just how does it work?
The system is actually quite simple to use. There are a few core concepts that will help illustrate the system.
GUI Pool
The GUI pool is a master pool that contains ALL controls used by the system. You would start by adding a control to the GUI Pool. The specifics of adding a control depend on the control type (currently only buttons are implemented) but basically you define the basic attributes of the control. Here is an example for adding a button control:
In the case of a button you define the name of the button, the text shown on the button, the command to execute when the button is pressed, the GUI profile to use for the control, the buttons extent, and the bitmap used. If the button is created ok, then the new control is returned.
Now you have a button added to the pool.
GUI Set
A GUI Set defines a collection of controls that are displayed together and in relation to each other. The concept of the set defines both with controls are displayed, as well as how they are displayed. You will notice that when adding our button to the Pool that we gave no information on where that button would be displayed. We did this because the Pool has no concept of positioning. This allows you to add a single control to the system that may be displayed in any number of positions. It is the Set itself that handles positioning. You could therefore add the same button to multiple sets and have it displayed differently in each set. In order to display our button in a set, we have to add it to one.
First our code created a new set to work with, then it add the button which we added to the pool earlier. Here we see some positioning at work. our button was added as an "Anchor". Anchor's are very important because they provide a base, or anchor, for posititioning other controls. In this case we place the control at an absolute position of 200, 200. This could also be something like 50%, 0 for example, which would place the control in the middle of the screen horizontally regardless of resolution, and up against the top edge.
Now let's see how we would add another control. Let's say for example we want a series of buttons one underneath the other. Let's just build off of our Anchor now.
What this call basically says to the GUI Builder is "Place %button2 below the Anchor control with a space of 5 pixels". Below means the control is placed below the indicated control so that the left edges line up.
But now how do we place the 3rd button? We don't want to place it in relation to the anchor. We want it unerneath our %button2. Here's how:
By not specifying what control we want this in relation to, the system defaults to the control previously added to the set.
Ok so we've built a set now. Now that the set is built, we can use it anytime we want without having to define it again. Whenever we want to make the set visible (IE draw all the controls):
What this does is tell the master GUI Builder to enable the specified set, and display it on the GUI screen "playGUI". Viola!
This is the basics of the system. I'm not sure if I conveyed it well or not, but it is actually very powerful and easy to use. Basically you just add all the controls you use for your application to the Pool, then define each Set you plan to use. When you want to display a set of controls, just enable the set. You can create new sets, or even modify existing ones, at any time through the code, as well as add new controls as needed to the pool. It is all completely dynamic.
As a last example, here is the little piece of test code I was using as I developed it.
I knew that the best bet would be to design a seperate system that would make working with GUIs dynamicly a lot easier, and so that's what i've been doing the last few days. A few minutes ago, after writing a huge amount of code with no testing (I hate stretches of code like that) I finally managed to get the whole framework in place and cheered when it all worked.
So just how does it work?
The system is actually quite simple to use. There are a few core concepts that will help illustrate the system.
GUI Pool
The GUI pool is a master pool that contains ALL controls used by the system. You would start by adding a control to the GUI Pool. The specifics of adding a control depend on the control type (currently only buttons are implemented) but basically you define the basic attributes of the control. Here is an example for adding a button control:
%button = $guiPool.addButton("buttonName", "Quit", "quit();", "GuiShowButtonProfile", "150 17", "show2/client/ui/button_blank");In the case of a button you define the name of the button, the text shown on the button, the command to execute when the button is pressed, the GUI profile to use for the control, the buttons extent, and the bitmap used. If the button is created ok, then the new control is returned.
Now you have a button added to the pool.
GUI Set
A GUI Set defines a collection of controls that are displayed together and in relation to each other. The concept of the set defines both with controls are displayed, as well as how they are displayed. You will notice that when adding our button to the Pool that we gave no information on where that button would be displayed. We did this because the Pool has no concept of positioning. This allows you to add a single control to the system that may be displayed in any number of positions. It is the Set itself that handles positioning. You could therefore add the same button to multiple sets and have it displayed differently in each set. In order to display our button in a set, we have to add it to one.
%set = $guiBuilder.createSet();
%set.addControl(%button, "Anchor", 200, 200);
First our code created a new set to work with, then it add the button which we added to the pool earlier. Here we see some positioning at work. our button was added as an "Anchor". Anchor's are very important because they provide a base, or anchor, for posititioning other controls. In this case we place the control at an absolute position of 200, 200. This could also be something like 50%, 0 for example, which would place the control in the middle of the screen horizontally regardless of resolution, and up against the top edge.
Now let's see how we would add another control. Let's say for example we want a series of buttons one underneath the other. Let's just build off of our Anchor now.
%set.addControl(%button2, "Below", "Anchor", 5);
What this call basically says to the GUI Builder is "Place %button2 below the Anchor control with a space of 5 pixels". Below means the control is placed below the indicated control so that the left edges line up.
But now how do we place the 3rd button? We don't want to place it in relation to the anchor. We want it unerneath our %button2. Here's how:
%set.addControl(%button3, "Below", "", 5);
By not specifying what control we want this in relation to, the system defaults to the control previously added to the set.
Ok so we've built a set now. Now that the set is built, we can use it anytime we want without having to define it again. Whenever we want to make the set visible (IE draw all the controls):
$guiBuilder.enableSet(%set, playGUI);
What this does is tell the master GUI Builder to enable the specified set, and display it on the GUI screen "playGUI". Viola!
This is the basics of the system. I'm not sure if I conveyed it well or not, but it is actually very powerful and easy to use. Basically you just add all the controls you use for your application to the Pool, then define each Set you plan to use. When you want to display a set of controls, just enable the set. You can create new sets, or even modify existing ones, at any time through the code, as well as add new controls as needed to the pool. It is all completely dynamic.
As a last example, here is the little piece of test code I was using as I developed it.
function testGUI()
{
$guiBuilder.init();
%button = $guiPool.addButton("button", "myQuit", "quit();", "GuiShowButtonProfile", "150 17", "show2/client/ui/button_blank");
%set = $guiBuilder.createSet();
%set.addControl(%button, "Anchor", 200, 200);
$guiBuilder.enableSet(%set, playgui);
}
Recent Blog Posts
| List: | 04/06/05 - Plan for John Vanderbeck 04/04/05 - Plan for John Vanderbeck 02/08/05 - Plan for John Vanderbeck 08/20/04 - Plan for John Vanderbeck 05/22/04 - Plan for John Vanderbeck 05/14/04 - Plan for John Vanderbeck 05/03/04 - Plan for John Vanderbeck 04/25/04 - Plan for John Vanderbeck |
|---|
Submit your own resources!| X-Tatic (May 14, 2004 at 20:58 GMT) |
| Johnny Hill (May 15, 2004 at 00:40 GMT) |
John H
| Dylan Sale (May 15, 2004 at 13:07 GMT) |
| James Laker (BurNinG) (May 17, 2004 at 09:02 GMT) |
| Jeff Peck (May 17, 2004 at 20:22 GMT) |
Keep it up, I look forward to playing with the finished results (provided you're kind enough to share!)
~ Jeff
| John Vanderbeck (May 17, 2004 at 23:03 GMT) |
@Jeff
Yes it will be released when its finished. An early version of it will also probably be inside the new show tool when the first release is done.
| Bryan Edds (Jul 06, 2004 at 21:18 GMT) Resource Rating: 5 |
Please release this resource when it's ready so we don't have to reinvent the wheel! :)
| John Vanderbeck (Aug 03, 2004 at 13:42 GMT) |
Don't suppose anyone would volunteer to write some decent documentation for this? If I could get that I could release it.
You must be a member and be logged in to either append comments or rate this resource.
