Opera logo


Mobile widget development process advice

  1. Introduction
  2. Define a widget idea
  3. Develop on desktop
    1. Editing environments
    2. Tip: Import dummy JavaScript files for auto completion
    3. Tip: Click, drag and reload
    4. Tip: Spatial navigation on desktop
  4. Test in the emulator
  5. Test on the phone
  6. Deploy your widget
  7. Resources

Introduction

This articles provides some advice on developing mobile widgets, with special focus on mobile widgets. 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 to share it with the world.

Define 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 embaring on making a widget.

Develop 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:

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.

Download the file here.

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 + . 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.

Test in the 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:

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.

Screenshot of the Widget Emulator

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:

Deploy your widget

You have two choices when finally deploying your widget:

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.

Resources