Becoming an IBM Connections Developer

© 2013 IBM Corporation

SHOW301 Becoming an IBM Connections Developer: Lessons from the FieldRob Novak | SNAPPS | @IBMRockStar

Jerald Mahurin | SNAPPS | @SociallyCurious

2

About Us

■ Rob Novak, President, SNAPPS

─ IBM Business Partner for 19 years, SNAPPS for 16 years─ Co-author, a bunch of RedBooks, certification exams, articles─ Speaker at Lotusphere since 2002, other events back to 1995─ Other areas of interest include analytics, collaboration

strategy, business process design

■ Jerald Mahurin, Vice President, SNAPPS

─ With IBM Business Partners for 19 years; now with SNAPPS going on 10 years

─ Rob's LotusScript teacher in 1994 (ViP!)─ Frequent speaker at Lotusphere, user groups, Collaboration University─ Directs support, development, and delivery of services for enterprise clients

| © 2012 IBM Corporation

3

Agenda

Agenda

Session assumptions and goals

Language and context

OpenSocial & iWidgets

Connections SPIs

REST APIs

Branding & Themes: HTML, CSS, and JSPs

Connections business card integration

Open source overview

Resources, other sessions and Q & A

5

Before we begin…

Just a quick mention that we will be discussing IBM® Connections® extensively, may very well mention IBM® Notes® and possibly refer to it as Lotus® Notes® out of habit, in which case we really mean IBM® Lotus Notes®.

We’ll discuss and be spending a lot of time with IBM® WebSphere®

We think that covers it, because we won’t be talking about any of these other IBM trademarked products:

– BooleDozer®– Chiphopper™– Decade of Smart™– Integrate in Days®– LOVEM®– NameVariationGenerator®– Pearl Diver®– The Experience of Now®– First Failure Support Technology™

Agenda




Connections SPIs

REST APIs





7

Assumptions and Goals

You are a Domino developer (or a new developer)

Your knowledge of WebSphere is similar to your understanding of the Higgs Boson

Your skill level with general web technologies (HTML, JavaScript, Java™, CSS, etc.) is anywhere from nonexistent to expert

With all the commotion about IBM Connections, you want to know enough to start customizing it and “get” the development methods

After this session, you should “get it” just enough to be dangerous!

8

The Path to “Getting It”

Well, you’re here so that’s a good start

Terminology – taxonomy, glossary, language, wording.

Context – without which all the terminology in the world is a bit useless!

Framing – the ability to envision solutions in context, then describe them in language that can be understood by both technical and nontechnical people

9

The language of Connections Development

Common language for a Domino developer:

– HTML– JavaScript– CSS– Eclipse– Branding

Less common:– oAuth– OpenSocial– Shindig– iWidget– OSDE

Middle ground (you might be familiar):– WebSphere Application Server– Integrated Solution Console– REST API– Activity Streams

10

The language of Connections Development

11

So let’s discuss those hard words…OAuth

OAuth– An open protocol to allow secure authorization in a simple and standard method

from web, mobile and desktop applications.– The OAuth 2.0 authorization framework enables a third-party application to obtain limited

access to an HTTP service.

– You are either a consumer or a service provider, developing anything from widgets to server-side APIs

– Code libraries are available from Google Code for many languages – Java, JavaScript, Perl, Ruby for example

– To get started: http://oauth.net/documentation/getting-started/

12

So let’s discuss those hard words…OpenSocial

OpenSocial is a set of APIs that allow you to either– Build social features into your site– Let your users access social data on your site via REST

– The OpenSocial APIs provide three types of information: Person, Activity, and AppData

– Most commonly, OpenSocial apps implement OAuth (see how that fits!)

– Connections fully supports the OpenSocial specification for both creating new features and accessing external social site person, activity or app data

– Opensocial.org

13

So let’s discuss those hard words…Shindig

Apache Shindig– An OpenSocial container (layers…) that helps you start hosting OpenSocial apps quickly

