In this section Build UI, Mat|r provides a tool that is responsible for generating, updating and previewing the user interface of the application in development. As a development ecosystem Mat|r does not try to build pages, but to create dynamic, responsive and automatic experiences, closing the gap between intelligence and experience.

Mat|r Viewer allows you to instantly run and see all the development made on the Mat|r platform and test it on supported platforms without having to install the application you are developing.
The user of the Mat|r platform requires minimal technical expertise in web and/or mobile graphic design.

We can see in Build UI accesses like the following:

“File browser” (1) that shows a list consisting of a “Menu”, “Layouts” and “Templates”, and components added to each of them. And at the top there are accesses to create new “Layouts” and “Templates” or remove any item that has been selected in advance.

“UI View” (2) is in the central part. There we can preview the components that we require once loaded in a selected layout, template or menu. “Markup View” (4) is also in the central part. If we previously select any layout, template or menu, we will obtain the corresponding XML allowing their edition or the edition of the components that integrate the UI and the Markup view. When the layout of the design, event, action, link or reference is not valid, the error will be observed to clean it or eliminate it.

“Properties” (4) displays a list of properties that belong to a layout, template, component or selected menu to edit features of a property. All the related characteristics are organized in groups. They belong to a property so that is easier to find it in order to configure, edit or update it.

“Palette” (5) displays a view of the components that we can incorporate as necessary into the layouts, templates and containers of the app that we create in Mat|r.

“Themes” (6) provides us with a variety of items/themes with different pre-established design styles. The properties of each component can be modified once one of them is implemented.

The following table shows the components and properties that belong to each component. The letter “P” informs us that the component uses partially the characteristics of the property, and the letter “T” is the use of all the features of the property. The components and their main characteristics and functionalities are shown below. Then you will be able to consult each property and its characteristics.

Table1

table1

Build UI concepts:


 

Interface types:

(This hierarchy contains interfaces supporting other components different from them)

Layouts:

Mat|r layout is the visual representation of a particular experience which has an associated data model.

An application can be formed by one or more layouts. The different components within them to represent the graphical interfaces, that we want to show the user to interact with the application through various actions and data entry through it, are contained. Within a layout we can place several visual components regardless of the order and scheme, for example: “Vertical Container”, “Horizontal Conteiner”, “TextField”, “Label”, “Select”, “List”, “Button”, “Image”, “Map”, “Video” or “PDF”.

The creation of a layout can be done in two ways:
1. Defining an experience through the code. In this case, the layout has an associated experience and therefore the data model. They are known as self-generated layouts.
2. By clicking on the icon in the Build UI section, you must enter a name to identify it. In this case, the user must manually link the components to data and actions. These layouts are known as static layouts (unless they are associated with a data source).

layout

All the layouts created in our application are listed in the Build UI section on the left panel. The components used in the form of a tree are listed when you select in the lower part of the panel.

The layouts that have been automatically created through the definition of an experience can be regenerated. The regeneration of a layout is done by clicking on “Regenerate file” , and what this action does is to reconstruct the layout according to the definition of the experience. Bear in mind that all settings that have been made in the Build UI section will be lost. Instead of the “Regenerate file” icon, “Missing Experience for this UI” icon will appear,this means that the components of the layout must be manually bound to model or experience data.

Layout Properties:

  • Navigation Bar: it is a bar that provides navigation control within the application. If you want to use it (with option to disable) you can adjust the title to display and bar style such as type, size, color and tint of the letter. You can also choose color or an image for the background of this bar.
    You can place a button in the bar to return to the preview as well (you can disable this function in “Hide back button?”).
    There is also a possibility of adding more buttons (and features to each button) to the left and to the right of the navigation bar. To do this, we enter the “BUTTONS” section, more precisely on “LEFT” or “RIGHT”, opening the “Button Manager” respectively for the buttons on the left or right. We can add a new button by entering a name, an icon (use a stored icon in a web server or a default icon will be placed) and specific events and actions for the button created (see property “Events”).
  • Datasource: the “Datasource” of the “Layouts” represents the data model that will be associated to the view (layout) and it will be used to store the data entered by a user or generated by the application. These data will be displayed in the interface. If a layout has a data source, it is defined as a dynamic layout, because its values can be modified from the logic of the program, and if it does not have, as a static layout, because its values cannot be modified from the logic of the program.
    Layouts automatically created by the definition of an experience are generated with datasource by default (the configured datasource is the defined experience). Layouts created from the Build UI are created without datasource by default.
    To configure a datasource in a static layout, go to the properties of the “Layout”, enter the Datasource section and click on “+ ADD DATASOURCE”. Then, you must select the “Type” that indicates the data model that will be bound to the Layout. This will be a “Model” or “Experience” defined in the “Model” section (take into account that if in the mat | r script there is a syntax error, no data model will be displayed).

    Finally, a name must be entered under “Name”, which will be used to perform the binding of the UI components to the attributes of the selected datasource. In this way, the datasource of our layout is configured correctly and we can perform the binding of the different components.

    To remove the datasource from our Layout, press “Delete Datasource”. It will be deleted and it will become a static layout.

