1. GUI Elements Session 17

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

3. Applet Methods init start end destroy

4. Components / Containers container Component

5. Layout The basic setup for any container FlowLayout BorderLayout GridLayout

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

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

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

9. 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); } }

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

11. FlowLayout with Button OK

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

13. BorderLayout One Component/Container per spot

14. 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);

15. Buttons BorderLayout One Component/Container per spot north south west east center

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

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

18. Buttons GridLayout 12 34

19. 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);

20. 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);

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

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

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

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

25. 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);

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

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

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

29. 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);

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

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

32. GUI Plan the looks before you code

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

34. 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!

35. Time to Try it Out Applets And GUI

36. Components / Containers Different Components Panels Nesting Panels Posting and Viewing Applets E-mail any questions to blanca@hawaii.edu Memory Defragmenter

37. Task Manager Answer 4 questions on WebCT Read your e-mail Visit WebCT, webct.hawaii.edu

38. Task Manager Answer 4 questions on WebCT Read your e-mail Visit WebCT, webct.hawaii.edu