Your SlideShare is downloading. ×
Getting the Most Out of OpenSocial Gadgets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Getting the Most Out of OpenSocial Gadgets

1,500
views

Published on

Published in: Technology, Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,500
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • • Designed & built for sharing content between heterogenous apps • This is exactly what it’s used for in iGoogle, and exactly what it’s used for in OpenSocial
  • • Open standard • Based on other emerging standards • Portable Contacts • OAuth • Basic web technology like HTML, CSS, & JavaScript • Substantial industry support • Social networks • Increasingly, among business and enterprise-oriented vendors • These are the better-known companies, but the list keeps growing • Also support from the open source world
  • • OpenSocial Gadgets spec defines three main parts • <click> XML spec file: description of everything that makes up your gadget • Metadata, such as the title & directory information • Content that fills the gadget iframe • Can be hosted on any web server • Gadget containers can be configured with a list of gadget spec URLs • Fetch the gadget spec XML to render or display in the directory • To avoid too much HTTP traffic, containers cache specs • Spec file needs to be more or less static • If it changes on each request, users won’t see those changes • To make the gadget do something interesting, use JavaScript • Inline or with a link to an external script file • <click> JavaScript makes use of the core gadgets JavaScript API • Automatically made available to all gadgets • Access configurable preferences • Make requests to web services • <click> Features: gadgets can use them by declaring them in spec • Additional capabilities for gadgets • Often new APIs that the gadget can call in its JavaScript code • Can provide UI features: tabs or banners • Can provide container integration features: resizing or renaming • Some are defined in the spec, but may not be provided by all containers, others are container specific • We use a custom feature to let us know which directory categories a gadget should be included in • Gadgets can decide to require the feature • Won’t work in containers that don’t provide it • Or make it optional • Gadget must test for feature before using it
  • Transcript

    • 1.  
    • 2. Getting the most out of OpenSocial gadgets
      • Mark Halvorson
      • Director of Interactive Marketing, Atlassian
      • Board Member, OpenSocial Foundation
      • [email_address] , @halv0112
    • 3. Agenda
      • What it is a Gadget
      • Why Atlassian chose OpenSocial
      • Why you should too!
    • 4. What is OpenSocial?
    • 5. Social Data Model
    • 6. Web Service APIs
    • 7. Gadgets
    • 8. Our Problem
    • 9. Before
      • Enterprise Apps are Silos
      FishEye Source Code JIRA Issues & Tasks Confluence Wiki
    • 10. Emphasize Teams, Projects & Tasks over Tools
    • 11. Too Many Dashboards
    • 12. Cross-Product Sharing
    • 13. Integration
      • with non-Atlassian apps
    • 14. Solution: OpenSocial Gadgets
    • 15. Gadgets
      • are a Great Solution for Dashboards
    • 16. After
      • Open standard for enterprise application connection
      view complete project single activity stream comment & interact
    • 17. Managers Do Email
      • Not just about portals, or internal applications.
      view activity & status create issues
    • 18.
    • 19. Why Write Gadgets?
      • They’re easy!
      • They use stable, widely accessible and understood technologies
      • Write once, display in multiple containers
    • 20. The Hello World Example
    • 21. Anatomy of a Gadget
      • XML Spec File
        • Metadata, HTML Content, and JavaScript
      • Core JavaScript API
        • Access Preferences, Make Requests
      • Gadget Features
        • Additional, Optional Capabilities & APIs
    • 22. XML Spec File
    • 23. <ModulePrefs> <?xml version= &quot;1.0&quot; encoding= &quot;UTF-8&quot; ?> <Module> <ModulePrefs title= &quot;JIRA Issues&quot; author= &quot;Atlassian&quot; thumbnail= &quot; http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues-thumbnail.png &quot; description= &quot;A list of recently created Issues&quot; > <Require feature= &quot;minimessage&quot; /> <Require feature= &quot;dynamic-height&quot; /> </ModulePrefs>
    • 24. <UserPref> <UserPref name= &quot;show_date&quot; display_name= &quot;Show Dates?&quot; datatype= &quot;bool&quot; default_value= &quot;true&quot; /> <UserPref name= &quot;show_summ&quot; display_name= &quot;Show Summaries?&quot; datatype= &quot;bool&quot; default_value= &quot;true&quot; /> <UserPref name= &quot;num_entries&quot; display_name= &quot;Number of Entries:&quot; default_value= &quot;5&quot; required= &quot;true&quot; />
    • 25. <Content> <Content type= &quot;html&quot; > <![CDATA[ <link rel= &quot;stylesheet&quot; href= &quot; http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues.css &quot; > <div id= &quot;content_div&quot; ></div> <script type= &quot;text/javascript&quot; src= &quot; http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues.js &quot; ></script> ]]> </Content> </Module>
    • 26. Views - DEFAULT view
    • 27. Views - DEFAULT view
    • 28. Views - CANVAS view
    • 29. Views - DEFAULT view (Gmail)
    • 30. Views - CANVAS view (Gmail)
    • 31. Inline Contextual Gadget +
    • 32. Views - Custom view
    • 33. Wallboards
      • Gadgets go beyond the JIRA Dashboard onto your wall!
    • 34. Wallboard – Default View
    • 35. Wallboard – Wallboard View
    • 36. JavaScript // Create minimessage factory var msg = new gadgets.MiniMessage(); // Show a small loading message to the user var loadMessage = msg.createStaticMessage( &quot;loading...&quot; ); // Get configured user prefs var prefs = new gadgets.Prefs(); var showDate = prefs.getBool( &quot;show_date&quot; ); var showSummary = prefs.getBool( &quot;show_summ&quot; ); var numEntries = prefs.getInt( &quot;num_entries&quot; ); // Fetch issues when the gadget loads gadgets.util.registerOnLoadHandler(fetchIssues);
    • 37. Requesting Data from Web Services
      • AJAX + DOM
      • OAuth
      • Request Proxy
    • 38. gadgets.io.makeRequest() Requesting Data from Web Services
    • 39. What Can You Call?
      • Any URL
      • XML and JSON are the most useful
    • 40. Fetching Issues function fetchIssues () { var url = &quot; http://jira.atlassian.com/sr/ &quot; + &quot;jira.issueviews:searchrequest-xml&quot; + &quot;/temp/SearchRequest.xml?&quot; + &quot;created%3Aprevious=-1w&resolution=-1&quot; + &quot;&sorter/field=issuekey&sorter/order=DESC&quot; + &quot;&sorter/field=created&sorter/order=DESC&quot; + &quot;&tempMax=20&quot; ; var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM; gadgets.io.makeRequest(url, handleResponse, params); }
    • 41. Handling the Response function handleResponse (obj) { var domData = obj. data ; var jiraIssues = { title : getTitle(domData), items : getItems(domData) }; renderJiraIssues(jiraIssues); msg.dismissMessage(loadMessage); gadgets. window .adjustHeight(); }
    • 42. Summary - Why write gadgets?
      • Easy!
        • Simple web based technologies mean anyone can write a gadget.
      • Reusable!
        • Use in any OpenSocial Container. iGoogle, Gmail, JIVE, more every day.
      • Fun!
        • Thinking about applications as atomic units of work add a new dimension to application design.
    • 43.
      • Building #opensocial gadgets is the easiest way to integrate external content into JIRA & Confluence. Join the #openapprevolution !
    • 44. Questions? Mark Halvorson [email_address] Twitter: @ halv0112