CSE1030-HR

GUI•The Big Picture

•Building the View

•Building the Controller

•Separating the Concerns

•Going Further

CSE1030-HR

The BIGPicture…

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.

CSE1030-HR

 App

Controller

Model

View instantiatesinstantiates

instantiates

launches interacts

updates

The Objects

CSE1030-HR

TheView…

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.

CSE1030-HR

The Building Blocks

MenuBar

Frame

File View

OK

My name is…

Select

Component

Layout Manager

CSE1030-HR

The Building Blocks

MenuBar

Frame

File View

OK

My name is…

Select

Component

Layout Manager

CSE1030-HR

The Building Blocks

MenuBar

Frame

File View

OK

My name is… Select

Component

Layout Manager

My age is…

CSE1030-HR

The Building Blocks

MenuBar

Frame

File View

OK

My name is… Select

Component

Layout Manager

My age is…

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

CSE1030-HR

Example

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

CSE1030-HR

TheController…

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

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.

CSE1030-HR

Example

CSE1030-HR

Separatingthe Concerns…

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.

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

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.

CSE1030-HR

Example

CSE1030-HR

GoingFurther…

This material is optional

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)

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

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)