• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mcetech 2009 - Open Social
 

Mcetech 2009 - Open Social

on

  • 2,844 views

The Social Web describes how people socialize and interact on the Web sharing a variety of interests. It is therefore quite natural in the context of Web 2.0, where the emphasis is on users, that ...

The Social Web describes how people socialize and interact on the Web sharing a variety of interests. It is therefore quite natural in the context of Web 2.0, where the emphasis is on users, that entrepreneurs have created Web 2.0 applications that focus on social interactions and communities. Typical examples of social network sites are websites such as Facebook, Twitter, Ning, Delicious, LinkedIn, Yahoo!, Myspace, Flickr and many others. With the proliferation of such social networking sites has emerged the need for common standards and open source tools. In this tutorial we will see the common architectural concepts and design patterns behind social network sites and the emerging and quite successful OpenSocial standard promoted by Google and its numerous partners. The discussion is accompanied by demo, code snippets in Java, JavaScript, XML and CSS

Statistics

Views

Total Views
2,844
Views on SlideShare
2,841
Embed Views
3

Actions

Likes
1
Downloads
40
Comments
1

2 Embeds 3

http://www.slideshare.net 2
http://www.ishindig.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mcetech 2009 - Open Social Mcetech 2009 - Open Social Presentation Transcript

    • Social Web, Web Architecture and the OpenSocial Standard by Claude Coulombe Université de Montréal MCETECH 2009 Ottawa, May 4th 2009
    • Web 1.0 – Click and Wait... MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Ajax – A breakthrough! AJAX The first use of the term in public was by Jesse James Garrett in February 2005 MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Ajax – A breakthrough! Ajax (Asynchronous JavaScript and XML)   Eliminates painful page loading!  Makes asynchronous requests for data to the server and updates the web page without doing a full page reload  More responsive and dynamic Webapps  XMLHttpRequest object  Based on Client-side JavaScript MCETECH 2009 Ottawa, May 4th 2009
    • Ajax – Collaboration Diagram Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php MCETECH 2009 Ottawa, May 4th 2009
    • Ajax – Sequence Diagram In synchronous mode, the browser is frozen pending the server response. In asynchronous mode, the execution in the client browser continues without awaiting the response from the server. The answer from the server will be handled by a Callback function when it arrives. The status of the request is given by the attribute readyState of the XMLHttpRequest object. MCETECH 2009 Ottawa, May 4th 2009 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php
    • Client-server communication & Ajax MCETECH 2009 Ottawa, May 4th 2009 * Source : http://www.google.com
    • Web 2.0 MCETECH 2009 Ottawa, May 4th 2009 * Source: Markus Angermeier http://kosmar.de/wp-content/web20map.png
    • Web 2.0 Perceived trend leading to the definition of a 2nd generation of Web sites and Web services First O'Reilly Web 2.0 conference in 2004 User eXperience Active involvement and production of content by users New designs, old technos! Google Maps, the “Killer App” MCETECH 2009 Ottawa, May 4th 2009
    • Social Web MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Social Web At its basis, Internet is a network, a network of content servers and more recently a network of applications but also a network of users. The Social Web describes how people socialize and interact on the Web sharing a variety of interests. It is therefore quite natural in the context of Web 2.0, where the emphasis is on users, that entrepreneurs have created Web 2.0 applications that focus on social interactions and communities. MCETECH 2009 Ottawa, May 4th 2009
    • Social Network Sites MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Social Network Sites Social Network applications (or Social Network sites), like MySpace or Facebook, allow their users to enter personal information (profile) and interact with other users. These informations allows users to retrieve users and quot;pseudo friendsquot; sharing the same interests. Users can form groups and invite other people. The interactions between members include discussions and sharing of photos, podcasts, videos, links and documents. MCETECH 2009 Ottawa, May 4th 2009
    • Social Network Sites The first social network site was www.classmates.com which is still in business since 1995. MCETECH 2009 Ottawa, May 4th 2009
    • Friendster www.friendster.com But the quot;boomquot; occurred around 2002 with, among others, the website Friendster whose success vanished after refusing an offer of $ 30 million USD by Google, the same year than its foundation http://www.nytimes.com/2006/10/15/business/yourmoney/15friend.html?_r=2&oref=slogin&oref=slogin MCETECH 2009 Ottawa, May 4th 2009
    • MySpace www.myspace.com Itself overtaken by MySpace in 2004 which has 122 million users and revenues of $ 900M MCETECH 2009 Ottawa, May 4th 2009
    • FaceBook www.facebook.com Eventually overtaken by FaceBook in 2007, which would have now 200 million users and annual revenues of $ 350 million MCETECH 2009 Ottawa, May 4th 2009
    • Specialized Social Networks Some specialized social networks, like LinkedIn rely on contacts or business relationships www.linkedin.com * Source : http://rdfweb.org/foafcorp/intro.html MCETECH 2009 Ottawa, May 4th 2009
    • Social Network - Laws Sarnoff's Law : The value of network services like phone service (e.g. weather, 911, personal phone calls) grow proportionally to network size, i.e V = k.N Metcalfe's Law : The value of a network service where any customer has advantages to transact with any other customer grows by the square of the size of the network, i.e V = k.N2 Reed's Law : Networks that support the construction of communicating groups (Group-Forming Networks) create value that scales exponentially with network size, i.e. V = k.2N MCETECH 2009 Ottawa, May 4th 2009 * Source : http://www.reed.com/gfn/docs/reedslaw.html
    • Social Sites – Ning Demo Demo MCETECH 2009 Ottawa, May 4th 2009
    • Social Web – Application patterns MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Social Web – Application patterns Social Network Pattern : Application that allows users to enter profiles and contents, form groups and interact with other users sharing their interests Container Application Pattern : Application with a plugin architecture which contains a set of small applications or utilities MCETECH 2009 Ottawa, May 4th 2009
    • Social Web – Application Components MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Social Web – Application Components A personal space based on a profile (address, age, sex, nationality,  education level, photo) and points of interest The user can organize and personalize their personal space  Tool to create links with friends and manage lists of friends and common  friends (FOAF: friends of a friend) Tools to create, invite and manage groups  Tool to create, suggest and manage activities  RSS content syndication http://en.wikipedia.org/wiki/RSS  Blog: personal diary, which contains mostly personal opinions on various  topics or a specific issue. Offers to visitors the opportunity to comment http://en.wikipedia.org/wiki/Blog * Tools for sharing photos, podcasts, videos, bookmarks and documents  Web chat tools : synchronous (eg instant messaging) or asynchronous  (eg email or forum) http://en.wikipedia.org/wiki/Internet_forum MCETECH 2009 Ottawa, May 4th 2009 * Note: or a simple Guestbook
    • Social Web – Third Party Applications In addition to a set of basic applications provided by the  operator of the site, many sites are open to third-party applications This openness contributes to the success of sites  Some third-party applications are subject to a sharing of  advertising revenues 8000 third-party applications for Facebook in 2007  Tools and application frameworks are available to  developers in order to facilitate their work However, standards are usually proprietary, e.g. the  famous FBML, a variant of HTML exclusive to FaceBook In 2007, Facebook came out with an API and a platform for  delivering small applications called widgets. But facebook widgets work only with facebook. MCETECH 2009 Ottawa, May 4th 2009
    • Social Network Sites - Pros and Cons MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Social Network Sites - Pros Democratization of the means of production and diffusion of information, music and audiovisual content Allows to create a custom site and in his image Allows to share of interests and passions Allows to retreive friends, pals or relatives International diffusion Cheap and accessible entertainment At the technical level Quick responses to user actions Rich web applications, fast and light No more slow download or installation Compatible with all Web browsers The browser becomes the platform MCETECH 2009 Ottawa, May 4th 2009
    • Social Network Sites - Cons Trendy, effect fashion  Threats and attacks on privacy  Misuse of personal data of users by the owners of sites  Intrusive advertising. For example in 2007, launch of Beacon by Facebook that  was an advertising software which communicated (without consent) the information on purchases to their quot;friendsquot; ... Time-consuming activity  Fake friendships and fleeting ... Can we have 400 real friends?  Users become hostages of the sites that house their personal data (Data lock-in) *  Problem of copyright infringement  Violent, racist, pornographic, false, deceptive contents  The security aspect is to be monitored  At the technical level  too many standards and proprietary APIs Compatibility and interoperability issues between different networks * After the « hardware lock-in » and the « software lock-in » has warned us, Tim O'Reilly MCETECH 2009 Ottawa, May 4th 2009
    • Gadgets Gadgets MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Gadgets - Origin Gadgets (or widgets) are mini web sites, generally small blocks of content, placed in a web page or in a container of gadgets Popularized by the Porlet standard (Excite portal) but which required the complete reloading of the page, replaced today by mashups (aggregator or gadgets container) using asynchronous Ajax to refresh MCETECH 2009 Ottawa, May 4th 2009
    • Gadgets - Definition Gadgets are small applications consisting of: XML, HTML and JavaScript plus resources such as images and CSS files XML for the specification of the gadget HTML supports static content JavaScript for interactivity & communication with Web services <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <Module> <ModulePrefs author=quot;Claude Coulombequot; author_email=quot;claude.coulombe@umontreal.caquot; height=quot;300quot; title=quot;SimpleGadgetquot;/> <Content type=quot;htmlquot;> <![CDATA[ <script> function com_example_simplegadget_SimpleGadget(){ … </script> ]]> </Content> </Module> MCETECH 2009 Ottawa, May 4th 2009 * Source image : http://code.google.com/apis/opensocial/
    • Gadgets-Based Architecture Typical gadgets application follows the « Container Application Pattern » Plugin architecture which contains a set of small applications or utilities Container provides a sandbox for convenient and secure execution of gadgets Architecture popularized by social network sites Light Web Services (REST style) and light components (gadgets are based on XHTML, CSS and JavaScript) MCETECH 2009 Ottawa, May 4th 2009
    • Gadgets Server Generates HTML, JavaScript & CSS from the specification MCETECH 2009 Ottawa, May 4th 2009 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation
    • Gadgets Container Displays the social network’s user interface Opens an IFrame to insert the gadget MCETECH 2009 Ottawa, May 4th 2009 Source http://incubator.apache.org/shindig/index.html
    • Gadgets Container – How it works? 1) Browser client requests a Gadget application 2) Container requests the Gadget spec from its host 3) Container converts the Gadget spec to HTML via the gadgets server which is displayed to the client MCETECH 2009 Ottawa, May 4th 2009 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation
    • Gadgets Container – How it works? 1) The gadget application requests remote content 2) Container requests content from the specific URL 3) Container returns response to the gadget which displays the data MCETECH 2009 Ottawa, May 4th 2009 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation
    • REST REST MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • REST REST (REpresentational State Transfer) Based on resources (resources are URLs) Stateless Each resource is accessible via one unique URI A set of MIME types of content in request and response A set of basic HTTP commands MCETECH 2009 Ottawa, May 4th 2009
    • REST Each resource meets a set of basic HTTP commands that correspond to the so-called classical CRUD operations HTTP CRUD POST Create GET Read PUT Update DELETE Delete MCETECH 2009 Ottawa, May 4th 2009
    • REST – To learn more... Introduction to REST (JavaLobby) http://java.dzone.com/articles/intro-rest http://java.dzone.com/articles/putting-java-rest Book RESTful Web Services Leonard Richardson; Sam Ruby O'Reilly Media, Inc. May, 2007 MCETECH 2009 Ottawa, May 4th 2009
    • RPC RPC MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • RPC RPC : Remote Procedure Call Inter-process communication protocol that allows a software to call the execution of a procedure on another computer without having to explicitly code all the details RPC allows easy exchange of serialized objects between client and server Only one endpoint (one URL) + parameters Parameters specify methods to call, not limited to the 4 REST methods MCETECH 2009 Ottawa, May 4th 2009
    • Container of gadgets - Netvibes MCETECH 2009 Ottawa, May 4th 2009
    • Container of gadgets - iGoogle MCETECH 2009 Ottawa, May 4th 2009
    • Container of gadgets – Code Demo Demo MCETECH 2009 Ottawa, May 4th 2009
    • Gadgets - Pros & Cons MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Gadgets - Pros Weak coupling Promotes reuse Easy to develop Light and little demanding in bandwidth and server capacity Easy deployment on many different social network sites Easy for the user to add, remove and customize gadgets MCETECH 2009 Ottawa, May 4th 2009
    • Gadgets - Cons Trendy, effect fashion Proliferation of gadgets and services of doubtful utility Hard to test Security problem Interoperability problem? Gadgets are limited in their complexity & functionnality MCETECH 2009 Ottawa, May 4th 2009
    • OpenSocial Standard MCETECH 2009 Ottawa, May 4th 2009 * Source image : http://code.google.com/apis/opensocial/
    • OpenSocial With the proliferation of social networking sites has emerged the need for common standards and open source tools Reed's Law can explain why the evolution of an open, interoperable, global social network seems inevitable Created in response to the proliferation of standards and proprietary APIs or specific APIs to a single site (November 2007)* OpenSocial is a free and open standard that defines a common API to a set of social applications on many different websites Combination of Google Gadgets, a container of gadgets and standard communication API Partners of the OpenSocial Foundation: Engage.com, Friendster, Google, hi5, Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo, Salesforce.com, Six Apart, Tianji, Viadeo, XING, Yahoo! http://www.opensocial.org/ MCETECH 2009 Ottawa, May 4th 2009 * Note : A lot in reaction to FaceBook
    • OpenSocial Standard OpenSocial MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • OpenSocial Standard MCETECH 2009 Ottawa, May 4th 2009 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation
    • OpenSocial Standard MCETECH 2009 Ottawa, May 4th 2009 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation
    • OpenSocial Standard Defines an XML format for applications, including user interface (HTML / CSS / Javascript) and metadata (title, author, email, size of the gadget preferences) Defines APIs for Web services and data exchange, including REST and RPC Web services and persistent data Authentication service (Oauth) http://oauth.net/ OpenSocial Services 1) People & Relationship (friends) : access to programming information on friends 2) Activities : What your friends want to see what's what you do 3) Persistence (Application data, data gadgets) Provide a statement without the server, share data with your friends MCETECH 2009 Ottawa, May 4th 2009
    • OpenSocial Standard – Client Gadget Client Javascript features Gadget container (gadget.js), OpenSocial gadget OpenSocial container JSON, Restful container MCETECH 2009 Ottawa, May 4th 2009 Source : http://incubator.apache.org/shindig/overview.html
    • OpenSocial Standard – JS Library OpenSocial - Javascript Library MCETECH 2009 Ottawa, May 4th 2009 Source : http://incubator.apache.org/shindig/overview.html
    • OpenSocial – JS code snippet Request information about a friend ... function getFriendData() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(VIEWER),'viewer'); req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS),'viewerFriends'); req.send(onLoadFriends); } Callback function to get data about a friend ... function onLoadFriends(resp) { var viewer = resp.get('viewer').getData(); var viewerFriends = resp.get('viewerFriends').getData(); var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’; viewerFriends.each(function(person) { html += '<li>' + person.getDisplayName()+'</li>'; }); html += '</ul>'; document.getElementById('friends').innerHTML = html; } MCETECH 2009 Ottawa, May 4th 2009 * Source code : http://www.google.com
    • OpenSocial – REST and RPC OpenSocial offers both REST and RPC protocols Communication methods: RESTful (Representational State Transfer) RPC (Remote Procedure Call) Data Formats: XML, JSON, AtomPub MCETECH 2009 Ottawa, May 4th 2009 * Source : http://www.google.com
    • OpenSocial – REST Services Based on the AtomPub (Atom publishing protocol) standard and JSON /people/{guid}/@all -- Returns the set of all the people associated with the user {guid} /people/{guid}/@friends -- Returns the set of all friends of user {guid} -- i.e. a subset of @all /people/{guid}/@self -- Return the information in the profile of user {guid} /activities/{guid}/@self -- Returns the set of all the activities generated by the user {guid} /activities/{guid}/@friends -- Returns the set of all the activities from friends of user {guid} MCETECH 2009 Ottawa, May 4th 2009 * Source code : http://www.google.com
    • OpenSocial – RPC Services Parameters specify methods to call, not limited to the 4 REST methods Batch support * Easy specification of group of users * through passed arguments POST /rpc HTTP/1.1Host: api.example.orgAuthorization: <Auth token> Content-Type: application/json { quot;methodquot; : quot;people.getquot;, quot;idquot; : quot;myselfquot; quot;paramsquot; : { quot;useridquot; : quot;@mequot;, quot;groupidquot; : quot;@selfquot; } } MCETECH 2009 Ottawa, May 4th 2009 * Note : considered difficult with REST
    • Shindig Server Shindig MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • Shindig Server Reference implementation of the OpenSocial standard Java and PHP Apache open software project supported by a consortium of companies led by Google Includes 4 main parts : 1) JS Gadgets Container (UI, security, communication, pref.) 2) Gadgets Server (XML specifications to JS + HTML) 3) JS OpenSocial Container (layer on top of the JS gadgets container): profiles, friends, activities 4) OpenSocial Data Server : interface to other content servers including REST APIs http://incubator.apache.org/shindig/ MCETECH 2009 Ottawa, May 4th 2009
    • Shindig Server 3 main server components Gadget Server, XML → HTML OpenSocial JS Container Server Persistent Data Server MCETECH 2009 Ottawa, May 4th 2009 * Source : http://incubator.apache.org/shindig/overview.html
    • Shindig Server – How it works? 1. Request to Shindig via either /social/rest or /social/rpc (REST or JSON-RPC API) 2. The servlet creates a RequestItem which parses the request (2 different RequestItem : one for REST and one for RPC) 3. The servlet calls the appropriate handler 4. One of Shindig's 3 request handlers process the request (PersonHandler, ActivityHandler, AppDataHandler) 5. The Shindig handlers call the Shindig Service Provider (SPI) which is defined by a set of interfaces with methods that return ResponseItems (i.e. POJOs). SPI is where to set gateways to other backend modules 6. The handler returns a ResponseItem, which wraps one or a collection of POJOs. The Servlet may then write that response out or, continue to call handlers and collect more ResponseItems in the batch case, 7. Servlet converts/serializes and returns ResponseItem(s) in XML or JSON MCETECH 2009 Ottawa, May 4th 2009 * Source : http://rollerweblogger.org/roller/entry/shindig_java_internals_diagram_updated
    • Shindig Server – Code Demo Code Demo http://localhost:8080/gadgets/files/samplecontainer/samplecontainer.html http://localhost:8080/gadgets/ifr?url=http://www.labpixies.com/campaigns/todo/todo.xml http://localhost:8080/social/rest/people/john.doe/@all http://localhost:8080/social/rest/people/john.doe MCETECH 2009 Ottawa, May 4th 2009
    • OpenSocial - Pros & Cons MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com
    • OpenSocial - Pros The usual advantages of a standard: interoperability, portability, creation of a critical mass, reduced learning, better documentation, better tools, greater productivity, cost reduction, sustainability of technology Allows third party applications to run on more social network sites More applications accessible to more people! Enables operators of social sites to focus on their business and services and spend less effort on technological developments According to Hal Varian: The adoption of standards leads to the shift from a competition for a market to a competition in a market Endorsement by major players like Google OpenSocial specification process is community driven MCETECH 2009 Ottawa, May 4th 2009
    • OpenSocial - Cons Constraints introduced by the standard Many older versions of Google Gadgets Different containers have different policies Directory approvals vary Scaling could be hard* Difficulty in the creation of large applications in HTML & JavaScript Difficulties in sharing a standard with its competitors Dependency on Google Not suitable for critical services with secure transactions Security concerns (Caja is a potential solution) MCETECH 2009 Ottawa, May 4th 2009 * Note : consider hosting your app to a cloud service
    • GWT – A Java Gadgets Factory! GWT MCETECH 2009 Ottawa, May 4th 2009
    • GWT – A Java Gadgets Factory! The Google Web Toolkit (GWT) allows state of the art software engineering and taking advantage of Java tools like Eclipse to build fast “desktop-like” Ajax applications that run in a browser. http://code.google.com/webtoolkit/ MCETECH 2009 Ottawa, May 4th 2009
    • Why GWT? - Problems with JavaScript So, he didn't know JavaScript well enough... MCETECH 2009 Ottawa, May 4th 2009
    • Why GWT? - Problems with JavaScript Real JavaScript experts are rare...   Working around browser incompatibilities, memory leaks and long load times  JS is not a true OOP language JS was not designed for big programs   Lack of modularity and scalability makes testing, debugging and reusing JS and Ajax components very difficult  JavaScript and Ajax tool support is deficient MCETECH 2009 Ottawa, May 4th 2009
    • Understanding GWT GWT MCETECH 2009 Ottawa, May 4th 2009
    • What is GWT ? May 2006 Google released Google Web Toolkit  – Bruce Johnson & Joel Webber Open source “client-centric” Java framework  that makes writing Rich Webapps easy for Java developers who don't speak JavaScript as a second language  GWT cross compiles Java to JavaScript GWT is not just good to build Ajax Webapps,  GWT is good to build “desktop-like” Webapps that run in a browser MCETECH 2009 Ottawa, May 4th 2009
    • Java to JavaScript Cross Compiler GWT version 1.5 supports : * Firefox 1.0, 1.5, 2.x, 3.x Java * Internet Explorer 6, 7, 8 * Safari 2.0 3.0 * Opera 9.0 Write Once... JavaScript Run Everywhere! MCETECH 2009 Ottawa, May 4th 2009
    • What is GWT? - Pure Java approach Over six millions Java developers  “Write Once, Run Anywhere”  Windows, Linux, Mac OS X  Real OOP language  Coding with your favorite Java IDE  Debugging client-side using Java IDE  Communication between the client  and server using Java objects Client-side code is much lighter  weight than an equivalent Java applet MCETECH 2009 Ottawa, May 4th 2009
    • GWT – A Java Gadgets Factory! GWT already creates client applications in pure HTML and JavaScript closely related to gadgets Indeed, one can use the strengths of GWT to produce gadgets in optimized JavaScript from a Java code Add a gadget specification file <application>.gadget.xml, which describes the gadget to the container GWT will generate all the code needed by the gadget Here is the recipe* : Google API Libraries for Google Web Toolkit http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=GadgetsGettingStarted * Note: Do not yet allow to generate a gadget according the full OpenSocial standard, but according to the standard Google Gadget MCETECH 2009 Ottawa, May 4th 2009
    • GWT & gadget – XML Configuration Files com.example.simplegadget.client.SimpleGadget.gadget.xml <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <Module> <ModulePrefs author=quot;Claude Coulombequot; author_email=quot;claude.coulombe@umontreal.caquot; height=quot;300quot; title=quot;SimpleGadgetquot;/> <Content type=quot;htmlquot;> <![CDATA[ <script> function com_example_simplegadget_SimpleGadget(){ … </script> ]]> </Content> </Module> SimpleGadget.gwt.xml <module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- Other module inherits --> <inherits name=quot;com.google.gwt.gadgets.Gadgetsquot; /> <!-- Specify the app entry point class. --> <entry-point class='com.example.simplegadget.client.SimpleGadget'/> <!-- Specify the application specific style sheet. --> <stylesheet src='SimpleGadget.css' /> </module> MCETECH 2009 Ottawa, May 4th 2009
    • GWT & gadget – Java code snippet... package com.google.gwt.gadgets.sample.hellogadgets.client; import com.google.gwt.gadgets.client.Gadget; ... @ModulePrefs( title = quot;My first gadget created with GWTquot;, author = quot;Claude Coulombequot;, height = 300 ) public class HelloGadget extends Gadget<HelloPreferences> { protected void init(final HelloPreferences prefs) { Image img = new Image(quot;http://code.google.com/webtoolkit/logo-185x175.pngquot;); Button button = new Button(quot;Click-me!quot;); VerticalPanel vPanel = new VerticalPanel(); vPanel.setWidth(quot;100%quot;); vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER); vPanel.add(img); vPanel.add(button); RootPanel.get().add(vPanel) button.addClickListener(new ClickListener() { public void onClick(Widget sender) { Window.alert(quot;My first gadget created with GWTquot;); } }); } } MCETECH 2009 Ottawa, May 4th 2009
    • GWT – A Java Gadgets Factory! Compile with GWT in order to generate the gadget code Deployment to an external Web server Reference the gadget definition to the iGoogle container c * Note: Do not yet allow to generate a gadget according the full MCETECH 2009 Ottawa, May 4th 2009 OpenSocial standard, but according to the standard Google Gadget
    • GWT & Gadget – Code Demo Code Demo http://localhost:8080/gadgets/ifr?url=http://www.kayakissimo.org/SimpleGadget/SimpleGadget/com.example.simplegadget.client.SimpleGadget.gadget.xml MCETECH 2009 Ottawa, May 4th 2009
    • Conclusion The are common architectural concepts and design patterns behind social network sites From the proliferation of social networking sites has emerged the need for common standards A stack of Open Source technologies is emerging for the Social Web OpenSocial standard promoted by Google and its numerous partners is mature and successful (over 600 M users) MCETECH 2009 Ottawa, May 4th 2009
    • Questions ? MCETECH 2009 Ottawa, May 4th 2009 * Source Clipart : http://www.clipart.com