1. CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further

2. CSE1030-HR The BIG Picture…

3. CSE1030-HR 1.The user launches an app This is just the usual main-method class. 2.The app creates a view object The view object appears as a window with some components on it. It runs in a separate thread. 3.The user interacts with the view E.g. by typing in or clicking on a component. 4.The component notifies the controller E.g. by saying: “the user clicked on me!” 5.The controller informs the model and the view The model is queried or updated. The view is changed in response to what the user did.

4. CSE1030-HR App Controller Model View instantiates launches interacts updates The Objects

5. CSE1030-HR The View…

6. CSE1030-HR The Epitome of Delegation Low-Level Pixel-level manipulations in the java.awt classes. E.g. the shape drawing done in CSE1020. High-Level Component-level visualizations in javax.swing. Application-Level Use swing components as building blocks to assemble the view. Building a view is quite complex if done at the pixel level. The complexity is confronted by an elaborate delegation scheme that relies heavily on inheritance and aggregation.

7. CSE1030-HR The Building Blocks  MenuBar Frame File View    OK My name is…  Select Component Layout Manager

8. CSE1030-HR The Building Blocks  MenuBar Frame File View    OK My name is…  Select Component Layout Manager

9. CSE1030-HR The Building Blocks  MenuBar Frame File View    OK My name is…  Select Component Layout Manager My age is…

10. CSE1030-HR The Building Blocks  MenuBar Frame File View    OK My name is…  Select Component Layout Manager My age is…

11. CSE1030-HR 1 * JComponent JMenuBar add(JMenu) JMenu add(JMenuItem) JFrame add(Component) setLayout(LayoutManager) setJMenuBar(JMenuBar) JMenuItem * * By combining “is-a” with “has-a”, we nest menus! Layout- Manager 1

12. CSE1030-HR Example

13. CSE1030-HR Overview of the View Landscape Components: JButton JLabel JList, JComboBox, JTable, JTree JPanel JCheckBox, JRadioButton JScrollPane, JSplitPane JTextComponent JTextField, JTextArea, JPasswordField, JEditorPane Layout Managers: Flow, Border, Grid, Card, … We cover only a small subset. See: java.sun.com/docs/books/tutorial

14. CSE1030-HR The Controller…

15. CSE1030-HR Events: the Timeline The End User - Clicks on a button or menu: Action event - Mouse, Key, Window, … event The O/S - Determines the window to receive the event - Informs it of the event’s details The window’s Frame - Determines (based on the layout manager) which component (if any) is at the event’s location - Informs it of the event’s details The Component - Notifies all its registered listeners

16. CSE1030-HR To become an action listener on button: 1.Write a class Controller that implements ActionListener 2.Implement the method public void actionPerformed(ActionEvent) 3.The View instantiates Controller Controller controller = new Controller(); 4.The View registers controller with button: button.addActionListener(controller); Whenever the user clicks the button, actionPerformed will be invoked with the Event as argument. It should consult the Model and update the View if needed.

17. CSE1030-HR Example

18. CSE1030-HR Separating the Concerns…

19. CSE1030-HR One “ugly” Extreme All three agents (the view, model, and controller) are in one class. All have access to the “private” attributes. Very hard to debug runtime errors due to entanglement and size. Almost impossible to debug logic errors exposed via testing if different people wrote different parts. Programmers working on the view see (and can modify) business logic (the model). Business rules cannot be reused in a second application.

20. CSE1030-HR The other extreme Separate classes for the MVC agents Separate Controller class per event Need public accessors to enable the controller to update the view (e.g. change font of a component) The model is reusable Lends itself to multithreading Note: We can relax the 2 nd requirement (i.e. use only one controller class) by using setActionCommand(String) and getActionCommand().

21. CSE1030-HR In between… Controller is an inner class of View Can have one controller or one per event Controller has easy access to the private attributes of View, and hence, can easily update the view.

22. CSE1030-HR Example

23. CSE1030-HR Going Further… This material is optional

24. CSE1030-HR Going Further Menus - Mnemonics & Accelerator (see KeyEvent/Stroke) - JMenuItem and JButton extend AbstractButton MVC - Assistive Technologies; see tutorial - JSF, JSP, Struts, … Multithreading - The Event Dispatch Thread and thread safety - Threading event handlers and invokeLater Applets - Extend JApplet (see Ch. 18) Graphics (start with 1020 graphics)

25. CSE1030-HR JComponent paintComponent(Graphics) getWidth(): int getHeight(): int Graphics2D getColor(): Color getFont(): Font getStroke(): Stroke setColor(Color) setFont(Font) setStroke(Stroke) 1 The Aggregation Hierarchy (CSE1020) UniPanel in 1020

26. CSE1030-HR The Aggregation Hierarchy (CSE1020)