Mobile widget development process advice
By Opera Software · 21 May, 2008
- Previous article—Cross-device development techniques for widgets
- Next article—Adding a docked mode to your Widgets
- Table of contents
Table of contents
- Introduction
- Defining a widget idea
- Developing on desktop
- Testing in the Widget Emulator
- Testing on the phone
- Deploying your widget
- Resources
Introduction
This article provides some advice on developing, testing and deploying widgets, with special focus on mobile. Generally, we recommend that you develop your widget on desktop, test your widget in the Widget Emulator, and test on the phone when you’re done. Finally, you should upload your widget to widgets.opera.com:http://widgets.opera.com to share it with the world.
Defining a widget idea
You should start out by determining what sort of widget you want to make. We recommend analysing user needs and considering the characteristics of the mobile device before embarking on making a widget.
Developing on desktop
Developing on desktop is quick, easy and supported by several tools, so it's a lot easier to do the bulk of your development work there, before then testing on mobile devices.
Editing environments
Several editors have good support for web related languages such as HTML, JavaScript and CSS. Some suggestions:
- Aptana – Eclipse-based IDE, featuring built in support for various toolkits.
- OpenKomodo – Limitless scriptability.
- UltraEdit – for a slimmer experience
- Emacs – for the diehard Unix user.
Tip: import dummy JavaScript files for auto completion
Some editors, like Komodo, support importing JavaScript files and using their contents for auto completion. There is a dummy file for the Opera Widgets core DOM reference available that you can use to get auto completion of the widget and window objects when editing your JavaScript.
Tip: click, drag and reload
You don’t need to package your widget to be able to see how it works. On desktop, you can simply click and drag the config.xml of your widget to an Opera window and the widget will start. This way you save time that would otherwise be spent constantly zipping your files.
When you’re developing and changing the HTML, CSS or JavaScript, you can simply right click on the widget and click “Reload”, and the changes will be visible immediately.
Note: If you change config.xml, you will need to close and delete your widget in Opera, including from the trash can, and then re-drag the config.xml file into Opera.
Tip: spatial navigation on desktop
You can simulate spatial navigation on desktop by clicking Shift + <arrow key>. Opera will highlight the active link and move the focus when you click the arrow keys.
Spatial navigation is an Opera technology allowing the joystick on your mobile phone to be used to move focus between navigable elements on a webpage. Form controls and links and elements with onclick handlers are added to the spatial navigation connection. Moving the joystick right or down will move to the next navigable element on the page. Moving it up or left will move to the previous one.
By testing spatial navigation on desktop, you can get an idea of how your widget works on different devices which support it.
Testing in the Widget Emulator
The Widget Emulator is a useful application for testing what your widget will look like on different devices. Instead of copying your widget onto your mobile phone each time you make a change, you can work on your desktop using your favorite editing tools, and run the widget inside the emulator.
These aspects are emulated:
- Different screen sizes, with presets for TVs and mobiles in landscape and portrait mode. You can also customize the screen size.
- Slow net connections and transfer rates.
- Preference store sizes.
- Timeout based framerates.
The emulator is itself a widget, which overrides window sizing functions and media query output to provide an environment similar to a mobile or TV device - it looks like Figure 1.
Figure 1: The Widget Emulator.
See the article on the Widget Emulator for more details, including how to get hold of the emulator.
Test on the phone
When you are satisfied with the result, you can copy the widget onto the device and make final tests. Note that emulation is not a 100% representation of how the widget will function on a mobile. You should also test on an actual phone at different points during development.
In order to test your widget on a an actual device, you have some choices:
- Copy the packaged widget onto the device, for example through USB, and run it from the file system. How this is done varies from mobile to mobile.
- Make the widget downloadable from the web. Opera will recognize any .zip or .wgt file served with the
application/x-opera-widgetsMIME type. Visit the URL with your mobile phone to load the widget.
Deploy your widget
You have two choices when finally deploying your widget:
- Upload your widget to widgets.opera.com. This website is the hub of all community widget activity. Each widget is reviewed by Opera Software to check if it works on different devices.
- Make the widget available on your own website. The
linkelement can be used to announce a widget from a web page usingrel=“alternate”andtype=“application/x-opera-widgets”.
widgets.opera.com will filter the list of available widgets based on the client viewing the pages. If you visit the site with a mobile phone, you will only be able to access those widgets that have been approved for use on that type of device.
See Packing and deploying your Opera Widget at dev.opera.com for more information.