Becoming an IBM Connections Developer


Published on

A ridiculously long presentation from IBM Connect 2013, formerly Lotusphere, from Rob Novak @IBMRockStar and Jerald Mahurin @SociallyCurious on the tools, language, and methods we used to transition from Domino, Quickr and overall web developers to becoming IBM Connections 4.0 developers. From the abstract:

With IBM Connections 4.0, IBM has released the most important new platform - yes platform - for social business development since the Notes client. As a Domino developer, you have excelled. Now, faced with an entire new glossary of terms, new concepts in customization and development, and a whole new set of tools, it could take some time to get up to speed. This session will help you cut weeks off that ramp-up time by showing you exactly what a Connections development environment looks like. We'll cover how to choose your tools and toolkits as well as configuration for development and testing. From the fundamentals of skill gap identification to real working samples, this session is sure to give you a huge head start.

Published in: Technology
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Becoming an IBM Connections Developer

  1. 1. SHOW301 Becoming an IBM Connections Developer: Lessons from the Field Rob Novak | SNAPPS | @IBMRockStar Jerald Mahurin | SNAPPS | @SociallyCurious© 2013 IBM Corporation
  2. 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 ─ Robs 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 Corporation2
  3. 3. Agenda3
  4. 4. 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. 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™5
  6. 6. 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
  7. 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!7
  8. 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 people8
  9. 9. 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 – OSDE9
  10. 10. The language of Connections Development10
  11. 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:
  12. 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.org12
  13. 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 Shindigs goal is to allow new sites to start hosting social apps in under an hours worth of work. – We’ll dig deeper into Shindig later in the session – in fact we’ll install and use it13
  14. 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 –
  15. 15. So let’s discuss those hard words…OSDE OpenSocial Development Environment – An Eclipse plugin from 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 session15
  16. 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 programmatically16
  17. 17. 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
  18. 18. OpenSocial Evolution  OpenSocial – MySpace – iGoogle (Google Gadgets) – Lots of other networks – Time passing – Big companies saying “hmm, that’s actually pretty good”  – 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
  19. 19. OpenSocial Development  It’s HTML, JavaScript, REST, XML, JSON and Java  Google ran development under iGoogle Developer Program, then moved to  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
  20. 20. OSDE   Requires: Eclipse (classic recommended) and a JVM
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. It’s the only option, we might as well take it  Select “OpenSocial”
  25. 25. Read this carefully
  26. 26. OMG  “Unsigned content” is actually pretty common in the open source, free world  In this case, I think we’re OK to proceed
  27. 27. 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
  28. 28. Ooh. Something new.  OpenSocial is now one of the perspective choices
  29. 29. 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
  30. 30. Ah, some dressing
  31. 31. New menu items  Shindig, a fun name and a container  iGoogle, which is familiar but going away  Sample data!
  32. 32. 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...
  33. 33. 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
  34. 34. Start our local Shindig server in Eclipse  Start Shindig server  Ooh, look at all the new tabs!
  35. 35. 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
  36. 36. Let’s start an OpenSocial project  New – Project – OpenSocial  Provide the project with a name as shown
  37. 37. 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)
  38. 38. 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
  39. 39. Let’s do this too  Make the same choices for the Profile view
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. Hey it works!
  44. 44. 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
  45. 45. And...voila. Results.  Click on “Fetch people and friends” and our gadget writes out a list of our (conrad.doe’s) friends
  46. 46. 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
  47. 47. Give it a different name  We’re creating another project, so just give it a different name from the first one, click Next
  48. 48. Accept these defaults  The project will want to create some default folders, leave them as is
  49. 49. Switch perspectives  Eclipse will ask you if you want to switch perspectives as it finishes the project, feel free to click Yes
  50. 50. A wider view...
  51. 51. Hey, Java! Notice the port...
  52. 52. 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
  53. 53. 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…
  54. 54. Not too bad Changed port to 8123 Run application again, now we have results
  55. 55. 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
  56. 56. 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:  And...other sessions here at Connect 2013
  57. 57. Deploying OpenSocial gadgets  Technologies used: – JavaScript, XML, HTML, Java  Tools: – Eclipse + Aptana + Subversion + OpenSocial Development Environment (OSDE) – Developer mode (bootstrap page)
  58. 58. Developer Mode  Ask an admin to follow the instructions to enable developer mode:  They will say no.  Ask again, nicely.
  59. 59. Developer bootstrap test page
  60. 60. What you see if your admin doesn’t like you60
  61. 61. What this immediately reminds me of, but I’m old61
  62. 62. 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
  63. 63. 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.
  64. 64. 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
  65. 65. Change some settings  Don’t worry if they don’t persist yet  As an admin, add the widget to the homepage:
  66. 66. 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
  67. 67. Add widget to My Page  Give it a go...the admin can add a widget to the page using the Customize menu
  68. 68. 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. 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…69
  70. 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 markup70
  71. 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.71
  72. 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.72
  73. 73. Developing a Widget Starting from scratch? Never. Many iWidgets available for download ( 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 Connections73
  74. 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 file74
  75. 75. twitterSearchWidget.xml Identify resources Provide attributes Define view mode Define edit mode75
  76. 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 standpoint76
  77. 77. Ensure the XML file is addressable – if not, check permissions!77
  78. 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="" uniqueInstance="true"/> Restart Connections78
  79. 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 gadgets79
  80. 80. Select the new TwitterSearch widget80
  81. 81. Enjoy…81
  82. 82. 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
  83. 83. 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)
  84. 84. 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
  85. 85. 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
  86. 86. 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
  87. 87. Choose cell-level scopeSet classpath to location of JAR file Our classpath Important do not select!
  88. 88. Set up the Application(s)  Our SPI works with the Files application  Choose Applications – WebSphere enterprise applications - Files
  89. 89. Locate Shared Library References
  90. 90. Set up Shared Libraries  Select Files
  91. 91. 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. 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)92
  93. 93. 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
  94. 94. 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)
  95. 95. You could do what the doc says...
  96. 96. However some readers will intercept feeds
  97. 97. Suggested tools  Firefox: RESTClient  Chrome: Advanced REST Client  For more advanced work: – Selenium IDE – HTMLUnit – JWebTest – Canoo WebTest – Apache JMeter
  98. 98. 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
  99. 99. Response Headers  To receive a response, enter a URL and the GET method, and click SEND
  100. 100. Raw Response
  101. 101. Highlighted Response
  102. 102. Response Body
  103. 103. 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
  104. 104. Redirect, Status, and Headers  Header data returned from the same call is fairly verbose, good for troubleshooting
  105. 105. Response - Raw or XML  In some instances, if JSON is returned there will be a JSON tab
  106. 106. 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...
  107. 107. 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: 1 tool/trunk/eclipse/update/ 2  (If you’re into subversion and want to see the source you can – not in the scope here…)
  108. 108. Once installed, it’s well-hidden!  Window -> Show View -> Other -> REST Client -> RestClient Tool
  109. 109. Give it some room
  110. 110. Execute our REST call
  111. 111. 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
  112. 112. 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. 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 command113
  114. 114. Managing Remote Files the Hard Way: Terminal
  115. 115. 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
  116. 116. First time SSH access may prompt to accept RSA key
  117. 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 week117
  118. 118. 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. 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_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/
  120. 120. Navigate to your target file
  121. 121. Identify the file you want to customize
  122. 122. 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
  123. 123. 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. 124. We are going to change the text logo in the header.jsp124
  125. 125. Make customizations with chosen editor
  126. 126. Shown here changing the logo text to corporate name
  127. 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 like127
  128. 128. 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
  129. 129. Find the customization locations in ISC
  130. 130. Jackpot: your customization path
  131. 131. You may need to create directories…
  132. 132. Copy the JSP file in the templates folder from your IDE
  133. 133. Back to ISC: Stop & Start the Common application
  134. 134. Delete your browser’s cache and refresh
  135. 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)135
  136. 136. 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
  137. 137. Create a file called “custom.css” in your IDE project
  138. 138. Bring your logo into your IDE environment if you like
  139. 139. Navigate to the themes folder under customization on theserver
  140. 140. Create a folder called defaultTheme (mind the case) Note that the name of the folder is important for our purposes
  141. 141. Here’s were you will put your new custom CSS file
  142. 142. Create an images folder for the logo
  143. 143. Copy the logo graphic into the image folder
  144. 144. And finally copy the CSS file into the defaultTheme folder
  145. 145. Start and Stop the Common application in ISC
  146. 146. If all goes well you will have your own logo
  147. 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 overhaul147
  148. 148. How to find out what styles you can change?
  149. 149. You must install and enable Firebug (or other developer tools)
  150. 150. Developer Tools in Chrome
  151. 151. What the inspect view looks like in Chrome developer tools
  152. 152. Find the element you want to change and inspect the stylerules to make “live” changes
  153. 153. Changing the border from blue to red for #lotusBanner
  154. 154. The background color is by default blue, we like red (#ff0000)
  155. 155. Class lotusRightCorner creates a 1px blue line where we needto also change this to red
  156. 156. Now all blue elements are out of the header
  157. 157. 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!
  158. 158. Replace the old file with the new updates
  159. 159. You guessed it! Stop and start the Common application
  160. 160. Delete browser cache and refresh to see the changes
  161. 161. 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
  162. 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 dynamically162
  163. 163. Example of integrating the business card in static HTML163
  164. 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)164
  165. 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 Application165
  166. 166. Business card options  Two presentation types – Popup – Inline  Two basic options – Lookup by ID – Lookup by email166
  167. 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 address167
  168. 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">168
  169. 169. Add the JavaScript library to <HEAD> tag <HEAD> <script type="text/javascript" src=" /semanticTagService.js?loadCssFiles=true"></script> </HEAD>169
  170. 170. Default styles may cause problems in a web page/application170
  171. 171. Find and capture styles with Firebug or Developer Tools171
  172. 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 CSS172
  173. 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=""></script></HEAD>173
  174. 174. Business card is re-styled to complement the page174
  175. 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 choices175
  176. 176. Add code to page body (Inline style)176
  177. 177. Popup business card by email address177
  178. 178. Popup business card by user ID178
  179. 179. Search for user profile179
  180. 180. Use the Firebug DOM tab to browse DOM objects in memory180
  181. 181. 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
  182. 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, speaking of which…  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 Solutions182
  183. 183. 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
  184. 184. Resources  The official doc: http://www- s+4.0+documentation#action=openDocument&content=catcontent&ct=prod Doc  Developerworks articles:  Luis’s blog:  Humbly, my blog: IBMRockStar.com184
  185. 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!)185
  186. 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 Social186
  187. 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 people187
  188. 188. Questions? Rob’s contact info: – – @IBMRockStar – Jerald’s contact info: – – @SociallyCurious – SociallyCurious.com188
  189. 189. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.