GUI Elements Session 17

Memory Upload Layout Components Button TextField TextArea Label Choice Containers Panels The applet itself

Applet Methods init start end destroy

Components / Containers container Component

Layout The basic setup for any container FlowLayout BorderLayout GridLayout

FlowLayout Elements Added From left to right From top to bottom Alignment Center

FlowLayout Create a FlowLayout object. The constructor Set the Layout FlowLayout fl = new FlowLayout( ); setLayout(fl); //or Container.setLayout(fl); this

Button The constructor The parameter a String –the button caption Button b1 = new Button(OK); Button b2 = new Button( OK );

Button 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); } }

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

FlowLayout with Button OK

BorderLayout Elements Added In the assigned area Areas North South East West Center

BorderLayout One Component/Container per spot

Buttons 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 BorderLayout One Component/Container per spot north south west east center

GridLayout Elements Added From left to right From top to bottom Parameters Row Column

Buttons 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.

Buttons GridLayout 12 34

TextField 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);

TextArea 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);

Label To label GUI elements One constructor: They are placed like any other component/ container Label lab = new Label(String);

Choice Give users controlled choices One constructor: After creating the Choice, items must be added. Choice ch = new Choice( ); ch.add(String);

Choice 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

Choice 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 one two

Panel 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);

Panel There can be many Panels inside an applet Panels can be nested Follow the rule: One Component/Container per spot

Panel The applet BorderLayout bl = new BorderLayout( ); this.setLayout(bl);

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

Panel OKNO ICS111 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);

Panel OKNO ICS111 Panel pCenter = new Panel( ); BorderLayout blCtr = new BorderLayout( ); this.add(Center, pCenter);

Panel You can have as many panels as you want inside one another You can have a different layout on each panel

GUI Plan the looks before you code

Applet 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 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 Out Applets And GUI

Components / Containers Different Components Panels Nesting Panels Posting and Viewing Applets any questions to Memory Defragmenter

Task Manager Answer 4 questions on WebCT Read your Visit WebCT, webct.hawaii.edu

Task Manager Answer 4 questions on WebCT Read your Visit WebCT, webct.hawaii.edu