|
MoSync 3.3
|
|
MoSync 3.3
|
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 int MAWidgetHandle |
| typedef int MAWScreenTransitionType |
1.7.6.1