Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
CompSci 230 S1 2016 Software Construction MVC Agenda & Reading Topics: Separation of concerns (SoC) Separation of Model and View Separation of View and Logic Java’s MVC Architecture Examples: Reading Software Engineering – A practitioner’s Approach, Roger Pressman Chapter 8 Object Oriented Software Engineering Using UML, Patterns and Java 2 ListModel, ComboBoxModel, TreeModel and TableModel Chapter 6 The Java Tutorial: How to use Models Lecture13 Separation of Concerns 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: 3 How to deal with complexity in a system? 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 Modularity can be used on different levels: 4 Has a well-defined interface to other modules Separates its interface from its implementation 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 5 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 Spaghetti Code Haphazard connections, probably grown over time No visible cohesive groups High coupling: high interaction between random parts 10 parts, 13 connections 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 10 parts, 13 connections, and thoroughly specified 3 modules 6 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) Data 7 represented in Different Views Lecture13 Advantages of Model-View Separation Separation of concerns during development 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 8 Model can be developed & maintained independently from view Well-defined interface between model and view makes sure that they can work together Changes of the model trigger updates of view Changes of the view trigger updates of model Consistency between model and view View View Model View 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. Graphical view JTable component instance Model Change request Stats view Update notification 9 JCombobox component instance Lecture13 Model-View in Swing Contemporary GUI frameworks, like Swing, are based on a separable model architecture All Swing widgets (JComponents) have separate models setValueAt( row, col ) JTable component instance TableModel instance tableChanged( event ) 10 JTable << interface >> TableModel JComboBox << interface >> ComboBoxModel JTree << interface >> TreeModel JList << interface >> ListModel Lecture13 Separation of View and Logic Use different classes for View and Applicatoin Logic: View: the presentation of the data on the screen, Logic: the that the program performs, i.e. the widgets that paint the data (classes & methods) 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 works with triggers 11 Logic Data Lecture13 the model should not need to know about all the kinds of views and interaction styles available for it MVC Roles Model complete, self-contained representation of object managed by the application provides a number of services to manipulate the data computation and persistence issues 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 12 e.g., recalculate, save you can modify or create views without affecting the underlying model View e.g., spreadsheet document get slider value, trigger chart modify interaction issues 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.] 13 Lecture13 Model-View-Controller (MVC) UI: refresh View Data display Controller events refresh Data: 14 User input manipulate Model Data model Lecture13 Example: C# TreeView Control TreeView control View Controller treeView1.Nodes Nodes collection Model 15 Lecture13 Example: Multiple Views View Controller View Controller Model 16 Lecture13 Example: C# DataBase Controls DataGrid control -scroll, sort, edit, … View Controller DataSet class DB 17 -tables -columns -rows 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 Each GUI component comes with a default Model implementation 18 ComboBoxModel, ListModel, TableModel, ButtonModel 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 Example: PhilosophersJList.java MVC Example in Java Add/remove items <<interface>> Javax.swing.ListModel <<abstract>> AbstractListModel DefaultListModel Javax.swing.JComponent JList modifies notifies DefaultList Model Example: JList 19 isEmpty(): boolean getSize(): int addElement(Object) removeElement(Object) elementAt(): Object removeElementAt(int) insertElementAt(int) indexOf(Object): int etc Javax.swing. 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: To create a combo box model: 20 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 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 DefaultComboBoxModel: JComboBox<String> ppComboBox; ... DefaultComboBoxModel<String> cbm = new DefaultComboBoxModel<String>( new String[] { "person", "student", "employee" }); ppComboBox = new JComboBox<String>(cbm); DefaultListModel: 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); 21 Lecture13 Tree Model TreeModel 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 … 22 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 Example Adding Tree nodes: 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"); category.add(book); Create a JTree JTree tree = new JTree(top); 23 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()); 24 Lecture13 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: 25 getColumnName getRowCount getColumnCount getValueAt import java.swingx.table.*; Lecture13 Example: DefaultTableModelDemo.java Using the DefaultTableModel 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); 26 Lecture13 Example: AbstractTableModelDemo.java Using the AbstractTableModel 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); 27 Lecture13 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 28 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 29 Lecture13 Summary: MVC Architecture A typical application includes software to maintain application data, present output outline view or print preview in a word processor graphical view of chess game process user input 30 document text in a word processor state of a chess game -- positions of pieces key presses mouse click on controls Lecture13