Templates:

El “Template” es una plantilla que se utiliza para configurar el formato visual de cada ítem dentro de un “List” o “Select” donde tomarán el control de este.

To create a new template, click on the icon and enter the name of it (new template). A “Label” component is provided by default, this can be edited or deleted.

When a “Template” is selected, the properties that can be edited are displayed. It is not allowed to add new “List” or “Select” within a “Template” but you can add other components such as “TextField”, “Label”, etc.

templates

The components, found in “Palette”, that you add in the “Build UI” are not going to be bound directly to an experience. For more information go to “Data binding”. .

Containers:

(This hierarchy contains components that support other components equal to or different from them)

Vertical Container and Horizontal Container:

The containers allow placing various components inside them, creating a block that allows an order and independence from the rest of the “Layout” to which it belongs. This independence affects only the visual representation, leaving the order of speech and navigation to what the code says.

The properties of the containers that can be modified are: layout, background and events. The contained components or child components apply some properties in reference to their container parent.

Leaf components:

(This hierarchy contains the components that other nested components do not support)

TextField:

This component allows the user to enter information through the keyboard, calendar or clock in a field delimited in the application, to use the data by logic in an application.
It supports the data types String, Integer, Double and Date.

When the component is selected, a series of properties are displayed and a number of characteristics that affect the component can be adjusted.

Label:

This component does not present a new special use for the user. We can define the component as a read-only text label. The text that contains the “label” can be modified by the application but not by the user directly.
The type of data that supports is String, Integer, Double, Date.

Select:

When using this component in a “Design”, a drop-down list of elements will be created. When a drop-down list is inactive, it shows a single value and when it is activated it displays a list of values from which the user can select one. The execution of an event can be provided to this action generated by the user of the application.

Each “Select” can be associated to a “Template” in the property “Template and template binding” and in the same property the components that contain the “Template” are mapped, placing the name of the “ATRIBUTE PATH” that is in “Data bindings” of the “Label” in the following form “{{item.atributePath}}”. This method is used to display the data of the Array that belongs to the corresponding “Select”, as agreed in the code.

select-a
select-b

List:

This graphic component makes it possible to create a list of scrollable elements, it allows to visualize a quantity of information in a single section.
Also as in the “Select” component, the “List” can be associated (optional) with a “Template” in the “Template and template binding” property and in “NAME” of the same property the components containing the “Template” are mapped, placing the name of the“ ATRRIBUTE PATH ” found in “ Data bindings ”of the component as follows“ {{item.atributePath}} ”. This method is used to display the data of the Array associated with the corresponding component, as agreed in the code.

CheckBox:

It is the graphic component that corresponds to a truth value (true or false). This component can be associated (bound) with a variable of type Bool.
The “Tap” event on this component changes the truth value by default. If it is checked, it corresponds to “true” and if it is unchecked, it corresponds to “false”. You can associate other events and actions.

Button:

It is the graphic component that, by default, allows the execution of rules. These rules can contain actions that interact with the current screen, call services, navigate, etc.
If it is not associated with a code rule, other events can be configured with other actions.

Image:

The visual component allows to show an image, making possible to improve the design and appearance of the app created in Mat | r. The image must be stored on a web server, and to access it, the URL is entered in the “Image URL” field. This component can be bound with a variable of type String whose value is the URL of the image.
It allows the user to make a touch or click on the image to extend and occupy the screen completely, leaving a check in “Can go full screen?”.

MapView:

The component uses Apple Maps natively on iOS or Google Maps on Android. A map per layout is allowed. Two specific properties are appreciated for this component:

The first one is “Map”. You can assign a name to the map and choose the map type (selecting “Normal”, “Hybrid” or “Satellite” mode) to be displayed in the app created in Mat|r.

