1 / 11

pages and boxes

pages and boxes. Building quick user interfaces. l earning objectives. Build a quick UI with pages and boxes understand how pages and boxes work click events on boxes n ote: only available on web version (no phone support). pages. similar to an action

elle
Télécharger la présentation

pages and boxes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. pages and boxes Building quick user interfaces

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

  3. pages • similar to an action • 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

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

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

  6. page display • use if, for, action calls, etc. in display code boxed boxed box->use horizontal layout for 0 ≤ i ≤ 3 do boxed boxed

  7. page content • 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

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

  9. on tapped event • Can attach tapped event on boxes box-> on tapped(handler) wherehandler() is push▸my page(“some parameter”)

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

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

More Related