Use Hammer JS to add touch gestures to your page

Introduction

In a previous post I demonstrated how you can apply a side panel to your interface to provide additional navigation for your application using the Bootstrap UI.

Toggle versus Swipe

The solution was basically a form of toggle, initiated from an element in your UI. For demonstration purpose we choose to include a image (hamburger menu) in the navbar logo section. The downsize of that is that you get 2 similar icons if you include Utiliy links and a click does feel less intuitive than a swipe gesture on a mobile device.

701-one_finger_swipe

So what are your options?

Hammer

If you search after javascript libraries fo touch or swipe gestures you will find a dozen. One famous is jQuery Mobile. But on top in my result list appears Hammer JS.

While testing library examples I had one condition: it should work well with the Application Layout control from the Extension Library with the responsive layout behaviour. As it turned out, Hammer is pretty easy to integrate with this control.

Step 1 – Download the library

AMD and Dojo

In my first setup I noticed that the Hammer object was not available in the DOM. Thanks to Per Hendrik Lausten I got a quick reply on StackOverflow with a suggested solution. It turns out that AMD loading in the Hammer library conflicts with Dojo in XPages. From other posts on StackOverflow this seems to be a known problem. If you compare the number of questions regarding jQuery compared with Dojo perhaps IBM should consider to ditch this library but hurrah for backward compatibility.

So in our local Hammer library we disable the AMD loading as suggested:

//if (typeof define == TYPE_FUNCTION && define.amd) {
// define(function() {
// return Hammer;
// });
//} else if (typeof module != ‘undefined’ && module.exports) {
if (typeof module != ‘undefined’ && module.exports) {
module.exports = Hammer;
} else {
window[exportName] = Hammer;
}

 

Step 2 – Set up your HTML structure

In my example we have 1 side panel and 1 main content section. My structure looks as followed:

<div class=”navigation” id=”navigator”>
<!– insert side panel navigation here –>
</div>
<div class=”site-wrap” id=”content” >
<!– insert the rest of your page markup here –>
</div>

Panel

The panel simply contains a number of list items:

<ul class=”list-group”>
<li class=”list-group-item”><i class=”glyphicon glyphicon-home”></i><a href=”index.xsp”>Home</a></li>
<li class=”list-group-item”><i class=”glyphicon glyphicon-link”></i><a href=”https://de.linkedin.com/in/patrickkwinten”>Profile</a></li&gt;
<li class=”list-group-item”><i class=”glyphicon glyphicon-pencil”></i><a href=”https://quintessens.wordpress.com”>Blog</a></li&gt;
<li class=”list-group-item”><i class=”glyphicon glyphicon-hand-right”></i><a href=”https://twitter.com/patrickkwinten”>Contact</a></li&gt;
</ul>

and with a bit of CSS results as followed:

panel

The CSS:

.navigation {
list-style: none;
background: #eee;
width: 200px;
height: 100%;
position: fixed;
top: 50px;
right: 0;
bottom: 0;
left: -200px;
z-index: 0;
}

So our panel is 200 pixels wide but is set at left-position -200px so we do not see it on the screen. The top-position is set to 50px which ensures it does not appear under the sticky navbar.

Main section

The main content section contains my Application Layout control from the Extension Library. You can set it up as you like. I chose a sticky navbar on the top. I filled the main column with some text and Boostrap panels.

main

The CSS is as followed:

.site-wrap {
min-width: 100%;
min-height: 100%;
background-color: #fff;
position: relative;
top: -50px;
bottom: 100%;
left: 0;
z-index: 1;
padding: 4em;
}

 

Step 3 – Create a Hammer instance and apply event listeners

In a scriptblock control we setup a new instance of a Hammer object, bind it to our main element (containing the Application layout control) and set event listeners for pan, tap and press gestures.

var main = document.getElementById(‘content’);
var nav = document.getElementById(‘navigator’);
//new instance
var mc = new Hammer(main);
// listen to events…
mc.on(“panright”, function(ev) {
main.style.left = “200px”;
nav.style.left = “0px”;
});
mc.on(“panleft tap press”, function(ev) {
main.style.left = “0px”;
nav.style.left = “-200px”;
});

All set… go!

This is basically all you need. Include the Hammer JS and stylesheet in your resources and preview the xsp file in a browser.

This is how the screen would look like when initially opened:

normal

 

And this is how it looks like when you made a gesture to the right:

open

Device emulator

While testing multiple libraries I experienced unexpected behavior in different browsers. I suggest you use a device emulator to minimize disillusion when viewing (worse: presenting) the end-result.

Animation effect

The appearance of the side panel is now pretty direct. You can easily apply some animation via jQuery.

