{{tag>Manuals Mobile_Applications Visual_Perspective}}
[<10>]
====== Using Visual Perspectives ======

==== Startup Perspective =====

User experience with an //**Aware IM**// application starts with a visual perspective. //**Aware IM**// displays some visual perspective when the user logs into the application. Which visual perspective will be displayed depends on the access level of the user who logs in. The configurator normally indicates that a particular visual perspective will be used when the user with a certain access level(s) logs in. This is done in the Access Levels dialog displayed when the user clicks on the “Use in login” property in the list of properties of the visual perspective.

This dialog has the “Platform Support” radio buttons.  If you select the “Phones Only” or “Phones and Tablets” options //**Aware IM**// will use the visual perspective when the user with the specified access level(s) logs into the application on a mobile device. //**Aware IM**// will automatically detect the type of device used and will use the appropriate visual perspective. It is also possible to force //**Aware IM**// to use a particular platform by specifying the ''mobile_platform'' parameter during login – see the [[docs:3300_mobile_apps:030_mobile_applications|Login]] section.

Therefore, for any access level it should be possible to define a visual perspective for the regular web application and a separate visual perspective for the mobile application (it is also possible to have the same perspective for both).

This perspective essentially starts a mobile web application. All subsequent user operations are derived from this visual perspective because they are either derived from the application menu or from the operations available in the content panel(s) displayed by the perspective.

===== Application Menu =====

On mobile phones there is usually not enough real estate to permanently display the complete application menu. The following techniques could be used to deal with the problem:

==== Toolbar ====
You can define the menu of the Toolbar type in the Top Bar frame of your mobile visual perspective. You can put as many menu items into the toolbar as you like. At run time //**Aware IM**// will automatically display the “overflow” button to put all the menu items that do not fit on the screen there. When the user taps on this button //**Aware IM**// will display these items in a pop-down menu (see the picture below).

{{ docs:images:mobile_toolbar_example.png?nolink&400 |}}
  
Furthermore, you will be able to control which menu items will be put on the overflow button of the toolbar. For example, you may want to display a couple of buttons permanently on the screen (such as, for example, the Go Back button). For these menu items you can select the “Put on the overflow button” property of the menu item and select “No” to make sure that the buttons representing the menu items are always displayed on the screen

==== Slide Out ====
Rather than using the “overflow” button of the toolbar you can use a special menu command to display a “slide-out” menu. You will still use the toolbar at the top but you will just add a few items to this toolbar, which will always be displayed and there will be no need for the overflow button. One of these buttons will represent the “slide-out” menu. When the user taps on this button //**Aware IM**// will slide-out the application menu. The user will select the menu item and the menu will disappear – see the picture below.
 
{{ docs:images:mobile_slide_out_menu_example.png?nolink&400 |}}

To implement this button you first need to define your application menu in the Left or Right frame of your mobile visual perspective (depending on which side of the screen you want your menu to appear). The menu must be of the Plain List type. Then you need to define a menu item for your toolbar in the Top Bar frame of the “Slide-In Left Frame” or “Slide-In Right Frame” types.

Note that both left and right frames are available for the slide-out menu. So you can use two buttons in the toolbar for two different menus – one will slide out from the left and one will slide out from the right. Or you can use the other button to slide out not the menu, but some other information (for example, application help screen). In this case the corresponding frame should contain not a menu but a content panel with HTML or some other content.

==== Combination ====

You can also use a combination of the overflow button in the toolbar and the slide-out menu

==== Context ====

What about “context” menu, i.e operations specific to queries and forms? In desktop applications these are usually displayed in the toolbars automatically created around the corresponding query or form. You can still use the toolbars, of course, but the better technique is to utilise the toolbar in the Top Bar frame that you would normally use anyway for your menu. In order to do this you should define the location of the panel operations as “Top Application Menu”. Alternatively you can define the location as “Bottom Application Menu”. In this case //**Aware IM**// will dynamically popup the bottom toolbar and display operations there.