webcl-hs-19

Web Clients HS 19

week 1

Note that todo items are not yet created: Todo View

week 2

• Todos are converted to uppercase
• Validation error (text red) occurs if todo text is shorter than three letters Todo View, Tests

week 3

• Controller contains businesslogic (Todos are editable only until done)
• The properties of attributes (like editable) are themselves observables
• Projectors create the views and register listeners for both directions Todo View, Tests

week 4

• Contains new application to manage persons in a master-/detailview
• Specific person projectors and rich attributes prepared to be completed Todo View, Person View, Tests

week 5

• Generalised projectors which can create the gui elements list and form
• The projectors take a model and a list of attributes to display
• Projectors can be reused for any model, automatically creating rich attributes, bindings, etc. Person View, Tests

week 6

• CSS-in-JS: The Projector now also provides a css style for the defined classnames which when used has precedence over external css definitions
• Dynamically added grid column for each passed attribute
• More independence by checking whether there is a child to replace or the div should just be added
• A focus animation on the inputfields in the style of material design Person View, Tests

week 7

• A custom gauge object drawn on a canvas with JS binding mouse and touch interactions
• Redrawing the sketch on changes to avoid pixelation
• Canvas needs to use cursor position to determine values
• Animated SVG-Image of eyes following the mouse pointer Gauge View, SVG Eyes View

week 8

• Drag&Drop enabled sketch for the staff and project planning tool
• Mathematically based SVG animation to fill a bucket Personnel planning, Bucket SVG

week 9

• Custom square element with programmable color, size and onclick-action and how it is used in html Custom element

week 10

Student submissions:

• Angular Bucket
• Svelte SVG
• React Eye SVG
• React Gauge
• Vue PigEyes

week 11

• Grails Backendserver for the pep personnel planning tool with example client (https://github.com/WebEngineering-FHNW/webcl-hs19-server)
• Pep client app uses fetch api to connect to backend (https://github.com/WebEngineering-FHNW/webcl-hs19-server/tree/restify)

week 12

=> Week 6 Person View observable updated with listener limit to resolve memory leak Person View, Tests

week 13

• Server Push Alternatives
• CSS media selector, simple timeline
• Stable bindings with view specific presentation models instead of listener limit
• ModelWorld with qualifiers to synchronize the attribute values Person View, Tests