var options = {
duration: 150,
easing: ‘swing’
};

mc.on(“panright”, function(ev) {
$(main).animate({
left: “200”,
opacity:0.4}, options);
$(nav).animate({
left: “0”}, options);
});
mc.on(“panleft tap press”, function(ev) {
$(main).animate({
left: “0”,
opacity:1}, options);
$(nav).animate({
left: “-200″}, options);
});

 

Download

You can find a download under the following link. The NSF contains the adapted Hammer library a CSS stylesheet, an XPage and a custom control. Feel free to try and modify it and send me the results ;-)

Using the language bean from XPages Toolkit for Internationalization

Introduction

You have people who tend to tick around where they live and work and you have people who tend to switch location now and then. Especially in Europe which is divided into many countries with many different languages, somehow operating under one flague,  you are sometimes amazed that organizations have not fully adapted to the trend of “travelling” co-workers.

different langiages

If you are lucky an application is presented bilingual but in a lot of occasions an application is presented either in English (when that is the official language of communication) or in a native language where the application is initiated and being used.

But what if that cross-border European co-worker enters the work floor?

Internationalization

Internationalization refers to the process whereby you prepare your application for users from varied geographies. There are two parts to this:

The need for localization is obvious; a German user wants to see an application in German and a French user in French, and so on. Localization involves making different language versions of all the application’s user interface available and ensuring the correct strings are used based on user preferences.

Support in XPages

In the IBM Notes and Domino Application Development wiki you can learn about the support for internationalization in XPages.

In this post I will describe how you can use the language bean that is part of the XPages Toolkit available in OpenNTF.

Sample application

In this post we will build a simple XPages UI which looks as followed:

sample

In a combo-box you get presented a list with available language options. And based upon your selection values will be collected from a set of property files.

I will include a dropbox link to the sample application.

Walkthrough

First: download & install the library. Beside the library there is also a sample application which comes in handy to borrow code from.

Java classes

The following files you will need:

class

Property files

The property files contain the actual string values. The amount of files depends on the number of languages you want to support. In our case 4: English (default), Swedish, German and Dutch. There will be three types of files: general, contacts and keywords.  That makes 12 (4*3) in total.

propfiles

Here is what the files could look like. First the general poperties file:

AppTitle=Language Bean
Formula=Formula
Bean=Bean
NotAvailable=Not Available
SwitchLanguage=Choose Your Language
Select=Select
Header=Demo Language Bean
SubHeader=Register A Person
Submit=Submit

Which becomes in Swedish:

AppTitle=Språk Böna
Formula=Formel
Bean=Böna
NotAvailable=Inte Tillgänglig
SwitchLanguage=Välj Ditt Språk
Select=Välj
Header=Demo Språk Böna
SubHeader=Registrera En person
Submit=Skicka

The contacts properties files:

LastName=Last Name
FirstName=First Name
Gender=Gender
Hair=Hair

In German:

LastName=Nachname
FirstName=Vorname
Gender=Geschlecht
Hair=Har

And at last the keywords properties file:

Male=male
Female=female
White=white
Brown=brown
Black=black
Red=red

Which becomes in Dutch:

Male=mannelijk
Female=vrouwelijk
White=wit
Brown=bruin
Black=zwart
Red=rood

The properties files are “registrered” in the language bean via the following method:

public List<String> getPropertyFileNames() {
List<String> propertyFileNames = new ArrayList<String>();
propertyFileNames.add(“contact”);
propertyFileNames.add(“keywords”);
propertyFileNames.add(“general”);
return propertyFileNames;
}

Layout custom control

