Introduction
WebRatio Mobile Platform lets you add to your mobile application a feature that allows one to see a location on a map and to get directions to reach it. Let's see how to model this integration in your mobile application.
See Locations on a Map
How to Model
We use the "MapsSampleStart" project that you can find as attachment at this online training. Let's suppose you want to model a list of events by showing the most important pieces of information, such as the title, the address and the start date. The remaining information is considered to be details. The details are shown in a second screen, only when the user selects a specific event from the list. We have already defined in the Domain Model the information representing an Event for the "MapsSample" mobile app.
Let's open the "App View" of the Mobile Project and start to model. Click the "View Containers" section of the toolbar, choose the "Screen" option and place it inside the work area to add. Type a meaningful name for the home screen, such as "Events".
To show the list of all the events, let's use the "List" view component. Click the "View Components" section of the toolbar, choose the "List" item and click inside the screen to add it. Type a name for the "List" component, such as "Events". In its Properties View, press the "Select" button next to the "Data Binding" property to choose the class, in this case the "Event" class. Then press the "OK" button. Press the "Select" button next to the "Display Attributes" to choose the desired attributes and then press the "OK" button. Press the "Sort" button next to the "Sort Attributes" property to choose the list's sorting, in this case choose the "Start Date" attribute with ascending sort and then press the "OK" button.
Now let's add the "Details" screen. We need a Select Event on the list, a Navigation Flow and the details screen. Click the "View Containers" section of the toolbar, choose the "Screen" item and place it in the work area to add the screen. Give a name for the screen, such as "Details".
Click the "View Components" section of the toolbar, choose the "Details" item and click inside the screen to add it. Type a name for the component, such as "Event Details". In its Properties View, press the "Select" button next to the "Data Binding" property, choose the "Event" class and then press the "OK" button. Press the "Select" button next to the "Display Attributes" property to choose the desired attributes and then press the "OK" button.
Click the "Flows" section of the toolbar, choose the "Navigation Flow" item, click first on the "List" Component and then on the "Details" component. Type a name for the event, such as "Details".
Click the "Utility Components" section of the toolbar, choose the "Map" item and click inside the "Details" screen to add it. Type a name for the Component, such as "Google Maps".
The "Map" view component shows a location in a map through the Google Maps Service. In our example, the component shows the event location using the address and the title informations. The "Map" has by default as input parameters "Addresses", "Images", "Latitudes", "Longitudes", "Location IDs", "Snippets" and "Titles".
Let's use the "Data Flow" to retrieve the information about the event location. Click the "Flows" section of the toolbar, choose the "Data Flow" item, click first on the "Details" component and then on the "Map" component.
Double click on the Data Flow to provide the event information as input parameters to the "Map" view component. Uncheck the "Enable Default Binding" property, bind the event information and then press on the "OK" button.
Let's select the "Map" component and add the Maps Provider for Android devices. In its Properties View, press the "Select" button next to the "Maps Provider" property to choose the provider. Click on the "Create new Maps Provider" link to add it. You can add one or more "Google Maps Provider" depending on the device type.
Let's configure the "Google Maps Provider". In its Properties View, set the "Android" value as Platform. You can retrieve the Google Maps API Key from an external website. Google Developers Console
See the following procedure:
- Press the "CREATE PROJECT" button.
- Type a name for the Project
- Press the "CREATE" button.
- Scroll the APIs List until the "Google Maps APIs" section is shown.
- Choose the "Google Maps Android API" option.
- Press the "ENABLE" button.
- Press on the "Create credentials" option.
- Press the "What credentials do I need?" button (API key).
- Then press the "Done" button.
- Press on the "API key 1" item to see its information.
- Copy the "API key" string.
Paste the value in the "API Key" property of the Google Maps Provider.
How to Emulate with WebRatio Developer App
Generate the project to emulate the mobile application, by using the "Generate and Run" button.
The best way to test this mobile application is to use the WebRatio Mobile Developer App. Press on the "Scan QR Code" button to open the mobile app on the device.
In the list, select an event to see its details.
Click on the indicated location in the map to see its information.
Open the Map Application
How to Model
Let's suppose you want to add the "MapsSample" project the chance to get directions to reach the selected event. Let's open the "App View" of the Mobile Project and start to model.
Now let's define the action triggered when the user want to get directions to reach the event location. We need a Select Event on the details, a Navigation Flow and an Action.
Click the "Action" item in the toolbar, place it inside the work area to add the component. Let's create the Action behavior. In its Properties View, press the "Select" button next to the "Action Definition" property to associate an "Action Definition". Click on the "Create new Action Definition" button to create it and then type a name for the action definition, such as "Calculate Route".
To open the device Google Maps, let's use the "Map" operation. Click the "Utility Components" section of the toolbar, choose the "Map" item and then click inside the work area. Type a name for the operation, such as "Google Maps Device".
The "Map" operation allows the user to open the native device application and calculate a path between source address and destination address. The "Map" has by default as input parameters the "Source Address" and the "Destination Address".
To state that the "Map" operation is the first operation to be executed, let’s use a "Success Flow". Click the "Flows" section of the toolbar, choose the "Success Flow", click first on the Input Port and then on the "Map" component.
To specify the inputs required by the "Action Definition" you have to add parameters to the "Input Port", which represents the entry point. Right-click on the "Input Port", choose the "Input Port Wizard..." option, press the "Select All" button to choose all parameters and then press the "Finish" button.
Finally let's connect the operation with the Success and Error Port depending on its result. Click the "Flows" section of the toolbar, choose the "Success Flow" item, click first on the "Map" operation and then on the "Success Port". Click the "Flows" section of the toolbar, choose the "Error Flow" item, click first on the "Map" operation and then on the "Error Port".
Now that the definition is complete, let's open the "App View" and complete the model.
In order to let the user open the Google Map device and calculate the route, let's use a Select Event with a "Navigation Flow". Click the "Flows" section of the toolbar, choose the "Navigation Flow" item, click first on the "Details" component and then on the "Action". Type a name for the event, such as "Driving directions". Double-click on the "Navigation Flow" to see the "Parameters Binding" dialog and bind the source and destination addresses for the route. Uncheck the "Enable Default Binding" property, bind the "Address" attribute to the "Destination Address" parameter, set the "Source Address" parameter, by writing an example source address and then press the "OK" button.
In order to go back to the event details after the route calculation in the Google Maps, let's use a Success Event with a "Navigation Flow". Click the "Flows" section of the toolbar, choose the "Navigation Flow" item, click first on the "Success Event" and then on the "Details" screen.
How to Emulate with WebRatio Developer App
Generate the project to emulate the mobile application by using the "Generate and Run" button.
The best way to test this mobile application is to use the WebRatio Mobile Developer App. Press on the "Scan QR Code" button to open the mobile app on the device.
Select an event to see its details.
Press the "Driving directions" button to calculate the route, choose the "Maps" mobile app, click on the "Just once" option and select an option to show the route in the Map, for example the first option.
Press on the "Back" button until to return to the app.
- Press on the "Back" button to return to the calculated routes.
- Press on the "Back" button to return to the device map.
- Press on the "Back" button to return to the app.