16
1 Lesson: Applets Lesson: Applets with User Input and with User Input and Output with GUI Output with GUI ICS4M ICS4M

1 Lesson: Applets with User Input and Output with GUI ICS4M

Embed Size (px)

Citation preview

Page 1: 1 Lesson: Applets with User Input and Output with GUI ICS4M

11

Lesson: Applets with User Lesson: Applets with User Input and Output with GUIInput and Output with GUI

ICS4MICS4M

Page 2: 1 Lesson: Applets with User Input and Output with GUI ICS4M

22

Learning objectivesLearning objectives

How to create Label?How to create Label? How to create TextField?How to create TextField? How to create Button?How to create Button? How to respond to user action?How to respond to user action?

Page 3: 1 Lesson: Applets with User Input and Output with GUI ICS4M

33

Applet as a ContainerApplet as a Container

Applet Viewer:

Page 4: 1 Lesson: Applets with User Input and Output with GUI ICS4M

44

The “init” methodThe “init” method

• Q: What is init method used for?Q: What is init method used for?

• A: A: • To initialize any instance variables.To initialize any instance variables.• To set up the GUI components used by the To set up the GUI components used by the

Applet.Applet.

public void init ( ) {// Place the body of the init method here.

}

Page 5: 1 Lesson: Applets with User Input and Output with GUI ICS4M

55

Demo: BusFare3Demo: BusFare3

Page 6: 1 Lesson: Applets with User Input and Output with GUI ICS4M

66

LabelLabel

What is a label?What is a label? A label is Java’s way of adding a single line of A label is Java’s way of adding a single line of

text into an applet. The text is non-interactive. text into an applet. The text is non-interactive. That is, it cannot be clicked on. That is, it cannot be clicked on.

Page 7: 1 Lesson: Applets with User Input and Output with GUI ICS4M

77

How to create a label?How to create a label?

Use constructor:Use constructor: Label myLabel = new Label(“Hello World”);Label myLabel = new Label(“Hello World”);

“Hello World”

myLabel

Note: you need to add this label into the Applet container.

Page 8: 1 Lesson: Applets with User Input and Output with GUI ICS4M

88

TextFieldTextField

What is a Text field?What is a Text field? A Text Field is a single line text input.A Text Field is a single line text input.

Applet’s way of getting input from user.Applet’s way of getting input from user. Q: Where does this class come from?Q: Where does this class come from?

Page 9: 1 Lesson: Applets with User Input and Output with GUI ICS4M

99

How to create text field?How to create text field?

2 different constructors.2 different constructors.

Constructor 1:Constructor 1: TextField(int cols)TextField(int cols) Creates a TextField Creates a TextField colscols columns wide. columns wide.

Constructor 2:Constructor 2: TextField (String str, int cols)TextField (String str, int cols) Allows user to initialize the text field with initial string.Allows user to initialize the text field with initial string.

Page 10: 1 Lesson: Applets with User Input and Output with GUI ICS4M

1010

Example: Text FieldExample: Text Field

TextField input;TextField input; input = new TextField(5);input = new TextField(5);

Or Or

TextField input = new TextField(5)TextField input = new TextField(5)

Page 11: 1 Lesson: Applets with User Input and Output with GUI ICS4M

1111

Add methodAdd method

void add (Component comp)void add (Component comp) Adds Component comp to the Applet using the Adds Component comp to the Applet using the

Applet’s layout manager.Applet’s layout manager.

Q: Which class does “add” method belong to?Q: Which class does “add” method belong to? Q: Why are we using this version of “add” Q: Why are we using this version of “add”

method?method?

Page 12: 1 Lesson: Applets with User Input and Output with GUI ICS4M

1212

Example: add methodExample: add method

// Set up GUI components.// Set up GUI components.public void init ( )public void init ( ){{

prompt = new Label(“Enter age then press Return”);prompt = new Label(“Enter age then press Return”);input = new TextField(5);input = new TextField(5);

// Place label and text field on applet// Place label and text field on appletadd (prompt);add (prompt);add (input);add (input);

} // init method} // init method

Page 13: 1 Lesson: Applets with User Input and Output with GUI ICS4M

1313

Action methodAction method

boolean action (Event evt, Object o)boolean action (Event evt, Object o) Call by the system when a button is clicked or an Call by the system when a button is clicked or an

ENTER is pressed in a text field in the applet.ENTER is pressed in a text field in the applet. The Button or TextField object that was clicked or The Button or TextField object that was clicked or

had Return pressed is passed as the target field in had Return pressed is passed as the target field in evt.evt.

The method must return “TRUE” if the event was The method must return “TRUE” if the event was handled and “FALSE” if the event was not handled.handled and “FALSE” if the event was not handled.

Q1: How do we get the input from the TextField?Q1: How do we get the input from the TextField? Q2: How do we put something in a TextField?Q2: How do we put something in a TextField?

Page 14: 1 Lesson: Applets with User Input and Output with GUI ICS4M

1414

Demo: BlockButtonDemo: BlockButton

Page 15: 1 Lesson: Applets with User Input and Output with GUI ICS4M

1515

ButtonsButtons

There are 2 constructors for creating buttons:There are 2 constructors for creating buttons:

public Button();public Button(); No LabelNo Label public Button(String label)public Button(String label) With labelWith label

To create a button, we useTo create a button, we use

Button myButton = new Button(“ButtonName”);Button myButton = new Button(“ButtonName”);

Then add the button to the container.Then add the button to the container.

Page 16: 1 Lesson: Applets with User Input and Output with GUI ICS4M

1616

Class Exercise: Pig LatinClass Exercise: Pig Latin

Learn how to use TextArea.Learn how to use TextArea. Write the Pig Latin program using Labels, TextField, and Write the Pig Latin program using Labels, TextField, and

TextAreaTextArea

Hint: Use subString or charAt methods to break up your Hint: Use subString or charAt methods to break up your string into small tokens.string into small tokens.

Pig Latin rule:Pig Latin rule: Move the first character of each word to the back and add “ay”.Move the first character of each word to the back and add “ay”. For example: nice For example: nice icenay icenay