My demo app contains 2 pages which demonstrates the 2 options you have with the toolkit: use the language bean or the toolkit @formula.

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221; xmlns:xe=”http://www.ibm.com/xsp/coreex”&gt;
<xe:applicationLayout id=”applicationLayout1″><xp:this.facets>
<xp:panel xp:key=”LeftColumn”>
<xe:navigator id=”navigator1″>
<xe:this.treeNodes>
<xe:pageTreeNode page=”/bean.xsp”>
<xe:this.label><![CDATA[#{javascript:xptI18NBean.getValue(“general.Bean”)}]]></xe:this.label>
</xe:pageTreeNode>
<xe:pageTreeNode page=”/formula.xsp”>
<xe:this.label><![CDATA[#{javascript:xptI18NBean.getValue(“general.Formula”)}]]></xe:this.label>
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator></xp:panel></xp:this.facets>
<xp:callback facetName=”facet_1″ id=”callback1″></xp:callback>
<xe:this.configuration>
<xe:simpleResponsiveConfiguration navbarText=”Language Bean”
collapsedLeftMenuLabel=”Pages”>
<xe:this.navbarUtilityLinks>
<xe:basicLeafNode
href=”https://quintessens.wordpress.com/&#8221;
label=”Kwintessential Notes” title=”Visit My Site”>
</xe:basicLeafNode>
<xe:basicLeafNode
href=”http://www.openntf.org/main.nsf/project.xsp?r=project/XPages%20Toolkit&#8221;
label=”XPages Toolkit” title=”Visit Project on OpenNTF”>
</xe:basicLeafNode>
</xe:this.navbarUtilityLinks>
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
</xp:view>

Bean XPage

I will spare you the  complete code for the Bean page. Check the download if you want the complete code.  The principle is simple. You collect the value via the following pattern

xptI18NBean.getValue(“[properties file].[key]”)

That could become something like:

xptI18NBean.getValue(“general.SwitchLanguage”)

Switching language

In order to switch language a combobox control is presented with the following code:

<xp:comboBox id=”cbSwitchLanguage” defaultValue=”#{javascript:xptI18NBean.getCurrentLanguage()}”>
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript:xptI18NBean.getAllLanguages()}]]>
</xp:this.value>
</xp:selectItems>
<xp:eventHandler event=”onchange” submit=”true” refreshMode=”complete”>
<xp:this.action>
<![CDATA[#{javascript:var sv = getComponent(“cbSwitchLanguage”).getValue()
if(sv != null && sv != “”) {
var locSet:Locale = new Locale(sv);
context.setLocale(locSet);
context.reloadPage();
}}]]>
</xp:this.action>
</xp:eventHandler>
</xp:comboBox>

Language options

The getAllLanguages method in the language bean “registers” the available language options:

public List<String> getAllLanguages() {
List<String> languages = new ArrayList<String>();
languages.add(“en”);
languages.add(“de”);
languages.add(“sv”);
languages.add(“nl”);
return languages;
}

That is basically it!

Formula XPage

This page differs from the Bean page in the way it accesses the property files. It uses a formula which is defined in the XPages Toolkit library.

The formula follows the following pattern:

@XPTLanguageValue(“[properties file].[keyword]”)

Which could become something like:

@XPTLanguageValue(“general.SwitchLanguage”)

Download

A sample application for download is available under the following URL.

Wrapup

I am curious what method you use to make your applications available in multiple languages. Please drop a line how you have solved it.

I found the language bean in the XPages Toolkit very intuitive and easy to use. At least in some cases it solves the problem nice and quickly so my thanks go out to it’s project members.

svenska

Born social – Create a Social Notes application from scratch

Introduction

A long time ago (it seems) I had the idea to prepare integration of Connections with Xpages development via the SBTSDK. I thought this would be a good way to learn Connections and it’s API more in details. By setting up custom controls you would be able to build mash-up apps piece by piece.

However there seemed to be little interest for this in the market (correct me if I am wrong) so I continued with other technologies.

Lately Mark Roden posted a couple of posts on his blog regarding the social business toolkit so I hop on to this and post my previous work. Hopefully it can help someone getting started.

Downloads

Born Social – the doc

The document Born Social describes how to setup your server, development environment and application to get started developing with the SBTSDK.

It also provide code samples of custom controls to display information from IBM Connections.

born social

Previous Posts on SBT SDK

Perhaps it helps to read some previous posts I wrote on the SBT SDK.

Born Social – the app

The following file contains an NSF file with all the code, custom controls and some sample xpages.

born social app

Summary

I hope the provided samples and guidance will help you to get started with the SBT SDK.

At IBMConnect at the IBM developers booth I asked what the upcoming plans where for SBT SDK and if we could get more controls for XPages but the answer was that IBM had received very few questions for application development with Connections :-/

Perhaps if more people debunk this mind-set at IBM, perhaps by sharing their samples, interest will grow.

Delivering responsive web design in IBM Notes applications

The following is a re-post I originally posted on Infoware’s blog: link.

Introduction

Responsive web design (RWD) has been the talk of town the last years. In 2012 it was listed as #2 in ‘Top Web Design Trends’ by .net magazine and Mashable called 2013 the ‘Year of Responsive Web Design’. Many other sources have recommended responsive design as a cost-effective alternative to mobile applications.

responsive

While I assume that a large portion of the internet (and in some cases intranet) sites are nowadays optimized for the device that accesses them, but what about your company’s (internal) business applications? 

Business value

IT departments need to prioritize their activities and internal applications are most often accessed by a smaller audience than external applications. Historically the internal app was accessed with a desktop computer. With the trend of smartphones and tablets taking over the workspace this may no longer be the case in your company?

