SlideShare a Scribd company logo

Go! Go! Gadgets. Writing an OpenSocial Application

Mark Halvorson, profile picture
Mark Halvorson

The document discusses the creation of OpenSocial applications, particularly focusing on gadgets developed by Atlassian. It highlights the benefits of using OpenSocial, such as application portability and the ease of creating reusable gadgets with standard web technologies. The presentation also includes technical details about the anatomy of gadgets and their integration with various platforms.

Technology
1 of 108
Downloaded 18 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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 1 Monday, 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 6 Monday, December 6, 2010
What is OpenSocial? 7 Monday, December 6, 2010
Social Data Model 8 Monday, December 6, 2010
Web Service APIs 9 Monday, December 6, 2010
Gadgets 10 Monday, December 6, 2010
Our Problem 11 Monday, December 6, 2010
Before •Enterprise Apps are Silos FishEye
Source
Code JIRA
Issues
&
Tasks Confluence
Wiki 12 Monday, December 6, 2010
Emphasize Teams, Projects & Tasks over Tools 13 Monday, December 6, 2010
Emphasize Teams, Projects & Tasks over Tools 13 Monday, December 6, 2010
Emphasize Teams, Projects & Tasks over Tools 13 Monday, December 6, 2010
Emphasize Teams, Projects & Tasks over Tools 13 Monday, December 6, 2010
Too Many Dashboards 14 Monday, December 6, 2010
Too Many Dashboards 14 Monday, December 6, 2010
Cross-Product Sharing 15 Monday, December 6, 2010
Integration with Non-Atlassian apps 16 Monday, December 6, 2010
Solution: OpenSocial Gadgets 17 Monday, December 6, 2010
Gadgets are a Great Solution for Dashboard 18 Monday, December 6, 2010
After Open standard for enterprise application connection view
complete
 project single
acCvity
 19 Monday, December 6, 2010
Managers Do Email Not just about portals, or internal applications. view
acCvity
&
 status create