by providing code to render gadgets, proxy requests, and handle REST and RPC requests

– Stated goal: Apache Shindig's goal is to allow new sites to start hosting social apps in under an hour's worth of work.

– We’ll dig deeper into Shindig later in the session – in fact we’ll install and use it

14

So let’s discuss those hard words…iWidget

iWidgets are based on an IBM spec and used in a number of products

– They are what you think they are – bits of code that make squares that do things!– De-emphasizing them as time goes on, with the increased use of OpenSocial gadgets

– Still, they are used in Connections so we’ll spend some time in the next section

– http://www.ibm.com/developerworks/web/library/wa-iwidgets/index.html

15

So let’s discuss those hard words…OSDE

OpenSocial Development Environment

– An Eclipse plugin from OpenSocial.org that gives the IDE amazing superpowers

– OK, gives the IDE a Shindig container, sample code, and a new perspective

– Think of it as a nice way to put together all the resources you need for development and local testing of OpenSocial gadgets

– We’ll install and use OSDE in this session

16

Now for some context

Connections 4.0 is a big product with a lot of social features

“Work” is social, technical, managerial, and uses many other non-social systems

By treating Connections as a social platform we start to see ways to:– Use Connections social data to improve other systems and applications– Integrate systems so attention is divided less and less (embedded experience)– Brand the social experience, and add company-specific requirements– Make use of common and emerging use patterns to make “work” more natural

The way to treat Connections as a platform is to understand the ways it can be used – out of the box and programmatically

Agenda




Connections SPIs

REST APIs





OpenSocial Evolution

OpenSocial– MySpace– iGoogle (Google Gadgets)– Lots of other networks– Time passing– Big companies saying “hmm,

that’s actually pretty good”

opensocial.org – supported by a foundation, community membership, corporate involvement

OpenSocial spec: Currently in draft version 2.50, it is a set of APIs for building social applications that run on the web

OpenSocial Development

It’s HTML, JavaScript, REST, XML, JSON and Java

Google ran development under iGoogle Developer Program, then moved to OpenSocial.org

OpenSocial Development Environment, OSDE, is available as an Eclipse plug-in

We are here to get you to “dev-ready” so let’s dive into OSDE

OSDE

http://code.google.com/p/opensocial-development-environment/

Requires: Eclipse (classic recommended) and a JVM

http://code.google.com/p/opensocial-development-environment/

Eclipse Naked

Here’s Eclipse with not much going on

I happen to have Aptana installed for a Web perspective, but no projects loaded

We want to add OSDE to Eclipse

Let’s Get OSDE

Adding new software to Eclipse is pretty easy once you know where the menus are

In this case, we click Help -> Install New Software

Selecting a site

In the first dialog, we paste the location of the XML file representing the new software we want to install in “Work with”

http://opensocial-development-environment.googlecode.com/svn/update-site/site.xml






It’s the only option, we might as well take it

Select “OpenSocial”

Read this carefully

OMG

“Unsigned content” is actually pretty common in the open source, free world

In this case, I think we’re OK to proceed

Still Naked

Nothing appears to have happened, a little counterintuitive but expected

To see our OSDE environment, we have to change to the OpenSocial “perspective” in Eclipse

Change Perspective

Ooh. Something new.

OpenSocial is now one of the perspective choices

Still Naked?

So…still seems a little bare for an all-new installation

So we have to have a closer look at some of the menus

Ah, some dressing

New menu items

Shindig, a fun name anda container

iGoogle, which is familiarbut going away

Sample data!

Don’t get too excited

Resist the temptation to start clicking around on the iGoogle and sample data menu items – they are accessed at specific times in development

Well this looks interesting...

Well this looks tempting..

What now?

Starting points are documented as iGoogle, but once you get there you realize it’s retiring

iGoogle developer resources are deprecated

iGoogle website going away 1 November 2013, dev site already stale

Deduced: Use OSDE website for development resources

Start our local Shindig server in Eclipse