With a VPN connection users want to continue to execute their work on this new breed of devices, instead starting up a desktop computer for a single task. Here is where the business value of RWD comes in.

Continue to work on same device = More productive employees = Saving time and perhaps even hardware

Mobile first

A trend is to apply the progressive application strategy of ‘Mobile first’. Instead of designing a complex application for desktop computers first and thereafter gracefully degrade it for mobile devices, the user interface is initially designed for mobile devices and enhanced for desktops with more processing power.

mobile-first-icons

 

Many RWD frameworks embrace this ‘Mobile first’ concept nowadays.

Options in Notes

So what are your options in delivering RWD in your beloved Notes applications? Depending on your roadmap for the platform and personal preferences you have the following options.

  1. Build the application with XPages technologies.
  2. Build the application with common web technologies.

The XPages way

An approach for your Notes platform that is highly promoted by IBM is to deliver web interfaces for Notes applications with XPages. Not only bring you in Rapid Application Development (RAD) principles in your project also the range of capabilities is much more diverse.

Another benefit is that you can stay on the core technologies: JSF, JavaScript and Java. This you can combine with common web technologies like AJAX, HTML5, CSS and REST services. For the RWD you can use your favorite framework such as Bootstrap or Foundation.

Bootstrap framework

twitter-bootstrap

Bootstrap is a popular framework for developing responsive, mobile first projects on the web. It makes front-end web development faster and easier. Bootstrap is based upon HTML, CSS and JavaScript, technologies already well-known in Notes web apps.

Distribution

You have several options how you distribute the Bootstrap framework to your audience:

  1. Install the files on your Domino server.
  2. Embed the files in a Notes application.
  3. Install an additional XSP library on your Domino server.
  4. Install the latest extension library on your Domino server.

In case you do not utilize the OSGi runtime on your Domino server you can either install the files on centrally on the Domino server or embed the files in each Notes application. The installation on the Domino server makes the distribution of updates easier but the administrator is responsible for the distribution across servers. Embedding the files in a Notes application is less efficient (e.g. caching) but makes distribution of updates a task for the developer.

Probably the best approach would be to utilize the OSGi runtime on your Domino server and distribute the files as a library via an Update site Notes application across your servers. This makes the task even simple and small for an administrator.

If you choose to do so you have the option to either install bootstrap4xpages library as a separate library or you can install the latest extension library (from 10 november 2014). The latter give you several benefits:

  • Custom renderer for the Application Layout control, which makes it easy to define the layout structure of your application.
    • This renderer gives the control a Bootstrap look & feel, as well making the control responsive.
  • A newer version of jQuery.
  • Latest Bootstrap themes (3.2.0 normal or flat).
  • Additional configuration options in the Application Layout control wizard for the Bootstrap navigation components.

Separate Mobile devices UI alternative

The extension library (a library with additional XPages controls and functions) provides also so-called ‘Mobile controls’ which allow you to deliver a separate interface for mobile devices for your Notes apps. Via a wizard you can build a ‘single page application’ in a matter of minutes with full CRUD (create, read, update and delete) operations and infinite scrolling through document lists (aka views).

This approach does not deliver RWD but a separate user interface for mobile devices. At least it gives you the option to deliver a UI adapted for mobile devices in a very short time with little investment.

You can choose to make the UI of the app look like a native app for iPhone or Android. Alternatively you can choose to make the UI look in line with other IBM products (iNotes, Connections). A video that demonstrates the controls briefly you can find here: http://vimeo.com/99537780.

The WEB way

In case you do not walk the XPages path but instead you prefer the approach to deliver the application with more common web technologies like HTML, CSS, AJAX and REST services you can still install the files of your responsive web design framework of choice on the Domino server or embed them in a Notes application.

From there you can start to (re)write your ‘traditional’ Domino application as a Web project. In the latter case you use Notes only as a container for your data documents and design elements and use forms and views only as data schemes.

This approach dodges the RAD capabilities in Notes and will demand more development time. But you can apply this approach also to other platforms that you may have. You can later even debate why the data should be stored in Notes and not in a document-oriented database alternative? The layered security and replication capabilities are often good arguments.

Implementing RWD via the Extension Library option

In the following scenario we will describe the implementation of RWD with the Extension Library more in details.

  • Database enablement.
  • Application Layout.

Database enablement

Assuming you have installed the extensions for the Domino server and Domino Designer (DDE) client according the instructions in the readme.pdf file you can now enable a Notes application.

XSP properties

The XSP properties file allows you to configure parameters for the XPages framework. Open the file in DDE.

Screenshot_1