issues 20 Monday, December 6, 2010
Open Standards, Industry Support 21 Monday, December 6, 2010
Why Write Gadgets? •They’re easy! •They use stable, widely accessible and understood technologies •Write once, display everywhere 22 Monday, December 6, 2010
The Obligatory Hello World Example 23 Monday, December 6, 2010
The Obligatory Hello World Example 23 Monday, December 6, 2010
Anatomy of a Gadget 24 Monday, December 6, 2010
Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript 24 Monday, December 6, 2010
Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript •Core JavaScript API • Access Preferences, Make Requests 24 Monday, 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 24 Monday, December 6, 2010
XML Spec File 25 Monday, December 6, 2010
<ModulePrefs> 26 Monday, 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> 26 Monday, 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> 26 Monday, 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> 26 Monday, 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"/> 27 Monday, 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"/> 27 Monday, 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"/> 27 Monday, 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> 28 Monday, 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> 28 Monday, December 6, 2010
Views - DEFAULT view 29 Monday, December 6, 2010
Views - DEFAULT view 29 Monday, December 6, 2010
Views - DEFAULT view 30 Monday, December 6, 2010
Views - DEFAULT view 30 Monday, December 6, 2010
Views - CANVAS view 31 Monday, December 6, 2010
Views - CANVAS view 31 Monday, December 6, 2010
Views - DEFAULT view (in Gmail) 32 Monday, December 6, 2010
Views - DEFAULT view (in Gmail) 32 Monday, December 6, 2010
Views - CANVAS view (in Gmail) 33 Monday, December 6, 2010
Views - CANVAS view (in Gmail) 33 Monday, December 6, 2010
Views - Custom view 34 Monday, December 6, 2010
Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35 Monday, December 6, 2010
Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35 Monday, 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); 36 Monday, 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); 36 Monday, 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); 36 Monday, December 6, 2010
Requesting Data from Web Services •AJAX + DOM •OAuth •Request Proxy • 37 Monday, December 6, 2010
38 Monday, December 6, 2010
39 Monday, December 6, 2010
40 Monday, December 6, 2010
41 Monday, December 6, 2010
gadgets io . .makeRequest ) ( 42 Monday, December 6, 2010
What Can You Call? •Any URL •XML and JSON are the most useful • 43 Monday, 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); } 44 Monday, 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(); } 45 Monday, 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(); } 45 Monday, December 6, 2010
An Example Text Real World Example... Text Monday, December 6, 2010
An Example Text Real World Example... Text Monday, December 6, 2010
An Example Text Real World Example... Text Monday, December 6, 2010
An Example Text Real World Example... Text Monday, December 6, 2010
An Example Text Real World Example... Text Monday, December 6, 2010
An Example Text Real World Example... Text Monday, December 6, 2010
The Goal The Goal 47 Monday, December 6, 2010
The Result 48 Monday, December 6, 2010
The Result 48 Monday, December 6, 2010
Preferences 49 Monday, December 6, 2010
Statistics 50 Monday, December 6, 2010
Let’s Take a Step Back. 51 Monday, December 6, 2010
Q: What is the purpose of an application? 52 Monday, December 6, 2010
Q: What is the purpose of an application? •A: DO Something. Complete some process. 52 Monday, December 6, 2010
Anatomy of an Application Context Content Ac(on 53 Monday, December 6, 2010
An Example Gmail Communica(on Contacts Mail Read
Write Reply 54 Monday, December 6, 2010
Q: What is the purpose of a gadget? 55 Monday, December 6, 2010
Q: What is the purpose of a gadget? •A: DO Something. Complete some process. 55 Monday, December 6, 2010
Gadget = Reusable Mini‐ApplicaCon Atomic Unit
of
Work Context Context •or Content Content Ac(on Ac(on 56 Monday, December 6, 2010
Example - “Mini-Application” JIRA
Comment
Gadget JIRA‐1234 Users
 Comment Add
Comment 57 Monday, December 6, 2010
Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58 Monday, December 6, 2010
Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58 Monday, December 6, 2010
Lesson Learned over time: •Gadgets as “Units of Work” are... • Easier to build • Easier to use • Easier to reuse 59 Monday, 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 60 Monday, December 6, 2010
Example - Gmail Google
CommunicaCon
ApplicaCon Google
Talk Communica(on Presence Gmail Contacts IM Mail Read
Write Read
Write Reply Reply 61 Monday, December 6, 2010
<demo> 62 Monday, December 6, 2010
Get Satisfaction 63 Monday, December 6, 2010
Gadgets? 64 Monday, December 6, 2010
Gadgets? Gadget? Gadget? 64 Monday, December 6, 2010
65 Monday, December 6, 2010
Gadget! Gadget Gadget 65 Monday, December 6, 2010
Get Satisfaction powered by JIRA 66 Monday, December 6, 2010
Gadgets! 67 Monday, December 6, 2010
Gadgets! 67 Monday, December 6, 2010
Gadgets! Gadget! Gadget! 67 Monday, December 6, 2010
68 Monday, December 6, 2010
68 Monday, December 6, 2010
</demo> 69 Monday, 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. 70 Monday, December 6, 2010
Questions? Resources • http://atlassian.com/opensocial • http://www.opensocial.org • http://atlassian.com/classroom 71 Monday, December 6, 2010

More Related Content

PDF
Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010
Atlassian
 
PDF
Tips for Building your First XPages Java Application
Teamstudio
 
PDF
Moving to Dojo 1.7 and the path to 2.0
James Thomas
 
PPTX
Starting with jQuery
Anil Kumar
 
PDF
Mansoura University CSED & Nozom web development sprint
Al Sayed Gamal
 
PDF
A/B Testing - How to Break Things and Fail Fast... Without Breaking Things
Mark Halvorson
 
PDF
How to Build Interactive Training that Scales - Magnolia CMS Conference 2013
Mark Halvorson
 
PDF
Bizsnatch! Why funny is good business.
Mark Halvorson
 
Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010
Atlassian
 
Tips for Building your First XPages Java Application
Teamstudio
 
Moving to Dojo 1.7 and the path to 2.0
James Thomas
 
Starting with jQuery
Anil Kumar
 
Mansoura University CSED & Nozom web development sprint
Al Sayed Gamal
 
A/B Testing - How to Break Things and Fail Fast... Without Breaking Things
Mark Halvorson
 
How to Build Interactive Training that Scales - Magnolia CMS Conference 2013
Mark Halvorson
 
Bizsnatch! Why funny is good business.
Mark Halvorson
 

Similar to Go! Go! Gadgets. Writing an OpenSocial Application (20)

PDF
Drupal Distributions: The Dos and Don'ts:
Development Seed
 
PDF
User Stories Applied
IIBA UK Chapter
 
KEY
Open Social In The Enterprise
Tim Moore
 
PDF
TS 5341 Rethinking the ESB
aegloff
 
PDF
Get Ready for JIRA 5 - AtlasCamp 2011
Atlassian
 
PDF
Agile Seaside
ESUG
 
PDF
Seaside — Agile Software Development
Lukas Renggli
 
KEY
Get your Project back in Shape!
Joachim Tuchel
 
PDF
Calloway introduction
Corey Oordt
 
PDF
Final version social business social media at work
Atlassian
 
KEY
Atlassian OpenSocial Enterprise Demo
Tim Moore
 
PDF
Hands on puremvc
diomampo
 
PDF
Model-Driven Software Development - Web Abstractions 1
Eelco Visser
 
PDF
GoLightly: Building VM-based language runtimes in Go
Eleanor McHugh
 
PDF
Practical Open Source Software for Libraries (part 2)
Nicole C. Engard
 
KEY
Preparing for Confluence 4.1
Atlassian
 
PPT
TypeScript - Javascript done right
Wekoslav Stefanovski
 
PDF
Where User Experience And Software Engineering Meet
Amy Ko
 
PDF
Bonfire... How'd You Do That?! - AtlasCamp 2011
Atlassian
 
PDF
Making your oss project more like rails
Yehuda Katz
 
Drupal Distributions: The Dos and Don'ts:
Development Seed
 
User Stories Applied
IIBA UK Chapter
 
Open Social In The Enterprise
Tim Moore
 
TS 5341 Rethinking the ESB
aegloff
 
Get Ready for JIRA 5 - AtlasCamp 2011
Atlassian
 
Agile Seaside
ESUG
 
Seaside — Agile Software Development
Lukas Renggli
 
Get your Project back in Shape!
Joachim Tuchel
 
Calloway introduction
Corey Oordt
 
Final version social business social media at work
Atlassian
 
Atlassian OpenSocial Enterprise Demo
Tim Moore
 
Hands on puremvc
diomampo
 
Model-Driven Software Development - Web Abstractions 1
Eelco Visser
 
GoLightly: Building VM-based language runtimes in Go
Eleanor McHugh
 
Practical Open Source Software for Libraries (part 2)
Nicole C. Engard
 
Preparing for Confluence 4.1
Atlassian
 
TypeScript - Javascript done right
Wekoslav Stefanovski
 
Where User Experience And Software Engineering Meet
Amy Ko
 
Bonfire... How'd You Do That?! - AtlasCamp 2011
Atlassian
 
Making your oss project more like rails
Yehuda Katz
 
Ad

Recently uploaded (20)

PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Teaching material agriculture food technology
LiaRayya
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Ad

Go! Go! Gadgets. Writing an OpenSocial Application

  • 1. 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 1 Monday, December 6, 2010
  • 2. What is an ‘Imagineer’? Monday, December 6, 2010
  • 3. !" #" Take things that exist... Monday, December 6, 2010
  • 4. ...and make something different. Monday, December 6, 2010
  • 6. Agenda •What it is a Gadget •Why Atlassian chose OpenSocial • Application Portability •Why you should too! • Application Sharing 6 Monday, December 6, 2010
  • 7. What is OpenSocial? 7 Monday, December 6, 2010
  • 8. Social Data Model 8 Monday, December 6, 2010
  • 9. Web Service APIs 9 Monday, December 6, 2010
  • 10. Gadgets 10 Monday, December 6, 2010
  • 11. Our Problem 11 Monday, December 6, 2010
  • 12. Before •Enterprise Apps are Silos FishEye
Source
Code JIRA
Issues
&
Tasks Confluence
Wiki 12 Monday, December 6, 2010
  • 13. Emphasize Teams, Projects & Tasks over Tools 13 Monday, December 6, 2010
  • 14. Emphasize Teams, Projects & Tasks over Tools 13 Monday, December 6, 2010
  • 15. Emphasize Teams, Projects & Tasks over Tools 13 Monday, December 6, 2010
  • 16. Emphasize Teams, Projects & Tasks over Tools 13 Monday, December 6, 2010
  • 17. Too Many Dashboards 14 Monday, December 6, 2010
  • 18. Too Many Dashboards 14 Monday, December 6, 2010
  • 19. Cross-Product Sharing 15 Monday, December 6, 2010
  • 20. Integration with Non-Atlassian apps 16 Monday, December 6, 2010
  • 21. Solution: OpenSocial Gadgets 17 Monday, December 6, 2010
  • 22. Gadgets are a Great Solution for Dashboard 18 Monday, December 6, 2010
  • 23. After Open standard for enterprise application connection view
complete
 project single
acCvity
 19 Monday, December 6, 2010
  • 24. Managers Do Email Not just about portals, or internal applications. view
acCvity
&
 status create
issues 20 Monday, December 6, 2010
  • 25. Open Standards, Industry Support 21 Monday, December 6, 2010
  • 26. Why Write Gadgets? •They’re easy! •They use stable, widely accessible and understood technologies •Write once, display everywhere 22 Monday, December 6, 2010
  • 27. The Obligatory Hello World Example 23 Monday, December 6, 2010
  • 28. The Obligatory Hello World Example 23 Monday, December 6, 2010
  • 29. Anatomy of a Gadget 24 Monday, December 6, 2010
  • 30. Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript 24 Monday, December 6, 2010
  • 31. Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript •Core JavaScript API • Access Preferences, Make Requests 24 Monday, December 6, 2010
  • 32. 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 24 Monday, December 6, 2010
  • 33. XML Spec File 25 Monday, December 6, 2010
  • 34. <ModulePrefs> 26 Monday, December 6, 2010
  • 35. <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> 26 Monday, December 6, 2010
  • 36. <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> 26 Monday, December 6, 2010
  • 37. <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> 26 Monday, December 6, 2010
  • 38. <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"/> 27 Monday, December 6, 2010
  • 39. <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"/> 27 Monday, December 6, 2010
  • 40. <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"/> 27 Monday, December 6, 2010
  • 41. <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> 28 Monday, December 6, 2010
  • 42. <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> 28 Monday, December 6, 2010
  • 43. Views - DEFAULT view 29 Monday, December 6, 2010
  • 44. Views - DEFAULT view 29 Monday, December 6, 2010
  • 45. Views - DEFAULT view 30 Monday, December 6, 2010
  • 46. Views - DEFAULT view 30 Monday, December 6, 2010
  • 47. Views - CANVAS view 31 Monday, December 6, 2010
  • 48. Views - CANVAS view 31 Monday, December 6, 2010
  • 49. Views - DEFAULT view (in Gmail) 32 Monday, December 6, 2010
  • 50. Views - DEFAULT view (in Gmail) 32 Monday, December 6, 2010
  • 51. Views - CANVAS view (in Gmail) 33 Monday, December 6, 2010
  • 52. Views - CANVAS view (in Gmail) 33 Monday, December 6, 2010
  • 53. Views - Custom view 34 Monday, December 6, 2010
  • 54. Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35 Monday, December 6, 2010
  • 55. Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35 Monday, December 6, 2010
  • 56. 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); 36 Monday, December 6, 2010
  • 57. 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); 36 Monday, December 6, 2010
  • 58. 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); 36 Monday, December 6, 2010
  • 59. Requesting Data from Web Services •AJAX + DOM •OAuth •Request Proxy • 37 Monday, December 6, 2010
  • 64. gadgets io . .makeRequest ) ( 42 Monday, December 6, 2010
  • 65. What Can You Call? •Any URL •XML and JSON are the most useful • 43 Monday, December 6, 2010
  • 66. 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); } 44 Monday, December 6, 2010
  • 67. 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(); } 45 Monday, December 6, 2010
  • 68. 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(); } 45 Monday, December 6, 2010
  • 69. An Example Text Real World Example... Text Monday, December 6, 2010
  • 70. An Example Text Real World Example... Text Monday, December 6, 2010
  • 71. An Example Text Real World Example... Text Monday, December 6, 2010
  • 72. An Example Text Real World Example... Text Monday, December 6, 2010
  • 73. An Example Text Real World Example... Text Monday, December 6, 2010
  • 74. An Example Text Real World Example... Text Monday, December 6, 2010
  • 75. The Goal The Goal 47 Monday, December 6, 2010
  • 76. The Result 48 Monday, December 6, 2010
  • 77. The Result 48 Monday, December 6, 2010
  • 78. Preferences 49 Monday, December 6, 2010
  • 79. Statistics 50 Monday, December 6, 2010
  • 80. Let’s Take a Step Back. 51 Monday, December 6, 2010
  • 81. Q: What is the purpose of an application? 52 Monday, December 6, 2010
  • 82. Q: What is the purpose of an application? •A: DO Something. Complete some process. 52 Monday, December 6, 2010
  • 83. Anatomy of an Application Context Content Ac(on 53 Monday, December 6, 2010
  • 84. An Example Gmail Communica(on Contacts Mail Read
Write Reply 54 Monday, December 6, 2010
  • 85. Q: What is the purpose of a gadget? 55 Monday, December 6, 2010
  • 86. Q: What is the purpose of a gadget? •A: DO Something. Complete some process. 55 Monday, December 6, 2010
  • 87. Gadget = Reusable Mini‐ApplicaCon Atomic Unit
of
Work Context Context •or Content Content Ac(on Ac(on 56 Monday, December 6, 2010
  • 88. Example - “Mini-Application” JIRA
Comment
Gadget JIRA‐1234 Users
 Comment Add
Comment 57 Monday, December 6, 2010
  • 89. Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58 Monday, December 6, 2010
  • 90. Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58 Monday, December 6, 2010
  • 91. Lesson Learned over time: •Gadgets as “Units of Work” are... • Easier to build • Easier to use • Easier to reuse 59 Monday, December 6, 2010
  • 92. Composite Application Gadget Gadget Gadget Add’l
 Context Context Context Context Content Content Content Content Ac(on Ac(on Ac(on Ac(on 60 Monday, December 6, 2010
  • 93. Example - Gmail Google
CommunicaCon
ApplicaCon Google
Talk Communica(on Presence Gmail Contacts IM Mail Read
Write Read
Write Reply Reply 61 Monday, December 6, 2010
  • 94. <demo> 62 Monday, December 6, 2010
  • 95. Get Satisfaction 63 Monday, December 6, 2010
  • 96. Gadgets? 64 Monday, December 6, 2010
  • 97. Gadgets? Gadget? Gadget? 64 Monday, December 6, 2010
  • 99. Gadget! Gadget Gadget 65 Monday, December 6, 2010
  • 100. Get Satisfaction powered by JIRA 66 Monday, December 6, 2010
  • 101. Gadgets! 67 Monday, December 6, 2010
  • 102. Gadgets! 67 Monday, December 6, 2010
  • 103. Gadgets! Gadget! Gadget! 67 Monday, December 6, 2010
  • 106. </demo> 69 Monday, December 6, 2010
  • 107. 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. 70 Monday, December 6, 2010
  • 108. Questions? Resources • http://atlassian.com/opensocial • http://www.opensocial.org • http://atlassian.com/classroom 71 Monday, December 6, 2010