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.
When you add the container object into a page, it will look like below :
Lets use some properties of container.
As you see in the above pictures, fillColor, backgroundTransparent and borderWidth properties are changed.
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 :
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.
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.
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.
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 :
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 :
As you see in the above picture, objects are arranged from top to bottom.
Fired when a child control (for each control) is added (Fired after added)
Fired when a child control (for each control) is removed (Fired after remove)
Creates action(s) that are run when the object is disappeared on the page.(Inherited from Control.)
Creates action(s) that are run when the object is appeared on the page.(Inherited from Control.)
Creates action(s) that are run when the object is touched from device’s screen.(Inherited from Control.)
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 :
Now create an object in order to add it or remove it from container :
Also, create two buttons, one for add and one for remove :
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.