Start Shindig server

Ooh, look at all the new tabs!

Shindig?

Apache Shindig is a container for hosting social applications consisting of four parts:

– Gadget Container JavaScript– Gadget Rendering Server– OpenSocial Container JavaScript– OpenSocial Data Server

Also, Shindig is a reference implementation of the OpenSocial API specifications which includes:

– Profiles– Relationships– Activities– Shared applications– Authentication– Authorization

Let’s start an OpenSocial project

New – Project – OpenSocial

Provide the project with a name as shown

Now we have ourselves a gadget!

This goes quickly for a sample project!

Leave the gadget.xml file name as is, add in an email address and description

Leave the version number as shown 0.9 (or the latest in your installation if you are doing this later)

Sample code? Yes!

For the view settings for canvas (the area of the screen in read mode) yes, let’s generate a set of a sample code

Also make a choice of what to do with the sample code

We chose to fetch a list of friends for a user

Let’s do this too

Make the same choices for the Profile view

Like magic, an app

Our gadget.xml file appears in a “form-like” mode, note the tabs on the bottom of the IDE to move to Source

Run the app locally

So we have a sample app, a running server, do what any good developer would do

Right click the gadget.xml file in the app explorer or navigator, and choose OSDE – Run application locally

Slight differences (0.8 vs. 0.9)

For illustration purposes only, we’re running the 0.9 version on the right…

0.8

0.9

Hey it works!

A closer look (hint, notice the port)

You can see from the tab that this is the “app” and that we’re in the canvas view

Take note of the port 8123 here, we’ll use it in a moment

And...voila. Results.

Click on “Fetch people and friends” and our gadget writes out a list of our (conrad.doe’s) friends

Create a Java Project

So we can do some gadgety UI stuff, can we write some “real” code already?

This is where the Java developers all have a laugh

Right click gadget.xml again, choose OSDE – Create Java Project for Restful Protocol

Give it a different name

We’re creating another project, so just give it a different name from the first one, click Next

Accept these defaults

The project will want to create some default folders, leave them as is

Switch perspectives

Eclipse will ask you if you want to switch perspectives as it finishes the project, feel free to click Yes

A wider view...

Hey, Java! Notice the port...

Does our code run?

Now that we have a project we can try to run it as a Java Application

Right click the gadget.xml file again, Run as – Java Application

Right-click gadget.xml

oops...

We see an error and can deduce from the text that it has a problem with the $server_port$ placeholder

This appears to be a bug in the current OSDE plugin as we can’t find a preference for the port, so…

Not too bad

Changed port to 8123

Run application again, now we have results

Summary (OSDE)

OpenSocial is the future of gadget development for IBM Connections

OSDE is a community-supported Eclipse based plugin for development

You likely have the hang of Eclipse based IDEs if you’re here

Topics we hinted at (OSDE)

Performance measurement – requires Firefox (see preferences)

Shindig container and Jetty engine

Testing against iGoogle (tick tock...)

Mobile (OpenSocial is the only method for custom apps – widgets or gadgets – to go mobile from Connections...)

For more on these topics: https://sites.google.com/site/opensocialdevenv/

And...other sessions here at Connect 2013

https://sites.google.com/site/opensocialdevenv/

Deploying OpenSocial gadgets

Technologies used:– JavaScript, XML, HTML, Java

Tools:– Eclipse + Aptana + Subversion + OpenSocial Development Environment (OSDE)– Developer mode (bootstrap page)

Developer Mode

Ask an admin to follow the instructions to enable developer mode: http://public.dhe.ibm.com/software/dw/lotus/OS_gadget_IC4_final.pdf

They will say no.

Ask again, nicely.

http://public.dhe.ibm.com/software/dw/lotus/OS_gadget_IC4_final.pdf

Developer bootstrap test page

60

What you see if your admin doesn’t like you

61

What this immediately reminds me of, but I’m old

Testing an embedded experience widget

