Nokia WRT Extension for Adobe Dreamweaver QuickStart

Adobe Dreamweaver and WRT widgets — accelerating web optimisation What should I already know? How do I start? How can I learn more?

Adobe Dreamweaver and WRT widgets — accelerating web optimisation

WRT widgets enable web developers to deliver their sites or services as highly optimised experiences for S60 devices. This optimisation provides the opportunity to build stronger relationships with customers.

Adobe Dreamweaver is a popular tool designed to help web developers deliver content faster and more accurately. The Nokia WRT Extension for Adobe Dreamweaver provides the tools necessary for developers to efficiently create WRT widgets within Dreamweaver and deliver optimised web experiences to S60 device users faster than ever before.

What should I already know?

You should be familiar with Dreamweaver and the development of web pages using technologies such as HTML and JavaScript™. If you’re unfamiliar with Dreamweaver, visit the Adobe Training & Certification page, where you’ll find a collection of resources that provide tutorials on using Dreamweaver.

How do I start?

You’ll have Dreamweaver CS4 or later installed on your Microsoft Windows PC or Apple Macintosh computer. You can download Dreamweaver as a 30-day trial or purchase it from the Dreamweaver page on the Adobe website.

Installing the extension

First you need to download the extension from the Forum Nokia website or from Adobe Marketplace & Exchange. Then within Dreamweaver select Help > Manage Extensions to open the Adobe Extensions Manager (see Figure 1). Click Install and locate the extension’s file, accept the licence agreement and the extension will be installed.

Figure 1: The Nokia WRT Extension for Adobe Dreamweaver is installed from the Adobe Extensions Manager.

When installation is complete, restart Dreamweaver.

Create a new widget project

You’re now ready to create a widget. Select Site > New Nokia WRT Widget from the Dreamweaver menu and select one of the four templates from the cascading menu (see Figure 2). To get started, select the RSS option. (You’ll also see an option to import existing WRT widget projects into Dreamweaver.)

In the first New RSS Widget Project dialogue name your project, select a folder in which to store the project, and, if you wish to, update the widget name (which will be seen in the device menu), widget identifier, and version number. Click Done and your WRT widget project is created.

Edit your code

The content of your project can now be seen in the FILES window, as shown in Figure 3.

Figure 3: The RSS-feed widget project is open in the Dreamweaver File window.

You can now modify the code in the example to access your favourite RSS feed. (You can also enter an RSS URL in the second New RSS Widget Project dialogue.) You change the feed by editing the feedURL variable in the RSSReader.js JavaScript™ code, as shown in Figure 4.

Figure 4: Edit the widget’s JavaScript code to customise the RSS feed displayed.

Preview your widget

There are three ways to preview a widget: within Dreamweaver, in an external browser, and, if you’re using a Microsoft Windows PC, in an S60 emulator. Full details of all these options are provided in the Nokia WRT Extension for Adobe Dreamweaver User Guide, which is available from Help > Nokia WRT Help.

To preview the widget within Dreamweaver, open the wrt_preview_frame.html file and Select View > Design and View > Live View to display the preview, as shown in Figure 5.

Figure 5: The widget preview can be set to match the size and orientation of S60 device screens.

The preview offers several options to control the preview display and test widgets. These options are accessed by clicking the Settings ‘cog’ in the preview window.

Package your widget

Once the features of the widget have been confirmed and any debugging completed, the widget can be packaged into a *.wgz installation package. To do this, right-click within the project’s tree to open the shortcut menu and select Package Nokia WRT Widget. The widget is now packaged and the file placed in the project’s root folder.

Deploy your widget

The extension supports the deployment of *.wgz files to S60 devices over a Bluetooth connection or to a folder. Before this feature can be used, it’s necessary to select a deployment target. To do this, select Site > Nokia WRT Widget Deployment Settings from the Dreamweaver menu.

In the Nokia WRT Widget Deployment dialogue (see Figure 6), click Find devices to scan for available Bluetooth connections. When scanning is complete, select a device from the Deploy to a device drop-down list.

Figure 6: Widgets can be deployed to a file or a device from within Dreamweaver.

Now, to deploy the widget, click Deploy.

Install your widget

The widget installation package is now in your device’s Messaging Inbox, from where it can be opened. This starts the installation process, which follows the same sequence as installing an application. Once installed, the widget will be in your device’s Installations or similar folder, as shown in Figure 7.

Figure 7: The deployed widget is installed and can then be opened from the device’s Applications folder.

How can I learn more?

A complete getting started guide to the features of the extension is provided in the Nokia WRT Extension for Adobe Dreamweaver QuickStart Guide, which is available from Help > Nokia WRT Help. The Web Developer’s Library provides a detailed explanation of the content of WRT widgets and a guide to the available JavaScript™ APIs. You may also wish to view the Designing Web Content and Services for Nokia S60 Devices E-learning, which includes a section on WRT widgets.

You can check out all the WRT-related resources from the Web Runtime Widgets documentation page.

Rate This