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

1. Intro to Atlassian
Dashboards and
OpenSocial
Tim Moore, Atlassian Developer

2. What Is the New
Atlassian Dashboard?

3. New Dashboard
for JIRA 4.0

4. New Dashboard
for JIRA 4.0

5. New Dashboard
for JIRA 4.0

6. New Dashboard
for JIRA 4.0

7. New Dashboard
for JIRA 4.0

8. New Dashboard
for JIRA 4.0

11. Integration with
Non-Atlassian apps

16. Solution:
OpenSocial Gadgets

17. What is OpenSocial?

18. Social Data Model

19. Web Service APIs

20. Gadgets

22. Seem Familiar?

23. Seem Familiar?

24. Gadgets are a Great
Solution for Dashboards

25. Built for Sharing Content

26. Open Standards,
Industry Support

27. Apache Shindig

28. Transitioning
from
Portlets

29. Why Write Gadgets?

30. Why Write Gadgets?
Easy!

31. Why Write Gadgets?
Easy!
Safe

32. Why Write Gadgets?
Easy!
Safe
Write Once, Display Everywhere

33. Why Write Gadgets?
Easy!
Safe
Write Once, Display Everywhere
Non-Atlassian Containers, Too!

34. What Do You
Need to Know?

35. What Do You
Need to Know?
A Dashboard Dissected

36. What Do You
Need to Know?
A Dashboard Dissected
Anatomy of a Gadget

37. What Do You
Need to Know?
A Dashboard Dissected
Anatomy of a Gadget
Requesting Data from Web
Services

38. What Do You
Need to Know?
A Dashboard Dissected
Anatomy of a Gadget
Requesting Data from Web
Services
Gadgets in an Atlassian Plugin

39. 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

40. A Dashboard Dissected

49. Anatomy of a Gadget

50. Anatomy of a Gadget
XML Spec File
• Metadata, HTML Content, and JavaScript

51. Anatomy of a Gadget
XML Spec File
• Metadata, HTML Content, and JavaScript
Core JavaScript API
• Access Preferences, Make Requests

52. 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

53. XML Spec File

54. <ModulePrefs>

55. <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>

56. <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>

57. <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>

58. <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;/>

59. <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;/>

60. <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;/>

61. <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>

62. 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);

63. 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);

64. 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);

65. Requesting Data from
Web Services

66. Requesting Data from
Web Services
AJAX + DOM

67. Requesting Data from
Web Services
AJAX + DOM
Request Proxy

68. Requesting Data from
Web Services
AJAX + DOM
Request Proxy
Trusted Apps + OAuth

69. gadgets io
. .makeRequest )
(

70. What Can You Call?

71. What Can You Call?
Any URL

72. What Can You Call?
Any URL
XML and JSON are the most
useful

73. What Can You Call?
Any URL
XML and JSON are the most
useful
REST-style APIs are the most
convenient

74. 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);
}

75. 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();
}

76. 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();
}

77. Questions?

78. Gadgets in an
Atlassian Plugin

79. Gadgets in an
Atlassian Plugin
Package into a Plugin JAR

80. Gadgets in an
Atlassian Plugin
Package into a Plugin JAR
Add <gadget> plugin module

81. Gadgets in an
Atlassian Plugin
Package into a Plugin JAR
Add <gadget> plugin module
Install

82. Directory Structure

83. atlassian-plugin.xml

84. 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>

85. 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>

86. atlassian-plugin.xml
<gadget
key=quot;jira-issuesquot;
location=quot;jira-issues.xmlquot;/>

87. Gadget Pre-Processing

88. Gadget Pre-Processing
__ATLASSIAN_BASE_URL__

89. Gadget Pre-Processing
__ATLASSIAN_BASE_URL__
“#-directives”

90. Gadget Pre-Processing
__ATLASSIAN_BASE_URL__
“#-directives”
• #staticResourceUrl

91. Gadget Pre-Processing
__ATLASSIAN_BASE_URL__
“#-directives”
• #staticResourceUrl
• #requireResource, & #includeResources

92. Gadget Pre-Processing
__ATLASSIAN_BASE_URL__
“#-directives”
• #staticResourceUrl
• #requireResource, & #includeResources
More in the docs…

93. Modified Gadget

94. 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>

95. 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>

96. 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>

97. Modified <Content>
<Content type=quot;htmlquot;><![CDATA[
#requireResource(quot;com.atlassian.jira.issues-
gadget:resourcesquot;)
#includeResources()
<div id=quot;content_divquot;></div>
]]></Content>
</Module>

98. 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>

99. What Can You Call from
a Gadget Plugin?

100. What Can You Call from
a Gadget Plugin?
Existing URLs and REST APIs —
no Java needed!

101. What Can You Call from
a Gadget Plugin?
Existing URLs and REST APIs —
no Java needed!
Custom servlet or WebWork
plugins

102. 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

103. OAuth

104. Whatʼs Next?

105. Whatʼs Next?
JavaScript Helper Libraries

106. Whatʼs Next?
JavaScript Helper Libraries
Dashboard in More Atlassian Apps

107. Whatʼs Next?
JavaScript Helper Libraries
Dashboard in More Atlassian Apps
Gadgets Everywhere!

108. Whatʼs Next?
JavaScript Helper Libraries
Dashboard in More Atlassian Apps
Gadgets Everywhere!
More OpenSocial

109. 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

110. haveasec.com/summit
SURVEY!!

111. www.atlassian.com/opensocial