pages and
boxes
Building quick user interfaces
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)
pages
o
similar to an action
•
o
causes blank page to be pushed on page
stack
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 display
o
made of nested vertical and horizontal
boxes
o
boxed
box attributes: color, border,
width, height,
boxed
…
box->use horizontal layout
boxed
boxed
boxed
boxed
page display
o
use if, for, action calls, etc. in display code
boxed
boxed
box->use horizontal layout
for 0 ≤ i ≤ 3 do
boxed
boxed
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
page measurement
units
o
in “em”, approximate height of letter “M”
box->set width(2)
o
makes UI scale with text size
on tapped event
o
Can attach tapped event on boxes
box-> on tapped(handler)
where handler() is
push▸my page(“some parameter”)
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 …
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