MobiOne Logo

  MobiOne Developer Quickstart



Table of Contents

  1. What is MobiOne Developer
  2. Basics
  3. iPhone Emulation Mode
  4. Pre Emulation Mode
  5. Working with PhoneGap Applications
  6. Settings
  7. Getting Help and Feedback

1. What is MobiOne Developer?

MobiOne Developer (MobiOne) is a mobile web IDE currently in development by the Genuitec mobile team. The product is being released in milestone increments. Our goal is to provide enteprise and individual mobile developers a smart, convenient and affordable development environment for rapidly creating and testing mobile applications and content using the latest HTML5 mobile web technologies and frameworks. Whenever possible we seek to remove long standing and frequently unnecessary barriers and general hassle traditionally associated with mobile development such as special expensive H/W, programming languages, SDK requirements, ridiculous complexity and inefficient processes.

Planned features include (green checkmark indicates available feature):

  • Mobile web project support
  • Mobile web source editors
    • HTML5, CSS3, JavaScript, Text, Offline Manifest
  • Mobile device emulation
    • iPhone 
    • Palm Pre 
    • Blackberry
    • Android
  • Mobile Framework Support
    • PhoneGap
    • others TDB based on community feedback
  • Runtime debug tools
    • DOM inspector 
    • JavaScript debugger and profiler 
    • Resource loading profiler 
    • Local data and SQL browser 
    • TCP monitor
  • Site upload and synchronization services

Status:
Milestone-1 through the current Milestone-3 have concentrated on creating a quality and convenient iPhone and Pre emulation experience on Windows. The utility of a high quality device emulation is extremely high as it can help streamline requirements gathering, rapid prototyping, some levels of testing and support marketing as a convenient demo platform. MobiOne ports to Mac and Linux are planned.


2. Basics

The MobiOne UI has 2 main workareas:

  • TruView device emulation  system for iPhone and Palm Pre is located on the left half of the UI
  • Dev Center is located on the right half of the UI

figure 1

2.1 TruView Device Emulation

TruView is MobiOne's pixel-perfect mobile device emulation system.  We currently limit emulation to a device's features required to support mobile web application development such such as the device's mobile browser, e.g., Mobile Safari on iPhone, and application management system, e.g., iPhone Springboard.  The TruView emulation system is built on top of the WebKit4SWT framework developed by the Genuitec mobile team. This framework marries the best features of the WebKit browser which powers the most most advanced smartphone mobile browsers with developer API for creating custom behaviors required by an emulation environment. Currently TruView device emulation modes are provided for iPhone and Palm Pre.

To learn more see the iPhone and Pre mode discussions in Section 3 and Section 4 respectively.

2.2 Dev Center

The Dev Center is the main developer workplace. It provides the following key features:

  • Editors for HTML5, CSS3, JavaScript, text (coming soon)
  • DOM Inspector
  • JavaScript Debugger
  • JavaScript and Resource Profiling
  • HTML5 local and SQL data browsing
  • SCM tools for CVS (coming soon)
  • Community resources
  • MobiOne Settings


figure 2 - DOM Inspector

3. iPhone Mode

The iPhone Mode is designed to provide a high fidelity iPhone experience. Key features include:

  • Springboard - iPhone's home page management system
  • TruView Browser, a mobile web browser that emulates the Mobile Safari browser
  • Mobile web application and site short-cuts known as webclips
  • Installed PhoneGap applications (see PhoneGap section for more details)

The following image depicts the iPhone Mode's Springboard application. There are 5 key actions to note:

  • Launch Application - select any image on the Springboard to open its corresponding mobile web application

  • Change Device Mode - select the "Device Mode" button on the top-left to view the available devices

  • Rotate Orientation - select the "Rotate" button on the top-left to rotate the device orientation from vertical to horizontal and back

  • Home Button - select the "Home" button near the bottom of the iPhone faceplate to open the Springboard application

  • Open Browser - to launch the mobile web browser single click the Browser button on the bottom of the Springboard


                                   figure 3 - iPhone Mode Springboard


3.1 Mobile Web Browsing

The following image illustrates the TruView layout when you launch the mobile web browser. The Control Panel shown in the following image is only open momentarily while you make adjustments or until you move the mouse outside of the control panel window.

Special features of note:

  • Browser URL Address Bar show and hide - it is possible to hide the browser's address bar using either the iPhone meta tag apple-mobile-web-app-capable in your web page or by selecting the status bar or by using the "Address" checkbox in the Control Panel

  • Network Speed Setting - on the Control Panel is a slider for speeding up or slowing down browser's network loading speed. Includes "Airport" offline mode

  • Scroll indicators - when a large page is displayed you can view the iPhone horizontal and vertical scroll indicators by pressing the "Control" key.

  • Pan Scrolling - select the "Control" key and the cursor changes to a "hand" icon. Press the left mouse button and drag the viewport horizontally and vertically.

  • Bookmarks - the '+' and book icons on the bottom button bar are used to create and select bookmarks to your special URLs


                                  figure 4 - iPhone Mode Browser



3.2 Adding a Mobile Web Shortcut (Webclip) to the Homepage

Following the 4 steps outlined below to add a mobile web app (webclip) to the homepage.



                                               figure 5 - Add webclip steps


3.3 Removing a Springboard Application

To delete a Springboard application (webclip) right-click on the application's icon. Then choose "Delete application" action from the popup menu that appears. See the popup menu in the figure below.


         figure 6 - Remove webclip icon



4. Palm Pre Mode


