pages and boxes building quick user interfaces. learning objectives o build a quick ui with pages...

Download 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

Post on 01-Apr-2015




0 download

Embed Size (px)


  • Slide 1

pages and boxes Building quick user interfaces Slide 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) Slide 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 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 Slide 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 Slide 6 page definition page my page ( s:string, n:number ) initialize initialize global variables display code with boxes Slide 7 page display o made of nested vertical and horizontal boxes o box attributes: color, border, width, height, boxed box->use horizontal layout boxed Slide 8 page display o use if, for, action calls, etc. in display code Slide 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 Slide 10 page measurement units o in em, approximate height of letter M box->set width(2) o makes UI scale with text size Slide 11 on tapped event o Can attach tapped event on boxes box-> on tapped(handler) where handler() is push my page(some parameter) Slide 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 Slide 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