ToolkitsConsole Vs Graphical User InterfaceImplementing Graphical UICreating Hierarchical WindowAWT ClassesCreating Hierarchical StructureHierarchical Structure Vs LayoutSlide 8Layout ManagersBorderLayoutGridLayoutLaying out Hierarchical StructureSlide 13Reacting to New Point ClickAction Listener CodeSlide 16Displaying OutputGraphics OperationsDrawing BarsSlide 20Displaying PointsMVC in a Graphical ApplicationSlide 23View Panel  ViewViewView (contd)Panel  ControllerControllerController (contd)Composer2 Barchart ComposerBarchart Composer (contd)Slide 33Toolkits•Console I/O Vs Toolkits•Containers and Components•Event Listeners•Toolkit Classes–Frames–Panel–TextField–Buttons–BorderLayoutConsole 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 TypingImplementing Graphical UI•Create the window•React to user input•Display outputCreating Hierarchical WindowframecontrolpanelviewpanelxTextFieldQuitButtonyTextFieldNew PointButtonContainerComponentAWT ClassesComponentContainerTextFieldPanelFrameButtonCreating Hierarchical StructureframecontrolpanelviewpanelxTextFieldQuitButtonyTextFieldNew PointButtonFrame 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)Hierarchical Structure Vs LayoutframecontrolpanelviewpanelxTextFieldQuitButtonyTextFieldNew PointButtonHierarchical Structure Vs LayoutframecontrolpanelviewpanelxTextFieldQuitButtonyTextFieldNew PointButtonLayout ManagersframecontrolpanelviewpanelxTextFieldQuitButtonyTextFieldNew PointButtonBorderLayoutGridLayoutNorthEastSouthWest CenterCenterBorderLayoutEastWestNorthSouthframe.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);GridLayoutcontroller.setLayout(new GridLayout(2,3));controller.add(new TextField()); controller.add(new TextField()); controller.add(new TextField()); controller.add(new TextField());Laying out Hierarchical StructureframecontrolpanelviewpanelxTextFieldQuitButtonyTextFieldNew PointButtonFrame 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);DefaultWill use subclassesImplementing Graphical UI•Create the window•React to user input•Display outputframecontrolpanelviewpanelxTextFieldQuitButtonyTextFieldNew PointButtonaddElement()PointHistoryModelReacting to New Point ClickListenableNew PointButtonListeneraddActionListener()NewPoint ListeneractionPerformed()Button ClickednewPointButton.addActionListener(newPointListener);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())); }}Implementing Graphical UI•Create the window•React to user input•Display outputframecontrolpanelviewpanelxTextFieldQuitButtonyTextFieldNew PointButtonpaint(Graphics g)paint(Graphics g)Displaying OutputPanelPanel ResizedPanel UncoveredInvoke Graphics OperationsView Panelextendsrepaint()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)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());}}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 operationsDisplaying PointsAll four views displayed concurrently and kept in Sync.MVC in a Graphical ApplicationModel:APointHistoryModelController:AConsoleControllerController:AnAWTControllerController:AnAWTControllerController:ASwingControllerView:AConsoleViewView:ABarChartViewView:APlotterViewView:APlotterViewComposer:Single Main ClassMVC in a Graphical ApplicationModel:APointHistoryModelController:AnAWTControllerView:ABarChartViewComposer:Single Main ClassframecontrolpanelviewpanelxTextFieldQuitButtonyTextFieldNew PointButtonNewPoint ListenerSame asSame aspaint(Graphics g)paint(Graphics g)View Panel  ViewPanelPanel ResizedPanel UncoveredInvoke Graphics OperationsView Panelextendsrepaint()MVC ViewModel updatedpointHostoryUpdated()Viewimport 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); }View (contd) void drawBars (Graphics g) {if (pointHistory == null) return;final int BAR_WIDTH = 6;Rectangle myBounds = this.getBounds();for (int i =