Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use Container object in a project.

What is Container ?

Container is a UI object which contains other UI objects in it. Every object inside the a container are positioned according to container’s position.

Container is used to group UI objects in order to command them by container object.

Example :

var myContainer = new SMF.UI.Container({
	left : "12%",
	top : "10%",
	width : "75%",
	height : "80%"
});
page1.add(myContainer); 

When you add the container object into a page, it will look like below :

         

Lets use some properties of container.

var myContainer = new SMF.UI.Container({
	left : "12%",
	top : "15%",
	width : "75%",
	height : "30%",
	backgroundTransparent : false,
	fillColor : SMF.UI.Color.BLUE,
	borderWidth : 3
});
page1.add(myContainer);

         

As you see in the above pictures, fillColor, backgroundTransparent and borderWidth properties are changed.

Animate

Animate is the one of the important methods of container object. Now, lets create a textButton object in order to perform animate when it is pressed.
Use the code block below :

var myButton = new SMF.UI.TextButton({
	left : "12%",
	top : "90%",
	width : "75%",
	height : "8%",
	text : "Start Animate",
	onPressed : function () {
		myContainer.animate({
			property : 'height',
			endValue : "10%",
			motionEase : SMF.UI.MotionEase.PLAIN,
			duration : 300,
			onFinish : function () {
				//do your action after finishing the animation
			}
		});
	}
});
page1.add(myButton);

As you see, the Y property is the one that is wanted to be changed.
Add this button into your main page, and than when you press this button you will see the change in the container’s position.

         

As you see in the above picture, after animate method run, container object’s height property is changed. At the beginning it was “90%”, after animate it became “40%”.

Animate can be used with other properties, such as : X, Y or width.
Duration value can be changed in order to use the appropriate speed. If it is higher, container will move slower. And, if the value is smaller, container will move faster.

Layout

As it is mentioned in the first part, container is an object which is used to group UI objects. Now we will see how to group objects inside a container.
Lets create different UI objects.

var myContainerLayout = new SMF.UI.Container({
		height : "80%",
		top : "10%"
	});
var myButton = new SMF.UI.TextButton({
		height : "15%",
		text : "button"
	});
var myImageButton = new SMF.UI.ImageButton({
		height : "15%",
		text : "imageButton"
	});
var myLabel = new SMF.UI.Label({
		height : "15%",
		text : "label"
	});
var myContainer = new SMF.UI.Container({
		height : "15%",
		text : "container"
	});

The first container which is named as myContainerLayout, will be the main container. Other objects will be added inside this main container.
Use the below code block in order to add the main container into page, and other objects into main container.

page1.add(myContainerLayout);
myContainerLayout.add(myButton);
myContainerLayout.add(myImageButton);
myContainerLayout.add(myLabel);
myContainerLayout.add(myContainer);

You can use the above code inside onShow function of page1.
As a result the page will look like :

         

All the objects are added inside the main container(myContainerLayout). Because the default layoutType is Absolute, they look like a chunk. Now lets see how they can be arranged without changing left, top or other properties.
The main container will be used in order to arrange the objects in it. Lets change the layoutType property of main container to Linear and orientation to horizontal :

var myContainerLayout = new SMF.UI.Container({
	layoutType : SMF.UI.LayoutType.LINEAR,
	orientation : SMF.UI.Orientation.HORIZONTAL
});

         

You can see that all of the objects inside the container are positioned. Only first object and the half of second object can be seen on device because of objects width properties.
Now let's change the orientation to vertical :

var myContainerLayout = new SMF.UI.Container({
	layoutType : SMF.UI.LayoutType.LINEAR,
	orientation : SMF.UI.Orientation.VERTICAL
});

         

As you see in the above picture, objects are arranged from top to bottom.

Events

NAME
DESCRIPTION
onControlAdded
Fired when a child control (for each control) is added (Fired after added)
onControlRemoved
Fired when a child control (for each control) is removed (Fired after remove)
onHide
Creates action(s) that are run when the object is disappeared on the page.(Inherited from Control.)
onShow
Creates action(s) that are run when the object is appeared on the page.(Inherited from Control.)
onTouch
Creates action(s) that are run when the object is touched from device’s screen.(Inherited from Control.)
onTouchEnded
Creates action(s) that are run when the touching is ended.(Inherited from Control.)

Let's create a container object with onControlAdded and onControlRemoved methods in it :

var myContainerAddObject = new SMF.UI.Container({
		height : "70%",
		top : "10%",
		layoutType : SMF.UI.LayoutType.LINEAR,
		orientation : SMF.UI.Orientation.VERTICAL,
		backgroundTransparent : false,
		fillColor : SMF.UI.Color.BLUE,
		borderWidth : 3,
		onControlAdded : function () {
			alert("onControlAdded");
		},
		onControlRemoved : function () {
			alert("onControlRemoved");
		}
	});

Now create an object in order to add it or remove it from container :

var myButton = new SMF.UI.TextButton({
		height : "15%",
		text : "button"
	});

Also, create two buttons, one for add and one for remove :

var myAddButton = new SMF.UI.TextButton({
		left : "12%",
		top : "85%",
		width : "35%",
		height : "10%",
		text : "add",
		onPressed : function () {
			myContainerAddObject.add(myButton);
		}
	});
var myRemoveButton = new SMF.UI.TextButton({
		left : "53%",
		top : "85%",
		width : "35%",
		height : "10%",
		text : "remove",
		onPressed : function () {
			myContainerAddObject.remove(myButton);
		}
	});

The result on the screen will be in the below picture :

        

When you press the “add” button :

        

As you see, myButton is added and onControlAdded event is triggered.
Now press the “remove” button :

        

As seen above, myButton is removed and onControlRemoved event of container is triggered.