pages and boxesBuilding quick user interfaces
learning objectiveso Build a quick UI with pages and boxes
o understand how pages and boxes worko click events on boxes
o note: only available on web version (no phone support)
pageso 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
page definition
page my page ( s:string, n:number )
initialize
… initialize global variables …
display
… code with boxes …
page displayo made of nested vertical and horizontal
boxeso box attributes: color, border, width,
height, …
boxed boxed box->use horizontal layout boxed boxed boxed
boxed
page displayo use if, for, action calls, etc. in display
code
boxed boxed box->use horizontal layout for 0 ≤ i ≤ 3 do boxed
boxed
page contento text, pictures, whatever you post on
the wallboxed
box-> use horizontal layout
for 0 ≤ i ≤ 5 do
boxed
box->set width(2)
i-> post to wall
page measurement unitso in “em”, approximate height of
letter “M”box->set width(2)
o makes UI scale with text size
on tapped evento Can attach tapped event on boxes
box-> on tapped(handler)
where handler() is
push▸my page(“some parameter”)
special text boxo 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 …
page navigationo 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
