DO Try This at Home! Extend IBM Connections using IBM Worklight
Speakers:
Handly Cameron, Prolifics
Smriti Kapuria , Prolifics
Abstract: In this session you will learn how to extend IBM Connections and build a mobile app using IBM Worklight. Come see a live demo as we show you how to construct a mobile app and make use of the Social Business Toolkit, OpenSocial, and REST APIs. Experts from Prolifics will cover techniques for integrating with IBM Connections and mobile app construction. We will walk you through the steps of developing a mobile app in Worklight and using Worklight adapters to add social features through the Connections API. After this session, you will be ready to start building your own app. Both Worklight Studio and IBM Greenhouse are free to use, so you CAN try this at home!
2. Who We Are
Handly Cameron
– Enterprise Architect, Prolifics Software Group
– Agile, Developer, Architect, Photographer, IBM Champion
– Master of Madness, Herder of Chaos Monkeys (i.e. father of 3)
– @handly, handly.org
– hcameron@prolifics.com
Smriti Kapuria
– Technology Manager, Prolifics User Experience Practice
– UX designer, Developer, Architect, Really Cool Ceramicist
– skapuria@prolifics.com
2
3. No products were harmed in the making of this session
Products and resources used in this presentation:
IBM Worklight® and IBM Worklight Studio®
Eclipse™
IBM Connections®
Apache Tomcat™
IBM Social Business Toolkit®
IBM Greenhouse®
IBM Mobile Test Workbench®
IBM WebSphere® and IBM WebSphere Liberty Server®
IBM Cast Iron®
… now you won‟t have to see tons of ® and ™!
3
4. Are You Ready?
YES!
You don‟t need to know Connections or Worklight to be here.
Slides and code downloads for this session can be found at: http://handly.org/show302
The Additional Resources at the end of this presentation has links to some great learning
materials to learn more about Connections and Worklight architecture, mobile development,
and related topics.
4
5. Agenda
After this session, you will be able to:
Discuss real world uses of extending IBM Connections to mobile apps
Know the standard components of IBM Connections and IBM Worklight
Understand when to use Connections REST APIs, OpenSocial APIs, and the IBM Social
Business Toolkit
Install your own IBM Worklight Studio development environment
Build an IBM Worklight mobile application integrated with Connections APIs
5
7. Business Case
Mobile Project Coordination
Business Need
The Design Services department is using Activities in IBM Connections to track
Job Requests and Workflow Management.
New requests are added to an Activity and then assigned to a person on the team
to work on.
Team managers want to be able to quickly view and assign incoming design
requests from their mobile device.
Solution:
An IBM Worklight application and mobile web app proof of concept was developed
to provide request management through integration with IBM Connections.
7
8. Project Calendar
Mobile Project Coordination
The application opens to a calendar view that
provides several options for navigating the calendar,
and highlights days with project due dates.
Technical Design
A Worklight Adapter provides integration with the
Connections REST APIs.
Authentication via a server identity for the PoC
UI is JQuery within the Worklight app shell
8
9. Project Details
Mobile Project Coordination
Clicking on a date in the calendar shows
a list of designers assigned to the project
due on that day.
9
10. Incoming Requests
Mobile Project Coordination
Clicking on Incoming Requests on the
main page displays the list of requests
that need to be reviewed and assigned.
10
11. Request Details
Mobile Project Coordination
Selecting a project request provides a
detailed description with options to
review attached files and accept or reject
the request.
11
12. Accept Request form
Mobile Project Coordination
Accepting a project allows the user to
assign designers, click through to see
detailed availability, assign deadlines,
and save the changes to Connections.
12
16. IBM Connections
Orientation
Profiles
Home page
Find the people you need
See what's happening across your social network
Communities
Social Analytics
Work with people who share common
roles and expertise
Discover who and what you don‟t know via
recommendations
Files
Micro-blogging
Post, share, and discover documents,
presentations, images, and more
Reach out for help or share news with
your social network
Wikis
Bookmarks
Create web content together
Save, share, and discover bookmarks
Activities
Blogs
Organize your work and tap your professional
network
Present your own ideas, and learn from others
Forums
Exchange ideas with, and benefit from
the expertise of others
16
Mobile
Access Connections anywhere, anytime
with mobile & tablet access
17. IBM Connections Mobile Application
Orientation
IBM supplies a very nice mobile application
for Apple, Android, and Blackberry devices
Advantages
Access all of the core social features of
Connections
Secure access for your users
Extendable with links and add-ons
… so why would you want custom mobile
apps integrated with Connections?
17
18. Use Cases for building / integrating with your own app
Orientation
Enhance your app
Standalone App Ideas
Connections has many features that could
add value into your app.
The full IBM Connections app is great, but
sometimes you want to focus quickly…
Display profile images and information
Person Finder
Update Connections status and activities
Leverage the Connections social graph
to link people within your app
Reference and update files
Other task specific „micro-apps‟
18
Feed monitor
To Do – Quickly reference and manage
your Connections action list
Calendar integration – view and connect
with people in your meetings and calls
Ideation – quick voting, submit new
ideas, dashboards
19. Integration Options
Orientation
There are multiple APIs and options for extending IBM Connections at an application level.
IBM Connections Mobile App
IBM Connections REST API
IBM Connections OpenSocial API
IBM Social Business Toolkit SDK
19
20. IBM Connections REST APIs
Orientation
Features
Access and update Connections applications including Activities, Blogs, Bookmarks,
Communities, Files, Forums, Profiles, Wikis, Home Page, and Search
Uses Atom feeds to return data in a common XML format
Supports basic, form, and Oauth authentication
Examples
Activities: https://activities.enterprise.example.com/activities/service/atom2/completed
Blogs: http://blogs.enterprise.example.com/blogs/writer/feed/comments/atom
Bookmarks: https://dogear.enterprise.example.com:9443/dogear/atom/popular
Communities: http://communities.enterprise.example.com:9080/communities/service/atom/communities/my
Home page: https://home.enterprise.example.com:9443/forums/atom/mysearch/results? query="blue"
Profiles: https://profiles.enterprise.example.com:9443/profiles/atom/reportingChain.do?userid=7fb4abl0-8f0a-1028-8b5a-db08933b51b2
20
21. IBM OpenSocial APIs
Orientation
Implementation of the OpenSocial Activity Stream, Microblogging, and People APIs.
Features
Open standard API calls, based off current user stream
Returns JSON (JavaScript Object Notation) data
Supports basic and Oauth authentication
Examples
Activities: https://activities.enterprise.example.com/activitystreams/@me/@all/activities
Blogs: http://blogs.enterprise.example.com/activitystreams/@me/@all/blogs
Bookmarks: https://dogear.enterprise.example.com:9443/activitystreams/@me/@all/bookmarks
Communities: http://communities.enterprise.example.com:9080/activitystreams/@me/@all/@communities
Status Updates: https://home.enterprise.example.com:9443/activitystreams/@me/@all/@status
Profiles: https://profiles.enterprise.example.com:9443/activitystreams/@me/@all/@people
21
22. IBM OpenSocial Example With Greenhouse
Orientation
https://greenhouse.lotus.com/connections/opensocial/rest/activitystreams/@me/@all/activities
22
23. IBM Social Business Toolkit
Orientation
Makes the APIs much easier!
Single source for developing integrations
and leveraging IBM SmartCloud for Social
Business and IBM Connections.
Provides a set of extensible tools and
resources for developers who want to
incorporate social capabilities into their
applications and business processes.
Get it here:
http://www.ibm.com/cloud-computing/social/us/en/toolkit or
https://www.ibmdw.net/social
… click Docs to find the Download the SDK link.
23
24. IBM Social Business Toolkit – Let’s go to the Playground!
Orientation
The SBT Playground is a web-based
live demonstration of the JavaScript
and Java APIs that are exposed by
the SDK. The Playground contains a
large set of code snippets and
examples that you can customize and
use in your own applications.
Connect to Greenhouse, Smartcloud,
or a custom Domino or Connections
environment.
You can also install a local playground
Go to http://bit.ly/sbtplayground
24
26. IBM Social Business Toolkit
Orientation
Sweet – a JavaScript API? I‟ll just plug that into my hybrid app!
Not so fast …
The SBT SDK has a JavaScript API, but the core is still Java
classes, intended to run on a server such as Tomcat or IBM
WebSphere. (and many phones don‟t even have Java)
It is a good thing you just learned about this cool IBM Worklight
server, which happens to run on WebSphere and provides server
adapters to integrate with mobile applications!
26
28. Install Worklight Studio – For Free!
Getting Started
Worklight Studio is a free license from IBM!
Similar to IBM Domino Designer, you get the
full development tool to build and test apps,
but will need a license for production.
Three easy steps:
1. Go to eclipse.org and download the
latest Eclipse IDE for Java EE Developers
2. Load Eclipse and open
Help – Eclipse Marketplace…
28
29. Install Worklight Studio – For Free!
Getting Started
Three easy steps, continued:
3. Search for “Worklight” and install the
IBM Worklight Developer Edition V6.1
Tips:
When installing a new version of Worklight
Studio, use a new copy of Eclipse in a new
directory.
You can also install from your IBM Passport
Advantage site.
The IBM Mobile Test Workbench is also free!
29
30. Get an IBM Greenhouse account
Getting Started
Go to https://greenhouse.lotus.com to sign up.
IBM Greenhouse:
Provides demos of IBM collaboration
software. Go exploring!
Includes a full IBM Connections environment
Is a demo site, not production. Expect
frequent maintenance windows and do not
store sensitive information there.
30
32. Let’s build an app!
Our example will have these features:
Display your current activity stream from Connections.
Display information from your Connections profile.
Let you to update your status on in Connections
We will use:
Worklight Studio application development
Dojo Mobile
IBM Connections REST API
IBM Social Business Toolkit
32
33. Create a new project in Worklight Studio
1.
33
Click on the Worklight icon
and select Worklight Project.
2.
Enter a project name and click Next.
34. Create a new project in Worklight Studio
3.
34
Enter an Application name and click
Configure JavaScript Libraries
35. Create a new project in Worklight Studio
4.
Select Add Dojo Toolkit
5.
Click Finish on the JavaScript Libraries dialog.
6.
Click Finish on the New Worklight Project dialog.
7.
Wait a minute or so while Worklight builds your
new project.
Tips:
Worklight 6.1 includes Dojo Mobile 1.9 libraries.
Worklight can optimize which Dojo libraries are
included in your application.
You can also choose to include JQuery Mobile or
Sench Touch libraries that you have downloaded.
35
36. Worklight Project Structure
The Worklight Project wizard will have created a new
project structure for you.
Key Areas:
index.html – This is the core page for your app, acting
as the UI and the single page structure used by
Worklight apps.
js folder – Contains client-side Javascript that controls
the app UI, calls to Worklight adapters, and
adapters folder – Contains server-side code to
coordinate authentication and to send and receive data
with back end systems.
36
37. Worklight Rich Page Editor
The center of the Worklight IDE will be
displaying the Rich Page Editor with the
default index.html opened.
Tips:
Change the orientation, device type, and
zoom level. For this session, we will change
to iPhone 5s for the device type.
In split mode, click in the Design pane to
select UI elements and place the cursor in
the Source pane in the appropriate code.
When selecting elements in the Design
pane, popup controls will help with adding
new list items or linking navigation.
Many developers use the Source tab at the
bottom for faster coding.
37
38. Worklight Components Palette
When the Rich Page Editor is open, the Palette view on the right of
the IDE provides drawers of HTML, DOJO, and other components that
can be dragged into your design.
Tips:
Like the mobile navigation wizard, dragging a component in from
the Palette will automatically add the needed Dojo (or JQuery) code
into your project JavaScript initialization sections.
Components can be dragged from the Palette to either the Design
or Source panes.
Worklight provides property completion and other support for Dojo
components. Detailed documentation can be found at
http://dojotoolkit.org/reference-guide
38
39. Adding a mobile view
1.
Find the Mobile Navigation tab in the lower left of
the Eclipse workbench and click the
icon to add
a new mobile view.
2.
Select Dojo Mobile View from the popup menu:
39
40. Select a Worklight Mobile View Pattern
Worklight provides UI patterns to speed development
by providing views common to many mobile apps.
3.
Scroll down to third row and select Rich List
4.
Click Next >
Tips:
Change the orientation, device type, and zoom level
to see how the pattern looks with different styles.
For complex projects, create views as external page
fragments (html files) for easier code coordination.
The UI Pattern wizard can be used to create your
own application view patterns for quick reuse.
40
41. Name your view
5.
Enter a descriptive View Id, such as “mainView”
6.
Select Set as default
7.
Click Finish to insert the view code into your
index.html file.
41
42. Home Page
The center of the Worklight IDE will be
displaying in the Rich Page Editor.
42
43. Add a Header
1.
Find Heading in the Dojo Mobile Widgets
Palette.
2.
Drag the Heading over to the Rich Text
Editor and drop at the top of your lists.
3.
Double click on the Heading and type in a
name for your heading.
43
44. Rename the list items
1.
Double-click each of the Item labels and
the Item descriptions and type in names
for each function.
2.
We won‟t use Item 4 or 5, so you can click
on each list item and hit Delete.
3.
Save index.html
(It is always a good idea to save often!)
44
45. Add a detail view
This time, we add an empty view to the app so we can
add components that are not in a provided template.
1.
Click the
2.
Select Dojo Mobile View from the popup menu:
3.
Select Create empty view
4.
Click Next >
45
icon again to add a new mobile view.
46. Add a detail view
5.
Enter “activityStreamView” as the View Id.
6.
Click Select… next to the Linked From field.
46
47. Add a detail view
7.
Select ListItem “Activity Stream”
8.
Click OK.
47
49. Add a detail view
Your view will be created and display
in the Rich Page Editor.
Don‟t worry! – it is supposed to be
blank because you have not added
any components.
49
50. Set up the Activity Stream detail view
1.
Add a Heading as before from the Dojo
Mobile Widgets Palette, name it “Activity
Stream”.
2.
Select the Heading and click on the
Properties pane on the lower right.
3.
Select the Dojo tab.
4.
Enter Back for the button label.
5.
Select mainView for the “Move to” value.
50
51. Set up the Activity Stream detail view
6.
Find EdgetoEdgeList in the Pallete.
7.
Drag an EdgetoEdgeList to your view
below the Header.
51
52. Activity Stream view
In the source view, you will see the HTML code for your new view.
<div data-dojo-type="dojox.mobile.View" id="activityStreamView">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Activity Stream',back:'Back',moveTo:'mainView'"></div>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Item'"></div>
</div>
</div>
The Items for the Activity Stream will be dynamically added, so we
will leave the view as-is for now.
52
53. Set up the Profile detail view
This time, we are going to add a view manually.
1.
Find the activityStreamView in the Source
view and add an extra line after the last
</div>.
2.
Find a ScrollableView in the Dojo Mobile
Widgets Palette.
3.
Drag the ScrollableView component to the
blank line under the activityStreamView.
53
54. Set up the Profile detail view
4.
Enter “profileView” for the Id
5.
Select Include heading
6.
Enter the following Details:
Label:
Profile
Back button label: Back
Back button target: mainView
7.
54
Click Finish
55. Link navigation to the Profile detail
Now you need to link from the home page.
1.
Find the <div> in the Source view for the
Profile item in the mainView.
2.
Right click on dojox.mobile.ListItem and
choose ListItem – Link to Mobile View.
3.
Select profileView for the Inline mobile
view
4.
Click Finish
Note: This dialog also lets you link to view code
in an HTML fragment and modify the transition
animation used for the navigation.
55
56. Get back to the Profile detail view
After setting up the navigation from the
mainView, you will find that the Rich Page
Editor is not focused on your Profile page.
To regain focus, double-click on the
profileView in the Mobile Navigation pane on
the lower right of Worklight Studio.
56
57. Set up the Profile detail view
1.
Add a table as follows in the profileView <div>.
2.
Include id attributes in the second column. You will use those to update the field with data.
57
58. Set up the Status Update detail view
Add the Status Update view manually.
1.
Under the profileView code you just
added, add an extra line after the last
</div>.
2.
Find a ScrollableView in the Dojo Mobile
Widgets Palette.
3.
Drag the ScrollableView component to the
blank line under the profileView.
58
59. Set up the Status Update detail view
4.
Enter “updateView” for the Id
5.
Select Include heading
6.
Enter the following Details:
Label:
Update Status
Back button label: Back
Back button target: mainView
7.
59
Click Finish
60. Get back to the Update Status detail view
After setting up the navigation from the
mainView, you will find that the Rich Page
Editor is not focused on your Update Status
page.
To regain focus, double-click on the update
View in the Mobile Navigation pane on the
lower right of Worklight Studio.
60
61. Set up the Update Status detail view
1.
Double-click under the Update Status
Heading and enter the following text:
What are you working on?
2.
Find this text in the Source view and add a
<br/> tag after it.
3.
Find ExpandingTextArea in the Pallete.
4.
Drag an ExpandingTextArea to your view
after the <br/> tag.
61
62. Set up the Update Status detail view
1.
Add id="status" style="width:95%” to the textarea tag that was added.
Note: It is important that you drag the component onto your application from the Palette as you
did in the last step. Worklight Studio automatically updates the JavaScript statements to include
the correct components. If you add a component to your page by just entering code, you will
need to update the requires statement in main.js manually. This only needs to be done once for
each component type.
2.
Find Button in the Dojo Mobile Widgets Pallete and drag it under the textarea.
3.
Name the button “Post”
4.
Add onClick="updateStatus(document.getElementById('status').value)” to the button tag.
62
63. Set up the Update Status detail view
1.
Find Button in the Dojo Mobile Widgets Pallete
and drag it after the textarea.
2.
Name the button “Post”
3.
Add
onClick="updateStatus(document.getElement
ById('status').value)” to the button tag.
63
64. Link navigation to the Status Update detail
Now you need to link from the home page. Just update the code directly this time.
1.
Find the <div> in the Source view for the Status Update item in the mainView.
2.
Change the # in the moveTo property to “updateView”
64
65. Running the application
Before you start building the back end integration, let‟s verify that the application is running so far.
1.
Add a table as follows in the profileView <div>.
2.
Include id attributes in the second column. You will use those to update the field with data.
65
66. Deploying the application
Before you start building the back end
integration, let‟s verify that the application is
running properly on the development server
included in Worklight Studio.
1.
Right-click on the application folder under
the apps directory in your project.
2.
Select Run As – Run on Worklight
Development Server.
66
67. Server deployment
Worklight Studio will build your application and deploy it to the
embedded Worklight server.
Once the server is done, you will see a server log similar to the
following in the Console view.:
67
68. Launching the Worklight Console
1.
Right-click on your project and select Open
Worklight Console.
2.
The Worklight Console will be displayed in
the browser defined in your Eclipse settings.
68
69. Preview the Application
You can now click around the application to verify that navigation to and from each screen and your layouts
are working properly.
69
71. Back End Integration
Worklight Adapters:
Defined using simple XML syntax, and easily
configured with a JavaScript API. Data is converted
to JSON for all adapter types.
HTTP, SQL, JMS, Cast Iron, Node.js adapter types
Query
Provides authentication, including single sign on and
offline access control
Alternative: Conventional XHR requests
Direct REST calls in the mobile browser framework
Useful for independent client apps and third party
services, but limits the enterprise benefits above
71
Update data
3
2
A single point of access to back end systems; can
aggregate data from several sources
Logging, auditing, and analytics
Response
SQL
Node
JMS
SOA
P
CAST IRON
REST
Worklight
1
Invoke
adapter
procedure
Data/Result
as JSON
4
73. Create a new Worklight Adapter in Worklight Studio
1.
73
Click on the Worklight icon and select
Worklight Adapter.
2.
Select your Project Name and select an Adapter
type of HTTP Adapter.
74. Create a new Worklight Adapter in Worklight Studio
3.
74
Enter an Adapter name and click
Finish
75. Worklight Adapter configuration
Worklight Studio will create the adapter
and open up the related XML file.
This file is used to configure
connectivity to the back end application
and to declare the procedures exposed
to applications and other adapters.
75
76. Create a new Worklight Adapter in Worklight Studio
4.
Click on Connection Policy
5.
Enter the following Details:
Protocol: https
Domain: greenhouse.lotus.com
(or to your Connections server)
Port:
6.
76
443
Click Add…
77. Create a new Worklight Adapter in Worklight Studio
7.
Select Authentication
8.
Click OK.
77
78. Create a new Worklight Adapter in Worklight Studio
9.
Enter your User name and
Password for the Connections
environment.
10. Click Add…
Notes:
The “1 error detected” message is
expected. We will fix that on the
next slide.
We are using a single user account
for this session. In production, you
normally would use End User
authentication.
78
79. Create a new Worklight Adapter in Worklight Studio
11. Select Basic
12. Click OK.
79
80. Create a new Worklight Adapter in Worklight Studio
13. Select
Adapter “ConnectionsAPI”
on the left.
14. Click Add…
80
81. Create a new Worklight Adapter in Worklight Studio
15. Select Procedure
16. Click OK.
81
82. Create a new Worklight Adapter in Worklight Studio
17. Enter “getActivityStream” for the
Name of your procedure.
18. Save and close the
ConnectionsAPI.xml file.
Notes:
The Connect as setting is used to
switch to end user authentication.
82
83. Create a new Worklight Adapter in Worklight Studio
19. Open the ConnectionsAPI-impl.js JavaScript file.
All code and a complete
Eclipse project for this
session are available at
http://handly.org/show302
20. At the bottom of the file, add this procedure:
function getActivityStream(){
var input = {
method : 'get’,
returnedContentType : 'xml’,
path: '/connections/opensocial/basic/rest/activitystreams/@me/@all/@status?rollup=true&format=atom’
};
return WL.Server.invokeHttp(input);
}
21. Save the file.
83
84. Wait a minute!
Where did you get that crazy long OpenSocial URL??
Two choices:
1.
Read about the Open Social API in the IBM Connections InfoCenter, and try a bunch of different options,
or …
2.
Cheat and look at the bottom of your Connections page!
The link under that “Feed for these entries” is:
https://greenhouse.lotus.com/connections/opensocial/basic/rest/activitystreams/@me/@all/@
status?rollup=true&format=atom
Look familiar?
84
85. Deploying your Worklight Adapter
1.
Right-click on the ConnectionsAPI folder and
select Run As – Deploy Worklight Adapter.
2.
Wait a few seconds until “Adapter build and deploy finished”
appears in the Console view.
85
86. Testing your Worklight Adapter
1.
Right-click on the ConnectionsAPI folder and
select Run As – Invoke Worklight Adapter.
2.
Select the Procedure name getActivityStream
3.
Click Run
86
87. Testing your Worklight Adapter – View Results
Worklight displays the JSON results from your
adapter in the default Eclipse browser.
Notes:
Worklight automatically converts the XML
returned into JSON, which is easier to parse
using JavaScript in your application.
Watch the Console view in Worklight Studio
to see any error messages or output logging
you included in your adapter.
You can use an external browser by
changing the settings in the Eclipse
preferences.
Use a browser plug-in, such as JSONView
for Chrome, to see the results formatted for
easier reading.
87
88. TIP: Using Worklight server logging
How to turn on server log output in your Worklight Studio:
1.
In Project Explorer, expand the Worklight Development
Server and open server.xml
2.
Change the Console log level to INFO and save
server.xml
3.
The server will detect
the change and
automatically update the
the log level.
Usage:
In your JavaScript adapter,
use this logging code:
WL.Logger.info(“text”);
88
89. Let’s build some JavaScript
1.
Open the core JavaScript file for your app:
appsShow302Democommonjsmain.js
main.js is called at the bottom of the index.html file and
includes the code to initialize the Worklight and Dojo
frameworks.
For the examples in this session, we are going to put
the code to call adapters and write the results to the
application pages inside the init procedures.
In a production or more complex application, you
should use dojo/app or a similar MVC framework or
pattern to trigger adapter calls as needed during page
transitions and other events.
89
90. Calling the Worklight Adapter
2.
90
Update the ready(function () { section to include the following invokeProcedure function call:
91. Handling the Adapter Response
2.
91
Add the following function to the bottom of main.js:
92. Testing your app
At this point, you should have a fully working Activity Stream!
Cool tip: In Worklight Studio 6.x, you no longer have to re-build
the app to see changes to HTML or client side JavaScript code.
(Server adapters still need to be re-deployed after a change)
1.
Refresh your browser window where you were previewing
the application.
2.
Click the Activity Stream choice.
3.
You should see your Connections Activity Stream in the
app!
92
93. Adding the IBM Social Business Toolkit to your app
Weren‟t we going to the playground?
The SDK download includes everything you need
to get started, including docs, distribution files,
samples with source code, and a Tomcat server.
1.
Go to http://ibmsbt.openntf.org and download
the SDK.
2.
Expand the SDK .zip file into a directory.
93
94. Copy the SBT JAR files to Worklight Studio
The SDK download includes everything you need
to get started, including docs, distribution files,
samples with source code, and a Tomcat server.
1.
Copy the files from the SBTSDKredistjar
directory to the server/lib directory in your
application project in Worklight Studio.
2.
You will see the server console update as
Worklight Studio detects the new file and
automatically deploys them to the embedded
development server.
94
95. What you won’t do…
A few of the first steps in the SBT deployment documentation are to edit the
sbt.properties and managed-beans.xml configuration files.
Unfortunately, the embedded WebSphere Liberty profile server in Worklight Studio
does not include the new managed beans feature that was recently added to the
Liberty profile in WebSphere 8.5.5.
Oops.
No worries – we have a solution!
We can call Java classes from our Worklight Server Adapters to manually create
a Connections endpoint, authenticate with the Connections server, and set up
the SBT services to support our needs.
95
96. Create a new Worklight Adapter in Worklight Studio
Add the new procedures to your
adapter configuration.
1.
Open ConnectionsAPI.xml again.
2.
Select
Adapter “ConnectionsAPI”
on the left.
3.
Click Add…
4.
Add a getProfileName procedure.
5.
Click Add…
6.
Add a updateStatus procedure.
7.
Save the file.
96
97. Create a new Worklight Adapter in Worklight Studio
1.
97
Open the ConnectionsAPI-impl.js JavaScript file.
98. Calling the Worklight Adapter
2.
98
Add the getProfileName function (change the user/password to match your account):
99. Deploying your Worklight Adapter (again)
1.
Right-click on the ConnectionsAPI folder and
select Run As – Deploy Worklight Adapter.
2.
Wait a few seconds until “Adapter build and deploy finished”
appears in the Console view.
99
100. Testing your Worklight Adapter
1.
Right-click on the ConnectionsAPI folder and
select Run As – Invoke Worklight Adapter.
2.
Select the Procedure name getProfileName
3.
Click Run
100
101. Testing your Worklight Adapter – View Results
Worklight displays the JSON results from your
adapter in the default Eclipse browser.
Notes:
IBM Greenhouse will let you set a telephone
number, but clears the value fairly quickly
for privacy purposes. For testing, you may
need to set the value just before running
your adapter or application.
101
102. Add the getProfileName call to main.js
1.
102
Open the core JavaScript file for your app:
appsShow302Democommonjsmain.js
103. Calling the Worklight Adapter
2.
103
Update the ready(function () { section to include the following invokeProcedure function call, just
after the previous invokeProcedure call you created:
104. Testing the Profile page
At this point, you should have a fully working Profile page!
1.
Refresh your browser window where you were previewing
the application.
2.
Click the Profile choice.
3.
You should see your Profile in the app!
104
105. Now, let’s update some data in Connections!
1.
105
Open the ConnectionsAPI-impl.js JavaScript file.
106. Calling the Worklight Adapter
2.
106
Add the updateStatus function (change the user/password to match your account):
107. Deploying your Worklight Adapter (again)
1.
Right-click on the ConnectionsAPI folder and
select Run As – Deploy Worklight Adapter.
2.
Wait a few seconds until “Adapter build and deploy finished”
appears in the Console view.
107
108. Testing your Worklight Adapter
1.
Right-click on the ConnectionsAPI folder and
select Run As – Invoke Worklight Adapter.
2.
Select the Procedure name updateStatus
3.
Enter a status message to post to your
Connections status.
4.
Consider that message carefully! We set SELF as
the privacy scope for our message, but do
understand that you are posting to a live system.
5.
Click Run
108
109. Testing your Worklight Adapter – View Results
Worklight displays the JSON results from your
adapter in the default Eclipse browser.
You can also see the result in Connections:
IMPORTANT:
If you refresh this result page, it will trigger a
new call to the Worklight Adapter. That will
post a new update to Connections and
show you the results.
109
110. Add the updateStatus call to main.js
1.
110
Open the core JavaScript file for your app:
appsShow302Democommonjsmain.js
111. Calling the Worklight Adapter
2.
111
Add the updateStatus function to the bottom of main.js and save the file. This function is called
from the onclick event on the button on the Update Status page.
112. Testing the Status Update page
At this point, you can now update Connections.
1.
Refresh your browser window where you were previewing
the application.
2.
Click the Status Update choice.
3.
Enter a status and click Post
4.
You will get a Success message if your update was posted.
112
113. Checking the result using our app
We can check the Connections status page to confirm the post,
but we now have another way.
1.
Refresh your browser window where you were previewing
the application.
2.
Click the Activity Stream choice.
3.
Your test posts are displayed.
113
116. Additional Resources
Slides, code, and resources for this session
http://handly.org/show302
DeveloperWorks (tutorials, articles, blogs, free Worklight Studio)
http://www.ibm.com/developerworks/mobile
http://www.ibm.com/developerworks/mobile/worklight
https://www.ibmdw.net/social
IBM Worklight InfoCenter (a very good reference!)
http://pic.dhe.ibm.com/infocenter/wrklight/v6r1m0
Ask and answer questions on Stack Overflow
http://stackoverflow.com/questions/tagged/ibmsbt
http://stackoverflow.com/questions/tagged/worklight
Download the SDK
http://ibmsbt.openntf.org
@handly, @ibmsbt on Twitter
116
117. Related Sessions
CUST118 – MLB: Fostering a Collaborative
Approach to Conduct Baseball Business
Pete Murphy, Baseball Office of the Commissioner;
Smriti Kapuria, Prolifics
Wed 10:00 am, Swan Mockingbird 1 & 2
JMP103 – Extending Your Application Arsenal
With OpenSocial
Yun Zhi Lin, IBM China Investment Company Limited; Ryan Baxter,
IBM
Sun, 26/Jan 08:00 AM - 10:00 AM, Dolphin S. Hem III
BOF203 – Social Application Development
Mark Wallace, IBM
Mon, 27/Jan 06:15 PM - 07:15 PM, Swan Parrot 1
KEY108 – IBM Collaboration Solutions
Application Development Strategy
Philippe Riand, IBM; Kramer Reeves, IBM; Mikael Orn, IBM
Tue, 28/Jan 11:15 AM - 12:15 PM, Dolphin N. Hem A-D
AD101 – Extending IBM SmartCloud Applications
in 30 Minutes
Michael Blackstock, IBM
Tue, 28/Jan 01:30 PM - 02:30 PM, Dolphin S. Hem I
AD301 – What's New on the IBM Social Business
AD501 – IBM Worklight for IBM Domino
Toolkit Version 2.0
Developers
Mark Wallace, IBM
Mon, 27/Jan 02:15 PM - 03:15 PM, Dolphin S. Hem IV-V
Mat Newman, IBM
Tue, 28/Jan 04:15 PM - 05:15 PM Dolphin N. Hem A-C and
Wed, 29/Jan 03:00 PM - 04:00 PM Dolphin N. Hem E
AD304 – The Power of Collaborating IBM Domino,
AD206 – Build Apps Rapidly by Leveraging
IBM Connections and IBM Worklight
Services from IBM Collaboration Solutions
Jaya Nampalli, IBM; Leslie Hans, IBM
Mon, 27/Jan 03:45 PM - 04:45 PM, Swan Mockingbird 1 & 2
117
Henning Schmidt, hedersoft GmbH; Niklas Heidloff, IBM
Wed, 29/Jan 05:30 PM - 06:30 PM, Dolphin S. Hem III
118. Access Connect Online to complete your session surveys using any:
– Web or mobile browser
– Connect Online kiosk onsite
Then … Go try this at home!
118