Becoming an IBM Connections Developer

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

Jerald Mahurin | SNAPPS | @SociallyCurious

© 2013 IBM Corporation

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

2

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

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™

5

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!

7

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

8

The language of Connections Development

 Common language for a Domino
developer:
– HTML
– JavaScript
– CSS  Middle ground (you might be familiar):
– Eclipse – WebSphere Application Server
– Branding – Integrated Solution Console
– REST API
– Activity Streams  Less common:
– oAuth
– OpenSocial
– Shindig
– iWidget
– OSDE

9

The language of Connections Development

10

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/

11

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

12

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

13

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

14

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

15

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

16

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

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.c
om/svn/update-
site/site.xml

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

 Select “OpenSocial”

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
Change Perspective
 To see our OSDE
environment, we
have to change to
the OpenSocial
“perspective” in
Eclipse

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

New menu items

 Shindig, a fun name and
a container
 iGoogle, which is familiar
but 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
tempting..

Well this looks
interesting...

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

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

Does our code run?

 Now that we have Right-click gadget.xml
a project we can
try to run it as a
Java Application
 Right click the
gadget.xml file
again, Run as –
Java Application

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

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.

What you see if your admin doesn’t like you

60

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

61

Testing an embedded experience widget

 From the bootstrap page,
if we “Load” a widget Load Post
that will make it
available to use or
perform some action
 Loading the embedded
experience widget
lets you click a button
to post to your activity
stream

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
Load
 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

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

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…

69

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

70

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.

71

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.

72

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

73

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

74

twitterSearchWidget.xml

Identify resources
Provide attributes

Define view mode

Define edit mode

75

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

76

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

77

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

78

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

79

Select the new TwitterSearch widget

80

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 the
 Choose cell scope
Environment-
Shared Libraries
and choose the
cell scope

Choose cell-level scope
Set 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

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)

92

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

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/ecli
pselabs.org/restclient- 1
tool/trunk/eclipse/update/ 2
 (If you’re into subversion and
want to see the source you
can – not in the scope here…)

Once installed, it’s well-hidden!

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

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

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

113

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

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

117

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!

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_n
ame.ear}/{application_name.war}/nav/templates/{files}
 Mine looks something like this:
/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/connection
swwCell01/Common.ear/connections.info.war/nav/templates/header.jsp

119

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

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

124

Make customizations with chosen editor

Shown here changing the logo text to corporate name

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

127

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

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)

135

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

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

147

How to find out what styles you can change?

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

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

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

162

Example of integrating the business card in static HTML

163

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)

164

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

165

Business card options

 Two presentation types
– Popup
– Inline

 Two basic options
– Lookup by ID
– Lookup by email

166

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

167

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">

168

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>

169

Default styles may cause problems in a web page/application

170

Find and capture styles with Firebug or Developer Tools

171

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

172

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>

173

Business card is re-styled to complement the page

174

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

175

Add code to page body (Inline style)

176

Popup business card by email address

177

Popup business card by user ID

178

Search for user profile

179

Use the Firebug DOM tab to browse DOM objects in memory

180

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

182

Resources

 The official doc: http://www-
10.lotus.com/ldd/lcwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Connection
s+4.0+documentation#action=openDocument&content=catcontent&ct=prod
Doc
 Developerworks articles:
http://www.ibm.com/developerworks/lotus/products/connections/
 Luis’s blog: http://www.lbenitez.com

 Humbly, my blog: IBMRockStar.com

184

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!)

185

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

186

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

187

Questions?

 Rob’s contact info:
– rnovak@snapps.com
– @IBMRockStar
– IBMRockStar.com

 Jerald’s contact info:
– jmahurin@snapps.com
– @SociallyCurious
– SociallyCurious.com

188

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.

189 © 2013 IBM Corporation

Becoming an IBM Connections Developer

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Becoming an IBM Connections Developer

Similar a Becoming an IBM Connections Developer (20)

Último

Último (20)

Becoming an IBM Connections Developer