If you want to keep this tutorial on the screen as you step through it, you might prefer this version with pictures. In either case, please don't just follow the steps mechanically; think about what you are doing as you go.

In this tutorial we create a simple applet with one "Swap" button and two text areas. Only one of the text areas is editable. Clicking the Swap button swaps the text between the two areas. Since this is an applet, we use only AWT components.

1. Start Forté for Java CE.
   1. Click on  Start -> Programs -> Course-Specific Software -> Cis -> Forte for Java 3.0 -> Forte for Java CE.
   2. Wait. In the labs, startup time is very slow--about two minutes. Most of the wait is due to downloading code from the server; your own computer should be faster.
      
      
2. In the Welcome to Forte for Java window, it says: "To get started, choose a task below." Click New.
   
   
3. The next window is the Template Chooser, in the Template Wizard. Open AWT Forms and click on Applet, then on the Next > button.
   
   
4. In the Target Location window, change the Name <default name> to FirstApplet, choose a filesystem, then click Next >.
   1. If the filesystem you need is not visible:
      1. You may want to create a new directory (folder) to use. If so, use the usual commands to do this first.
      2. Choose File -> Mount Filesystem... from the main menu.
      3. In the window that appears, make sure Add local directory is selected.
      4. Click the Browse button next to it.
      5. Use the pulldown menu to navigate to the folder you want to use.
      6. Click OK. (Sometimes, nothing appears to happen. Sometimes, it happens anyway. I haven't figured this out yet--maybe it's just very slow.)
      7. Click your way out of the dialog boxes, then choose your new filesystem in the Target Location window.
         
         
5. The next window is the Basic Class Definition window. Don't change anything, and click Next >.
   
   
6. Now you have a Create Fields window. Create a String variable named tempString as follows:
   1. Click on the New button (or hit Alt-N).
   2. In the Name: area (not the Fields: area), change the name field0 to tempString.
   3. In the Type: field, change int to String.(The choice menu only lists primitive types, so you will have to type in the word String.)
   4. Type in "" as the initial value.
   5. Click the Next >. button.
      
      
7. The next window is the Override Inherited Methods window. Notice the defaults (override the init() method, but no others). This is exactly what we want, so without changing anything, click Next >.
   
   
8. The final window is the Create Methods window. We won't need any new methods, so just click the Finish button. (You can close the Welcome window if you like.)
   
   
9. The SourceEditor window appears. Read the code that has been generated; notice in particular that your Applet is set up to use a BorderLayout. Light blue highlighting indicates code that you are not allowed to modify.
   
   
10. There is a long window across the top of your screen, with five tabs on the lower left corner. Click the GUI Editing tab. The SourceEditor window disappears, and a fairly small window entitled Form [FirstApplet] appears; it is empty. (If you don't see the window, it may be partially obscured by another window; look around for it.)
    
    
11. Add a Panel to the South of the Applet.
    1. There is a series of tabs on the right of the long window. Make sure the AWT tab is selected.
    2. Click the Panel icon under the AWT tab (it looks like a blank square).
    3. Click near the bottom of the Form [FirstApplet]. You should get a thin blue rectangle along the bottom of the applet. (If you missed, hit Delete on the keyboard and click the Yes button on the confirmation dialog. Then try again.)
       
       
12. Add a Swap button to the south Panel.
    1. Click on the Button icon under the AWT tab (it says OK on it), then click in the south Panel (the thin blue rectangle you created in the previous step). A Button labeled button1 should appear.
    2. In the main menu, choose View -> Component Inspector (or type ctrl-8). This brings up the Component Inspector window. You may want to enlarge this window a bit.
    3. In the Form window, click the button. The properties of the button should appear in the Component Inspector window. (They might be there already, in which case clicking on the button doesn't change anything.)
    4. In the upper pane of the Component Inspector, click ONCE the text that reads button1 [Button]. Be careful not to double-click this text. Pause a second, then click it again. Edit this text to read swapButton. (Alternatively, click the Code Generation tab at the bottom of this window, click to the right of the VariableName button, and change the name there.)
    5. If you accidentally double-clicked the button text, this brought up a source-code window. Just minimize this window.
    6. Click to the right of the label field (where it says button1), and change button1 to read Swap. (If you don't see it, you may be on the wrong tabbed pane--click the Properties tab.)
       
       
13. Now add a Panel containing two TextAreas to the Center of the Applet.
    1. Click on the Panel icon under the AWT icon, then click in the center of the Form window.
    2. Click on the Layouts tab (in the same group of tabs as the AWT tab), and choose a GridLayout. If you can't tell which this is, pause the mouse over each icon for a second or two until the tool tip appears. Then click in the center of the Form window, on the Panel you just added.
    3. In the top pane of the Component Inspector window, click on the key next to Panel2, then choose GridLayout.
    4. Change the GridLayout to have one column and two rows.
    5. Click the AWT tab.
    6. Control-click on the TextArea icon. This should allow you to add more than one TextArea at a time (although it doesn't always seem to work.)
    7. Click in the top half of the Form window to add the first TextArea. Click in the bottom half of the Form window, but above the panel containing the button, to add the second TextArea. (If you don't get a second TextArea, go back to the TextArea icon and try again.)
       
       
14. Disable editing in the upper TextArea.
    1. Click on textArea1 in the top pane of the Component Inspector.
    2. Click on the area to the right of the enabled field, where it says True. Use the pulldown menu to select False.
       
       
15. Make the Swap button do something.
    1. In the Component Inspector, click the Events tab at the bottom.
    2. In the upper pane of the Component Inspector, select the swapButton.
    3. In the lower pane of the Component Inspector, find actionPerformed in the left column. Click on the <none> in the corresponding position in the right column, and choose swapButtonActionPerformed in the right column, and select the one entry in the drop-down list. This brings up a source code window with the insertion point already positioned in the correct method.
       1. If this step didn't work, click the ellipsis (...), click the Add... button in the pop-up window that appears, and type in the name swapButtonActionPerformed. Click the OK buttons in these two windows.
    4. Add the following code to the swapButtonActionPerformed method, after the // Add your handling code here: comment.:

            tempString  = textArea1.getText();
            textArea1.setText(textArea2.getText());
            textArea2.setText(tempString);

16. Try running the Applet.
    1. Click the green triangle above the GUI Editing tab (the tool tip for this icon reads Execute (F6)), or click F6. Either the applet will appear, or you will get a window containing error messages. If the latter, fix the errors and try again.
    2. Test your applet. You should be able to enter text in the lower text area only, and swap the contents of the two text areas by clicking the Swap button..
    3. Close the applet.
       
       
17. Save your work.
    1. On the main menu, choose Project -> Save Project, or click ctrl-shift-S.
    2. Choose File -> Exit to quit Forté.
    3. Try out your applet. Locate the generated HTML page and double-click it to open it in your default browser.