Graphical User Interface GUI Nelson Padua Perez Chau Wen Tseng Department of Computer Science University of Maryland College Park Graphical User Interface GUI User interface Interface between user and computer Both input and output Affects usability of computer Interface improving with better hardware Switches light bulbs Punch cards teletype typewriter Keyboard black white monitor text Mouse color monitor graphics 1 Graphical User Interface GUI Goal Present information to users clearly concisely Make interface easy to use for users Make software easy to implement maintain for programmers Graphical User Interface GUI Design issues Ease of use Ease of understanding Ability to convey information Maintainability Efficiency 2 GUI Topics Event driven programming Model View Controller MVC Pattern GUI elements Java GUI classes Event driven Programming Normal control flow based programming Approach Start at main Continue until end of program or exit Event driven programming Unable to predict time occurrence of event Approach Start with main Build GUI Await events perform associated computation 3 Event driven Programming in Java During implementation Implement event listeners for each event Usually one event listener class per widget At run time Register listener object with widget object Java generates event object when events occur Java then passes event object to event listener Example of observer design pattern Event driven Programming in Java Example listeners actions causing event ActionEvent clicking button in GUI CaretEvent selecting portion of text in GUI FocusEvent component gains loses focus KeyEvent pressing key ItemEvent selecting item from pull down menu MouseEvent dragging mouse over widget TextEvent changing text within a field WindowEvent closing a window 4 Model View Controller MVC Pattern Developed at Xerox PARC in 1978 Separates GUI into 3 components application data visual interface user interaction Model View Controller View Model Controller MVC Interaction Order 1 2 3 4 5 6 User performs action controller is notified Controller may request changes to model Controller may tell view to update Model may notify view if it has been modified View may need to query model for current data View updates display for user 6 4 5 Model View 3 2 Controller 1 5 MVC Pattern Advantages Separates data from its appearance More robust Easier to maintain Provides control over interface Easy to support multiple displays for same data GUI Model GUI Model GUI MVC Pattern Model Contains application its data Provide methods to access update data Interface defines allowed interactions Fixed interface enable both model GUIs to be easily pulled out and replaced Examples Text documents Spreadsheets Web browser Video games 6 MVC Pattern View Provides visual representation of model Multiple views can display model at same time Example data represented as table and graph When model is updated all its views are informed given chance to update themselves MVC Pattern Controller Users interact with the controller Interprets mouse movement keystrokes etc Communicates those activities to the model Interaction with model indirectly causes view s to update 7 Principles of GUI Design Model Should perform actual work Should be independent of the GUI But can provide access methods Controller Lets user control what work the program is doing Design of controller depends on model View Lets user see what the program is doing Should not display what controller thinks is happening base display on model not controller Principles of GUI Design Combining controller view Appropriate if very interdependent Especially in small programs Separation of concerns Never mix model code with GUI code View should represent model as it really is Not some remembered status Controller should talk to model and view Avoid manipulate them directly 8
View Full Document
Unlocking...