AppView Quick Start

This quick start helps you to create a Web page, add the wijappview widget, and customize the appearance and behavior of the widget.

To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy HTML markup to paste inside Notepad
Paste in Notepad.
Copy Code

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Paste in Notepad.	Copy Code
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

To reference the latest dependencies from the CDN, see wijmo cdn. Add them to your HTML page within the <head> tags. For example:

Paste inside the head tags	Copy Code
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/1.4.0/moonlight-mobile/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>

Paste inside the head tags

Copy Code

<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
  
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/1.4.0/moonlight-mobile/jquery-wijmo.css" rel="stylesheet" type="text/css" />
  
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />
  
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>

Within the <body> tags, add markup like the following:

Paste inside the body tags	Copy Code
<div data-role="page" data-theme="b"> <div data-role="wijappview"> <div data-role="appviewpage"> <div data-role="header"> <h2>Appview</h2> </div> <div data-role="content"> Default content, not displayed on a small screen. </div> </div> <div data-role="menu" class="ui-body-a"> <ul data-role="listview" data-theme="a"> <li><a href="blippity.html">Blippity</a></li> <li><a href="fling.html">Fling</a></li> <li><a href="flang.html">Flang</a></li> </ul> </div> </div> </div>

Paste inside the body tags

Copy Code

<div data-role="page" data-theme="b">
    <div data-role="wijappview">
        <div data-role="appviewpage">
            <div data-role="header">
                <h2>Appview</h2>
            </div>
            <div data-role="content">
                Default content, not displayed on a small screen.
            </div>
        </div>
        <div data-role="menu" class="ui-body-a">
            <ul data-role="listview" data-theme="a">
                <li><a href="blippity.html">Blippity</a></li>
                <li><a href="fling.html">Fling</a></li>
                <li><a href="flang.html">Flang</a></li>
            </ul>
        </div>
    </div>
</div>

The first <div> element creates the page, and the second one creates the wijappview widget. The third one creates the appviewpage where we add a header and default content with the fourth and fifth <div> tags. The last set of <div> tags create the menu, where we embed an unordered list with links to menu items in each list item.

In Notepad, create three new HTML pages, with the following names and contents:

Create a new HTML page	Copy Code
<div data-role="appviewpage" data-title="Blippity"> <div data-role="content"> <p>Dobba bam flobble blab. Yip floppity quabble flub quabble roo rizzle. Troy McClure ho Timmy boo do-da shnuzzle-tongle.</p> <p>Flabbity nizzle crangle! Smithers ha razz ho flooble do-da fleezungle. Twaddle tingle ongle zip wow blung razzle bam wobble.</p> <p>Blippity Fling-Flang compliments of <a href="http://bff.orangehairedboy.com/">orange haired boy</a>.</p> </div> </div>

Create a new HTML page

Copy Code

<div data-role="appviewpage" data-title="Blippity">
    <div data-role="content">
        <p>Dobba bam flobble blab. Yip floppity quabble flub quabble roo rizzle. 
           Troy McClure ho Timmy boo do-da shnuzzle-tongle.</p>
        <p>Flabbity nizzle crangle! Smithers ha razz ho flooble do-da fleezungle. 
           Twaddle tingle ongle zip wow blung razzle bam wobble.</p>
        <p>Blippity Fling-Flang compliments of <a 
           href="http://bff.orangehairedboy.com/">orange haired boy</a>.</p>
    </div>
</div>

Create a new HTML page	Copy Code
<div data-role="appviewpage" data-title="Fling"> <div data-role="content"> <p>Kanoodle fling dabba hum cringle nizzle zangle zap flooble. Blobbing quabbleblong. JINGLE LING RAZZLESHNIZZLE, "ZOOM DUH DEE GOBLIN," BAM BOBA FETT WOGGLE INGLE NIP SHNAZZLE-WOW...QUIBBLE DUH HUM! Duh izzle shnoz nizzle BLEE loo whack. "Bam shnizzle boo?" hizzle Cartman.</p> <p>Blippity Fling-Flang compliments of <a href="http://bff.orangehairedboy.com/">orange haired boy</a>.</p> </div> </div>

Create a new HTML page

Copy Code

<div data-role="appviewpage" data-title="Fling">
    <div data-role="content">
        <p>Kanoodle fling dabba hum cringle nizzle zangle zap flooble. Blobbing 
           quabbleblong. JINGLE LING RAZZLESHNIZZLE, "ZOOM DUH DEE GOBLIN," BAM

           BOBA FETT WOGGLE INGLE NIP SHNAZZLE-WOW...QUIBBLE DUH HUM! Duh izzle

           shnoz nizzle BLEE loo whack. "Bam shnizzle boo?" hizzle Cartman.</p>
        <p>Blippity Fling-Flang compliments of <a

           href="http://bff.orangehairedboy.com/">orange haired boy</a>.</p>
    </div>
</div>

Create a new HTML page	Copy Code
<div data-role="appviewpage" data-title="Flang"> <div data-role="content"> <p>Ting doo rakity flakity shnazbizzle. SHNIZZLE blo crangely hum wooblewiggle??? Smithers ha bananarama hum wheezer flabbity shnizzlehizzy. "Yip noodle doo?" blop wubbleshnizzle.</p> <p>Blippity Fling-Flang compliments of <a href="http://bff.orangehairedboy.com/">orange haired boy</a>.</p> </div> </div>

Create a new HTML page

Copy Code

<div data-role="appviewpage" data-title="Flang">
    <div data-role="content">
        <p>Ting doo rakity flakity shnazbizzle. SHNIZZLE blo crangely hum

           wooblewiggle??? Smithers ha bananarama hum wheezer flabbity

           shnizzlehizzy. "Yip noodle doo?" blop wubbleshnizzle.</p>
        <p>Blippity Fling-Flang compliments of <a

           href="http://bff.orangehairedboy.com/">orange haired boy</a>.</p>
    </div>
</div>

Save your HTML files, host them in your favorite web server, and open the main one in a browser. The wijappview widget appears like the following.

Widgets

AppView