Assemble the GUI

---

You will now begin to assemble the your tip calculator application. This application consists of one screen, which displays the information the user entered as well as the results. The type of display which will be used to create this application is a Form.

1. In the MIDlet composer, make sure that the TipCalculator node is expanded in the Parts tree. You will see the nine built-in nodes of the MIDlet. These nodes cannot be moved or deleted. The last node, 'Display', is where all screens which will be added to the MIDlet will be dropped.
2. On the Mobile Devices Palette, make sure that the first page, 'Displayables', is visible. (If not, click the mouse button on the 'Displayables' Tab.)
3. You will see icons for all of the basic screen types. Click the fourth icon, named 'Form', with the mouse and drag the form to the Display node. The tree will display a cancel icon if an attempt is made to drag the form to an inappropriate place. If the drag is valid, a line appears in the tree showing where the part will appear. Release the mouse to create the new part at that place in the tree.
4. If the Form is properly dragged to the tree, it will appear under Display in the tree, and also in the Emulator as a new screen with a title similar to form0. If the Form was dropped into the recycling bin, it may be dragged to the Display node. In this case, the button Display this Form, located on the property sheet of the Form, must be pressed to show it in the emulator.
5. In the property sheet of the form, change the Title to 'Tip Calculator'. Note that as you do this, the title in the Emulator is automatically updated.

Next we will add some items to the form which will let users add the information the tip calculator needs for its calculations. There will be two textFields, which are areas to enter text, and a StringItem to display the calculations.

6. Click on the 'Form Items' tab of the Palette.
7. We will now place the TextFields for our application. Click the 'TextField' icon in the Mobile Devices Palette, and drag it to the form in the Parts tree. Note that the TextField can only be dragged underneath the form. When you have succeeded, you will have a new part which will have a name similar to 'textField1' in the Parts tree and in the Emulator.
8. Drag another TextField to the form in the Parts tree. It's not important whether this part goes before or after textField1. When you have finished, a new part named 'textField2' will be created.
9. Finally, drag a StringItem underneath the two textFields. If you initially create it above one of the textFields, or in the recycling bin, you should move it until it is the third item underneath the form in the Parts tree.