Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

How to import a Nokia Asha Web App wgt file into the SDK

From Wiki
Jump to: navigation, search

This article is a is a step-by-step tutorial explaining how to run or view a Nokia Asha Web app *.wgt file.

Article Metadata
Code ExampleTested withCompatibility
Series 40
Created: CompassResearch (11 Apr 2013)
Last edited: hamishwillee (01 Nov 2013)



I was confused at first about why I could not run the web app example file in the Nokia SDK 2.0 for Java emulator, which I had been using for development. I decided to create this short tutorial to save others some grief and time.

To run or view a *.wgt web app file in a simulator, Nokia Web Tools must be used, not the Nokia SDK 2.0 for Java. This tutorial shows step-by-step how to start the Nokia web tools (Web Development Environment) after it has been installed and how to import a *.wgt web app file, and run it from the WDE in the simulator.

Step by Step

  1. Download the *.wgt file corresponding to the web app widget that you want to run (not a source or archive file file - .zip, .js, .css, .html, .xml).
  2. Start the Web Tools. In Windows 7 do this by pressing the Start button in the lower left corner of the computer display. Then click All Programs | Nokia Web Tools 2.3.0 | Nokia Web Development Environment.
  3. Accept the default workspace path or create a new one, such as: C:\Users\Username\WebToolsWorkspaceTutorial.
    Specify Workspace
  4. In the Web Tools WDE, select File | New | Import
  5. Browse to find the *.wgt file previously downloaded to your computer
  6. A standard file selection window will open. Find and select the *.wgt file of interest and click the Open button at the lower right corner of the window.
    Select file to import
  7. The file name now appears in the name field of the import window. Click the Next button.
    Import field populated
  8. Accept the default information in the “Import web app project” window. Click the Finish button.
    Name the project
  9. The application is now shown in the Project Explorer pane of the Web Tools window.
    Project Explorer pane
    Click on the application in Project Explorer. Notice that in the left toolbar, the Cloud preview icon with the green Run button (white triangle inside a green circle overlaying a blue cloud) is no longer grayed and is now active. The Local Preview icon with the green Run button (white triangle inside a green circle overlaying a computer display icon) is also now active.
    Preview icons active
  10. Click on the Local Preview button to see the imported application in the local simulator or click on the Cloud Preview button to upload the application to the Nokia web app server, simulating a live connection. An icon appears in the top right corner of the simulator to indicate whether Cloud or Local simulation is being shown.
    Simulator preview - Touch and Type
  11. Shown above is a simulation of a Nokia Series 40 Touch-and-Type device. To change to a Non-Touch or Full-Touch device, click on the Device button in the floating toolbar which appears above the simulator.
    Select Device from menu bar
  12. A selection menu appears. Let's choose a Full-touch device. Click the Apply button.
    Select a device
  13. Confirm that you want to reopen the web app to apply the changes.
  14. The simulator disappears and restarts in the new mode, now as a Series 40 Full-touch device. If it fails to change to the new simulated device the first time, close the WAS simulator by clicking on the 'X' close button in the top right corner of the floating Simulator Tool Bar. Next, start again from step 10 above. The second time, it worked for me.
    Simulator preview - Full Touch

Enjoy exploring your newly imported web app!

Links regarding the example widget

Here are some links to more information about this particular widget, webappsuivisualisation.wgt

Link to other widget examples

For this and and other web app examples, see the following link:

This page was last modified on 1 November 2013, at 06:11.
67 page views in the last 30 days.