×
Namespaces

Variants
Actions

Become an Series 40 application developer - Part 2

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code Example
Source file: Media:DayCare.zip
Compatibility
Platform(s):
Series 40
Article
Created: adarsha_saraff (26 Jul 2012)
Last edited: hamishwillee (13 Aug 2013)

This article explains how to develop a Java ME ("native") application for Series 40 devices. The article is for absolute beginners, and also for developers who are familiar with Java ME, but want to work on Series 40.

Continuing from Become an Series 40 application developer - Part 1

Contents

Introduction

You have learnt about Series40 platform and now your are familiar with using NetBeans IDE and Nokia IDE. In here, we are going to develop first application. In this part, we will be developing an application for Series 40 classic phones with Netbeans IDE with Oracle Java(TM) Micro Edition SDK . The application will run on all Series 40 devices. We will use Nokia Java SDK 1.1 for Touch and Type Devices on NetBeans IDE and Nokia IDE for full touch devices.

Beginning With Development

The application we are going to develop is called "Day Care". This is an application for Baby Minder. Application allows her to store baby's name, Age and Date and time with the address.

Creating Project

  • Create a new JavaME Mobile Application project by pressing "Ctrl+Shift+N" keyboard shortcut.
  • Set the Project Name as "DayCare". Check Set as Main Project and uncheck Create Hello MIDlet and Click "Next" button.
Daycare 1.png

  • Make sure that Emulator Platform" is set to "CLDC Oracle Java(TM) Platform Micro Edition SDK" and Device to "DefaultCldcPhone1" and Device Configuration to "CLDC-1.1" and Device Profile to "MIDP-2.0" and click "Finish" button.

Adding MIDlet to project

Now we need to add MIDlet to our project to start developing app.

  • Create a "New Visual MIDlet" by pressing "Ctrl+N" or "File>New File".
Daycare 2.png

  • Set the MIDlet Name as "DayCare" and Package as "Daycare and click "Finish" button to create.
Daycare 3.png

Working with Components in Flow View

Adding Form and List

  • Now Drag two Form and one List to Flow ( see 1 in fig.). Select each Form and List added and change"'Title" to "Add" and "View" for Form and "Menu" for List (see 2 in fig.). Then double click on default name and change the "Object Name" equivalent to "Title" (see 3 in fig.).
  • Click and Drag to connect from "Started" to "Menu" (see 4 in fig.).
Daycare 4.png

Adding List Element to List

  • Add 4 "List Elements" to "Menu", by dragging "List Elements" form "Elements" (see 1 in fig.) into "Menu" List.
  • Rename the newly added by changing "String" filed in "Properties" (see 2 in fig.) to "Add", "View", "Help" and "About".
  • Connect "Add" and"View" to corresponding Form by dragging a line (see 3 and 4 in fig).
Daycare 5.png

Adding Commands

  • Drag "Exit Command" from "Commands" into "Menu" list (see 1 in fig.) and "Back Command" into "add" (see 2 in fig.). Connect to "Menu" list by dragging a connection between "backCommand" and "Menu" list (see 3 in fig.).
Daycare 6.png

  • Add existing "backCommand" to "view" form by right clicking on form and select "Add/New" from pop-up menu and select "backCommand" from "Add" category.
Daycare 7.png

Completing the Application Design

  • Complete the application design by adding "About" form and "Help" form. Repeat the previously done steps. Now your Flow View should like the one below.
Daycare 8.png

Working with Components in Screen view

Open "Screen View" by clicking on screen button.

add Form

  • Open "add Form" by selecting "add" from the drop down list located next to "Analyzer" button.
  • Add a "Text Filed" by dragging "Text Filed" from "Items" into form template (see 1 in fig.). Set the Label as "Name" in "Properties" window (see 2 in fig.).
  • Again add a "Text Filed" and set the Label as "Age" and Input Constraints to "Numeric" and Maximum Size to "3" (see 2 fig.).
  • Add a "Date Field" and set the Label as "Date and Time".
  • Add a "Text Field" and set the Label to "Address" and Maximum Size to "100".
Daycare 9.png

Renaming the Object

Open "Navigation" Window.

  • Find and Expand add[Form]. Expand Items[Form].
  • Right click on the textField. Select "Rename" from pop-up menu and set the name as "nameTxt".
  • Repeat the previous step for other object and set name as "ageTxt", "dateTxt" and "addressTxt" respectively.
Daycare 10.png

view Form

  • Open "view Form" from the drop down list (see 1 in fig.).
  • Add 4 "String Item" into the form template.
  • Set the the Label as "Name", "Age", "Date and Time" and "Address" respectively.
  • Rename the Objects to "nameStr", "ageStr", "dateStr" and "addressStr" respectively.
Daycare 11.png

About Form

