Virtel 4 Beta Larix! Rewrited to Rust. Yet very unstable.

Download

Screen

Creating and Managing Widgets

Objective: Create and manipulate widgets to build user interfaces.

Steps:
  • Create a new widget:
    scr new "myButton" "button" "0" "max/min" "root";
    • "myButton" is the widget identifier.
    • "button" is the widget type.
    • "0" is the weight.
    • "max/min" is the size.
    • "root" is the parent widget.
  • Set a property:
    scr set "myButton" "title" "Click Me";
    • "myButton" is the widget identifier.
    • "title" is the property.
    • "Click Me" is the value.
  • Get a property:
    scr get "myButton" "title" buttonTitle; csl write buttonTitle;

Practical Example

Objective: Create an input field and retrieve its value.

Steps:
  • Create an input field:
    scr new "myInput" "input" "0" "max/min" "root"; scr set "myInput" "value" "Enter text";
  • Get and display the input value:
    scr get "myInput" "value" inputValue; csl write inputValue;

Tips

  • Use unique widget identifiers to avoid conflicts.
  • Manage widget hierarchy with parent-child relationships.
  • Clear or delete unused widgets to optimize performance.

Conclusion

Screen commands like scr new, scr set, and scr get allow you to create and manage dynamic user interfaces in Virtel Steps.

Supported Widget Types in Virtel Steps

In Virtel Steps, various widget types are available for creating user interfaces. Each type has its own purpose and set of properties that can be configured using the commands scr new and scr set. Below is a list of all supported widget types with descriptions and examples.

1. VIEW

A basic container that can hold other widgets. It is used as a foundation for more complex structures.

Example:
scr new "mainView" "view" "0" "max/max" "root";

2. TEXT

A widget for displaying text content. It supports different styles through the variant property (e.g., "super", "primary", "secondary", "tertiary").

Example:
scr new "titleText" "text" "0" "min/min" "mainView"; scr set "titleText" "title" "Welcome!"; scr set "titleText" "variant" "primary";

3. BUTTON

An interactive widget that responds to clicks. It can contain text or other widgets and supports styles like "primary" and "secondary".

Example:
scr new "actionButton" "button" "0" "min/min" "mainView"; scr set "actionButton" "title" "Click Me"; scr set "actionButton" "onClick" "/action.steps";

4. INPUT

A field for user text input. It can have a label and store the entered value.

Example:
scr new "userInput" "input" "0" "max/min" "mainView"; scr set "userInput" "title" "Enter your name";

5. COLUMN

A container that arranges child widgets vertically. It supports scrolling and alignment.

Example:
scr new "verticalList" "column" "1" "max/max" "mainView"; scr set "verticalList" "scrollable" "true"; scr set "verticalList" "justify" "spaceBetween";

6. ROW

A container that arranges child widgets horizontally. It supports scrolling and alignment.

Example:
scr new "horizontalMenu" "row" "0" "max/min" "mainView"; scr set "horizontalMenu" "align" "center";

7. ADAPTIVE

An adaptive container that automatically adjusts the layout of child widgets based on available space (horizontally or vertically).

Example:
scr new "adaptiveLayout" "adaptive" "1" "max/max" "mainView";

8. CARD

A container with rounded corners and a background color, often used to group related elements.

Example:
scr new "infoCard" "card" "0" "min/min" "mainView"; scr set "infoCard" "padding" "20";

9. IMAGE

A widget for displaying images. It can load images from a local file or URL.

Example:
scr new "logoImage" "image" "0" "min/min" "mainView"; scr set "logoImage" "value" "https://example.com/logo.png";

10. TOP_BAR

A top bar typically used for headers, navigation buttons, or other controls.

Example:
scr new "headerBar" "topBar" "0" "max/min" "mainView"; scr set "headerBar" "background" "blue";

11. BOTTOM_BAR

A bottom bar often containing navigation buttons or actions, such as a FAB (Floating Action Button).

Example:
scr new "footerBar" "bottomBar" "0" "max/min" "mainView"; scr new "menuButton" "button" "0" "min/min" "footerBar"; scr set "menuButton" "foreground" "menuIcon";

12. LIST

A widget for displaying lists of items, supporting scrolling and configurable for vertical or horizontal layout.

Example:
scr new "itemList" "list" "1" "max/max" "mainView"; scr set "itemList" "scrollable" "true";

Widget Properties

Each widget supports a set of properties that can be configured using the scr set command. Here are the main properties available for most widgets:

  • weight — The widget's weight for space distribution in a container.
  • variant — The widget's style (e.g., "primary", "secondary").
  • title — The text label or title.
  • value — The value stored by the widget (e.g., text in an input field).
  • foreground — The foreground color or icon.
  • background — The background color.
  • onClick — The path to a .steps file to run when clicked.
  • paddingTop, paddingRight, paddingBottom, paddingLeft — Internal padding.
  • marginTop, marginRight, marginBottom, marginLeft — External margins.
  • scrollable — Enables scrolling for containers.
  • size — The widget's size (e.g., "max/min", "100/50").
  • align — Alignment of child elements (e.g., "center", "start", "end").
  • justify — Space distribution between child elements (e.g., "spaceBetween", "spaceAround").

