Controls

Border

Attributes:

• border (color)
• borderThickness (thickness)
• cornerRadius
• padding (thickness)
• background (color)
• alignContentV = Top, [Center], Bottom
• alignContentH = Left, [Center], Right
• contents

Example:

{ control: "border", border: "Red", borderThickness: 10, cornerRadius: 5, padding: 10, background: "Blue", contents: [
    { control: "rectangle", width: "{content}", height: "{content}", fill: "Green" },
] }

Canvas

Child elements position themselves via top and left attributes.

!!! Explicit size vs wrap content (not sure wrap content is even working on all platforms)

!!! Z-order spec for contents (vs order added as it is now)?

Example:

{ type: "canvas", contents: [
    { type: "text", value: "Somevalue", top: 10, left: 25 },
    { type: "text", value: "Othervalue", top: 20, left: 5 },
] };

ScrollView

Attributes:

• orientation = [Vertical], Horizontal
• contents

Example:

{ control: "scrollview", orientation: "Horizontal", height: 150, width: 150, contents: [
    { control: "image", height: 300, width: 300, resource: "{image}" },
] },

Stackpanel

Attributes:

• orientation = [Vertical], Horizontal
• alignContentV = Top, [Center], Bottom
• alignContentH = [Left], Center, Right
• padding (thickness)
• contents

Example:

{ control: "stackpanel", orientation: "Horizontal", margin: { top: 10 }, contents: [
    { control: "button", caption: "Login", width: 125, binding: "login" },
    { control: "button", caption: "Cancel", width: 125, binding: "cancel" },
] },

Button

Attributes:

• caption

Bindings:

• onClick (command + params)

Example:

{ control: "button", caption: "Login", width: 125, binding: "login" },

Image

Attributes:

• resource
• !!! Sizing / scaling

Example:

{ control: "image", height: 300, width: 300, resource: "{image}" },

Rectangle

Attributes:

• border (color)
• borderThickness (thickness)
• cornerRadius
• fill (color)

Example:

{ control: "rectangle", width: "200", height: "200", fill: "Green" },

Textbox / Password

Attributes:

• value (bound only?)

Bindings:

• value

Example:

{ control: "edit", binding: "username", width: 200 },

{ control: "password", binding: "password", width: 200 },

Textblock

Attributes:

• value

Example:

{ control: "text", value: "This is some text", fontsize: 10, width: 140, foreground: "Red" }

Slider

Attributes:

• value (bound only?)
• minimum
• maximum

Bindings:

• value

Example:

{ control: "slider", minimum: 0, maximum: 20, binding: "theValue", width: 300 },

ListBox/ListView/Picker

Attributes

• select - None, Single, Multiple (defaults to "Single"). Picker does not support this attribute, as it is always "Single".

Binding

• items - the array of elements in the list.

ListBox/Picker

• itemValue (defaults to "{$data}") - a token string applied to each "items" element to construct the string to display in the list. For example: "User: {firstName} {lastName}".

ListView

• itemTemplate - layout specification for each item (must be a single element, though that element can be a container that contains other layout elements).

• selection - the location in the view model where the current selection is maintained. If select is Single, then the location referred to by selection should contain a single item. If select is Multiple, then the location referred to by selection should contain an array of zero or more items.

• selectionItem (defaults to $data) - This is what is placed into "selection" (per item) and this is applied to each item in "items" for the purpose of matching items with selection items when setting selection state for the control. For example, if the selectionItem was "{itemId}", then the selection binding would be one or more elements of the "{itemId}" applied to the selected items. When resetting item selection, "{itemId}" will be applied to each list item, and the result will be compared with the value(s) in "selection" to see if the item should be selected. In the case of the default, the selection list will contain deep copies of the list view items, and the selection comparison will be a deep compare of those items with the list view items.

Commands

If select is None: onItemClick command - context is the item clicked

If select is Single: onSelectionChange command - context is the item that is now selected

If select is Multiple: onSelectionChange command - context is the listbox/listview context (not item-specific)

Example:

Toggle

!!! Resolve platform differences (title, on/off state description, switch labels) !!! Binding mappings (true/false, string on/off or other arbitrary values)

Attributes:

• value (binding only?)

Bindings:

• value
• onToggle (command + params)

Example:

{ control: "toggle", binding: "isSwitchOn" }

WebView

Attributes:

• contents (html string)
• url

Example:

{ control: "webview", width: 400, height: 200, contents: "<h1>Local Content</h1><i>This is <b>local</b> content</i>" },

{ control: "webview", width: 400, height: 200, url: "http://www.google.com" },

!!! How do we talk to the webview,, access it's locals, interact with it's scripts, etc? Use it for OAuth for example?

App/Command/Action bar:

!!! Document each, document available values for symbols/icons

• Windows: commandBar.button
• WinPhone: appBar.button / appBar.menuItem
• Android: actionBar.item
• iOS: navBar.button / toolBar.button