nokia web tools web developer environment guide

56
Web Developer Environment Guide Document created on 25 October 2011 Version 1.1

Upload: gokul-klash

Post on 23-Oct-2014

66 views

Category:

Documents


7 download

TRANSCRIPT

Page 1: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide

Document created on 25 October 2011

Version 1.1

Page 2: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 2

Table of contents 1. Introduction 6

1.1 Nokia Web Tools 6 1.2 Content 6

2. The WDE interface 7 2.1 WDE features 7 2.2 The Web Tools perspective 9 2.3 Menu options 10 2.4 Toolbar 12

3. Web Developer Channel 13 3.1 Reopening Web Developer Channel 13

4. Setting Web Developer Environment preferences 14 4.1 Choosing your own workspace 14 4.2 Web Apps preferences 17

5. Creating a web app project 17 5.1 Creating a new web app project from a template 18 5.2 Importing an existing web app or web app project 22

5.2.1 Import rules 24 5.3 Creating a project from a sample 25

6. Overview of a web app project 26 6.1 Viewing project content in Explorer or Finder 27

7. Editing and code completion 28 7.1 Using the on-screen keyboard 28 7.2 Code completion 28 7.3 Code completion preferences 29 7.4 config.xml code-completion 29 7.5 Updating the runtime version 30 7.6 Importing an add-on library 31 7.7 Inserting a code snippet 32 7.8 Working with other project files 32

8. Previewing and testing a web app 34

9. Validating a web app 35

10. Packaging a web app 36 10.1 Excluding files from the web app package 36 10.2 Packaging a web app 36

11. Uploading a web app 39

12. Deploying a web app to a phone 40 12.1 Preparing for deployment 40

12.1.1 Setting up a Bluetooth connection 40 12.1.2 Installing Nokia Browser for Series 40 on a phone 40

12.1.2.1 Nokia Browser for Series 40 in firmware 40 12.1.2.2 Nokia Browser for Series 40 by download 41

12.1.3 Selecting a deployment method 41 12.1.3.1 Setting up for Bluetooth deployment 42 12.1.3.2 Setting up for deployment using a short URL 42

Page 3: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 3

12.2 Deploying a web app 43 12.2.1 Deploying over a Bluetooth connection 43

12.2.1.1 Install Bluetooth Launcher 43 12.2.1.2 Deploying your web app 44

12.2.2 Deploying using a short URL 47

13. Help 50 13.1 Run Network Trace 51 13.2 View Error Log in Editor 52 13.3 View EULA 53 13.4 About Nokia WDE 54

14. Additional Resources 55

Tables Table 1: The features offered by WDE and how they are accessed is listed ................................................................. 7

Figures Figure 1: The Web Tools perspective is shown. ............................................................................................................... 9

Figure 2: The File menu in the Web Tools perspective, with options to create and import web app projects,

is shown. ............................................................................................................................................................................ 10

Figure 4: The Window menu option to open the Web Tools perspective is shown. .................................................... 10

Figure 5: The various options on the Help menu are shown. ........................................................................................ 11

Figure 6: The WDE options on the Project Explorer shortcut menu for the project root folder (left) and a project

item (right) are shown. ..................................................................................................................................................... 11

Figure 7: The WDE toolbar is shown. ............................................................................................................................... 12

Figure 8: WDC, which provides access to many web app development resources, is shown. ................................... 13

Figure 9: The Workspace Launcher, enabling an alternative workspace to be selected, is shown. .......................... 14

Figure 10: The Workspace Launcher showing the copy options is shown. .................................................................. 15

Figure 11: Selecting the option to prompt for workspace on startup is shown. ........................................................ 16

Figure 12: The Web Apps preferences are shown. ........................................................................................................ 17

Figure 13: The New Series 40 web app dialogue, where an app template can be selected, is shown. ..................... 18

Figure 14: Naming the project and defining other web app details in the New News web app project dialogue is

shown. ............................................................................................................................................................................... 20

Figure 15: The second page of a new web app wizard is shown................................................................................... 21

Figure 16: Importing a new project from an existing web app project is shown......................................................... 22

Figure 17: The Import a web app dialogue displaying the properties of an imported web app is shown. ................ 23

Figure 18: The Samples tab is shown. ............................................................................................................................ 25

Figure 19: The shortcut menu (left) and tab tool bar (right) of the Samples tab is shown. ....................................... 25

Figure 20: The contents of a typical Series 40 web app project are shown. ............................................................... 26

Page 4: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 4

Figure 21: The on-screen keyboard is shown ................................................................................................................ 28

Figure 22: An example of the information provided by MWL code completion is shown. .......................................... 29

Figure 22: The feature element is shown. ...................................................................................................................... 30

Figure 23: The Add-On Library Wizard listing available add-on libraries is shown. .................................................... 31

Figure 24: The shortcut menu option for inserting a code snippet is shown. ............................................................ 32

Figure 25: The Validation dialogue, warning that there are unsaved changes, is shown. .......................................... 34

Figure 26: The warning that a web app cannot be previewed due to errors is shown................................................ 34

Figure 27: The Validation dialogue, displayed when unsaved changes in project files are present, is shown. ........ 35

Figure 28: The display of a message warning of a validation error is shown. ............................................................. 35

Figure 29: The Validation dialogue, displayed when there are unsaved changes in the project’s files, is shown. ... 36

Figure 30: The console messages for a successful web app packaging are shown. .................................................. 37

Figure 31: The *.wgt file in the project folder for a packaged Series 40 web app is shown. ..................................... 37

Figure 32: The console messages when web app packaging was unsuccessfully are shown. ................................... 37

Figure 33: The URL for an uploaded web app is shown. ................................................................................................ 39

Figure 34: The Deployment settings of the project’s preferences are shown. .......................................................... 41

