Apps Find the latest version of this document at //touchdevelop.com/slides.

21
apps the latest version of this document at http://touchdevelop.com/slid

Transcript of Apps Find the latest version of this document at //touchdevelop.com/slides.

Page 1: Apps Find the latest version of this document at //touchdevelop.com/slides.

apps

Find the latest version of this document at http://touchdevelop.com/slides .

Page 2: Apps Find the latest version of this document at //touchdevelop.com/slides.

learning objectiveso UI: interacting with users

o web requests: interacting with the web

o libraries: reuse code from others

o data: storing and reading structure data

Page 3: Apps Find the latest version of this document at //touchdevelop.com/slides.

UIboxcraft

Page 4: Apps Find the latest version of this document at //touchdevelop.com/slides.
Page 5: Apps Find the latest version of this document at //touchdevelop.com/slides.

boxeso nested vertical and horizontal boxeso box attributes: color, border, width, height, margin,

padding … boxed boxed box->use horizontal layout boxed boxed boxed

boxed

Page 6: Apps Find the latest version of this document at //touchdevelop.com/slides.

pageso the app has a stack of pages, only

the topmost is visibleo page has 2 parts

• initialize: code run once to setup data

• display: code run every time something changes – build the boxes!

Page 7: Apps Find the latest version of this document at //touchdevelop.com/slides.

editing texto “show a text box”

box->edit text(data->text, true)

o “do something when text changes”

box->on text editing(handler)

where handler(text : string) is

data->text := text

Page 8: Apps Find the latest version of this document at //touchdevelop.com/slides.

basic skinningo set background and foreground colors

box->set foreground(colors->white)

box->set background(colors->black)

o give me some space

box->set margins(1,1,1,1)

box->set padding(1,1,1,1)

1 ‘em’ = height of ‘M’ in the current font

Page 9: Apps Find the latest version of this document at //touchdevelop.com/slides.

more skinningo stretch horizontally

box->set horizontal alignment(1, 1)

o arrange child boxes horizontally

box->use horizontal layout

1 is a “weight”

Page 10: Apps Find the latest version of this document at //touchdevelop.com/slides.

buttonso “do something when tapped”

box->on tapped(handler)

where handler() is

do something!

Page 11: Apps Find the latest version of this document at //touchdevelop.com/slides.

golden rules of boxcraft

“Thou shalt only read data when building boxes; thou shalt do anything in callbacks.”

o yes!

boxed data->text->post to wall

o Yikes!

boxed data->text := “can’t write data”

writing data is not allowed

reading data is allowed

Page 12: Apps Find the latest version of this document at //touchdevelop.com/slides.

web requestsweb apis

Page 13: Apps Find the latest version of this document at //touchdevelop.com/slides.

download and parseo download datavar text := web->download(url)

o parse datavar feed := web->feed(text) // rss, atom

var xml := web->xml(text)

var json := web->json(text)

link

Page 14: Apps Find the latest version of this document at //touchdevelop.com/slides.

more controlo fully featured HTTP requests and responses

var request := web->create request(url)var response := request->send

o async for responsive UI

var request := web->create request(url)

request->on response received(handler)

where handler(response)

…request->send async

Page 15: Apps Find the latest version of this document at //touchdevelop.com/slides.

geo-locationretrieve the longitude and latitude

o var loc := senses->current location

• might use WiFi, cell tower, IP address, GPS

• might have low precision 1 mile

Page 16: Apps Find the latest version of this document at //touchdevelop.com/slides.

librariesreusing code

Page 17: Apps Find the latest version of this document at //touchdevelop.com/slides.

librarieso a library is a script that can be

‘used’ by other script• twitter search

• data.gov reader

• text validators

• …

Page 18: Apps Find the latest version of this document at //touchdevelop.com/slides.

demoLet’s use the ‘twitter search’ library…

o open script editor,o scroll down to librarieso type /mdvfo select ‘twitter search’

Page 19: Apps Find the latest version of this document at //touchdevelop.com/slides.

datarecords

Page 20: Apps Find the latest version of this document at //touchdevelop.com/slides.

recordso structured data automatically saved

• table: similar to your Excel table.

• index: table with index lookup

• object: garbage collected objects

• decorator: add fields to existing objects

Page 21: Apps Find the latest version of this document at //touchdevelop.com/slides.

recordso programming task: store tweets in

records