The Social Business Toolkit – First Project

In the first two posts in this series I talked about the Social Business Toolkit (SBT) in general and showed how to install all necessary items in order to use the SBT in XPages.

  1. The Social Business Toolkit (SBT)
  2. The Social Business Toolkit – Getting Started

Today we are going to build an XPage, pull data from IBM Connections and show this data in a Data Table control. So let’s go. First we have to define our endpoint. The endpoint in SBT terms is the definition of the data connection to IBM Connections. We are going to use Basic Authentication in this example. Open you faces-config.xml and add the following lines: Continue reading

The Social Business Toolkit – Getting Started

In my first post about the SBT I wrote about what it is and why you should use it. Today I am going to explain what you need to do in order to use the SBT in your projects. This little tutorial is based on IBM Domino, IBM Domino Designer (DDE) and Xpages.

So, first of all you need to download the SBT. Since it is an OpenNTF project it is quite obvious how to obtain it. Once you’ve downloaded it you can extract the zip File in an appropriate place on your disk. Have a look at the contents. You’ll find the following folder structure (based on sbtsdk-1.0.0.20140121-0336): Continue reading

XPages Database Open Dialog v2.0

I assume you’re all aware of the Database Open Dialog project on OpenNTF, right? The previous version has been around for 2.5 years now and has been downloaded almost 600 times!

Now say hi to version 2.0. It was completely redesigned using jQuery and Bootstrap 3. Some minor issues have been fixed and functionality was added to better configure and use the dialog. So all of you already using the previous version: Go ahead and test version 2.0. All others: Give the dialog a try, it won’t disappoint you and may be very helpful in your projects.

DBOpenDialogv20

hs.Workspace – Browser based Application Management

IBM Notes Users are used to their Client with all databases neatly ordered on different workspaces. Companies that are using Client Management Software provide their user’s with the databases they need to fulfill their daily tasks. These CM Systems allow administrators to add, move or delete databases from the workspaces.

Now we all agree that the Notes Client is in the autumn years of its life. More and more companies move their applications away from the Notes Client. Many companies rely on the Domino Server as their web server and use XPages as technology to web-enable existing applications. Using the Web Browser as Client means loosing the Application Management feature previously available in the Notes Client. hs.Workspace closes this gap!

hs_Worspace_Screen Continue reading

XPages – Create a responsive layout with Twitter Bootstrap – #3

Today I want to dig a little deeper into Twitter Bootstrap and show what does that magic and makes the design responsive. If you missed the first 2 articles feel free to get an introduction in part 1  and a first responsive design in XPages in part 2 now.

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:

Label Layout width Column width Gutter width
Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below

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.

Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible Hidden Hidden
.visible-tablet Hidden Visible Hidden
.visible-desktop Hidden Hidden Visible
.hidden-phone Hidden Visible Visible
.hidden-tablet Visible Hidden Visible
.hidden-desktop Visible Visible Hidden

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.

XPages – Create a responsive layout with Twitter Bootstrap – #2

Two days ago I wrote about Twitter Bootstrap (TB) and how to integrate it into an XPages application. I got a few responses and by what people are saying I reckon responsive design is an issue in the community. So here is part 2 of my series. Today I want to show you how to integrate Twitter Bootstrap into your database and how to create a first responsive layout.

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.

XPages – Create a responsive layout with Twitter Bootstrap – #1

In my current project I am developing an XPages application which is supposed to run in a web browser as well as on mobile devices. So before I started coding I had to make some decisions. Do I want to create different pages for different devices or is it better to create a responsive layout that takes the work to resize my pages? So I did some research and finally decided to try a responsive layout. Wait a minute, you haven’t heard of responsive web design yet? the I suggest to check out wikipedia for a start.

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.

XPages Tip: Get an element’s id outside XPages events with CSJS

I was facing a problem today where I tried to set a value and do a partial refresh within a client script block on my XPage. Since this script block is outside any XPage event, I could not use the following SSJS within my CSJS to get the IDs of the elements I want to set and refresh:

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!

XPages Twitter Controls go Mobile!

Last week I blogged about my Twitter Controls which I handed in to the 2. XPages Development Contest. It fulfilled the requirements of the contest by being a social app that uses the Twitter API and OAuth for authentication. One component was missing though: MOBILE.

So I sat down and checked the possibilities to make the app run on smartphones. There’s DOJO and the Mobile Controls integrated in the Extension Library 8.5.3. I took my first shot and had a mobile application together which pretty much has the same functionality as the web app in no time.

Then I checked jQuery Mobile which seems to be used by most of the developers out there. I toyed around with it for a while and put together an app based on jQuery Mobile that provides the same functionality as the web app – awesome! I named it hedersoft tweet v1.1 and uploaded it to openNTF.

UPDATE: Niklas created a new video showing the controls in action. Watch it on XPages.info or download it from the contest page.

Here are a few screenshots.