About Form is must to publish on to Store. It should contain the following details. Application Name with exact version and Support email.

  • Open "About Form" form the drop down list next to Analyzer button.
  • Drag a "String Item" into form template. Set the Label to "DayCare v1.0" and set the Text as "Developed By: <your_name>".
  • Drag again a "String Item" into form. Set the Label to "Support" and set the Text as "<your_email_id>".
Daycare 12.png

Help Form

Help Form is must to publish on to Store. Help form should contain, detailed description of application and its usage.

  • Open "Help Form" from the drop down list next to Analyzer button.
  • Drag a "String Component" into form template. Set the Label to "DayCare" and add some help and usage string in to Text.
Daycare 13.png

Coding the things

We have done designing part. But, we need to add Commands to save the information, to navigate through them and to delete.

  • Drag "OK Command" in Flow View to "add Form" and set Label to "Save" and rename it as "saveCommand".
  • Drag "OK Command" to "view Form" and set Label to "Next" and rename it as "nextCommand".
  • Drag "OK Command" to "view Form" and set Label to Delete and rename it as "deleteCommand".
Daycare 14.png

Saving and reading data

For storing the data in phone, we use Record Store. The schema for our database will be:

ID Column 1 Column 2 Column 3 Column 4
- Name Age Date and Time Address
  • Create an integer variable called "no". This is to keep track of record currently being read.
  • Create an object of RecordStore "rs". Record Store is used to save data.
public class DayCare extends MIDlet implements CommandListener {
 
private boolean midletPaused = false;
int no = 1;
RecordStore rs = null;

Tip.pngTip: Press Ctrl+Shift+I to fix all import errors.

  • Expand Generated Method: commandAction for Displayables and perform the following steps.
  • Find the if statement for command == saveCommand and the following program statements bellow "// write pre-action user code here" to add record to record store.
 try {
rs = RecordStore.openRecordStore("DayCareDB", true); // argument 1 is the name of record store to be opened. argument 2 specifies that it should create a new record store if it does not exists.
ByteArrayOutputStream out = new ByteArrayOutputStream();
DataOutputStream dout = new DataOutputStream(out);
dout.writeUTF(getNameTxt().getString());
dout.writeInt(Integer.parseInt(getAgeTxt().getString()));
dout.writeUTF(getDateTxt().getDate().toString());
dout.writeUTF(getAddressTxt().getString());
dout.flush();
byte[] b = out.toByteArray();
rs.addRecord(b, 0, b.length); // to add record to record store
rs.closeRecordStore();
dout.close();
out.close();
} catch (Exception ex) {
}
getNameTxt().setString(null);
getAgeTxt().setString(null);
getAddressTxt().setString(null);
switchDisplayable(null, getMenu());

Tip.pngTip: Press Alt+Shift+F for Format.

  • Find the if statement for command == nextCommand and the following program statements bellow "// write pre-action user code here" to read next record from record store.
try {
rs = RecordStore.openRecordStore("DayCareDB", false);
if (no <= rs.getNumRecords()) {
byte[] b = new byte[1000];
ByteArrayInputStream inp = new ByteArrayInputStream(b);
DataInputStream dinp = new DataInputStream(inp);
rs.getRecord(no, b, 0); //to read from record store
getNameStr().setText(dinp.readUTF());
getAgeStr().setText("" + dinp.readInt());
getDatetimeStr().setText(dinp.readUTF());
getAddressStr().setText(dinp.readUTF());
dinp.close();
inp.close();
no ++;
} else {
no = 1;
}
rs.closeRecordStore();
} catch (Exception ex) {
}
  • Expand Generated Method: MenuAction and perform the following steps.
  • Find the if statement for __selectedString.equals("View") and the following program statements bellow " // write pre-action user code here" to set the "view Form". These statements reads the first record form record store.
 try {
rs = RecordStore.openRecordStore("DayCareDB", false);
if (rs.getNumRecords() != 0) {
byte[] b = new byte[1000];
ByteArrayInputStream inp = new ByteArrayInputStream(b);
DataInputStream dinp = new DataInputStream(inp);
rs.getRecord(1, b, 0); //to read record form record store
getNameStr().setText(dinp.readUTF());
getAgeStr().setText("" + dinp.readInt());
getDatetimeStr().setText(dinp.readUTF());
getAddressStr().setText(dinp.readUTF());
dinp.close();
inp.close();
}
rs.closeRecordStore();
} catch (Exception ex) {
}

Running the project

Save the file by pressing Ctrl+S. Click on Clean and Build button (keyboard shortcut Shift+F11). After build completes, click on "Run" button (keyboard shortcut F6) to run.

Daycare 15.png

Testing in RDA devices.

Snapshot RDA Device
Nokia C2-01.png Nokia C2-01
Nokia C3-00.png Nokia C3-00
Nokia C3-01.png Nokia C3-01
Nokia Asha 311.png Nokia Asha 311

Project File

File:DayCare.zip

Where to go Next

Java Developer Library
Become an Series 40 application developer - Part 3 (coming soon).

This page was last modified on 13 August 2013, at 10:56.
197 page views in the last 30 days.
×