Go! Go! Gadgets. Writing an OpenSocial Application

Go Go Gadgets!Building an OpenSocial Application

1

Mark HalvorsonCommunity Member, OpenSocial Foundation BoardChief Imagineer, Atlassian Software

Email: [email protected]: @halv0112

Monday, December 6, 2010

mailto:[email protected]

mailto:[email protected]

What is an ‘Imagineer’?Monday, December 6, 2010

Take things that exist...

!" #"


...and make something different.



Agenda

•What it is a Gadget•Why Atlassian chose OpenSocial•Application Portability

•Why you should too!•Application Sharing

6Monday, December 6, 2010

What is OpenSocial?


Social Data Model


Web Service APIs


Gadgets


Our Problem


Before

FishEyeSourceCode

JIRAIssues&Tasks

ConfluenceWiki

12

•Enterprise Apps are Silos


13

Emphasize Teams, Projects & Tasks over Tools


13



13



13



Too Many Dashboards


Too Many Dashboards


Cross-Product Sharing


Integration with Non-Atlassian apps


Solution: OpenSocial Gadgets


Gadgets

18

are a Great Solution for Dashboard


Open standard for enterprise application connection

After

19

viewcompleteproject

singleacCvity


Not just about portals,or internal applications.

Managers Do Email

viewacCvity&status

createissues


Open Standards, Industry Support


Why Write Gadgets?

•They’re easy!

•They use stable, widely accessible and understood technologies

•Write once, display everywhere


The Obligatory Hello World Example


The Obligatory Hello World Example


Anatomy of a Gadget


Anatomy of a Gadget

•XML Spec File•Metadata, HTML Content, and JavaScript


Anatomy of a Gadget


•Core JavaScript API•Access Preferences, Make Requests


Anatomy of a Gadget


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


http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues-thumbnail.png




<ModulePrefs>



</ModulePrefs>


<ModulePrefs>



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



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


http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues.css




http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira-issues.js




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










Views - DEFAULT view








Views - CANVAS view


Views - CANVAS view


Views - DEFAULT view (in Gmail)


Views - DEFAULT view (in Gmail)


Views - CANVAS view (in Gmail)


Views - CANVAS view (in Gmail)


Views - Custom view


Wallboards

Gadgets go beyond theJIRA Dashboardonto your wall!


Wallboards

Gadgets go beyond theJIRA Dashboardonto your wall!


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





JavaScript





Requesting Data from Web Services

•AJAX + DOM

•OAuth

•Request Proxy

•






gadgets.io.makeRequest()


What Can You Call?

•Any URL

•XML and JSON are the most useful•


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


http://jira.atlassian.com/sr/

http://jira.atlassian.com/sr/

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


TextText

An ExampleReal World Example...Monday, December 6, 2010

TextText


TextText


TextText


TextText


TextText


The Goal

The Goal47


48The Result


48The Result


49Preferences


Statistics


Let’s Take a Step Back.


Q: What is the purpose of an application?


Q: What is the purpose of an application?

•A: DO Something. Complete some process.


Anatomy of an Application

Context Content Ac(on


An ExampleGmail

Communica(on

ContactsMail

ReadWriteReply


Q: What is the purpose of a gadget?


Q: What is the purpose of a gadget?

•A: DO Something. Complete some process.


Gadget = ReusableMini‐ApplicaCon

Context

Content

Ac(on

AtomicUnitofWork

Ac(on

Context

Content

•or


Example - “Mini-Application”

JIRACommentGadget

JIRA‐1234

AddComment

UsersComment


JIRACommentGadget

Context

UsersComment

AddComment

58

Example - Unit of Work


JIRACommentGadget

Context

UsersComment

AddComment

58

Example - Unit of Work


Lesson Learned over time:

•Gadgets as “Units of Work” are...

• Easier to build

• Easier to use

• Easier to reuse


Composite Application

Gadget

Ac(on

Context

Content

Gadget

Ac(on

Context

Content

Context

Gadget

Ac(on

Add’lContext

ContentContent

Ac(on


Example - Gmail

GoogleCommunicaConApplicaCon

Gmail

Communica(on

ContactsMail

ReadWriteReply

GoogleTalk

IM

ReadWriteReply

Presence


<demo>


Get Satisfaction


Gadgets?

64


Gadgets?

Gadget? Gadget?

64



65

Gadget

Gadget!

Gadget


Get Satisfactionpowered by JIRA


Gadgets!


Gadgets!


Gadgets!

67Gadget!

Gadget!




</demo>


Summary - Why write gadgets?

•Easy!• Simple web based technologies mean anyone can write a gadget.

•Reusable!•Use in any OpenSocial Container. iGoogle, Gmail, JIVE, more every day.

•Fun!• Thinking about applications as atomic units of work add a new dimension to

application design.


Questions?

71

Resources• http://atlassian.com/opensocial

• http://www.opensocial.org

• http://atlassian.com/classroom


http://www.atlassian.com/opensocial










Technology

Go! Go! Gadgets. Writing an OpenSocial Application