Transcript TouchDevelop Book

TouchDevelop Book
CHAPTER 3&4
ZHONGWEI LI
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

 Wall is the screen and
Simple types on Wall
Script
accessible to any
datatype

<var>→ post to wall
 Directions of output: set
Wall
reverse & textbox


wall → set reversed(true)
wall → create text box(…)
Wall: Output Composite Value
 Demo-2

 Display of composite
Formatted CV on Wall
Display of Composite Value:
(0,0,0)
2/6/2013 12:00 AM
[123,456,-789]
…
Wall
value produces a
formatted result


Collections → list of items
Each item formatted in
appropriate manner
Wall: Output Other Types
 Media values
 Table 3-1: Picture, Board, Song, Sound, Picture Album, Song
Album
 Social 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
Wall: Update Contents
 Board: Demo-4

 Alter the value of
Pictures, massages and
shapes as sprites
Wall

wall → clear
 Use text box to alter text.
Board
Scripts:
…
◳ board := media →
create board(200)
…
currently posted items on
Wall


wall → create text box(…)
◳ tb → set text(…)
 Use board to update
sophisticated display
Sprites

◳ board → update on wall
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

 Opening web browser at a
specific webpage
Convert:

…abc%25,
#?...

web → browse(“url”)
Demo-9
 When parsing special
characters in a URL
decod
e
encod
e
...abc%252
5%2c%23
%3f...


web→url encode()
web→url decode()
Web: Create and Use Links
 Use wall with web links

Demo-10
 Use of Link datatype


Save link to people
Save link to web resources
 Wall can be used to hold
links to websites
Links to URL


Wall
Table 4-2
Post (link) to the wall
 Check internet
Web
Rerouces
.txt, .png…
connections



web → is connected
web → connection type
web → connection name
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
 JSON format: Weather2

data
Demo-12


Figure 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": [ …
 Downloading structured

Information extracting
web → download()
Special characters

web→html decode/encode
 Download JSON


web → download json()
Flickr & Twitter
Web: Downloading Info in XML format
 XML format: Weather2

Demo-13

1. Fetch data as String


Figure 4-8
<weather>
<curren_weather>
<temp>6</temp>
<temp_unit>c</te
mp_unit>
<wind>
<speed>4</speed>
<dir>ENE</dir>
<wind_unit>kph</
wind_unit>
</wind>…
 Processes
web→download()
2. Parse the string as XML

web→xml(
)
 Not easy to figure out the
XML data?

Go over DTD
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
 URLs and Webpages
Post & ask different types

 Updating Wall Contents



Text box & board
 Wall Events and Others




Tap wall events & Tap
board events
Pushing & Popping pages
Title & Subtitles
Wall buttons
Web-based links & wall
Check internet connection
 Down(up)loading Files


Download text, pics,
media contents
Uploading strings & pics
 Structured Data


Download JSON format
Download XML format
 REST and Web Request
QUESTIONS?
THANKS