Intro to Atlassian
Dashboards and
OpenSocial
Tim Moore, Atlassian Developer

What Is the New
Atlassian Dashboard?

New Dashboard
for JIRA 4.0

New Dashboard
for JIRA 4.0

New Dashboard
for JIRA 4.0

New Dashboard
for JIRA 4.0

New Dashboard
for JIRA 4.0

New Dashboard
for JIRA 4.0

Integration with
Non-Atlassian apps

Solution:
OpenSocial Gadgets

What is OpenSocial?

Social Data Model

Web Service APIs

Gadgets

Seem Familiar?

Seem Familiar?

Gadgets are a Great
Solution for Dashboards

Built for Sharing Content

Open Standards,
Industry Support

Apache Shindig

Transitioning
from
Portlets

Why Write Gadgets?

Why Write Gadgets?
Easy!

Why Write Gadgets?
Easy!
Safe

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

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

What Do You
Need to Know?

What Do You
Need to Know?
A Dashboard Dissected

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

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

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

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

A Dashboard Dissected

Anatomy of a Gadget

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

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

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>

<ModulePrefs>
<?xml version=\"1.0\" encoding=\"UTF-8\" ?>
<Module>
<ModulePrefs
title=\"JIRA Issues\"
author=\"Atlassian\"
thumbnail=\"http://labs.atlassian.com/svn/GADGETS/
trunk/jira-issues/basic/jira-issues-thumbnail.png\"
description=\"A list of recently created Issues\">
<Require feature=\"minimessage\" />
<Require feature=\"dynamic-height\" />
</ModulePrefs>

<ModulePrefs>
<?xml version=\"1.0\" encoding=\"UTF-8\" ?>
<Module>
<ModulePrefs
title=\"JIRA Issues\"
author=\"Atlassian\"
thumbnail=\"http://labs.atlassian.com/svn/GADGETS/
trunk/jira-issues/basic/jira-issues-thumbnail.png\"
description=\"A list of recently created Issues\">
<Require feature=\"minimessage\" />
<Require feature=\"dynamic-height\" />
</ModulePrefs>

<ModulePrefs>
<?xml version=\"1.0\" encoding=\"UTF-8\" ?>
<Module>
<ModulePrefs
title=\"JIRA Issues\"
author=\"Atlassian\"
thumbnail=\"http://labs.atlassian.com/svn/GADGETS/
trunk/jira-issues/basic/jira-issues-thumbnail.png\"
description=\"A list of recently created Issues\">
<Require feature=\"minimessage\" />
<Require feature=\"dynamic-height\" />
</ModulePrefs>

<UserPref>
<UserPref
name=\"show_date\"
display_name=\"Show Dates?\"
datatype=\"bool\"
default_value=\"true\"/>
<UserPref
name=\"show_summ\"
display_name=\"Show Summaries?\"
datatype=\"bool\"
default_value=\"true\"/>
<UserPref
name=\"num_entries\"
display_name=\"Number of Entries:\"
default_value=\"5\"
required=\"true\"/>

<UserPref>
<UserPref
name=\"show_date\"
display_name=\"Show Dates?\"
datatype=\"bool\"
default_value=\"true\"/>
<UserPref
name=\"show_summ\"
display_name=\"Show Summaries?\"
datatype=\"bool\"
default_value=\"true\"/>
<UserPref
name=\"num_entries\"
display_name=\"Number of Entries:\"
default_value=\"5\"
required=\"true\"/>

<UserPref>
<UserPref
name=\"show_date\"
display_name=\"Show Dates?\"
datatype=\"bool\"
default_value=\"true\"/>
<UserPref
name=\"show_summ\"
display_name=\"Show Summaries?\"
datatype=\"bool\"
default_value=\"true\"/>
<UserPref
name=\"num_entries\"
display_name=\"Number of Entries:\"
default_value=\"5\"
required=\"true\"/>

<Content>
<Content type=\"html\"><![CDATA[
<link rel=\"stylesheet\"
href=\"http://labs.atlassian.com/svn/GADGETS/trunk/
jira-issues/basic/jira-issues.css\">
<div id=\"content_div\"></div>
<script type=\"text/javascript\"
src=\"http://labs.atlassian.com/svn/GADGETS/trunk/
jira-issues/basic/jira-issues.js\"></script>
]]></Content>
</Module>