From the bootstrap page,if we “Load” a widgetthat will make itavailable to use or perform some action

Loading the embeddedexperience widget lets you click a buttonto post to your activitystream

Load Post

Sample Embedded Experience Gadget

From the bootstrap page,we posted the widget to our activity stream in one area – “I’m Following”

Clicking on the post (blue) opens the embedded experience where other code might take replies, let you perform some other action, etc.

Deploying a Gadget in Developer mode

Back to our bootstrap page, we can deploy a gadget using the same exact method

Once we Load the gadget, we can go use it wherever we have decided in the code to allow it to live

Load

Change some settings

Don’t worry if they don’t persist yet

As an admin, add the widget to the homepage:

IBM & Partners: Hint - these are your admins

Note: This one got a little tricky, since using a prepared VM we didn’t know who was an admin.

A quick check in the Integrated Solutions Console provided the list of admin IDs

In other words, ask your admin!

Yes, that’s TWO interactions with an admin that I’ve mentioned

Add widget to My Page

Give it a go...the admin can add a widget to the page using the Customize menu

Finished sample

This gadget is one of the samples that comes with the bootstrap page, it lets you set some basic preferences in edit mode

Obviously your gadgets will do something more exciting in read mode, but this is a good template to follow for preference settings in your code

69

iWidgets

The most common way to add functionality to Connections 2 & 3

Based on an IBM specification and used in Lotus Mashups® (later IBM Mashup Center®) and various other products

Little written about iWidgets in 3 years, but they still are valuable if you can accept:– Decline in documentation over time– Lack of support for mobile

That said…

70

iWidgets definition

iWidget is an internal IBM specification that defines a standard way to wrap web content and allow that content to participate in a Connections environment. In order for widgets to participate in a mashup environment, they must be componentized. The iWidget specification provides mechanisms for creating iWidgets as componentized web content

An iWidget acts as a wrapper for any web content that you create, such as servlets, JavaServer Pages (JSP) files, HTML, PHP, or CGI, can be wrapped in an iWidget

The iWidget component provides a descriptor that wraps the web content and allows it to be placed in another application that can render the web content

It can contain markup that is rendered and can be supported by JavaScript™ files for dynamic client-side scripting and CSS files for styling the markup

71

Structure of an iWidget

Page– The larger entity composed for presentation to a user. A page can include widgets from

different sources that do or do not display visibly on the page. The resources within a page can include DOM elements, JavaScript™ variables, and functions.

iContext– The context of the iWidget runtime environment manages the iWidget. This context

includes any user interface (UI) controls, coordination between iWidgets, and interaction with the backend service.

Markup fragment– A view that the iWidget produces for users. An iWidget can present multiple fragments

simultaneously to users.

72

Structure of an iWidget (cont’d)

ItemSet– The attributes of an iWidget that control content presentation and data sources.

Examples: an attribute named bgColor that controls the background color of the iWidget, an attribute named feedURL controls the RSS feed that the iWidget connects to or renders.

Mode– An iWidget piece of the iContext managed state that tells the iWidget what type of

markup to generate for the user. View mode uses normal markup and edit mode uses markup for editing the iWidget attributes.

Events– A mechanism that provides a transitory means of sharing information. There are two

types of events: a published event, which means the iWidget publishes some data by this event, and the handled event, which means the iWidget receives some data from other iWidgets.

73

Developing a Widget

Starting from scratch? Never.

Many iWidgets available for download (greenhouse.lotus.com/catalog) and able to be built using developer resources on other sites, like Twitter

We’ll start with a widget developed by Luis Benitez, IBM Senior PM for Connections

74

Components of an iWidget

Widget definition file (XML)

Usually, a JavaScript file

Sometimes, for IFRAME widgets, an HTML file

Other supporting files as needed

If deployed via WAS, possibly an EAR file

75

twitterSearchWidget.xml

Identify resources

Provide attributes

Define view mode

Define edit mode

76

Copy to web server (easiest method)

Take note of the path to the “htdocs” directory

