Thursday, 20 October 2011

Simple Steps That Will Teach You How To Create A Simple Interest Calculator For Your Mobile Phone Using Java And NetBeans

Step 1: Launch Your NetBeans Application
Locate your NetBeans Integrated Development Environment (IDE) and double-click (or right-click it and click on Open) to launch/open the application.

An image of how the NetBeans IDE looks like.
Step 2: Create A New Project
a. Locate and click on the File menu item on the menu bar of the NetBeans IDE.

b. Click on New Project from the drop down menu that appears in order to open the 'New Project Wizard'.

c. Choose Project: Within the New Project Wizard, from the Categories option (on the left of the Wizard), select Java ME (i.e. Micro Edition). After that, select Mobile Application from the Projects Pane (which is on the right of the Wizard) as is shown in the figure below.

d. Name And Location: After this, click on the 'Next >' button to move on to the next stage where you can specify the name and location of your project.  Uncheck the Create Hello MIDlet (this is just a default mobile application that might interfere with what you are about to do) as is depicted in the figure below and click on the Next button to proceed.



e. Default Platform Selection: Choose a default Emulator Platform for all your mobile applications and select the type of Mobile Device (emulator) you will want to use in dipslaying the mobile applications for this particular project, on your Computer.

f. Device Configuration and Device Profile: Select CLDC-1.1 ( i.e. Connected Limited Device Configuration) and  MIDP-2.1 (i.e. Mobile Information Device Profile) in order to have the best and/or all of the resources for your project (as is shown below). Click on the Next button to proceed.


g. Mobile Configurations Selection: Expand the 'Configuraton templates provided by installed CDLC platforms' node. After that, expand the 'Java(TM) Platform Micro Edition SDK 3.0' node and select the type of template you want for your mobile applications (as is shown in the figure below). Click on the Finish  button when you are done.




Step 3: Add A New File
a. Locate and click on the File menu item on the menu bar of the NetBeans IDE.

b. Click on New File from the drop down menu that appears in order to open the 'New File Wizard'.

c. Choose Project: Within the New File Wizard, select the name of your newly created project (i.e. if it is not already selected).From the Categories option (on the left of the Wizard), select MIDP. After that, select MIDlet from the 'File Types' Pane (which is on the right of the Wizard) as is shown in the figure below. Click next to proceed.




d. Name And Location: At the next stage, specify the name of your MIDlet and MIDlet Class(which could be the same as that of the MIDlet). For the sake of this tutorial, I shall name this MIDlet and MIDlet Class, simpleInterestApp, as is depicted in the figure below. Click on the Finish button to launch the Code Editor where you can begin with the coding.





Step 4: Start Coding
Within the Code Editor, you realise that the following codes are presented to you by default:


Line 1:  import javax.microedition.midlet.*;
Line 2:  /**
Line 3:  * @author Mr. Bryte  (this is just the username of the machine you are working with)
Line 4:  */
Line 5:  public class simpleInterestApp extends MIDlet {
Line 6:    public void startApp() {
Line 7:   }
Line 8:
Line 9:    public void pauseApp() {
Line 10:    }
Line 11:  
Line 12:    public void destroyApp(boolean unconditional) {
Line 13:    }
Line 14: }

 a. Line 1: After Line 1 of the codes above:
Import another package for the User Interface as illustrated below:

import javax.microedition.lcdui.*;

/*lcdui (liquid crystal display-user interface)
The star (*) at the end is synonymous to the word, All. Thus, we are importing all the components
of the lcdui class.
*/

b. Line 5: Add the following codes to Line 5 of the codes above (i.e. after MIDlet):
 implements CommandListener

//The CommandListener helps the application to listen to the commands of the user (i.e. whenever a
 //button is clicked). In mobile applications, buttons are called commands.

After doing that, Line 5 should look somewhat like the codes below:

