Create and code your project

With the SDK installed and the NetBeans IDE configured, you can start creating your app. This page guides you through creating a project in the NetBeans IDE and using the NetBeans tools to define the flow and forms in your app and then add code.

Please note that the video shows the Nokia Asha SDK 1.1 — the steps and actions are still applicable to the 1.2 SDK.

  1. Create a new Java ME Mobile Application using the New Project option on the File menu — make sure the platform is Nokia Asha SDK 1.2.
  2. Define your app’s flow in Flow Designer.
  3. Define your app’s screens in Screen Designer.
  4. Add custom code to your app.

Step-by-step – Create and code your project

Step 1 — Create a project for your app

A NetBeans project contains the information about your app’s source files and the Java ME environment it’s being created for. To create a project, on the File menu click New Project or use the Ctrl+Shift+N keyboard shortcut. The New Project dialogue displays. Click Java ME (which is in the Categories list) and then Mobile Application (from the Projects list), as shown below.

Java Getting Started figure 4

Click Next.

The second step of the New Project wizard displays. Name the project and choose a location in which to store it, as shown below.

Java Getting Started figure 5

The third step of the wizard displays, showing the app’s target platform. Nokia Asha SDK 1.1 should be shown in Emulator Platform and Device, if not choose Nokia Asha SDK 1.1. Now, under Device Profile ensure MIDP 2.1 is selected.

Java Getting Started figure 6

Click Next.

The final step of the wizard displays. This More Configurations Selection step enables additional configurations to be added to a project. For your first app, no additional configurations are needed, click Finish to complete the New Mobile Application wizard and create your project.

Step 2 — Define you app’s flow

With your project created, the NetBeans IDE displays the Flow Designer in the editor, as shown below.

Java Getting Started figure 7

A single form has been added to your project, with start and exit flows. You can add additional items by dragging elements from Displayables, located under Palette (in the top right-hand pane of the IDE), into the flow design. For example, selecting and dragging in the form displayable adds new screens to your app. Then Commands and Flow items can be added, by dragging them from the Palette also.

For this tutorial, you don’t need to add anything to the basic flow created by The NetBeans IDE.

Step 3 — Build your user interface

The project’s form includes basic Hello World style content. Double click the form item to open Screen Editor to edit the content of this screen, as shown below.

Java Getting Started figure 8

As with Flow Designer, you add content to the screen by dragging components from Palette into the Device Screen area of the editor and then editing these components to achieve the desired functionality. Add a Ticker (highlighted in the image above) by dragging it from Displayables into the device screen. Once the ticker has been added, you can double click it in Device Screen to add the message ‘Hello Nokia’, as shown below.

Java Getting Started figure 9

Press return to save the message.

Step 4 - Add custom code to your app

The NetBeans IDE automatically generates the code to implement the features you add using the flow and screen designers. However, for most apps you will want to add your own code to implement its features. To add your code to that generated by NetBeans click the Source tab, and your app’s code is displayed, as shown below.

Java Getting Started figure 10

When you first open the Source tab, the code generated by the flow and screen designers is in minimised code blocks labelled Generated …. You can expand these code blocks to see the generated code in detail; note that the generated code is highlighted in grey. This generated code cannot be changed in the Source tab. Your app-specific code can be inserted in the sections of the code that are not highlighted. There is no need to add any code to this example, but you have seen where it can be added in your next project.

You’ve now created and customised a simple Hello World-style app. Save the project by clicking Save on the File menu (or by using the keyboard shortcut Ctrl+S).

Now you can build the app and run it in the emulator ›