Mashups MAX 360|MAX 2008 Unconference


Published on

Presentation from the MAX 360|MAX 2008 Unconference made by Elad Elrom and Shashank Tiwari

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mashups MAX 360|MAX 2008 Unconference

  1. 1. What the buzz is all about?
  2. 2. What is Mashup <ul><li>An application mashup combines at least two data sources to create a new application. </li></ul><ul><li>mixing Google search results with a snapshot of a web page, YouTube videos, and a link to Google Maps. The result is SearchMash ( </li></ul>
  3. 3. Flex Mashup
  4. 4. Flex Mashup Mix <ul><li>Additional libraries </li></ul><ul><li>as3youtubelib: The YouTube library provides an interface to search videos from YouTube. </li></ul><ul><li>as3flickrlib: The Flickr library provides classes to access the entire Flickr online photo sharing API. </li></ul><ul><li>Tweener: The Tweener library provides classes to help creating tweenings and transitions. </li></ul><ul><li>CoreLib: The CoreLib library provides classes for working with MD5, SHA 1 hashing, image encoders, JSON serialization, and data APIs. </li></ul><ul><li>Degrafa </li></ul><ul><li>Custom components </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Skins and templates </li></ul><ul><li> </li></ul><ul><li> </li></ul>
  5. 5. Two ways to connect to a remote network. <ul><li>Connecting to a remote server through crossdomain.xml </li></ul><ul><li>Connecting to a remote server through a proxy </li></ul>
  6. 6. crossdomain.xml policy Flash Player can connect on any domain: <?xml version=&quot;1.0 &quot;?> <!DOCTYPE cross-domain-policy SYSTEM ➥ &quot;;> <cross-domain-policy> <allow-access-from domain=&quot;*&quot;/> </cross-domain-policy> restrict the connection to a particular site: <allow-access-from domain=&quot;;/> <allow-access-from domain=&quot;;/> secure server connection use secure=&quot;true“: <allow-access-from domain=&quot;; secure=&quot;true&quot; />
  7. 7. crossdomain.xml policy continue Allow access to every server that ends with a certain name by using an asterisk (*) sign: <allow-access-from domain=&quot;*; /> You can allow access to a specific IP address: <allow-access-from domain=&quot;66.500.0.20&quot; /> Best way to find the cross domain policy:
  8. 8. RPC: HTTPService, WebService, and RemoteObject. <ul><li>HTTPService example Rest used for web feeds ( Web syndication ) and is the most Common way to connect to Data sources. HTTPService restricted to GET & POST other methods like trace can be made with BlazeDS or Proxy. </li></ul>
  9. 9. E4X: <ul><li>HTTPService allows you to format the data results you receive. Here are your options: </li></ul><ul><li>e4x returns XML that can be accessed through ECMAScript for XML (E4X) expressions. </li></ul><ul><li>flashvars returns an object with name-value pairs separated by ampersands. </li></ul><ul><li>Object returns an object parsed as an AS tree. </li></ul><ul><li>text returns a regular string. </li></ul><ul><li>xml returns a flash.xml.XMLNode instance. </li></ul><ul><li><mx:HTTPService </li></ul><ul><li>url=&quot;assets/xml/employees.xml&quot; </li></ul><ul><li>resultFormat=&quot;e4x&quot; </li></ul><ul><li>result=&quot;resultHandler(event);&quot; </li></ul><ul><li>fault=&quot;faultHandler(event);&quot;/> </li></ul><ul><li>private var service:HTTPService = new HTTPService(); </li></ul><ul><li>private function setService():void </li></ul><ul><li>{ </li></ul><ul><li>service.url = &quot;assets/xml/employees.xml&quot;; </li></ul><ul><li>service.resultFormat = &quot;e4x&quot; </li></ul><ul><li>service.addEventListener(ResultEvent.RESULT, resultHandler); </li></ul><ul><li>service.addEventListener(FaultEvent.FAULT, faultHandler); </li></ul><ul><li>service.send(); </li></ul><ul><li>} </li></ul><ul><li>private var dataProvider:ArrayCollection = new ArrayCollection(); </li></ul><ul><li>private function resultHandler(event:ResultEvent):void </li></ul><ul><li>{ </li></ul><ul><li>service.removeEventListener(ResultEvent.RESULT, resultHandler); </li></ul><ul><li>for each (var property:XML in event.result.employees.employee) </li></ul><ul><li>{ </li></ul><ul><li>dataProvider.addItem({, ➥ </li></ul><ul><li>,}); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  10. 10. E4X is preferred over regular XML when dealing with XML responses, since you can access the results easily and can perform expressions to filter the results. E4X is a language in its own right, and it has been incorporated into ActionScript 3.0. Many claim E4X to be a simple and easy way to access XML; however, it is not as easy as people make it out to be. To underscore this point, let’s take a look at E4X syntax. <employees> <employee> <name>John Do</name> <phone>212-222-2222</phone> <age>20</age> <email></email> </employee> </employees> var employeesList:XML = event.result as XML; var len:int = employeesList.employees.employee.length(); var results1:XMLList = employeesList.employees.employee; var results2:XMLList = employeesList.employees.child(&quot;*&quot;); var results3:XMLList = employeesList.employees.*; var results4:XMLList = employeesList..employee; var filter1:XML = employeesList.employees.employee[0]; var filter2:XMLList = employeesList.employees.employee. (phone == '212-333-3333'); var filter3:XMLList = employeesList.employees. *.(age >= 19 || age == 18);
  11. 11. WebService <ul><li>One service that uses SOAP is Amazon API. Amazon Web Services, which are often used in mashup applications, include the following: </li></ul><ul><li>Alexa services: Provides information regarding web pages </li></ul><ul><li>Amazon Clouds: Includes services such as storage, database, and queue services </li></ul><ul><li>Amazon Associates: Allows developers to earn referral fees for every purchase made by your referral </li></ul><ul><li>AmazonServices application example. </li></ul>
  12. 12. AMF – remoteObject <ul><li>Action Message Format (AMF) is a data format created by Macromedia with the release of Flash Player 6. AMF is now open source and part of BlazeDS, available to download here: . </li></ul><ul><li>There are many types of AMF connections, but they all share the same basic principles of serializing (encoding) into a binary format and deserializing (decoding) once the data is returned to Flex. </li></ul><ul><li>Flash provides built-in AMF-based APIs such as the following: </li></ul><ul><li>RemoteObject: ActionScript 3.0 API that allows access to Java objects </li></ul><ul><li>Socket Connection: ActionScript 3.0 API that allows connection through sockets </li></ul><ul><li>NetConnection: API used to initiate commands on a remote server and play streaming video </li></ul><ul><li>open source and commercial AMF implementations that provide a gateway between the Flash Player and the implementation. Here are some of the popular ones: </li></ul><ul><li>AMFPHP and SabreAMF: Allows access to PHP </li></ul><ul><li>RubyAMF: Allows access to Ruby </li></ul><ul><li>AMF.NET: Allows access to .NET </li></ul><ul><li>BlazeDS: Allows access to data in real time </li></ul>
  13. 13. Working with web feeds and namespaces <ul><li>Many XML web feeds have elements and attributes that are associated by a namespace. In order to be able to use namespaces, you will need to open the namespaces so you can access and use the elements and attributes on your feeds. </li></ul><ul><li>Many different namespace formats exist, and it would be difficult to cover all of them; however, once you master the principles, you will be able to handle any namespace that you come across. </li></ul><ul><li>SPARQL namespace - SPARQL is a query language for the Resource Definition Framework (RDF), and it is often used to express SQL queries across various data sources. </li></ul><ul><li>Atom namespace - Atom syndication format is an XML language that is used for web feeds, intended to improve RSS feeds. The primary usage of Atom feeds is syndication of different types of web content, such as that found on weblogs or news sites, to web sites or directly to users. To learn more, visit Atom’s official site: . </li></ul><ul><li>GeoRSS namespace - GeoRSS is a lightweight format that is often used in existing feeds to map locations by adding basic geometries such as point, line, and box. To learn more about GeoRSS, visit its official site at </li></ul>
  14. 14. Utilizing mashup platforms as proxies <ul><li>You can also utilize a mashup platform to be your proxy when a proxy is needed. </li></ul><ul><li>Such mashup platforms as: </li></ul><ul><li>Yahoo! Pipes </li></ul><ul><li>Google Mashup Editor </li></ul><ul><li>Microsoft Popfly </li></ul><ul><li>encourage users to create mashups using visual editors. These tools allow users to create a complete application and publish it on their cloud without any programming knowledge at all. </li></ul>
  15. 15. Yahoo! Pipes <ul><li>Yahoo! Pipes allows you to create a data source, publish it, and access it in different formats such as RSS or JSON output. </li></ul><ul><li>JSONExample - As an exercise, let’s create a service that will show Rolex watches available for sale in ZIP code 10005 from Google Base, Craigslist, and Yahoo! Local. </li></ul>
  16. 16. GoogleBaseUI - application
  17. 17. Yahoo! API Yahoo! Maps API - YahooMapAPI Yahoo! Astra - YahooAstra application
  18. 18. Flickr Mashup <ul><li>custom component by Ely Greenfield & Flickr API – FlickerMashup application </li></ul>
  19. 19. iPhone GUI <ul><li>Utilizing XFG to quickly develop the iPhone GUI with Rabbit </li></ul>
  20. 20. Create your own Mashups <ul><li>Pick a subject </li></ul><ul><li>Choose services </li></ul><ul><li>Design </li></ul>
  21. 21. <ul><li>Elad Elrom </li></ul><ul><ul><li>Email: [email_address] </li></ul></ul><ul><ul><li>Blog: </li></ul></ul><ul><li>Shashank Tiwari </li></ul><ul><ul><li>Email: [email_address] </li></ul></ul><ul><ul><li>Blog: </li></ul></ul>
  22. 22. Advanced Flex 3 --
  23. 23. Mobile