0
 
Getting the most out of OpenSocial gadgets <ul><li>Mark Halvorson </li></ul><ul><li>Director of Interactive Marketing, Atl...
Agenda <ul><li>What it is a Gadget </li></ul><ul><li>Why Atlassian chose OpenSocial </li></ul><ul><li>Why you should too! ...
What is OpenSocial?
Social Data Model
Web Service APIs
Gadgets
Our Problem
Before <ul><li>Enterprise Apps are Silos </li></ul>FishEye Source Code JIRA Issues & Tasks Confluence Wiki
Emphasize Teams, Projects & Tasks over Tools
Too Many Dashboards
Cross-Product Sharing
Integration <ul><li>with non-Atlassian apps </li></ul>
Solution:  OpenSocial Gadgets
Gadgets <ul><li>are a Great Solution for Dashboards </li></ul>
After <ul><li>Open standard for enterprise application connection </li></ul>view complete project single activity stream c...
Managers Do Email <ul><li>Not just about portals, or internal applications. </li></ul>view activity & status create issues
Why Write Gadgets? <ul><li>They’re easy! </li></ul><ul><li>They use stable, widely accessible and understood technologies ...
The Hello World Example
Anatomy of a Gadget <ul><li>XML Spec File </li></ul><ul><ul><li>Metadata, HTML Content, and JavaScript </li></ul></ul><ul>...
XML Spec File
<ModulePrefs> <?xml version= &quot;1.0&quot;  encoding= &quot;UTF-8&quot;   ?> <Module>   <ModulePrefs   title= &quot;JIRA...
<UserPref> <UserPref   name= &quot;show_date&quot;   display_name= &quot;Show Dates?&quot;   datatype= &quot;bool&quot;   ...
<Content> <Content   type= &quot;html&quot; > <![CDATA[   <link   rel= &quot;stylesheet&quot;   href= &quot; http://labs.a...
Views - DEFAULT view
Views - DEFAULT view
Views - CANVAS view
Views - DEFAULT view (Gmail)
Views - CANVAS view (Gmail)
Inline Contextual Gadget +
Views - Custom view
Wallboards <ul><li>Gadgets go beyond the JIRA Dashboard onto your wall! </li></ul>
Wallboard – Default View
Wallboard – Wallboard View
JavaScript // Create minimessage factory var  msg  =   new  gadgets.MiniMessage(); // Show a small loading message to the ...
Requesting Data from  Web Services <ul><li>AJAX + DOM </li></ul><ul><li>OAuth </li></ul><ul><li>Request Proxy </li></ul>
gadgets.io.makeRequest() Requesting Data from  Web Services
What Can You Call? <ul><li>Any URL </li></ul><ul><li>XML and JSON are the most useful </li></ul>
Fetching Issues function   fetchIssues () {   var  url  =   &quot; http://jira.atlassian.com/sr/ &quot;   +   &quot;jira.i...
Handling the Response function   handleResponse (obj) {   var  domData  =  obj. data ;   var  jiraIssues  =  {   title : g...
Summary - Why write gadgets? <ul><li>Easy! </li></ul><ul><ul><li>Simple web based technologies mean anyone can write a gad...
<ul><li>Building #opensocial gadgets is the easiest way to integrate external content into JIRA & Confluence. Join the #op...
Questions? Mark Halvorson [email_address] Twitter: @ halv0112
Upcoming SlideShare
Loading in...5
×

Getting the Most Out of OpenSocial Gadgets

1,558

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide
  • • Designed &amp; 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, &amp; 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 • &lt;click&gt; XML spec file: description of everything that makes up your gadget • Metadata, such as the title &amp; 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 • &lt;click&gt; JavaScript makes use of the core gadgets JavaScript API • Automatically made available to all gadgets • Access configurable preferences • Make requests to web services • &lt;click&gt; 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 of "Getting the Most Out of OpenSocial Gadgets"

    1. 2. Getting the most out of OpenSocial gadgets <ul><li>Mark Halvorson </li></ul><ul><li>Director of Interactive Marketing, Atlassian </li></ul><ul><li>Board Member, OpenSocial Foundation </li></ul><ul><li>[email_address] , @halv0112 </li></ul>
    2. 3. Agenda <ul><li>What it is a Gadget </li></ul><ul><li>Why Atlassian chose OpenSocial </li></ul><ul><li>Why you should too! </li></ul>
    3. 4. What is OpenSocial?
    4. 5. Social Data Model
    5. 6. Web Service APIs
    6. 7. Gadgets
    7. 8. Our Problem
    8. 9. Before <ul><li>Enterprise Apps are Silos </li></ul>FishEye Source Code JIRA Issues & Tasks Confluence Wiki
    9. 10. Emphasize Teams, Projects & Tasks over Tools
    10. 11. Too Many Dashboards
    11. 12. Cross-Product Sharing
    12. 13. Integration <ul><li>with non-Atlassian apps </li></ul>
    13. 14. Solution: OpenSocial Gadgets
    14. 15. Gadgets <ul><li>are a Great Solution for Dashboards </li></ul>
    15. 16. After <ul><li>Open standard for enterprise application connection </li></ul>view complete project single activity stream comment & interact
    16. 17. Managers Do Email <ul><li>Not just about portals, or internal applications. </li></ul>view activity & status create issues
    17. 18.
    18. 19. Why Write Gadgets? <ul><li>They’re easy! </li></ul><ul><li>They use stable, widely accessible and understood technologies </li></ul><ul><li>Write once, display in multiple containers </li></ul>
    19. 20. The Hello World Example
    20. 21. Anatomy of a Gadget <ul><li>XML Spec File </li></ul><ul><ul><li>Metadata, HTML Content, and JavaScript </li></ul></ul><ul><li>Core JavaScript API </li></ul><ul><ul><li>Access Preferences, Make Requests </li></ul></ul><ul><li>Gadget Features </li></ul><ul><ul><li>Additional, Optional Capabilities & APIs </li></ul></ul>
    21. 22. XML Spec File
    22. 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>
    23. 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; />
    24. 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>
    25. 26. Views - DEFAULT view
    26. 27. Views - DEFAULT view
    27. 28. Views - CANVAS view
    28. 29. Views - DEFAULT view (Gmail)
    29. 30. Views - CANVAS view (Gmail)
    30. 31. Inline Contextual Gadget +
    31. 32. Views - Custom view
    32. 33. Wallboards <ul><li>Gadgets go beyond the JIRA Dashboard onto your wall! </li></ul>
    33. 34. Wallboard – Default View
    34. 35. Wallboard – Wallboard View
    35. 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);
    36. 37. Requesting Data from Web Services <ul><li>AJAX + DOM </li></ul><ul><li>OAuth </li></ul><ul><li>Request Proxy </li></ul>
    37. 38. gadgets.io.makeRequest() Requesting Data from Web Services
    38. 39. What Can You Call? <ul><li>Any URL </li></ul><ul><li>XML and JSON are the most useful </li></ul>
    39. 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); }
    40. 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(); }
    41. 42. Summary - Why write gadgets? <ul><li>Easy! </li></ul><ul><ul><li>Simple web based technologies mean anyone can write a gadget. </li></ul></ul><ul><li>Reusable! </li></ul><ul><ul><li>Use in any OpenSocial Container. iGoogle, Gmail, JIVE, more every day. </li></ul></ul><ul><li>Fun! </li></ul><ul><ul><li>Thinking about applications as atomic units of work add a new dimension to application design. </li></ul></ul>
    42. 43. <ul><li>Building #opensocial gadgets is the easiest way to integrate external content into JIRA & Confluence. Join the #openapprevolution ! </li></ul>
    43. 44. Questions? Mark Halvorson [email_address] Twitter: @ halv0112
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×