What the buzz is all about?
What is Mashup An  application mashup combines at least two data sources to create a new  application. mixing Google search results with a snapshot of a web page, YouTube videos, and a link to Google Maps. The result is SearchMash (www.searchmash.com)
Flex Mashup
Flex Mashup Mix Additional libraries as3youtubelib: The YouTube library provides an interface to search videos from YouTube. as3flickrlib: The Flickr library provides classes to access the entire Flickr online photo sharing API. Tweener: The Tweener library provides classes to help creating tweenings and transitions. CoreLib: The CoreLib library provides classes for working with MD5, SHA 1 hashing, image encoders, JSON serialization, and data APIs. Degrafa Custom components http://flexbox.mrinalwadhwa.com/ http://flex.org/components/ http://www.afcomponents.com/components/ Skins and templates http://fleksray.org/Flex_skin.html http://www.scalenine.com
Two ways to connect to a remote network. Connecting to a remote server through crossdomain.xml Connecting to a remote server through a proxy
crossdomain.xml policy Flash Player can connect on any domain: <?xml version=&quot;1.0 &quot;?> <!DOCTYPE cross-domain-policy SYSTEM ➥ &quot;http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd&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;www.site1.com&quot;/> <allow-access-from domain=&quot;site2.com&quot;/> secure server connection use secure=&quot;true“: <allow-access-from domain=&quot;www.site3.com&quot; secure=&quot;true&quot; />
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;*.yahoo.com&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: http://maps.yahoo.com/crossdomain.xml
RPC: HTTPService, WebService, and RemoteObject. 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. http://www.google.com/base/feeds/snippets?bq=digital+camera.
E4X: HTTPService allows you to format the data results you receive. Here are your options: e4x returns XML that can be accessed through ECMAScript for XML (E4X) expressions. flashvars returns an object with name-value pairs separated by ampersands. Object returns an object parsed as an AS tree. text returns a regular string. xml returns a flash.xml.XMLNode instance. <mx:HTTPService url=&quot;assets/xml/employees.xml&quot; resultFormat=&quot;e4x&quot; result=&quot;resultHandler(event);&quot; fault=&quot;faultHandler(event);&quot;/> private var service:HTTPService = new HTTPService(); private function setService():void { service.url = &quot;assets/xml/employees.xml&quot;; service.resultFormat = &quot;e4x&quot; service.addEventListener(ResultEvent.RESULT, resultHandler); service.addEventListener(FaultEvent.FAULT, faultHandler); service.send(); } private var dataProvider:ArrayCollection = new ArrayCollection(); private function resultHandler(event:ResultEvent):void { service.removeEventListener(ResultEvent.RESULT, resultHandler); for each (var property:XML in event.result.employees.employee) { dataProvider.addItem({name:property.name, ➥ phone:property.phone, email:property.email}); } }
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>john@youremail.com</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);
WebService One service that uses SOAP is Amazon API. Amazon Web Services, which are often used in mashup applications, include the following: Alexa services: Provides information regarding web pages Amazon Clouds: Includes services such as storage, database, and queue services Amazon Associates: Allows developers to earn referral fees for every purchase made by your  referral AmazonServices  application example.
AMF – remoteObject 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:  http://opensource.adobe.com . 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. Flash provides built-in AMF-based APIs such as the following: RemoteObject:  ActionScript 3.0 API that allows access to Java objects Socket Connection:  ActionScript 3.0 API that allows connection through sockets NetConnection:  API used to initiate commands on a remote server and play streaming video open source and commercial AMF implementations that provide a gateway between the Flash Player and the implementation. Here are some of the popular ones: AMFPHP and SabreAMF: Allows access to PHP RubyAMF: Allows access to Ruby AMF.NET: Allows access to .NET BlazeDS: Allows access to data in real time
Working with web feeds and namespaces 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. 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. 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. 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:  http://www.atomenabled.org . 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 http://georss.org/.
Utilizing mashup platforms as proxies You can also utilize a mashup platform to be your proxy when a proxy is needed.  Such mashup platforms as: Yahoo! Pipes Google Mashup Editor Microsoft Popfly  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.
Yahoo! Pipes Yahoo! Pipes allows you to create a data source, publish it, and access it in different formats such as RSS or JSON output.  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.
GoogleBaseUI - application
Yahoo!  API Yahoo! Maps API - YahooMapAPI Yahoo! Astra - YahooAstra application
Flickr Mashup custom component by Ely Greenfield & Flickr API – FlickerMashup application
iPhone GUI Utilizing XFG to quickly develop the iPhone GUI with Rabbit
Create your own Mashups Pick a subject Choose services Design
Elad Elrom Email:  [email_address] Blog:  http://elromdesign.com/blog Shashank Tiwari Email:  [email_address] Blog:  http://www.shanky.org
Advanced Flex 3  -- http://www.amazon.com/gp/product/1430210273/
Mobile  http://www.amazon.com/AdvancED-Flash-Lite-Development-Advanced/dp/1430219041/

