Connecting to external data services using flash lite

About me: • James Talbot • Build and mentor Flash Lite, Flash and Flex Applications for large companies including AOL, TV Guide, and JP Morgan • Author: Object Oriented ActionScript 2 from Peachpit press • Author: Flex 2 Training from the Source from Pearson Worldwide • DVD: Total Training Flex 2 • Architected Flex, Flash and Flash Lite courseware for Adobe • Meet with instructors and developers all around the world. 2 2006 Adobe Systems Incorporated. All Rights Reserved.

Goals: Understanding the best data structure that fits your connected Flash Lite application Create a framework which provides the ability to connect to external data services 3 2006 Adobe Systems Incorporated. All Rights Reserved.

Thinking Mobile cont. Dynamic Data Structure is important Data Analysis XML vs. &name=value Keep in mind that mobile data has a price Keep code as simple as possible to fit any mobile phones Load only the data that is needed Make sure you have control over the data sent to your application 6 2006 Adobe Systems Incorporated. All Rights Reserved.

Thinking Mobile cont. Latency: mobile users do not like to wait Processing: reduce mobile CPU utilization Reduce code size and complexity: every bytes and every CPU cycles count Use small image (Kbytes) Free-up memory Loading dynamic data, keep an eye on memory consumption 7 2006 Adobe Systems Incorporated. All Rights Reserved.

XML versus &name=value Data analysis Does it make sense to use XML instead of &name=value data structure in FL2.0? Do I use all XML data feed tags in RSS? <title> <category> <link> <description> Media and so on… 8 2006 Adobe Systems Incorporated. All Rights Reserved.

XML versus &name=value cont. &name=value XML Cons: Cons: Verbose Need to create data structure Increase latency Need indexing Increase processing, need parser Data is not well structured Does not work on FL1.1 Pros: Pros: Is not verbose Standard data interface, Fast processing web services Works with FL1.1 and 2.0 Data is well structured Systems can “talk” XML 9 2006 Adobe Systems Incorporated. All Rights Reserved.

XML versus &name=value cont. RSS 2.0 XML data structure <rss version="2.0"> <channel> …….. <item> <title>……..</title> <description>……..</description> </item> <item> <title>……..</title> <description>……..</description> </item> …….. …….. </channel> </rss> 10 2006 Adobe Systems Incorporated. All Rights Reserved.

1. RSS example with FL1.1: Hands-on This Flash Lite 1.1 application will use the See rss1.fla and rss1.php &name=value data structure and a server side RSS parser The server RSS parser will extract each Advantages: item nodes of the RSS feed Current FL1.1 enabled phone users can For each item node it will return the use it indexed title and description elements Cost saving for the mobile user It will also return the total numbers of items Reduced latency, remember to think as a user!! It will include some messages and flags Control over data sent to the user Here is the data structure: &title1=.......&description1=.......&title2=....... Disadvantages: &description2=.......&flag=.......&totalitems=.. .....&end=end Need RSS server parser 11 2006 Adobe Systems Incorporated. All Rights Reserved.

1. RSS example with FL1.1 cont. Server side parser rss1.php: // Link to RSS 2.0 feed 1. $link_to_rss_feed ="http://www.flashmobilegroup.org/?feed=rss2"; 2. $i=1; // Counter to append to &variables to return to the client 3. $xml =simplexml_load_file($link_to_rss_feed); // This PHP 5 function loads the entire XMLfeed 4. foreach ($xml->channel[0]->item as $item) { // Parse each item in the RSS 5. if($item) { 6. // Need to strip html tags since Flash Lite 1.1 does not support html in dynamic text fields 7. $title = strip_tags($item->title); 8. $description = strip_tags($item->description); 9. // Replace special symbols & 10. $title = str_replace("&", "", $title); 11. $description = str_replace("&", "", $description); 12. // Return the content with the appropriate index 13. echo "&title$i=".$title; 14. echo "&description$i=".$description; 15. $i++; 16. } else { 17. // Send and Error message if content is not found 18. echo "&msg=Content not found"; 19. echo "&flag=error"; 20. echo "&end=end"; 21. exit; 22. } 23. } 24. $i=$i-1; 25. echo "&flag=ok"; 26. echo "&totalitems=".$i; 27. echo "&end=end"; 28. 12 2006 Adobe Systems Incorporated. All Rights Reserved.

