CompSci 230 S1 2016 Software Construction MVC

Agenda & Reading Topics: Reading Separation of concerns (SoC) Separation of Model and View Separation of View and Logic Java’s MVC Architecture Examples: ListModel, ComboBoxModel, TreeModel and TableModel Reading Software Engineering – A practitioner’s Approach, Roger Pressman Chapter 8 Object Oriented Software Engineering Using UML, Patterns and Java Chapter 6 The Java Tutorial: How to use Models Lecture13

Separation of Concerns How to deal with complexity in a system? Separation of concerns (SoC) Separate issues (break down large problems into pieces) and concentrate on one at a time Break a program into distinct features that overlap in functionality as little as possible Concern: a piece of a program, usually a feature or a particular program behavior Two Categories: Separate concerns into classes and methods Separate data from UI, and UI from application logic Lecture13

Modularity Complex systems can usually be divided into simpler pieces called modules Module: self-contained component of a system Has a well-defined interface to other modules Separates its interface from its implementation Modularity can be used on different levels: Classes that implement a well-defined interface Packages with classes and methods (and other types) … Lecture13

Advantages of Modular Systems Modular systems are systems that are composed of modules Easier to understand: when dealing with a module the details of other modules can be ignored (separation of concerns) Modules can be developed & maintained independently Separation of work: different teams for different modules Independent testing of modules Modules can be reused in several systems Modules can be replaced by other modules with the same interface Isolation between modules can prevent failure in one module to cause failure in other modules Lecture13

Spaghetti Code vs. Modular System Haphazard connections, probably grown over time No visible cohesive groups High coupling: high interaction between random parts Understand it all or nothing Modular System High cohesion within modules Low coupling between modules Modules can be understood separately Interaction between modules is well-understood and thoroughly specified 10 parts, 13 connections 10 parts, 13 connections, 3 modules Lecture13

Separation of UI and Data Use different classes for Model and View: Model: the data that is presented by a widget, i.e. the data storage implementation (classes & methods) View: the presentation of the data on the screen, i.e. the widgets that paint the data (classes & methods) The data of a GUI component may be represented using several model objects, e.g. for Displayed data (e.g. list items in JList: ListModel) Widget state (e.g. selections in JList: ListSelectionModel) Different Views Data represented in Lecture13

Advantages of Model-View Separation Separation of concerns during development Model can be developed & maintained independently from view Well-defined interface between model and view makes sure that they can work together New possibilities for connecting models and views Model can be displayed in multiple views Models and views can be distributed Model concept is integrated with event notification Changes of the model trigger updates of view Changes of the view trigger updates of model Consistency between model and view Model View Lecture13

A Typical Model-View Application Many desktop applications provide multiple views of some data model. Invariant : all views should offer a mutually consistent representation of the model. JTable component instance Model JCombobox component Stats view Graphical view Change request Update notification Lecture13

Model-View in Swing Contemporary GUI frameworks, like Swing, are based on a separable model architecture All Swing widgets (JComponents) have separate models JTable << interface >> TableModel JComboBox << interface >> ComboBoxModel setValueAt( row, col ) JTree << interface >> TreeModel A Model can be thought of as a representation of a system, without concern for the details. For example, the ListModel would contain information about the items in the Jlist, without concern for how those items are shown. JTable component instance TableModel instance JList << interface >> ListModel tableChanged( event ) Lecture13

Separation of View and Logic Use different classes for View and Applicatoin Logic: View: the presentation of the data on the screen, i.e. the widgets that paint the data (classes & methods) Logic: the that the program performs, e.g. decisions, calculations, data processing/filtering, etc. The logic of an application is implemented in your own classes Methods for the different operations triggered through the UI that read data from the model and work with it Should have a well-defined interface to view Main advantage: easier development & maintenance through separation of concerns Data triggers works with Logic Lecture13