Figure 35: Selecting a phone from the list of available Bluetooth devices is shown. ................................................. 42

Figure 36: The message warning that no phone has been selected is shown. ........................................................... 42

Figure 37: The Bluetooth Launcher app in the Games folder on a Series 40 phone is shown................................... 43

Figure 38: A successful run of Bluetooth Launcher is shown. ...................................................................................... 44

Figure 39: The status bar indicator of a web app deployment in progress is shown. ................................................ 44

Figure 40: The Deploying web app dialogue is shown. .................................................................................................. 44

Figure 41: Progress of the web app deployment reported in the Console is shown. ................................................. 45

Figure 42: The message asking if Bluetooth Launcher should be started is shown. .................................................. 46

Figure 43: The News web app running on a Nokia X3-02 Touch and Type phone is shown. ..................................... 47

Figure 44: The status bar indicator of a web app deployment in progress is shown. ................................................ 47

Figure 45: The Deploying widget dialogue is shown. ..................................................................................................... 48

Figure 46: Progress of the web app deployment reported in the Console is shown. ................................................. 48

Figure 47: The Web App short URL for Ovi Browser dialogue displaying the URL for the web app is shown. .......... 48

Figure 48: The News web app running on a Nokia X3-02 Touch and Type phone is shown. ..................................... 49

Figure 48: An example of the Network Trace Report is shown. .................................................................................... 51

Figure 49: An example of the error log is shown. .......................................................................................................... 52

Figure 48: The window displaying the Nokia Web Tools EULA is shown. ..................................................................... 53

Figure 50: The About Nokia WDE dialogue box is shown. ............................................................................................. 54

Page 5: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 5

Change history 7 April 2011 1.0 Initial document release

25 October 2011 1.1 Updated to describe the features of Nokia Web Tools 1.5

Page 6: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 6

1. Introduction Nokia Web Tools provide a complete environment for the creation of Series 40 web apps for

phones supporting Nokia Browser for Series 40. Series 40 web apps provide users with a rich

interface to web content viewed in Nokia Browser for Series 40. This guide describes the

features of Web Developer Environment applicable to the creation of Series 40 web apps.

1.1 Nokia Web Tools Nokia Web Tools is comprised of three components for Series 40 web app development:

‒ Web Developer Environment (WDE) — built on the Eclipse platform; WDE leverages the powerful code

development features of this platform to provide for the editing, packaging, and deploying of web apps. This

document describes the features of WDE applicable to the creation of Series 40 web apps.

‒ Web Developer Channel (WDC) — this resource is embedded in WDE and provides online access to a range of

resources from Nokia that will assist in the development of web apps. The features of WDC are described

fully in Web Developer Channel Guide, available from WDC.

‒ Web App Simulator (WAS) — this tool enables web apps to be previewed and debugged. The simulator

enables web apps to be tested on the development computer, while an integrated implementation of Web

Inspector provides feature that enable web apps to be debugged. The features of WAS applicable to

Series 40 web apps are described fully in Web App Simulator Guide, available from WDC.

Nokia Web Tools are available for computers running Microsoft Windows, Apple Mac OS X, or Ubuntu Linux.

1.2 Content This document offers a guide to using WDE by providing in depth information on all of the features included in

WDE. In addition, guidance is provided on where to find more information about WAS and WDC.

This guide has been written based on use of a Microsoft Windows installation; however the guidance provided is

the same for Apple Mac and Ubuntu installations, unless specifically noted.

Page 7: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 7

2. The WDE interface WDE is built on the Eclipse framework and makes use of the Web Tools Platform (WTP) and JavaScript

Development Tools (JSDT). As such WDE uses the Eclipse interface to present you with the information needed to

create web apps.

Tip: If you’re not familiar with the Eclipse IDE and wish to learn more about it and the additional components used in WDE you might wish to start by review the Concepts section of the Workbench User Guide in the WDE help. To access the WDE help, on the Help menu click Help contents. However, a specific knowledge of the working of Eclipse is not required to use WDE.

2.1 WDE features WDE offers the features defined in Table 1.

Table 1: The features offered by WDE and how they are accessed is listed

Function Menu

File Window Help Project Explorer shortcut menu

WDE toolbar

Web Tools perspective

Create new web app

Import web app

Preview web app

Validate web app

Package web app

Include/Exclude files

Deployment settings

Deploy web app

Page 8: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 8

Function Menu

File Window Help Project Explorer shortcut menu

WDE toolbar

Upload Series 40 web app

Show in Explorer

Import library

Insert snippet

Use sample web apps

Open Web Developer Channel

On screen keyboard

Publish to Nokia Store

Check for updates

Run Network Trace

View Error Log in Editor

View EULA

About Nokia WDE

Items marked are supported by standard Eclipse menu or toolbar options.

Page 9: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 9

2.2 The Web Tools perspective WDE provides the Web Tools perspective, which presents an optimal arrangement of views for creating web apps,

as shown in Figure 1.

Figure 1: The Web Tools perspective is shown.

The key features of this perspective are:

1. Menu and tool bars — standard Eclipse menu and tool bar with additional options to access to WDE features.

2. WDE toolbar — toolbar offering access to key WDE features.

3. Project Explorer view — shows the web app projects and enables access to the files they contain.

4. Editor area — where the web app’s HTML, CSS, JavaScript™ code, and configuration files are edited. The WDC

is viewed here also.

5. Outline — shows the outline for the current code item in the editor area.

6. Snippets view — provides a list of the code snippets available for use in web apps.

7. Information area — provides feedback on problems found in the web app projects, the console output, a task

manager, and access to samples included in WDE or installed from WDC.

Page 10: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 10

2.3 Menu options WDE adds options to the standard Eclipse menus to:

‒ create and import web app projects on the File menu (Figure 2). These options are available in the Web Tools

perspective only.