This is the IBM HTTP server’s equivalent of Domino’s HTML directory from a path standpoint

77

Ensure the XML file is addressable – if not, check permissions!

78

Let Connections know we want to use the widget, and where

Production method: Ask admin to use wsadmin to check out the widgets-config.xml file and make these edits to the community section

Responsible developer method: Use wsadmin to check out the widgets-config.xml file and make these edits

Development box/stage method: Pay no attention to the man behind the curtain!

Modification to widgets-config.xml:– <widgetDef defId="TwitterSearch" url="http://<hostname>/widgets/TwitterSearch/twitterSearchWidget.xml" modes="view edit" primaryWidget="false" iconUrl="http://www.twitter.com/favicon.ico" uniqueInstance="true"/>

Restart Connections

79

Find our widget

Since we added the widget definition to widgets-config.xml in the Community section, it will be available in Communities

As a community moderator, enter a community and click “Community actions -> Customize” to open the panel of available widgets and gadgets

80

Select the new TwitterSearch widget

81

Enjoy…

Agenda




Connections SPIs

REST APIs





Connections SPIs

SPI: Service Provider Interface– Event, Seedlist, Service and User SPIs

These SPIs allow you to extend functionality in ways commonly associated with “the back end”

Examples:– Niklas Heidloff wrote an Event SPI to automatically add persons to Notes database

ACLs (access control lists) when community moderators add people as members– Our sample from IBM AU is an Event SPI that sends an email to someone when

they are mentioned in a comment (in the Files app, when formatted a specific way)

Technologies:– Java (primarily), but as a service can be consumed by pretty much anything on the

other end…

Tools:– Eclipse (or RAD)

Connections SPIs

Sample code is available on the Connections wiki

I loaded the sample into a blank file in Eclipse

Saved as a JAR file (right click –Export-JAR)

Or, you can deploy the JAR file sample

Location is key to deploying SPI programs

Deploying an SPI application is a multi-step process

Copy the JAR file to a directory on the server that has full access rights

Note the entire path as it is used to set the classpath in a moment

Location becomes the classpath

Now tell WebSphere ISC where it is...

Log into WebSphere Integrated Solutions Console

Choose Environment-Shared Libraries and choose the cell scope

Choose the cell scope

Choose cell-level scopeSet classpath to location of JAR file

Our classpath

Important do not select!

Set up the Application(s)

Our SPI works with the Files application

Choose Applications – WebSphere enterprise applications - Files

Locate Shared Library References

Set up Shared Libraries

Select Files

Left to Right...OK OK Save!

Note that our names reference library is available – just use the arrow key to move it from Available to Selected

92

Depending on what your Event SPI does, test

In our case it’s designed to send an email (or at least try)

To determine if it loaded properly, ask your admin for (or find) the current systemout.log file and search for your class name

Common issue has been ClassNotFoundException errors, which have one of a number of causes:

– Could be compiler version (1.5 vs. 1.6 or 1.7)– Could be file or folder permissions– Could be a typo on the classpath (that’s what mine was)

Agenda




Connections SPIs

REST APIs





REST APIs

Activities, Blogs, Bookmarks, Communities, Files, Forums, Profiles, and Wikis...and Home page

Technologies: – All of them, depending on where your program lives

Tools:– Web browsers, plugins, HTTP request generation tools (cURL)

You could do what the doc says...

However some readers will intercept feeds

Suggested tools

Firefox: RESTClient

Chrome: Advanced REST Client

For more advanced work:– Selenium IDE– HTMLUnit– JWebTest– Canoo WebTest– Apache JMeter

Example: RESTClient for Firefox

Download and install the plugin for Firefox using the Firefox menu (which changes slightly over versions, so we won’t list menu items here)

RESTClient will be available in the menus and (in version 18 anyway) as an icon in the address bar

Response Headers

To receive a response, enter a URL and the GET method, and click SEND

Raw Response

Highlighted Response

Response Body

