MoSync 3.3

JavaScript API Documentation

Contents

mosync.nativeui

This is a class. Please look into the memebers for usage

mosync.nativeui.mainWebViewId

A unique string ID for the main webview widget.

mosync.nativeui.setWebViewHandle

Sets the web view widget handle and maps it inside the widgetIDList Parameters:

mosync.nativeui.NativeWidgetElement

A widget object that user can interact with instead of using the low level functions. This class is not used directly: see mosync.nativeui.create for usage.

Parameters:

mosync.nativeui.NativeWidgetElement.setProperty

Sets a property to the widget in question.

Parameters:

mosync.nativeui.NativeWidgetElement.getProperty

Retrieves a property and call the respective callback.

Parameters:

mosync.nativeui.NativeWidgetElement.addEventListener

Registers an event listener for this widget.

Parameters:

Example

    //Create a new button and add an event listener to it
    var myButton = mosync.nativeui.create("Button" ,"myButton",
    {
        //properties of the button
        "width": "FILL_AVAILABLE_SPACE",
        "text": "Click Me!"
    });
    myButton.addEventListener("Clicked", function()
    {
        alert("second button is cliecked");
    });

mosync.nativeui.NativeWidgetElement.addChild

Adds a child widget to the current widget.

Parameters:

Example

     //Create a Native Screen
   var myScreen = mosync.nativeui.create("Screen" ,"myScreen", {
        "title": "My Screen"
   });

   //Create a Button
     var myButton = mosync.nativeui.create("Button" ,"myButton",
     {
        //properties of the button
        "width": "FILL_AVAILABLE_SPACE",
        "text": "Click Me!"
     });

    //Add the button to the Created Screen
  myScreen.addChild("myButton")

mosync.nativeui.NativeWidgetElement.insertChild

Inserts a new child widget in the specified index.

Parameters:

Example

     //Create a Native Screen
   var myScreen = mosync.nativeui.create("Screen" ,"myScreen", {
        "title": "My Screen"
   });

   //Create a Button
     var myButton = mosync.nativeui.create("Button" ,"myButton",
     {
        //properties of the button
        "width": "FILL_AVAILABLE_SPACE",
        "text": "Click Me!"
     });

    //Insert the button to the Created Screen child list
  myScreen.insertChild(0, "myButton")

mosync.nativeui.NativeWidgetElement.removeChild

Removes a child widget from the child list of the current widget.

Parameters:

Example

     //Create a Native Screen
   var myScreen = mosync.nativeui.create("Screen" ,"myScreen", {
        "title": "My Screen"
   });

   //Create a Button
     var myButton = mosync.nativeui.create("Button" ,"myButton",
     {
        //properties of the button
        "width": "FILL_AVAILABLE_SPACE",
        "text": "Click Me!"
     });

    //Add myButton to the screen
  myButton.addTo("myScreen");

    //Remove mybutton from the childs of myScreen
  myScreen.removeChild("myButton")

mosync.nativeui.NativeWidgetElement.addTo

Adds the current widget as a child to another widget.

Parameters:

Example

    //Create a new button and add an event listener to it
    var secondButton = mosync.nativeui.create("Button" ,"SecondButton",
    {
        //properties of the button
        "width": "FILL_AVAILABLE_SPACE",
        "text": "Second Button"
    });
    secondButton.addTo("mainLayout");
    secondButton.addEventListener("Clicked", function()
    {
        alert("second button is clicked");
    });

mosync.nativeui.NativeWidgetElement.clone

Clones the current Widget.

Parameters:

Example

    //Create a new button and add an event listener to it
    var secondButton = mosync.nativeui.create("Button" ,"SecondButton",
    {
        //properties of the button
        "width": "FILL_AVAILABLE_SPACE",
        "text": "Second Button"
    });
    secondButton.addTo("mainLayout");
    var thirdButton = secondButton.clone();

mosync.nativeui.NativeWidgetElement.show

Shows a screen widget on the screen. Will be set to null if the widget is not of type screen.

Parameters:

