• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Go! Go! Gadgets.  Writing an OpenSocial Application
 

Go! Go! Gadgets. Writing an OpenSocial Application

on

  • 2,443 views

This presentation delivered at the OpenSocial Europe Summit and Industry Spotlight on Education Event. Talks about writing OpenSocial Gadgets from Hello World to something a little more useful.

This presentation delivered at the OpenSocial Europe Summit and Industry Spotlight on Education Event. Talks about writing OpenSocial Gadgets from Hello World to something a little more useful.

Statistics

Views

Total Views
2,443
Views on SlideShare
2,439
Embed Views
4

Actions

Likes
1
Downloads
6
Comments
0

2 Embeds 4

http://www.linkedin.com 3
https://extranet.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

    Go! Go! Gadgets.  Writing an OpenSocial Application Go! Go! Gadgets. Writing an OpenSocial Application Presentation Transcript

    • Go Go Gadgets! Building an OpenSocial Application Mark Halvorson Community Member, OpenSocial Foundation Board Chief Imagineer, Atlassian Software Email: mark.halvorson@atlassian.com Twitter: @halv0112 1Monday, December 6, 2010
    • What is an ‘Imagineer’?Monday, December 6, 2010
    • !" #" Take things that exist...Monday, December 6, 2010
    • ...and make something different.Monday, December 6, 2010
    • Monday, December 6, 2010
    • 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? 7Monday, December 6, 2010
    • Social Data Model 8Monday, December 6, 2010
    • Web Service APIs 9Monday, December 6, 2010
    • Gadgets 10Monday, December 6, 2010
    • Our Problem 11Monday, December 6, 2010
    • Before •Enterprise Apps are Silos FishEye
Source
Code JIRA
Issues
&
Tasks Confluence
Wiki 12Monday, December 6, 2010
    • Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
    • Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
    • Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
    • Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
    • Too Many Dashboards 14Monday, December 6, 2010
    • Too Many Dashboards 14Monday, December 6, 2010
    • Cross-Product Sharing 15Monday, December 6, 2010
    • Integration with Non-Atlassian apps 16Monday, December 6, 2010
    • Solution: OpenSocial Gadgets 17Monday, December 6, 2010
    • Gadgets are a Great Solution for Dashboard 18Monday, December 6, 2010
    • After Open standard for enterprise application connection view
complete
 project single
acCvity
 19Monday, December 6, 2010
    • Managers Do Email Not just about portals, or internal applications. view
acCvity
&
 status create
issues 20Monday, December 6, 2010
    • Open Standards, Industry Support 21Monday, December 6, 2010
    • Why Write Gadgets? •They’re easy! •They use stable, widely accessible and understood technologies •Write once, display everywhere 22Monday, December 6, 2010
    • The Obligatory Hello World Example 23Monday, December 6, 2010
    • The Obligatory Hello World Example 23Monday, December 6, 2010
    • Anatomy of a Gadget 24Monday, December 6, 2010
    • Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript 24Monday, December 6, 2010
    • Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript •Core JavaScript API • Access Preferences, Make Requests 24Monday, December 6, 2010
    • 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 24Monday, December 6, 2010
    • XML Spec File 25Monday, December 6, 2010
    • <ModulePrefs> 26Monday, December 6, 2010
    • <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> 26Monday, December 6, 2010
    • <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> 26Monday, December 6, 2010
    • <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> 26Monday, December 6, 2010
    • <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"/> 27Monday, December 6, 2010
    • <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"/> 27Monday, December 6, 2010
    • <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"/> 27Monday, December 6, 2010
    • <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> 28Monday, December 6, 2010
    • <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> 28Monday, December 6, 2010
    • Views - DEFAULT view 29Monday, December 6, 2010
    • Views - DEFAULT view 29Monday, December 6, 2010
    • Views - DEFAULT view 30Monday, December 6, 2010
    • Views - DEFAULT view 30Monday, December 6, 2010
    • Views - CANVAS view 31Monday, December 6, 2010
    • Views - CANVAS view 31Monday, December 6, 2010
    • Views - DEFAULT view (in Gmail) 32Monday, December 6, 2010
    • Views - DEFAULT view (in Gmail) 32Monday, December 6, 2010
    • Views - CANVAS view (in Gmail) 33Monday, December 6, 2010
    • Views - CANVAS view (in Gmail) 33Monday, December 6, 2010
    • Views - Custom view 34Monday, December 6, 2010
    • Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35Monday, December 6, 2010
    • Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35Monday, December 6, 2010
    • JavaScript // Create minimessage factory var msg = new gadgets.MiniMessage(); // Show a small loading message to the user var loadMessage = msg.createStaticMessage("loading..."); // Get configured user prefs var 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 loads gadgets.util.registerOnLoadHandler(fetchIssues); 36Monday, December 6, 2010
    • JavaScript // Create minimessage factory var msg = new gadgets.MiniMessage(); // Show a small loading message to the user var loadMessage = msg.createStaticMessage("loading..."); // Get configured user prefs var 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 loads gadgets.util.registerOnLoadHandler(fetchIssues); 36Monday, December 6, 2010
    • JavaScript // Create minimessage factory var msg = new gadgets.MiniMessage(); // Show a small loading message to the user var loadMessage = msg.createStaticMessage("loading..."); // Get configured user prefs var 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 loads gadgets.util.registerOnLoadHandler(fetchIssues); 36Monday, December 6, 2010
    • Requesting Data from Web Services •AJAX + DOM •OAuth •Request Proxy • 37Monday, December 6, 2010
    • 38Monday, December 6, 2010
    • 39Monday, December 6, 2010
    • 40Monday, December 6, 2010
    • 41Monday, December 6, 2010
    • gadgets io . .makeRequest ) ( 42Monday, December 6, 2010
    • What Can You Call? •Any URL •XML and JSON are the most useful • 43Monday, December 6, 2010
    • 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); } 44Monday, December 6, 2010
    • 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(); } 45Monday, December 6, 2010
    • 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(); } 45Monday, December 6, 2010
    • An Example Text Real World Example... TextMonday, December 6, 2010
    • An Example Text Real World Example... TextMonday, December 6, 2010
    • An Example Text Real World Example... TextMonday, December 6, 2010
    • An Example Text Real World Example... TextMonday, December 6, 2010
    • An Example Text Real World Example... TextMonday, December 6, 2010
    • An Example Text Real World Example... TextMonday, December 6, 2010
    • The Goal The Goal 47Monday, December 6, 2010
    • The Result 48Monday, December 6, 2010
    • The Result 48Monday, December 6, 2010
    • Preferences 49Monday, December 6, 2010
    • Statistics 50Monday, December 6, 2010
    • Let’s Take a Step Back. 51Monday, December 6, 2010
    • Q: What is the purpose of an application? 52Monday, December 6, 2010
    • Q: What is the purpose of an application? •A: DO Something. Complete some process. 52Monday, December 6, 2010
    • Anatomy of an Application Context Content Ac(on 53Monday, December 6, 2010
    • An Example Gmail Communica(on Contacts Mail Read
Write Reply 54Monday, December 6, 2010
    • Q: What is the purpose of a gadget? 55Monday, December 6, 2010
    • Q: What is the purpose of a gadget? •A: DO Something. Complete some process. 55Monday, December 6, 2010
    • Gadget = Reusable Mini‐ApplicaCon Atomic Unit
of
Work Context Context •or Content Content Ac(on Ac(on 56Monday, December 6, 2010
    • Example - “Mini-Application” JIRA
Comment
Gadget JIRA‐1234 Users
 Comment Add
Comment 57Monday, December 6, 2010
    • Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58Monday, December 6, 2010
    • Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58Monday, December 6, 2010
    • Lesson Learned over time: •Gadgets as “Units of Work” are... • Easier to build • Easier to use • Easier to reuse 59Monday, December 6, 2010
    • Composite Application Gadget Gadget Gadget Add’l
 Context Context Context Context Content Content Content Content Ac(on Ac(on Ac(on Ac(on 60Monday, December 6, 2010
    • Example - Gmail Google
CommunicaCon
ApplicaCon Google
Talk Communica(on Presence Gmail Contacts IM Mail Read
Write Read
Write Reply Reply 61Monday, December 6, 2010
    • <demo> 62Monday, December 6, 2010
    • Get Satisfaction 63Monday, December 6, 2010
    • Gadgets? 64Monday, December 6, 2010
    • Gadgets? Gadget? Gadget? 64Monday, December 6, 2010
    • 65Monday, December 6, 2010
    • Gadget! Gadget Gadget 65Monday, December 6, 2010
    • Get Satisfaction powered by JIRA 66Monday, December 6, 2010
    • Gadgets! 67Monday, December 6, 2010
    • Gadgets! 67Monday, December 6, 2010
    • Gadgets! Gadget! Gadget! 67Monday, December 6, 2010
    • 68Monday, December 6, 2010
    • 68Monday, December 6, 2010
    • </demo> 69Monday, December 6, 2010
    • 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. 70Monday, December 6, 2010
    • Questions? Resources • http://atlassian.com/opensocial • http://www.opensocial.org • http://atlassian.com/classroom 71Monday, December 6, 2010