Nokia Web Tools Web Developer Environment Guide

Web Developer Environment Guide
Document created on 25 October 2011 Version 1.1
Table of contents
1. 2. Introduction
1.1 1.2 2.1 2.2 2.3 2.4 3.1 4.1 4.2 5.1 5.2 5.3 Nokia Web Tools Content WDE features The Web Tools perspective Menu options Toolbar Reopening Web Developer Channel Choosing your own workspace Web Apps preferences
6 6
The WDE interface
7 9 10 12 13
3. 4. 5.
Web Developer Channel
13
Setting Web Developer Environment preferences Creating a web app project
14 17 18 22 24 25 27
14 17
Creating a new web app project from a template Importing an existing web app or web app project 5.2.1 Import rules Creating a project from a sample Viewing project content in Explorer or Finder Using the on-screen keyboard Code completion Code completion preferences config.xml code-completion Updating the runtime version Importing an add-on library Inserting a code snippet Working with other project files
6. 7.
Overview of a web app project

6.1 7.1 7.2 7.3 7.4 7.5 7.6 7.7 7.8
26 28
28 28 29 29 30 31 32 32
Editing and code completion
8. 9. 10. 11. 12.
Previewing and testing a web app Validating a web app Packaging a web app
10.1 Excluding files from the web app package 10.2 Packaging a web app
34 35
36 36
36 39
Uploading a web app Deploying a web app to a phone

12.1 Preparing for deployment 12.1.1 Setting up a Bluetooth connection 12.1.2 Installing Nokia Browser for Series 40 on a phone 12.1.2.1 Nokia Browser for Series 40 in firmware 12.1.2.2 Nokia Browser for Series 40 by download 12.1.3 Selecting a deployment method 12.1.3.1 Setting up for Bluetooth deployment 12.1.3.2 Setting up for deployment using a short URL
40
40 40 40 40 41 41 42 42
12.2 Deploying a web app 12.2.1 Deploying over a Bluetooth connection 12.2.1.1 Install Bluetooth Launcher 12.2.1.2 Deploying your web app 12.2.2 Deploying using a short URL
43 43 43 44 47
13.
Help
13.1 13.2 13.3 13.4
Run Network Trace View Error Log in Editor View EULA About Nokia WDE
50
51 52 53 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 3
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 projects 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 projects 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
Change history
7 April 2011 25 October 2011 1.0 1.1 Initial document release Updated to describe the features of Nokia Web Tools 1.5
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.
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 youre 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
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.
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 apps 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.
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.
10
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.
11
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.
12
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 its closed during a session, it can be reopened from the WDE toolbar by clicking the WDC icon.
13
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 users 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 youve chosen not to prompt for workspace selection each time WDE starts, you have two options for selecting an alternative location.
14
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 youve 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.
15
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.
16
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.
17
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.
18
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).
19
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 doesnt have to be the same as the web apps 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 apps 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]).
20
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 phones 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 Developers 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 apps 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.
21
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.
22
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 doesnt have to be the same as the web apps 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 apps 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.
23
5.2.1
Import rules
When a web app or project is imported its 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 isnt a valid ZIP file or doesnt contain the config.xml file in its root. for packaged web apps and projects: the config.xml isnt well formed. a well formed config.xml file doesnt 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.
24
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 samples shortcut menu or clicking the import sample as a project button on the tabs tool bar, as shown in Figure 19. preview the sample in WAS by clicking Preview sample on the samples 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.
25
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 Developers Guide and API Reference, available in WDC. Note: The Mobile Web Library provided for Series 40 web apps isnt packaged in your web apps *.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. Figure 19: The contents of a typical Series 40 web app project are shown.
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.
26
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 computers 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.
27
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 Developers Guide and API Reference which is available in WDC.
7.1
Using the on-screen keyboard
The computers built in on-screen keyboard, see Figure 21, can be opened from WDE to enable the editing of a web apps 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.
28
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. Youll 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 doesnt 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.
29
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.
30
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 projects 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.
31
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. Its therefore important to ensure the snippets 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 its 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 projects workspace folder as well as by copying and pasting or dragging and dropping the files into Project Explorer.
32
Once in the projects 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 doesnt open, open the files shortcut menu and click Open with.
33
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 projects 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 apps 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.
34
9. Validating a web app

