Article: Available widgets

If you're a pro customer JetScript, you can use the UI toolkit. Most of the widgets model the appearance of X-Plane's native widgets.

Buttons

Primary and secondary color styles: Buttons come in two styles: primary buttons are intended to be used for the main/default action of a window, while secondary buttons can be used for secondary or tertiary actions.

Default vs main size: Two button sizes are available, and they correspond to the button sizes used in X-Plane 12.

Button modes:

• Action: Perform a single action when pressed. The action is triggered when the button goes down.
• Momentary: Perform an action while the button is held. The action starts when the button is pressed, and ends when the button is released.
• Toggle: The button has two states, on and off. Clicking the button toggles between these two states; the state is indicated by the button color (Primary is on, secondary is off).
• Multistate: The button has one of multiple states; clicking the button advances through the states (on mouse up). The coloring of the button changes depending on state; when creating the button, you'll need to specify for each state whether to show the primary or secondary color when the button is in that state.

(image)

Images - PNG and SVG

PNG: When showing images, PNG is the preferred format for raster images. PNGs support alpha transparency when rendered.

Note: JetScript currently supports PNGs in RGB and RGBA color formats, with 8-bit depth. Animated PNGs (APNG) are not supported at this time.

SVG: For vector images, SVG is the supported format. SVGs are internally rasterized to different resolutions depending on the user's graphics settings (UI scaling settings, primarily); rerendering may happen if the image widget is resized (scaling the image), or if the user changes their graphics settings.

(image: SVG)

Text fields

The text field is one of the most complicated widgets; a lot of functionality is necessary to emulate the various features that most OS-provided text fields have.

(image: text field with selection)

Keyboard shortcuts: For many users, keyboard shortcuts are a natural part of navigating in, and selecting in, a text field:

• Ctrl-X / ⌘X : cut

• Ctrl-C / ⌘C : copy

• Ctrl-V / ⌘V : paste

• Ctrl-A / ⌘A : select all

• Shift-⬆️ : select to beginning of field

Spacer

A spacer is an invisible element, often used to help space other elements. You might use this to fill the space between left-aligned elements and right aligned elements in a row, for example.

(image: DRT button row)

Sliders?

Tables?

Layout: Flexbox is the only option

Horizontal and vertical

Grow and shrink

Expand