Using white space in XML files •Using white space - tabs, returns, etc. - in your files makes the files easier to read and edit •Previous example above used tabs and returns •Following example does not, and has no extraneous white space <?xml version="1.0" encoding="UTF-8"?><bikes><bike id="1" name="Kona"/><bike id="2" name="VooDoo"/><bike id="3" name="Rocky Mountain"/></bikes> •If the XML to be loaded includes white space, you must tell Flash Lite to ignore it, or it the XML will not be parsed correctly •Done by setting the ignoreWhite property of the XML class to true

Using tag-based markup in XML files XML text content includes HTML markup, or any other tag-based markup, •If the text nodes will contain < and > characters which will prevent Flash Lite from correctly parsing the XML •Any text nodes containing tag-based markup characters must be escaped directly within your XML using a CDATA tag •Escaped text must be contained within tags <![CDATA[ ... ]]>

Using tag-based markup in XML files •The following examples show HTML markup escaped within a text node using a CDATA tag: <?xml version="1.0" encoding="UTF-8"?> <bikes> <bike id="1"> <brand>Kona</brand> <description><![CDATA[ A <b>back country dual suspension</b> bike with a supreme balance of lightweight performance and out of bounds strength. <br>Mid-weight (28-30 lb) with 4 in travel up fr ont and bac k k e e p y o u f r e s h f o r all day epic adventures. ]]> </description> </bike> </bikes>

Using the XML class •First step is to create an XML object in ActionScript •XML data may be passed to the constructor, if available, or loaded from an external file once the object has been creaed

Loading inline XML •One approach to creating a parseable (readable) XML object is to pass the XML data to the class contructor, as a String. var bikeData:String = "<?xml version="1.0" encoding="UTF- 8"?><bikes><bike id="1" name="Kona"/><bike id="2" name="VooDoo"/><bike id="3" name="Rocky Mountain"/></ bikes>"; var xBikes:XML = new XML(bikeData);

Loading external XML •Before loading external XML data, determine whether you need to set the ignoreWhite property of your XML object to true, because the loaded data includes white space for readability var xBikes:XML = new XML(); xBikes.ignoreWhite = true;

Loading external XML •Then load the XML into the XML object by passing the path to the XML file as a parameter to the load() method // relative path to XML file in same domain xBikes.load("assets/bikes.xml"); // absolute path to XML file in external domain // (cross-domain security implicated) xBikes.load("http://www.adobe.com/bikes.xml"); // absolute path to XML generating script // (cross-domain security implicated) xBikes.load("http://www.adobe.com/coldfusion /getBikeInfoXml.cfm");

Making HTTP Requests to Different Domains •By default, the Flash Lite player does not allow an application to request XML data - or any content of any form - from a domain other than the one from which the requesting SWF was served

Deploying a cross-domain policy file •If you need to request XML data from a different domain than the serving domain, you must deploy a cross domain policy file on the server from which the XML data will load •File needs to be placed at the root of the web server that will serve the HTTP request for the XML file The Flash Lite security model

Deploying a cross-domain policy file •A cross domain policy file must be saved with the specific file name crossdomain.xml in the web root directory of the server from which the SWF running in a Flash Lite player will request the XML data (or any other asset) •Cross domain policy files may restrict access to specific domains or IP addresses, and may use wildcards <?xml version="1.0"?>  <cross-domain-policy> <allow-access-from domain="www.adobe.com" /> <allow-access-from domain="*.foo.com" /> <allow-access-from domain="105.216.0.40" /> </cross-domain-policy>