It enables or disables the following items:

  • If you want to show the compass in “Has compass enabled?”.
  • Zoom functions“Has zoom enabled?”.
  • Show the location of the device “Show user location automatically?”.
  • Controls on the map “Display map interaction controls?”.
  • Settings to show the map in the app with respect to zoom. Adjust the minimum and maximum zoom (1 as the minimum value and 21 as the maximum value).
  • Visualization within the map. “Center in” adjusts the map view: if we select “UserLocation”, we will see the device positioned within this map. If we select “Show all Markers”, it centers the map so that all the markers are observed. Finally, if we select “Coordinate”, it allows to center the map in a position given by a Latitude and Longitude and you can also adjust the zoom. In case of not adjusting an initial positioning, the position of each platform in which the app is executed (iOS or Android) is assumed by default.

The second one is “Marker”: The markers indicate individual locations in the corresponding map. This property allows you to modify the icon (which must be stored in a web server, and to access it, you enter the URL in the field “Marker icon URL”) that will be displayed, and it also allows you to modify the style ( the font type, size and color) of the title and description that provides additional context to the marker.

Video:

This component allows you to show a video in a view. It must be stored on a web server, and to access it you enter the URL in the “Video URL” field. This component can be bound with a variable of type String whose value is the URL of the video.
The video player is equipped with basic functions for playback. It enables the automatic playback of the video leaving a check in “Play automatically?”, and if it is necessary you can adjust the starting minute of the video in “Start Time” (it must be expressed in seconds).
You are able to define an image that is observed before playing the video with “Thumbnail URL”. It must be stored on a web server. Once entered the URL, you can enable or not the thumbnail in “Show default thumbnail?”.

PDF:

The component makes a PDF file accessible in a view. This file must be stored on a web server. Enter the URL in the “PDF File URL” field to access it. This component can be bound with a variable of type String whose value is the URL of the PDF.
This functionality makes use of third-party PDF reading applications available on the device (it does not allow file viewing as part of the app).

Navigation:

Cross Menu:

It is a floating panel that contains a list of options. They are useful to show additional navigation options within the context of the application. This component makes possible to navigate between layouts no matter where we are.
We create a menu grouping different experiences as items.
We should note that each application can have only one menu and the display mode thereof will depend on the execution platform.

The menu must have, always required, a main heading “Header” and a sub-header option “Header Line” to which the type of font, size, color and alignment of the text can be modified.

It is allowed to modify the background color “Header Background” of the “Header” and the background “Menu Background” where the items are hosted.
On the iOS platform the “Header” and “Header Line” are not displayed.

You can create one or more menu items. Each one has a name “Title”, an associated “Layout” (previously created) and an icon that must be stored in a web server. To login, you enter the URL in the “Icon URL” field (or an icon by default will be attached).

The text of the items has two colors. The first “Menu item” is observed when it is not active, that is to say when it is not selected; and the second “Selected menu item” is observed (changing the previous color) when it is active, that is to say when it is selected.
In “Default selected” a single item, that will be the view that will first be presented to the user, is selected.

Once the menu is displayed in the running application, you will navigate to the associated layout with a touch or by selecting an item.

Properties:

(The properties in common that support the UI Build components / interfaces of Mat|r are only shown in the following list. Keep in mind the previous table (table 1) which specifies the properties that each component supports)

Text Format:

We can adjust the size “FONT SIZE”, the font type “FONT FAMILY”, the color “TEXT COLOR” and the alignment “ALIGNMENT” of the text in the components that show some word or text only if the property “Defaults” is not empty.

Date:

In the “Date” section we can adjust parameters such as the style of the date and the time, selecting its short, medium or long format (the separation of each element of the date is in spaces).
We can also define a format to show the date and time to store or display this data. This format will have higher priority than the previous styles; format examples (GMT standard): yyyy-MM-dd, yyyy-MM-dd HH: mm: ss ZZZZZ and its multiple abbreviations or dimensions.
You can set dates and/or time limits, as much as minimum and/or maximum.
Only the Gregorian calendar is supported by Mat|r.

Layouts:

This property is common for “Layout”, “Template” and several components of Mat|r.
It is allowed to individually adjust the “Paddings”, place a solid edge (allowing to adjust the color, width and rounded) and adjust the alignment (content alignment and auto alignment are configurable in the “start”, “center” mode or “end”) of what it is included in the first two attributes.
For the components supported by Mat|r, it is allowed to adjust the width and height of the component (values in “px” or in percentage from 0 to 1, for example 0.2, 0.5, etc.) and individually adjust the “Margins” in addition to the previous configurations.

Backgrounds:

We can establish a background for a component with this property. It allows you to modify a specific color “BG COLOR” and its transparency “ALPHA” (from 0 to 1, percentage) or an image that we want to incorporate as background by setting “BG IMAGE URL”.
In “BACKGROUND MODE” you choose the way in which the shape of the desired content is affected, “Scale to fill” is supported (the content is scaled to fill, it can be distorted), “Aspect Fit” (the content is displayed in an original way) , you can make spaces without filling in) and “Aspect Fill” (the content is scaled and maintains its original appearance).

Data bindings:

Each component has the property of “Data binding”. It allows to bind the component to the code mat|r script.
The way to complete the “Attribute path” field is the name of the datasource followed by a period and then the name of the corresponding attribute in the model or experience. For example: “main.name” (main is the name of the datasource and name is the name of the attribute). This allows the data link establishing a connection between the UI of the application and the script code.

The attribute data types that are allowed to be bound for the components:

  • ”Label” y “Textfield” are String, Date, Integer y Double.
  • “Checkbox” is Bool.
  • “Image, “PDF” y “Video” is String.
  • “List” y “Select” without Template are ‘Array<String>’, ‘Array<Integer>’, ‘Array<Double>’ y ‘Array<Date>’.
  • “List” y “Select” with Template are ‘Array<String>’, ‘Array<Integer>’, ‘Array<Double>’, ‘Array<Date>’, ‘Array<Model>’.
  • “MapView” is ‘Array<Marker>’.

Defaults:

This property makes possible to leave a static text within a given component by default. The format of the text will be given by the “Text format” property.

We find the fields “Placeholder”, “Keyboard Type” and “Is password?” in components such as “Text Field” in the “Defaults” section.
“Placeholder” has a short suggestion that describes the expected value of an input field of the component (for example, a sample value or a brief description of the expected format) before the user enters a value. “Keyboard Type” adjusts the keyboard for the component. We can narrow the field to only enter: text “ASCII” rational numbers, web address “URL” natural numbers and telephone numbers.
“Is Password?”, If it is checked, the component will have the feature to hide the content that the user enters in the app through the use of a mask. It is suggested to use fields to enter passwords.

Events:

With the property “Events” we give functionality to the components allowing the user of the application to invoke them. Each event can trigger several actions that run atomically. In the panel of this property you can create and visualize the events and actions that correspond to the component you are editing.
En el panel de esta propiedad permite crear y visualizar los eventos y acciones que corresponden al componente que esté editando.

The events that can be configured are (ver tabla 1):

  • “TapEvent”, it is a simple tap on the component.
  • “LongPressEvent”, it is a tap maintained for a few seconds on the component.
  • “OnSelectEvent”, it is a simple tap on an element contained within the component “List” or “Select”. In the case of List when you press on the item in the list and in the case of Select when the selector is displayed and an element is selected.
  • “OnSelectBubbleEvent”, it is a simple tap on the marker inside a map. It is configured in the MapView component and launches the action when the user presses the marker on the map.

After selecting the type of event, you must choose the type of action that will be executed:

  • “ShowAlertAction”, shows an alert box with a specific title and message. It is often used if you want to make sure that the information reaches the user.
  • “NavigateAction”, allows you to configure navigation actions such as “Push”,”Present”, “Pop”,”Dismiss”. The first two must choose the corresponding “Layout” to complete the navigation and the last two has no parameters. Take into account the “Stack” of navigation.
  • “RunRuleAction”, invokes the rule” Rule “of the context” Context “that groups it.
  • “InvokeFunctionAction”, invokes the “Function Name” function inside a “Module”. When the action is selected in the event “OnSelectEvent”, it returns the selected element to the function, so the signature of the function must be declared only in the following way: “void nameFunction (Any param) {}” and the type of the function parameter will be defined by the type of array that is bound to the “List” or “Select” component. In the event “OnSelectBubbleEvent” when the action is selected, it returns the selected element to the function, so the signature of the function must be declared only in the following way: “void nameFunction (Marker param) {}”

The events and their associated actions of the component are listed in “CURRENT EVENTS”. It allows you to eliminate actions or events.