‒ reopen the Web Tools perspective on the Window menu (Figure 4).

‒ view about information on the Help menu (Figure 5).

‒ access many WDE features on the Project Explorer shortcut menu (Figure 6).

Figure 2: The File menu in the Web Tools perspective, with options to create and import web app projects, is shown.

Figure 3: The Window menu option to open the Web Tools perspective is shown.

Page 11: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 11

Figure 4: The various options on the Help menu are shown.

Figure 5: The WDE options on the Project Explorer shortcut menu for the project root folder (left) and a project item (right) are shown.

Page 12: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 12

2.4 Toolbar The WDE toolbar, as shown in Figure 7, provides features to create a new web app, start a local or cloud based

preview, display the on-screen keyboard, open WDC, and link to publishing information.

Figure 6: The WDE toolbar is shown.

Page 13: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 13

3. Web Developer Channel Web Developer Channel (WDC), see Figure 8, provides you with access to additional resources that will assist with

the creation of web apps. WDC provides features to install and remove add-ons also. Full details of the features

offered by this resource are described in Web Developer Channel Guide, available in WDC.

Figure 7: WDC, which provides access to many web app development resources, is shown.

3.1 Reopening Web Developer Channel The WDC tab is opened each time WDE starts. If it’s closed during a session, it can be reopened from the WDE

toolbar by clicking the WDC icon.

Page 14: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 14

4. Setting Web Developer Environment preferences

There are a number of preference settings you may wish to amend to ensure WDE works best

for you. This section describes how to modify these settings.

4.1 Choosing your own workspace By default WDE creates a workspace in a folder in the root of the user’s folder.

Each time WDE starts, the dialogue shown in Figure 9, will enable a workspace to be selected. However, if the Use

this as the default and do not ask again is checked then the prompt will no longer be issued.

Figure 8: The Workspace Launcher, enabling an alternative workspace to be selected, is shown.

If you’ve chosen not to prompt for workspace selection each time WDE starts, you have two options for selecting

an alternative location.

Page 15: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 15

The first option is to use the feature to switch workspaces. To use this feature, on the File menu point to Switch

workspace and click Other. The Workspace Launcher dialogue, see Figure 10, displays. Click Browse to select an

alternative workspace. If you’ve made changes to the default WDE layout, click Copy Settings to define which

aspects of the current workspace will be copied to the new workspace. Once this is done, click OK.

Figure 9: The Workspace Launcher showing the copy options is shown.

WDE closes and restarts to activate the new workspace. Once alternative workspaces have been created, the File

menu Switch workspace option lists the recently used workspaces, eliminating the need to browse each time a

workspace is switched.

The alternative option, if you wish to select a workspace each time WDE opens, is through the feature that

prompts for a workspace as WDE starts. To use this feature, on the Window menu click Preferences. In the

preferences dialogue open General then Startup and Shutdown, then Workspaces.

Tip: To easily locate the Workspaces preferences option, type ‘work’ into the Preferences filter.

Page 16: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 16

Click the check box against Prompt for workspace on startup, shown in Figure 11, and click OK.

Figure 10: Selecting the option to prompt for workspace on startup is shown.

Now close and reopen WDE. During the restart you will be given the option to select an alternative workspace.

You can choose not to be prompted for a workspace on subsequent start-ups by selecting Use this as the

default and do not ask again.

Page 17: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 17

4.2 Web Apps preferences To access the WDE preferences, on the Window menu click Preferences. WDE provides three global preferences,

shown in Figure 12 as follows:

‒ Deployment — enables the destination for deployed web apps to be set, for more information see Chapter

12.2, ‘Deploying a web app’.

‒ Preview — enables setting of the path for the preview tool.

‒ WDC — enables the setting of the address for WDC content.

Figure 11: The Web Apps preferences are shown.

Warning: Changing the previewer or WDC paths may prevent WDE from functioning correctly. Please change these values only if you are sure the change is necessary. If you accidentally change these values or otherwise need to restore the default values, this can be done by clicking Restore Defaults.

Page 18: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 18

5. Creating a web app project WDE provides three methods for creating new web app projects:

‒ Creating a project from a template loaded into WDE.

‒ Importing a web app project or packaged web app.

‒ Creating a project from a sample included in WDE or installed from WDC.

Note: Sample Series 40 web app projects will be available from WDC as they are released.

This section describes how to create a project using these methods.

5.1 Creating a new web app project from a template To create a web app project, ensure that the Web Tools perspective is open, you can do this on the Window menu

by pointing to Open Perspective and clicking Web Tools. Now, on the File menu click New then Series 40 web app

(wgt). The New Series 40 web app dialogue opens, shown in Figure 13.

Figure 12: The New Series 40 web app dialogue, where an app template can be selected, is shown.

Page 19: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 19

By default four templates are made available by WDE for Series 40 web apps. Any additional templates installed

from WDC are listed here also. The four default templates are:

‒ Basic web app project — an empty web app project; the core files including Mobile Web Library (MWL), but

no content.

‒ Basic web app with Single Scene — the basic project content with the addition of code for a single scene

web app.

‒ Basic web app with Style — the basic project content with the addition of a set of style items applicable to

Series 40 in a CSS file.

‒ News web app project — a template for a web app that displays the content of an RSS feed and is

code complete.

Once a template has been selected, click Next to open the wizard that enables information about the web app to

be entered. The wizards consist of two or more pages:

‒ New project page — this page enables information defining the web app to be entered.

‒ Project settings — this page or pages provide for setting the names for the core HTML, CSS, and JavaScript

language files and the definition of template specific information (if any).

Page 20: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 20

The first page is generic for all web apps. As an example the New News web app project dialogue is shown in

Figure 14.

Figure 13: Naming the project and defining other web app details in the New News web app project dialogue is shown.

The information entered into the first page is as follows:

