Nokia Web Tools Web Developer Environment Guide

  • Published on
    23-Oct-2014

  • View
    49

  • Download
    7

Embed Size (px)

Transcript

Web Developer Environment Guide

Document created on 25 October 2011 Version 1.1

Table of contents1. 2. Introduction1.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 6

The WDE interface

7 9 10 12 13

7

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 project6.1 7.1 7.2 7.3 7.4 7.5 7.6 7.7 7.8

26 2828 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 app10.1 Excluding files from the web app package 10.2 Packaging a web app

34 3536 36

36 39

Uploading a web app Deploying a web app to a phone12.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

4040 40 40 40 41 41 42 42

Web Developer Environment Guide

2

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.

Help13.1 13.2 13.3 13.4

Run Network Trace View Error Log in Editor View EULA About Nokia WDE

5051 52 53 54

14.

Additional Resources

55

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

FiguresFigure 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

Web Developer Environment Guide

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

Web Developer Environment Guide

4

Change history7 April 2011 25 October 2011 1.0 1.1 Initial document release Updated to describe the features of Nokia Web Tools 1.5

Web Developer Environment Guide

5

1. IntroductionNokia 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.

Web Developer Environment Guide

6

2. The WDE interfaceWDE 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

Web Developer Environment Guide

7

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.

Web Developer Environment Guide

8

2.2 The Web Tools perspectiveWDE 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.

Web Developer Environment Guide

9

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