lotusphere 2012 - show115 - socialize your apps using opensocial

188
© 2012 IBM Corporation SHOW115 Socialize Your Applications Using OpenSocial Ryan Baxter | Staff Software Engineer | IBM Stanton Sievers | Staff Software Engineer | IBM

Upload: ryan-baxter

Post on 21-Jan-2015

3.391 views

Category:

Technology


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

© 2012 IBM Corporation

SHOW115 Socialize Your Applications Using OpenSocial

Ryan Baxter | Staff Software Engineer | IBM

Stanton Sievers | Staff Software Engineer | IBM

Page 2: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

2 | © 2012 IBM Corporation

IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion.

Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision.

The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion.

Page 3: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

3 | © 2012 IBM Corporation

Giving Credit■ This presentation mentions the following products

─ IBM® Lotus Notes®

─ IBM® Lotus iNotes®

─ IBM® Lotus Domino® Designer─ IBM® Lotus Domino® Administrator─ IBM® Lotus Domino®

─ IBM® Connections®

─ IBM® Lotus Notes® Social Edition─ IBM® Lotus iNotes® Social Edition

Page 4: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

4 | © 2012 IBM Corporation

Ryan has been working at IBM for the past 3 years. Prior to that he was a student at Northeasten University in Boston Ma. During his time at IBM his main focus has been working on the Notes Client Java UI APIs. He has in depth knowledge of Eclipse plugin development, specifically when it comes to the Notes client. Over the past year Ryan has become an active member of the OpenSocial community working to define the future of OpenSocial. Ryan takes any opportunity he can to interact with the passionate user base of IBMs many products, and enjoys listening to their feedback, as well as helping them solve their problems.

@ryanjbaxter

About Us

Stanton has been working full time at IBM for 2.5 years in IBM Collaboration Solutions. Before full time employment at IBM he worked on Widgets and LiveText in the Notes client as an intern. As a full time IBMer he has worked on the Java UI APIs for the Notes client and Eclipse plugin development for the Notes client in general. Recently Stanton has been involved in the integration of OpenSocial into enterprise applications such as Notes and iNotes. Stanton is also involved in the OpenSocial community via the Apache Shindig project, to which he is a regular contributor.

Page 5: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

5 | © 2012 IBM Corporation

Agenda■ Terminology & Background

■ Pre-requisites

■ Extending The XPage App

─ Add When, Where, and Address Fields─ Creating A Confirmation Embedded Experience─ Sending The Embedded Experience Email

■ Creating A Widget For Our Embedded Experience■ Register For The Event

■ Leveraging The Power Of OpenSocial

─ Publishing To The Activity Stream─ Recommending Network Contacts

■ Q&A

■ Resources

Page 6: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

6 | © 2012 IBM Corporation

Terminology■ Embedded Experiences

─ Embedded experiences is a method of embedding the “experience” or functionality from one application into a different, host application. The end user experiences the 3rd party application in their host application environment as if they were using it directly from the 3rd party provider.

■ OpenSocial─ OpenSocial is an open standard which defines APIs that can be used to build social applications

using HTML, JavaScript, and CSS. The specification includes both JavaScript and REST APIs. OpenSocial leverages many other standards, such as Activity Streams and OAuth.

■ Activity Streams─ Activity Streams is an open standard which defines a data model to represent a stream or list of

actions performed by users and applications. This specification DOES NOT define any APIs, it simply defines the data model.

Page 7: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

7 | © 2012 IBM Corporation

Background■ Constant Context Switching With Today's Apps

─ Many applications that we use every day send notifications to our activity streams and inbox – One workflow application alone may generate thousands of notifications a day

─ Notifications are not very useful by themselves─ Constantly context shifting from one app to the next

■ Embedded Experiences keep you in the app(s) you work in the most─ They work where you work

– Inbox– Activity Stream

─ Keep users in context and focused on their work─ Enhance the basic notification

Page 8: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

8 | © 2012 IBM Corporation

Background■ Embedded experiences are represented via a data model

─ JSON─ XML─ The data model can be placed in an email or an activity stream entry

