GUI ElementsGUI Elements

Session 17

Memory UploadMemory Upload

• Layout• Components

Button TextField TextArea Label Choice

• Containers Panels The applet itself

Applet MethodsApplet Methods

• init

• start

• end

• destroy

Components / ContainersComponents / Containers

container

Component

LayoutLayout

• The basic setup for any container FlowLayout BorderLayout GridLayout

FlowLayoutFlowLayout

• Elements Added From left to right From top to bottom

• Alignment Center

FlowLayoutFlowLayout

• Create a FlowLayout object.

• The constructor

• Set the Layout

FlowLayout fl = new FlowLayout( );

setLayout(fl);//orContainer.setLayout(fl);

this

ButtonButton

• The constructor

• The parameter a String –the button caption

Button b1 = new Button(“OK”);Button b2 = new Button(“ OK ”);

ButtonButton

import java.applet.*; import java.awt.*; public class FlowButtons extends Applet{ public void init( ) { FlowLayout fl = new FlowLayout( ); setLayout(fl); Button b1 = new Button("OK"); add(b1); } }

ButtonButton

import java.applet.*; import java.awt.*; public class FlowButtons extends

Applet{ public void init( ) { Button b1 = new Button("OK"); add(b1); } }

FlowLayout with ButtonFlowLayout with Button

OK

BorderLayoutBorderLayout

• Elements Added In the assigned area

• Areas North South East West Center

BorderLayoutBorderLayout

• One Component/Container per spot

Buttons BorderLayoutButtons BorderLayout

BorderLayout bl = new BorderLayout( );this.setLayout(bl); Button bN = new Button(“north");Button bS = new Button(“south");Button bC = new Button(“center”);Button bE = new Button(“east");Button bW = new Button(“west");this.add(“Center”, bC);this.add(“North”, bN);this.add(“South”, bS);this.add(“East”, bE);this.add(“West”, bW);

Buttons BorderLayoutButtons BorderLayout

• One Component/Container per spot

north

south

west eastcenter

GridLayoutGridLayout

• Elements Added From left to right From top to bottom

• Parameters Row Column

Buttons GridLayoutButtons GridLayout

setLayout(new GridLayout(2,2));

Button b1 = new Button("1");Button b2 = new Button("2"); Button b3 = new Button("3"); Button b4 = new Button("4"); add(b1); add(b2); add(b3); add(b4);

this.

this.this.this.this.

Buttons GridLayoutButtons GridLayout

1 2

3 4

TextFieldTextField

• For user data entry or program information display

• Two constructors:

• They are placed just as any other component/container

TextField tf = new TextField(String);TextField tf = new TextField(int);

TextAreaTextArea

• For user data entry or program information display

• Two constructors:

• They are placed just as any other component/container

TextArea ta= new TextArea(String);TextArea ta = new TextArea(int, int);

LabelLabel

• To label GUI elements

• One constructor:

• They are placed like any other component/ container

Label lab = new Label(String);

ChoiceChoice

• Give users controlled choices

• One constructor:

• After creating the Choice, items must be added.

Choice ch = new Choice( );

ch.add(String);

ChoiceChoice

• Java is zero based• Items are added in order• They are placed like any other

component / container

Choice ch = new Choice( );ch.add(“zero”);ch.add(“one”);ch.add(“two”);

zero

ChoiceChoice

• Java is zero based• Items are added in order• They are placed like any other

component / container

Choice ch = new Choice( );ch.add(“zero”);ch.add(“one”);ch.add(“two”);

zeroonetwo

PanelPanel

• The Panel is a container

• The constructor

• Each Panel can have its own Layout

Panel p = new Panel( );

BorderLayout bl = new BorderLayout( );p.setLayout(bl);

PanelPanel

• There can be many Panels inside an applet

• Panels can be nested

• Follow the rule: One Component/Container per spot

PanelPanel

The applet

BorderLayout bl = new BorderLayout( );this.setLayout(bl);

PanelPanel

Panel pTop = new Panel( );GridLayout gl = new GridLayout(5,1);pTop.setLayout(gl);this.add(“North”, pTop);

PanelPanel

OK NOICS 111

Button b1 = new Button (“OK”);Label num = new Label (“111”);Label area = new Label(“ICS”);Label blank = new Label(“ ”);Button b2 = new Button(“NO”);pTop.add(blank);pTop.add(area);pTop.add(num);pTop.add(b1);pTop.add(b2);

PanelPanel

OK NOICS 111

Panel pCenter = new Panel( );BorderLayout blCtr = new BorderLayout( );this.add(“Center”, pCenter);

PanelPanel

• You can have as many panels as you want inside one another

• You can have a different layout on each panel

GUIGUI

• Plan the looks before you code

Applet posting reviewApplet posting review

• Steps Plan your GUI Write your java code in the

public_html directory Compile your code Change the class mode to 644

Applet posting reviewApplet posting review

• Steps Write your html page Change the html page mode to 644 Visit your applet on the web Use the java console for immediate

feedback!

Time to Try it OutTime to Try it Out

AppletsAndGUI

• Components / Containers

• Different Components

• Panels

• Nesting Panels

• Posting and Viewing Applets

• E-mail any questions to blanca@hawaii.edu

Memory DefragmenterMemory Defragmenter

Task ManagerTask Manager

• Answer 4 questions on WebCT

• Read your e-mail

• Visit WebCT, webct.hawaii.edu

Task ManagerTask Manager

• Answer 4 questions on WebCT

• Read your e-mail

• Visit WebCT, webct.hawaii.edu