Table of Contents
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):
The MobiOne UI has 2 main workareas:
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:
figure 2 - DOM Inspector
The iPhone Mode is designed to provide a high fidelity iPhone experience. Key features include:
The following image depicts the iPhone Mode's Springboard application. There are 5 key actions to note:
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
figure 4 - iPhone Mode Browser
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
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 BoorkmarkMobiOne 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
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:
5.1 PhoneGap API DemoTo 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.
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
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.
22.214.171.124 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):
5.3 Install PhoneGap ApplicationDue 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:
figure 12 - Installing PhoneGap Application
5.4 Delete PhoneGap ApplicationTo delete a PhoneGap application on the Springboard, select it. Then right-click and select the "Delete" action from the context-menu.
6.1 Network Proxy SettingsThe 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 CoordinateMobiOne'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 PageThe 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
|© Copyright 2009, Genuitec LLC|