In this tutorial we create an application named Shuffler. Shuffler is an application that displays a window containing a text field and a button. Initially, the text field contains the numbers 1 through 20, in order, but each time the "Shuffle" button is clicked, the numbers are rearranged randomly.

1. In this step we just get the project started.
   1. Create a folder named Shuffler to hold this tutorial project.
   2. Start Forté.
   3. Ignore the Welcome to Forté window for now; we have something else to do first. From the main menu, choose File -> Mount Filesystem....
      1. In the Mount Filesystem window that appears, make sure Add Local Directory is selected, and click the Browse... button after the Directory: field. Find your newly created folder in the Add Local Directory window, and select it (but don't open it), so that its name is showing in the File Name: field. Click OK.
      2. The name of your folder (Shuffler) should appear in the Mount Filesystem window. Click OK.
   4. In the Welcome to Forté window, click New. Or, if you closed this window earlier, just choose File -> New on the main menu.
   5. In the Template Chooser window, choose Templates -> Swing Forms -> JFrame. Read what it says about JFrames. Click Next>.
   6. In the Target Location window, choose your Shuffler folder. Type in Shuffler in the Name: field, and click Finish. (These names don't have to be the same, but they are in this example.)
      
      
2. Find your Form [Shuffler] window and bring it to the front. (Hint: click on the GUI Editing tab in Forté's main control window.)
   
   
3. The next step is to add a text field to our form. If you look in the Explorer [Filesystems] window, and open some keys under Shuffler, you will notice that the JFrame has a BorderLayout manager.
   1. Click on JTextField (in the Swing tabbed pane) in Forté's main control window. (Use the tool tips to find it.)
   2. Click very near the top in the Form [Shuffler] window to place the text field.
   3. In the Component Inspector window, with the text field selected, delete jTextField1 from the text field in the Properties tabbed pane. The text field now becomes blank.
   4. Also in the Component Inspector window, use the Code Generation tabbed pane, find Variable Name, and change its value to outputField.


4. Next we want to add a panel containing a button, and give them reasonable names.
1. Click on JPanel (in the Swing tabbed pane).
2. Click in the middle of the Form [Shuffler] window, under the text field.
3. Using the Component Inspector for this panel, change its Variable Name to buttonPanel.
4. Click on JButton (in the Swing tabbed pane).
5. Click in the middle of the Form [Shuffler] window, under the text field.
6. Using the Component Inspector for this button, change its text to Shuffle and change its Variable Name to shuffleButton.
   
   
5. You may want to resize the form so it isn't so tall. You can do so, but it won't affect the way the window appears in the finished application.
   
   
6. For this application, we want to create a second class, called ScrambledArray. We want it to have toString and scramble methods. We could easily type these methods in later, but here we're going to let Forté set them up for us.
   1. Choose File -> New from the main menu bar.
   2. In the Template Chooser window, choose Templates -> Classes -> Class (and read what it says about this selection). Click Next>.
   3. In the Target Location window, enter ScrambledArray as the name, and make sure the Shuffler directory is selected. Click Next>.
   4. In the Basic Class Definition window, click Next>.
   5. In the Create Fields window, click Next>.
   6. In the Override Inherited Methods window, double-click class Object, select toString(), and click Add>. Click Next>.
   7. In the Create Methods window, click New. Type in scramble for the Name:, and leave its Return Type: as void. Click Finish.
      
      
7. Add to class ScrambledArray the declaration:
     int[] theArray = new int[20];
   This can go just after the line public class ScrambledArray {.


8. In the constructor, add the lines:
        for (int i = 0; i < theArray.length; i++) {
          theArray[i] = i + 1;
     }
Notice how Forté automatically indents everything nicely for you as you type.
   
   
9. As the very first line of the file, add import java.util.*;


10. Insert the following as the body of the scramble() method:
    

    Random random = new Random();
    for (int i = theArray.length - 1; i > 0; i--) {
        int location = random.nextInt(i + 1);
        int temp = theArray[i];
        theArray[i] = theArray[location];
        theArray[location] = temp;
    }

    If you did this by cutting and pasting, chances are your indentation got somewhat messed up. Select the code that is badly indented, right click the mouse button, and choose Reformat Code. (Isn't that nice?)
    
    
11. Enter this body for the java.lang.toString() method:

    1. StringBuffer buffer = new StringBuffer();
       for (int i = 0; i < theArray.length; i++) {
           buffer.append(theArray[i] + ", ");
       }
       buffer.setLength(buffer.length() - 2);
       return buffer.toString();

12. Now we want to modify our main class to use the new code we just entered.
    1. Return to editing the Shuffler class (by double-clicking on it in the Explorer [Filesystems] window.
    2. Add ScrambledArray numbers; as a new instance variable (Just type it in.)
    3. In the main method, replace: new Shuffler().show(); with:

            Shuffler shuffler = new Shuffler();
            shuffler.init();

       and add a new method, as follows:

           private void init() {
               show();
               numbers = new ScrambledArray();
               outputField.setText(numbers.toString());
           } 

       The reason for doing things this way is to avoid "static poisoning," where the compiler keeps complaining that you "can't reference a non-static variable from a static context," and to solve it you have to keep making one thing after another static. Instead, we just create an instance (shuffler) and use an instance method of shuffler to do all the work.
       
       
13. Now to make the button actually do something.
    1. Double-click the Shuffle button in your Form window. This will add a shuffleButtonActionPerformed method to your Shuffler class, and bring you to it so you can start adding code.
    2. Add the body:

       1. numbers.scramble();
          outputField.setText(numbers.toString());

14. Choose File -> Save All.


15. Execute by making sure the Shuffler class is selected (if the wrong class is selected, you will get a NoSuchMethodError: main message) and clicking on the green triangle in Forté's main control window . If you get an error, double-click on the error message to jump to that location in the file, and fix the error.

    Notice, by the way, that executable classes are marked as such in the Explorer [Filesystems] window with a tiny green triangle.
    
    

16. You might notice, when you run the program, that the text field is too small to hold all 20 numbers. That's about 30 characters, counting spaces and commas. Go back to the Component Inspector and look at the Properties tabbed pane for outputField. Set columns to 30. Try the program again. Almost big enough? Try 32.
    
    
17. If your program "disappears," use the Editing or GUI Editing tabs to bring it back
    
    
18. Test your new program. When you are done, choose File -> Save All.