[ Prev | Index | Next ]
Japanese English

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.

Example of a Window Component
Example of a "Window" Component
A window is one type of GUI component. Others include buttons, input fields, and more. These components are combined to form the full user interface.
Note: The designs shown in the images on this page are schematic representations. The actual appearance of GUI components may vary depending on the operating system, the version of the VCSSL runtime environment, and other factors.

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 -
int new`( ` )

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 -
void mountComponent ( int childID, int parentID )

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.

Note on the older addComponent function:
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

Window Component
"Window" Component
Note: Appearance may vary depending on the runtime environment.

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 -
int newWindow( int x, int y, int width, int height, string title )

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

Button Component
"Button" Component
Note: Appearance may vary depending on the runtime environment.

Buttons are one of the most commonly used GUI components. To create a button, use the "newButton" function. Its format is:

- Function Format -
int newButton(int x, int y, int width, int height, string text )

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 Field Component
"Text Field" Component
Note: Appearance may vary depending on the runtime environment.

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 -
int newTextField ( int x, int y, int width, int height, string text )

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 Area Component
"Text Area" Component
Note: Appearance may vary depending on the runtime environment.

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 -
int newTextArea ( int x, int y, int width, int height, string text )

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

ƒZƒŒƒNƒgƒtƒB[ƒ‹ƒh‚̐}
Select Field Component
Caption: Note: Appearance may vary depending on the runtime environment.

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 -
int newSelectField ( int x, int y, int width, int height, string[ ] text )

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

Checkbox Component
"Checkbox" Component
Note: Appearance may vary depending on the runtime environment.

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 -
int newCheckBox ( int x, int y, int width, int height, string text, bool checked )

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 -
int newTextLabel ( int x, int y, int width, int height, string text )

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:

import Graphics ;

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 -
int newGraphics ( string filePath )

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.

Note: Supported image formats vary depending on the environment and version. PNG is widely supported and recommended for maximum compatibility.

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 -
int newImageLabel ( int x, int y, int width, int height, int graphicsID )

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.

Execution Result
Execution Result
Note: Appearance may vary depending on the runtime environment.


Sponsored Link



Japanese English
Index
News From RINEARN
* VCSSL is developed by RINEARN.

VCSSL 3.4.52 Released: Enhanced Integration with External Programs and More
2025-05-25 - This update introduces enhancements to the external program integration features (e.g., for running C-language executables). Several other improvements and fixes are also included. Details inside.

Released: Latest Version of VCSSL with Fixes for Behavioral Changes on Java 24
2025-04-22 - VCSSL 3.4.50 released with a fix for a subtle behavioral change in absolute path resolution on network drives, introduced in Java 24. Details inside.

Released the Latest Versions of RINEARN Graph and VCSSL - Now Supporting Customizable Tick Positions and Labels!
2024-11-24 - Starting with this update, a new "MANUAL" tick mode is now supported, allowing users to freely specify the positions and labels of ticks on the graph. We'll explain the details and how to use it.

Released Exevalator 2.2: Now Compatible with TypeScript and Usable in Web Browsers
2024-10-22 - The open-source expression evaluation library, Exevalator, has been updated to version 2.2. It now supports TypeScript and can be used for evaluating expressions directly in web browsers. Explains the details.

Behind the Scenes of Creating an Assistant AI (Part 1: Fundamental Knowledge)
2024-10-07 - The first part of a series on how to create an Assistant AI. In this article, we introduce the essential knowledge you need to grasp before building an Assistant AI. What exactly is an LLM-based AI? What is RAG? And more.

Launching an Assistant AI to Support Software Usage!
2024-09-20 - We've launched an Assistant AI that answers questions about how to use RINEARN software and helps with certain tasks. Anyone with a ChatGPT account can use it for free. We'll explain how to use it.

Software Updates: Command Expansion in RINEARN Graph, and English Support in VCSSL
2024-02-05 - We updated our apps. This updates include "Enhancing the Command-Line Features of RINEARN Graph" and "Adding English Support to VCSSL." Dives into each of them!

Inside the Repetitive Execution Speedup Impremented in Vnano Ver.1.1
2024-01-17 - Delves into the update in Vnano 1.1 from a developer's viewpoint, providing detailed insights into the specific improvements made to the internal structure of the script engine.