‒ Project Name — a name for the project. This name is used within WDE only and doesn’t have to be the same

as the web app’s display or short names, which are displayed on a Series 40 phone.

‒ Location — this defaults to the active workspace path. By clearing the Use default location checkbox an

alternative location can be select, by clicking Browse.

‒ Display Name — this field is used to populate the name field of the web apps config.xml file and the <head>

<title> attribute in the web app’s main HTML file, which is where Nokia Browser for Series 40 retrieves the

display name for use in the favourites list.

‒ Unique Identifier — a default string is created by the wizard, this can be changed if desired. The identifier

style is a web address.

‒ Version # — this is initially blank. To enable your web app for distribution through Nokia Store a version

number must be set, number used should be in the format [major version].[minor version](.[micro version]).

Page 21: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 21

‒ Short Name — this field is used to name the Java application created during the Nokia Publish process (for

more information, see Series 40 Web Apps Publishing Guide that is available in WDC). When your web app is

installed from Nokia Store the short name is displayed in the Series 40 phone’s applications list.

‒ Runtime Version # — here you can select the runtime version number, you have two options:Runtime version

1.0 and Runtime version 1.5. For most web apps the default of Runtime version 1.5 should be used. More

information on the differences between runtime versions 1.0 and 1.5 can be found in Series 40 Web Apps

Developer’s Guide and API Reference, available in WDC.

Once these details have been entered the web app project can be created by clicking Finish or, by clicking Next,

the first project settings dialogue, shown in Figure 15, displays.

Figure 14: The second page of a new web app wizard is shown.

The fields on this page will vary according to the content of the template. The options may include:

‒ up to three fields that enable the specification of alternative names for the web app’s main HTML, CSS, and

JavaScript™ code files.

‒ a field or set of fields that provide for the entry of any template specific information. In the case of the News

template, this template specific information includes the URL of the RSS feed to be displayed,

‒ a field or set of fields that provide for entry of author and licence information as well as descriptive of the

web app.

Note: The template specific fields and main file name fields may be presented in separate pages.

Page 22: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 22

Once this information has been entered, click Finish to create the application project.

5.2 Importing an existing web app or web app project If you have web app projects that you have created manually, created with another tool, a sample downloaded

from Nokia Developer, or a packaged web app whose content you wish to review, you can import these into WDE.

Note: Some errors are ignored during web app import. For more information see Chapter 5.2.1, ‘Import rules’. If there are errors in the web app these will need to be corrected before the web app can be previewed or packaged.

To import a web app, on the File menu point to New and click Import web app. In the Import a web app dialogue,

shown in Figure 16, click Browse and locate the config.xml file in a project or the *.wgt file for any packaged

web app you wish to import. Once the path for the item to import has been selected, click Next.

Figure 15: Importing a new project from an existing web app project is shown.

Page 23: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 23

The second Import a web app dialogue page, shown in Figure 17, displays.

Figure 16: The Import a web app dialogue displaying the properties of an imported web app is shown.

This dialogue provides options to update the:

‒ Project Name — a name for the project. This name is used within WDE only and doesn’t have to be the same

as the web app’s display name.

‒ Location — this defaults to the active workspace path. By clearing the Use default location checkbox an

alternative location can be selected, by clicking Browse.

‒ Display Name — this field is used to populate the name field of the web apps config.xml file and the <head>

<title> attribute in the web app’s main HTML file, which is where Nokia Browser for Series 40 retrieves the

display name for use in the favourites list.

‒ Unique Identifier — this can be changed if desired. The identifier style is a web address.

‒ Version # — to enable the web apps to be distributed through Nokia Store the version number should be of

the format [major version].[minor version](.[micro version]).

The dialogue may provide warnings about incomplete or incorrectly formed properties, which must be corrected

before proceeding. When the details have been updated or confirmed, click Finish and the project or web app

is imported.

Page 24: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 24

5.2.1 Import rules

When a web app or project is imported it’s validated to ensure the resulting project is complete. In general web

apps created with WDE should always import.

The following issues will prevent a Series 40 web app project from importing:

‒ for a packaged web app, the *.wgt file isn’t a valid ZIP file or doesn’t contain the config.xml file in its root.

‒ for packaged web apps and projects:

• the config.xml isn’t well formed.

• a well formed config.xml file doesn’t contain a valid Series 40 feature tag.

Warning: The web app version is not validated during the import process. This means that an invalid feature tag in the imported items config.xml file, such as <feature name="nokia://s40.nokia.com/SAWRT/1.9" required="true"/> will be imported as is. In such cases an error will be reported on validation of the web app and the 1.0 version of the MWL loaded.

Page 25: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 25

5.3 Creating a project from a sample A number of example web apps are included in WDE. Additional sample Add-ons could be make available through

WDC. The default and any examples installed from WDC are listed in the Samples tab in the notifications area of

the Web Tools perspective, as shown in Figure 18.

Figure 17: The Samples tab is shown.

From the Samples tab it is possible to select a sample and:

‒ import the sample into WDE as a new project, by clicking Import sample as a project on the sample’s shortcut

menu or clicking the import sample as a project button on the tab’s tool bar, as shown in Figure 19.

‒ preview the sample in WAS by clicking Preview sample on the sample’s shortcut menu or clicking the view

preview of sample button, shown in Figure 19, and the sample will be opened as a local preview in WAS. For

more information on local and cloud previews, see Chapter 8, ‘Previewing and testing a web app’.

Figure 18: The shortcut menu (left) and tab tool bar (right) of the Samples tab is shown.

Page 26: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 26

6. Overview of a web app project New or imported web app projects are opened in Project Explorer, shown in Figure 20.

Each project is presented with an icon, which can take three forms:

‒ which indicates that there are no warnings or errors against the project.

‒ which indicates that the web app has warnings.