JavaScript
// Create minimessage factory
var msg = new gadgets.MiniMessage();
// Show a small loading message to the user
var loadMessage = msg.createStaticMessage(\"loading...\");
// Get configured user prefs
var prefs = new gadgets.Prefs();
var showDate = prefs.getBool(\"show_date\");
var showSummary = prefs.getBool(\"show_summ\");
var numEntries = prefs.getInt(\"num_entries\");
// Fetch issues when the gadget loads
gadgets.util.registerOnLoadHandler(fetchIssues);

JavaScript
// Create minimessage factory
var msg = new gadgets.MiniMessage();
// Show a small loading message to the user
var loadMessage = msg.createStaticMessage(\"loading...\");
// Get configured user prefs
var prefs = new gadgets.Prefs();
var showDate = prefs.getBool(\"show_date\");
var showSummary = prefs.getBool(\"show_summ\");
var numEntries = prefs.getInt(\"num_entries\");
// Fetch issues when the gadget loads
gadgets.util.registerOnLoadHandler(fetchIssues);

JavaScript
// Create minimessage factory
var msg = new gadgets.MiniMessage();
// Show a small loading message to the user
var loadMessage = msg.createStaticMessage(\"loading...\");
// Get configured user prefs
var prefs = new gadgets.Prefs();
var showDate = prefs.getBool(\"show_date\");
var showSummary = prefs.getBool(\"show_summ\");
var numEntries = prefs.getInt(\"num_entries\");
// Fetch issues when the gadget loads
gadgets.util.registerOnLoadHandler(fetchIssues);

Requesting Data from
Web Services

Requesting Data from
Web Services
AJAX + DOM

Requesting Data from
Web Services
AJAX + DOM
Request Proxy

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

gadgets io
. .makeRequest )
(

What Can You Call?

What Can You Call?
Any URL

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

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

Fetching Issues
function fetchIssues() {
var url = \"http://jira.atlassian.com/sr/\" +
\"jira.issueviews:searchrequest-xml\" +
\"/temp/SearchRequest.xml?\" +
\"created%3Aprevious=-1w&resolution=-1\" +
\"&sorter/field=issuekey&sorter/order=DESC\" +
\"&sorter/field=created&sorter/order=DESC\" +
\"&tempMax=20\";
var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] =
gadgets.io.ContentType.DOM;
gadgets.io.makeRequest(url, 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();
}

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

Questions?

Gadgets in an
Atlassian Plugin

Gadgets in an
Atlassian Plugin
Package into a Plugin JAR

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

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

Directory Structure

atlassian-plugin.xml

atlassian-plugin.xml
<atlassian-plugin
key=\"com.atlassian.jira.issues-gadget\"
name=\"JIRA Issues Gadget Plugin\"
pluginsVersion=\"2\">
<plugin-info>
<version>1.0</version>
</plugin-info>

Resources
<resource
type=\"download\"
name=\"jira-issues-thumbnail.png\"
location=\"jira-issues-thumbnail.png\"/>
<web-resource key=\"resources\">
<resource
type=\"download\"
name=\"jira-issues.js\"
location=\"jira-issues.js\"/>
<resource
type=\"download\"
name=\"jira-issues.css\"
location=\"jira-issues.css\"/>
</web-resource>

atlassian-plugin.xml
<gadget
key=\"jira-issues\"
location=\"jira-issues.xml\"/>

Gadget Pre-Processing

Gadget Pre-Processing
__ATLASSIAN_BASE_URL__

Gadget Pre-Processing
__ATLASSIAN_BASE_URL__
“#-directives”

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

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

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

Modified Gadget

Modified Gadget
<?xml version=\"1.0\" encoding=\"UTF-8\" ?>
<Module>
<ModulePrefs
title=\"JIRA Issues\"
author=\"Atlassian\"
thumbnail=\"http://labs.atlassian.com/svn/GADGETS/
trunk/jira-issues/basic/jira-issues-thumbnail.png\"
description=\"A list of recently created Issues\">
<Require feature=\"minimessage\" />
<Require feature=\"dynamic-height\" />
</ModulePrefs>

Modified Gadget
<?xml version=\"1.0\" encoding=\"UTF-8\" ?>
<Module>
<ModulePrefs
title=\"JIRA Issues\"
author=\"Atlassian\"
thumbnail=\"http://labs.atlassian.com/svn/GADGETS/
thumbnail=
trunk/jira-issues/basic/jira-issues-thumbnail.png\"
'#staticResourceUrl(\"com.atlassian.jira.issues-
gadget:jira-issues\", \"jira-issues-thumbnail.png\")'
description=\"A list of recently created Issues\">
description=\"A list of recently created Issues\">
<Require feature=\"minimessage\" />
<Require feature=\"dynamic-height\" />
feature=\"minimessage\" />
<Require feature=\"dynamic-height\" />
</ModulePrefs>
</ModulePrefs>

Modified <Content>
<Content type=\"html\"><![CDATA[
<link rel=\"stylesheet\"
href=\"http://labs.atlassian.com/svn/GADGETS/trunk/
jira-issues/basic/jira-issues.css\">
<div id=\"content_div\"></div>
<script type=\"text/javascript\"
src=\"http://labs.atlassian.com/svn/GADGETS/trunk/
jira-issues/basic/jira-issues.js\"></script>
]]></Content>
</Module>

Modified <Content>
<Content type=\"html\"><![CDATA[
#requireResource(\"com.atlassian.jira.issues-
gadget:resources\")
#includeResources()
<div id=\"content_div\"></div>
]]></Content>
</Module>

Modified <Content>
<Content type=\"html\"><![CDATA[
#requireResource(\"com.atlassian.jira.issues-
gadget:resources\")
<script>
#includeResources()
var url = \"__ATLASSIAN_BASE_URL__/sr/\" +
<div\"jira.issueviews:searchrequest-xml\" +
id=\"content_div\"></div>
\"/temp/SearchRequest.xml?\" +
]]></Content>
\"created%3Aprevious=-1w&resolution=-1\" +
</Module>
\"&sorter/field=issuekey&sorter/order=DESC\" +
\"&sorter/field=created&sorter/order=DESC\" +
\"&tempMax=20\";
</script>
#includeResources()
<div id=\"content_div\"></div>

What Can You Call from
a Gadget Plugin?

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

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

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

OAuth

Whatʼs Next?

Whatʼs Next?
JavaScript Helper Libraries

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

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

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

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

haveasec.com/summit
SURVEY!!

www.atlassian.com/opensocial