OverviewStep 5Step 7Source code

Tutorial: Building an applet

Step 6: Editing your source code

In this step, we'll be adding the languages to the drop-down list. Then we'll add events to hook up each language panel to the Choice component.

  1. Add the languages for the drop-down list to the init() method as follows:

    1. Click the Source tab in the content pane to change to the source code in the editor.

    2. Select the init() method in the structure pane. The init() method code is highlighted in the editor.

      Tip: Search for a method in the structure pane by clicking in the pane and typing the method name.

    3. Position the cursor after the opening curly brace and before the try/catch statement and press Enter to create an extra blank line.

      Tip: To expand the editor and hide the project and structure pane, select View|Toggle Curtain.

    4. Add the following code block indicated in bold:
       //initialize the applet
        public void init() {
      
          choice1.addItem("English");
          choice1.addItem("German");
          choice1.addItem("Pig Latin");
          choice1.addItem("Swedish");
          choice1.addItem("Australian");
      	
          try {
            jbinit();
          }
          catch(Exception e) {
            e.printStackTrace();
          }
        }
      
      Tip: Use CodeInsight to complete the code for you. Enter choice1. and wait for the pop-up window or press Ctrl+spacebar to invoke it. Be sure to include the dot (.) after choice. Use the arrow keys to select addItem(String) from the pop-up window. Press Enter. You can configure CodeInsight in the IDE Options dialog box (Tools|IDE Options|CodeInsight).

      CodeInsight

    If there are any syntax errors in your code, an Errors folder appears in the structure pane as you type in the editor. Open the folder and select the error message to highlight the error in the source code.

    See also: "About error and warning messages"

    Next, you'll hook up the event to the language choice. When you select a language from the drop-down list Choice component, "Good Evening" appears in the cardLayout panel in the selected language.

  2. Hook up the Choice list events as follows:

    1. Return to the UI designer.

    2. Select choice1 located under upper in the component tree.

    3. Select the Events tab in the Inspector.

    4. Double-click to the right of the itemStateChanged event. JBuilder generates the method code and takes you to the source code with the cursor inserted in the method.
        void choice1_itemStateChanged(ItemEvent e) {
      	    
        }
      
    5. Add the following code indicated in bold to connect the correct language panel to the language choice:
        void choice1_itemStateChanged(ItemEvent e) {
        
          if (choice1.getSelectedItem()== "English") {
            cardLayout1.show(lower, "panel2");
          }
          else if (choice1.getSelectedItem()== "German") {
            cardLayout1.show(lower, "panel3");
          }
          else if (choice1.getSelectedItem()== "Pig Latin") {
            cardLayout1.show(lower, "panel4");
          }
          else if (choice1.getSelectedItem()== "Swedish") {
            cardLayout1.show(lower, "panel5");
          }
           (choice1.getSelectedItem()== "Australian") {
            cardLayout1.show(lower, "panel6");
          }
      	
        }
      
      

      Tip: You can use code templates to generate code. Type if and press Ctrl+J to access the code templates pop-up window. Use the arrow keys to navigate the selections. Select the if/else if template and press Enter. The code is generated:

      	if () {
              
      	}
      	else if{
      		
      	}
           

  3. Choose File|Save All.

  4. Run the applet by right-clicking GoodEveningApplet.html in the project pane and selecting Run.

    The "Good Evening" applet runs in Sun's appletviewer:

    If there are any errors, they appear in the message pane at the bottom of the AppBrowser. Select an error message and press F1 for Help. Select the error message to highlight the code in the editor. Sometimes the error may be before or after the highlighted line of code. Fix the errors, save the project, and run the applet again.

  5. Test the drop-down list. The language selected from the list should match the language on the panel below it.

  6. Exit the applet.

    Now, let's add a button event for button1 on panel6. When you push the button, the "Gudday, Mate" text on label6 changes to red.

  7. Add the button event as follows:
    1. Switch to the UI designer.

    2. Select button1 on panel6. Change the button's Label property in the Inspector from button1 to Push Me. Press Enter. Resize the button until "Push Me" fits in the button.

    3. Click the Inspector's Events tab to define what happens when button1 is pressed.

    4. Double-click the column to the right of the ActionPerformed event. JBuilder switches to the editor where the following skeleton code has been added for the ActionPerformed event just below the if/else if statements.
       
      void button1_actionPerformed(ActionEvent e) {
      
      }
      
      Now, you'll enter the code that defines the button event which will change "Gudday, Mate" to red.

    5. Type the following code indicated in bold:
       
      void button1_actionPerformed(ActionEvent e) {
      	label6.setForeground(new Color(255,0,0));
      }
      

    6. Save the project.

    7. Run the applet and select "Australian" from the drop-down list. Click the "Push Me" button. "Gudday, Mate" should turn red.

      Your applet should look similar to this:

  8. Exit the applet.

Overview Step 5 Step 7 Source code