1 / 33

Toolkits

Toolkits. Console I/O Vs Toolkits Containers and Components Event Listeners Toolkit Classes Frames Panel TextField Buttons BorderLayout. Console Vs Graphical User Interface. Hand-crafted hierarchical Vs Automatic Linear Window Graphics and Text Vs Text-Only Editing Vs Transcript

kapila
Download Presentation

Toolkits

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Toolkits • Console I/O Vs Toolkits • Containers and Components • Event Listeners • Toolkit Classes • Frames • Panel • TextField • Buttons • BorderLayout

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

  3. Implementing Graphical UI • Create the window • React to user input • Display output

  4. Container frame Component view panel control panel x TextField y TextField New Point Button Quit Button Creating Hierarchical Window

  5. AWT Classes Component Container TextField Button Frame Panel

  6. frame view panel control panel x TextField y TextField New Point Button Quit Button Creating Hierarchical Structure Frame frame = new Frame("Points Plotter"); Panel control = new Panel(); frame.add(control); frame.add(new Panel()); control.add(new Button(“New Point”)); control.add(new Button(“Quit”); control.add(new TextField(“0”)); control.add(new TextField(“0”)); frame.setSize ( FRAME_WIDTH, FRAME_HEIGHT) frame.setVisible ( true)

  7. frame view panel control panel x TextField y TextField New Point Button Quit Button Hierarchical Structure Vs Layout

  8. frame view panel control panel x TextField y TextField New Point Button Quit Button Hierarchical Structure Vs Layout

  9. frame view panel control panel x TextField y TextField New Point Button Quit Button Layout Managers BorderLayout GridLayout

  10. North West East Center North South West Center East South BorderLayout 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);

  11. GridLayout controller.setLayout(new GridLayout(2,3)); controller.add(new TextField()); controller.add(new TextField()); controller.add(new TextField()); controller.add(new TextField());

  12. Default frame Will use subclasses view panel control panel x TextField y TextField New Point Button Quit Button Laying out Hierarchical Structure Frame frame = new Frame("Points Plotter"); frame.setLayout(new BorderLayout()); Panel control = new Panel(); Frame.add(control); frame.add(control, BorderLayout.WEST); Frame.add(new Panel()); frame.add(new Panel(), BorderLayout.CENTER); control.setLayout(new GridLayout(4, 1 )); control.add(new Button(“New Point”)); control.add(new Button(“Quit”)); control.add(new TextField(“0”)); control.add(new TextField(“0”)); frame.setSize ( FRAME_WIDTH, FRAME_HEIGHT); frame.setVisible ( true);

  13. frame view panel control panel x TextField y TextField New Point Button Quit Button Implementing Graphical UI • Create the window • React to user input • Display output

  14. Listenable Listener New Point Button PointHistoryModel addElement() Reacting to New Point Click NewPoint Listener addActionListener() actionPerformed() Button Clicked newPointButton.addActionListener(newPointListener);

  15. Action Listener Code // import declarations …. publicclass 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. publicvoid actionPerformed(ActionEvent ae) { pointHistory.addElement( Integer.parseInt(xField.getText()), Integer.parseInt(yField.getText())); } }

  16. frame view panel control panel x TextField y TextField New Point Button Quit Button Implementing Graphical UI • Create the window • React to user input • Display output

  17. Panel Resized Panel Uncovered Invoke Graphics Operations View Panel Panel extends Displaying Output paint(Graphics g) repaint() paint(Graphics g)

  18. 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)

  19. Drawing Bars publicvoid paint(Graphics g) { drawBars(g); } void drawBars (Graphics g) { if (pointHistory == null) return; finalint 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()); } }

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

  21. Displaying Points All four views displayed concurrently and kept in Sync.

  22. Composer: Single Main Class MVC in a Graphical Application Controller: AConsoleController View: AConsoleView Controller: AnAWTController View: ABarChartView Model: APointHistoryModel Controller: AnAWTController View: APlotterView Controller: ASwingController View: APlotterView

  23. frame Controller: AnAWTController View: ABarChartView view panel control panel Composer: Single Main Class Model: APointHistoryModel Same as x TextField y TextField New Point Button Quit Button Same as MVC in a Graphical Application NewPoint Listener

  24. Panel Resized Panel Uncovered MVC View View Panel Panel Model updated View Panel  View paint(Graphics g) repaint() Invoke Graphics Operations extends paint(Graphics g) pointHostoryUpdated()

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

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

  27. MVC Controller Panel Panel  Controller • Create control components (text fields, buttons) • Add components • Create component listeners • Register listeners with components. extends Constructor

  28. import 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())); } Controller

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

  30. Composer: Single Main Class Composer 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

  31. 2 Barchart Composer • publicclass APointHistoryBarchartComposer { • staticfinalint FRAME_WIDTH = 300; • staticfinalint FRAME_HEIGHT = 300; • publicstaticvoid main (String args[]) { • PointHistoryModel pointHistoryModel = new APointHistoryModel(); • createBarChartEditor(pointHistoryModel); • createBarChartEditor(pointHistoryModel); • } • publicstaticvoid 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); • }

  32. Barchart Composer (contd) publicstatic APointHistoryBarChart createBarChart(PointHistoryModel pointHistoryModel) { APointHistoryBarChart pointHistoryView = new APointHistoryBarChart(); // make view an eavesdropper of model pointHistoryModel.addListener(pointHistoryView); return pointHistoryView; } publicstatic APointHistoryAWTController createAWTController(PointHistory pointHistory) { returnnew APointHistoryAWTController(pointHistory); }

  33. Barchart Composer (contd) staticint curX = 0; staticint curY = 0; staticfinalint X_OFFSET = 100; staticfinalint Y_OFFSET = 100; staticvoid setLocation (Frame frame) { frame.setLocation (curX, curY); curX += X_OFFSET; curY += Y_OFFSET; } }

More Related