Date post: | 31-Mar-2015 |
Category: |
Documents |
Upload: | regina-knox |
View: | 221 times |
Download: | 0 times |
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 [email protected]
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