Mashups MAX 360|MAX 2008 Unconference

  • 1.
    What the buzzis all about?
  • 2.
    What is MashupAn application mashup combines at least two data sources to create a new application. mixing Google search results with a snapshot of a web page, YouTube videos, and a link to Google Maps. The result is SearchMash (www.searchmash.com)
  • 3.
  • 4.
    Flex Mashup MixAdditional libraries as3youtubelib: The YouTube library provides an interface to search videos from YouTube. as3flickrlib: The Flickr library provides classes to access the entire Flickr online photo sharing API. Tweener: The Tweener library provides classes to help creating tweenings and transitions. CoreLib: The CoreLib library provides classes for working with MD5, SHA 1 hashing, image encoders, JSON serialization, and data APIs. Degrafa Custom components http://flexbox.mrinalwadhwa.com/ http://flex.org/components/ http://www.afcomponents.com/components/ Skins and templates http://fleksray.org/Flex_skin.html http://www.scalenine.com
  • 5.
    Two ways toconnect to a remote network. Connecting to a remote server through crossdomain.xml Connecting to a remote server through a proxy
  • 6.
    crossdomain.xml policy FlashPlayer can connect on any domain: <?xml version=&quot;1.0 &quot;?> <!DOCTYPE cross-domain-policy SYSTEM ➥ &quot;http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd&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;www.site1.com&quot;/> <allow-access-from domain=&quot;site2.com&quot;/> secure server connection use secure=&quot;true“: <allow-access-from domain=&quot;www.site3.com&quot; secure=&quot;true&quot; />
  • 7.
    crossdomain.xml policy continueAllow access to every server that ends with a certain name by using an asterisk (*) sign: <allow-access-from domain=&quot;*.yahoo.com&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: http://maps.yahoo.com/crossdomain.xml
  • 8.
    RPC: HTTPService, WebService,and RemoteObject. 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. http://www.google.com/base/feeds/snippets?bq=digital+camera.
  • 9.
    E4X: HTTPService allowsyou to format the data results you receive. Here are your options: e4x returns XML that can be accessed through ECMAScript for XML (E4X) expressions. flashvars returns an object with name-value pairs separated by ampersands. Object returns an object parsed as an AS tree. text returns a regular string. xml returns a flash.xml.XMLNode instance. <mx:HTTPService url=&quot;assets/xml/employees.xml&quot; resultFormat=&quot;e4x&quot; result=&quot;resultHandler(event);&quot; fault=&quot;faultHandler(event);&quot;/> private var service:HTTPService = new HTTPService(); private function setService():void { service.url = &quot;assets/xml/employees.xml&quot;; service.resultFormat = &quot;e4x&quot; service.addEventListener(ResultEvent.RESULT, resultHandler); service.addEventListener(FaultEvent.FAULT, faultHandler); service.send(); } private var dataProvider:ArrayCollection = new ArrayCollection(); private function resultHandler(event:ResultEvent):void { service.removeEventListener(ResultEvent.RESULT, resultHandler); for each (var property:XML in event.result.employees.employee) { dataProvider.addItem({name:property.name, ➥ phone:property.phone, email:property.email}); } }
  • 10.
    E4X is preferredover 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>john@youremail.com</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.
    WebService One servicethat uses SOAP is Amazon API. Amazon Web Services, which are often used in mashup applications, include the following: Alexa services: Provides information regarding web pages Amazon Clouds: Includes services such as storage, database, and queue services Amazon Associates: Allows developers to earn referral fees for every purchase made by your referral AmazonServices application example.
  • 12.
    AMF – remoteObjectAction 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: http://opensource.adobe.com . 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. Flash provides built-in AMF-based APIs such as the following: RemoteObject: ActionScript 3.0 API that allows access to Java objects Socket Connection: ActionScript 3.0 API that allows connection through sockets NetConnection: API used to initiate commands on a remote server and play streaming video open source and commercial AMF implementations that provide a gateway between the Flash Player and the implementation. Here are some of the popular ones: AMFPHP and SabreAMF: Allows access to PHP RubyAMF: Allows access to Ruby AMF.NET: Allows access to .NET BlazeDS: Allows access to data in real time
  • 13.
    Working with webfeeds and namespaces 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. 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. 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. 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: http://www.atomenabled.org . 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 http://georss.org/.
  • 14.
    Utilizing mashup platformsas proxies You can also utilize a mashup platform to be your proxy when a proxy is needed. Such mashup platforms as: Yahoo! Pipes Google Mashup Editor Microsoft Popfly 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.
  • 15.
    Yahoo! Pipes Yahoo!Pipes allows you to create a data source, publish it, and access it in different formats such as RSS or JSON output. 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.
  • 16.
  • 17.
    Yahoo! APIYahoo! Maps API - YahooMapAPI Yahoo! Astra - YahooAstra application
  • 18.
    Flickr Mashup customcomponent by Ely Greenfield & Flickr API – FlickerMashup application
  • 19.
    iPhone GUI UtilizingXFG to quickly develop the iPhone GUI with Rabbit
  • 20.
    Create your ownMashups Pick a subject Choose services Design
  • 21.
    Elad Elrom Email: [email_address] Blog: http://elromdesign.com/blog Shashank Tiwari Email: [email_address] Blog: http://www.shanky.org
  • 22.
    Advanced Flex 3 -- http://www.amazon.com/gp/product/1430210273/
  • 23.