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 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

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 policyFlash Player can connect on any domain:

<?xml version="1.0 "?><!DOCTYPE cross-domain-policy SYSTEM ➥"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"><cross-domain-policy><allow-access-from domain="*"/></cross-domain-policy>

restrict the connection to a particular site:<allow-access-from domain="www.site1.com"/><allow-access-from domain="site2.com"/>

secure server connection use secure="true“:<allow-access-from domain="www.site3.com" secure="true" />

crossdomain.xml policy continueAllow access to every server that ends with a certain name by using an asterisk (*) sign:<allow-access-from domain="*.yahoo.com" />

You can allow access to a specific IP address:<allow-access-from domain="66.500.0.20" />

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:

1.e4x returns XML that can be accessed through ECMAScript for XML (E4X) expressions.2.flashvars returns an object with name-value pairs separated by ampersands.3.Object returns an object parsed as an AS tree.4.text returns a regular string.5.xml returns a flash.xml.XMLNode instance.

<mx:HTTPServiceurl="assets/xml/employees.xml"resultFormat="e4x"result="resultHandler(event);"fault="faultHandler(event);"/>

private var service:HTTPService = new HTTPService();private function setService():void{

service.url = "assets/xml/employees.xml";service.resultFormat = "e4x"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("*");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 proxiesYou 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 Mashupcustom 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: elad.ny@gmail.com

Blog: http://elromdesign.com/blog

Shashank Tiwari Email: tshanky@gmail.com

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/