GUI questions?

The latest version of that GUI library has pretty good performance. Its already used in these applications:

• RCBasic Package Tool
• RCBasic Android Builder
• n00b Game Engine

The only documentation is the text document included which explains what each function does.

I don't think I ever made a tutorial for it so I will just give a quick tutorial here.

The library is available in the examples folder but it that folder is missing the gui_gfx folder. I am attaching the gui library with all the files and folders complete here. Just download it and extract it. Make a *.bas file in the folder where gui.bas is located.

Now you can go into your *.bas file and start coding.

Your first line should just include the gui.bas file so you can use the library.
Include "gui.bas"

Next you need to create a window for our gui.
win = Gui_WindowOpen("Tutorial", WINDOWPOS_CENTERED, WINDOWPOS_CENTERED, 640, 480)
Gui_WindowOpen() will open a window and return an id which we will use to reference the window when we want to add stuff to it. We are storing that reference id in the win variable.

Now we will add a panel to the window. Panels are containers that hold widgets (ie. buttons, textboxes, etc). To create a panel we use the Gui_CreatePanel() function.
panel = Gui_CreatePanel(600, 430)
We just created a panel with a width of 600 and a height of 430. Just like the Gui_WindowOpen() function, the Gui_CreatePanel() function returns a reference id which we need to store in a variable so we can reference the panel later.

Now that we have created a panel we can add it to the window with the Gui_Window_AddPanel() function.
Gui_Window_AddPanel(win, panel, 20, 30)
The code above adds the panel we created to the window at the xy position (20, 30).

Lets add a button to the gui to make it interactive. To do that we first need to create a button.
button = Gui_CreateButton("Hello", 100, 20)
We used Gui_CreateButton() to create a button with the text "Hello" and set its width to 100 and its height to 20.

To be able to use the button we need to add it to a panel in the window.
Gui_Panel_AddObject(panel, button, 20, 20)
The Gui_Panel_AddObject() function is similiar to the Gui_Window_AddPanel() function. One thing to remember here is that the xy position we specify in Gui_Panel_AddObject() is relative to the panel and not the window. So (0,0) is the top left corner of the panel but not the top left corner of the window.

The last thing we need to do to display our gui is the add our main loop.
While Not Key(K_ESCAPE)
Gui_Update
Wend

The entire program should look like this:
Include "gui.bas"
win = Gui_WindowOpen("Tutorial", WINDOWPOS_CENTERED, WINDOWPOS_CENTERED, 640, 480)
panel = Gui_CreatePanel(600, 430)
Gui_Window_AddPanel(win, panel, 20, 30)
button = Gui_CreateButton("Hello", 100, 20)
Gui_Panel_AddObject(panel, button, 20, 20)
While Not Key(K_ESCAPE)
Gui_Update
Wend


This doesn't do anything yet so lets print a message to the console when the button is clicked. To do this we just need to check if the button is clicked inside our main loop.
While Not Key(K_ESCAPE)
If Gui_Button_Clicked(button) Then
Print "Hello World"
End If
Gui_Update
Wend


All the widgets have different functions for interacting with them. You can read up on that in the doc.

The last thing I will cover here is how tabs work. Tabs are a way of grouping panels to create different views depending on what tab is selected.

To add tabs to our gui we first need to create a tab group. We need to create this before our main loop just like we did for everything else.
tab_group = Gui_CreateTabGroup(600, 30)
The code above is just creating a tab group with a width of 600 and a height of 30.

Once we have created our tab group we can go on and add it to our window.
Gui_Window_AddTabGroup(win, tab_group, 20, 2)
The Gui_Window_AddTabGroup() function is the same as the Gui_Window_AddPanel() function except that it adds a tab group to the window instead of a panel.

Now we can add some tabs to our tab group. Lets just add 3 tabs.
tab1 = Gui_TabGroup_AddTab(tab_group, "Tab 1")
tab2 = Gui_TabGroup_AddTab(tab_group, "Tab 2")
tab3 = Gui_TabGroup_AddTab(tab_group, "Tab 3")

Your code should look like this by this point:
Include "gui.bas"
win = Gui_WindowOpen("Tutorial", WINDOWPOS_CENTERED, WINDOWPOS_CENTERED, 640, 480)
panel = Gui_CreatePanel(600, 430)
Gui_Window_AddPanel(win, panel, 20, 30)
button = Gui_CreateButton("Hello", 100, 20)
Gui_Panel_AddObject(panel, button, 20, 20)

tab_group = Gui_CreateTabGroup(600,26)

Gui_Window_AddTabGroup(win, tab_group, 20, 2)

tab1 = Gui_TabGroup_AddTab(tab_group, "Tab 1")
tab2 = Gui_TabGroup_AddTab(tab_group, "Tab 2")
tab3 = Gui_TabGroup_AddTab(tab_group, "Tab 3")

While Not Key(K_ESCAPE)
If Gui_Button_Clicked(button) Then
Print "Hello World"
End If
Gui_Update
Wend

Try running it. You should see the tabs you made and be able to click between them but your panel is visible no matter what tab is selected. That is because our panel is not attached to any tab in the tab group. To link a panel to a tab we need to use the Gui_TabGroup_Tab_AddObject() function.
Gui_TabGroup_Tab_AddObject(tab_group, tab1, panel)
This code will attach our panel to the first tab.

Our final code should look like this:
Include "gui.bas"
win = Gui_WindowOpen("Tutorial", WINDOWPOS_CENTERED, WINDOWPOS_CENTERED, 640, 480)
panel = Gui_CreatePanel(600, 430)
Gui_Window_AddPanel(win, panel, 20, 30)
button = Gui_CreateButton("Hello", 100, 20)
Gui_Panel_AddObject(panel, button, 20, 20)

tab_group = Gui_CreateTabGroup(600,26)

Gui_Window_AddTabGroup(win, tab_group, 20, 2)

tab1 = Gui_TabGroup_AddTab(tab_group, "Tab 1")
tab2 = Gui_TabGroup_AddTab(tab_group, "Tab 2")
tab3 = Gui_TabGroup_AddTab(tab_group, "Tab 3")

Gui_TabGroup_Tab_AddObject(tab_group, tab1, panel)

While Not Key(K_ESCAPE)
If Gui_Button_Clicked(button) Then
Print "Hello World"
End If
Gui_Update
Wend


Now when we run it our view changes when we select another tab.

That is a basic run down of the gui library. You can reference the gui_doc file that comes with the library to look up how to add other types of widgets.