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 over the next few weeks. Thanks for all your past and future contributions.
How to import a Nokia Asha Web App wgt file into the SDK
This article is a is a step-by-step tutorial explaining how to run or view a Nokia Asha Web app *.wgt file.
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
- 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).
- 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.
- Accept the default workspace path or create a new one, such as: C:\Users\Username\WebToolsWorkspaceTutorial.
- In the Web Tools WDE, select File | New | Import
- Browse to find the *.wgt file previously downloaded to your computer
- 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.
- The file name now appears in the name field of the import window. Click the Next button.
- Accept the default information in the “Import web app project” window. Click the Finish button.
- The application is now shown in the Project Explorer pane of the Web Tools window.
- 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.
- 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.
- 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.
- A selection menu appears. Let's choose a Full-touch device. Click the Apply button.
- Confirm that you want to reopen the web app to apply the changes.
- 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.
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
- Project summary
- Resource Information page for webappsuivisualisation (downloads *.zip file)
Link to other widget examples
For this and and other web app examples, see the following link: https://www.developer.nokia.com/Develop/Series_40/Series_40_web_apps/Code_examples/