WDE provides validation of a web apps 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 projects shortcut menu. If there are unsaved changes present in the projects 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 perspectives 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.
35
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 apps installation package. Its recommended that you exclude files that arent 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 projects shortcut menu and select Package Web app. If there are unsaved changes present in the projects 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 projects files, is shown.
36
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.
37
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.
38
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. Its 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 apps URL is displayed in the console output as shown in Figure 33.
Figure 33: The URL for an uploaded web app is shown.
39
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 isnt 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.
40
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 doesnt provide Nokia Browser for Series 40 in firmware, you can download it by visiting download.browser.ovi.com/get. When the download page opens tap or select 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 isnt 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 projects shortcut menu. The Preferences dialogue displays with the Deployment item selected, as shown in Figure 34.
Figure 34: The Deployment settings of the projects preferences are shown.
41
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 phones Bluetooth name.
Figure 35: Selecting a phone from the list of available Bluetooth devices is shown.
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.
42
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
12.2.1.1
Deploying over a Bluetooth connection

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 phones browser. After opening the address you will be prompted to install Bluetooth Launcher. Alternatively, Bluetooth Launcher can be obtained from its download page 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 thats then installed into your phone. Warning: Dont 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.
43
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 phones 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.
Figure 38: A successful run of Bluetooth Launcher is shown.
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 projects shortcut menu click Deploy web app. The progress summary area displays an indicator, as shown in Figure 39.
Figure 39: The status bar indicator of a web app deployment in progress is shown.
The Deploying web app dialogue, shown in Figure 40, displays. Its 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.
44
If not already open, the Console, shown in Figure 41, displays and provides details of the web apps 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.
45
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.
46
Your web app will now be launched in Nokia Browser for Series 40, as shown in Figure 43. Note: If your phone doesnt 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 projects 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.
47
The Deploying web app dialogue, shown in Figure 45, displays. Its 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 apps 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.
48
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.
49
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.
50
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.
51
14.2 View Error Log in Editor

To assist in the diagnosis of issues encountered while using WDE, its 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.
52
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.
53
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.
54
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.
55
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.
56

Nokia Web Tools Web Developer Environment Guide

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Nokia Web Tools Web Developer Environment Guide

Uploaded by

Copyright:

Available Formats

Web Developer Environment Guide

Document created on 25 October 2011 Version 1.1

The WDE interface

Web Developer Channel

Setting Web Developer Environment preferences Creating a web app project

Overview of a web app project

Editing and code completion

8. 9. 10. 11. 12.

Uploading a web app Deploying a web app to a phone

Web Developer Environment Guide

Web Developer Environment Guide

Web Developer Environment Guide

Web Developer Environment Guide

Nokia Web Tools

Web Developer Environment Guide

2. The WDE interface

WDE offers the features defined in Table 1.

Menu File Window

Project Explorer shortcut menu

Web Developer Environment Guide

Menu File Window Help Project Explorer shortcut menu

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

Web Developer Environment Guide

2.2 The Web Tools perspective

Figure 1: The Web Tools perspective is shown.

Web Developer Environment Guide

Web Developer Environment Guide

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

Web Developer Environment Guide

Figure 6: The WDE toolbar is shown.

Web Developer Environment Guide

3. Web Developer Channel

Reopening Web Developer Channel

Web Developer Environment Guide

4. Setting Web Developer Environment preferences

4.1 Choosing your own workspace

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

Web Developer Environment Guide

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

Web Developer Environment Guide

Web Developer Environment Guide

4.2 Web Apps preferences

Figure 11: The Web Apps preferences are shown.

Web Developer Environment Guide

5. Creating a web app project

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

Creating a new web app project from a template

Web Developer Environment Guide

Web Developer Environment Guide

Web Developer Environment Guide

Web Developer Environment Guide

5.2 Importing an existing web app or web app project

Web Developer Environment Guide

Web Developer Environment Guide

Web Developer Environment Guide

5.3 Creating a project from a sample

Figure 17: The Samples tab is shown.

Web Developer Environment Guide

6. Overview of a web app project

Web Developer Environment Guide

6.1 Viewing project content in Explorer or Finder

Web Developer Environment Guide

7. Editing and code completion