In the General tab you have now two more themes to select:

  • Bootstrap 3.2.0
  • Bootstrap 3.2.0 flat

The ‘flat’ theme delivers:

  • The resources and styling that comes with Bootstrap v3.2.0.
  • jQuery v2.1.1 resources.
  • Cleanup of specific XPages controls when using Bootstrap.
  • Glyphicon halflings.
  • dbootstrap resources, which provide Bootstrap styling for Dojo controls.

The ‘ordinary’ theme provides all of the same resources as the flat theme, and includes 3D effects to buttons and some other additional styling.

Select one of the two themes:

Screenshot_2

Application layout

The RWD plugin adds a new renderer for the Application Layout control which you normally use to structure the layout of your application. This renderer gives your application layout the Bootstrap look and feel, as well as responsive behavior. When the application is rendered on a smaller screen, such as on a mobile device, it will automatically re-organize the application contents for an optimal user experience.

The control also has new configuration options. Add the Application control on a custom control and open the All Properties tab. In the basics section you can choose now the xe:bootstrapResponsiveConfiguration option:

Screenshot_3

Note: in case you have already a configured Application Layout control you can change the configuration option directly in the Source panel to keep the rest of your configuration (e.g. xe:applicationConfiguration -> xe:bootstrapResponsiveConfiguration).

This configuration options give you several more properties:

  • collapseLeftColumn
  • collapseLeftMenuLabel
  • collapaseLeftTarget
  • fixedNavbar
  • invertedNavbar
  • pageWidth

With the first 3 properties you define how the left column should behave on smaller devices (collapsed for smaller devices, display text when collapsed, item the left menu should be attached to).

You can determine the behavior of the navbar (inverted, fixed (top or bottom)) and the width of the page e.g. fluid = use Bootstrap ‘fluid’ container (almost full width).

Wizard

When you initially drag on the Application Layout control on the custom control a two-step wizard is presented. In the first step you select one of available configurations. You can filter on responsive and non-responsive.

Screenshot_4

In the second you set the properties for the chosen configuration. In case you choose the Responsive Bootstrap option you will see the following screen:

Screenshot_5

Under configuration you can set the properties for the layout including the 6 additional properties mentioned earlier. Set also the other properties like you would normally do.

Voila! Your application is now ready for development.

Hiding elements for specific devices

The plugin provides only the resources and structure for responsive web design. In case you want to optimize the layout for devices by explicitly show or hide them you can use CSS classes.

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query combined with large, small, and medium devices.

Classes Devices
.visible-xs Extra small (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden

Note that the elements that you hide are still being loaded, but simply not being displayed.

Data View control

Probably a typical use case is the display of table columns or lists. On a desktop you may want to show more columns than on a smaller devices.

Typical you use the Data View control from the extension library to display lists of documents. The information you want to display as a link is defined in the summaryColumn property.

Screenshot_6

Additional columns that are displayed on the right of the summaryColumn will be displayed via the extraColumns property. Each additional column is defined in a viewExtraColumn item which contains properties for styleClass and headerStyleClass. For example you could set these as followed:

<xe:this.extraColumns>

<xe:viewExtraColumn columnName=”Date” columnTitle=”Date” style=”width: 100px”  styleClass=” hidden-xs hidden-sm ” headerStyleClass=” hidden-xs hidden-sm“></xe:viewExtraColumn>

</xe:this.extraColumns>

This will show the extra column only for medium and larger devices since they will be hidden for (extra) small devices.

Screenshot_7

Wrap up

Delivering responsive web design on your Notes applications has never been as easy as it is nowadays with the RWD plugin in the extension library. It also respects the rapid application (web) development mantra of XPages.

In case you do decide to follow this path remember you need to check what information you want to show or hide for specific devices.

So what is keeping you from getting a bigger bang for the buck by delivering optimized user experiences for mobile, tablet and desktops for your Notes applications?

 

Certified Application Developer Notes 9

Today I passed the second exam for my certification for IBM Application Developer Notes and Domino 9. My last certification dated from the Notes 7 era so I was forced to take the two core exams as explained in the image below:

vlcsnap-2014-10-01-20h45m37s40

 

This second exam was much more focused on development with XPages, using the Extension Library and the Mobile controls. I guess according what you would expect in modern Domino development. There were the ooccasional LotusScript and @Formula questions, but the majority of the questions were XPages related. Personally I find the setup a bit odd. I Hardly use @Formula or LotusScript in new projects. I wonder why IBM is not defining exams within each technical area seperately e.g. XPages, @Formula & Functions, LotusScript, Java and Extension Library if you wish.

Overall I liked the second exam better, no odd questions about Notes client installation, parameters in the client, more practical development questions. But also expect questions on JSF, XSP configuration etcetera.

A tip I could give is to take a look at the API documentation:

XPages configuration file format

I have not considered to upgrade my certification to the ‘Advanced’ level since I have not worked with administration so intensively lately. I expect though that the XPages mobile advanced topics would be a “piece of cake”. What are your experiences? After all it is also a financial question because the exams are not free. Maybe there will be the option to take an exam on IBM ConnectED 2015?

 

Custom control to display a My Communities list

In the managed bean I described in an earlier post there was a method to return a list of communities in IBM Connections where the authenticated user is member of (getMyCommunities()). So what can you do with it?

In IBM Connections when you section Communities \ I’m a Member you get to see a list with communities you particpate in, along some sub data for each community:

Screenshot_4

 

Social Business Toolkit API

I find the following link the best resource to discover the details of the SBT API. For all the classes their methods are described (at least I hope so).

So for example the Community class I have created a dataTable component and added a column for all it’s methods. When I bind this dataTable to my getMyCommunities method I get an overview of what information I can re-use. If you know an easier way to check this then please drop a comment how to perform this.

dataView control

You have several options to display information from a Community list in XPages. First you have the dataTable control but this control gives you very little control about the layout. The repeat control gives you probably the greatest freedom to define your layout. But in this example I have chosen the dataView control because it has already so predefined layout structure from which you can deviate (facets). To complete the presentation I have wrapped the dataView control in a widgetContainer control.

Here is the code:

<xe:widgetContainer
id=”widgetContainer1″
titleBarText=”My communities”>
<xp:panel>
<xe:dataView
id=”dataView1″
value=”#{javascript:ServiceBean.getMyCommunities();}”
var=”comm”
rows=”5″
expandedDetail=”true”
columnTitles=”true”>
<xp:this.facets>
<xe:pagerSizes
id=”pagerSizes1″
xp:key=”pagerBottomLeft”
for=”dataView1″>
</xe:pagerSizes>
<xp:image
url=”#{javascript:return comm.getLogoUrl();}”
id=”image1″
xp:key=”icon”
style=”height:64px;width:64px”>
</xp:image>
<xp:panel xp:key=”detail”>
<xp:panel>
<xp:text
escape=”true”
id=”commMemberCount”>
<xp:this.value><![CDATA[#{javascript:return comm.getMemberCount();
}]]></xp:this.value>
<xp:this.converter>
<xp:convertNumber
type=”number”
integerOnly=”true” />

</xp:this.converter>
</xp:text>
people
<xp:span
role=”presentation”
styleClass=”lotusDivider”>
|
</xp:span>
Updated by:

<xp:link
escape=”true”
text=”#{javascript:return comm.getContributor().getName();}”
id=”commMemberUpdatedBy”>
<xp:this.value><![CDATA[#{javascript:
try {
var colleagueId = comm.getContributor().getUserid()
var profileService = new com.ibm.sbt.services.client.connections.profiles.ProfileService();

var profile = profileService.getProfile(colleagueId);
var profileUrl = profile.getProfileUrl().replace(“/atom/profile.do”, “/html/profileView.do”);

return profileUrl;
} catch (exception) {
println(“Colleague Profile error: ” + exception);
return null;
} }]]></xp:this.value>
</xp:link>
<xp:span
role=”presentation”
styleClass=”lotusDivider”>
|
</xp:span>
<xp:text
escape=”true”
id=”commUpdatedBy”
value=”#{javascript:comm.getUpdated();}”>
<xp:this.converter>
<xp:convertDateTime
type=”both”
dateStyle=”full”
timeStyle=”short”>
</xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:span
role=”presentation”
styleClass=”lotusDivider”>
|
</xp:span>
<xp:repeat
id=”repeat1″
rows=”30″
value=”#{javascript:comm.getTags();}”
var=”rowData”
indexVar=”rowIndex”
disableTheme=”true”
disableOutputTag=”true”>
<xp:link
escape=”true”
text=”#{javascript:rowData}”
id=”link1″
styleClass=”tagLink”>
</xp:link>

</xp:repeat>
</xp:panel>
<xp:panel tagName=”div”>
<xp:text
escape=”true”
id=”commSummary”
value=”#{javascript:comm.getSummary();}”>
</xp:text>
</xp:panel>

</xp:panel>
<xp:panel
id=”titlePanel”
style=”white-space:nowrap;”
xp:key=”summary”>
<h4>
<xp:link
escape=”true”
id=”link6″
target=”_blank”
value=”#{javascript:return comm.getCommunityUrl();}”
text=”#{javascript:return comm.getTitle();}”>
</xp:link>
</h4>
</xp:panel>
</xp:this.facets>
<xe:this.extraColumns>
<xe:viewExtraColumn
value=”#{javascript:comm.getCommunityType();}”
columnTitle=”Type”>

