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


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


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>

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




<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




Views - DEFAULT view


Views - CANVAS view


Views - DEFAULT view (in Gmail)


Views - CANVAS view (in Gmail)


Views - Custom view


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


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


TextText

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

The Goal

The Goal47


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


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!

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










go! go! gadgets. writing an opensocial application

Technology

views default view

new gadgets

opensocial gadgets

configured user prefsvar

views canvas view31monday

minimessage factoryvar

prefsvar showdate

views custom view34monday