Viết widget đầu tiên

Đăng lúc: 2009-11-07 23:43:48

Nokia WRT Plug-in for Visual Studio QuickStart

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

Visual Studio 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.

Microsoft Visual Studio is a popular development environment that includes tools designed to help web developers deliver content faster and more accurately. The Nokia WRT Plug-in for Visual Studio provides the tools necessary for developers to efficiently create WRT widgets within Visual Studio and deliver optimised web experiences to S60 device users faster than ever before.

What should I already know?

You should be familiar with Visual Studio and the development of web pages using technologies such as HTML and JavaScript™. If you’re unfamiliar with Visual Studio, but would like to explore using it, visit the Visual Web Developer section in the MSDN Library, where you’ll find a collection of resources that provide information on using Visual Studio for web development.

How do I start?

You’ll have Visual Studio 2008 Standard or Professional with Service Pack 1 installed on your Microsoft Windows PC. You can download Visual Studio as a 90-day trial or purchase it from the Visual Studio page on the Microsoft website. You then download the plug-in from Forum Nokia.

Installing the plug-in

The plug-in installs as a standard Windows application. Run the plug-in installation file and follow the instructions. When the installation has been completed, start Visual Studio. You are now ready to start creating WRT widgets.

Create a new widget project

You’re now ready to create a widget. Select File > New Project from the Visual Studio menu to display the New Project dialogue. Select Nokia WRT from the list of Project types and expand its tree. Now, click New WRT Widget to see a list of available templates (see Figure 1). (You’ll also see an option to import existing WRT widget projects or widget packages into Visual Studio.) Select the RSS Reader Widget Project option, name the project, and click OK.

Figure 1: Options are available to create new WRT widget projects or import existing ones.

In the WRT Widget Wizard dialogue all the widget information has been completed by default, there is no need to change anything. Click Finish and your WRT widget project will be created.

Edit your code

The content of your project can now be seen in the Solution Explorer window, as shown in Figure 2.

Figure 2: The RSS-feed widget project is open in Visual Studio.

 

Now you can modify the widget’s code to create the functionality you require, For example, while you had the opportunity to specify an alternative RSS feed in the new project wizard, you can modify the feed details at any time by editing the widget’s code. To do this, double-click RSSReader.js in the Solution Explorer window and edit the feedURL variable in the JavaScript™ code, as shown in Figure 3.

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

Preview your widget

The plug-in provides a built-in browser for previewing widgets, as shown in Figure 4, which you will have seen open when the project was created.

It’s possible to preview the widget in the screen resolution and orientation available on various S60 devices. This is done by selecting the Settings ‘cog’ in the preview window. From settings it is possible to set the version of the WRT API which is emulated in the preview and send various event triggers to the widget being previewed.

Figure 4: The plug-in provides an integrated widget preview browser.

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, select Package Widget from the solution’s shortcut menu. The widget is now packaged and the file placed in the solutions root folder.

Deploy your widget

The plug-in supports the deployment of *.wgz files to S60 devices over a Bluetooth connection, to a folder, or to an S60 emulator. Before this feature can be used, it’s necessary to select a deployment target. To do this, on the WRT menu click Deployment Settings.

In the WRT Deployment settings, as shown in Figure 5, select Deploy to device by Bluetooth and then click Refresh to scan for available Bluetooth connections. When scanning is complete, select a device from the drop-down list and save the settings.

Figure 5: Widgets can be deployed to a device, a folder, or an SDK from within Visual Studio.

Now, to deploy the widget, open the solution’s shortcut menu and select Deploy Widget.

Install your widget

The widget installation package is now in your device’s Messaging Inbox, from where it can be opened. Opening the file 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 6.

Figure 6: The deployed widget is installed and can then be opened from the device’s ‘installation’ folder.

How can I learn more?

A complete guide to the features of the plug-in is provided in the Nokia WRT Plug-in for Visual Studio User Guide. 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.