CHAPTER 3&4ZHONGWEI LI

TouchDevelop Book

What are we covering

Review of Chapter 1-2 TouchDevelop as a scripting language: actions, events,

table and record types, global status and library references

The Wall: using screen Output & Input Tap events Popping, Pushing | Title & Subtitle | else

The Web: handling web-based resources Working with URLs Download and Upload files Structured data REST and web request

Wall: Output Simple Types

Demo-1 Simple types on Wall

Wall is the screen and accessible to any datatype <var>→ post to wall

Directions of output: set reverse & textbox wall → set

reversed(true) wall → create text

box(…)

Wall

Script

Wall: Output Composite Value

Demo-2 Formatted CV on Wall

Display of composite value produces a formatted result Collections → list of

items Each item formatted in

appropriate mannerWall

Display of Composite Value:

(0,0,0)2/6/2013 12:00 AM[123,456,-789]…

Wall: Output Other Types

Media values Table 3-1: Picture, Board, Song, Sound, Picture

Album, Song AlbumSocial values

Table 3-2: Appointment, Contact, Link, Location, Message, Place

Home network values Table 3-3: Media Player, Media Server, Printer

Web values Table 3-4: Web Request, Json Object, Xml Object

Wall: Input of Values from Touchscreen

Wall API provides methods that prompt user to enter/pick value Table 3-5: ask boolean/number/string Table 3-5(cont): pick date/string/time

Example of “prompting for input” Demo-3

Board

Wall: Update Contents

Board: Demo-4 Pictures, massages

and shapes as sprites

Alter the value of currently posted items on Wall wall → clear

Use text box to alter text. wall → create text

box(…) ◳ tb → set text(…)

Use board to update sophisticated display ◳ board → update on

wall

Wall

Sprites

Scripts:…◳ board := media → create board(200)…

Wall: Tap Events

Tap Wall events Nearly one tap event for every datatype (that’s

displayed on screen) The tapped item is passed as a parameter to the event Demo-5

Tap board events Control over the displayed values (to be tapped) Define variable with Board: Sprite/Sprite Set type in

data section causes new event types available(Demo-6)

For sprites, even names has tap/swipe/drag(Demo-6) More events associated with board(e.g. tap anywhere

else)

Wall: Something else

Pushing and Popping pages Stack of pages (each page as an instance of the wall)

Titles and Subtitles Display titles on top of screen (Demo-7)

Wall buttons Button icons may be displayed as page

buttons(bottom) Buttons can trigger events(Demo-8) Methods of buttons in Table 3-8

On-demand creation of output empty space event

Web: Working with URLs

Encoding & Decoding Convert:

Opening web browser at a specific webpage web → browse(“url”) Demo-9

When parsing special characters in a URL web→url encode() web→url decode()

…abc%25,#?...

...abc%2525%

2c%23%3f..

.

en

cod

e

deco

de

Web: Create and Use Links

Use wall with web links Demo-10

Use of Link datatype Save link to people Save link to web

resourcesWall can be used to

hold links to websites Table 4-2 Post (link) to the wall

Check internet connections web → is connected web → connection type web → connection

name

Wall

Web Rerouces.txt, .png

…

Links to URL

Web: Download and Upload

TouchDevelop API provides methods for accessing different kinds of web resources Table 4-3

Download files (Demo-11) Text or HTML Picture Sounds and music

Web: Downloading Info in JSON format

Downloading structured data Information extracting web → download() Special characters

web→html decode/encode

Download JSON web → download json() Flickr & Twitter

Fig

ure

4-

6

{ "weather": { "curren_weather": [

{ "humidity": "87", "pressure": "1005", "temp": "6",

"temp_unit": "c”, "weather_code": "1", "weather_text": "Partly cloudy",

"wind": [ {"dir": "ENE", "speed": "4", "wind_unit": "kph" } ] } ],

"forecast": [ …

JSON format: Weather2 Demo-12

<weather> <curren_weather> <temp>6</temp> <temp_unit>c</temp_unit><wind> <speed>4</speed> <dir>ENE</dir> <wind_unit>kph</wind_unit> </wind>…

Web: Downloading Info in XML format

XML format: Weather2 Demo-13

Processes 1. Fetch data as String

web→download() 2. Parse the string as

XML web→xml( )

Not easy to figure out the XML data? Go over DTD

Fig

ure

4-

8

REST Guidelines and Web Requests

HTTP GET and POST requests Access of RESTful web services

HTTP PUT and Delete requests Not supported by WP platform, yet there’re

alternative choices provided by many RESTful web services

API method web→create to construct HTTP requests The request is an instance of Web Request type The result comes back as an instance of Web

Response type Table 4-4, 4-5

Summary

Wall Output & Input Post & ask different

typesUpdating Wall

Contents Text box & board

Wall Events and Others Tap wall events & Tap

board events Pushing & Popping

pages Title & Subtitles Wall buttons

URLs and Webpages Web-based links & wall Check internet

connectionDown(up)loading

Files Download text, pics,

media contents Uploading strings &

picsStructured Data

Download JSON format

Download XML formatREST and Web

Request

THANKS

QUESTIONS?