Example 2: Advanced REST Client for Chrome

Similar to Firefox, Chrome has add-ons

Advanced REST Client has a number of nice features including a history and the ability to save REST calls – which can get complex at times

Redirect, Status, and Headers

Header data returned from the same call is fairly verbose, good for troubleshooting

Response - Raw or XML

In some instances, if JSON is returned there will be a JSON tab

Browser or Tool Choice?

Both browser plug-ins have options to add authentication, modify headers, use OAuth

Suggest having both handy for lightweight testing

Heavier tools as needed for debugging, language specific needs

Then there’s our friend Eclipse...

REST Client tool from Eclipse labs

Similar to our OSDE plugin, we can add a REST client to Eclipse

It’s not pretty but it’s functional

Location is:https://svn.codespot.com/a/eclipselabs.org/restclient-tool/trunk/eclipse/update/

(If you’re into subversion and want to see the source you can – not in the scope here…)

21

https://svn.codespot.com/a/eclipselabs.org/restclient-tool/trunk/eclipse/update/



Once installed, it’s well-hidden!

Window -> Show View -> Other -> REST Client -> RestClient Tool

Give it some room

Execute our REST call

Agenda




Connections SPIs

REST APIs





Themes

Technologies:– HTML, CSS, JavaScript, JSPs

Tools?– Your choice...ours is Eclipse + Aptana + Subversion– Let’s review some of the “tools of the trade” that are used outside the IDEs

113

Remote File Management Tools in a Unix/Linux World

Terminal window – Native Mac/Linux– PuTTY for Windows

Unix SCP/SFTP or Client• CyberDuck (Mac & Windows)• Fugu (Mac)• WinSCP (Windows)• FileZilla (Mac, Windows & Linux)

Unix SCP command (Secure CoPy)– scp user@FromHost:/location/file user@ToHost:/location/ – sftp/ftp command

Managing Remote Files the Hard Way: Terminal

Or the Easy Way: SFTP Client (in our case, Fugu Login)

You may have noticed by now our tools are primarily on our Macs

Platform doesn’t matter until you get into specific integration with another system that has a platform limitation

For instance, integration with Domino applications may require Domino Designer

First time SSH access may prompt to accept RSA key

117

Note About SFTP: Be nice to your admins

SSH must be installed on the server

Port 22 or equivalent must be available to you

You will need Read & Write privileges to the file system

You now you wish you were nicer to your Administrators last week

Directory specified in login if your client provides this feature

This slide simply illustrates the target directory for the AppServer

Some clients (like Fugu) let you specify a “starting directory” which can be quite nice, because as you will soon see, directories in WebSphere are very very deep!

119

Customizing the Header JSP

Why? We want to do something you can’t do easily with CSS (for illustration)

Method: Find the default JSP and modify a copy of it

Location of the default JSP is determined by the Connections installation

Location:

{WAS_HOME}/profiles/{profile_name}/installedApps/{cell_name}/{application_name.ear}/{application_name.war}/nav/templates/{files}

Mine looks something like this:

/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/connectionswwCell01/Common.ear/connections.info.war/nav/templates/header.jsp

Navigate to your target file

Identify the file you want to customize

Copy the file to your local workstation (Eclipse project folder)

Never, ever, ever make changes in-line live to the JSPs on the Connections server, your admin will hunt you down

Edit file in Eclipse Java EE editor

Another editor or perspective can be used, but may lack the convenience of the Outline

The Eclipse IDE can offer version control and facilitate collaborative development

Built-in mini Web server

124

We are going to change the text logo in the header.jsp

Make customizations with chosen editor

Shown here changing the logo text to corporate name

127

Now you need to know where to put your customized JSP

Not knowing where to put things can be frustrating

You don’t have to configure your IDE to compile JSPs

Connections will do it for you

You don’t have to configure Tomcat in your IDE

In all fairness, you can use Notepad if you like

Open the Integrated Solutions Console (ISC)

