Building a J2ME Application in NetBeans 4.1, Page 2
Adding the Components
To add the components to your summary screen, follow these steps:
- On the screen designer view, find the StringItem component in the palette and drag it over to the top of the empty screen.
- stringItem1 should be created. This is going to be your title, so click on the stringItem1 label and an edit box should appear. Type in Mileage Calculator to replace stringItem1.
- For the <Enter Text> part, select that so that you get an edit box, and then delete it.
- Now, add another StringItem by dragging it onto the screen. Note that when you drag it over the screen you will see a red dashed line appear to show where that component is going to go; you can use this to insert it between existing components if you like. For now, just add all components underneath the last one.
- The fields you are adding now will be used programmatically, so it is a good idea to rename the instance as well as changing the text. Find the Instance Name in the properties and change it to totalMileage.
- Following the same steps as for the first component you added, change the stringItem2 label to Total Mileage, and the <Enter Text> field to 0.
- Repeat adding components for:
- Average MPG (instance name avgMpg, label Average MPG, value 0)
- Average Cost/Mile (instance name avgCostPerMile, label Avg. Cost/Mile, value 0)
- When finished, your screen should look something like this (I have resized mine down to 128x128 as that is the size of my phone display):
- Save everything.
Once you have completed these steps, you can run the application to see what it looks like. It won't do anything except show the screen you have created, but you will get to see your application run for the first time, and get an idea of how the emulator works.
Click the debug button in the toolbar; after a few seconds, a window containing a picture of a phone should appear. You should see MileageMidlet highlighted in the menu, and a label saying "Launch" over the right softkey of the phone. Click the softkey and you should see your new screen appear.
When finished, close the window (or choose exit from the menu). You may need to do this twice because the first time will quit your app, and the second will quit the emulator.
The Initialize Page
Although it will probably only be used once for your application, you need a page to set up the initial mileage on the vehicle when you start using it. This screen should show a reminder to only initialize the mileage after the vehicle has been filled with Gas (otherwise, the initial calculations will be thrown off). It should also allow the user to enter the current mileage, and reset all of the other totals to 0.
- On the Flow Design view, right-click on Screens in the Inspector and add a new Form.
- Drag it to where you want it on the Flow Design, and rename it to InitializeForm.
- Double-click to go to the screen designer.
- Add a StringItem, and set the label to "Enter Starting Mileage."
- For the value of the string item, type in "Reminder - you should do this only once, and after filling the gas tank!"
- Drag a TextField in under this notice.
- Change the Label to "Starting Mileage" and the Instance Name to startingMileage.
- Click on the ... button next to Constraints in the properties pane.
- Select Numeric from the popup list; this tells the component to accept only numeric input (and on a phone, makes the keys only enter numerics, saving time over having to cycle through T9 letter entry). Click OK.
- Save all.
Don't worry about the action code behind the scenes. You will write all that in a moment.
The Add Details Page
Finally, we need a new page to add details when you add fuel to the vehicle. This page should take the current mileage of the vehicle, along with the number of gallons and the cost of the gas:
- Again, from the Flow Design view, add a new Form.
- Rename it to AddDetailsForm.
- Double-click to edit the new screen
- Add a StringItem, change the label to "Add Details," and clear the value field.
- Drag a TextField in, change the instance name to currentMileage, and the Label to "Current Mileage."
- Change the constraints to numeric (see above).
- Add another Text Field, instance name gallons and label "Gallons."
- Add another Text Field, instance name cost and label "Cost."
- Remember to set the constraints for all three fields to be numeric.
- Save all.
Okay, you now have your three screens in the application, but no way to get between them, not to mention that there is no code at all to do anything useful.
First, hook up the screens:
Setting up Screen Navigation
Setup for navigating between screens is accomplished from the Flow Design view, so switch back to that.
Actions and navigation in a Java ME app are accomplished by creating commands, and then hooking those commands up to code and navigation events. This will make more sense after you have added a command.
The first command you will add to the summary page will be to add new details. This will be the default action, because it is the most likely thing you will want to do with your application. There are hints you can give to the device about this being a default, even though you can't directly control how the device will make the option available. In your case, you will add this command as an "OK" command in the hope that it will get a soft button of its own (again, this will be up to the device, but hopefully this hint will help).
To create your Add Details command:
- In the Flow Design, find the Ok Command in the palette and drag it over the top of the SummaryForm.
- When you drop it, you should see a new command on the right side (with a red dot next to it) called OK.
- You want to change the name to Add Detail, so look in the Inspector and expand the SummaryForm -> Assigned Commands node (if it is not already visible). You should see an okCommand1 under the assigned commands. Select it.
- In the properties, change the label to "Add Details."
- Now, you want the Add Details command to take you to the AddDetailsForm, so drag a line from the red dot next to the Add Details command, to the red dot to the left of the AddDetailsForm. This establishes the navigation to that form when the Add Details command is used.
You also want to get back to the main summary form from your details form, and there are two ways you might want to do this. One is to enter details and click OK, whereupon the totals and averages of the summary are updated; the other will be to cancel out of the screen (if you hit it by accident), in which case you should return without making any changes.
To add these two cases:
- Drag an Ok Command and then a Cancel Command from the palette onto the AddDetailsForm.
- Both of these commands can be left with the default labels because they are descriptive enough.
- Now, from both of the red navigation dots next to these commands, drag lines to the red dot to the left of the SummaryForm (indicating that either one goes back to the summary form).
- You will notice that you have not added any code to update the totals for the OK command. Don't worry; you will do that below.
Finally, you still need to hook up the Initialize screen:
- Drag an Ok Command from the palette over the Summary Form and drop it.
- Change the label to "Initialize" in the command properties.
- Also, as a precaution, set the Priority field to 2. This will ensure that if the device puts the Add Detail and Initialize options in the same menu, the Add Detail will be first in the list and selected, rather than Initialize.
- Drag a line between the Initialize navigation dot and the InitializeForm navigation dot.
- As for the AddDetailsForm, add OK and Cancel operations to come back to the Summary Form.
Okay, the navigation part of your application is set up. Start up the debugger again, and try navigating between the various screens. Even though the app doesn't do anything yet, you can see it taking shape.
Here is what my Flow Design looks like after adding the above navigation: