Intro Open Social and Dashboards
Upcoming SlideShare
Loading in...5
×
 

Intro Open Social and Dashboards

on

  • 4,990 views

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

Statistics

Views

Total Views
4,990
Views on SlideShare
4,923
Embed Views
67

Actions

Likes
5
Downloads
70
Comments
0

5 Embeds 67

http://www.atlassian.com 44
http://www.slideshare.net 18
http://localhost 2
https://wacdev.internal.atlassian.com 2
http://magnolia-staging.private.atlassian.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro Open Social and Dashboards Intro Open Social and Dashboards Presentation Transcript

  • 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=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>
  • <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>
  • <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>
  • <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;/>
  • <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;/>
  • <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;/>
  • <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>
  • 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);
  • 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);
  • 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);
  • 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 = 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); }
  • 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=quot;com.atlassian.jira.issues-gadgetquot; name=quot;JIRA Issues Gadget Pluginquot; pluginsVersion=quot;2quot;> <plugin-info> <version>1.0</version> </plugin-info>
  • 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>
  • atlassian-plugin.xml <gadget key=quot;jira-issuesquot; location=quot;jira-issues.xmlquot;/>
  • 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=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>
  • 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>
  • 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>
  • Modified <Content> <Content type=quot;htmlquot;><![CDATA[ #requireResource(quot;com.atlassian.jira.issues- gadget:resourcesquot;) #includeResources() <div id=quot;content_divquot;></div> ]]></Content> </Module>
  • 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>
  • 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