Create and code your project

Web Developer Environment offers a number of templates you can use to create Nokia Asha web apps easily. These templates range from the Basic web app template, which contains the core web app files with no functionality, through a selection of templates offering basic UI constructions to fully functional web apps, among these the Videos browsing project template offers a working web app to browse videos. You can work with web app examples or a web app project you have already created as well. For more details on importing web apps, see Importing a web app or web app project in the Nokia Asha web app developer’s library.

Step-by-step — Create and code your project

Step 1 — Create your web app

For this guide the fully working Videos browsing project template is used to create your first web app.

To create the Nokia Asha web app project, on the File menu point to New and click Nokia Asha web app (wgt) (Figure 1).

Figure 1. Selecting the Nokia Asha web app (wgt) option on the File menu

The New Nokia Asha web app dialogue displays (Figure 2). In the Nokia Asha web apps folder, click Videos browsing project and then Next.

Figure 2. Selecting a template for a new Nokia Asha web app

The first page of the New Videos browsing project dialogue displays (Figure 3).

Figure 3. The New Videos browsing project dialogue, where details of the web app project are defined

Enter the project name, MyVideos, in Project Name. When you leave Project Name, the wizard automatically populates Display Name (the name that will be displayed in the phone’s UI), Unique Identifier and Short Name. You can change these fields as desired.

Note: For more information on the display and short names, see the Define a name for your web app section of Publishing your web app in the Nokia Asha Web App Developer’s Library.

Now set Version # to 1.0.

Click Next and the Videos browsing project settings page displays (Figure 4). This page of the dialogue enables the setting of the main HTML file name that will be used in the project (note that a web app can contain one HTML file only), the number of videos to be listed, and information about the web app and you, its author. Update the default information if you wish and add your email address in Author Email. Apart from entering your email address, these details can be left unchanged.

Figure 4. The Videos browsing project settings page that enables the setting of web app variables

Click Finish.

The Save author details dialogue displays (Figure 5). To save the values you entered in Author and Author Email, so they are automatically added to new web app projects, click Yes.

Figure 5. The Save author details dialogue

The Create Project dialogue displays (Figure 6), showing the progress of the project’s creation.

Figure 6. The Create Project dialogue, displaying the progress of project creation

For more information on the new project dialogues, see Creating a web app project in the Nokia Asha Web App Developer’s Library.

Once the project has been created, it’s opened in Project Explorer.

Step 2 — Code your web app

The Videos browsing project template provides a fully working web app, so you don’t need to edit this web app. For your own web app you would now add the code to provide the UI and functionality your web app needs — using the UI Designer to drag-and-drop UI components provided as code snippets to build your UI and code completion for your HTML, CSS, and JavaScript. For information on editing your web app’s content, see the Editing and code completion section of the Nokia Asha Web App Developer’s Library.

Now you can run and test your web app in the Web App Simulator ›