{ “gagdet” : “http://example.com/embedded/gagdet.xml”, “context” : { “title” : “Hello World”, “id” : 123 }}

Page 9: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

9 | © 2012 IBM Corporation

BackgroundFrom: [email protected]: [email protected]: Social Network: Mary Has Commented On Your StatusMIME-Version: 1.0Content-Type: multipart/alternative; boundary="XXXXboundary text"

Mary has commented on your status.

--XXXXboundary text Content-Type: text/plain

Mary has commeneted on your status.

--XXXXboundary textContent-Type: application/embed+json{ "gadget" : "http://example.com/embedded/gagdet.xm", "context" : 123}--XXXXboundary textContent-Type: text/html

<html><!-- HTML representation here --></html>

Page 10: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

10 | © 2012 IBM Corporation

Sample Notification Email

Page 11: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

11 | © 2012 IBM Corporation

Sample Embedded Experience

Page 12: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

12 | © 2012 IBM Corporation

Embedded Experiences Flow

Sends Embedded Experience Email

Makes Request(s) Back To Service

Lotus Notes/iNotes Social Edition

Page 13: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

13 | © 2012 IBM Corporation

What We Are Going To Build■ Take an existing XPage application on OpenNTF and enhance it to start sending

embedded experience notifications─ Event Singup application from OpenNTF contributed by Michael McGarel

■ Enhance the confirmation email to also be an embedded experience

■ Add social functionality to the confirmation email─ Post an entry to the activity stream in Connections 4 from within an embedded experience─ Suggest other people in one's network who would want to attend

– These people will get embedded experience notification emails as well

Page 14: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

14 | © 2012 IBM Corporation

DEMOS

Page 15: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

15 | © 2012 IBM Corporation

Agenda■ Terminology & Background

■ Pre-requisites

■ Extending The XPage App

─ Add When, Where, and Address Fields─ Creating A Confirmation Embedded Experience─ Sending The Embedded Experience Email

■ Creating A Widget For Our Embedded Experience■ Register For The Event

■ Leveraging The Power Of OpenSocial

─ Publishing To The Activity Stream─ Recommending Network Contacts

■ Q&A

■ Resources

Page 16: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

16 | © 2012 IBM Corporation

Pre-requisites■ Lotus Notes and Domino 8.5.4 Social Edition

─ Is only required for rendering embedded experiences ─ AD115 & AD116 will have additional information─ The XPage app will run on 8.5.2 or greater─ Not required for building embedded experiences

■ Download the “Mailer Servlet” from OpenNTF and install it on your Lotus Domino Server

■ Download and install the Event Signup app from OpenNTF

Page 17: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

17 | © 2012 IBM Corporation

Pre-requisites■ Download the “Mailer Servlet” and install it on your Domino Server■ Go to: http://bit.ly/mailerservlet

Page 18: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

18 | © 2012 IBM Corporation

Pre-requisites■ Install the servlet onto your Domino Server■ Copy com.ibm.lotuslabs.mailer_1.0.0.jar into <domino

data>\domino\workspace\applications\eclipse\plugins

■ Restart the server

Page 19: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

19 | © 2012 IBM Corporation

Pre-requisites■ Download and install the Event Signup app■ Go to openntf.org■ Select Projects

Page 20: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

20 | © 2012 IBM Corporation

Pre-requisites■ Select the Event Signup app from the “Name lookup” drop-down

Page 21: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

21 | © 2012 IBM Corporation

Pre-requisites■ Download the Event Signup app

Page 22: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

22 | © 2012 IBM Corporation

Pre-requisites■ Move the app to <domino data dir>/signup.nsf

Page 23: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

23 | © 2012 IBM Corporation

Pre-requisites■ Open the Lotus Domino Administrator client

─ Open the server by going to File → Open Server...

■ Select the server where you placed the database

Page 24: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

24 | © 2012 IBM Corporation

Pre-requisites■ Go to the “Files” tab, right click on signup.nsf■ Select “Sign...”

Page 25: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

25 | © 2012 IBM Corporation

Pre-requisites■ Click “OK” to sign the database with the Active User's ID

Page 26: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

26 | © 2012 IBM Corporation

Pre-requisites■ Open a browser and navigate to the XPage: http://<server>/signup.nsf ■ Click “Staff Login”■ Login with your credentials when prompted

Page 27: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

27 | © 2012 IBM Corporation

Pre-requisites■ Click the “Edit Pages Content” to edit the content of the app

Page 28: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

28 | © 2012 IBM Corporation

Pre-requisites■ Add some content to the home tab

Page 29: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

29 | © 2012 IBM Corporation

Pre-requisites■ Add content to the registration tab

Page 30: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

30 | © 2012 IBM Corporation

Pre-requisites■ Add footer content and save changes

Page 31: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

31 | © 2012 IBM Corporation

Pre-requisites■ Click “View Site Settings”

Page 32: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

32 | © 2012 IBM Corporation

Pre-requisites Click “Edit Settings”

Page 33: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

33 | © 2012 IBM Corporation

Pre-requisites Fill out the settings for your event

Page 34: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

34 | © 2012 IBM Corporation

Agenda■ Terminology & Background

■ Pre-requisites

■ Extending The XPage App

─ Add When, Where, and Address Fields─ Creating A Confirmation Embedded Experience─ Sending The Embedded Experience Email

■ Creating A Widget For Our Embedded Experience■ Register For The Event

■ Leveraging The Power Of OpenSocial

─ Publishing To The Activity Stream─ Recommending Network Contacts

■ Q&A

■ Resources

Page 35: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

35 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ In order to provide a

richer embedded experience we need to make some changes to the application

■ Add separate fields for when, where, and address

─ Update the Details XPage to display these fields

■ Add a Google Map for where the event will take place

Page 36: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

36 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Open Lotus Domino Designer■ Go to File → Open → Lotus Notes Application

Page 37: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

37 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Navigate to the server and application and click “Open”

Page 38: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

38 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ In the Applications view expand Forms■ Double-click on “Pages Content” to open

Page 39: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

39 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Right click in the “Details Tab Content” cell and select Insert → Row

Page 40: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

40 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Put the text “Details Tab Where” in the first column

■ Click in the second column to give it focus■ Add a field to the second column by going to Create → Field...

Page 41: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

41 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ In the field properties dialog give the field the following properties

─ Name: DetailsTabWhere─ Type: Text/Editable

Page 42: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

42 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Right click in the “Details Tab Content” cell and select Insert → Row

Page 43: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

43 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Put the text “Details Tab When” in the first column

■ Click in the second column to give it focus■ Add a field to the second column by going to Create → Field

Page 44: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

44 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ In the field properties dialog give the field the following properties

─ Name: DetailsTabWhen─ Type: Text/Editable

Page 45: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

45 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Right click in the “Details Tab Content” cell and select Insert → Row

Page 46: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

46 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Put the text “Details Tab Address” in the first column

■ Click in the second column to give it focus■ Add a field to the second column by going to Create → Field

Page 47: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

47 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ In the field properties dialog give the field the following properties

─ Name: DetailsTabAddress─ Type: Text/Editable

Page 48: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

48 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ The three new fields are highlighted in red

Page 49: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

49 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ In the Applications view expand Custom Controls and open content_EditContent

Page 50: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

50 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Open the source view of the content_EditContent custom control

Page 51: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

51 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Paste Script_Snippet_1 into the TabDetails tab panel■ This adds the when, where, and address fields to the edit content XPage

Script_Snippet_1

Page 52: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

52 | © 2012 IBM Corporation

Snippet 1<!--Code snippet for custom control content_EditContent-->

<xp:div styleClass="tabTextHolder">

<xp:label value="When:" id="label3"></xp:label>

<xp:inputText id="editDetailsWhen"

value="#{contentDoc.DetailsTabWhen}" styleClass="tabTextField">

</xp:inputText>

</xp:div>

<xp:div styleClass="tabTextHolder">

<xp:label value="Where:" id="label4"></xp:label>

<xp:inputText id="editDetailsWhere"

value="#{contentDoc.DetailsTabWhere}" styleClass="tabTextField">

</xp:inputText>

</xp:div>

<xp:div styleClass="tabTextHolder">

<xp:label value="Address:" id="label5"></xp:label>

<xp:inputText id="editDetailsAddress"

value="#{contentDoc.DetailsTabAddress}" styleClass="tabTextField">

</xp:inputText>

</xp:div>

Page 53: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

53 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ In the Applications view, expand Custom Controls and open layout_UserTabs

Page 54: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

54 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Open the Source view of the layout_UserTabs custom control

Page 55: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

55 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Paste Script_Snippet_2 into layout_UserTabs■ This adds the when, where, and address fields to the Details tab

Script_Snippet_2

Page 56: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

56 | © 2012 IBM Corporation

Snippet 2<!--Code snippet for custom control layout_UserTabs-->

<xp:div styleClass="detailsSection"><xp:label value="When" id="whenLabel" styleClass="detailsLabel"></xp:label><xp:div>

<xp:inputText id="inputText1" readonly="true" value="#{contentDoc.DetailsTabWhen}"></xp:inputText>

</xp:div></xp:div><xp:div styleClass="detailsSection">

<xp:label value="Where" id="whereLabel" styleClass="detailsLabel"></xp:label><xp:div>

<xp:inputText id="inputText2" readonly="true" value="#{contentDoc.DetailsTabWhere}"></xp:inputText>

</xp:div></xp:div><xp:div styleClass="detailsSection">

<xp:label value="Address" id="label1" styleClass="detailsLabel"></xp:label><xp:div>

<xp:inputText id="inputText3" readonly="true" value="#{contentDoc.DetailsTabAddress}"></xp:inputText>

</xp:div></xp:div>

Page 57: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

57 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ In the Applications view expand Resources → Style Sheets■ Open site.css

Page 58: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

58 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Paste Script_Snippet_3 into site.css■ This adds some styling to the when, where, and address fields

Script_Snippet_3

Page 59: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

59 | © 2012 IBM Corporation

Snippet 3/* CSS for site.css */

.detailsLabel {font-size: 150%;

}

.detailsSection {padding-top: 20px;

}

Page 60: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

60 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Go to the XPage in the browser■ Select “Edit Page Content”

Page 61: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

61 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Go to the “Details” Tab

Page 62: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

62 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Fill out the When, Where, and Address Fields■ Remove any text from the rich text editor

Page 63: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

63 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Save the changes

Page 64: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

64 | © 2012 IBM Corporation

Add When, Where, and Address Fields■ Final Result

Page 65: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

65 | © 2012 IBM Corporation

Agenda■ Terminology & Background

■ Pre-requisites

■ Extending The XPage App

─ Add When, Where, and Address Fields─ Creating A Confirmation Embedded Experience─ Sending The Embedded Experience Email

■ Creating A Widget For Our Embedded Experience■ Register For The Event

■ Leveraging The Power Of OpenSocial

─ Publishing To The Activity Stream─ Recommending Network Contacts

■ Q&A

■ Resources

Page 66: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

66 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Currently the confirmation email the registrant gets is just text

■ We want to include some more useful information─ When the event is taking place─ Where the event is taking place─ Address of the event─ It makes sense then to include this information in our embedded experience data model

{ “gadget” : “<url to gadget in nsf>”, “context” : { “dbUrl” : “<url to the NSF>”, “when” : “<when the event is taking place>”, “where” : “<where the evnt is taking place>”, “address” : “<address where the event is taking place>”, “siteName” : “<name of the site>”, “messageContent” : “<text message>” }}

Page 67: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

67 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Open Lotus Domino Designer■ In the Applications view right click on Resources → Files■ Select “New File...”

Page 68: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

68 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Give the new file the name ConfirmationEE.xml

Page 69: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

69 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Select the Source view

Page 70: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

70 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Paste Script_Snippet_4 into ConfirmationEE.xml

─ Basic outline of a gadget XML file

Script_Snippet_4

Page 71: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

71 | © 2012 IBM Corporation

Snippet 4<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs title="Event Signup Confirmation"

description="Embedded experience for confirming when users register for an event."

author="Your Name Here"

author_email="Your Email Address Here">

<Require feature="dynamic-height"></Require>

<Require feature="embedded-experiences"></Require>

</ModulePrefs>

<Content type="html" view="embedded,default">

<![CDATA[

<!-- Replace the content of this CDATA section with Script_Snippet_5 -->

]]>

</Content>

</Module>

Page 72: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

72 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ ModulePrefs contain basic information about the gadget

■ Features provide specific APIs to the gadget─ Dynamic-height allows the gadget to adjust its height to fit the content─ Embedded-experiences is required for all embedded experience gadgets

– Used to get the context information from the embedded experience data model

Page 73: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

73 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Content sections define the gadget UI and functionality

─ Content sections with a type equal to “html” can contain– HTML– JavaScript– CSS

─ You can have multiple content sections in one gadget XML– Must be at least one content section with a view equal to “embedded”

Page 74: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

74 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Paste Script_Snippet_5 into the CDATA section in ConfirmationEE.xml

Script_Snippet_5

Page 75: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

75 | © 2012 IBM Corporation

Snippet 5 <div class="container">

<div class="header">

<div class="headerInner">

<h1 id="headerText" class="xspTextComputedField"></h1>

</div>

</div>

<div class="content">

<div class="xspTabTabbedPanel">

<!-- Replace the content of this div with Script_Snippet_6 -->

</div>

<div class="footer">

<p>&copy; Acme Corp</p>

</div>

</div>

</div>

Page 76: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

76 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Paste Script_Snippet_6 in the div with the class xspTabTabbedPannel

Script_Snippet_6

Page 77: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

77 | © 2012 IBM Corporation

Snippet 6<!-- Add some holders for information about the event -->

<div class="detailsSection">

<div id="messageText"></div>

</div>

<div class="detailsSection">

<span class="detailsLabel">When</span>

<div><span id="whenText"></span></div>

</div>

<div class="detailsSection">

<span class="detailsLabel">Where</span>

<div><span id="whereText"></span></div>

</div>

<div class="detailsSection">

<span class="detailsLabel">Address</span>

<div><span id="addressText"></span></div>

</div>

<!-- Div for our Google Map To Go In -->

<div id="mapCanvas"></div>

Page 78: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

78 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Give the embedded experience some style! ■ Paste Script_Snippet_7 in the CDATA section above the first div

Script_Snippet_7

Page 79: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

79 | © 2012 IBM Corporation

Snippet 7 <!-- Add the stylesheet from the XPage application to the gadget -->

<link rel="stylesheet" href="site.css" type="text/css"></link>

<style type="text/css">

#mapCanvas {

height: 500px;

margin-top: 20px;

margin-bottom: 20px;

}

</style>

Page 80: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

80 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Create a JavaScript file in which to put our embedded experiences logic■ In the Applications view expand “Code”■ Right click on “Script Libraries”■ Select “New Script Library...”

Page 81: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

81 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ In the “New Script Library” Dialog give the script the name “gadget.js”■ Select the type JavaScript

Page 82: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

82 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Paste Script_Snippet_8

into gadget.js

■ registerOnLoadHandler─ Registers a function to be

called once all of the content in the gadget has finished loading

Script_Snippet_8

Page 83: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

83 | © 2012 IBM Corporation

Snippet 8/** * Global map of friends to email addresses. */var friendToEmailMap = {};

/** * Data context key for the embedded experience * context object. */var EE_KEY = 'org.opensocial.ee.context';

/** * Called when the gadget finished loading. */function onLoad() {

};

/* * Registers an onload handler so we know when the gadget * has loaded. */gadgets.util.registerOnLoadHandler(onLoad);

Page 84: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

84 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Add Script_Snippet_9 to the onLoad function

Script_Snippet_9

Page 85: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

85 | © 2012 IBM Corporation

Snippet 9opensocial.data.getDataContext().registerListener(EE_KEY, function(key) {

var eeContext = opensocial.data.getDataContext().getDataSet(key);

addDetails(eeContext);

});

