Intro to Atlassian Dashboards and

OpenSocial

Tim Moore, Atlassian Developer

What Is the New Atlassian Dashboard?

New Dashboardfor JIRA 4.0

New Dashboardfor JIRA 4.0

New Dashboardfor JIRA 4.0

New Dashboardfor JIRA 4.0

New Dashboardfor JIRA 4.0

New Dashboardfor 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

Transitioningfrom

Portlets

Why Write Gadgets?

Why Write Gadgets?

Easy!

Why Write Gadgets?

Easy!Safe

Why Write Gadgets?

Easy!SafeWrite Once, Display Everywhere

Why Write Gadgets?

Easy!SafeWrite Once, Display EverywhereNon-Atlassian Containers, Too!

What Do YouNeed to Know?

What Do YouNeed to Know?

A Dashboard Dissected

What Do YouNeed to Know?

A Dashboard DissectedAnatomy of a Gadget

What Do YouNeed to Know?

A Dashboard DissectedAnatomy of a GadgetRequesting Data from Web Services

What Do YouNeed to Know?

A Dashboard DissectedAnatomy of a GadgetRequesting Data from Web ServicesGadgets in an Atlassian Plugin

What Do YouNeed to Know?

A Dashboard DissectedAnatomy of a GadgetRequesting Data from Web ServicesGadgets in an Atlassian PluginWhere 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 factoryvar msg = new gadgets.MiniMessage();// Show a small loading message to the uservar loadMessage = msg.createStaticMessage("loading...");

// Get configured user prefsvar 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 loadsgadgets.util.registerOnLoadHandler(fetchIssues);

JavaScript

// Create minimessage factoryvar msg = new gadgets.MiniMessage();// Show a small loading message to the uservar loadMessage = msg.createStaticMessage("loading...");

// Get configured user prefsvar 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 loadsgadgets.util.registerOnLoadHandler(fetchIssues);

JavaScript

// Create minimessage factoryvar msg = new gadgets.MiniMessage();// Show a small loading message to the uservar loadMessage = msg.createStaticMessage("loading...");

// Get configured user prefsvar 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 loadsgadgets.util.registerOnLoadHandler(fetchIssues);

Requesting Data from Web Services

Requesting Data from Web Services

AJAX + DOM

Requesting Data from Web Services

AJAX + DOMRequest Proxy

Requesting Data from Web Services

AJAX + DOMRequest ProxyTrusted Apps + OAuth

gadgets.io.makeRequest()

What Can You Call?

What Can You Call?

Any URL

What Can You Call?

Any URLXML and JSON are the most useful

What Can You Call?

Any URLXML and JSON are the most usefulREST-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 anAtlassian Plugin

Gadgets in anAtlassian Plugin

Package into a Plugin JAR

Gadgets in anAtlassian Plugin

Package into a Plugin JARAdd <gadget> plugin module

Gadgets in anAtlassian Plugin

Package into a Plugin JARAdd <gadget> plugin moduleInstall

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/trunk/jira-issues/basic/jira-issues-thumbnail.png" description="A list of recently created Issues">

<Require feature="minimessage" /> <Require feature="dynamic-height" />

</ModulePrefs>

<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="JIRA Issues" author="Atlassian" thumbnail= '#staticResourceUrl("com.atlassian.jira.issues-gadget:jira-issues", "jira-issues-thumbnail.png")' description="A list of recently created Issues">

<Require feature="minimessage" /> <Require feature="dynamic-height" />

</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") #includeResources()

<div id="content_div"></div> ]]></Content></Module>

<Content type="html"><![CDATA[ #requireResource("com.atlassian.jira.issues-gadget:resources") <script> var url = "__ATLASSIAN_BASE_URL__/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"; </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 pluginsAtlassian REST Plugin Module Type

OAuth

Whatʼs Next?

Whatʼs Next?

JavaScript Helper Libraries

Whatʼs Next?

JavaScript Helper LibrariesDashboard in More Atlassian Apps

Whatʼs Next?

JavaScript Helper LibrariesDashboard in More Atlassian AppsGadgets Everywhere!

Whatʼs Next?

JavaScript Helper LibrariesDashboard in More Atlassian AppsGadgets 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/summitSURVEY!!

www.atlassian.com/opensocial