In Mobincube, to create our App we will add elements to our screen in order to create the structure we want. These are the:
- Image
- Text
- Field
- Separator
- Table
- Online text
- Online image
- Video
Now we will go over each type of element and see what properties and actions can be applied to them.
The Table element
The table element is treated like a row which you can divide into as many cells as you want. If you want more than one row you'll have to drag another table(row) to the screen.
When you drag a table to the screen you can modify certain aspects:
- Background: You can allow the background of a table to become transparent, solid with adjustable alpha or a gradient:
- Alignment and width: Left, right, centered and width from 0 - 100% of screen:
- Actions: When you apply an action to a table element, when pressing anything inside its perimeter it will execute that action. You can define the following actions for a table element:
- Cells: For each table you can define as many cells as you want and each cell can be adjusted in percentage which refers to the % of width relative to the screen total width. You can exceed the screens width adding many cells obtaining a horizontal slide effect which is very usefu
- l in many cases. This is one way of emulating a photo slide gallery inside a detail screen:
Remember that tables are used to define space and that you can drag any other element into a table cell.
The Text element
A text element once dragged to the screen can be modified in the following ways:
- Background : It may be a gradient, transparent or solid colour with transparency
- Size alignment of the text area : we can choose an alignment from the left , right or center
- TEXT Color:
We can chose the text color among different colors codes.
- TEXT Size:
It is possible to chose among 3 text header style: H1, H2, H3 or among different size: Tiny, Small, Medium, Large, Huge.
- TEXT Alignment
We can chose the text alignment in the area and we can use the Bold, italics and underlining for each text of the area.
The Separator element
The separator as its name describes is used to separate elements in a visual way. You can use it allowing the separator to be visible or not, so you can still create a space between elements without having to have the separator itself visible. The properties you can apply to a separator are the following:
- Background color: Color of the area around the separator independent of this one being visible or not. It can be solid, transpire
- Width: 0-100% of screen width.
- Alignment: Left, centered or right. This change is only appreciated if the width is less than 100%.
- Line style: It can be solid, different types of dots or invisible.
- Line color: The separators color has to be defined before it is dragged to the screen and its done from the Tool bar as shown below:
The Image element
In this section we will describe how to use and customize the image element. This element is going to be a local or a remote element. When we talk about local image we refer to an image imported into Mobincube from our computer or directly from the online search machine of the image manager integrated in Mobincube. But when we speak about remote image or content(RSS, Text, etc.) we refer to content that we have stored on Mobincubes Cloud. This content can be changed from the Cloud changing the content of the app without having to regenerate it. If you want to learn more about remote content click here.
First thing is to load an image so let's begin by dragging the image element to the screen and then click the "select" button:
Once you click the "select" button mentioned above you will be able to choose from selecting an image the following ways:
- Local file on your computer:
- Remote file which requires the URL generated on the Cloud:
Now you can select the image by clicking on it and start editing its properties:
- Background: Some of the editing options, like background, will depend on the type of image being edited. PNG images allow parts of the image to be transparent or semitransparent on some areas. These areas will be affected by the background colors defined but not images that haven't got defined transparent areas:
We can observe that an image with transparent areas will be colored on its transparent areas when applying the background color. This change is not visualized on an image without transparent areas because it has no transparent areas which allow us to see through parts of the image to the background.
- Alignment and width: You can align an image on the screen to the left, right or centered. Regarding width you can define this from 0-100% of screen width:
- Action: The following actions can be applied to an image element:
The Field element
The field element is used as a text input field for the user to input text or numeric data. When one or more fields are used on a Detail page you must add a Submit button. You can use any element as a submit button as long as it has definable actions.
In the former elements we have gone through in this article we have never mentioned the "Submit" action. This action will only be displayed as an option in the action list if there has been placed a field element.
The following elements have the submit action:
- Image/Remote image
- Text/Remote(online) text
- Table
Lets go through the definable properties of both the field elements as the submit button as well:
On the screen above we have inserted the following elements in the mentioned order:
- The text element saying "FIELDS:".
- Separator
- Field number 1
- Separator
- Field number 2
- Separator
- Text element with "submit" action assigned to it.
The field element can be defined in the following way:
- Background: In the same way than all the other elements described in this article.
- Align: Left right or centered on the screen.
- Width: Adjustable from 0 to 100% of screen width.
- Field and font color.
- Reference name: This is the field id or the name of the variable the field is holding.
- Data type: It can be defined as text or number.
Now lets go over the properties we can affect for the submit element. Because this can vary depending on what element(text, image, table) you use as a submit button we will only mention the action related properties which we can see clicking properties once we have applied the Submit action to the element:
When properties is selected you are asked if you want to send the values of the fields to a script(as variables) or if you want to use the values of the fields to send an SMS to another device:
- Send to a script: Just insert the URL where the script is and remember that the name of the sent variables will be the Reference name defined earlier:
- Send SMS:First you are asked to select the Field (by Refernce name) containing the phone number or insert it manually.
First option is used if you want the user to control the destination of the SMS and the second if you want the SMS always to arrive to the same destination.
Second you have to type in the message you want to have sent. You will do this in case a standard message is required. Once again if you want the user to write the message simply type in this text area the Reference name of the field you wish the user to youse to write the message. This Reference name has to be inside curly brackets "{ Reference Name}"
If instead you wish to send a download link just type in the text area the URL inside curly brackets "{URL}":
The Online text element
You have exactly the same properties to define than in a normal Text element as explained in the Text element section of this article:
The video Element
The video element allows you to add a native MP4 video in a screen. You will need to add the video to the resources manager before you are able to select it.
The video allows for an extra configuration which allows you to choose when it's going to start the reproduction of the video. There are two options at the moment:
- When the video is touched: The App will show a play icon until the user clicks on it
- When the section loads: Video will start playing as soon as the screen has been loaded.
As you can see in the picture, there is an action option in the video element. This action works a bit different of other actions used in mobincube since the App will execute the action once the video ends (It's great to do a playlist).
More in youtube: Detail screen