Project: Mobile Widget Emulator Web Application
JavaScript WebApp using jQuery, jQuery UI, jQueryMobile, JSON, Ajax, HTML5, XHTML, CSS, PHP.
JavaScript WebApp using jQuery, jQuery UI, jQueryMobile, JSON, Ajax, HTML5, XHTML, CSS, PHP.
I was initially contracted to Wholesale Applications Community (WAC) to upgrade their existing developer tool, a mobile widget emulator firefox plugin, to work in Firefox 4. This involved XUL which is only really used by Mozilla. Documentation was scarce at the time, so I made a recommendation to completely re-write the emulator app.
I created v2 of the emulator as a cross-browser JavaScript web application using jQuery, XHTML, CSS, Ajax, JSON, PHP and mySQL. The emulator had two major components; the emulator application itself, and also a JavaScript API or Runtime. The WAC2.0 emulator runtime was built adhering strictly to W3C Widget WIDL specifications.
The application also included full language tagging via YAML text files.
Live URL - This tool can be viewed live at this URL. Use the widgets below to explore the emulator features:
I created v2 of the emulator as a cross-browser JavaScript web application using jQuery, XHTML, CSS, Ajax, JSON, PHP and mySQL. The emulator had two major components; the emulator application itself, and also a JavaScript API or Runtime. The WAC2.0 emulator runtime was built adhering strictly to W3C Widget WIDL specifications.
The application also included full language tagging via YAML text files.
Live URL - This tool can be viewed live at this URL. Use the widgets below to explore the emulator features:
The splash screen was presented during the initial load of the application, so that resources could be cached, allowing a seamless and responsive user interface.
The main panel of the user interface comprised of the widget uploader (left), the emulator control panel (center) and the emulator window itself (right).
The widget uploader is an ajax file uploader component, that displays information about the widget, its configuration and its validity.
I built a series of html5 mobile widgets to test and demo the emulator features. I used the (then) Alpha version of jQueryMobile for the widgets user interface. With a little tweaking, they worked great if a little sluggish. I have great hopes for jQueryMobile, but it needs to mature into a full release version before I would consider it for commercial use.
All JavaScript was hand-coded cleanly using only a text editor. Development code was well-commented, structured and organised. Production code was minified and compressed for performance benefits.
The runtime API was built using pure native cross-browser JavaScript. jQuery and other libraries couldn't be used as their presence in a mobile widget could not be guaranteed.
The control panel (center) provides controls to simulate events and state changes on a mobile device. These controls were built with jQuery UI library.
The controls fired events into the emulator runtime API, which the mobile widget receives in real-time, if it is programmed to receive that event.
Even the vibration and backlight features were simulated!
All runtime and emulator system events were recorded and available to the developer via the application log. On certain supporting browsers, javascript errors from the widget were also captured and entered into the log, to aid the developer debugging the widget.
The devices tab allowed the developer to switch between different device profiles. Each profile had its own hardware configuration.
The PIM profiles tab allowed developers to switch between different personal information manager profiles. For example, one profile could have 3 address books, 5 calendars and 2 email accounts.
