CS349

A2-SimpleKit

Simple UI toolkit written by Daniel Vogel (CS349 prof).

Emily told me you can debug from chrome. Bless.

Released on Feb2. Due Fri Feb 16 at 6pm.

• Read the assignment on Feb2 or 3.
• Have an idea of the design and plan. Don’t just start with what’s easier. From first assignment, it made my life sooooo much harder.

Implement the MVC and Observer Design Pattern for this project.

Very important to understand how MVC works.

• Model is the Subject.
• View is the Observer which update()
• Model is where we store the data and it is the Subject
• The Subject modifies all the Views.

Design: use todo demo mvc. Just copy it from his todo demo over and start from it.

Problems:

• Wrap (layout function)? Did I do it? Can’t remember
• Status bar selected position
• Id of cards (saw prof use global variable to give unique ids)
• Deselect all shapes when clicking in the list view
• Star hittesting
• Right view
• Right view star textfields (something wrong with logic, when deleting doesn’t change automatically, but adding works??)
• Left view fix the boundary and resizing
• Figure out how to draw the button when it’s disabled
  • I’m stoopid, I only had to get rid of super(). seriously at this point just kill me
• Fix the selected drawing
• Javascript callback function (understand)

prof suggestions

Use mvc 2 example and not mvc 1.

When you create the Model keep your data private!! make sure to have a getter so no one else can go in and mutate the data.

Remember to call notifyObservers();

Do the View with Integrated Controller demo for A2.

For the last demo in MVC:

• Root has 2 SKContainer inside. One for left and right side.
• He created a new SKContainer to
• fillWidth = 1 : means so it can expand
• He has 2 views on the left and one on the right.
• Now look at the model.ts:
  • when you create a new todo, add it to the todos list and then notifyObservers(). So everytime we click the Add button, it calls the create() function to create a new todo
• formView.ts
  • button controller
  • views knows about ID (important), need to send it back to model
  • we can do a view within a view. So in his left side, each task is a view of a view
• listViews.ts
  • checkbox
    • clear children to make things easier apparently for the ids?
• todoView.ts
  • four different elements:
  • update(): uses the model.ts, read: todo(), all()
  • constructor: calls the model update, delete and select
• infoViews.ts
  • using center layout
  • has one SKLabel: givng ”?“
  • make sure to call Observer.
  • set up is strings in update() change message based on state
• stackCol.ts
  • Make stack talk to each other
  • put things all the way down
  • how he created it: used function makeStackColLayout()
  • 0.4.1: when you add a layout first, you get a bunch of warnings, first pass the container is 0, but second pass it has the sizes
    • Settings.LayoutWarnings = true: get those annoying warnings

Build parts of the model, but as he created the interface, he added new things. Model serves the views. Never draw code in your model. Don’t use gc in your model. The model is the state of your interface, which stat eis selected totally depends on your model. Put stuff in the model that tracks stuff.

A2 Example Solution Video

Video Link  password: mAH8MfWsGw

This video is only for students enrolled in W24 CS349.
Do not share or download this video

This is the order of topics I cover:

1. General Structure in main.ts
   • 4 views: toolbar, list, status, and edit
   • fillColLayout is just like Layout.fillRowLayout, but vertical
2. Model in model.ts
   • Shape type including props for Square and Star
   • unique ID and selected flag
   • array of Shapes (note copy of array in getter)
   • constructor creates the 8 random squares (num is arg)
3. ToolbarView
   • layout is fillRow
   • button controllers call corresponding model methods
   • model methods …
   • update sets button enabled/disabled state
4. MySKButton
   • extended from SKButton
   • add enabled property
   • prevent hitTest if not enabled
   • draw has special disabled code (copied from SKButton, change to grey)
5. StatusView
   • fillRow layout with two SKLabels
   • update sets text for SKLabels depending on model state
   • model properties …
   • (“FULL” and “SHIFT” were added for debugging and demo, not requirements)
6. ListView
   • wrapRowLayout
   • update clears all children, then adds in SKSquare and SKStar widgets as needed
   • also sets widget selected state from model
   • each shape widget gets a “click” controller:
     • customized for shape’s selected state and how many shapes are selected in total
     • stops propagation
   • controller on listView container deselects all shapes and clears editor state (by calling methods on model)
7. SKShape widget in shape.ts
   • stores model shape ID
   • isSelected flag (adds highlight rect)
   • inEditor flag when being edited (prevents hover, select highlight, and grey outline)
   • handleMouseEvent implemented to have “click” binding
   • referenceSize sets the reference size of shapes to 100 x 100
   • scaleFactor to fit inside contentBox without changing aspect ratio (used in draw for Square and Star)
8. SkSquare and SKStar widgets in shape.ts
   • additional props
   • draw draws shape centred in contentBox using referenceSize for scaling (e.g. 95px star is centred and has some space around outer points)
9. EditView
   • uses centred Layout with fillWidth and fillHeight for child
   • update sets child view to be either a MessageView or one of the edit shape views
   • has code to remove child view from model observer lists (optional, works fine without for purpose of assignment)
10. MessageView
    • simple view to display two different messages
11. EditShapeView
    • abstract class with common edit shape view setup
      • makeFormContainer to setup bottom part of edit area
      • makeFormRow creates a row container with a label and a textfield
      • Validator used by square and star to validate numeric input in a given range (rejects anything not a digit or space, sets a flag whether input is in certain range)
12. EditSquareView
    • creates a SKSquare widget in top
    • creates a form container in bottom with a “hue” form row
    • hue controller uses hueValidator Validator
    • update uses hueValidator to set shape property
      • only want to update shape if valid value
13. EditStarView
    • same as EditSquareView, just 3 form rows, 3 validators, and 3 props to update
    • note update also keeps non-editable inner radius synched with model