Intro Open Social and Dashboards

3,811 views

Published on

Atlassian is unveiling a new dashboard that will be added to all of our products, based on the OpenSocial specification. This session explores Atlassian's use of OpenSocial, and details the new Atlassian dashboards and Gadgets.

Atlassian Speaker: Tim Moore

Key Takeaways:

* Overview of OpenSocial
* Deep-dive on Atlassian dashboards and Gadgets
* Demos, how-tos and more

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,811
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
80
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Intro Open Social and Dashboards

  1. 1. Intro to Atlassian Dashboards and OpenSocial Tim Moore, Atlassian Developer
  2. 2. What Is the New Atlassian Dashboard?
  3. 3. New Dashboard for JIRA 4.0
  4. 4. New Dashboard for JIRA 4.0
  5. 5. New Dashboard for JIRA 4.0
  6. 6. New Dashboard for JIRA 4.0
  7. 7. New Dashboard for JIRA 4.0
  8. 8. New Dashboard for JIRA 4.0
  9. 9. Integration with Non-Atlassian apps
  10. 10. Solution: OpenSocial Gadgets
  11. 11. What is OpenSocial?
  12. 12. Social Data Model
  13. 13. Web Service APIs
  14. 14. Gadgets
  15. 15. Seem Familiar?
  16. 16. Seem Familiar?
  17. 17. Gadgets are a Great Solution for Dashboards
  18. 18. Built for Sharing Content
  19. 19. Open Standards, Industry Support
  20. 20. Apache Shindig
  21. 21. Transitioning from Portlets
  22. 22. Why Write Gadgets?
  23. 23. Why Write Gadgets? Easy!
  24. 24. Why Write Gadgets? Easy! Safe
  25. 25. Why Write Gadgets? Easy! Safe Write Once, Display Everywhere
  26. 26. Why Write Gadgets? Easy! Safe Write Once, Display Everywhere Non-Atlassian Containers, Too!
  27. 27. What Do You Need to Know?
  28. 28. What Do You Need to Know? A Dashboard Dissected
  29. 29. What Do You Need to Know? A Dashboard Dissected Anatomy of a Gadget
  30. 30. What Do You Need to Know? A Dashboard Dissected Anatomy of a Gadget Requesting Data from Web Services
  31. 31. What Do You Need to Know? A Dashboard Dissected Anatomy of a Gadget Requesting Data from Web Services Gadgets in an Atlassian Plugin
  32. 32. What Do You Need to Know? A Dashboard Dissected Anatomy of a Gadget Requesting Data from Web Services Gadgets in an Atlassian Plugin Where to Go to Learn More
  33. 33. A Dashboard Dissected
  34. 34. Anatomy of a Gadget
  35. 35. Anatomy of a Gadget XML Spec File • Metadata, HTML Content, and JavaScript
  36. 36. Anatomy of a Gadget XML Spec File • Metadata, HTML Content, and JavaScript Core JavaScript API • Access Preferences, Make Requests
  37. 37. 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
  38. 38. XML Spec File
  39. 39. <ModulePrefs>
  40. 40. <ModulePrefs> <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;JIRA Issuesquot; author=quot;Atlassianquot; thumbnail=quot;http://labs.atlassian.com/svn/GADGETS/ trunk/jira-issues/basic/jira-issues-thumbnail.pngquot; description=quot;A list of recently created Issuesquot;> <Require feature=quot;minimessagequot; /> <Require feature=quot;dynamic-heightquot; /> </ModulePrefs>
  41. 41. <ModulePrefs> <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;JIRA Issuesquot; author=quot;Atlassianquot; thumbnail=quot;http://labs.atlassian.com/svn/GADGETS/ trunk/jira-issues/basic/jira-issues-thumbnail.pngquot; description=quot;A list of recently created Issuesquot;> <Require feature=quot;minimessagequot; /> <Require feature=quot;dynamic-heightquot; /> </ModulePrefs>
  42. 42. <ModulePrefs> <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;JIRA Issuesquot; author=quot;Atlassianquot; thumbnail=quot;http://labs.atlassian.com/svn/GADGETS/ trunk/jira-issues/basic/jira-issues-thumbnail.pngquot; description=quot;A list of recently created Issuesquot;> <Require feature=quot;minimessagequot; /> <Require feature=quot;dynamic-heightquot; /> </ModulePrefs>
  43. 43. <UserPref> <UserPref name=quot;show_datequot; display_name=quot;Show Dates?quot; datatype=quot;boolquot; default_value=quot;truequot;/> <UserPref name=quot;show_summquot; display_name=quot;Show Summaries?quot; datatype=quot;boolquot; default_value=quot;truequot;/> <UserPref name=quot;num_entriesquot; display_name=quot;Number of Entries:quot; default_value=quot;5quot; required=quot;truequot;/>
  44. 44. <UserPref> <UserPref name=quot;show_datequot; display_name=quot;Show Dates?quot; datatype=quot;boolquot; default_value=quot;truequot;/> <UserPref name=quot;show_summquot; display_name=quot;Show Summaries?quot; datatype=quot;boolquot; default_value=quot;truequot;/> <UserPref name=quot;num_entriesquot; display_name=quot;Number of Entries:quot; default_value=quot;5quot; required=quot;truequot;/>
  45. 45. <UserPref> <UserPref name=quot;show_datequot; display_name=quot;Show Dates?quot; datatype=quot;boolquot; default_value=quot;truequot;/> <UserPref name=quot;show_summquot; display_name=quot;Show Summaries?quot; datatype=quot;boolquot; default_value=quot;truequot;/> <UserPref name=quot;num_entriesquot; display_name=quot;Number of Entries:quot; default_value=quot;5quot; required=quot;truequot;/>
  46. 46. <Content> <Content type=quot;htmlquot;><![CDATA[ <link rel=quot;stylesheetquot; href=quot;http://labs.atlassian.com/svn/GADGETS/trunk/ jira-issues/basic/jira-issues.cssquot;> <div id=quot;content_divquot;></div> <script type=quot;text/javascriptquot; src=quot;http://labs.atlassian.com/svn/GADGETS/trunk/ jira-issues/basic/jira-issues.jsquot;></script> ]]></Content> </Module>
  47. 47. 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_datequot;); var showSummary = prefs.getBool(quot;show_summquot;); var numEntries = prefs.getInt(quot;num_entriesquot;); // Fetch issues when the gadget loads gadgets.util.registerOnLoadHandler(fetchIssues);
  48. 48. 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_datequot;); var showSummary = prefs.getBool(quot;show_summquot;); var numEntries = prefs.getInt(quot;num_entriesquot;); // Fetch issues when the gadget loads gadgets.util.registerOnLoadHandler(fetchIssues);
  49. 49. 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_datequot;); var showSummary = prefs.getBool(quot;show_summquot;); var numEntries = prefs.getInt(quot;num_entriesquot;); // Fetch issues when the gadget loads gadgets.util.registerOnLoadHandler(fetchIssues);
  50. 50. Requesting Data from Web Services
  51. 51. Requesting Data from Web Services AJAX + DOM
  52. 52. Requesting Data from Web Services AJAX + DOM Request Proxy
  53. 53. Requesting Data from Web Services AJAX + DOM Request Proxy Trusted Apps + OAuth
  54. 54. gadgets io . .makeRequest ) (
  55. 55. What Can You Call?
  56. 56. What Can You Call? Any URL
  57. 57. What Can You Call? Any URL XML and JSON are the most useful
  58. 58. What Can You Call? Any URL XML and JSON are the most useful REST-style APIs are the most convenient
  59. 59. Fetching Issues function fetchIssues() { var url = quot;http://jira.atlassian.com/sr/quot; + quot;jira.issueviews:searchrequest-xmlquot; + quot;/temp/SearchRequest.xml?quot; + quot;created%3Aprevious=-1w&resolution=-1quot; + quot;&sorter/field=issuekey&sorter/order=DESCquot; + quot;&sorter/field=created&sorter/order=DESCquot; + quot;&tempMax=20quot;; var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM; gadgets.io.makeRequest(url, handleResponse, params); }
  60. 60. 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(); }
  61. 61. 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(); }
  62. 62. Questions?
  63. 63. Gadgets in an Atlassian Plugin
  64. 64. Gadgets in an Atlassian Plugin Package into a Plugin JAR
  65. 65. Gadgets in an Atlassian Plugin Package into a Plugin JAR Add <gadget> plugin module
  66. 66. Gadgets in an Atlassian Plugin Package into a Plugin JAR Add <gadget> plugin module Install
  67. 67. Directory Structure
  68. 68. atlassian-plugin.xml
  69. 69. atlassian-plugin.xml <atlassian-plugin key=quot;com.atlassian.jira.issues-gadgetquot; name=quot;JIRA Issues Gadget Pluginquot; pluginsVersion=quot;2quot;> <plugin-info> <version>1.0</version> </plugin-info>
  70. 70. Resources <resource type=quot;downloadquot; name=quot;jira-issues-thumbnail.pngquot; location=quot;jira-issues-thumbnail.pngquot;/> <web-resource key=quot;resourcesquot;> <resource type=quot;downloadquot; name=quot;jira-issues.jsquot; location=quot;jira-issues.jsquot;/> <resource type=quot;downloadquot; name=quot;jira-issues.cssquot; location=quot;jira-issues.cssquot;/> </web-resource>
  71. 71. atlassian-plugin.xml <gadget key=quot;jira-issuesquot; location=quot;jira-issues.xmlquot;/>
  72. 72. Gadget Pre-Processing
  73. 73. Gadget Pre-Processing __ATLASSIAN_BASE_URL__
  74. 74. Gadget Pre-Processing __ATLASSIAN_BASE_URL__ “#-directives”
  75. 75. Gadget Pre-Processing __ATLASSIAN_BASE_URL__ “#-directives” • #staticResourceUrl
  76. 76. Gadget Pre-Processing __ATLASSIAN_BASE_URL__ “#-directives” • #staticResourceUrl • #requireResource, & #includeResources
  77. 77. Gadget Pre-Processing __ATLASSIAN_BASE_URL__ “#-directives” • #staticResourceUrl • #requireResource, & #includeResources More in the docs…
  78. 78. Modified Gadget
  79. 79. Modified Gadget <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;JIRA Issuesquot; author=quot;Atlassianquot; thumbnail=quot;http://labs.atlassian.com/svn/GADGETS/ trunk/jira-issues/basic/jira-issues-thumbnail.pngquot; description=quot;A list of recently created Issuesquot;> <Require feature=quot;minimessagequot; /> <Require feature=quot;dynamic-heightquot; /> </ModulePrefs>
  80. 80. Modified Gadget <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;JIRA Issuesquot; author=quot;Atlassianquot; thumbnail=quot;http://labs.atlassian.com/svn/GADGETS/ thumbnail= trunk/jira-issues/basic/jira-issues-thumbnail.pngquot; '#staticResourceUrl(quot;com.atlassian.jira.issues- gadget:jira-issuesquot;, quot;jira-issues-thumbnail.pngquot;)' description=quot;A list of recently created Issuesquot;> description=quot;A list of recently created Issuesquot;> <Require feature=quot;minimessagequot; /> <Require feature=quot;dynamic-heightquot; /> feature=quot;minimessagequot; /> <Require feature=quot;dynamic-heightquot; /> </ModulePrefs> </ModulePrefs>
  81. 81. Modified <Content> <Content type=quot;htmlquot;><![CDATA[ <link rel=quot;stylesheetquot; href=quot;http://labs.atlassian.com/svn/GADGETS/trunk/ jira-issues/basic/jira-issues.cssquot;> <div id=quot;content_divquot;></div> <script type=quot;text/javascriptquot; src=quot;http://labs.atlassian.com/svn/GADGETS/trunk/ jira-issues/basic/jira-issues.jsquot;></script> ]]></Content> </Module>
  82. 82. Modified <Content> <Content type=quot;htmlquot;><![CDATA[ #requireResource(quot;com.atlassian.jira.issues- gadget:resourcesquot;) #includeResources() <div id=quot;content_divquot;></div> ]]></Content> </Module>
  83. 83. Modified <Content> <Content type=quot;htmlquot;><![CDATA[ #requireResource(quot;com.atlassian.jira.issues- gadget:resourcesquot;) <script> #includeResources() var url = quot;__ATLASSIAN_BASE_URL__/sr/quot; + <divquot;jira.issueviews:searchrequest-xmlquot; + id=quot;content_divquot;></div> quot;/temp/SearchRequest.xml?quot; + ]]></Content> quot;created%3Aprevious=-1w&resolution=-1quot; + </Module> quot;&sorter/field=issuekey&sorter/order=DESCquot; + quot;&sorter/field=created&sorter/order=DESCquot; + quot;&tempMax=20quot;; </script> #includeResources() <div id=quot;content_divquot;></div>
  84. 84. What Can You Call from a Gadget Plugin?
  85. 85. What Can You Call from a Gadget Plugin? Existing URLs and REST APIs — no Java needed!
  86. 86. What Can You Call from a Gadget Plugin? Existing URLs and REST APIs — no Java needed! Custom servlet or WebWork plugins
  87. 87. What Can You Call from a Gadget Plugin? Existing URLs and REST APIs — no Java needed! Custom servlet or WebWork plugins Atlassian REST Plugin Module Type
  88. 88. OAuth
  89. 89. Whatʼs Next?
  90. 90. Whatʼs Next? JavaScript Helper Libraries
  91. 91. Whatʼs Next? JavaScript Helper Libraries Dashboard in More Atlassian Apps
  92. 92. Whatʼs Next? JavaScript Helper Libraries Dashboard in More Atlassian Apps Gadgets Everywhere!
  93. 93. Whatʼs Next? JavaScript Helper Libraries Dashboard in More Atlassian Apps Gadgets Everywhere! More OpenSocial
  94. 94. If You Donʼt Remember Anything Else… Atlassian Dashboards are composed of Gadgets Atlassian Gadgets are OpenSocial Gadgets Gadgets are HTML, CSS, & JavaScript mini-apps that can be displayed in many containers Gadgets are defined by a static XML spec file Gadgets make use of web services via gadgets.io.makeRequest Gadgets can be packaged in Atlassian Plugins for improved portability and integration
  95. 95. haveasec.com/summit SURVEY!!
  96. 96. www.atlassian.com/opensocial

×