</xe:viewExtraColumn>

<xe:viewExtraColumn
value=”#{javascript:comm.getForumTopics().length;}”
columnTitle=”Topics”>
<xp:this.converter>
<xp:convertNumber
type=”number”
integerOnly=”true” />

</xp:this.converter>

</xe:viewExtraColumn>

</xe:this.extraColumns>
<xp:this.facets>
<xp:pager
xp:key=”pagerBottomRight”
pageCount=”5″
partialRefresh=”true”>
<xp:pagerControl
type=”Previous”
id=”pagerControl4″>
</xp:pagerControl>
<xp:pagerControl
type=”Group”
id=”pagerControl5″>
</xp:pagerControl>
<xp:pagerControl
type=”Next”
id=”pagerControl6″>
</xp:pagerControl>
</xp:pager>
</xp:this.facets>

</xe:dataView>
</xp:panel>
</xe:widgetContainer>

(If you know how to paste indented code proper in WordPress than drop a comment)

The result is as followed:

Screenshot_5

I have not finished the filtering option when clicking a tag (link control). Sorting options by Date, Popularity, Name are also not in place.

Nevertheless I have a starting point to mash up this dataView control with data inside Domino :-)

(extended) Managed Bean for SBT SDK

In a previous post I mentioned my blogpost ‘Developing social applications with the Social Business Toolkit SDK‘. In the post I defined a managed bean to connect to the Files service  and return data via the getMyFiles method. In this post I will extend that bean to access other services in IBM Connections:

  • Activity Stream
  • Blogs
  • Bookmarks
  • Communities
  • Files
  • Forums
  • Profiles

Later I will refine the ServiceBean object with new methods derived from the ones available in the SBT SDK. I shall also provide UI examples (custom controls) to present the information from the services.

ServiceBean

For now I have come so far:

package com.quintessens.bornsocial.sbt;

import java.io.Serializable;

import com.ibm.sbt.services.client.connections.activitystreams.ActivityStreamEntityList;
import com.ibm.sbt.services.client.connections.activitystreams.ActivityStreamService;
import com.ibm.sbt.services.client.connections.blogs.BlogList;
import com.ibm.sbt.services.client.connections.blogs.BlogService;
import com.ibm.sbt.services.client.connections.bookmarks.BookmarkList;
import com.ibm.sbt.services.client.connections.bookmarks.BookmarkService;
import com.ibm.sbt.services.client.connections.communities.CommunityList;
import com.ibm.sbt.services.client.connections.communities.CommunityService;
import com.ibm.sbt.services.client.connections.files.FileList;
import com.ibm.sbt.services.client.connections.files.FileService;
import com.ibm.sbt.services.client.connections.files.FileServiceException;
import com.ibm.sbt.services.client.connections.forums.ForumList;
import com.ibm.sbt.services.client.connections.forums.ForumService;
import com.ibm.sbt.services.client.connections.forums.TopicList;
import com.ibm.sbt.services.client.connections.profiles.Profile;
import com.ibm.sbt.services.client.connections.profiles.ProfileList;
import com.ibm.sbt.services.client.connections.profiles.ProfileService;
import com.ibm.sbt.services.client.connections.profiles.ProfileServiceException;

public class ServiceBean implements Serializable {
private static final long serialVersionUID = 1L;

public ActivityStreamEntityList getAllStatusUpdates() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getAllUpdates();
} catch (Throwable e) {
return null;
}
}

public ActivityStreamEntityList getMyStatusUpdates() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getMyStatusUpdates();
} catch (Throwable e) {
return null;
}
}

public ActivityStreamEntityList getMyNetworkStatusUpdates() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getStatusUpdatesFromMyNetwork();
} catch (Throwable e) {
return null;
}
}

public ActivityStreamEntityList getMyNetworkUpdates() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getUpdatesFromMyNetwork();
} catch (Throwable e) {
return null;
}
}

public ActivityStreamEntityList getUpdatesIFollow() {
ActivityStreamService service = new ActivityStreamService();
try {
return service.getUpdatesFromPeopleIFollow();
} catch (Throwable e) {
return null;
}
}

public FileList getMyFiles() {
FileService service = new FileService();
try {
return service.getMyFiles();
} catch (FileServiceException e) {
return null;
}
}