public class simpleInterestApp extends MIDlet implements CommandListener {


c. After Line 5: Declare the scope of the components to be used:
Add the codes below, after Line 5.

//Declaring the private scope of the Display to be used (remember lcd?) with name, myDisplay
    private Display myDisplay;

//Declaring the private scope of the  TextFields to be used with names, txtPrincipal, txtTime, etc
    private TextField txtPrincipal;
    private TextField txtTime;
    private TextField txtRate;
    private TextField txtSimpleInterst;

//Declaring the private scope of the Form with name, myForm
    private Form myForm;

//Declaring the private scope of the Commands to be used with names, cmdOk and cmdExit
private Command cmdOk;
    private Command cmdExit;



d. Create a construct of the simpleInterestApp class:
 Right after the declarations above, you'll have to create a construct of the class you are working with (as shown below).

public simpleInterestApp( )
    {
}


e. Set the properties of the controls within the construct above:
At this stage, you then set the properties of the controls whose scope you have just declared. This is done within the simpleInterestApp( ) construct. Your code should look like the ones below:


    public simpleInterestApp()
    {
//Creating a new instance of all the controls and setting their properties
    myDisplay = Display.getDisplay(this);

//myForm= new Form("This represents the Title of the form");

    myForm= new Form("Simple Interest Calculation");
   
// txtPrincipal= new TextField("This represents the Label of the TextField:","The default value of the
//TextField",The size of this TextField, The type of data the TextField can hold; DECIMAL is the
//type for all numeric values);
    txtPrincipal= new TextField("Principal:","",50,TextField.DECIMAL);
   
    txtTime= new TextField("Time:","",50,TextField.DECIMAL);
   
    txtRate= new TextField("Rate:","",50,TextField.DECIMAL);
   
     txtSimpleInterst= new TextField("Simple Interest:","",50,TextField.UNEDITABLE);
   
//cmdExit=new Command("The Text property of the Command (button)",Command.EXIT,the position of the command within the menu item or on the screen);
    cmdExit=new Command("Exit",Command.EXIT,1);
        cmdOk=new Command("Ok",Command.OK,2);
       
        //Adding the controls to the form
        myForm.addCommand(cmdOk);
        myForm.addCommand(cmdExit);
        myForm.append(txtTime);
        myForm.append(txtPrincipal);
        myForm.append(txtRate);
        myForm.append(txtSimpleInterst);
      
//Setting the Form to listen to the commands of the user. Thus, the button clicks.
        myForm.setCommandListener(this);
    }
  


f. Line 6: Initialise the application
Type the codes below after Line 6.

 myDisplay.setCurrent(myForm);

 Thus, the below codes:

 public void startApp() {
        myDisplay.setCurrent(myForm);
    }


g. After Line 13: Activate the Commands (buttons)
At this stage, we will write what the buttons (commands) will do when they are clicked (or fired).
Add the following codes, after Line 13:

public void commandAction(Command c,Displayable d)
    {
        if(c==cmdExit)
        {
            destroyApp(false);
            notifyDestroyed();
        }
        else if(c==cmdOk)
        {
//Declaring the respective variables
        int time,principal,rate,simpleInterest;
       
//Converting the values in the Time,Principal,and Rate TextFields to integer and assigning them to the
//time,principal, and rate variables respectively
        time=Integer.parseInt(txtTime.getString());
        principal= Integer.parseInt(txtPrincipal.getString());
        rate= Integer.parseInt(txtRate.getString());
       
        simpleInterest=(principal*time*rate)/100;
       
//Converting the value in the simpleInterest variable to String and assigning it to the
// SimpleInterest TextField
        txtSimpleInterst.setString(String.valueOf(simpleInterest));
      
        }
    }



Step 5: Run the application

When you are done typing the codes above, simply press F6 to launch the application.

The application should look somewhat like the image below:



Step 6: Changing the look of your application
a. Locate and click on the Run menu item on the menu bar of the NetBeans IDE.

b. Click on Set Project Configuration from the drop down menu that appears.After that, click on  Customize from the cascaded menu that will appear.

c. Choose a template
Navigate the dialog box that appears (as it is in Step 2g) and  choose DefaultFxTouchPhone1 (or any template of your choice). Click on Ok when you are done (please do not make any other changes unless you know exactly what you are doing) and run the application again. Your application should look somewhat now like the image below:



Step 7: Happy Coding
Hope this post was helpful to you? Please leave your comments (suggestions/recommendations/questions/contributions) below. Thank you.



5 comments: