1 / 18

Model / View

Model / View. COMP 401 Spring 2013 Lecture 22 4/9/2013. ColorChooser Widget Review. lec21.v7 Color object embedded within the widget Fine for a small piece of immutable information Not so great for a complex abstraction UI may not always be needed. Model – View Pattern.

cain
Download Presentation

Model / View

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Model / View COMP 401 Spring 2013 Lecture 22 4/9/2013

  2. ColorChooser Widget Review • lec21.v7 • Color object embedded within the widget • Fine for a small piece of immutable information • Not so great for a complex abstraction • UI may not always be needed

  3. Model – View Pattern • Keep object representing the data separate from widget providing the UI • Model: Object representing abstraction within your application. • View: Object (widget) representing UI to model. Inform when data changes. Model View Inform when user interacts. COMP 401 :: Spring 2012

  4. Model-View Example • Playlist • This is the model object • Manages a list of Song objects • PlaylistView • This is the view object • Provides a UI for interacting with Playlist

  5. lec22.v1 • Playlist

  6. lec22.v2 • PlaylistView • Encapsulates a reference to Playlist object • Builds a simple view of the playlist

  7. lec22.v3 • AddSongWidget • An interface for adding a new song to the Playlist

  8. lec22.v4 • Connecting model to view • Model needs to inform the view whenever it changes so that the view can rebuild to reflect any changes. • My approach here is to make the model observable. • And to register PlaylistView as an observer • Notes: • revalidate() required whenever contents of a Java Swing container are changed

  9. lec22.v5 • Notice duplication of code in constructor when list is first built and when rebuilt when responding to model update. • Refactor into a helper method. • JScrollPane • Wraps another Swing component that may change size and provides scrolling view as needed.

  10. lec22.v6 • Add a shuffle button

  11. lec22.v7 • Create more interesting song listing • SongListingWidget • Includes a buttons for removing the song from the playlist and moving them up and down the list. • BorderFactory • Swing class for creating borders for components • Unicode characters • Lots of glyphs available • Changed Song to use star glyph for rating • Added method to playlistfor moving songs

  12. Model / View Inform when data changes. Model View Inform when user interacts.

  13. Playlist / PlaylistView update() Playlist PlaylistView shuffle() AddSongWidget addSong() SongListingWidget SongListingWidget removeSong(), moveSong() SongListingWidget SongListingWidget SongListingWidget SongListingWidget

  14. Model / View Summary • Model provides access to an abstraction. • Any manipulation / modification done via public methods provided by model. • View builds an interface for rendering current state of the model. • Interactions with interface translated to appropriate calls on model methods.

  15. Model-View Inadequacies • Good for simple, direct UI elements • Model driving UI is just one object • UI reflects model state directly • User interactions with view have direct mapping to updates to model. • Complex behavior harder to express • Dynamic user interfaces • Complex models • Contextual user interactions COMP 401 :: Spring 2012

  16. Classic MVC http://www.oracle.com/technetwork/articles/javase/mvc-136693.html COMP 401 :: Spring 2012

  17. Alternate MVC http://www.oracle.com/technetwork/articles/javase/mvc-136693.html COMP 401 :: Spring 2012

  18. A7 • ChessGame, ChessPiece make up the model • ChessGameView is view • CommandLoop acts as controller update() ChessGame ChessGameView update() ChessPiece ChessPiece moveAttempted() ChessPiece ChessPiece ChessPiece CommandLoop ChessPiece moveTo ()

More Related