Intro Open Social and Dashboards
-
Upload
atlassian -
Category
Technology
-
view
3.443 -
download
2
description
Transcript of Intro Open Social and Dashboards
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