UI & Widgets

Appmixer UI is a tool for building user interfaces with component-based widgets.

Configuration

Widgets are included in appmixer.ui instances made with Appmixer constructor:

const appmixer = new Appmixer(/* ... */)
const widget = appmixer.ui.FlowManager(config)

config.el

Type: String|Element | Default: null

HTML DOM element to serve as a container of the widget.

config.theme

Type: Object | Default: DefaultTheme

Custom theme definition.

config.l10n

Type: Object | Default: DefaultL10N

Custom localization texts.

config.lang

Type: String | Default: en

Language code for localization of components.

config.api

Type: Object | Default: DefaultAPI

Custom API methods.

Instance

widget.open

widget.open()

Mount the widget instance and render it inside the el container.

widget.close

widget.close()

Unmount the widget instance and hide the el container.

widget.reload

widget.reload()

Reload the entire widget.

widget.reset

widget.reset()

Reset the state of the widget to defaults.

widget.state

Use state for properties that may change at any time when the widget is active.

widget.state(path, value) // setter
widget.state(path) // getter

Example

{
  "foo": false,
  "bar": { "counter": 1 }
}

// set properties by key or path
widget.state('foo', true)
widget.state('bar', { counter: 2 })
widget.state('bar/counter', 3)

// get properties by key or path
widget.state('foo') // true
widget.state('bar') // { counter: 3 }
widget.state('bar/counter') // 3

// get the entire state
widget.state() // { foo: true, bar: { counter: 3 } }

// reset the state to defaults
widget.reset() // { foo: false, bar: { counter: 1 } }

widget.set

widget.set(key, value)

Set config property.

widget.get

widget.get(key, value)

Get config property.

widget.on

widget.on(name, handler)

Add a new event listener and disable the default handler of the event.

widget.off

widget.off(name)

Remove an event listener and enable the default handler of the event.