Memento JavaScript UI

Overview

The ui() method is a JavaScript API provided by Memento Database that grants access to a framework of methods and objects for creating user interfaces (UIs) within Memento widgets. With this method, developers can create various UI elements such as text labels, buttons, images, layers, and checkboxes.

Example

ui().text('Hello, world!');

In this example, the ui() method is called to create a new UI object, which is then used to create a text label with the text "Hello, world!".

Notes

• A script must return one UI object.
• If you want to display multiple UI objects, you can use a layout object, which can hold multiple objects.

Example usage of a layout object:

ui().layout([
ui().text('This is a text label'),
ui().button('Click me!'),
ui().image('https://example.com/myimage.png')
]);

In this example, the layout object is created by calling the layout() method on a UI object and passing in multiple UI objects as arguments. The layout object contains a text label, a button, and an image, which are grouped together within a single view.

Base Methods

Define size of an element:

• width(width: int): Sets the width of the UI element in pixels.
• height(height: int): Sets the height of the UI element in pixels.
• width_match_parent(): Sets the width of the UI element to match the parent container's width.
• height_match_parent(): Sets the height of the UI element to match the parent container's height.
• width_wrap_content(): Sets the width of the UI element to wrap the content.
• height_wrap_content(): Sets the height of the UI element to wrap the content.

Weight:

• weight(weight: int): Sets the weight of the UI element in a layout.

Tag:

• tag(text: string): Sets the tag for the UI element. This tag can be used to find and manipulate the element later during events such as button clicks.

Example Usage:

ui().button('Button').width(100).height(50).tag('button1');

In this example, a button UI element is created with a width of 100 pixels, a height of 50 pixels, and the tag "button1" is set for later reference during events such as button clicks.

Text Element

The text object is used to create a text label.

Syntax

ui().text(text: string)

Parameters

• text (required): The text to be displayed in the label.

Example Usage

ui().text('Hello');

In this example, the text() method is called on a UI object to create a new text label with the text "Hello".

Font Settings Font settings can be applied to text objects using the font() method.

Syntax

ui().text(text: string).font(fontOptions)

Parameters

• fontOptions (required): An object containing font settings.

Font Options

• size (optional): The font size in pixels.
• color (optional): The font color as a string or hexadecimal value.
• style (optional): The font style, such as "bold" or "italic".

Example

ui().text('Hello').font({ size: 10, color: 'red', style: 'bold' });

In this example, a text object is created with the text "Hello" and the font settings are set to a size of 10 pixels, red color, and bold style.