May 20, 2012, Sunday, 140

Mobitouch Browser Overview

From Mobitouch cube

Jump to: navigation, search

Contents

Overview

Mobitouch Browser is a J2ME application which provides a customizable interface for the 2 way messaging feature on WLPs.

It is based on J2ME Polish framework, using a simplified html browser that allows you to change contents simply editing html files.

Requirements

The current release is compiled for MIDP 2.0 / CDLC 1.1 platform with bluetooth optional api support (jsr-82).

Download

Here you can download a compiled jar file unpack zip file and install on your mobile: mobitouch-browser.zip

Notes

The application is released as is, and was only tested on few mobile phones: Nokia 6288, Nokia E65, Nokia N95, Samsung SGH-E840, Sony-Ericsson W6600.


Content customization

You can easily change the content (i.e. directory structure, link names, two-way matching strings) with no need to recompile the application.

Inside the jar archive there is a folder called "content". You can edit html files inside this folder, creating new files and links.

In order to access local pages, you have to specify resource:// protocol followed by the path to the local resource; if you want to send a two-way request you have to use obex:// as protocol, followed by the string.

For example, the link 

<a href="obex://hello">Send hello to wlp</a>

allows you to send the string "hello" to a wlp running a campaign with a two-way content.

Main menu

The structure of main menu is defined in index.html file: 

<html>
 
 <body>

  <br/>

  <a class="pictureButton" href="resource://content/pictures.html">Pictures</a>
  
  <a class="musicButton" href="resource://content/music.html">Music</a>
  
  <a class="videoButton" href="resource://content/videos.html">Videos</a>
  
  <a class="ringtoneButton" href="resource://content/ringtones.html">Ringtones</a>
  
  <a class="textButton" href="">Text</a>
  
  <a class="gameButton" href="">Game</a>
  
  <a class="folderButton" href="">Folder</a>
  
  <a class="defaultButton" href="">Unknown</a>

 </body>

</html>


Different buttons are described by links of different classes. In this example, all the 8 defined button classes are shown.

Classes definitions and other style parameters (i.e. background image and colors, link style, borders, etc.) are defined in polish.css file.

Unfortunately, if you want to apply changes you have to recompile the application.

Other pages

Also the other pages are described by html files and can contain links to other pages or two-way requests.

This is the source code of pictures.html file: 

<html>
 
 <body>
      
   <a class="backFile" href="resource://content/index.html">Back</a>
      
   <a class="pictureFile" href="obex://dog">Dog (two way)</a>
      
   <a class="pictureFile" href="resource://content/frog.html">Frog (local)</a>
     
   <a class="pictureFile" href="">Picture 3</a>
     
   <a class="pictureFile" href="">Picture 4</a>
  
 </body>

</html>

You can access other pages, also containing images (i.e. frog.html), or use the link to forward a two-way request to wlp, using obex:// protocol.

Besides backFile and pictureFile classes, others have been defined in polish.css: musicFile, videoFile, textFile, ringtoneFile, gameFile and defaultFile. The only difference between them is the associated icon.

Icons

To change the application icon with your logo, you have to replace icon.png, that is contained in the root directory, with your own image. Be careful that the image must be in PNG format, have the same name (icon.png) and size 48 x 48 pixel.

To change the index.html page logo you have to replace img_mobitouch.png that is contained in /img folder with your logo, pay attention that the image have to be in the same PNG format, and have the same name (img_mobitouch.png). It's not strictly necessary respect the size of 68 x 33 pixel.

Application properties

Application Properties are stored in MANIFEST.MF that is contained in /META-INF directory.
You can change the MIDlet-Name: (and MIDlet-1:) Mobitouch Browser, the MIDlet-Version: 1.0.0, and the MIDlet-Vendor: Waymedia, with your information.
Pay attention that the MIDlet-Name: must be the same as the MIDlet-1:. Don't modify all the other fields.
Here an example: 

Manifest-Version: 1.0
MIDlet-Name: MY APPLICATION NAME
MIDlet-Version: 2.7.43
MIDlet-Vendor: MY VENDOR NAME
MIDlet-1: MY APPLICATION NAME,/icon.png,it.waymedia.browser.BrowserMidlet
MicroEdition-Configuration: CLDC-1.1
MicroEdition-Profile: MIDP-2.0
Polish-Version: 2.0.4 (2008-06-30)

Content requests

The first time you click on an obex link, the application tries to discover and connect to a wlp, then it sends a text file containing the string. The wlp parses the request and, if the string matches a two-way content, it is pushed to the mobile phone.

Campaign Configuration

Create a Campaign as usual and add the J2ME application as a simple content.
After that you must add a 2-way Content for each one that is specify with a the obex:// protocol in your html files.
You have to pay attention that the matching string set in the Content is the same as specified in the html.

Retrieved from "http://help.mobitouchcube.com/Mobitouch_Browser_Overview"