you can modify or create views without affecting the underlying model MVC Roles the model should not need to know about all the kinds of views and interaction styles available for it Model complete, self-contained representation of object managed by the application e.g., spreadsheet document provides a number of services to manipulate the data e.g., recalculate, save computation and persistence issues View tracks what is needed for a particular perspective of the data e.g., bar chart view presentation issues Controller gets input from the user, and uses appropriate information from the view to modify the model get slider value, trigger chart modify interaction issues you can modify or create views without affecting the underlying model Lecture13

Swing’s Model-based Architecture Swing architecture is rooted in the model-view-controller (MVC) design that dates back to SmallTalk. MVC architecture calls for a visual application to be broken up into three separate parts: A model that represents the data for the application The view that is the visual representation of that data A controller that takes user input on the view and translates that to changes in the model.” [Amy Fowler, ibid.] Lecture13

Model-View-Controller (MVC) refresh View Data display Controller User input UI: events refresh manipulate Model Data model Data: Lecture13

Example: C# TreeView Control Controller treeView1.Nodes Nodes collection Model Lecture13

Example: Multiple Views Controller View View Controller Model Lecture13

Example: C# DataBase Controls DataGrid control -scroll, sort, edit, … View Controller DataSet class -tables -columns -rows DB Model Lecture13

Java MVC Architecture In Java, the View and Controller are generally combined into the same classes E.g. JComboBox provides an editor field View and Controls access data through a Data Model Each Model is defined as an Interface ComboBoxModel, ListModel, TableModel, ButtonModel Each GUI component comes with a default Model implementation DefaultComboBoxModel, DefaultListModel, DefaultTableModel Automatically propagate changes in the data to Views An abstraction that separates the access of the data from how it’s stored Lecture13

MVC Example in Java Example: JList Example: PhilosophersJList.java <<interface>> Javax.swing.ListModel Javax.swing.JList Add/remove items notifies <<abstract>> AbstractListModel modifies DefaultListModel DefaultListModel Javax.swing.JComponent isEmpty(): boolean getSize(): int addElement(Object) removeElement(Object) elementAt(): Object removeElementAt(int) insertElementAt(int) indexOf(Object): int etc JList Example: JList A ListModel is an object which maintains a list of objects: it knows how big the list is, which object is where in the list, etc, and can insert/remove objects A JList is a graphical component giving a view of the list and able to receive user input to modify the list Lecture13

Creating a Model (List and Combo Box) To create a list model: DefaultListModel — everything is pretty much taken care of for you. ListModel — create a new class which implements the ListModel interface and implement the getSize and getElementAt methods To create a combo box model: DefaultComboBoxModel — everything is pretty much taken care of for you. ComboBoxModel — create a new class which implements the ComboBoxModel interface and implement the setSelectedItem and getSelectedItem methods Lecture13

Example: MV_ComboBoxDemo.java Examples Example: MV_ComboBoxDemo.java DefaultComboBoxModel: DefaultListModel: JComboBox<String> ppComboBox; ... DefaultComboBoxModel<String> cbm = new DefaultComboBoxModel<String>( new String[] { "person", "student", "employee" }); ppComboBox = new JComboBox<String>(cbm); creates a mutable list model object, puts the initial items in it, and uses the list model to create a list: JList<String> list; ... DefaultListModel<String> listModel = new DefaultListModel<String>(); listModel.addElement("red"); listModel.addElement("orange"); listModel.addElement("yellow"); list = new JList<String>(listModel); Lecture13

Tree Model TreeModel To create a tree model: defines a suitable data model for a JTree key Concepts: root and children JTree get its data from an object that implements the TreeModel interface To create a tree model: DefaultTreeModel TreeModel — create a new class which implements the TreeModel interface and implements the following method … Object getRoot(): returns the root of the tree. Object getChild(Object parent, int index) : returns the child of parent at index in the parent's child array. int getChildCount(Object parent): returns the number of children of parent. int getIndexOfChild(Object parent, Object child): returns the index of child in parent. boolean isLeaf(Object node): returns true if node is a leaf. void removeTreeModelListener(TreeModelListener l) void valueForPathChanged(TreePath path, Object newValue) void addTreeModelListener(TreeModelListener l) Lecture13

