Property Types

Bounds

Widget bounds are represented as an object with the following properties:

• left: number The horizontal offset from the parent’s left edge in dip
• top: number The vertical offset from the parent’s top edge in dip
• width: number The width of the widget in dip
• height: number The height of the widget in dip

Example:

var buttonWidth = button.get("bounds").width;

See also Layout.

Color

Colors are specified as strings using one of the following formats:

• #xxxxxx
• #xxx
• rgb(r, g, b) with r, g and b being numbers in the range 0..255.
• rgba(r, g, b, a) with a being a number in the range 0..1.
• a color name from the CSS3 specification.
• transparent sets a fully transparent color. This is a shortcut for rgba(0, 0, 0, 0).
• initial resets the color to its (platform-dependent) default.

Examples:

"#f00"
"#ff0000"
"rgb(255, 0, 0)"
"rgba(255, 0, 0, 0.8)"
"red"
"initial"

Dimension

A positive float, or 0, representing device independent pixels.

See also Layout.

Margin

Distance to a parent’s or sibling’s opposing edge in one of these formats:

• offset
• percentage
• Widget
• "selector"
• "prev()"
• "percentage offset"
• "selector offset"
• "prev() offset"
• [Widget, offset]
• [percentage, offset]
• [selector, offset]
• ["prev()", offset]

See also Layout.

Font

Fonts are specified as strings using the shorthand syntax known from CSS, specifically "[font-style] [font-weight] font-size [font-family[, font-family]*]". The font family may be omitted, in this case the default system font will be used. Generic font families supported across all platforms are "serif", "sans-serif", "condensed" and "monospace". Supported font weights are "light", "thin", "normal", "medium", "bold" and "black". The value "initial" represents the platform default.

Examples:

"bold 24px"
"12px sans-serif"
"thin italic 12px sans-serif"
"initial"

GestureObject

Object containing information about the currently performed gesture. See “Touch API”.

Image

Images are specified as objects with the following properties:

• src: string Image path or URL. Relative paths are resolved relative to ‘package.json’.
• width: number (optional) Image width in dip, extracted from the image file when missing.
• height: number (optional) Image height in dip, extracted from the image file when missing.
• scale: number (optional) Image scale factor - the image will be scaled down by this factor. Ignored when width or height are set.

A plain string can be used as a shorthand, e.g. "image.jpg" equals {src: "image.jpg"}.

Examples:

"images/catseye.jpg"
{src: "images/catseye.jpg", width: 300, height: 200}
{src: "http://example.com/catseye.jpg", scale: 2}

LayoutData

Used to define how a widget should be arranged within its parent. See “Layouts”.

Offset

A positive or negative float, or 0, representing device independent pixels.

See also Layout.

Percentage

A string starting with a number (int) followed directly by “%”. May be negative.

See also Layout.

TouchEvent

Object containing information about the currently performed gesture. See “Touch API”.

Transformation

Transformations are specified as an object with the following properties:

• rotation: number, default: 0 Clock-wise rotation in radians.
• scaleX: number, default: 1 Horizontal scale factor.
• scaleY: number, default: 1 Vertical scale factor.
• translationX: number, default: 0 Horizontal translation (shift) in dip.
• translationY: number, default: 0 Vertical translation (shift) in dip.
• translationZ: number, default: 0 Z-axis translation (shift) in dip. Android 5.0+ only.

Example:

{scaleX: 2, scaleY: 2, rotation: Math.PI * 0.75}

This transformation will make the widget twice as big and rotate it by 135°.

Selector

Selectors are used to filter a given list of widgets. It can be function returning a boolean for a given widget. However, more commonly a selector is a string that may either reference a widgets type (e.g. "Button", "TextView"), or its id ("#myButton", "#myTextView").