Practical Example

Creating a screen with navigation and a form:

Steps:
  • Create the main container:
    scr new "screen" "column" "0" "max/max" "root";
  • Add the top bar:
    scr new "topBar" "topBar" "0" "max/min" "screen"; scr set "topBar" "background" "gray";
  • Add a settings button to the top bar:
    scr new "settingsBtn" "button" "0" "min/min" "topBar"; scr set "settingsBtn" "title" "Settings"; scr set "settingsBtn" "onClick" "/settings.steps";
  • Add the main content:
    scr new "content" "column" "1" "max/max" "screen"; scr set "content" "padding" "15";
  • Add an input field:
    scr new "nameInput" "input" "0" "max/min" "content"; scr set "nameInput" "title" "Your Name";
  • Add a submit button:
    scr new "submitBtn" "button" "0" "min/min" "content"; scr set "submitBtn" "title" "Submit"; scr set "submitBtn" "onClick" "/submit.steps";

Tips

  • Each widget must have a unique name (idName) to avoid conflicts.
  • Use containers (column, row, adaptive) to organize widgets.
  • Configure variant, foreground, and background to match the design.
  • Use onClick to bind actions to widgets.
  • Enable scrollable only for containers with a lot of content.

Conclusion

The supported widget types in Virtel Steps provide extensive capabilities for creating complex and adaptive user interfaces. From basic text and button widgets to containers and navigation bars, each widget type has its purpose and set of properties, allowing flexible customization of the appearance and behavior of applications.

Commands

scr new

Creates a new widget on the screen with a specified type, weight, size, and parent widget.

scr new (idName) (viewType) (weight) (size) (parent)
  • idName: The unique identifier of the widget (type: VAR).
  • viewType: The type of widget ("view", "text", "button", "input", etc.) (type: VAR).
  • weight: The weight for space distribution (number, 0 if none) (type: VAR).
  • size: The size in "width/height" format (e.g., "max/min") (type: VAR).
  • parent: The identifier of the parent widget (type: VAR).
scr new "myButton" "button" "0" "max/min" "root"; scr set "myButton" "title" "Click Me";

This example creates a button "myButton" in "root" and sets its title to "Click Me".

scr stop

Pauses a widget, stopping its updates.

scr stop (idName)
  • idName: The identifier of the widget to pause (type: VAR).
scr new "myButton" "button" "0" "max/min" "root"; scr stop "myButton";

This example creates a button and pauses it.

scr resume

Resumes a paused widget.

scr resume (idName)
  • idName: The identifier of the widget to resume (type: VAR).
scr new "myButton" "button" "0" "max/min" "root"; scr stop "myButton"; scr resume "myButton";

This example creates a button, pauses it, and then resumes it.

scr clear

Clears all child widgets from a specified widget, removing them recursively.

scr clear (idName)
  • idName: The identifier of the widget to clear (type: VAR).
scr new "container" "column" "0" "max/max" "root"; scr new "child" "text" "0" "max/min" "container"; scr clear "container";

This example creates a container with a child text widget and then clears the container.

scr del

Deletes a widget from the system.

scr del (idName)
  • idName: The identifier of the widget to delete (type: VAR).
scr new "myButton" "button" "0" "max/min" "root"; scr del "myButton";

This example creates a button and then deletes it.

scr set

Sets a property of a widget by its identifier.

scr set (idName) (property) (value)
  • idName: The identifier of the widget (type: VAR).
  • property: The property to set (e.g., "title", "onClick", "weight") (type: VAR).
  • value: The value for the property (type: VAR).
scr new "myButton" "button" "0" "max/min" "root"; scr set "myButton" "title" "Click Me";

This example creates a button and sets its title to "Click Me".

scr get

Gets the value of a widget’s property and stores it in a new variable.

scr get (idName) (property) (newVarName)
  • idName: The identifier of the widget (type: VAR).
  • property: The property to get (type: VAR).
  • newVarName: The name of the new variable to store the value (type: VAR).
scr new "myInput" "input" "0" "max/min" "root"; scr set "myInput" "value" "Hello"; scr get "myInput" "value" inputValue; csl write inputValue;

This example sets an input value to "Hello", retrieves it, and prints it.

scr nav

Sets up navigation for system buttons (settings, home, back) by assigning a file to run when clicked.

scr nav (file) (navName)
  • file: The path to the file to run (type: VAR).
  • navName: The navigation button name ("settings", "home", "back") (type: VAR).
scr nav "/settings.steps" "settings";

This example assigns "/settings.steps" to the "settings" navigation button.

scr page

Creates a new page in the system for displaying widgets.

scr page
    scr page; scr new "title" "text" "0" "max/min" "root"; scr set "title" "title" "New Page";

    This example creates a new page and adds a title widget to it.