public ProfileList getMyColleagues() {
ProfileService service = new ProfileService();
try {
Profile profile = service.getMyProfile();
ProfileList profiles = service.getColleagues(profile.getUserid());
return profiles;
} catch (Throwable e) {
return null;
}
}

public Profile getMyProfile() {
ProfileService service = new ProfileService();
try {
Profile profile = service.getMyProfile();
return profile;
} catch (Throwable e) {
return null;
}
}

public BlogList getAllBlogs() {
BlogService service = new BlogService();
try {
BlogList entries = service.getAllBlogs();
return entries;
} catch (Throwable e) {
return null;
}
}

public BlogList getMyBlogs() {
BlogService service = new BlogService();
try {
BlogList entries = service.getMyBlogs();
return entries;
} catch (Throwable e) {
return null;
}
}

public BookmarkList getAllBookmarks() {
BookmarkService svc = new BookmarkService();
try {
BookmarkList bookmarks = svc.getAllBookmarks();
return bookmarks;
} catch (Throwable e) {
return null;
}
}

public BookmarkList getPopularBookmarks() {
BookmarkService svc = new BookmarkService();
try {
BookmarkList bookmarks = svc.getPopularBookmarks();
return bookmarks;
} catch (Throwable e) {
return null;
}
}

public BookmarkList getMyBookmarks() {
BookmarkService svc = new BookmarkService();
try {
BookmarkList bookmarks = svc.getMyNotifications();
return bookmarks;
} catch (Throwable e) {
return null;
}
}

public CommunityList getAllCommunities() {
CommunityService svc = new CommunityService();
try {
CommunityList comms = svc.getPublicCommunities();
return comms;
} catch (Throwable e) {
return null;
}
}

public CommunityList getMyCommunities() {
CommunityService svc = new CommunityService();
try {
CommunityList comms = svc.getMyCommunities();
return comms;
} catch (Throwable e) {
return null;
}
}

public ForumList getMyForums() {
ForumService svc = new ForumService();
try {
ForumList forums = svc.getMyForums();
return forums;
} catch (Throwable e) {
return null;
}
}

public TopicList getMyForumsTopics() {
ForumService svc = new ForumService();
try {
TopicList forums = svc.getMyForumTopics();
return forums;
} catch (Throwable e) {
return null;
}
}

}

My communities sample

Below you see an example of a widget showing the communities I am member of:

Screenshot_1

The code for the custom control is as followed:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view
xmlns:xp=”http://www.ibm.com/xsp/core&#8221;
xmlns:xe=”http://www.ibm.com/xsp/coreex”&gt;

<xe:widgetContainer
id=”widgetContainer1″
titleBarText=”My communities”>
<xp:panel>
<xp:dataTable
id=”dataTable1″
rows=”5″
value=”#{javascript:ServiceBean.getMyCommunities();}”
var=”comm”>
<xp:column
id=”column4″>
<xp:this.facets>
<xp:label
value=”Community”
id=”label4″
xp:key=”header” />
</xp:this.facets>
<h4>
<xp:link
escape=”true”
text=”#{javascript:comm.getTitle()}”
id=”link1″
value=”#{javascript:comm.getCommunityUrl()}”
title=”Open community…” />
</h4>
</xp:column>
<xp:column
id=”column5″>
<xp:this.facets>
<xp:label
value=”Creator”
id=”label5″
xp:key=”header” />
</xp:this.facets>
<xp:text
escape=”true”
id=”computedField4″>
<xp:this.value><![CDATA[#{javascript:var d = comm.getContributor().getName();
return d;
}]]></xp:this.value>
<xp:this.converter>
<xp:convertDateTime
type=”date”
dateStyle=”short” />
</xp:this.converter>
</xp:text>
</xp:column>
<xp:column
id=”column6″>
<xp:this.facets>
<xp:label
value=”Type”
id=”label6″
xp:key=”header” />
</xp:this.facets>
<xp:text
escape=”true”
id=”computedField5″
value=”#{javascript:comm.getCommunityType() }”>
<xp:this.converter>
<xp:convertNumber
type=”number”
integerOnly=”true” />
</xp:this.converter>
</xp:text>
</xp:column>
</xp:dataTable>
<xp:pager
layout=”Previous Group Next”
partialRefresh=”true”
id=”pager1″
for=”dataTable1″ />
</xp:panel>
</xe:widgetContainer>
</xp:view>

Some thoughts

The presentation of the data from the services in Connections may vary for each type of information. Some information is more suitable to present in a tabular format, others e.g. in a Data View control. Also at this moment I am not fully aware about the available methods for each service and what data they may provide. Here the trial and error method I will simply apply, or provide multiple UI’s for the same type of information.

Time to publish this blog so I can continue with the presentation layer…