Convertigo Mobility Platform is now featuring the new RMAD (Rapid Mobile Application Development) Edition. Olivier Picciotto describes this feature called “Mobile Builder” in details.
See intro video here: https://youtu.be/cnHUfOUvnQY
RAD (Rapid Application Development) is now a very well-known concept for classic application development. This type of technology is called RMAD when it is applied to Mobile Applications.
Convertigo released the next generation product includes one of the most powerful RMAD module on the market: Convertigo Mobile Builder uses a new graphical user interface, a visual Ionic builder able to compose, in a few minutes, ready- to- deploy applications leveraging the full power of Convertigo MBaaS backend! Unlike other RAD systems, an application produced with Convertigo Mobile Builder is not a “prototype” nor a “quick & dirty” app. Built applications are fully deployable on cross- platform devices and work on complex enterprise data. Convertigo Mobile Builder RMAD is based on well-known industry standard technologies such as Cordova, Angular > 5 and Ionic > 3 frameworks.
The new Mobile Builder module brings a new “Application” object in project tree under the “MobileApplication” object.This object is representing the graphical UI displayed on the right pane. To build an application, the user just drags & drops mobile components from the mobile palette to the correct location in the Application tree. The right pane will automatically reflect the changes in real time showing the user what the app will look like. The user can also modify any of the mobile component properties and see in real time the result in the right pane app viewer.
The user can click on the device menu to show all available devices. Custom devices can also be created by giving the device a name and configuring its width and height in pixels. Users can Zoom in and Zoom out the apps to see more details or to fit the whole app in the app viewer. Users can also switch to landscape to see how the apps behave when the device is oriented in landscape mode.(4) Sometimes, viewing the app in a standard Web browser can be useful to test how the app behaves in a desktop browser. This can be done easily by using the browser button.(5)
All mobile components can be selected from the project tree view. When you double-click on a component it is automatically highlighted in blue with a red dotted border in the application viewer. You can also double-click on a page to display this exact page on the app viewer. The other way round, if you right-click on a component in the app viewer, it will be highlighted and its mobile component will also be selected in the project tree.
Convertigo Mobile Builder includes a 100% visual debugger able to monitor and debug your mobile apps.This debugger has roughly the same features and usage than the Google Chrome debugger. To activate it, just click on the mobile debug tab(1) and click the debugger icon(2) The tool can be used to adjust styles, margins, and components placements precisely. Therefore, unlike other RMAD platforms, Convertigo mobile Builder can be used to create tailored applications.The mobile debugger also shows all the network interaction between the device and a Convertigo Server. This is a key tool to understand protocols used for calling Convertigo MBaaS Microservices or for executing a FullSync replication.
Data binding makes mobile applications able to display data from the backend services. With Convertigo this is done by a simple Drag & Drop!
One of the most powerful features of Convertigo Mobile builder RMAD is the Automatic Databinding. Data can be linked inbound and outbound without writing any line of code! This can be done by using the “Mobile Picker” tool. This picker displays all the Sequences available for your project and for each of these Sequence the data model returned.Drag & dropping one of the data model fields to a Mobile component will automatically bind it to the Sequence data.
Collection binding will make all the mobile components repeated for each data occurrence. This is useful to display a list of items.
Sometimes, Sequence returned data must be bound to a collection. For example, when you want to display a list of items. Use the “ForEach” Directive Component by drag & dropping it in a mobile “list” component. Then, configure the “Directive source” property by clicking the “SC” toggle and the “…” button. Finally, select the target Sequence and the recurring data field and click “ok”. In this example, the “Button” component will be repeated for each “employee”.
Bind data from each occurrence of a collection in a few clicks!
Most of the time, each occurrence of an item should display some data from this occurrence. Binding data from the collection directive will enable lists to do so. Use the mobile picker in “collection” mode by clicking the “Iterator” (1) button. This will display all the collection iterators in your page. Then, select the collection you want and the field you want in the collection and simply drag & drop it to one of your mobile components in the list!
Convertigo Mobile Builder RMAD applications can be easily styled as they are based on the powerful Ionic > 3 framework. You can use the “Style” component to apply styles to a specific mobile component, globally to a whole page or even more globally to the entire app!
Dragging & Dropping the “Style” component from the mobile palette on the project “Application” component will create a style for the whole app. Double clicking on a style will open the Style editor where you can write some CSS compliant directives. The style editor supports CSS typing completion to assist you writing style directives. In the same way, dropping it on a component will only apply style to this component, and dropping it on a page will apply style to the whole page. You can also use the Theme component to apply a Color theme to your app by dragging & dropping it from the mobile palette on the “Application” component in the project tree view. Themes can be edited by double-clicking on them.
Any mobile component can handle events. Just drag & drop the “event” component from the mobile palette to a component in the project tree view. The event will be placed in the “control” folder.
Events can be “onClick”, “onSwipe” or any of the standard Ionic or Angular events defined in the framework.Then, to execute an action when the event is triggered just drag & drop an action component such as “CallSequence” or “CustomAction” on the event. One of the most common actions is to call a Sequence when an event occurs. Use the “CallSequence” action component to do this. Configure the “target” property of this component to choose the sequence to be called when the event is triggered. You can also use the “onSubmit” event to handle a form submission. In this case, drag & drop the event “form” component in the project tree.
Form management is a built-in feature of Convertigo Mobile Builder RMAD. The only thing you have to do is to design the form by drag & dropping a form and its form components in a project. Form components can be input fields, check boxes, range sliders, select drop downs, radio buttons, toggles or any other HTML form element. Configure the “formControlName” property of a component to give the variable a name that will match the called sequence variable name to bind this form component to a sequence input variable.
Also, use the “onSubmit” event on the form and a “callSequence” component to bind this form to a given sequence when the form is submitted. Even better, you can build a form in just one action by drag & dropping a Sequence directly on a form component!Convertigo Mobile Builder will automatically generate for you all the form components, bind the “onSubmit” event to this sequence, generate the field labels and bind all the input variables to the form component elements.You are then free to customize the form the way you want. Forms also support field validators. To use them, just drag & drop the “ControlValidator” component on a field and change the validator properties.
Although RMAD technology helps in writing mobile applications in a few clicks, you might want to write your own custom code to perform some bespoke processing in your app. Convertigo Mobile Builder enables this by letting you write some TypeScript code at the application level or at a specific page level.
To write code at the application level, right- click on the application object and select the “Edit application class” menu.In the same way, right click on a page component and select “Edit page class” will let you edit code in a page class. Write your TypeScript code between the/* begin_c8oXXX */ and the /* end_c8oXXX */ comments. This code will be saved in the application or the page component.
Convertigo Mobile Builder TypeScript editor supports syntax coloring and code assist completion. You can also write TypeScript custom code for a “CustomAction” component. To do this, drag & drop the “CustomAction” component on an “Event” component. Then, double click on the Custom action to open the Custom action editor.
