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:

<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.

See Also

Mobile Widgets

Getting Started