Assignment 1 Design and implement an interactive tool for creating the layout of comic strips UI software architectures & Modeling interaction (part of this content is based on previous classes from A. Bezerianos, S. Huot, M. Beaudouin-Lafon, N.Roussel, O.Chapuis) https://www.lri.fr/~fanis/teaching/ISI2014/assignments/ass1/ structure of an interactive system What we see � output visible part What we act with « front end » � input Software architecture - MVC What happens � treatment � computation invisible part � communication « back end » � data (storage and access)
example 1 example 2 - data model (albums, artists, categories, etc.) - geometric models - communication with iTunes - calculations (transformations, server rendering, etc.) - manage queries - store and access designs - manage sales - security back end back end front end front end link between the two parts example 3 … programming using an organization model organize, structure an interactive application by separating: � Data and their treatment: the Model - tabular structure - storage and data access � Data representation: the View back end � Application behavior to input: the Controller front end
MVC: ideal interactions between Model «Model–View–Controller» (MVC) components MVC is : Model - application functionality � A design pattern (standardized design solution independent of - data access and management programming language) � A software architecture (a way to structure an application or a set of software packages) Introduced in 1979 by Trygve Reenskaug View Controller Strongly linked to OO programming (Smalltalk) - presentation of data and - manage user input functionality to the user - update application behavior user MVC: interactions between components MVC: interactions between components Model Modèle Model - application functionality - fonctionnalités de l’application - application functionality - data access and management - data access and management - accès aux données et traitements View Controller Vue View Contrôleur Controller - presentation of data and - manage user input - présentation des données et des - presentation of data and - gestion des entrées de l’utilisateur - manage user input functionality to the user - update application behavior fonctionnalités à l’utilisateur functionality to the user - comportement de l’application - update application behavior user input
MVC: interactions between components MVC: interactions between components Modèle Model Model Modèle - application functionality - fonctionnalités de l’application - application functionality - fonctionnalités de l’application - accès aux données et traitements - data access and management - data access and management - accès aux données et traitements notification of state change View Vue Controller Contrôleur View Vue Controller Contrôleur - présentation des données et des - presentation of data and - manage user input - gestion des entrées de l’utilisateur - présentation des données et des - presentation of data and - gestion des entrées de l’utilisateur - manage user input functionality to the user fonctionnalités à l’utilisateur - update application behavior - comportement de l’application functionality to the user fonctionnalités à l’utilisateur - comportement de l’application - update application behavior notification notification of input of input user input user input MVC: interactions between components MVC: interactions between components Model Modèle internal operations Modèle Model internal operations - application functionality - fonctionnalités de l’application - application functionality - fonctionnalités de l’application - data access and management - accès aux données et traitements - accès aux données et traitements - data access and management notification notification of state change of state change select a View Vue View Contrôleur Controller View Vue Contrôleur Controller - presentation of data and - présentation des données et des - gestion des entrées de l’utilisateur - manage user input - présentation des données et des - presentation of data and - gestion des entrées de l’utilisateur - manage user input fonctionnalités à l’utilisateur functionality to the user - comportement de l’application - update application behavior functionality to the user fonctionnalités à l’utilisateur - update application behavior - comportement de l’application notification notification of input of input user input user input
MVC: interactions between components MVC: interactions between components Model internal operations Model internal operations - application functionality - application functionality - data access and management - data access and management request state request state notification notification of state change of state change select a View select a View View Controller View Controller - presentation of data and - manage user input - presentation of data and - manage user input functionality to the user - update application behavior functionality to the user - update application behavior notification notification of input of input user input user input refresh MVC: interactions between components MVC: referencing between components Alternative architecture Model internal operations Model - application functionality - data access and management notification of state change update a View View Controller View Controller Model - presentation of data and - manage user input View Model functionality to the user - update application behavior Controler notification of input user input refresh
MVC: the model MVC: the view The model: The view: � Represents data � Shows the (or one) representation of the data in the model � Gives access to data � Ensures consistency between data representation � Gives access to data management functionality and their state in the model (application) � Exposes the application functionality Output of the application Functional layer of the application MVC: the controller advantages of MVC The controller: Clean application structure � Represents the application behavior w.r.t. user Adapted to concepts of O-O programming actions Independence of � Translates user actions to actions on the model data – representation – behavior � Calls the appropriate view w.r.t. the user actions Modular and reusable and the model updates Effect and treatment of input
disadvantages of MVC MVC and Java Swing Widgets Model-View-Controller separation not strict Implementation complex for large applications Model categories: Too many calls between components Visual status of GUI controls, e.g., pressed or armed button � « Spaghetti » code Application-data model, e.g., text in a text area Swing uses a model by default for each widget Controller and View are often tightly linked to Model (and often to each other) View & Controller (often part of the same UI object) Look & Feel + Listener Examples : JButton, JLabel, JPanel, etc. need to adapt implementation example example The data Object[][] data = { � � {"Kathy", "Smith","Snowboarding", new Integer(5), new Boolen(false)}, � � {"John", "Doe", "Rowing", new Integer(3), new Boolean(true)}, � {"Sue", "Black","Knitting", new Integer(2), new Boolean(false)}, � {"Jane", "White","Speed reading", new Integer(20), new � � Boolean(true)}, �� � {"Joe", "Brown","Pool", new Integer(10), new Boolean(false)} � }; � Table Model Table Object Table Data Object javax.swing.JTable javax.swing.table.TableModel
example example The model The view class MyTableModel extends AbstractTableModel { � TableModel dataModel = new MyTableModel(); � � private String[] columnNames = … � � private Object[][] data = … � JTable table = new JTable(dataModel); � JScrollPane scrollpane = new JScrollPane(table); � � public int getColumnCount() { � � � return columnNames.length; � � } � � public int getRowCount() { � � � return data.length; � � } � � public String getColumnName(int col) { � � � return columnNames[col]; � � } � � public Object getValueAt(int row, int col) { � � � return data[row][col]; � � } � � … � } � example The controller public class MySelectionListener implements ListSelectionListener { � private JTable table; �� � public MySelectionListener(JTable table){ this.table = table; Modeling Interaction table.setCellSelectionEnabled(true); ListSelectionModel cellSelectionModel = table.getSelectionModel(); cellSelectionModel.setSelectionMode(ListSelectionModel.SINGLE_SELECTION); cellSelectionModel.addListSelectionListener(this); � } � � public void valueChanged(){ � � � ... � � } � } �
Recommend
More recommend