Deploying a cross-domain policy file You may also use a wildcard to allow access from any domain: <?xml version="1.0"?>  <cross-domain-policy> <allow-access-from domain="*" /> </cross-domain-policy>

Handling the asynchronous response from XML requests •Flash Lite makes an asynchronous request to the server using the XML document object You must wait for the server to send the results back to the Flash Lite player You cannot use the loaded XML immediately •When the requested data has been fully loaded and parsed onLoad event of the XML object is broadcast onLoad event is also fired if the XML file fails to load •Event handler is passed one Boolean parameter true if the XML loaded correctly false if the XML failed to load (for example, the requested XML file was not found)

Handling the asynchronous response from XML requests var bikes:XML = new XML(); bikes.load("assets/bikes.xml"); bikes.onLoad = function(success:Boolean):Void { if(success) { // do something with XML data } else { // give error message } }

Walkthrough 1: XML ,Loading In this walkthrough, you will perform the following tasks: •Migrate the timeline code to a class file •Review the contents of the clues.xml file •Create an XML object •Call the load() function on the XML object •Create an onLoad event handler for the XML object

Parsing and using XML data •Flash Lite player contains no automatic way to parse XML files into native ActionScript data structure •You must manually traverse the XML object and convert the XML data into native ActionScript data structures •Each node within the loaded XML object is represented by an XMLNode object. So, you traverse the data using properties of the XMLnode class: Property Description Array of child XMLNode objects for the specified node childNodes hasChildNodes Boolean indicating whether the childNodes property is populated for the current node length count of items in the childNodes Array for the specific node Generic object ("associative array") of attributes for the specified node attributes Equivalent reference to childNodes[0] firstChild Name of current node nodeName Text of specified node if it is a text node nodeValue

Property Description nodeType Integer reference of the type of the specific node ( 1 = Element Node, 2 = Attribute Node, 3 = Text Node, ... see documentation for full list) nextSibling reference to next XMLnode object within the same Array of child nodes, null if there is no next sibling previousSibling reference to previous XMLnode object within the same child node Array, null if no previous sibling

Parsing and using XML data •Example of parsing XML ------- Bikes.xml ------------------- <bikes> <bike id="1" price="750">Kona</bike> <bike id="2" price="900">VooDoo</bike> <bike id="3" price="1100">Rocky</bike> </bikes> ------- Bikes.xml ------------------- var bikes:XML = new XML(); bikes.ignoreWhite = true; bikes.load("Bikes.xml"); bikes.onLoad = function(success:Boolean):Void { // trace root node name ("bikes") trace(bikes.firstChild.nodeName); trace(bikes.childNode[0].nodeName);

// trace third node price attribute (1100) trace(bikes.firstChild.childNodes[2]. attributes.price); // trace second text in second node ("VooDoo") trace(bikes.firstChild.childNodes[1]. firstChild.nodeValue); } Note: The root node of the loaded XML is the first child of the loading XML object Note: raw text within a node is itself another XMLnode object Expression Value 1 bikes.childNodes.length bikes bikes.firstChild.nodeName bikes bikes.childNode[0].nodeName 3 bikes.firstChild.childNodes.length bike bikes.firstChild.firstChild.nodeName 1 bikes.firstChild.firstChild.attributes.id 3 bikes.firstChild.childNodes[2].attributes.id Rocky bikes.firstChild.childNodes[2].firstChild.nodeValue

Introducing XML Sockets •A socket is a persistent network connection between two system endpoints •Because it is persistent, it is fundamentally different than the request-response oriented connections, such as HTTP and FTP, most commonly used in internet development •Socket connections generally perform better than request-response connections (depending on the nature of an application) •Connection does not need to be re-established each time communication occurs, lowering system overhead •At the same time, the developer must be aware of the persistent availability - and resource use - of an open socket connection •Sockets which are no longer in use should be explicitly closed, both to manage system resources and to keep the system more secure

Understanding Flash Lite socket connections •Flash Lite 2.1 supports socket connections through the XMLSocket() class •XML sockets are a good choice for low-latency applications, such as chat clients •Key benefit is that data is pushed from the socket server to the client as new data becomes available, rather than polled (periodic automatic client requests) •Significantly reduces the server burden, increasing application scalability, as the server does not need to process continuous incoming polling requests for which there may not yet be any new data

Working with socket servers •To support XMLSocket() connections, your server must run a persistent in- memory process ("daemon") which understands the protocol used by this class: XML messages are sent over a full-duplex TCP/IP stream socket connection Each XML message is a complete XML document, terminated by a zero () byte An unlimited number of XML messages can be sent and received over a single, persistent XMLSocket() connection

Working with socket servers

Working with socket servers •Server process manages communication with the XMLSocket() object running in each connected client, and presents some form of data service to the client •For example, one client may send data to the socket server, which then pushes the data back out to all other connected clients, creating a chat service •Or, the server may send a continuous stream of stock price updates, etc

Using allowed ports •Server network-connection points are called "ports" •Each port is identified by a 16-bit integer value, up to 65535 •First 1024 port number are sometimes referred to as "well-known" ports, and are largely reserved for use with widespread standard protocols For example: HTTP (port 80), FTP (port 21), POP (port 110), SMTP (port 25), and TELNET (port 23) •To avoid the traffic and security concerns related to well-known ports, XMLSocket() can only connect to port numbers higher than 1024

Working within Flash Lite player security •SWF files loaded from a domain server into the Flash Lite player may only connect to services available from ports in same domain •Unless a cross-domain policy file (crossdomain.xml) in in place in the target domain

Introducing an XML socket server: Jabber •Flash Lite must be paired with other technologies to implement the server side •In this course, you will use a preexisting socket server http://www.jabber.org •Jabber is: a set of streaming 100% XML protocols and technologies which enables structured, intelligent messaging between human users and also between software applications enable any two entities on the Internet to exchange messages, presence, and other structured information in near real time Uses a client-server architecture, not peer-to-peer architecture •Jabber data Sent from one client to another must pass through at least one Jabber server Jabber clients are free to negotiate direct connections, for example to transfer files, but those "out-of- band" connections are first negotiated within the context of the client-server framework •Extensive documentation and resources are available at: http://www.jabber.org

Understanding Jabber client behavior •Jabber client connects to a Jabber server on a TCP socket over port 5222 •Servers connect directly to each other over port 5269 •Connection is persistent ("always on") for the life of the client's session on the server •Client does not need to poll for messages, as an email client does •Any message intended for delivery is immediately pushed out to its target client, if connected •Jabber server tracks whether a target client is online, and if not, stores messages for delivery when it connects again

Using available Jabber servers •The following Jabber servers work with this Flash Lite course application jabber.com 12jabber.com jabber.anywise.com jabber.minus273.org jabber.palomine.net

Walkthrough 1: Setting Up a Jabber Account In this walkthrough, you will perform the following tasks: •Set up a Jabber account •Test the account with the Exodus Jabber client

Using XMLSocket in Flash Lite 2.1 •XMLSocket() object is not initially connected to any server •Must create the object, then establish a connection var socket:XMLSocket = new XMLSocket();

Connecting to the socket server •Once you have created an XMLSocket() object, establish a socket connection by invoking its connect() method •Pass two parameters IP address or domain of the target server, port number to which you’ll connect var server:String = "jabber.com"; var socket:XMLSocket = new XMLSocket(); socket.connect(server, 5222);

Connecting to the socket server •XMLSocket() object’s onConnect event broadcast when attempted connection - Boolean passed to event handler, with true or false var server:String = "jabber.com"; var socket:XMLSocket = new XMLSocket(); socket.connect(server, 5222); socket.onConnect = Delegate.create(this, doConnect); function doConnect(connected:Boolean):Void { if(connected) { // socket connected, start sending } else { // failed to connect } }

Disconnecting from the socket server •Conserve system overhead, and keep the client more secure, close the socket object once it’s no longer in use •close() method takes no parameters, and fires an onClose event when the socket has been closed socket.close(); socket.onClose = function():Void { trace("connection closed"); }

Walkthrough 2: Creating an XMLSocket connection In this walkthrough, you will perform the following tasks: •Create a new XMLSocket() object •Connect to the jabber.com XML socket server •Handle the result of the connection request

Handling XML Socket Events •Jabber server supports XML socket connections directly Flash clients can connect to the Jabber server as a normal Jabber client, and speak the normal Jabber XML protocol •Slightly outdated example http://www.flabber.org •Disney is starting to deploy Flash games on their site that use this technology •Jabber also supports "transports" which allow you to extend the capabilities of the server to include AIM, IRC, Yahoo, and MSN protocols, allowing your Flash clients to communicate to anyone on these networks •To tell the Jabber server you are using a Flash client, you need to pass it this String when connecting using the send() method of the XMLSocket() object: <?xml version="1.0"?> <flash:stream to="[Jabber Server]" xmlns="jabber:client" xmlns:flash="http://www.jabber.com/streams/flash" version="1.0"/>

Sending data through XMLSocket •send() method of the XMLSocket class passes either an XML object, or an XML String, to its connected server •Asynchronous response will be received by any assigned onData or onXML event handers

Sending an XML String •A String of XML may be passed to the send() method as an argument. var socket:XMLSocket = new XMLSocket(); ... // connect and get response socket.send("<?xml version=’1.0’?> <login username=’Fred’ password=’123 />");

Sending an XML Object •An XML object, populated either through its API or through its own XML String, may be passed to the send() method as an argument. var socket:XMLSocket = new XMLSocket(); ... // connect and get response var xLogin:XML = new XML(); var node:XMLNode = xLogin.createElement("login"); node.attributes.username = user_tf; node.attributes.password = password_tf; xLogin.appendChild(node); myXMLSocket.send(xLogin);

Receiving data through XMLSocket •When XML is received through a connected XMLSocket object, two events are fired: onData - fires first, before the data is formatted into an XML object onXML - fires second, after the returned data is parsed into an XML object

Using the onData event •XMLSocket.onData event fires when raw data has been pushed from the server, terminated by a zero (0) byte •By default, the returned data will be parsed into an XML object •Once parsed the XMLSocket.onXML event fires •Override the default XMLSocket.onData event handling, by implementing a custom event handler to intercept data before it is parsed as XML Useful if transmitting arbitrarily formatted data packets, and you'd prefer to manipulate the data directly when it arrives, rather than have Flash Lite parse the data automatically It is also useful if you wish to view the returned data for testing and debugging purposes

Using the onData event •If you override XMLSocket.onData event by implementing a custom event handler, XMLSocket.onXML is not called unless you do so explicitly in your custom event handler socket.onData = Delegate.create(this, onSocketData); function onSocketData(p_response:String):Void { // p_response is a String of (presumably) XML // data returned from the socket server }

Using the onXML event •XMLSocket.onXML event fires when the data pushed from the server has been parsed as XML •An event handler assigned to this event will receive one parameter, an XML object created within Flash Lite, from the XML string returned through the XMLSocket object. socket.onXML = Delegate.create(this, onSocketData); function onSocketData(p_response:XML):Void { // p_response is an XML object, built from // the XML String passed to the onData // event handler }

Walkthrough 3: Sending and Receiving XML Data In this walkthrough, you will perform the following tasks: •Let the Jabber server know it is talking to a Flash client •Handle and view data pushed from the server

Connecting to external data services using flash lite

9 comments

Notes on slide 1

9 Favorites & 1 Group