pages and boxes building quick user interfaces. learning objectives o build a quick ui with pages...
TRANSCRIPT
![Page 1: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/1.jpg)
pages and boxesBuilding quick user interfaces
![Page 2: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/2.jpg)
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)
![Page 3: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/3.jpg)
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 4: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/4.jpg)
page definition
page my page ( s:string, n:number )
initialize
… initialize global variables …
display
… code with boxes …
![Page 5: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/5.jpg)
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 6: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/6.jpg)
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 7: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/7.jpg)
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 8: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/8.jpg)
page measurement unitso in “em”, approximate height of
letter “M”box->set width(2)
o makes UI scale with text size
![Page 9: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/9.jpg)
on tapped evento Can attach tapped event on boxes
box-> on tapped(handler)
where handler() is
push▸my page(“some parameter”)
![Page 10: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/10.jpg)
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 11: 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](https://reader036.vdocuments.site/reader036/viewer/2022082917/551b7465550346a6148b50f3/html5/thumbnails/11.jpg)
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