Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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
7 9 10 12 13
3. 4. 5.
13
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.
26 28
28 28 29 29 30 31 32 32
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
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 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.1
WDE features
Function
Help
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
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
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 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.
12
Figure 7: WDC, which provides access to many web app development resources, is shown.
3.1
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
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.
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
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.1
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.
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
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
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.
27
7.1
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.
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.
29
7.5
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.
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
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
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.
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
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
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.
35
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
39
12.1.1
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
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 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
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
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
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.
12.1.3.2
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.1
12.2.1.1
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.
12.2.1.2
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.
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.
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.
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
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.
51
52
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
54
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