MoSync 3.3
Widget API

Modules

 Activity Indicator
 Button
 Check box
 CustomPicker
 Date Picker
 Edit box
 GL view
 Horizontal layout
 Image
 Image button
 Label
 List View
 List View Item
 List View Section
 Map
 Map pin
 Modal Dialog
 Navigation Bar
 Number Picker
 Options menu icon
 Panorama View
 Progress bar
 Radio Button
 Radio Group
 Rating Bar
 Relative layout
 Screen
 Screen transition types
 Search bar
 Slider
 Stack screen
 Tab screen
 Time Picker
 Toggle button
 Vertical layout
 Video view
 Web view
 Widget alignment
 Widget constants
 Widget event
 Widget functions
 Widget properties
 Widget result codes
 Widget types

Typedefs

typedef int MAWidgetHandle
typedef int MAWScreenTransitionType

Detailed Description

MoSync provides Native UI support on Android, iOS and Windows Phone. This means that you can develop user interfaces that use each target platform's own widgets. We have mapped the different ways of coding UIs to a single API. A few properties/widgets are only be available on one platform, but most are available on all three platforms (e.g. Android, iOs and Windows Phone).

All native UI API functions begin with the prefix "maWidget". It is a minimal API where widgets with different semantics in the UI can be created: widget properties affect widget appearance and behaviour. Some of the widgets can have children.

There are three main types of widget: Screens, Layouts and Views. We explain them briefly here. The illustration below shows a typical widget hierarchy:

           Screen
              |
        VerticalLayout
        /            \
    EditBox        ListView
                   /      \
            ListViewItem  ListViewItem....

See Also

NativeUI library.

Screens

Screens represent the root of a UI hierarchy. If you're used to iPhone programming, a Screen is equivalent to a UIViewController. If you're used to Android programming, a Screen is equivalent to an Activity.

For now there are three types of Screens: Screen, TabScreen, StackScreen.

To show a screen you use maWidgetScreenShow. A screen that is shown using this function should NOT have have a parent screen (i.e., it should be at the root of a widget hierarchy).

Layouts

There are different layouts to facilitate dynamic layouts. If you want the same layout for different screen sizes these come in handy.

For now there are three different layouts: RelativeLayout, VerticalLayout and HorizontalLayout.

All widgets have a set of default properties called "width" and "height". These properties specify the actual width and height of the widget. However these values can also be set to two different constants:

With vertical and horizontal layouts these constants are more powerful: they mean that the width or height should be divided among all widgets that have MAW_CONSTANT_FILL_AVAILABLE_SPACE set. For example, say you have a HorizontalLayout that is 320 wide and you add 2 widgets that are 30 pixels wide and then two widgets that have MAW_CONSTANT_FILL_AVAILABLE_SPACE set as the width. These will share the remaining space which equals 320-30*2=260. This means that they both will be 130 pixels wide.

Views

There are many different kinds of Views. They are all leaf-nodes in the UI tree.

Today these views are available:

Properties

Widget have properties. These can change the appearance or behaviour of the widget. For some widgets you can also get properties: for an EditBox, for example, you can get the current text of the edit box. See the respective property set in the reference documentation for more information about what properties each widget has.

Events

A UI system is rather useless if you don't connect it with some kind of logic. Whenever something in the UI happens, events are sent from the runtime to the MoSync applications. These can be hooked to do whatever needs to be done. The top level event is called EVENT_TYPE_WIDGET. When such an event is received, the data pointer of the MAEvent struct points to a MAWidgetEventData struct. See MAWidgetEventData for more information about the widget events.

As there aren't any listeners implemented in the Moblet architecture yet, you have to manually extract this data. An example of listening for a button event in the customEvent function of a Moblet:

void customEvent(const MAEvent& event) {
    if(event.type == EVENT_TYPE_WIDGET) {
        MAWidgetEventData* widgetEventData = (MAWidgetEventData*)event.data;
        if(event.widgetHandle == myButtonHandle &&
           widgetEventData->eventType == MAW_EVENT_CLICKED) {
            // do something when the button is pressed.
        }
    }
}

Typedef Documentation

typedef int MAWidgetHandle
 All Classes Namespaces Files Functions Variables Typedefs Enumerations Enumerator Friends Defines