‒ which indicates that the web app has errors and cannot be previewed or packaged. The web app may have

warnings in addition to any errors.

For more information on errors and warnings, see Chapter 9, ‘Validating a web app’.

The content of the project is as follows:

‒ JavaScript resources — this library container folder provides read-only

copies of the default JavaScript libraries available to your web app on the Nokia

Browser for Series 40 Proxy server. The libraries are provided for your

information and to provide improve information for:

• code completion.

• validation.

• debugging — the libraries improve the information available in Debugger

(Web Inspector) thereby aiding the debugging and analysis of your web

apps.

More information on the APIs provided in these libraries can be found in Series 40 Web Apps Developer’s

Guide and API Reference, available in WDC.

Note: The Mobile Web Library provided for Series 40 web apps isn’t packaged in your web app’s *.wgt file, rather it is provided by default by the Nokia Browser for Series 40 Proxy server.

‒ css — this folder contains the CSS files used by the web app.

‒ images — this folder contains the images used in the web app.

‒ js — this folder contains the JavaScript code created for this web app.

Note: CSS files, JavaScript code, images, and any other web app content can be stored anywhere in a project. If stored in a folder, the name and location of the folder is arbitrary, but the use of a meaningful named folder and single location for logically grouped types of files can help in managing content.

Figure 19: The contents of a typical Series 40 web app project are shown.

Page 27: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 27

‒ Files config.xml and index.html — these files define the content and behaviour of the web app. For more

information, see the W3C Widget Packaging and Configuration standard.

6.1 Viewing project content in Explorer or Finder It may sometimes be useful to view the content of a web app project in your computer’s native file browser. To

view a project folder or item in the native file browser, right click the item to open its shortcut menu and click

Show in Explorer.

Page 28: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 28

7. Editing and code completion WDE provides the HTML, CSS, and JavaScript language editors required for the creation of web apps.

When you edit JavaScript code, WDE provides completion for web standards, popular desktop-browser JavaScript

extensions, and the Mobile Web Library (MWL) APIs.

For more information on the MWL APIs, please refer to Series 40 Web Apps Developer’s Guide and API Reference

which is available in WDC.

7.1 Using the on-screen keyboard The computer’s built in on-screen keyboard, see Figure 21, can be opened from WDE to enable the editing of a

web app’s content. The on-screen keyboard is opened from the on-screen keyboard button on the WDE toolbar.

The layout of the keyboard is determined by the language and keyboard settings of the computer.

Figure 20: The on-screen keyboard is shown

7.2 Code completion WDE provides code completion for web standards, popular desktop-browser JavaScript extensions, and the

Mobile Web Library (MWL) APIs. Code completion is available while editing CSS, HTML, and JavaScript code files.

Code completion is automatically provided when typing.

Page 29: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 29

Code completion for MWL commands provides command completion suggestions along with help information, as

shown in Figure 22.

Figure 21: An example of the information provided by MWL code completion is shown.

7.3 Code completion preferences You have the ability to determine which editors use code completion. To set the availability of code completion,

on the Window menu click Preferences. In the Preferences dialogue enter Content Assist in the search. You’ll

see options for HTML, JavaScript, CSS, and XML; click Content Assist for the editor you wish to alter and set the

appropriate content assistance parameters.

7.4 config.xml code-completion The plug-in doesn’t provide specific code completion for config.xml files. Tags are, however, validated against

the Nokia DTD when the web app is validated. For more information on validating a web app, see Chapter 9,

‘Validating a web app’.

Page 30: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 30

7.5 Updating the runtime version To convert a web app created for the Series 40 web app runtime 1.0 to version 1.5, you edit the feature element

in the config.xml file, as shown in Figure 22.

Figure 22: The feature element is shown.

Note: If you edit an invalid version into the name value NWT will continue to validate your JavaScript code for the last valid version it used. You will however receive an error from the validator for the incorrect version number in name.

Page 31: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 31

7.6 Importing an add-on library Add-on libraries for Series 40 web apps will be available from WDC as they are released. If you install an add-on

library from WDC the Add-On Library Wizard enables you to add these libraries to your project. To add a library,

click Import Add-on Library on the project’s shortcut menu. The Add-On Library Wizard, shown in

Figure 23, displays.

Figure 23: The Add-On Library Wizard listing available add-on libraries is shown.

Select one or more add-on libraries to include in your project and click OK. The libraries are added to the project.

A button at the bottom left of the libraries list provides select/unselect options. When no libraries are selected

the button reads Select All and clicking it selects all the listed libraries. When one or more libraries are selected

the button reads Unselect and clicking it unselects all selected libraries.

Page 32: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 32

7.7 Inserting a code snippet WDE provides a number of code snippets that can be used to insert predefined functionality into web apps. In

addition, WDC will provide additional code snippets as they are released. The available code snippets can be

viewed in Snippets, an area displayed directly below Project Explorer in the Web SDK perspective, as shown in

Figure 24.

Figure 24: The shortcut menu option for inserting a code snippet is shown.

There are two ways in which snippets can be inserted into code. First, open the file into which you wish to insert

the snippet then:

‒ position the cursor at the desired insertion point. In the Snippets tab, select the desired item and open its

shortcut menu. Click Insert to add the snippet to the code.

‒ drag the snippet item out of the snippet tab and drop it into the code file in the desired location.

Note: No validation is performed to ensure that the code snippet type matches the file into which it is being inserted. It’s therefore important to ensure the snippet’s content is appropriate to the file it is being inserted into.

In addition, by clicking Paste as Snippet you can add a copied section of your own code to the snippet library.

7.8 Working with other project files The ability to exclude project files from web app packages (see Chapter 10.1, ‘Excluding files from the web app

package’) means it’s possible to use the project as the repository for all files related to the project, such as raw

image files created in products such as Adobe Illustrator or GIMP.