Page 86: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

86 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience

■ registerListener ─ registers a function to be

called when the embedded experience context object is set

■ getDataSet─ The key for the embedded

experience context object is passed into the callback function and can be used to get the data set (embedded experience context object) for that key

Page 87: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

87 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ The eeContext object will contain the context property from our data model

{ “gadget” : “<url to gadget in nsf>”, “context” : { “dbUrl” : “<url to the NSF>”, “when” : “<when the event is taking place>”, “where” : “<where the evnt is taking place>”, “address” : “<address where the event is taking place>”, “siteName” : “<name of the site>”, “messageContent” : “<text message>” }}

Page 88: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

88 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Paste Script_Snippet_10 after the onLoad function in gadget.js■ The code in Script_Snippet_10 adds the when, where, and address information

from the embedded experience context object to the DOM

Script_Snippet_10

Page 89: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

89 | © 2012 IBM Corporation

Snippet 10/**

* Adds details information to the DOM.

* @param eeContext The embedded experiences context object.

*/

function addDetails(eeContext) {

document.getElementById('whenText').innerHTML = eeContext.when;

document.getElementById('whereText').innerHTML = eeContext.where;

document.getElementById('addressText').innerHTML = eeContext.address;

document.getElementById('headerText').innerHTML = eeContext.siteName;

document.getElementById('messageText').innerHTML = eeContext.messageContent;

};

Page 90: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

90 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Paste Script_Snippet_11 after the addDetails function in gadget.js

─ Explanation of this code is outside the scope of this session please see the Google Maps API for more details http://bit.ly/mapsdevguide

Script_Snippet_11

Page 91: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

91 | © 2012 IBM Corporation

Snippet 11/** * Draws the Google Map in the UI. * @param address The address of the event. * @param where Where the event is taking place. */function drawMap(address, where) {

var geocoder = new google.maps.Geocoder();var latlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = {

zoom: 15,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP

};map = new google.maps.Map(document.getElementById('mapCanvas'), myOptions);geocoder.geocode( { 'address': address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {map.setCenter(results[0].geometry.location);var marker = new google.maps.Marker({

map: map,position: results[0].geometry.location,title: where

});gadgets.window.adjustHeight();

} else {gadgets.log('Geocode was not successful for the following reason: ' + status);

}});

};

Page 92: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

92 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Add the code in the red box below to the onLoad function in gadget.js to draw

the map when the gadget loads

Page 93: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

93 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Finally, we must modify the gadget to include a reference to our gadget.js file

and to the Google Maps Javascript■ In the Applications view expand Resources → Files■ Open ConfirmationEE.xml

Page 94: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

94 | © 2012 IBM Corporation

Creating A Confirmation Embedded Experience■ Paste Script_Snippet_12 in ConfirmationEE.xml to add the script tags for our

gadget.js file and the Google Maps JavaScript

Script_Snippet_12

Page 95: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

95 | © 2012 IBM Corporation

Snippet 12 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.3&sensor=false"></script>

<script type="text/javascript" src="gadget.js"></script>

Page 96: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

96 | © 2012 IBM Corporation

Agenda■ Terminology & Background

■ Pre-requisites

■ Extending The XPage App

─ Add When, Where, and Address Fields─ Creating A Confirmation Embedded Experience─ Sending The Embedded Experience Email

■ Creating A Widget For Our Embedded Experience■ Register For The Event

■ Leveraging The Power Of OpenSocial

─ Publishing To The Activity Stream─ Recommending Network Contacts

■ Q&A

■ Resources

Page 97: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

97 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ Now that we have our embedded experience gadget created we want to be able

to “send it” in the confirmation emails

■ The Event Signup app has an agent that is responsible for sending the emails after a user registers

─ The agent is called “Send Registration Confirmation”─ Today the agent sends a traditional Lotus Notes mail memo─ We'll change the agent so it sends MIME emails─ We'll add the embedded experience MIME part containing our data model to the email

Page 98: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

98 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ In the Applications view expand Code → Agents■ Open “(Send Registration Confirmation)”

Page 99: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

99 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ Paste Script_Snippet_13 after creating a new notes session in the send mail

confirmation agent

Script_Snippet_13

Page 100: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

100 | © 2012 IBM Corporation

Snippet 13Dim convertMime As Boolean

convertMime = session.Convertmime

Page 101: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

101 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ Paste Script_Snippet_14 after we get the document with the key AppSettings in

the send confirmation email agent

Script_Snippet_14

Page 102: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

102 | © 2012 IBM Corporation

Snippet 14Dim contentDoc As NotesDocument

Set contentDoc = view.Getdocumentbykey("PagesContent", True)

Page 103: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

103 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ We need to get the

PagesContent doc in order to include the values of the when, where, and address fields in the embedded experience data model

Page 104: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

104 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ Remove the line in the red box from the send email confirmation agent■ We will replace this with a body item that has the correct MIME parts

Page 105: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

105 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ Paste Script_Snippet_15 after we add the subject item to the mail document.

Script_Snippet_15

Page 106: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

106 | © 2012 IBM Corporation

Snippet 15Dim content As Variantcontent = settingsDoc.Getitemvalue("RegEmailContent")

Dim strContent As StringstrContent = content(0)

Dim topMime As NotesMIMEEntitySet topMime = maildoc.Createmimeentity("Body")

Dim mimeHeader As NotesMIMEHeaderSet mimeHeader = topMime.Createheader("Content-Type")Call mimeHeader.Setheaderval("multipart/alternative")

Set mimeHeader = topMime.Createheader("MIME-Version")Call mimeHeader.Setheaderval("1.0")

Set mimeHeader = topMime.Createheader("Content-transfer-encoding")Call mimeHeader.Setheaderval("7bit")

Dim mime As NotesMIMEEntitySet mime = topMime.Createchildentity()

Dim stream As NotesStreamSet stream = session.Createstream()Call stream.Writetext(strContent)Call mime.Setcontentfromtext(stream, "text/plain", 1728)Call stream.Close()

Page 107: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

107 | © 2012 IBM Corporation

Snippet 15 (continued)Set mime = topMime.Createchildentity()Set stream = session.Createstream()Call stream.Writetext("<b>" + strContent + "</b>")Call mime.Setcontentfromtext(stream, "text/html", 1728)Call stream.Close()

Set mime = topMime.Createchildentity()Set stream = session.Createstream()

Dim dbUrl As StringdbUrl = session.HttpurldbUrl = Replace(dbUrl, "?OpenServer", "/" + db.Filepath)

Dim where As Variantwhere = contentDoc.Getitemvalue("DetailsTabWhere")Dim strWhere As StringstrWhere = where(0)

Dim when As Variantwhen = contentDoc.Getitemvalue("DetailsTabWhen")Dim strWhen As StringstrWhen = when(0)

Dim address As Variantaddress = contentDoc.Getitemvalue("DetailsTabAddress")Dim strAddress As StringstrAddress = address(0)

Page 108: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

108 | © 2012 IBM Corporation

Snippet15 (continued)Dim gadgetUrl As StringgadgetUrl = dbUrl + "/ConfirmationEE.xml"

Dim siteName As VariantsiteName = settingsDoc.Getitemvalue("SiteName")Dim strSiteName As StringstrSiteName = siteName(0)

Dim dataModel As StringdataModel = |{"gadget" : "| + gadgetUrl + |",|dataModel = dataModel + |"context" : {|dataModel = dataModel + |"dbUrl" : "| + dbUrl + |",|dataModel = dataModel + |"when" : "| + strWhen + |",|dataModel = dataModel + |"where" : "| + strWhere + |",|dataModel = dataModel + |"address" : "| + strAddress + |",|dataModel = dataModel + |"siteName" : "| + strSiteName + |",|dataModel = dataModel + |"messageContent" : "| + strContent + |"|dataModel = dataModel + |}}|Call stream.Writetext(dataModel)Call mime.Setcontentfromtext(stream, "application/embed+json", 1728)

Call stream.Close()

Page 109: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

109 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ Here we add a MIME

body part and add the necessary MIME headers to the email

■ It is key that the MIME email is a multipart/alternative MIME email

Page 110: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

110 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ Here we add two MIME

parts to the MIME email

■ These will be used for mail client which don't support embedded experiences

■ All embedded experience emails must have a text/html MIME part, but a text/plain MIME part is optional

Note: 1728 is the constant for 7Bit encoding

Page 111: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

111 | © 2012 IBM Corporation

Sending The Embedded Experience Email■ This code creates the

JSON embedded experience data model using information from the content document and the URL to the gadget XML we created

■ The MIME type for this MIME part must be application/embed+json in order for Lotus Notes and iNotes to recognize the embedded experience email

Note: 1728 is the constant for 7Bit encoding

Page 112: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

112 | © 2012 IBM Corporation

Agenda■ Terminology & Background

■ Pre-requisites

■ Extending The XPage App

─ Add When, Where, and Address Fields─ Creating A Confirmation Embedded Experience─ Sending The Embedded Experience Email

■ Creating A Widget For Our Embedded Experience■ Register For The Event

■ Leveraging The Power Of OpenSocial

─ Publishing To The Activity Stream─ Recommending Network Contacts

■ Q&A

■ Resources

Page 113: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

113 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience■ Lotus Notes and iNotes Social Edition use the Widgets Framework to push

trusted embedded experiences to clients─ Widgets are created via the OpenSocial Wizard built on top of the existing Widgets Framework─ Clients will only render trusted embedded experiences─ Trust is established by the Widget Catalog administrator

Page 114: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

114 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience■ Open Lotus Notes Social Edition■ Select the toolbar icon to open the

widget wizard■ Select “OpenSocial Gadget” in the

wizard■ Click “Next”

Page 115: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

115 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience■ Select “Add OpenSocial Gadget by URL”■ Enter the URL to the gadget

Page 116: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

116 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience■ The user will be asked to

disable certain features for the widget, make sure to only enable ones you trust

■ Some features may allow the gadget to access sensitive information

■ Click “Next”

Page 117: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

117 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience■ Select “Just configure a widget for now”■ Select “Finish”

Page 118: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

118 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience■ Publish the widget to the widget catalog by right clicking the widget in the My

Widgets sidebar and selecting “Publish to Calatog”

Page 119: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

119 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience■ In the Attachment section of the widget document select “Review”

■ Review the security information in the Security section■ Select “Approve”

Page 120: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

120 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience■ Remove the untrusted widget from the sidebar by right-clicking and selecting

“Remove”

Page 121: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

121 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience Now end users can utilize the widget that

was just created Browse the widget catalog by clicking

the toolbar button or the link in the view

Page 122: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

122 | © 2012 IBM Corporation

Creating A Widget For Our Embedded Experience■ Drag the widget from the catalog to the My Widgets sidebar

Page 123: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

123 | © 2012 IBM Corporation

Agenda■ Terminology & Background

■ Pre-requisites

■ Extending The XPage App

─ Add When, Where, and Address Fields─ Creating A Confirmation Embedded Experience─ Sending The Embedded Experience Email

■ Creating A Widget For Our Embedded Experience■ Register For The Event

■ Leveraging The Power Of OpenSocial

─ Publishing To The Activity Stream─ Recommending Network Contacts

■ Q&A

■ Resources

Page 124: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

124 | © 2012 IBM Corporation

Register For The Event■ Now that the app is sending the embedded experience email and we have the

widget installed, let's register for the event and test the embedded experience■ Go to the Event Signup XPage■ Click the “Registration” tab

Page 125: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

125 | © 2012 IBM Corporation

Register For The Event■ Fill out the form■ Click the “Register” button

Page 126: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

126 | © 2012 IBM Corporation

Register For The Event■ The user should see the confirmation message once the registration is complete

Page 127: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

127 | © 2012 IBM Corporation

Register For The Event■ Open Lotus Notes and open the user's mail file■ Double click the confirmation email to open it

Page 128: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

