toolkits console i/o vs toolkits containers and components event listeners toolkit classes –frames...
Post on 21-Dec-2015
237 views
TRANSCRIPT
![Page 1: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/1.jpg)
Toolkits
• Console I/O Vs Toolkits
• Containers and Components
• Event Listeners
• Toolkit Classes– Frames– Panel– TextField– Buttons– BorderLayout
![Page 2: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/2.jpg)
Console Vs Graphical User Interface
• Hand-crafted hierarchical Vs Automatic Linear Window
• Graphics and Text Vs Text-Only
• Editing Vs Transcript
• User-Driven Vs Program Driven
• Point and Click Vs Typing
![Page 3: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/3.jpg)
Implementing Graphical UI
• Create the window
• React to user input
• Display output
![Page 4: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/4.jpg)
Creating Hierarchical Window
frame
controlpanel
viewpanel
xTextField
QuitButton
yTextField
New PointButton
Container
Component
![Page 5: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/5.jpg)
AWT Classes
Component
Container TextField
PanelFrame
Button
![Page 6: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/6.jpg)
Creating Hierarchical Structure
frame
controlpanel
viewpanel
xTextField
QuitButton
yTextField
New PointButton
Frame frame = new Frame("Points Plotter");
Panel control = new Panel();
frame.add( new Panel());
control.add( new Button(“New Point”));
control.add(new Button(“Quit”);
control.add(new TextField(“0”));
frame.add(control);
control.add(new TextField(“0”)); frame.setSize ( FRAME_WIDTH, FRAME_HEIGHT)frame.setVisible ( true)
![Page 7: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/7.jpg)
Hierarchical Structure Vs Layout
frame
controlpanel
viewpanel
xTextField
QuitButton
yTextField
New PointButton
![Page 8: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/8.jpg)
Hierarchical Structure Vs Layout
frame
controlpanel
viewpanel
xTextField
QuitButton
yTextField
New PointButton
![Page 9: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/9.jpg)
Layout Managers
frame
controlpanel
viewpanel
xTextField
QuitButton
yTextField
New PointButton
BorderLayout
GridLayout
![Page 10: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/10.jpg)
North
East
South
West CenterCenter
BorderLayout
EastWest
North
South
frame.setLayout(new BorderLayout());
frame.add( new Panel(), BorderLayout.CENTER);
frame.add( new Panel(), BorderLayout.WEST);
frame.add( new Panel(), BorderLayout.EAST);
frame.add( new Panel(), BorderLayout.NORTH); frame.add( new Panel(), BorderLayout.SOUTH);
![Page 11: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/11.jpg)
GridLayout
controller.setLayout(new GridLayout(2,3));
controller.add(new TextField());
controller.add(new TextField());
controller.add(new TextField());
controller.add(new TextField());
![Page 12: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/12.jpg)
Laying out Hierarchical Structure
frame
controlpanel
viewpanel
xTextField
QuitButton
yTextField
New PointButton
Frame frame = new Frame("Points Plotter");
Panel control = new Panel();
Frame.add( new Panel());
control.add( new Button(“New Point”));
control.add(new Button(“Quit”));
control.add(new TextField(“0”));
Frame.add(control);
control.add(new TextField(“0”));
control.setLayout( new GridLayout(4, 1 ));
frame.setLayout(new BorderLayout());
frame.add(control, BorderLayout.WEST);
frame.add( new Panel(), BorderLayout.CENTER);
frame.setSize ( FRAME_WIDTH, FRAME_HEIGHT);frame.setVisible ( true);
Default
Will use subclasses
![Page 13: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/13.jpg)
Implementing Graphical UI
• Create the window
• React to user input
• Display output
frame
controlpanel
viewpanel
xTextField
QuitButton
yTextField
New PointButton
![Page 14: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/14.jpg)
addElement()PointHistoryModel
Reacting to New Point ClickListenable
New PointButton
Listener
addActionListener()
NewPoint Listener
actionPerformed()
Button Clicked
newPointButton.addActionListener(newPointListener);
![Page 15: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/15.jpg)
Action Listener Code// import declarations…. public class ANewPointActionListener implements ActionListener {
PointHistory pointHistory; TextField xField;TextField yField;public ANewPointActionListener (PointHistory thePointHistory,
TextField theXField, TextField theYField) {pointHistory = thePointHistory;xField = theXField;yField = theYField;
} // Called when the New Point button is pressed. public void actionPerformed(ActionEvent ae) {
pointHistory.addElement( Integer.parseInt(xField.getText()),
Integer.parseInt(yField.getText())); }}
![Page 16: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/16.jpg)
Implementing Graphical UI
• Create the window
• React to user input
• Display output
frame
controlpanel
viewpanel
xTextField
QuitButton
yTextField
New PointButton
![Page 17: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/17.jpg)
paint(Graphics g)
paint(Graphics g)
Displaying Output
Panel
Panel Resized
Panel Uncovered
Invoke Graphics Operations
View Panel
extends
repaint()
![Page 18: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/18.jpg)
Graphics Operations
• drawLine( int x1, int y1, int x2, int y2 )
• drawString( String s, int x, int y )
• drawRect( int x, int y, int width, int height )
• drawOval( int x, int y, int width, int height )
• fillOval( int x, int y, int width, int height )
• setColor(Color newColor)
![Page 19: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/19.jpg)
Drawing Bars public void paint(Graphics g) {
drawBars(g);
}
void drawBars (Graphics g) {
if (pointHistory == null) return;
final int BAR_WIDTH = 6;
Rectangle myBounds = getBounds();
for (int i = 0; i < pointHistory.size(); i++) {
PointModel nextPoint = (PointModel) pointHistory.elementAt(i);
g.setColor(java.awt.Color.darkGray);
g.fillRect(nextPoint.getX() - BAR_WIDTH, myBounds.height -
nextPoint.getY(), BAR_WIDTH, nextPoint.getY());
}
}
![Page 20: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/20.jpg)
Implementing Graphical UI
• Create the window– Use Frames, LayoutManagers, Panels, Buttons,
TextFields
• React to user input– Define Listeners that call methods in Model
• Display output– Override paint() method– Call graphics operations
![Page 21: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/21.jpg)
Displaying Points
All four views displayed concurrently and kept in Sync.
![Page 22: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/22.jpg)
MVC in a Graphical Application
Model:APointHistoryModel
Controller:AConsoleController
Controller:AnAWTController
Controller:AnAWTController
Controller:ASwingController
View:AConsoleView
View:ABarChartView
View:APlotterView
View:APlotterView
Composer:Single Main
Class
![Page 23: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/23.jpg)
MVC in a Graphical Application
Model:APointHistoryModel
Controller:AnAWTController
View:ABarChartView
Composer:Single Main Class
frame
controlpanel
viewpanel
xTextField
QuitButton
yTextField
New PointButton
NewPoint Listener
Same asSame as
![Page 24: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/24.jpg)
paint(Graphics g)
paint(Graphics g)
View Panel View
Panel
Panel Resized
Panel Uncovered
Invoke Graphics Operations
View Panel
extends
repaint()
MVC View
Model updatedpointHostoryUpdated()
![Page 25: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/25.jpg)
View
import java.awt.Rectangle;import shapes.PointModel;public class APointHistoryBarChart extends Panel implements PointHistoryListener {
PointHistory pointHistory;public void pointHistoryUpdated(PointHistory thePointHistory) {
pointHistory = thePointHistory;repaint();
}// Called by repaint and other methods that refresh the view.
public void paint(Graphics g) {drawBars(g);
}
![Page 26: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/26.jpg)
View (contd)
void drawBars (Graphics g) {if (pointHistory == null) return;final int BAR_WIDTH = 6;Rectangle myBounds = this.getBounds();for (int i = 0; i < pointHistory.size(); i++) {
PointModel nextPoint = (PointModel) pointHistory.elementAt(i);g.setColor(java.awt.Color.darkGray);g.fillRect(nextPoint.getX() - BAR_WIDTH,
myBounds.height - nextPoint.getY(), BAR_WIDTH, nextPoint.getY());
}}
}
![Page 27: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/27.jpg)
Constructor
Panel Controller
Panel
•Create control components (text fields, buttons)
•Add components
•Create component listeners
•Register listeners with components.
MVC Controller
extends
![Page 28: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/28.jpg)
Controllerimport java.awt.GridLayout;import java.awt.Button;import java.awt.TextField;import java.awt.event.ActionListener;public class APointHistoryAWTController extends Panel {
int numComponents = 0;PointHistory pointHistory ;public APointHistoryAWTController (PointHistory thePointHistory) {
pointHistory = thePointHistory;createComponents ();setLayout(new GridLayout(numComponents,1));
}void createComponents() {
TextField xField = createTextField(“0”);add(xField);TextField yField = createTextField(“0”);add(yField);add (createButton ("New Point", new
ANewPointActionListener(pointHistory, xField, yField)));add (createButton ("Quit", new AQuitActionListener()));
}
![Page 29: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/29.jpg)
Controller (contd)
Button createButton(String name, ActionListener listener) { Button button = new Button(name); button.addActionListener(listener);
numComponents++; return button; } TextField createTextField(String text) {
TextField field = new TextField(text);field.setEditable(true);numComponents++;
return field; }}
![Page 30: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/30.jpg)
Composer
Composer:Single Main Class
main()
•Create frame
•Set its layout manager
•Create model, view(s) and controller(s)
•Make views listener of model
•Add views and controllers to frame
•Set frame size
•Make frame visible
• Set frame location
![Page 31: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/31.jpg)
2 Barchart Composerpublic class APointHistoryBarchartComposer {
static final int FRAME_WIDTH = 300;static final int FRAME_HEIGHT = 300;
public static void main (String args[]) {PointHistoryModel pointHistoryModel = new APointHistoryModel();createBarChartEditor(pointHistoryModel);createBarChartEditor(pointHistoryModel);
} public static void createBarChartEditor (PointHistoryModel pointHistoryModel) {
Frame frame = new Frame("Points Bar Chart");frame.add (createAWTController(pointHistoryModel),
BorderLayout.WEST); frame.add (createBarChart(pointHistoryModel),
BorderLayout.CENTER); // important to set this, default seems to be (0,0)frame.setSize (FRAME_WIDTH, FRAME_HEIGHT);setLocation (frame);// important to make frame visible, default is invisible
frame.setVisible(true); }
![Page 32: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/32.jpg)
Barchart Composer (contd)
public static APointHistoryBarChart createBarChart(PointHistoryModel pointHistoryModel) {
APointHistoryBarChart pointHistoryView = new APointHistoryBarChart();
// make view an eavesdropper of modelpointHistoryModel.addListener(pointHistoryView);return pointHistoryView;
}
public static APointHistoryAWTControllercreateAWTController(PointHistory pointHistory) {return new APointHistoryAWTController(pointHistory);
}
![Page 33: Toolkits Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes –Frames –Panel –TextField –Buttons –BorderLayout](https://reader031.vdocuments.mx/reader031/viewer/2022032310/56649d595503460f94a39621/html5/thumbnails/33.jpg)
Barchart Composer (contd)
static int curX = 0;static int curY = 0;static final int X_OFFSET = 100;static final int Y_OFFSET = 100;
static void setLocation (Frame frame) {frame.setLocation (curX, curY);curX += X_OFFSET;curY += Y_OFFSET;
}}