Introduction
WebRatio Mobile Platform gives the chance to model bars for a mobile application using two reserved sections of the screen: Top Bar and Bottom Bar. This lesson shows you how to model bars using the Toolbar element.
How to define a toolbar
Let's suppose you want to show in the top bar a back button, the screen title and the home button. In the bottom bar you want to see a button for each application section: "Companies" , "Contacts" and "Events". For this purpose we use the Toolbar.
We have already created three screen sets refer to companies, contacts and events. Let's start modeling the menu that allows to access these three sections.
Click "View Containers" section of the toolbar, choose the "Toolbar" and click in the work area. Give a meaningful name for Toolbar, such as "Main Toolbar".
"Toolbars" allows you to define common content and buttons for a set of screens. You can model a toolbar for each level of the App View.
In this example the toolbar is defined for all screens of the app.
Let's add the flows that allow the user to access the different sections of the app. Let's use Navigation Flows for this purpose. Click the "Flows" section of the toolbar, choose the "Navigation Flow", click first on the Toolbar and then on the "Search Companies" screen. Give a name to the Navigation Flow, such as "Companies". Click the "Flows" section of the toolbar, choose the "Navigation Flow", click first on the Toolbar and then on the "Contacts" screen. Give a name to the second Navigation Flow, such as "Contacts". Click the "Flows" section of the toolbar, choose the "Navigation Flow", click first on the Toolbar and then on the "Events" screen. Give a name to the third Navigation Flow, such as "Events".
Now let's organize the content of the toolbar from the Layout View.
Click on the "Tob Bar" section. Drag and drop elements from the Layout Pool in the Top Bar. Add "Back", "Screen Title" and "Home" elements. Let's configure the layout of the Top Bar. Move to the Properties View and select the "Bar" Cell Template in the "Cell Layout" property.
The Top Bar configuration is completed. Now let's define the content of the Bottom Bar. Drag and Drop the events "Companies", "Contacts" and "Event". Let's configure the layout of the Bottom Bar. Move to the Properties View and select the "ButtonBar" cell template in the "Cell Layout" property.
Generate the project to emulate the mobile application. From this section you can run the application on the browser or on your device. You can see the result.
How to show icons
Let's suppose you want to show icons in the toolbar instead of text labels. You need to change some settings in the Layout View for this purpose, configuring some layout parameters.
Select the "Main Toolbar" element, go to the Layout tab and click in the "Tob Bar" section. Select the "Back" button and press on the "Layout Parameters" button to change the settings. Set the "Show" parameter to "icon" and set the "Icon" parameter. Choose the icon from the one available at this website (http://ionicons.com/). Copy the name of the icon without the "ion" prefix (e.g., chevron-left) Press the "OK" button to confirm.
Repeat the same procedure on all events you want.
Generate the project to emulate the mobile application. From this section you can run the application on the browser or on your device. You can see the result.
How to set a background color
Let's suppose you want to show the bars with a red background color. Select the cell of the Top Bar and set the "Background Color" parameter to "red".
Select the "Main Toolbar", go to the Layout tab and select the "Tob Bar" node. In the Properties View, press on the "Layout Parameters" button to change the settings and let's change the "Background Color" property to the red value. Then press the "OK" button.
Repeat the same procedure on the Bottom Bar.
Generate the project to emulate the mobile application. From this section you can run the application on the browser or on your device. You can see the result.
How to overwrite a toolbar
Let's suppose you want to change the Top Bar for a specific screen. For example you want to show the company search field in the top bar for the "Search Company" screen. You need to change settings in the Layout View of the screen.
Select this screen and move to the Layout View to change the settings.
Select the "Search Companies" screen and open the Layout View. First of all you need to state that you want to customize the Top Bar.
Click on the Top Bar and click on the "Customize Content" to change the default toolbar. Drag and drop elements from the Layout Pool in the Top Bar. Add "Back", "keyword" and "Search" elements.
Move to the Properties View and select the "SearchBar" cell template in the "Cell Layout" property. Select the Top Bar in the Outline View. In the Properties View, choose the "Search Bar" template. Press on the "Layout Parameters" button next to "Cell Layout" property to change the settings, change the "Background Color" property value and press the "OK" button.
Then you need to re-configure all layout parameters to get the same appearance. Select the Back Event, press on the "Layout Parameters" button next to "Event Layout" property to change the settings, set the "icon" value to the "Show" property and write the value in the "Icon" property. Then press the "OK" button. Select the "Search" event, press on the "Layout Parameters" button next to "Event Layout" property to change the settings, set the "icon" value to the "Show" property and write the value in the "Icon" property. Then press the "OK" button.
Remember that view components are automatically placed in the Grid. Now that the search is shown in the Top Bar it's possible to remove it from the Grid. Select the Main Grid, double-click on the Cell element, select the Form Component, right-click on it and then choose the "Delete" option. Finally, press the "Yes" button to confirm.
Generate the project to emulate the mobile application. From this section you can run the application on the browser or on your device. Click on the "Search Companies" button to go to the related screen and see the result.