Example

     //Create a Native Screen
   var myScreen = mosync.nativeui.create("Screen" ,"myScreen", {
        "title": "My Screen"
   });

   //Create a Button
     var myButton = mosync.nativeui.create("Button" ,"myButton",
     {
        //properties of the button
        "width": "FILL_AVAILABLE_SPACE",
        "text": "Click Me!"
     });

    //Add the button to the Created Screen
  myScreen.addChild("myButton");

  //Show the created screen on the device's screen
  myScreen.show();

mosync.nativeui.NativeWidgetElement.pushTo

Pushes a screen to a StackScreen.

Parameters:

Example

     //Create a Native StackScreen
   var myStackScreen = mosync.nativeui.create("StackScreen" ,"myStackScreen");
   var myScreen = mosync.nativeui.create("Screen" ,"myScreen", {
        "title": "My Screen"
   });

   //Create a Button
     var myButton = mosync.nativeui.create("Button" ,"myButton",
     {
        //properties of the button
        "width": "FILL_AVAILABLE_SPACE",
        "text": "Click Me!"
     });

    //Add the button to the Created Screen
  myScreen.addChild("myButton");

  //Show the created screen on the device's screen
  myStackScreen.show();

  myScreen.pushTo("myStackScreen")

mosync.nativeui.NativeWidgetElement.pop

Pops a screen from the current stackscreen, Use only for StackScreen widgets.

Parameters:

Example

     //Create a Native StackScreen
   var myStackScreen = mosync.nativeui.create("StackScreen" ,"myStackScreen");
   var myScreen = mosync.nativeui.create("Screen" ,"myScreen", {
        "title": "My Screen"
   });

   //Create a Button
     var myButton = mosync.nativeui.create("Button" ,"myButton",
     {
        //properties of the button
        "width": "FILL_AVAILABLE_SPACE",
        "text": "Click Me!"
     });

    //Add the button to the Created Screen
  myScreen.addChild("myButton");

  //Show the created screen on the device's screen
  myStackScreen.show();

  myScreen.pushTo("myStackScreen");

  myStackScreen.pop();

mosync.nativeui.NativeWidgetElement.showDialog

Shows a modal dialog widget on the screen.

Parameters:

mosync.nativeui.NativeWidgetElement.hideDialog

Hides a modal dialog widget from the screen.

Parameters:

document.getNativeElementById

Used to access the nativeWidgetElements created from the HTML markup. It returns the object that can be used to change the properties of the specified widget.

Parameters:

Example

      //Get the screen widget
    var myScreen = document.getNativeElementById("MyScreen")
    //Show it on the device's screen
    myScreen.show()

mosync.nativeui.getMainWebViewId

Get the id of the main webview. This can be used to insert the main webview into a widget tree. @return The string id of the main webview widget.

mosync.nativeui.create

Creates a widget and returns a mosync.nativeui.NativeWidgetElement object. The object then can be used for modifying the respective NativeElement.

Parameters:

ReturnValue: An object of type mosync.nativeui.NativeWidgetElement

Example:

        var myButton = mosync.nativeui.create("Button", "myButton", {
                    "text" : "Click Me!",
                    "width" : "FILL_AVAILABLE_SPACE"
                    });

mosync.nativeui.getNativeHandleById

Get the MoSync widget handle for the JavaScript NativeUI element with the given ID.

Parameters:

mosync.nativeui.MAIN_WEBVIEW

Constant to be used to reference the main WebView in an app when calling mosync.nativeui.callJS().

mosync.nativeui.callJS

Evaluate JavaScript code in another WebView. This provides a way to pass messages and communicate between WebViews.

Parameters:

mosync.nativeui.UIReady

A function that is called when the UI is ready. By default it loads the element with ID "mainScreen" Override this function to add extra functionality. See mosync.nativeui.initUI for more information.

mosync.nativeui.initUI

Initializes the UI system and parsing of the XML input. This function should be called when the document body is loaded.

@return true on success, false on error.

  <!-- The function can be called in the initialization phase of HTML document.-->
  <body onload="mosync.nativeui.initUI()">

After finalizing the widgets, the UI system will call the UIReady function. To add your operation you can override the UIReady function as below:

  mosync.nativeui.UIReady = function()
  {
  //Do something, and show your main screen
  }

mosync.nativeui.setScreenSize

Store the screen size information coming from MoSync in the mosync.nativeui namespace. This function is called from C++.