cse1030-hr gui the big picture building the view building the controller separating the concerns...
TRANSCRIPT
![Page 1: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/1.jpg)
CSE1030-HR
GUI•The Big Picture
•Building the View
•Building the Controller
•Separating the Concerns
•Going Further
![Page 2: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/2.jpg)
CSE1030-HR
The BIGPicture…
![Page 3: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/3.jpg)
CSE1030-HR
1. The user launches an appThis is just the usual main-method class.
2. The app creates a view objectThe view object appears as a window with some components on it. It runs in a separate thread.
3. The user interacts with the viewE.g. by typing in or clicking on a component.
4. The component notifies the controllerE.g. by saying: “the user clicked on me!”
5. The controller informs the model and the viewThe model is queried or updated. The view is changed in response to what the user did.
![Page 4: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/4.jpg)
CSE1030-HR
App
Controller
Model
View instantiatesinstantiates
instantiates
launches interacts
updates
The Objects
![Page 5: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/5.jpg)
CSE1030-HR
TheView…
![Page 6: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/6.jpg)
CSE1030-HR
The Epitome of Delegation
• Low-LevelPixel-level manipulations in the java.awt classes. E.g. the shape drawing done in CSE1020.
• High-LevelComponent-level visualizations in javax.swing.
• Application-LevelUse 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.
![Page 7: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/7.jpg)
CSE1030-HR
The Building Blocks
MenuBar
Frame
File View
OK
My name is…
Select
Component
Layout Manager
![Page 8: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/8.jpg)
CSE1030-HR
The Building Blocks
MenuBar
Frame
File View
OK
My name is…
Select
Component
Layout Manager
![Page 9: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/9.jpg)
CSE1030-HR
The Building Blocks
MenuBar
Frame
File View
OK
My name is… Select
Component
Layout Manager
My age is…
![Page 10: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/10.jpg)
CSE1030-HR
The Building Blocks
MenuBar
Frame
File View
OK
My name is… Select
Component
Layout Manager
My age is…
![Page 11: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/11.jpg)
CSE1030-HR
1*
JComponent JMenuBaradd(JMenu)
JMenuadd(JMenuItem)
JFrameadd(Component) setLayout(LayoutManager)setJMenuBar(JMenuBar)
JMenuItem
*
*By combining “is-a” with “has-a”, we nest menus!
Layout-Manager
1
![Page 12: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/12.jpg)
CSE1030-HR
Example
![Page 13: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/13.jpg)
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
![Page 14: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/14.jpg)
CSE1030-HR
TheController…
![Page 15: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/15.jpg)
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
![Page 16: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/16.jpg)
CSE1030-HR
To become an action listener on button:1. Write a class Controller that
implements ActionListener
2. Implement the methodpublic void actionPerformed(ActionEvent)
3. The View instantiates ControllerController 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.
![Page 17: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/17.jpg)
CSE1030-HR
Example
![Page 18: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/18.jpg)
CSE1030-HR
Separatingthe Concerns…
![Page 19: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/19.jpg)
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.
![Page 20: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/20.jpg)
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 2nd requirement (i.e. use only one controller class) by using setActionCommand(String) and getActionCommand().
![Page 21: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/21.jpg)
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.
![Page 22: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/22.jpg)
CSE1030-HR
Example
![Page 23: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/23.jpg)
CSE1030-HR
GoingFurther…
This material is optional
![Page 24: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/24.jpg)
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)
![Page 25: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/25.jpg)
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
![Page 26: CSE1030-HR GUI The Big Picture Building the View Building the Controller Separating the Concerns Going Further](https://reader036.vdocument.in/reader036/viewer/2022070403/56649f305503460f94c4bab2/html5/thumbnails/26.jpg)
CSE1030-HR
Graphics2D getColor(): Color getFont(): Font getStroke(): Stroke setColor(Color) setFont(Font) setStroke(Stroke)
1
Stroke Font
1
Color
1
The Aggregation Hierarchy (CSE1020)