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
  

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

4.1 Adding a Boorkmark

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

5.1 PhoneGap API Demo

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

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 

 5.3 Install PhoneGap Application

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
   

5.4 Delete PhoneGap Application

6. Settings

6.1 Network Proxy Settings

6.2 Default Geolocation Coordinate

6.3 Browser Home Page

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