128 | © 2012 IBM Corporation

Register For The Event

Page 129: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

129 | © 2012 IBM Corporation

Agenda■ Terminology & Background

■ Pre-requisites

■ Extending The XPage App

─ Add When, Where, and Address Fields─ Creating A Confirmation Embedded Experience─ Sending The Embedded Experience Email

■ Creating A Widget For Our Embedded Experience■ Register For The Event

■ Leveraging The Power Of OpenSocial

─ Publishing To The Activity Stream─ Recommending Network Contacts

■ Q&A

■ Resources

Page 130: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

130 | © 2012 IBM Corporation

Leveraging The Power Of OpenSocial■ One of the key features of the OpenSocial specification is the included social

APIs─ People – the people that make up a social network─ Friends – the people in that social network you have a relationship with─ Activities – the actions the people in the social network take─ Messages – the communication between people in that social network

■ Lotus Notes and Domino Social Edition has not committed to supporting these APIs as of yet

─ We are looking for feed back from YOU!!!!─ If there is demand and you feel these APIs will enhance your applications let us know!

■ Lets take a look how we could enhance our embedded experience if the APIs were available

Page 131: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

131 | © 2012 IBM Corporation

Leveraging The Power Of OpenSocial■ Gadgets rendering in Lotus Notes and Domino Social Edition can utilize existing

Social Data from many sources

Page 132: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

132 | © 2012 IBM Corporation

Leveraging The Power Of OpenSocial■ The event organizers want as many people as possible to attend their event

─ The power of social networks can help spread awareness of events that take place– Can be as simple as getting together with friends– As powerful as starting a revolution

■ Leveraging OpenSocial, we can start to spread the word about our event to other people in our network

─ We can post something to our activity stream in Connections 4– People who follow us will see this in their stream and can register right from the embedded

experience─ We can suggest other people who may be interested in the event from the list of people in our

network– People who are suggested by us will get an embedded experience email allowing them to

register

Page 133: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

133 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Activities in the IBM Connections 4 activity stream can also contain embedded

experiences─ The real estate is much less compared to Lotus Notes and iNotes─ We can use a mobile version of the app as the embedded experience

Page 134: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

134 | © 2012 IBM Corporation

Publishing To The Activity Stream■ To use this mobile version of the Event Signup app as an embedded experience

in the Connections 4 activity stream we have to wrap it in a gadget.■ In the Application view expand Resources, right click on Files and select “New

File...”

Page 135: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

135 | © 2012 IBM Corporation

Publishing To The Activity Stream■ In the New File dialog give the file the name ActivityStreamEE.xml■ Click “OK”

Page 136: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

136 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Paste Script_Snippet_16 into the empty editor

■ This is a URL gadget─ Content type equals URL─ The href attribute points to our mobile version of our XPage app─ The URLs are relative to the gadget XML

Script_Snippet_16

Page 137: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

137 | © 2012 IBM Corporation

Publishing To The Activity Stream■ In the Applications view, expand Resources → Files■ Open ConfirmationEE.xml

Page 138: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

138 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Paste Script_Snippet_17 after the message text details section

Script_Snippet_17

Page 139: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

139 | © 2012 IBM Corporation

Snippet 17 <div class="detailsSection">

<div>

<span class="detailsLabel">Tell Everyone In Your Network You Are Attending This Event</span>

</div>

<div class="buttonHolder buttonHolderLeft">

<span class="linkButton" id="shareHolder">

<a id="shareLink" class="xspLink" title="Share With Others" href="#" >Share</a>

</span>

</div>

</div>

Page 140: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

140 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Paste Script_Snippet_18 at the end of the style section in ConfirmationEE.xml to

add some additional style to the button that was added in Script_Snippet_17

Script_Snippet_18

Page 141: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

141 | © 2012 IBM Corporation

Snippet 18 .buttonHolderLeft {

text-align: left;

}

Page 142: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

142 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Add the code in the red box to the ModulePrefs section in ConfirmationEE.xml■ This will provide the Social APIs from OpenSocial to our gadget at runtime

Page 143: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

143 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Open gadget.js■ Paste Script_Snippet_19 in the onLoad function in gadget.js

Script_Snippet_19

Page 144: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

144 | © 2012 IBM Corporation

Snippet 19var batch = osapi.newBatch();

var fields = ['id','name','thumbnailUrl', 'emails'];

batch.add('viewer', osapi.people.getViewer({sortBy:'name',fields:fields}));

batch.execute(function(result){

if(result.error) {

gadgets.log('There was an error getting the viewer and their friends.');

}

hookShareAction(eeContext, result);

});

Page 145: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

145 | © 2012 IBM Corporation

Publishing To The Activity Stream

■ osapi.newBatch─ Creates a new batch request

object.─ Allows you to batch multiple

requests into a single request to the server

─ Helps the gadgets performance

■ osapi.people.getViewer─ Gets information about the current

viewer/user

■ hookShareAction ─ Hooks an onclick method to the

Share button

Page 146: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

146 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Paste Script_Snippet_20 after the addDetails function

Script_Snippet_20

Page 147: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

147 | © 2012 IBM Corporation

Snippet 20/** * Hooks the share action to the share button. * @param context The embedded experience context object. * @param result The result of getting the viewer and the viewer's friends. */function hookShareAction(context, result) {

if(!result.error) {var share = function(e) {

var params = constructActivityParams(context, result);osapi.activitystreams.create(params).execute(function(result) {

var shareHolder = document.getElementById('shareHolder');shareHolder.innerHTML = 'Activity Posted';shareHolder.onclick = '';

});return false;

};document.getElementById('shareLink').onclick = share;

}};

Page 148: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

148 | © 2012 IBM Corporation

Snippet 20 (continued)/** * Constructs the activity entry to post to the activity stream. * @param context The embedded experience context. * @param result The result of requesting the viewer and the viewer's friends. * @return a JSON object representing the activity. */function constructActivityParams(context, result) {var viewer = result.viewer;var id = new Date().getTime();var gadget = context.dbUrl + '/ActivityStreamEE.xml';var content = viewer.name.formatted + ' has registered for the event ' + context.siteName;return {"userId": '@viewer',"groupId": '@self',"activity": {"published": '2010-04-27T06:02:36+0000',"title": context.siteName,"content": content,"verb": 'post',"generator":{"id": id,"displayName":context.siteName},"object": {"objectType": "note", "summary":"Event","url": context.dbUrl,"id": id},"openSocial" : {"embed" : {"gadget" : gadget}}}};};

