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.

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

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

60. 38
Monday, December 6, 2010

61. 39
Monday, December 6, 2010

62. 40
Monday, December 6, 2010

63. 41
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

98. 65
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

104. 68
Monday, December 6, 2010

105. 68
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