OS.js Manual

Using Scheme

The Scheme file is the default provided way to build User Interfaces. This is normal HTML with custom tags for OS.js components.

Example

<application-window data-id="SchemeTestWindow">
  <gui-vbox>
    <gui-vbox-container data-grow="0" data-shrink="1" data-basis="auto">

      <!-- Fragment within this file -->
      <gui-fragment data-fragment-id="MenuBar" />

    </gui-vbox-container>
    <gui-vbox-container data-grow="1" data-shrink="0" data-basis="auto" data-fill="true">

      <!-- Fragment from external file -->
      <gui-fragment data-fragment-external="scheme-part.html" />

    </gui-vbox-container>
  </gui-vbox>
</application-window>

<application-fragment data-id="MenuBar">
  <gui-menu-bar>
    <gui-menu-bar-entry data-label="LBL_FILE">
      <gui-menu data-id="SubmenuFile">
        <gui-menu-entry data-id="MenuClose" data-label="LBL_CLOSE"></gui-menu-entry>
      </gui-menu>
    </gui-menu-bar-entry>
  </gui-menu-bar>
</application-fragment>

GUI Elements

GUI Elements are comprised of regular HTML, JavaScript and CSS.

For methods see Misc modules.

Elements

Elements are speparated into these categories:

  1. Containers
  2. Media
  3. Input
  4. Views
  5. Misc

Containers

gui-vbox

A container with vertical (rows) that you can shrink/expand, also make content expand or fill.

gui-vbox

Allowed Children gui-vbox-container
API Reference Overview
gui-hbox

A container with horizontal (columns) that you can shrink/expand, also make content expand or fill.

gui-hbox

Allowed Children gui-hbox-container
API Reference Overview
gui-paned-view

A container with horizontal (columns) that you can shrink/expand, also make content expand or fill.

gui-paned-view

Allowed Children gui-paned-view-container
API Reference Overview
gui-tabs

A tabbed container.

gui-tabs

Allowed Children gui-tab-container
API Reference Overview
gui-toolbar

A container for holding buttons, etc.

Allowed Children all
API Reference Overview
gui-button-bar

Works like a toolbar, but is made for holding buttons with user-defined position(s).

Allowed Children all
API Reference Overview

Media

gui-image

A normal image.

Allowed Children none
API Reference Overview
gui-canvas

A paintable image (no actual painting included)

Allowed Children none
API Reference Overview
gui-audio

Play sounds or music.

Allowed Children none
API Reference Overview
gui-video

Display a video.

Allowed Children none
API Reference Overview
gui-iframe

Display a iframe.

Allowed Children none
API Reference Overview

Input

gui-label

Display a normal text label.

gui-label

Allowed Children none
API Reference Overview
gui-button

A button made for clicking!

gui-button

Allowed Children none
API Reference Overview
gui-switch

A button, but works more like a light-switch.

gui-switch

Allowed Children none
API Reference Overview
gui-radio

A radio button.

gui-radio

Allowed Children none
API Reference Overview
gui-checkbox

A checbox.

gui-checkbox

Allowed Children none
API Reference Overview
gui-select

A dropdown input.

gui-select

Allowed Children none
API Reference Overview
gui-select-list

A selectable list.

gui-select-list

Allowed Children none
API Reference Overview
gui-slider

A slider for giving a variable input.

gui-slider

Allowed Children none
API Reference Overview
gui-text

A text entry box.

gui-text

Allowed Children none
API Reference Overview
gui-password

A password entry box.

gui-password

Allowed Children none
API Reference Overview
gui-textarea

A big text entry area.

gui-textarea

Allowed Children none
API Reference Overview
gui-richtext

A big text entry area, with support for HTML.

Allowed Children none
API Reference Overview

Views

gui-tree-view

A view with tree display (nested).

gui-tree-view

Allowed Children none
API Reference Overview
Special Events activate and select
gui-icon-view

A view with icon display.

gui-icon-view

Allowed Children none
API Reference Overview
Special Events activate and select
gui-list-view

A view with list display.

gui-list-view

Allowed Children none
API Reference Overview
Special Events activate and select
gui-file-view

A combination of all views above, with direct connection to the VFS. For file browsing.

Allowed Children none
API Reference Overview
Special Events activate and select

Misc

gui-progressbar

A box for showing progress.

gui-progress

Allowed Children none
API Reference Overview
gui-color-swatch

A box for selecting colors from a palette.

gui-color-swatch

Overview
Allowed Children none
API Reference
gui-menu-bar

A bar for showing menus with.

gui-menu-bar

Allowed Children gui-menu-bar-entry
API Reference Overview
Special Events select
gui-menu

A menu box.

Supported Parents gui-menu-bar-entry
Allowed Children gui-menu-entry
API Reference Overview
Special Events select
gui-statusbar

A bar for showing statuses.

Allowed Children none
API Reference Overview
gui-file-upload

Creates a button for uploading files.

Allowed Children none
API Reference Overview
gui-input-modal

A textbox with an attached button designed for bringing up dialogs to set values.

gui-input-modal

Allowed Children none
API Reference Overview
gui-color-box

A button, but instead of text shows the color assigned.

gui-color-box

Allowed Children none
API Reference Overview