Creating Native UI Widgets in JavaScript

Creating native widgets in JavaScript is a straight forward process: In order to do that you just can all the function "mosync.nativeui.create" with a widget type, an ID (which can be ignored if you don't want to refer to the widget later on), and the attributes (or in MoSync terms properties) that you want to be set on your created widget Note: To find out about the available widget types and their properties please see MoSync's API Reference for Widget API.

For example to create a "Native Button" you can use the following code:

	//Create a new button with ID MyButton. 
	var myButton = mosync.nativeui.create("Button" ,"MyButton", 
	{
		//properties of the button
		"width": "100%",
		"text": "My Cool Button"
	});

The function returns an object that you can use to modify the widget, add event listeners to it, add it to a layout, and etc. You can always set the attributes later, but using this format you can get the best possible performance and results. To set a new property to your created widget you can call the "setProperty" function in your object:

	myButton.setProperty("fontColor", "0xfffffff");

To add an event listener function you can use "addEventListener" function of the widget object. In our example:

	myButton.addEventListener("Clicked", function() 
	{
		alert("My button is clicked");
	});

Our button can also be added to a layout using "addTo" method:

	myButton.addTo("mainLayout");