Mobile Applications

Because you probably want to create a mobile application that uses more than just one widget, Wijmo provides you with a special widget that is just for that purpose: AppView.

As a mobile-only widget, wijappview serves as a container for a menu on the left, and a contents pane on the right. With the AppView widget, you create the menu with listview markup, using a hyperlink for each menu item.

Each hyperlink leads to a special HTML file. These HTML files do not have the usual markup, but instead consist of several nested <div> tags that contain the content.

The basic structure of the linked HTML files looks like this:

Code for nested content	Copy Code
<div data-role="appviewpage"> <div data-role="header"> <a href="index.html" data-icon="back">Back</a> <h2>Page Title</h2> </div> <div data-role="content"> <div data-role="WIDGETNAME" data-options="{OPTIONNAME: true}"> <!-- Markup that sets up the widget as you would normally use it. --> </div> </div> < /div>

Code for nested content

Copy Code

<div data-role="appviewpage">
    <div data-role="header">
        <a href="index.html" data-icon="back">Back</a>
        <h2>Page Title</h2>
    </div>
    <div data-role="content">
        <div data-role="WIDGETNAME" data-options="{OPTIONNAME: true}">
            <!-- Markup that sets up the widget as you would normally use it. -->
        </div>
    </div>
< /div>

For more information about the AppView widget and its use, please see AppView.

Data Options

When you use widgets in regular, non-mobile applications, you can set options in script, during widget initialization. For example, you can set the value option for a LinearGauge using script like the following.

$("#myWidget").wijlineargauge({value: 10});

However, in mobile applications, since we do not initialize the widget in script, we provide a data-options attribute that you can use to set options. To set the same value option for a LinearGauge as we did in the example above in a mobile application, we can use markup like the following.

<div data-role="wijlineargauge" data-options="{value: 10}">

Notice that the code inside the curly braces, {value: 10}, is the same in either case. This is a JSON object, and it does not change between mobile and non-mobile applications, so you can copy it from one to the other with only one gotcha:

If you use double quotes around the JSON object as we did in the example above, data-options="{value: 10}", you must use single quotes around any string values contained inside the JSON object. For example, when you copy a string value like the following from a non-mobile application:

$("#myWidget").wijlineargauge({orientation: "vertical"});

Change the double quotes to single quotes after you paste it into a mobile application.

<div data-role="wijlineargauge" data-options="{orientation: 'vertical'}">

Or if you use single quotes instead of double around the JSON object, use double quotes for the string value so that nested quotes are not the same as outer quotes.