Support files can be added to the project by creating them directly in the project’s workspace folder as well as by

copying and pasting or dragging and dropping the files into Project Explorer.

Page 33: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 33

Once in the project’s folder a supporting file is edited from Project Explorer by double-clicking it and the correct

application in which to edit the file should be opened. If the appropriate editor doesn’t open, open the file’s

shortcut menu and click Open with.

Page 34: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 34

8. Previewing and testing a web app Nokia Web Tools includes Web App Simulator (WAS), which enables web apps to be previewed on a computer. WAS

includes an implementation of Web Inspector in which log information, generated by the web app or the Nokia

Browser for Series 40 Proxy server, can be viewed to facilitate debugging a web app. To open a web app in WAS,

open the project’s shortcut menu and click either Local Preview for Web app or Cloud Preview Web app — for

details on the differences between these two options see Web App Simulator Guide, available from WDC. The

process to launch the web app into WAS first checks for changed files in the web app then validates the web app.

If there are unsaved edits in the web app’s project files the Validation dialogue, see Figure 25, displays. Click Yes

to save all unsaved edits.

Figure 25: The Validation dialogue, warning that there are unsaved changes, is shown.

If there are errors in the web app that prevent the web app from being packaged and the preview started, the

warning shown in Figure 26 is displayed.

Figure 26: The warning that a web app cannot be previewed due to errors is shown.

Note: The validation reports errors for config.xml and specific Series 40 web app content rules. General issues, identified against the generic rules provided by the underlying Eclipse platform are reported as warning. However, such warning may relate to issues that could prevent the web app from running in WAS or on a phone. For more information, see Chapter 9, ‘Validating a web app’.

Once any changed files have been saved and if the web app validation and packaging was successful, the web app

is opened in WAS.

For information on how to use WAS, see Web App Simulator Guide, available in WDC.

Page 35: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 35

9. Validating a web app WDE provides validation of a web app’s contents whenever a file in a web app is saved. You can, however, force all

edited files to be saved and validate the content of the web app by clicking Validate Web app on the project’s

shortcut menu. If there are unsaved changes present in the project’s files the Validation (see Figure 27) dialogue

displays. Save any modified files as necessary.

Figure 27: The Validation dialogue, displayed when unsaved changes in project files are present, is shown.

The validation can issue two types of alert:

‒ errors — these are related to specific web app errors, those from the config.xml file, W3C geolocation API,

and Mobile Web Library that would prevent the web app from running.

‒ warnings — these are related to generic JavaScript or CSS issues that may prevent a web app from running

or result in unexpected behaviour. These warning originate from:

• JavaScript code errors provided by the JavaScript complier of the Eclipse JavaScript Development

Tools (JSDT).

• CSS validated against the W3C CSS validator.

When the validation issues warnings or errors, details are provided in the Problems tab of the Web Tools

perspective’s notification area, as shown in Figure 28. Double-clicking the message line will open the file in which

the error has occurred in the editor area and, for HTML, CSS, and JavaScript code files, move the cursor to the

line where the error has been detected.

Figure 28: The display of a message warning of a validation error is shown.

Page 36: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 36

10. Packaging a web app To enable a Series 40 web app to be deployed to the Nokia Browser for Series 40 Proxy server the project needs

to be packed into a ZIP archive with the file extension *.wgt. WDE provides the tools to undertake this packaging.

The process for packaging web apps involves:

‒ Excluding any project files not required to run the web app on a phone.

‒ Packaging the web app.

10.1 Excluding files from the web app package All the files in a project, except those marked for exclusion and the content of the JavaScript resources folder,

are added to a web app’s installation package.

It’s recommended that you exclude files that aren’t needed to run the web app on a phone. These files might

include documentation files or raw graphics application files used to create icons or other web app graphics. For

information on including and using other files in the project, see Chapter 7.7, ‘Working with other project files’.

You exclude a file or folder from the package by activating its shortcut menu and clicking Exclude From Web App

Package. To include an excluded file, you click Include in Web App Package from its shortcut menu. This feature

enables you to keep all the files associated with the development of the web app in the same project folder.

10.2 Packaging a web app To package a web application project into its *.wgt installation package, open the project’s shortcut menu and

select Package Web app.

If there are unsaved changes present in the project’s files the Validation dialogue (see Figure 29) displays. Click

Yes to save the unsaved changes or No to validate the content currently stored on file.

Figure 29: The Validation dialogue, displayed when there are unsaved changes in the project’s files, is shown.

Page 37: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 37

If the web app validates appropriately:

‒ the console indicates that the web app was packaged, shown in Figure 30.

Figure 30: The console messages for a successful web app packaging are shown.

‒ The *.wgt file is placed in the root of the selected project, as shown in Figure 31.

Figure 31: The *.wgt file in the project folder for a packaged Series 40 web app is shown.

If the web app fails validation with errors then the console will indicate this, as shown in Figure 32, and the

Problems tab should be opened to enable the errors that require fixing to be reviewed.

Figure 32: The console messages when web app packaging was unsuccessfully are shown.

Page 38: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 38

Note: The validation process reports issues discovered by the underlying Eclipse JSDT, from its validation of JavaScript code, and reports these as Warnings in the Problems view. Such warnings will not cause validation to fail and no indication that these warnings are present is provided during the validation process. Checking the Problems view after packaging is therefore recommended, as some warnings may result in the web app failing to run correctly on some phones.

Validation will fail only when errors are found in the config.xml file as well as Mobile Web Library and geolocation API use.

Note: If a *.wgt file has already been created for the web app and an attempt is made to repackage the web app, the *.wgt file is not updated.

Page 39: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 39

11. Uploading a web app A web app is uploaded to the Nokia Browser for Series 40 Proxy server when a web app is previewed or deployed.

It’s possible to upload a Series 40 web app directly to the server without performing a preview or deployment

