Getting the Most Out of OpenSocial Gadgets
Upcoming SlideShare
Loading in...5

Getting the Most Out of OpenSocial Gadgets






Total Views
Views on SlideShare
Embed Views



6 Embeds 122 81 18 10
url_unknown 7 5 1



Upload Details

Uploaded via as Microsoft PowerPoint

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • • 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 • 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 • JavaScript makes use of the core gadgets JavaScript API • Automatically made available to all gadgets • Access configurable preferences • Make requests to web services • 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

Getting the Most Out of OpenSocial Gadgets Getting the Most Out of OpenSocial Gadgets Presentation Transcript

  • Getting the most out of OpenSocial gadgets
    • Mark Halvorson
    • Director of Interactive Marketing, Atlassian
    • Board Member, OpenSocial Foundation
    • [email_address] , @halv0112
  • Agenda
    • What it is a Gadget
    • Why Atlassian chose OpenSocial
    • Why you should too!
  • What is OpenSocial?
  • Social Data Model
  • Web Service APIs
  • Gadgets
  • Our Problem
  • Before
    • Enterprise Apps are Silos
    FishEye Source Code JIRA Issues & Tasks Confluence Wiki
  • Emphasize Teams, Projects & Tasks over Tools
  • Too Many Dashboards
  • Cross-Product Sharing
  • Integration
    • with non-Atlassian apps
  • Solution: OpenSocial Gadgets
  • Gadgets
    • are a Great Solution for Dashboards
  • After
    • Open standard for enterprise application connection
    view complete project single activity stream comment & interact
  • Managers Do Email
    • Not just about portals, or internal applications.
    view activity & status create issues
  • Why Write Gadgets?
    • They’re easy!
    • They use stable, widely accessible and understood technologies
    • Write once, display in multiple containers
  • The Hello World Example
  • 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
  • XML Spec File
  • <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; &quot; description= &quot;A list of recently created Issues&quot; > <Require feature= &quot;minimessage&quot; /> <Require feature= &quot;dynamic-height&quot; /> </ModulePrefs>
  • <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; />
  • <Content> <Content type= &quot;html&quot; > <![CDATA[ <link rel= &quot;stylesheet&quot; href= &quot; &quot; > <div id= &quot;content_div&quot; ></div> <script type= &quot;text/javascript&quot; src= &quot; &quot; ></script> ]]> </Content> </Module>
  • Views - DEFAULT view
  • Views - DEFAULT view
  • Views - CANVAS view
  • Views - DEFAULT view (Gmail)
  • Views - CANVAS view (Gmail)
  • Inline Contextual Gadget +
  • Views - Custom view
  • Wallboards
    • Gadgets go beyond the JIRA Dashboard onto your wall!
  • Wallboard – Default View
  • Wallboard – Wallboard View
  • 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);
  • Requesting Data from Web Services
    • AJAX + DOM
    • OAuth
    • Request Proxy
  • Requesting Data from Web Services
  • What Can You Call?
    • Any URL
    • XML and JSON are the most useful
  • Fetching Issues function fetchIssues () { var url = &quot; &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[] =;, handleResponse, params); }
  • 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(); }
  • 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.
    • Building #opensocial gadgets is the easiest way to integrate external content into JIRA & Confluence. Join the #openapprevolution !
  • Questions? Mark Halvorson [email_address] Twitter: @ halv0112