Example: MV_TreeDemo.java Adding Tree nodes: Create a JTree DefaultMutableTreeNode top = new DefaultMutableTreeNode("The Java Series"); DefaultMutableTreeNode category = new DefaultMutableTreeNode("Books for Java Programmers"); top.add(category); DefaultMutableTreeNode book = new DefaultMutableTreeNode("The Java Tutorial: A Short Course on the Basics"); category.add(book); book = new DefaultMutableTreeNode("The JFC Swing Tutorial: A Guide to Constructing GUIs"); JTree tree = new JTree(top); Lecture13

Using the TreeModel interface Create a new class which implements the TreeModel interface and implements the 8 method … public class InfiniteBinaryTree implements TreeModel { public Object getRoot() { return 0; // return new Integer(0); } public int getChildCount(Object parent) { return 2; // because its a binary tree public Object getChild(Object parent, int index) { return index; public int getIndexOfChild(Object parent, Object child) { return (Integer) child; public boolean isLeaf(Object node) { return false; // an infinite number of internal nodes and no leaves! ... JTree binTree = new JTree(new InfiniteBinaryTree()); Lecture13

import java.swingx.table.*; Using JTable Tables are used to display data in a spreadsheet fashion So key concepts in the model of a table: cell, row, column Value(s) in each Every table gets its data from an object that implements the TableModel interface You can use the DefaultTableModel, OR You an create a new class which implements the AbstractTableModel interface and implements the following methods: getColumnName getRowCount getColumnCount getValueAt import java.swingx.table.*; Lecture13

Using the DefaultTableModel Example: DefaultTableModelDemo.java Model might hold its data in an array, vector or from an database Object[][] data = { {"Mary", "Campione","Snowboarding", new Integer(5) ...} {"Alison", "Huml","Rowing", new Integer(3), new Boolean(true)} ...}; String[] columnNames = {"First Name","Last Name","Sport","# of Years","Vegetarian"}; DefaultTableModel defaultTableModel = new DefaultTableModel(data, columnNames); ... table = new JTable(defaultTableModel); Lecture13

Using the AbstractTableModel Example: AbstractTableModelDemo.java Steps in creating and using AbstractTableModel Create an AbstractTableModel subclass Implement the getRowCount() , getColumnCount() , and getValueAt() methods JTable table = new JTable(new AbstractTableModel() { public int getColumnCount() { return 10; } public int getRowCount() { return 10;} public Object getValueAt(int row, int col) { return new Integer(row*col); } }); getContentPane().add(table, BorderLayout.CENTER); Lecture13

Example: DefaultTableModelDemo.java Controller Example: DefaultTableModelDemo.java A controller that takes user input on the view and translates that to changes in the model.” Example: You do NOT directly update JTable, T Instead, you update the TableModel, TM, which automatically updates the Table, T changeButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { DefaultTableModel tm = (DefaultTableModel) table.getModel(); for (int row=0; row<tm.getRowCount(); row++) { int years = (Integer) tm.getValueAt(row, 3); tm.setValueAt(years+1, row, 3); } }); Change the TableModel Lecture13

Example Update the ListModel addButton.addActionListener( new ActionListener() { public void actionPerformed( ActionEvent event ) { String name = JOptionPane.showInputDialog(PhilosophersJList.this, "Enter Name" ); philosophers.addElement( name ); } }); Change the ListModel removeButton.addActionListener( new ActionListener() { public void actionPerformed( ActionEvent event ) { philosophers.removeElement(list.getSelectedValue() ); } }); Change the ListModel Lecture13

Summary: MVC Architecture A typical application includes software to maintain application data, document text in a word processor state of a chess game -- positions of pieces present output outline view or print preview in a word processor graphical view of chess game process user input key presses mouse click on controls Lecture13