One of the most used screens thanks to its resiliency is the DETAIL type.

 

 

The detail screen is the one which gives us greater flexibility, allowing us to create different compositions in a simple way and to insert any element such as icons, images, text, forms and fields and especially allows us to organize the screen with tables, to keep the elements in order.

 

The Detail screen has a number of elements to work with by simply dragging them onto the screen.

          

 

Now we will review, step by step, each item that we have available in our Detail screen:

 

IMAGE ELEMENT 

If we need to insert an image onto the screen of the app, we can use this element. We just drag and drop it onto the editing panel screen or, if we have created a table with cells, we can drag the element directly onto the same table (or cell).

 

 

 

After inserting the element onto the screen, we have to click on the button "Select" to upload a picture. The image element can be a local or remote item.

 

LOCAL : When we talk about a local resource we are referring to those images we have imported in Mobincube through the resource manager from our computer. 

REMOTE : talk about a local resource we are referring to those images we have imported in Mobincube through the resource manager, but we are referring to the URL that corresponds to the path to the image that was originally defined and stored in the Cloud , that allows us to modify or replace it without changing the application itself.

 

 

For every image we can choose:

• A Background Colour

• The type of Alignment

• The Width

• A list of actions to execute when touched

 

 

 

 

 

TEXT ELEMENT

 

Once dragged onto the screen, the text element 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 choose the text color among different color codes.

 

 

 

• TEXT Size:

It is possible to choose 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.

 

 

 

 

 

 

 

FIELD ELEMENT

The field element is used as a data entry field, which can be numbers or text.The fields are only used to create a Contact Form and we will use any element with the action: SUBMIT FORM.

 

 

The following items accept this action:

-  Both local and remote image

-  Local and Remote text

- Table

 

To create a form, see the related article : FORM

 

SEPARATOR ELEMENT

 

 

 

The separator element, as the name suggests, is used to separate other content blocks formed by any element. It can be used by defining its appearance as visible or not. The following are the properties we can define for the separator : Line Color (In the sidebar of the App Properties)

 

 

 

 

• Background : Gradient , transparent , solid color.

 

 

• Width: 0-100 % of the width of the screen.    
• Alignment: Center- Left, right, center. It is only relevant if the width is less than 100% of the screen
• Line Style: can be solid , dashed, dotted, shaded.

 

 

 

TABLE ELEMENT

 

 

 

The TABLE ELEMENT allow us to insert tables in a screen where we can insert any element (images, texts separators , fields and videos) so that we can position and organize them. Each table is characterized by cells and we can edit the following properties:

 

• Background : It can be transparent, solid or gradient, with a changeable degree of transparency:

 

 

• Alignment and width: Left, right and centered with a width of 0-100 % of the screen.

 

 

• Actions: We can define the following actions for a table. This will happen when clicking the table or an element inserted on same the table.

 

 

• Cell: For each table we can define as many cells as we want.

 

 

It is possible to define the width of each cell in percentage relative to the width of the screen, so that a cell can occupy 100% of the whole screen. It is also possible to define the background color, the alignment and a list of actions that each cell can execute.

 

 

The TABLE element is perfect for creating photo galleries.

To learn how to create a Photo Gallery you can read the related article : CREATE A PHOTOGALLERY

 

 

ONLINE TEXT ELEMENT

 

The online text allows us to display any content inserted into the Cloud, in the online TEXT folder , and to update it whenever we want. To insert an online text content go to the Cloud folder “TEXT”.

 

 

 

Then insert the text that we want to display and double click on the link icon to get the URL

 

 

 

Now in the DETAIL screen let’s drag the ONLINE TEXT and insert it in the field of the URL obtained from the Cloud and then press the CHECK button.

 

 

 

A part from the URL of the Cloud, we can define the same properties as for the normal text element, explained at the beginning of this article.

 

 

VIDEO ELEMENT

 

 

The VIDEO element gives us the chance to insert a video, in MP4 format, onto that screen. We only have to drag the video element onto the screen, click the SELECT button and then upload the resource from the resource manager.

 

 

 

 

To see how to use a video element in your App, you can read the related article : HOW TO USE VIDEOS IN THE APPS

 

 

More on Youtube: Detalle