The presentation is in german so Google Translate will be your buddy.

You can download a sample application that shows the basics of integrating Bootstrap in XPages that I provide under the Apache 2.0 licence.

A more complex example is the Collaboration Today project that you can download on OpenNTF.

Why am I saying this? Just check out the contributions to this contest! There are people out there who really put effort into this contest and came up with amazing applications, controls, widgets and libraries. The contest ended last night and I would not be surprised if Niklas added some more nice videos/contributions to the list today and maybe even tomorrow. The first 3 contests taught us that the best stuff was handed in in the last 72 hours of a contest even when the whole thing ran for months.

Now there was a new category “IBM Connections” which is one of the reasons the contest was set up for such a long period. The expectation was that people at least start to see the integration capabilities between Connections and Domino. From what I have seen so far the contributions to this category are far better than all expectations. Kudos to all participants!

The open category was “open” as the name suggests and such is the variety of applications and controls. It ranges from fun stuff (XPages chess game) to full featured applications. Judging will not be easy and I wish all judges a lucky hand.

Personally I am really proud to be the sponsor of the 4th contest. It was a pleasure for hedersoft to be part of the contest and we wish all contributors good luck and all judges a great time judging!

There are two categories:

• Open category in which you can dump whatever comes to your mind
• IBM Connections category in which you can submit your XPages integration into Connections

If you want to be a starter in the first category just implement a custom control, a library control, a mobile control, a full application, a … just submit what you like. If you want to win though it better be good

If you are interested in the second category but don’t know how and where to start, well, here are some entry points:

• Video in which Niklas Heidloff explains the basics
• Niklas’ pool of ideas

Still not convinced? Well than drop me a note or contact Niklas and tell us what’s missing to get you going. There are already 9 submissions in the first category and I know that there are some guys working on a solution for the second category. So jump on the train and be a part of this contest!

What I like most about Connections 4 is:

• Activity Stream
  The activity stream  shows a list of all your activities. This is not limited to ToDos but shows twitter or Facebook like activities like personal information, information about updated documents and even eMail! So you have got everything you need in a single place. It has to be well balanced though not to get flooded with stuff and miss the important information.
  ***
• Embedded Experience
  How cool is that? When getting an entry in my stream let’s say from a vacation app I can approve or reject an application right from my activity stream using Embedded Experience. This example obviously only works if a developer enables the vacation application for Embedded Experience. Or somebody sends you a document and you can edit it inline. So cool!
  ***
• Integrated eMail and Calendar
  Access your eMail and Calendar right from IBM Connections. It does not matter if it resides on a Domino Server or an Exchange Server, although I hope you are on Domino and not on the server that must not be named.
  ***
• Social Analytics
  IBM Connections 4 ships with an IBM Cognos component that allows to analyze social activities in Connections in various ways. It comes with a huge set of predefined analytic templates  to get you started. That’ll help you to understand how your Connections instance is being used and what’s needed. It also helps to detect trends and current favourites.
  ***
• Mobile Access
  Well, this is quite cool but kind of expected to be available nowadays.  Install the Connections App on your device and use it anywhere you want.
  ***
• Connection Connectors
  We all know the Quickr Connectors which allow to use Lotus Quickr from Lotus Notes, Windows Explorer, MS Office (Word, Excel Powerpoint), Sametime and so on. Now there are IBM Connections Connectors although they are not called connectors. Luis Benitez just blogged about the Desktop Plugin and has some nice videos on his blog.

If you like IBM Connections as much as I do and you are a developer you should not miss out on the OpenNTF development contest. Develop something for Connections and win $1000!

OK, let’s go. So a responsive design adjust the layout of a webpage to different screen sizes. It does it on the fly while you are resizing your browser. The advantage of this approach is that you do not need to create different pages for different devices. Just create one page and let the responsive magic do the rest. This is an idealized and simplified statement since you have to think about what to show where in which screen size, what to remove, what to add and how to arrange things, but once done you only need to put stuff in the right places and let bootstrap do the rest.

The concept that responsive boilerplates and tools implement is based on media queries. Media queries allow web designers to write css for different media types like print and screen and for different screen sizes. You could let a print version of your webpage look different from the screen version by applying custom css into the following section of your style sheets:

@media print {
/* All your print styles go here *
#header, #footer, #nav { display: none !important; }
}

This does not make a webpage respond to different screen sizes, right? Here is a css frame that get’s you started and shows all the magic of Twitter Bootstrap and other frameworks like Bootstrap.

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

So you simply use the “min-width” and “max-width” attributes in media queries to define when certain css rules will show up in your application or vanish. Twitter Bootstrap uses these boundaries to adjust the design:

So you can use any mix of these values in your style sheet as min and max values. If you want to apply a black body background only to landscape tablets you can use this in your style sheet:

@media (min-width: 480px) and (max-width: 767px) {
body {background:black;}
}

If you have already downloaded Bootstrap check out the file “bootstrap-responsive.css”. You will see that the entire file is based on media queries. It’s a good resource to get familiar with this technology.

To make it even easier for you Bootstrap provides a set of css classes that you can apply out of the box without having to code media queries. The following table shows css classes that speak for themselves.

Just use them in your Xpages either single or in combination to show or hide certain elements in different screen sizes. So I hope this helped a little to get a better understanding of the responsive magic. In my next article in this series I will show you how to set up a site navigator that works in all screen sizes with different looks and functionality.

Note: I copied some of the samples and the tables from the Twitter Bootstrap homepage.

• Track the activity of your network and respond more quickly using the embedded experience within the activity stream.
• Bring external applications and content into the activity stream to respond in context, saving time and reducing context switching.
• Track and respond to the activities of community members using the community-centric activity stream and embedded experience.
• Quickly bring content from external sites and related communities into your community for faster response and better customer service.
• Develop insights into community adoption and usage with new standard and customizable metrics and graphical reports.
• Receive relevant recommendations on people and content using social analytics that now also utilize status updates and microblogging content.
• Use hashtags to follow important topics and “Like” updates with a single click.
• Schedule team events and incorporate into a personal calendar using a new community calendar.

Source: IBM

Let’s go then. In my first post I had a link to the current TB sources. Download a copy if you have not done it yet and unpack the zip. We create a new database and open it in DDE. If you have not already added the Package Explorer to your XPages perspective do it now.

Open the database in the Package Explorer view and navigate to “WebContent”. Create 3 folders named “js”, “css” and “img”. Now take your System Explorer and copy the files to the directories as shown in the screenshot.

Move back to the database view and open the application properties. Click the XPages tab and set the values as shown in the next screenshot.

Twitter Bootstrap requires the HTML 5 doctype as you can see in the documentation. We disable the CSS and JS minimize settings so that we are able to use Firebug & Co. properly later on. In a production environment you may tick the box to minimize source code. You might as well use the already minimized sources from TB.

Save the application properties and create a new XPage. Name it as you like. We do not need a datasource yet so leave this option blank. Once opened move to the Source Tab of your page. Here’s my source:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
 <xp:this.resources>
 <xp:styleSheet href="css/bootstrap.css"></xp:styleSheet>
 <xp:styleSheet href="css/bootstrap-responsive.css"></xp:styleSheet>
 <xp:styleSheet href="css/hedersoft.css"></xp:styleSheet>
 <xp:metaData name="viewport" content="width=device-width, initial-scale=1.0">
 </xp:metaData>
 </xp:this.resources>

<!-- NAVIGATION BAR -->

<xp:panel styleClass="navbar navbar-inverse navbar-fixed-top">
 <xp:panel styleClass="navbar-inner">
 <xp:panel styleClass="container">
 <xp:panel styleClass="row">
 <xp:panel styleClass="span4">
 <xp:label id="label1">
 <xp:this.value><![CDATA[#{javascript:"Welcome " + @Name("[CN]",@UserName())}]]></xp:this.value>
 </xp:label>
 </xp:panel>
 <xp:panel styleClass="span6">
 <ul class="nav nav-pills">
 <li class="dropdown">

 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 <i class="icon-white icon-file"></i>
 Dropdown
 <b class="caret"></b>
 </a>
 <ul class="dropdown-menu">
 <li>
 <a tabindex="-1" href="#">Action</a>
 </li>
 <li>
 <a tabindex="-1" href="#">Another action</a>
 </li>
 <li>
 <a tabindex="-1" href="#">Something else here</a>
 </li>
 <li class="divider"></li>
 <li>
 <a tabindex="-1" href="#">Separated link</a>
 </li>
 </ul>
 </li>
 </ul>
 </xp:panel>
 <xp:panel styleClass="span2">
 <xp:label value="Logout" id="label3"></xp:label>
 </xp:panel>
 </xp:panel>
 </xp:panel>
 </xp:panel>
 </xp:panel>

<!-- APPLICATION LAYOUT -->

<xp:panel styleClass="subhead">
 <xp:panel styleClass="container">
 <xp:panel styleClass="row">
 <xp:panel styleClass="span4">
 <ul class="nav nav-list sidebar-nav-fixed">
 <li class="nav-header">List header</li>
 <li class="active">
 <a href="#">
 <i class="icon-white icon-home"></i>
 Home
 </a>
 </li>
 <li>
 <a href="#">
 <i class="icon-book"></i>
 Library
 </a>
 </li>
 <li>
 <a href="#">
 <i class="icon-pencil"></i>
 Applications
 </a>
 </li>
 <li class="nav-header">Another list header</li>
 <li>
 <a href="#">
 <i class="icon-user"></i>
 Profile
 </a>
 </li>
 <li>
 <a href="#">
 <i class="icon-cog"></i>
 Settings
 </a>
 </li>
 <li class="divider"></li>
 <li>
 <a href="#">
 <i class="icon-flag"></i>
 Help
 </a>
 </li>
 </ul>
 </xp:panel>
 <xp:panel styleClass="span8">
 <xp:table>
 <xp:tr>
 <xp:td>
 <xp:label value="First Name" id="label2"></xp:label>
 </xp:td>
 <xp:td>
 <xp:inputText id="inputText1"></xp:inputText>
 </xp:td>
 </xp:tr>
 <xp:tr>
 <xp:td>
 <xp:label value="Last Name" id="label4"></xp:label>
 </xp:td>
 <xp:td>
 <xp:inputText id="inputText2"></xp:inputText>
 </xp:td>
 </xp:tr>
 <xp:tr>
 <xp:td>
 <xp:label value="Address" id="label5"></xp:label>
 </xp:td>
 <xp:td>
 <xp:inputTextarea id="inputTextarea1"></xp:inputTextarea>
 </xp:td>
 </xp:tr>
 <xp:tr>
 <xp:td>
 <xp:label value="Phone" id="label6"></xp:label>
 </xp:td>
 <xp:td>
 <xp:inputText id="inputText3"></xp:inputText>
 </xp:td>
 </xp:tr>
 </xp:table>
 </xp:panel>
 </xp:panel>
 </xp:panel>
 </xp:panel>

<script type="text/javascript" src="js/jQuery-1.8.0.min.js"
 clientSide="true"></script>
 <script type="text/javascript" src="js/bootstrap.js" clientSide="true"></script>

</xp:view>

Feel free to copy the code and use it for whatever purpose you want. I just want to point out some crucial elements. First of all we need the stylesheets on our page which we include as resources.

<xp:this.resources>
 <xp:styleSheet href="css/bootstrap.css"></xp:styleSheet>
 <xp:styleSheet href="css/bootstrap-responsive.css"></xp:styleSheet>
 <xp:styleSheet href="css/hedersoft.css"></xp:styleSheet>
 <xp:metaData name="viewport" content="width=device-width, initial-scale=1.0">
 </xp:metaData>
</xp:this.resources>

I used the responsive css to make my site responsive. I added the viewport meta tag as demanded by Bootstrap. I added my own stylesheet “hedersoft.css” to do some adjustments. It currently only holds one element.

@CHARSET "ISO-8859-1";

@media (min-width: 980px) {
.subhead{
 padding-top:50px;
}
}

As you can see I used the @media tag to tell the .subhead class that it only applies if the width of the page is at least 980px.

At the end of the page I load the JavaScript Files jQuery and Bootstrap to speed page loading up a bit.

<script type="text/javascript" src="js/jQuery-1.8.0.min.js"
 clientSide="true"></script>
<script type="text/javascript" src="js/bootstrap.js" clientSide="true"></script>

I used a fixed layout for this page. To do this you need a div tag and a the class “container” to it. Within the div tag you create another div tag for the first row in your container. Add the class “row” to it. Then you can add 1-12 divs according to the grid system and add “span*” classes to the divs. All “*” must sum up to 12, no more and no less. Check the TB documentation for further details. Here is an example using the xp:panel:

<xp:panel styleClass="container">
<xp:panel styleClass="row">
 <xp:panel styleClass="span4"></xp:panel>
 <xp:panel styleClass="span8"></xp:panel>
 </xp:panel>
 </xp:panel>

You can use divs or xp:divs as well since they all get rendered to divs in the end. When I now open this page in my webbrowser it looks like this:

When I resize my page the content will get resized as well to fit the different formats from small smartphones to big screens. Here is another screenshot of the same page resized to smartphone size:

It’s not a beauty yet but it shows what Twitter Bootstrap can do for you without having to code all the css yourself. This being said I close the 2nd part of my series and hope it may be of any help to start your project. In the next part I dig a little deeper into the Bootstrap soil to make the page look a little better and to show you some elements you might want to use in your application.

Once I decided to give responsive design a try I had the choice between many free toolboxes out there. Netmagazine lists 50 helpful tools and there are many more sites dealing with this topic. So after some time I picked Twitter Bootstrap (TB), because it seems to be very sophisticated and has been used in quite a few high level projects around the globe.

Twitter Bootstrap comes with a lot of features you can select from. Either take all or reduce the footprint of your Bootstrap to your needs. Today I want to show you how to download and customize Twitter Bootstrap. In the next days I am going to talk about how to use it in your XPages applications to create a responsive design.

The first thing is that Bootstrap comes with a grid system. That means it is organized in columns which can either contain content of any kind or nested columns. You can decide to create a fixed column layout or a fluid layout. To create a responsive design you need to go for the fluid layout. There are a couple of basic functionality and design that comes with the full download like tables, forms, buttons, navigation, labels and many more. Moreover there are a couple of javascript plugins that might be useful like transitions, modal dialogs, popovers and carousels. All of this stuff is in the standard download currently available as version 2.1.0.

As you can see some features are available as XPages controls so you might not need them. The standard CSS looks like the Twitter pages which might not be the design you are preferring. That is not a problem at all since Twitter Bootstrap is customizable.

Select the modules you would like to have in your js and css files and adjust the colors to your needs. Once done you can download a ready to use Twitter Bootstrap that is small and fits into your application. TB uses jQuery so I recommend reading Mark Roden’s awesome series about using jQuery in XPages.

This little introduction is the start of a series about XPages and Twitter Bootstrap. In my next post I will show you how to integrate TB into your XPages application and build a first responsive layout.

You can use all Connections data in your app by utilizing the Connections REST API. The extension library provides single sign on controls so that once you are logged into Connections you are also logged into Domino. It’s all there, what’s missing are some app ideas and examples. The 4th OpenNTF development contest sponsored by IBM Business Partner hedersoft now opens a door. All of you out there interested in giving xpages in IBM Connections a try now have the chance to get a reward for your efforts.

Win $1000 for your idea! Niklas put a little video together that should help you to get going. If you don’t have an IBM Connections environment IBM jumps in. You can work on a shared image provided in the IBM Smart Cloud. It is running IBM Connections 3.0.1, Domino 8.5.3, SSO already up and running and the latest Extension Library. Just drop a note to Niklas (niklas_heidloff at de dot ibm dot com) and he will give you access to the image.

The submissions are due on December 2nd 2012. This sounds a long time but do not underestimate the time till you got everything in your bag to get you going. So send a new mail to Niklas now!

Happy coding and good luck!

dojo.byId(“#{id:idOfMyComponent}”);

I googled a bit but was not able to find a solution for this problem. There are many hints but you need to bring them together to get the result. Here is the code that finally worked for me:

var idOfElementToSetValueTo= ”;
var idOfElementToCallPartialRefreshOn= ”;
dojo.query(“[id$=\\:elementID]“).forEach(function(node, index, arr){
                         idOfElementToSetValueTo = node.id;                           
                   });;
dojo.query(“[id$=\\:refreshID]“).forEach(function(node, index, arr){
                    idOfElementToCallPartialRefreshOn= node.id;                           
                   });;
 dojo.byId(idOfElementToSetValueTo).value=strFilterVal;
XSP.partialRefreshPost(idOfElementToCallPartialRefreshOn,{});

The only downside is that if there are more components on the page all ending with the same “:id”, the function provided will only return the last element. You might want to extend the function to suit your needs then.

Hope this helps!