Getting Started

Invoking Native Code

Include in Your Project

NativeObject

Platform-Specific

Real-World Examples

Using Native UI

Docking

Overlaying

Fullscreen

Widget

Floating

Navigation

Styling Native Controls

Working with Images

Native UI Layout

Panels

Properties

Writing Platform-Specific Code

Security

UI Framework Reference

Layout Panels

Controls

Ace

Platform Helpers

NativeObject

Examples

Troubleshooting Errors

UI Framework Reference

LAYOUT PANELS


Canvas

Enables positioning child elements with coordinates.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

Panel > UIElement


StackPanel

Arranges child elements into a single line that can be oriented horizontally or vertically.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

Panel > UIElement


Grid

Arranges child elements into flexible rows and columns.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

Panel > UIElement


CONTROLS


AppBarButton

A button meant to be displayed in a CommandBar.

View APIs

Events (attach with addEventListener):

  • click
  • loaded

Base Classes:

Button > ButtonBase > ContentControl > Control > UIElement


Button

A button that can respond to clicks.

View APIs

Events (attach with addEventListener):

  • click
  • loaded

Base Classes:

ButtonBase > ContentControl > Control > UIElement


CommandBar

A specialized app bar that provides layout for AppBarButton and related command elements.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

ContentControl > Control > UIElement


DatePicker

A control that enables a user to pick a date value.

View APIs

Events (attach with addEventListener):

  • datechanged
  • loaded

Base Classes:

Control > UIElement


HyperlinkButton

A button that functions as a hyperlink.

View APIs

Events (attach with addEventListener):

  • click
  • loaded

Base Classes:

Button > ButtonBase > ContentControl > Control > UIElement


Image

Displays an image. See Working with Images for more info.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

UIElement


ListBox

A selectable list of items.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

Selector > ItemsControl > Control > UIElement


ListBoxItem

A container for an item in a ListBox.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

SelectorItem > ContentControl > Control > UIElement


Page

Use this as the root content if you want app bars.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

UserControl > UIElement


A general-purpose container for hosting UI objects on top of other content, such as HTML.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

ContentControl > Control > UIElement


ace:TabBar

A command bar designed for tabs rather than buttons.

Events (attach with addEventListener):

  • loaded


TextBlock

A lightweight element for displaying small amounts of text.

Events (attach with addEventListener):

  • loaded

Base Classes:

UIElement


TimePicker

A control that enables a user to pick a time value.

View APIs

Events (attach with addEventListener):

  • loaded
  • timechanged

Base Classes:

Control > UIElement


ToggleSwitch

A switch that can be toggled between two states.

View APIs

Events (attach with addEventListener):

  • isonchanged
  • loaded

Base Classes:

Control > UIElement


WebView

A control that hosts HTML.

View APIs

Events (attach with addEventListener):

  • loaded

Base Classes:

UIElement


ACE


  • ace.valueOn({ ios: xxx, android: xxx })
  • ace.navigate(url, onSuccess, onError)
  • ace.navigate(uiObject, onSuccess, onError)
  • ace.load(url, onSuccess, onError)
  • ace.goBack()
  • ace.getHostPage()
  • ace.getHostWebView()
  • ace.addEventListener(“navigating”)
  • ace.addEventListener(“navigated”)
  • ace.removeEventListener(…, func)
  • ace.raiseEvent(…)


PLATFORM HELPERS (ANDROID)

ace.android.appWidget.add(text)

Adds the passed-in string as a new item in your list-based Android app widget.

ace.android.appWidget.clear()

Clears all the items in your list-based Android app widget.

ace.android.getContext()

Returns the current Android application context object.

ace.android.getActivity()

Returns the current activity.

ace.android.getIntent()

Returns the current intent associated with the current activity.

ace.android.getId(name, onSuccess, onError)

Gets the numeric Android resource ID for the given resource name.

ace.android.ifVersionAtLeast(version, onTrue, onFalse)

Calls your onTrue callback if the current version of Android is greater than or equal to the version you specify. Otherwise, your optional onFalse callback is called.

// setBackgroundTintList only works on LOLLIPOP_MR1 or later
ace.android.ifVersionAtLeast(ace.android.version.LOLLIPOP_MR1, function (actualVersion) {
    button2.invoke("setBackgroundTintList", tintList2);
}, function (actualVersion) {
    button2.invoke("setBackgroundColor", color2);
});

ace.addEventListener(“android.intentchanged”)

Attaches an event handler that gets invoked whenever the current activity’s intent changes. One thing that causes this is the selection of an item on a list-based app widget.

ace.android.version

An enumeration of Android version codes, such as KITKAT, LOLLIPOP, LOLLIPOP_MR1, and M (for Marshmallow). This matches Android’s VERSION_CODES enumeration.


PLATFORM HELPERS (iOS)

ace.ios.getNavigationController()

Returns the current UINavigationController instance.

ace.ios.getPresentedViewControllerAsync(onSuccess)

If a view controller has been “presented” (e.g. a modal dialog), this retrieves that view controller.

ace.ios.getCurrentModalContent()

If a modal dialog is showing, this retrieves the root UI element from it.

ace.ios.setCurrentModalContent(content)

If a modal dialog is showing, this replaces its root UI element.


NATIVEOBJECT


NativeObject is the base class of UIElement, but you can also use it directly to call arbitrary native code.

  • invoke (instance and static)
  • getField (instance and static)
  • setField (instance and static)
  • get (for special properties)
  • set (for special properties)
  • addEventListener
  • removeEventListener
  • removeAllEventListeners
  • raiseEvent