Previewing Screens

View screen emulations for one or more devices based on your current design.

Prerequisites

Before previewing iOS, Android, and some BlackBerry devices, install Apple's Safari browser. These emulators require the WebKit rendering services distributed with Safari.

Task

The graphical views in the Flow Design and Screen Design tabs show the structure and function of screens, but not necessarily how they look when deployed on devices. For example, the Screen Design page includes invisible components, like custom actions, that can obscure the physical design. Previews can give you a better (although not exact) idea how a screen will look on a device, without having to generate, deploy, and run the application.

By default, the Hybrid App Designer displays only the Flow Design and Screen Design tabs. To see previews, enable their display in Preferences.

To enable previews and configure or change preview settings:
1. Open the Preferences dialog.
  For example, click Window > Preferences.
2. In Preferences, open SAP AG > Mobile Development > Hybrid App Designer > Screen Preview.
3. Choose the preview types you want to display, and configure preview settings.
In the Hybrid App Designer, open the Flow Design page and select the screen to preview.
Previews are not based on your screen selection in the Screen Design page.
Open any of the preview tabs that you configured in Preferences — one of these types:
- jQuery – emulates the look of WebKit-based browser engines. Available emulators include iOS, Android devices, and BlackBerry 6 and 7.
- Non-jQuery – emulates devices that are less sophisticated than Webkit, including the BlackBerry 5 devices.
- Performance – emulates simple devices like Windows Mobile, or the "performance" look of other devices.
The preview page displays the name of the selected screen, and a list of available emulators.
Select one of the available emulators.
Tip: If a screen does not display, check for error messages in the Console or Problems view. For some emulators, you might need to upgrade Microsoft Internet Explorer or install Safari.
If the application is not legal (for example, it is missing keys), preview generation fails with this message in the Preview tab of the Console window:
```
An error occurred while generating preview.
```
This error condition has the same root cause as the application generation error, An error occurred while generating code.
After changing your Hybrid App (for example, adding a control or modifying properties), you can update your preview to see the effects:
1. Save your changes. Saving the hybrid-app.xbw file regenerates the previews.
  Previews are not automatically updated when you change your Hybrid App in Designer.
2. Select a screen, then open a preview tab to see the updated preview.

Notes:

Buttons in screen previews not functional, except for effects like hover text or highlighting.
The page title is not displayed on some devices.
To clear and reload a preview at any time, right-click in the preview screen and choose Force Refresh.
To change the orientation of a preview, right-click in the screen and choose Rotate to Landscape or Rotate to Portrait.