1. pages and boxes Building quick user interfaces

2. learning objectives o Build a quick UI with pages and boxes o understand how pages and boxes work o click events on boxes o note: only available on web version (no phone support)

3. language recap o local variables: store and reuse a value var x := 5 x->post to wall o if statement: make decisions! if x = 5 then... else... o for loop: repeat code multiple times for 0 <= i < n do...

4. global variables o a global variable holds a value in memory and “on disk”; o a global variable can be read or written too; o A global variable is available everywhere definition data->x := 0 x := 0 reading x->post to wall update with new value x := 5 is the shorthand for ‘data’

5. pages o similar to an action causes blank page to be pushed on page stack o has 2 parts initialize: code run once to setup data display: code run every time something changes

6. page definition page my page ( s:string, n:number ) initialize … initialize global variables … display … code with boxes …

7. page display o made of nested vertical and horizontal boxes o box attributes: color, border, width, height, … boxed box->use horizontal layout boxed

8. page display o use if, for, action calls, etc. in display code

9. page content o text, pictures, whatever you post on the wall boxed box-> use horizontal layout for 0 ≤ i ≤ 5 do boxed box->set width(2) i-> post to wall

10. page measurement units o in “em”, approximate height of letter “M” box->set width(2) o makes UI scale with text size

11. on tapped event o Can attach tapped event on boxes box-> on tapped(handler) where handler() is push ▸ my page(“some parameter”)

12. special text box o Text box content box-> edit text(“initial text”, multiline) o Text edit events box->on text editing(h1) where h1(text : String) is … on each key press … box->on text edited(h2) where h2(text : String) is … when done editing …

13. page navigation o invoke a page: push new page on top push ▸ my page(“some parameter”) o remove current page (pop top of page stack) wall-> pop page causes previous page to be re-displayed