Access Control & Personalization: Logout

IFML Modeling with WebRatio Mobile Platform
184 views Published on Apr 08, 2015 | Time 5 min
Applies to: 8.0 or higher

The "Logout" is the Operation that explicitly terminates the user's session. When the user press the "Logout" button, the user should be redirected to a public Screen (e.g., the "Login" screen). In this lesson you learn how to model the basic "Logout" feature for your application using WebRatio Mobile Platform.


Table of contents

How to model the user interface

In order to apply the basic "Logout" pattern, let’s refer to the "CRM" mobile project. Let's open the "App View" of the Mobile Project and start to model. Open the "App View". The "CRM" mobile project already contains the "Login" screen the "Login" action and the "Home" screen.

Let's suppose we want to have a "Logout" button in each screen of the mobile app (i.e., in the top bar).

Let's add a "Toolbar" container into the "App View" for this purpose. Click "View Container", then select the "Toolbar" and place it in the work area. The "Toolbar" container is a View Container, it can contain View Components and/or Events. A "Toolbar" can be placed in screens and screen sets. When it is placed in a screen set it is shared among all the screens in the screen set. A "Toolbar" is composed by 2 cells: the "Top Bar" and the "Bottom Bar" respectively visible on the top and on the bottom part of the device display. Type a meaningful name for the toolbar.

Let's add now the "Logout" action. Click "Action", place it in the work area. Now let's add a "Logout" button in the "Main Toolbar" in order to trigger the "Logout" action. Let's use a Navigation Flow for this purpose. Click "Flows", then choose "Navigation Flow" and click first on the "Toolbar" component and then on the "Logout" action. Type a name for the event.

How to model the "Logout" behavior

Let's open the Action Definitions View in order to model the operations defining the "Logout" behavior. Move to the Action Definitions View. The Action Definitions View is the project section containing all the action definitions defined in the Mobile Project.

An "Action Definition" is a chain of operations defining a specific business logic (e.g., the Logout function). First of all, let's create a new "Action Definition". Press the "Add Action Definition" button, type a name for the Action Definition.

Let's start modeling the operation chain in the "Logout" action definition. Double-click on the "Logout" action definition. Let's add the "Logout" operation. Click "Operation", choose "Logout" and place it in the action efinition. The "Logout" operation is used to terminate the user session. After the session is destroyed, the user loses the permissions to access the protected resources of the application. Type a meaningful name for the Logout Operation.

To state that the "Logout" operation must be the first operation to be executed, let's use a "Success Flow". Click "Flows", choose "Success Flow" then click on the Input Port and then on the Logout Operation.

Once the execution of the "Logout" operation is successful, the Action Definition must exit through the "Success Port". Let's use a "Success Flow" for this purpose. Click "Flows", choose "Success Flow", then click on the "Logout" operation and then on the Success Port.

If an error occurs after the execution of the "Logout" operation, the action definition must exit through the "Error Port. Let's use an "Error Flow" for this purpose. Click "Flows", choose "Error Flow", then click on the "Logout" operation and then on the Error Port.

Once we modeled the operation chain defining the "Logout" feature, let's go back to the IFML model in order to actually use the action definition.

Move back to the "App View". Let's associate the "Logout" action definition to the action. Press the "Select" button, choose the "Logout" action definition and press the "OK" button.

When the action execution ends successfully, then the user should be redirected to the "Login" screen. Let's use a "Navigation Flow" for this purpose. Click "Flows", choose "Navigation Flow", then click first on the "Success Port" and then on the "Home" screen.

How to position the "Logout" button

Let's define the layout settings in order to make the "Logout" button available in the "Main Toolbar". Double-click on the "Main Toolbar". In the Layout View, you can define all the properties concerning the way every visible element is rendered in the mobile application. Drag the "Logo" event and drop it to the Top Bar cell.

Let's apply the style template to the Top Bar Cell of the Toolbar: select the Top Bar from the Outline View and choose the "MobileDefault/Bar" style template for the "Cell Layout" property.

Once the "Logout" button is properly positioned in the Toolbar, let's come back to the App View to complete our model. Go back to the "App View". We want avoid to displaying the "Logout" button in the "Login" screen. Select the "Login" screen and check the "Ignore Toolbar" property. In this way the "Login" screen will not display the "Main Toolbar" containing the "Logout" button.

How to emulate the "Logout" feature

Now we can finally test the "Logout" pattern we have modeled. Press the "Generate and Run" button. The "Login" screen does not show the Top Bar containing the "Logout" button. Enter your credentials and press the "Login" button. Finally press the "Logout" button.


Related Learning Objects