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

Improve IBM Notes Client Performance

To all of you out there yelling and swearing at your Notes Client: There is something you can do to improve the performance! Some small changes have a great impact on startup, I/O and network speed. Here are a few tips that you should be aware of.

NSF_UPDATEODS

This is a notes.ini setting that has been introduced with Notes 8.5.2 and tells the client to update all databases to the latest ODS (On Disk Structure). The current ODS version is 51 and improves performance compared to its predecessor by 50%. This improves the client startup process and the process of opening local databases dramatically. So go ahead and add

NSF_UPDATEODS=1

to your notes.ini. Continue reading

Bruce Allmighty

Bruce, thanks for not beating me up at LS 12! 🙂

That’s the short story, here’s the longer version:

I’ve heard a lot about Bruce Elgort before I put foot on the Boardwalk and met him personally. As everybody is aware of knowing some professional things about a person does not mean knowing that person at all. So with the first words we exchanged I pulled a giant boner. Well, somebody kicked me and explained the situation and I was so ashamed I almost jumped into the lake nearby. Bruce told me I can make up for it by buying him some ice cream. At least a light at the end of the tunnel! Continue reading

4th OpenNTF Development Contest – First summary

The contest is over, long live the contest! This is what I think is the outcome of the latest OpenNTF development contest. Many people might have been a bit tired of contests and I heard voices saying: „Uh, the 3rd contest is just over and they already start a 4th?“. Or: „The contest ball is flat, the air has gone!“. Looking back to the start of the 4th contest I must admit that people were not so wrong when they moaned. But the run-time of the contest was chosen a bit longer and the air returned to the ball in the last couple of months, the momentum came back.

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. Continue reading

IBM Connections 4 – Key Features and Benefits

2 weeks ago IBM announced IBM Connections 4. This is an exciting new version which adds so many new capabilities to this great piece of software that every existing installation should get updated as soon as possible. Here is a short video showing an overview.

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!

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.

Get IBM Connections 4.0

Today IBM announced IBM Connections 4.0. It will be available as electronic software download on September 7 and media will be available from october 2. IBM Connections 4 comes with a set of new features. It is designed to help you:

  • 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

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.