Page 149: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

149 | © 2012 IBM Corporation

Publishing To The Activity Stream■ osapi.activitystreams

─ APIs for do basic CRUD operations on the container's activity stream

─ In this case we create a new activity entry in the activity stream

─ Change the text of the button so the user know the activity was posted.

■ Call the share function when the share button is clicked

Page 150: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

150 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Constructs an activity based

on the Activity Streams spec─ http://bit.ly/actstrdoc

■ Adding the embedded experience

─ The embedded experience data model is place at the end of the activity in the openSocial property

─ Note there is no context property in this embedded experience

Page 151: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

151 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Open the confirmation embedded experience email we already have in our inbox■ We now have a share button that when clicked will publish an activity to the

activity stream in Connections 4

Page 152: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

152 | © 2012 IBM Corporation

Publishing To The Activity Stream■ Now on the home page in Connections 4 users who are following Matthew will

see a post saying he is attending the event■ If they click on the activity they will see them mobile version of the app as the

embedded experience

Page 153: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

153 | © 2012 IBM Corporation

Agenda■ Terminology & Background

■ Pre-requisites

■ Extending The XPage App

─ Add When, Where, and Address Fields─ Creating A Confirmation Embedded Experience─ Sending The Embedded Experience Email

■ Creating A Widget For Our Embedded Experience■ Register For The Event

■ Leveraging The Power Of OpenSocial

─ Publishing To The Activity Stream─ Recommending Network Contacts

■ Q&A

■ Resources

Page 154: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

154 | © 2012 IBM Corporation

Recommending Network Contacts■ The second way we can spread word about our event is to allow people who

have registered to recommend others to attend

■ In our confirmation embedded experience we want to get the list of people in the current users network allow the user to suggest them

─ The network contacts the user suggests will receive an embedded experience email allowing them to register for the event

─ This embedded experience will not use a gadget, it will be a URL embedded experience– Points to a modified version of the registration XPage

Page 155: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

155 | © 2012 IBM Corporation

Recommending Network Contacts

Page 156: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

156 | © 2012 IBM Corporation

Recommending Network Contacts■ We can reuse the existing registration code by placing it in a custom control■ In the Applications view right click Custom Controls and select New Custom

Control

Page 157: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

157 | © 2012 IBM Corporation

Recommending Network Contacts■ In the “New Custom Control” dialog give the dialog the name

“content_Registration”■ Click “OK”

Page 158: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

158 | © 2012 IBM Corporation

Recommending Network Contacts■ Select the “Source”

tab in the new custom control, paste Script_Snippet_21

■ This is the same code that appears in layout_UserTabs custom control

Script_Snippet_21

Page 159: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

159 | © 2012 IBM Corporation

Recommending Network Contacts■ In the Applications view right click on “XPages” and select “New XPage...”

Page 160: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

160 | © 2012 IBM Corporation

Recommending Network Contacts■ In the “New XPage” dialog give the XPage the name “StandaloneRegistration”■ Click “OK”

Page 161: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

161 | © 2012 IBM Corporation

Recommending Network Contacts■ Select the “Source”

tab in the new XPage and paste Script_Snippet_22

Script_Snippet_22

Page 162: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

162 | © 2012 IBM Corporation

Recommending Network Contacts■ Open the “Controls” View

─ Window → Show Eclipse Views → Controls■ There should now be a content_Registration control listed under “Custom

Controls”

Page 163: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

163 | © 2012 IBM Corporation

Recommending Network Contacts

■ Drag and drop the content_registration control into the StandaloneRegistration XPage

■ It should go inside the div with the id “content”

Page 164: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

164 | © 2012 IBM Corporation

Recommending Network Contacts■ In a browser navigate to http://<yourServer>/signup.nsf/StandaloneRegistration.xsp

■ You will see the same registration page but without the tabbed UI

Page 165: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

165 | © 2012 IBM Corporation

Recommending Network Contacts■ Open Lotus Domino Designer■ In the Applications view, expand Resources → Files■ Open ConfirmationEE.xml

Page 166: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

166 | © 2012 IBM Corporation

Recommending Network Contacts■ Paste

Script_Snippet_23 after the “Share” details section but before the “When” details section

■ This code adds container UI for people in the user's network

■ HTML will be dynamically injected via JavaScript to display the contacts

Script_Snippet_23

Page 167: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

167 | © 2012 IBM Corporation

Snippet 23 <div class="detailsSection">

<div>

<span class="detailsLabel">Suggest Other People Who May Be Interested In This Event</span>

</div>

<div id="peopleContainer">

</div>

</div>

Page 168: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

168 | © 2012 IBM Corporation

Recommending Network Contacts■ Paste Script_Snippet_24

at the end of the style tag

■ This CSS adds some style for the network contacts UI in the gadget

Script_Snippet_24

Page 169: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

169 | © 2012 IBM Corporation

Snippet 24 #peopleContainer { margin-top: 10px; } .personContainer { border: 2px solid #658423; width: 145px; padding: 5px 5px 5px 5px; float: left; margin-left: 10px; margin-top: 10px; text-align: center; } .personImageHolder { margin-left: auto; margin-right: auto; width: 96px; } .highlight { background-color: #ccffcc; }

.clear { clear: both; }

Page 170: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

170 | © 2012 IBM Corporation

Recommending Network Contacts■ In the Applications view, expand Code → Script Libraries and open gadget.js

Page 171: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

171 | © 2012 IBM Corporation

Recommending Network Contacts■ Paste

Script_Snippet_25 & Script_Snippet_26 here

■ Snippet 25 add another request to get the viewer's friends (network contacts)

■ Snippet 26 calls a function to add the user's network contacts to the UI

Script_Snippet_25 & Script_Snippet_26

Page 172: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

172 | © 2012 IBM Corporation

Snippet 25batch.add('friends', osapi.people.getViewerFriends({sortBy:'name',fields:fields}));

Snippet 26addPeopleData(eeContext, result);

Page 173: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

173 | © 2012 IBM Corporation

Recommending Network Contacts■ Paste Script_Snippet_27 after the addDetails function in gadget.js

Script_Snippet_27

Page 174: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

174 | © 2012 IBM Corporation

