JQuery Mobile based topic map browser

From WandoraWiki
Jump to: navigation, search

JQuery Mobile is a relatively new framework to build HTML applications and interfaces for mobile devices. The framework is designed for HTML5 capable mobile devices (such as Apple iPad or Android devices) but works also on modern desktop web browsers. As the name suggests JQuery Mobile is based on JQuery, a very widely used Javascript library. Wandora framework has two alternative topic map browsers based on JQuery Mobile. These browser options are

  • A module for the embedded HTTP server in Wandora.
  • Standalone application for JTM serialized topic map files.


Embedded HTTP server module for JQuery Mobile

Wandora's embedded HTTP server has a new module named mobile. This module implements a JQuery Mobile based topic map browser when active. To start Wandora's embedded HTTP server select menu option Server > Start server. While the server is active you can access the mobile topic map browser with URL

We assume here you are running the Wandora application in your local computer and you have not changed the default port of the embedded Wandora server. Also, to get started, you should open any topic to the topic panel in Wandora. Otherwise you'll receive a 404 server error message.

Server settings has a section labeled as mobile where you can adjust some settings of the mobile topic map browser. Available settings include an optional HTTP password, option to restrict the service to only local connections and an option to competely enabled or disabled the module.

The mobile module is in Wandora's distribution package folder build/resources/server/mobile.

Standalone JQuery Mobile topic map browser extra

Standalone JQuery Mobile topic map browser is in the extras folder of Wandora's source code distribution package. Exact location is extras/mobile_browser. Mobile topic map browser doesn't require Wandora application at all. All you need is a JTM formatted topic map serialization and the included Javascript libraries and HTML pages. By default, the application tries to read a topic map file ArtOfNoise.jtm. This can be changed by modifying the tmbrowser.html file. The URL for the jtm file is on line 29, this is followed by the startpage URI, language used, and URI prefixes which can also be changed if needed.

To start the mobile topic map browser open the file tmbrowser.html in your mobile (or desktop) browser application. Read the readme.txt file for more information.


In this example Wandora user has opened Wandroa's sample project samples/ArtofNoise.wpr. Then she starts Wandora's embedded server and enters mobile site's address to her desktop Firefox 4.0 browser. Similarly to default HTML site, all links (represented as buttons) are navigable and open the topic viewed in button.

Jquery mobile example 01.gif

Jquery mobile example 02.gif

Jquery mobile example 03.gif

Jquery mobile example 04.gif

Jquery mobile example 05.gif

Jquery mobile example 06.gif

Jquery mobile example 07.gif

Jquery mobile example 08.gif

IPad Example

Next photographs view Art of Noise topic map browsed in iPad.

Mobilejquery ipad 01.jpg

Mobilejquery ipad 02.jpg

Android Example

Next photographs view Art of Noise topic map browsed in Android mobile phone.

Mobilejquery android 01.jpg

Mobilejquery android 02.jpg
Personal tools