Creating and Placing GUI Components
This section covers how to create and place various types of GUI components -- the building blocks that make up a graphical user interface.
Sponsored Link
GUI Components
Elements such as windows, buttons, and text fields that make up the visual part of a GUI are collectively referred to as GUI components.

Creating GUI Components
Creating a GUI Component
To create a GUI component in a VCSSL program, you use a function in the form of new.... The "..." part is replaced with the specific type of component you want to create -- for example, newWindow, newButton, and so on.
- Function Format -Calling such a function creates the specified GUI component and returns a GUI component ID assigned to it.
GUI Component IDs
A GUI component ID is a unique identifier assigned to each GUI component. It acts like a name that the VCSSL runtime system uses to manage the component internally.
Since these IDs are just numbers and not very descriptive, it's recommended to store them in int variables for easier handling.
Placing GUI Components
GUI components are typically used together in combination. The base of any GUI layout is a window, onto which you can place buttons, labels, input fields, and more -- creating the familiar look of typical GUI software.
To place one GUI component on top of another, use the "mountComponent" function.
- Function Format -This function places one GUI component onto another.
The first argument "childID" is the ID of the component you want to place, and the second argument "parentID" is the ID of the component to place it on.
In other words, this places the "childID" component onto the "parentID" component.
In versions of VCSSL prior to 3.0, the function used for this was addComponent. However, because the name "add..." was sometimes confusing regarding the order of arguments, a new function named "mountComponent" was introduced in VCSSL 3.1 and later. Aside from the name, "addComponent" and "mountComponent" are functionally identical.
Common GUI Components
Creating a Window

The first component you'll typically create in GUI development is a window. Use the "newWindow" function to create one. It has the following format:
- Function Format -where
- x, y: Coordinates of the top-left corner of the window
- width, height: Width and height of the window
- Text to display in the windo's title bar
Creating a Button

Buttons are one of the most commonly used GUI components. To create a button, use the "newButton" function. Its format is:
- Function Format -where
- x, y: Coordinates of the top-left corner of the button
- width, height: Width and height of the button
- text: Text to display on the button
Creating a Text Field

Text fields are single-line input fields used to enter text. They are another core GUI component alongside buttons. Use the newTextField function to create one. It has the following format:
- Function Format -where
- x, y: Coordinates of the top-left corner of the text field
- width, height: Width and height of the text field
- text: Initial text displayed in the field
Creating a Text Area

Text areas are larger input areas that allow multiple lines of text. Unlike text fields, they are suitable for longer input or displaying paragraphs of text. Use the newTextArea function to create one.
- Function Format -where
- x, y: Coordinates of the top-left corner of the text area
- width, height: Width and height of the text area
- text: Initial text displayed in the area
Creating a Select Field

When you want users to choose from predefined options -- instead of entering free-form text -- use a select field. To create one, use the newSelectField function.
- Function Format -where
- x, y: Coordinates of the top-left corner of the select field
- width, height: Width and height of the select field
- text: Array of string options to display initially
Creating a Checkbox

To offer the user a simple ON/OFF option, you can use a checkbox. To create one, call the newCheckBox function, which has the following format:
- Function Format -where
- x, y: Coordinates of the top-left corner of the checkbox
- width, height: Width and height of the checkbox
- text: Text to display next to the checkbox
- checked: Initial ON/OFF state (true for checked, false for unchecked)
Creating a Text Label
To display static text on the screen, use a text label. You can create one using the newTextLabel function, which has the following format:
- Function Format -where
- x, y: Coordinates of the top-left corner of the label
- width, height: Width and height of the label
- text: Text to display in the label
Creating an Image Label
Next, let's look at how to display graphical content such as images or drawing data on the screen.
To do this, you first need to prepare graphics resource within your VCSSL program. Graphics resource is like a "canvas" where drawings or images can be placed. Although you can create a blank canvas from scratch, here we'll load an image file instead.
Importing the Graphics Library
To load an image file as graphics data, start by importing the Graphics library, which is one of VCSSL's standard libraries:
The Graphics library provides the foundational features for working with graphics resource in VCSSL. It supports operations such as generating graphics dynamically, loading from image files, and exporting back to image files.
Loading an Image File
To create graphics resource from an image file, use the "newGraphics" function:
- Function Format -where
- filePath: The path to the image file, specified relative to the executing module.
If the image file is in the same folder as the module, you can simply specify the filename.
This function loads an image file from the specified path and returns a graphics ID, which identifies the graphics resource.
Creating an Image Label
Once the graphics resource is prepared, you can display it on the screen using an **image label** component. To create one, use the "newImageLabel" function:
- Function Format -where
- x, y: Coordinates of the top-left corner of the image label
- width, height: Width and height of the label
- graphicsID: The ID of the graphics data to display
Example Code
Let's try using all the GUI components we've covered so far in a single program. Write the following code and run it:
import GUI ;
import Graphics ;
// Create a window at (0, 0) with width 360 and height 480
int windowID = newWindow( 0, 0, 360, 480, "Hello GUI" ) ;
// Create a button at (10, 10), size 100~50
int buttonID = newButton ( 10, 10, 100, 50, "PUSH" ) ;
mountComponent( buttonID, windowID ) ;
// Create a text field at (10, 70), size 100~30
int textFieldD = newTextField( 10, 70, 100, 30, "INPUT" ) ;
mountComponent( textFieldD, windowID ) ;
// Create a text area at (120, 10), size 200~200
int textAreaID = newTextArea( 120, 10, 200, 200, "INPUT" ) ;
mountComponent( textAreaID, windowID ) ;
// Create a select field at (10, 110), size 100~20
string text[ 3 ] ;
text[ 0 ] = "TYPE-A";
text[ 1 ] = "TYPE-B";
text[ 2 ] = "TYPE-C";
int selectFieldID = newSelectField( 10, 110, 100, 20, text ) ;
mountComponent( selectFieldID, windowID ) ;
// Create a checkbox at (10, 140), size 100~20
int checkBoxID = newCheckBox( 10, 140, 100, 20, "TURBO", true ) ;
mountComponent( checkBoxID, windowID ) ;
// Create a text label at (10, 170), size 100~20
int textLabelID = newTextLabel( 10, 170, 100, 20, "Hello GUI ! " ) ;
mountComponent( textLabelID, windowID ) ;
// Load an image file named "Test.png"
int graphicsID = newGraphics( "Test.png" ) ;
// Create an image label at (10, 220), size 310~200
int imageLabelID = newImageLabel( 10, 220, 310, 200, graphicsID ) ;
mountComponent( imageLabelID, windowID ) ;
GUISample.vcssl
When you run this program, a window will appear displaying all the GUI components.