URL: https://{host}:9043/ibm/console/login

Navigate to the ISC console

The default port is 9043

Shows you where things are located

Locations are based upon the installation

Find the customization locations in ISC

Jackpot: your customization path

You may need to create directories…

Copy the JSP file in the templates folder from your IDE

Back to ISC: Stop & Start the Common application

Delete your browser’s cache and refresh

135

In case you thought that was too easy

It was

But you learned something about – The location of source files– How to download and change a common JSP page– Where files go– And how to apply your changes

Now let’s do it again (sort of)

Try to do most customizations with styles

Next we will create a custom CSS to load a corporate logo instead of words in the upper left corner

In Eclipse, create a New - File

Create a file called “custom.css” in your IDE project

Bring your logo into your IDE environment if you like

Navigate to the themes folder under customization on the server

Create a folder called defaultTheme (mind the case)

Note that the name of the folder is important for our purposes

Here’s were you will put your new custom CSS file

Create an images folder for the logo

Copy the logo graphic into the image folder

And finally copy the CSS file into the defaultTheme folder

Start and Stop the Common application in ISC

If all goes well you will have your own logo

147

Notes about Styles:

Use styles to make theme changes when possible

There are two special css file names you can use:– custom.css– defaultTheme.css

When you stop & start the application the themes are combined

Which one you use depends on the level of changes you are making

Use custom.css for minor changes

Use defaultTheme.css for a major overhaul

How to find out what styles you can change?

You must install and enable Firebug (or other developer tools)

Developer Tools in Chrome

What the inspect view looks like in Chrome developer tools

Find the element you want to change and inspect the style rules to make “live” changes

Changing the border from blue to red for #lotusBanner