The Palm Pre emulation mode provides a great mobile web browsing experience. No Springboard-like application has been developed for the Pre mode yet. Patterned after the iPhone mode, the Pre mode can be oriented vertically or horizontally, includes a control panel for controlling the customized WebKit browser's operation and includes bookmark management for creating, navigating to, and deleting bookmarks.


     
                    figure 7a                                                                         figure 7b


4.1 Adding a Boorkmark

MobiOne shares bookmarks between the Pre and iPhone browsers. The process for creating a Pre mode bookmark is illustrated below in figure 8.


                                                      figure 8 - Add bookmark process


5. PhoneGap (Work-in-Progress)

PhoneGap is an open-source, cross-platform, mobile web framework consisting of a set of JavaScript APIs for accessing device services and sensors such as geolocation, contacts, accelerometer, phone, vibrate, alerts and common user-interface components from a mobile browser. MobiOne PhoneGap development tools are currently a work-in-progress. The full extent of these tools will depend up on continued community interest in PhoneGap. 

At this time MobiOne PhoneGap support consist of an extended iPhone emulator capable of recognizing and executing the web source code of a PhoneGap application. The iPhone emulator provides an implementation of the PhoneGap version 0.7.4 (v20090810) API.  The implemented API consist of:

  • Geolocation
  • Accelerometer
  • Vibrate
  • Database
  • Custom Alert
  • Prompt
  • Beep
  • Activity UI
The Contacts API implementation will be available as part of the MobilOne 1.0 milestone-4 release.

5.1 PhoneGap API Demo

To see a PhoneGap application in action launch the PhoneGap API demo that is preinstalled on the iPhone Springboard.


                       figure 9 - Launching PhoneGap API Demo



figure 10 - PhoneGap API Demo in iPhone Emulator

5.1.1 Accel Tools (Early Access)

MobiOne provides an acceleration data input tool patterned after the PhoneGap Flash-based demo. The Accel Tools Panel is currently being developed and included as an Early Access feature. At the time of this release the 3D model does not accurately replicate the iPhone accelerometer operation.

      

mouse                        X & Y axis rotation

control + mouse       X & Y axis transformation

shift + mouse           Z axis rotation

figure 11 - Accel Panel

5.2 MobiOne-PhoneGap Assumptions, Conventions & Notes

As previously stated this is the initial MobiOne's PhoneGap support. It represents a proof-of-concept (POC) for how the TruView emulator technology can be adapted to implement a cross-platform framework such as PhoneGap. As we researched the PhoneGap framework it became clear to us that it is a rapidly improving work-in-progress. Our development priorities are to "Get it working", then "Get it working right", then "Optimize it", then ... you get the picture.  We are currently in the "Get it Working" phase.

5.2.1 Hard Coded Conventions - Full Disclosure

Before you rip us a "new one" for this brittle practice, did I mention that we are in the "Getting it Working" phase of development? ;-)  The PhoneGap framework installation includes an example project that serves as a simple template and guide for use when creating new PhoneGap applications. To simplify our milestone-3 POC for PhoneGap emulation support we chose to hardcode the location of the key PhoneGap resources relative to the root web resource, e.g., index.html. We recognize that the default project format can be modified in the plist and plan to support it in the next release.

5.2.1.1 PhoneGap Application File Structure

In Milestone-3 the supported PhoneGap file structure conforms to the default structure present in the main template zip file available on PhoneGap download page.  In this template structure there is a iphone subdirectory.   Following are the key resources and directory structure of a PhoneGap web application expected by MobiOne 1.0 milestone-3 (this will improve in m4):

 
defaultPhoneGapTemplate/ 
   ...
iphone/
...
beep.wav Default.png icon.png
 www/ index.html


iphone/ - subdirectory of phonegap template that contains iphone resources

iphone/beep.wav - sound file to play for the beep command

iphone/Default.png - startup image displayed when the app is launching and initializing

icon.png -  home page/Springboard icon

iphone/www/index.html - default startup application web page


Status:
Initial PhoneGap support in Milestone-3 does not yet support any custom PhoneGap project layouts or resources with custom names.  This functionality is planned for future releases.

 5.3 Install PhoneGap Application

Due to the mobile web structure of PhoneGap applications installation on the MobiOne iPhone home page is similar similar to creating a webclip. The 2 required inputs are:
  1.  Label to appear below the the application's icon when it appears on the Springboard
  2. URL to application's root web page, e.g., file://c:/helloworld/index.html or http://foo.com/helloworld/index.html

figure 12 - Installing PhoneGap Application


5.4 Delete PhoneGap Application

To delete a PhoneGap application on the Springboard, select it. Then right-click and select the "Delete" action from the context-menu.

 

6. Settings


6.1 Network Proxy Settings

The MobiOne shares the Windows Internet Explorer network settings. When you select Dev Center>Settings>Proxy the IE network tools dialog is opened.


figure 13 - Network Settings Dialog


6.2 Default Geolocation Coordinate

MobiOne's TruView browser services implement the HTML5 geolocation API. The gelocation implementation uses a static location defined in the MobiOne settings, see Dev Center>Settings>Geolocation. The location value is a longtitude, latitude coordinate. The default value provide with MobiOne is the location of our north Dallas, Texas office. You can change this coordinate to any value you choose.



figure 14 - GeoDemo depicting Settings geolocation coordinate


6.3 Browser Home Page

The Home Page setting is the default home page URL used by the iPhone and Pre web browsers.



figure 15 - Default browser home page URL


7. Getting Help and Feedback

We hope this overview has given you a good idea of the features provided by MobiOne and how you may use them. If you should need assistance or wish to report an error or provide feedback please use

MobiOne Support Forums

Mobile Web News and MobiOne Resources


© Copyright 2009, Genuitec LLC