first. This is done using the Upload Series 40 Web app on the project shortcut menu.

After uploading a web app the web app’s URL is displayed in the console output as shown in Figure 33.

Figure 33: The URL for an uploaded web app is shown.

Page 40: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 40

12. Deploying a web app to a phone WDE provides for the deployment of *.wgt files to the Nokia Browser for Series 40 Proxy server from where it

can be run from a short URL entered in the Nokia Browser for Series 40 and, for computers with a Bluetooth

connection, launching the web app on a phone.

12.1 Preparing for deployment This section describes the action that needs to be taken before deploying a web app.

12.1.1 Setting up a Bluetooth connection

Before deploying a web app over a Bluetooth connection, ensure the target phone can be discovered by the

computer. There is no need to pair the PC and phone.

12.1.2 Installing Nokia Browser for Series 40 on a phone

Before deploying you need to ensure that Nokia Browser for Series 40 is on your phone. There are two ways in

which the browser may be available to your phone:

‒ in firmware.

‒ as a download.

12.1.2.1 Nokia Browser for Series 40 in firmware

Nokia Browser for Series 40 is being deployed to the latest Series 40 phones in firmware. For new phones Nokia

Browser for Series 40 should be available when the phone is purchased. For earlier phones, that have had their

available firmware updated to include Nokia Browser for Series 40, the browser will be available after a firmware

update. A list of these phones can be obtained from the Devices section of the Nokia Developer website.

If your phone is on the list of phones with Nokia Browser for Series 40 in firmware, but the browser isn’t on your

phone you should perform a firmware update. To do this, connect the phone to your PC through Nokia Ovi Suite.

In Nokia Ovi Suite, on the Tools menu click Software updates. Nokia Ovi Suite will detect that there is a new

version of firmware for your phone. Click Update to install the new firmware by following the

instructions provided.

Page 41: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 41

12.1.2.2 Nokia Browser for Series 40 by download

If you have a Series 40 5th Edition, Feature Pack 1 or later phone that doesn’t provide Nokia Browser for

Series 40 in firmware, you can download it by visiting download . When the download page

opens tap or select

.browser.ovi.com/get

Download

and follow the installation instructions.

Note: Bluetooth Launcher will automatically direct you to the download page for Nokia Browser for Series 40 if it isn’t on your phone.

12.1.3 Selecting a deployment method

There are two deployment options available:

‒ to deploy to a Series 40 phone over a Bluetooth connection from your development computer.

‒ to deploy manually by entering a short URL into the Nokia Browser for Series 40 on a phone.

Before deployment can be undertaken the target phone needs to be defined to WDE if Bluetooth deployment is

required or no phone defined if deployment using a short URL is to be used.

The deployment target is defined by clicking Deployment Settings on the project’s shortcut menu. The

Preferences dialogue displays with the Deployment item selected, as shown in Figure 34.

Figure 34: The Deployment settings of the project’s preferences are shown.

Page 42: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 42

12.1.3.1 Setting up for Bluetooth deployment

For a Bluetooth deployment click Search. A progress information message may display while the available

Bluetooth phones are found. When the search process is complete, your Series 40 phone can be selected from

the Select Device drop-down list, as shown in Figure 35. The name shown in this list will match the phone’s

Bluetooth name.

With your phone set, click OK to save the preferences.

12.1.3.2 Setting up for deployment using a short URL

Ensure Select Device is set to No device selected and click OK. You will receive a warning message, see Figure 36,

to indicate you have not selected any options, click No to continue and save.

Figure 36: The message warning that no phone has been selected is shown.

Note: Deployment settings are global to WDE, not specific to a project. When you switch among your projects, check that the deployment settings are appropriate before deploying from a different project.

Figure 35: Selecting a phone from the list of available Bluetooth devices is shown.

Page 43: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 43

12.2 Deploying a web app There are two deployment options available:

‒ to deploy to a Series 40 phone over a Bluetooth connection from your development computer.

‒ to deploy manually by entering a short URL into Nokia Browser for Series 40 on a phone.

12.2.1 Deploying over a Bluetooth connection

12.2.1.1 Install Bluetooth Launcher

To enable deployment over a Bluetooth connection, Bluetooth Launcher must be installed on the target phone.

The easiest way to do this is by opening www.nokia.ly/bylauncher in your Series 40 phone’s browser. After

opening the address you will be prompted to install Bluetooth Launcher.

Alternatively, Bluetooth Launcher can be obtained from its download on the Nokia Developer website.

Extract the installation files, BluetoothLauncher.jad and BluetoothLauncher.jar, from the

Bluetooth_Launcher.zip file you download. To install Bluetooth Launcher, send the Bluetooth Launcher JAD

and JAR files to your phone over the Bluetooth connection you plan to use. Alternatively, connect your phone

over a USB cable and copy the files to the phone, or copy the files to a memory card that’s then installed into

your phone.

page

Warning: Don’t attempt to install the Bluetooth Launcher using Nokia Ovi Suite, it will not successfully install the application and the app will not run on your phone.

Once the files are on the phone, return to the home screen and tap or select Show

and the Games folder will open displaying the Bluetooth Launcher app, see

Figure 37.

Figure 37: The Bluetooth Launcher app in the Games folder on a Series 40 phone is shown.

Page 44: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 44

Start Bluetooth Launcher and you will receive a message that states Bluetooth

connection successful, as shown in Figure 38.

Once the connection message has been displayed, tap OK to send the app to the

background where it will wait to detect the arrival of a deployment instruction over

the Bluetooth connection. You are returned to the phone’s home screen.

Note: When deploying your web app, you can see the Bluetooth connection request from the home screen of a Series 40 phone only.

12.2.1.2 Deploying your web app

Prior to deploying your web app return your phone to its home screen. To deploy the web app, on the project’s