The background color is by default blue, we like red (#ff0000)

Class lotusRightCorner creates a 1px blue line where we need to also change this to red

Now all blue elements are out of the header

Copy and paste the live changes to the custom.css file

Missed by many developers, live Firebug / Dev Tools changes are one of the most powerful time saving techniques!

Replace the old file with the new updates

You guessed it! Stop and start the Common application

Delete browser cache and refresh to see the changes

Agenda




Connections SPIs

REST APIs





162

Integrating the Connections business card

Why?– The Connections business card is the entry point to several social data links

related to a person– If enabled, the business card may have Sametime enabled, providing a

lightweight IM integration

Basic steps:– Add JavaScript library to page header– Add API links to page either statically or dynamically

163

Example of integrating the business card in static HTML

164

Notes about developing a business card

If profiles require authentication anonymous users cannot see the business card and will get a basic authentication popup

You will need to style the business card

Due to browser security the business card integration will only run from a web server (no local HTML files for development)

165

Eclipse built-in Web Server (localhost)

Eclipse gives us a local web server to test web apps that are simple and have few dependencies

With the HTML file open in the IDE, choose from the menu Run-Run As-JavaScript Web Application

166

Business card options

Two presentation types– Popup– Inline

Two basic options– Lookup by ID– Lookup by email

167

About page with different styles of business cards

Popup business card using user ID

Popup business card using email address

Inline style using email address

168

The business card needs to be styled: two options

The below instructions are for the target HTML / JSP etc. page where you want the business card integrated, not the Connections server!

Option 1: Use the Connections style sheet, which is called by a specific script

– <script … /semanticTagService.js?inclDojo=true">

Option 2: Use your own style to make the business card match the rest of the site and resolve style conflicts

– <script … /semanticTagService.js?inclDojo=false">

169

Add the JavaScript library to <HEAD> tag

<HEAD>

<script type="text/javascript" src="http://yourserver.com/profiles/ibm_semanticTagServlet/javascript /semanticTagService.js?loadCssFiles=true"></script>

</HEAD>

170

Default styles may cause problems in a web page/application

171

Find and capture styles with Firebug or Developer Tools

172

Combined site styles with business card styles

By using Firebug or Developer Tools to capture styles, we can choose which few need to be updated either inline or in our own CSS

173

Add the JavaScript library to <HEAD> tag

Switch parameter to false to prevent dynamic loading of default style

<HEAD>

<script type="text/javascript" src="http://yourserver.com/profiles/ibm_semanticTagServlet/javascript /semanticTagService.js?loadCssFiles=false"></script>

</HEAD>

174

Business card is re-styled to complement the page

175

Add code to page body (Inline style)

Note the class on the div will determine what kind of styling is applied from the Connections choices

176

Add code to page body (Inline style)

177

Popup business card by email address

178

Popup business card by user ID

179

Search for user profile

180

Use the Firebug DOM tab to browse DOM objects in memory

Agenda




Connections SPIs

REST APIs





182

Two open source efforts are worth more than a mention…

IBM Social Business Toolkit SDK– You could call this a “Connections SDK” – almost – but the toolkit has many more

target platforms including standalone– Find guys named Ryan Baxter, Philippe Riand, or Paul Bastide in the – Covered in a number of sessions:

• INV110 : App Dev Strategy: Coding Social Business Applications• AD101 : Social Applications Made Easy with the New Social Business Toolkit

SDK• AD401 : Developing Integrated Applications with the Social Business ToolKit• BPDD205 : Develop to the IBM Social Business Platform - Building Social

Applications– Available on OpenNTF.org, speaking of which…

OpenNTF.org Connections submissions– BP212 : Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from

OpenNTF– BOF208 : OpenNTF: The Open Source Community for IBM Collaboration Solutions

Agenda




Connections SPIs

REST APIs





184

Resources

The official doc: http://www-10.lotus.com/ldd/lcwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Connections+4.0+documentation#action=openDocument&content=catcontent&ct=prodDoc

Developerworks articles: http://www.ibm.com/developerworks/lotus/products/connections/

Luis’s blog: http://www.lbenitez.com

Humbly, my blog: IBMRockStar.com

http://www-10.lotus.com/ldd/lcwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Connections+4.0+documentation




http://www.ibm.com/developerworks/lotus/products/connections/

http://www.ibm.com/developerworks/lotus/products/connections/

http://www.lbenitez.com/

http://www.lbenitez.com/

185

Then there are outstanding “human” resources

Besides the Connections team in the labs of course…

Besides the product management team…Luis Benitez being the most prolific…

Put on your Google hats and seek out writings and samples by these awesome community contributors (for development…):

– David McMullin (IBM)– Niklas Heidloff (IBM, also OpenNTF)– Xujin Liu (IBM)– Chuck Connell– Sjaak Ursinus (@sursinus) (IBM Champion!)– Mikkel Heisterberg (@lekkim) (IBM Champion!)

186

Relevant IBM Connect 2013 sessions

In no particular order– BOF403 : IBM Connections 4: Enhancement Ideas from Connections Users– INV211 : The New Social Business Paradigm with OpenSocial– AD104 : IBM Connections Activity Stream Integration– AD105 : Customizing and Extending IBM Connections– BP209 : In The Land of Social Apps, the API is King– JMP202 : Extending IBM Connections to Build an Exceptional Social Learning

Platform– JMP102 : Extending Your App Arsenal With OpenSocial– BPDD305 : Making Your Notes/Domino Applications Social

187

The Path to “Getting It”

Well, you’re here so that’s a good start

Terminology – taxonomy, glossary, language, wording.

Context – without which all the terminology in the world is a bit useless!

Framing – the ability to envision solutions in context, then describe them in language that can be understood by both technical and nontechnical people

188

Questions?

Rob’s contact info:– [email protected]– @IBMRockStar– IBMRockStar.com

Jerald’s contact info:– [email protected]– @SociallyCurious– SociallyCurious.com

mailto:[email protected]

mailto:[email protected]

189 © 2013 IBM Corporation

Legal disclaimer

© IBM Corporation 2013. 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.

Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

Becoming an IBM Connections Developer

Technology

Transcript of Becoming an IBM Connections Developer