Snippet 27/** * Adds the users friends to the UI. * @param eeContext The embedded experiences context object. * @param result The result of the batch request to fetch the viewer * and the viewer's friends. */function addPeopleData(eeContext, result) {

if(!result.error && result.friends.list.length > 0) {viewer = result.viewer;var friends = result.friends;document.getElementById('peopleContainer').innerHTML = constructNetworkHtml(result.friends);var personContainers = getElementsByClassName('div', 'personContainer');var sendEmail = function(e) {

var to = friendToEmailMap[e.currentTarget.id];var registerEE = eeContext.dbUrl + '/StandaloneRegistration.xsp';var sub = viewer.name.formatted + ' Has Suggested You Register For The Event ' + eeContext.siteName;var textHtml = viewer.name.formatted + ' has suggested you register for the event <a href="' + eeContext.dbUrl + '">' +

eeContext.siteName + '</a>';var textPlain = viewer.name.formatted + ' has suggested you register for the event ' + eeContext.siteName + '. ' +

eeContext.dbUrl;var postParams = constructMailerParams(eeContext.dbUrl, to, sub, textPlain, textHtml, {"url": registerEE})osapi.http.post(postParams).execute(function(reponse) {

if(response.error) {gadgets.log('There was an error sending the email');

}});//WARNING very fragile code herevar name = e.currentTarget.lastElementChild.lastElementChild.innerHTML;e.currentTarget.innerHTML = 'Email Sent To ' + name;

Page 175: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

175 | © 2012 IBM Corporation

Snippet 27 (continued)e.currentTarget.classList.add('highlight');e.currentTarget.onclick = '';};for(var i = 0; i < personContainers.length; i++) {personContainers[i].onclick = sendEmail;}} else {document.getElementById('peopleContainer').innerHTML = 'There is no one in your network to invite.';} };

/** * Constructs the POST data for the request to send an email. * @param dbUrl The database URL to use. * @param to Who to send the email to. * @param sub The subject of the email. * @param textPlain The plain text part of the email. * @param textHtml The text HTML part of the email. * @param embedJson The embedded experience JSON data model. * @return The POST data for the request to send an email. */function constructMailerParams(dbUrl, to, sub, textPlain, textHtml, embedJson) {return postParams = {"href" : dbUrl + '/mailer',"refreshInterval" : 0,"body" : {"To" : to,"Subject" : sub,

Page 176: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

176 | © 2012 IBM Corporation

Snippet 27 (continued)"Principal" : 'No Reply',"Body" : {"text_plain" : textPlain,"text_html" : textHtml,"embed_json" : embedJson}}};};

/** * Constructs the UI for the people in your network. * @param friends List of friends. * @return HTML for the UI for the people in your network. */function constructNetworkHtml(friends) {var html = '';for(var i = 0; i < friends.list.length; i++) {var person = friends.list[i];friendToEmailMap[person.id] = person.emails[0].value;html = html + '<div class="personContainer" id="' + person.id + '">' +'<div class="personImageHolder">' +'<img src="' + person.thumbnailUrl + '"/>' +'</div>' +'<div class="personName">' +'<span>' + person.name.formatted + '</span>' +

Page 177: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

177 | © 2012 IBM Corporation

Snippet 27 (continued)'</div>' +'</div>';}html = html + '<div class="clear"/>';return html;};

/** * Utility function to get DOM elements by their class name. * @param tagName The element tag name. * @param cssClass The CSS class. * @return An array of DOM elements matching the tag and class name. */function getElementsByClassName(tagName, cssClass) {var result = [];var elements = document.getElementsByTagName(tagName);for(var i = 0; i < elements.length; i++) {if(elements[i].className === cssClass) {result[result.length] = elements[i];}}return result;};

Page 178: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

178 | © 2012 IBM Corporation

Recommending Network Contacts■ result.friends contains a list of

contacts in the user's network─ This is passed to

constructNetworkHtml which will build the HTML in the embedded experience

■ The sendEmail function is called when the user clicks on the picture

─ osapi.http.post POSTs to the Mailer Servlet on the Domino server

─ This servlet actually sends the email to the user

Page 179: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

179 | © 2012 IBM Corporation

Recommending Network Contacts■ We POST a JSON object to

the Mailer Servlet─ The href property points to the

URL of the Mailer Servlet─ The body property is the POST

body─ The POST body contains the

fields of the email and its properties

─ embed_json is the embedded experience data model we want to put in the email

Page 180: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

180 | © 2012 IBM Corporation

Recommending Network Contacts■ Go back to the confirmation email in the user's Inbox in Lotus Notes

─ You should now see a list of people in that user's network being displayed

Page 181: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

181 | © 2012 IBM Corporation

Recommending Network Contacts■ Selecting a network contact will cause the app to send an email to them asking

them to register

Page 182: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

182 | © 2012 IBM Corporation

Recommending Network Contacts■ The suggested contact will get an email in their Inbox

─ In this screen shot we are showing a user using Lotus iNotes Social Edition

Page 183: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

183 | © 2012 IBM Corporation

Recommending Network Contacts■ Once opening the email we can see the registration embedded experience

─ This is showing a URL embedded experience─ It is pointing to the StandaloneRegistration.xsp

Page 184: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

184 | © 2012 IBM Corporation

Recommending Network Contacts■ The user can now register right from their email

Page 185: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

185 | © 2012 IBM Corporation

Conclusion■ Embedded Experiences helps enhance end users' notifications

─ Available in Lotus Notes and iNotes Social Edition

■ XPages + OpenSocial = Powerful Social Applications─ XPages makes it easy to build powerful web based applications─ OpenSocial makes it easy to integrate social data

■ Still more work to do...─ Should be easier to surface XPages as OpenSocial gadgets

– Follow a similar model to how we can surface XPages as iWidgets─ We need feedback on the Social APIs in OpenSocial!

Page 186: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

186 | © 2012 IBM Corporation

Go Ahead. Ask Us Anything!

Q&A

Page 187: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

187 | © 2012 IBM Corporation

Resources■ IBM Social Business Development Wiki - http://bit.ly/socialbizwiki■ Embedded Experiences Tutorial - http://bit.ly/EETutorial■ OpenSocial - http://docs.opensocial.org■ Actvity Streams - http://activitystrea.ms/■ OpenSocial 2.0 Sandbox - http://bit.ly/OSSandbox■ Ryan Baxter's Blog - http://ryanjbaxter.com

Page 188: Lotusphere 2012 - Show115 - Socialize Your Apps Using OpenSocial

188 | © 2012 IBM Corporation

Legal disclaimer© IBM Corporation 2012. All Rights Reserved.

The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.

References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.

All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer.

IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both.