shortcut menu click Deploy web app. The progress summary area displays an indicator, as shown in Figure 39.

The Deploying web app dialogue, shown in Figure 40, displays. It’s suggested that you select Always run in

background and then click Run in Background. This hides the dialogue when undertaking

subsequent deployments.

Figure 40: The Deploying web app dialogue is shown.

Figure 38: A successful run of Bluetooth Launcher is shown.

Figure 39: The status bar indicator of a web app deployment in progress is shown.

Page 45: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 45

If not already open, the Console, shown in Figure 41, displays and provides details of the web app’s deployment

to the Nokia Browser for Series 40 Proxy server and the sending of its URL to the phone over the

Bluetooth connection.

Figure 41: Progress of the web app deployment reported in the Console is shown.

Page 46: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 46

On your phone, a message will be displayed asking if Bluetooth Launcher should be started, see Figure 42. Tap or

select Start.

Figure 42: The message asking if Bluetooth Launcher should be started is shown.

Page 47: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 47

Your web app will now be launched in Nokia Browser for Series 40, as shown in Figure 43.

Note: If your phone doesn’t include Nokia Browser for Series 40, Bluetooth Launcher will display a message and give you the opportunity to download and install Nokia Browser for Series 40. Once Nokia Browser for Series 40 is installed, return to the phone home screen and redeploy the web app.

Figure 43: The News web app running on a Nokia X3-02 Touch and Type phone is shown.

12.2.2 Deploying using a short URL To deploy the web app, on the project’s shortcut menu click Deploy web app. The progress summary area

displays an indicator, as shown in Figure 44.

Figure 44: The status bar indicator of a web app deployment in progress is shown.

Page 48: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 48

The Deploying web app dialogue, shown in Figure 45, displays. It’s suggested that you select Always run in

background and then click Run in Background. This hides the dialogue when undertaking

subsequent deployments.

Figure 45: The Deploying widget dialogue is shown.

If not already open, the Console, shown in Figure 46, displays and provides details of the web app’s deployment

to the Nokia Browser for Series 40 Proxy server.

Figure 46: Progress of the web app deployment reported in the Console is shown.

When the web app has been deployed to the server, the Web App short URL for Ovi Browser dialogue displays.

This dialogue reports the generated short URL in URL, shown in Figure 47.

Figure 47: The Web App short URL for Ovi Browser dialogue displaying the URL for the web app is shown.

If you plan to invite others to test the web app, you can copy this URL and send it to your testers.

Page 49: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 49

On your phone, open Nokia Browser for Series 40 and enter the short URL, your web app is now launched in Nokia

Browser for Series 40, as shown in Figure 48.

Figure 48: The News web app running on a Nokia X3-02 Touch and Type phone is shown.

Page 50: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 50

13. Publish to Nokia Store Once you have completed the development of your web app you can find the information you need to publish it

on Nokia Store by clicking the Nokia Store icon on the WDE toolbar. This action opens the Nokia Publish web page.

Page 51: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 51

14. Help A number of features that can provide assistance with issues or provide additional information about WDE are

provided on the Help menu.

14.1 Run Network Trace If needed to support the resolution of issues with connections to the servers that provide the cloud preview of

web apps, a trace report can be obtained by clicking Run Network Trace on the Help menu. The report, a section

of which is shown in Figure 48, is then displayed in the Network Trace tab in the information area.

Figure 49: An example of the Network Trace Report is shown.

Page 52: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 52

14.2 View Error Log in Editor To assist in the diagnosis of issues encountered while using WDE, it’s possible to view the error log in the WDE

editor by clicking View Error Log in Editor on the Help menu. Figure 49 shows an example of the log.

Figure 50: An example of the error log is shown.

Page 53: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 53

14.3 View EULA If you wish to review the content of the End User License Agreement, you can do so by clicking View EULA on the

Help menu. The agreement is then displayed in a new window, as shown in Figure 48.

Figure 51: The window displaying the Nokia Web Tools EULA is shown.

Note: If the EULA is updated it will be displayed as WDE starts and must be accepted before WDE can be used.

Page 54: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 54

14.4 About Nokia WDE To see details about WDE, on the Help menu click About Nokia WDE. The main about screen, shown in Figure 50,

provides basic information about WDE. Additional information on the installed components can be obtained by

clicking the WTP, Eclipse, or Web SDK icons or by clicking the Installation Details button.

Figure 52: The About Nokia WDE dialogue box is shown.

Page 55: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 55

15. Additional Resources Additional resources to assist with Series 40 web apps development can be found from the Web section of the

Nokia Developer website. Here you will find an overview of web technology supported by Nokia and links to key

resources such as documents, code examples, tools, discussion boards for Nokia Web Tools and Nokia Browser

for Series 40 and Series 40 web apps, and wiki articles.

Page 56: Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide 56

Copyright © 2011 Nokia Corporation. All rights reserved.

Nokia and Nokia Developer are trademarks or registered trademarks of Nokia Corporation. Oracle and Java are

registered trademarks of Oracle and/or its affiliates. Bluetooth is a registered trademark of Bluetooth SIG, Inc.

Other product and company names mentioned herein may be trademarks or trade names of their respective

owners.

Disclaimer

The information in this document is provided ‘as is’, with no warranties whatsoever, including any warranty of

merchantability, fitness for any particular purpose, or any warranty otherwise arising out of any proposal,

specification, or sample. This document is provided for informational purposes only.

Nokia Corporation disclaims all liability, including liability for infringement of any proprietary rights, relating to

implementation of information presented in this document. Nokia Corporation does not warrant or represent

that such use will not infringe such rights.

Nokia Corporation retains the right to make changes to this document at any time, without notice.

Licence

A licence is hereby granted to download and print a copy of this document for personal use only. No other licence

to any other intellectual property rights is granted herein.