New release of Bildr

I have submitted a new release of my Bildr project on OpenNTF.

In case you are unaware of this project, the application allows you to quickly upload and share images within your network. Images are scaled and you can group them in albums.

The idea behind this app was to have a real case scenario to learn XPages, and frankly the learning experience has gone beyond expectations. I also have to thank Mark Leusink for his contributions.

This release fixes the problems I had with Google Maps. Although the solution is not ideal ( I would like to group markers) due to lack of time I am now satisfied with it.

I also used DDE and it’s search capabilities to remove redundant design elements.

Below you can see some screenshots of the application:

 

 

 

Download: Twitter Bootstrap in Domino Blog

Have you sometimes the feeling that in case you know too much it may be used against you?

Recently I posted how to include Twitter Bootstrap in the IBM Domino Blog template.  Some time ago I blogged frequently about administrating that same Blog application.

From my Twitter Bootstrap post I received some questions from people for help so the easiest way to assist would be to make an example application available for downloading. The NSF contains all the documents that are needed to utilize (or get started with) Twitter Bootstrap within a Domino blog.

I also added some sample blog posts and link documents that refer to websites for education and resources (themes).

Download

Here you can download the example:  link.

Instructions

  • Extract the file.
  • Sign the application with proper ID.
  • Apply proper ACL settings.
  • Open the Configuration document and apply correct settings.
  • Launch the application in browser.
    • In case the HTML layout is rendered properly I suggest to save ALL documents under HTML Templates section.

Good luck!

Screenshots

Homepage
Document
A document list (~ Notes view)
Mobile display

Adding Twitter Bootstrap to the IBM Domino Blog template

Our current design layout for a blog application was mainly based on the ‘by default’ design from the ‘early days’. A three column layout with a header and footer section.

(I guess you recognize this)

All nice wrapped in a HTML table to structure the layout. Maybe not the best and convenient solution, but quiet ‘solid’ compared with CSS layouts.

Nevertheless users were complaining, mainly because they import large images, which look nice on large screens, but not so nice on smaller ones. In such cases the right column was only visible when scrolling.

We have been so nice to add some corporate design guidelines flavours to the design, so users can recognize themselves when publishing within and beyond our corporate walls.

I guess we are talking now years ago, in the days that there were no mobile visitors with smartphones and tablets.

Time to move-on!

Since I noticed some buzz in the collaboration community around Twitter Bootstrap and responsive web design I decided to take a look around to see if we could bring the Domino template to the next level.

I did not take so much time to compare Twitter bootstrap to other frameworks (I leave that up to the pro’s) but after taking a look around, this framework seemed to be pretty solid and includes some other valuable components (which do not win from our oneUI components!).

Here is a summary how I implemented Twitter Bootstrap.

  • Update the Page  Templates documents to support the grid layout.

Here an example how most Page Templates look like (this is code for the homepage)

<!DOCTYPE html>
<html lang=”en”>
<body data-spy=”scroll” data-target=”.bs-docs-sidebar”>

<$DXTemplateBlock Name=”HTMLTop”$>
<$DXTemplateBlock Name=”Banner”$>
<div class=”container container-body”>
<div class=”row-fluid”>
<div class=”span3″>
<$DXTemplateBlock Name=”LeftSideBar”$>
</div>
<div class=”span9″>
<$DXContent$>
</div>

</div>
</div>
<$DXTemplateBlock Name=”HTMLBottom”$>

</body>
</html>

As you can see I have choosen for a ‘2 column layout’. Basically because I did not get the ‘holy 3 column’ layout properly established (with a responsive design). If you got the proper solution, please drop a line in the comments..

  • Update the Block Template documents.

Here is the code for my ‘top navbar’ section:

<head>
<link rel=”icon” type=”image/png” href=”../dx/favicon.ico/$file/favicon.ico” />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title><$DXTitle$></title>
<!– HTML5 shim, for IE6-8 support of HTML5 elements –>
<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt;
<![endif]–>
</head>

<!– Navbar ================================================== –>
<div class=”navbar navbar-inverse navbar-fixed-top”>
<div class=”navbar-inner”>
<div class=”container”>
<button type=”button” class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”brand” title=”<$DXTitle$>” href=”#”><img src=”../dx/logo.gif/$file/logo.gif” border=”0″></a>
<div class=”nav-collapse collapse” id=”topnav”>
<ul class=”nav”>
<li class=””><a href=”#”>Home</a></li>
<li class=””><$DXLogin$></li>
<li class=””>
<$DXAdmin$>
</li>
</ul>
</div>
</div>
</div>
</div>

The HTML5Shim code is needed to insert the HTML5 header and footer elements, which IE7 does not support.

Here is the code for my ‘header section’:

<!– Subhead ================================================== –>
<header class=”jumbotron subhead” id=”overview”>
<div class=”container”>
<div class=”row”>
<div class=”span3″ style=”margin-top:20px;”><img id=’id_photo’ class=’left’ src=’../dx/profileNoPhoto.png/$file/profileNoPhoto.png’ alt=’logo’ title=’logo’ height=’51’ width=’51’ /></div>
<div class=”span6″>
<h3><$DXTitle$></h3>
<h5><$DXDescription$></h5>
</div>
</div>
</div>
</header>

As you can see, you really need that HTML5Shim code here!

Here is the code for my ‘left column’ containing the search bar and navigational links (tag cloud, recent entries):

<!– Docs nav ================================================== –>
<div class=””>
<form class=”search” style=”margin:10px 0 0 0;” title=”Search” method=”get” id=”searchForm” action=”javascript:doSearch(”,”,”,”);”>
<input title=”Search” type=”text” alt=”Search” style=”width:180px;” value=”Search” name=”s” id=”Query” onblur=”if(this.value==”) this.value=’Search’;” onfocus=”if(this.value==’Search’) this.value=”;” />
<input type=”image” src=”../search.gif” title=”Search” alt=”Search”/>
</form>
</div>

<div>
<h4>Hot Topics</h4>
</div>
<ul class=”nav nav-list bs-docs-sidenav”>
<$DXHighlighted$>
</ul>
<div>
<h4>Tags</h4>
</div>
<div class=”tagCloud”>
<ul><$DXTagCloud$></ul>
</div>

<div>
<h4>Latest entries</h4>
</div>
<ul class=”nav nav-list bs-docs-sidenav”>
<$DXRecentSubjects$>
</ul>
<br/>

I wonder how I could get this column BELOW the second, content column, when the media queries kick in for e.g. smaller devices. I have not find out yet how to do this (again you may contribute here to improve my design)…

Then my ‘main / content column’:

<div id=”content”>

<a id=”mainContent” name=”mainContent”></a>

<div id=”entries” class=”entry”>

<div class=”page-header”>
<h3><$DXSubjectLink$></h3>
<p class=”pull-right” width=”80″ height=”80″ alt=”<$DXAuthor$>”/><$DXAuthorImageLink$></p>
<h6><$DXAuthor$> &nbsp;<span class=”date”><$DXLocaleLongDate$> <$DXTime$></span></h6>
<p style=”font-size:0.9em;”><img id=’id_photo’ src=’../dx/tag_blue.png/$file/tag_blue.png’ alt=’tags’ title=’tags’ height=’16’ width=’16’ /><$DXCategory$></p>
</div>
<p><$DXItemContent$></p>
<h4>Comments [<$DXCommentCount$>]</h4>
<p><$DXInlineComments$></p>
<commentblock>
<ul class=”actions inlinelist”>
<li class=”first”><$DXInlineCommentLink$></li>
</ul>
</commentblock>
<br/>
</div>

</div>

Nothing strange here. Therefore a preview:

Finally the footer section. This contains now mainly the navigational links that were displayed in the right column. For performance I load the JQuery and Bootstrap scripts at the end:

<!– Footer ================================================== –>
<footer id=”bottom-nav” class=”footer”>
<div class=”container”>
<p class=”pull-right”><a href=”#”>Back to top</a></p>

<div class=”row”>
<div class=”span3″>
<h4>Feeds</h4>
<ul class=”footlink”>
<li><img src=”../dx/Feed.png/$file/Feed.png” border=”0″><$DXRSS$></li>
<li><img src=”../dx/Feed.png/$file/Feed.png” border=”0″><$DXRSSComments$></li>
</ul>
</div>
<div class=”span3″>
<h4>Blog Roll</h4>
<ul class=”footlink”>
<$DXLinks$>
</ul>
</div>
<div class=”span3″>
<h4>Recent</h4>
<ul class=”footlink”><$DXRecentSubjects$></ul>
</div>
<div class=”span3″>
<h4>Archive</h4>
<ul class=”footlink”><$DXMonths$></ul>
</div>
</div>

<p><$DXCopyright$></p>
</div>
</footer>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
<script src=”bootstrap.min.js/$file/bootstrap.min.js”></script>

Stylesheets

I noticed that default a stylesheet called global.css is loaded (I am not sure where that comes from, but I see it in the page source – please get me some proper system documentation, IBM).

So in this stylesheet I load Bootstrap and it’s responsive part:

/* First, pull in Bootstrap’s stylesheet */
@import url(bootstrap.min.css/$file/bootstrap.min.css);
@import url(bootstrap-responsive.min.css/$file/bootstrap-responsive.min.css);

/*
Custom Blog Stylesheet
*/
/* Now the custom styles */

body{
font-size:0.8em;
font-family:Verdana,sans-serif;
background-color:#FFFFFF;
background-image:url(‘../dx/grid-with-white.png/$file/grid-with-white.png’);
background-repeat:repeat scroll 50%;
}

For the top navbar we have guidelines to use a gradient style. I noticed that IE, Firefox and Safari (remember our mobile target) behave a bit different here so I stated:

.navbar-inverse .navbar-inner {
overflow:auto;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#e1e1e1);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#e1e1e1)”;
background: -moz-linear-gradient(rgba(245, 245, 245, 0.6), rgba(204, 204, 204, 0.6)) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e1e1e1));
border-bottom: 1px solid #DDD;
font-family:Arial,sans-serif;
color: #555555;
}

For the footer we use a gradient image:

#bottom-nav{
font-size:0.9862em/1.5em Verdana,sans-serif;
font-family:Verdana,sans-serif;
background-color:#E1E1E1;
background-image:url(‘../dx/footer-grid.png/$file/footer-grid.png’);
background-repeat:repeat scroll 50%;
}

Before having the HTML5Shim script applied IE7 refused to load an image for the background. Took some time to have that figured out.

Some final thoughts

Am I happy? For sure! In less than a day I transformed the blog application into a compatible site for mobile devices. No data migration to any new system/application or whatever!

Users can continue to work off-line (still a killer feature) just as they are writing a simple mail message. Import pictures taken at site visits all around the world and share it with their colleagues (occasional we notice also pictures from company parties, birthdays and social celebrations).

Blog owners can still modify the look & feel of any blog application, without disturbing anything for other blog applications. I heard stories of vendors that do not recommend to modify the common page of their collaboration platform, duh!

It would be nice if IBM would lift up the design of the DOMINO blog template to 2012 (2013 is also fine for me) with XPages and connection points to other social services.

If not, at least they can provide a complete, proper documentation of the application, so we understand what we implement in our environment. But this last request seems like ‘shouting to the wind’ (a Dutch saying).

Note: this was my first encounter with Twitter Bootstrap, so suggestions for improvement are more than welcome!

Cheers!

New release of Bildr released =)

Today I released a new version of my xpages playground aka Bildr (4.01 so never mind the bugs) on OpenNTF (link).

Beside the following ‘small media campaign’:

 

and this blog-post we’ll see how people pick up this new release.

What’s new?

Extension Library

Personally I have been working quite a while now with the extension library, and now I have implemented this more in the application:

  • Application Layout control
  • Data view control
  • Widget control
  • Outline control
  • Mobile controls

 

Mobile interface

This is not the first Notes application I have mobilized. Maybe the ‘modular’ approach makes the mobile interface of interest for other developers.

The applications contains a subset of reusable custom controls to setup quickly a mobile interface for ANY Notes database.

I assume that mostly you want to display View information in a mobile app, so custom controls for a flat and a categorized view enable you to quickly mobile multiple Notes views.

Also the mobile interface contains custom controls to define splashscreen, bookmark icon and more stuff like that to build a more complete mobile Notes app.

Less design elements

Less is more we assume. Especially if you have an application that was built over more than one version of Notes (8.0x, 8.51, 8.53) and where more one developer has contributed, your design tend to become a bit inefficient. Introducing the Extension Library also made it possible to reduce the number of design elements by using ‘out of the box’ controls e.g. tag cloud control and  layout control.

OneUI v2.1

OneUI is dead, long live the new oneUI! (probably we will shout this out loud soon again).

 

Upgrade or start from scratch?

If you are a current user of Bildr I would not dare to simple upgrade the application design. You can try, I haven’t (due to lack of time).

Start with a new DB from scratch will work fine =)

Which enhancements to expect?

In the next release I would like to add some missing functionality e.g. rating, geolocation with Google maps v3. If possible I would like to further eliminate the number of design elements, remove old code.

Ideas can be posted here:

http://openntf.org/ideajam/ideajam.nsf/ProductByAreaMostRecent?openview&restricttocategory=Bildr

For now I will relax the next couple of evenings and work on my real-world social life =)

Teamroom XL fix – Filter documents by subteam

Some may enjoy a longer vacation than others, most of us will land in the same nest again.

At the moment we are reviewing the Teamroom 8.5.3 XL template, to check if this is a more user-friendly mobile interface for document sharing solution than MS SP.

However I noticed a problem with Subteam filtering option in the ‘All documents’ view. The problem is that the xvwDocsByTeam view is not correct (the wrong field name is present in the view design)…

Here is the fix:

  1. Open xvwDocsByTeam view
  2. Change the “Team” column’s value to:

@If(form=”Status”; “Team Status”; SubteamInterest)

Now back to user-testing and acceptance =)

New version of CardScanR released on OpenNTF

The previous version of my project on OpenNTF never made it to the catalog due to some issues with used code (I never bothered to mention it in any notice file).

I thought it would be easier in future updates to be more independent from used examples so I rebuild the application with help of the extension library and especially the application layout control.

I also applied the 8.5.3 themes.

Here you can find the new release:

http://www.openntf.org/internal/home.nsf/releases.xsp?action=openDocument&name=CardScanR&documentId=480044936833E659862578ED004CDF80

Screenshots are available here:

http://www.openntf.org/internal/home.nsf/screenshots.xsp?action=openDocument&name=CardScanR&documentId=480044936833E659862578ED004CDF80

I included paypal donation links since I want to buy a motorbike again, someday. Thanks for contributing  =)

Domino Blog tip: set XML/Content Encoding value

Apologies that this blog starts to look more like an archive but I have been lately been involved in non-development activities like attending Lotusphere 2012. I will write later an article on that one.

Today I received an incident report from a collegue about a problem with the Domino blog template (the one everybody wants to have with XPages, hint IBM (this time with documentation))…

The RSS feeds were broken, or at least throwing up an error. It turned out to be that Swedish characters in names were causing the problem. Since I work for a Swedish company it is likely that the error would occur more often and in more blogs/places… so worth a search on Google.

I found the following document very helpful:

http://blog.inetfusion.com/A55CF7/technotes.nsf/dx/11242009023753PMEWES7R.htm

The Fix
– Added the value ‘ISO-8859-1’ to the configuration document, under the Syndication tab, field ” XML/Content Encoding:” down towards the bottom.

When replacing the computed value with “ISO-8859-1”, it appears to be working. Have not changed the lookup form value. This is probably in some documentation somewhere.. but there’s no documentation with the template.

The character set was set to UTF-8 because they should support Swedish characters (link). When setting them to ISO-8859-1 the errors did no longer occur.

Work in progress – CardScanR

Yesterday I registered a new project on OpenNTF, called CardScanR.

Since this project mainly re-uses code from an old article here on this blog the work progresses pretty well.

Here is what I have come up with so far.

Administration panel:

Adding a new event:

And the scan form:

When pressing the ‘Scan’ button the card scanner will be activated and the values read from a business card are sent to the screen.

All very nice! Especially XPages makes the development now much more a piece of cake. Also the OneUI theme makes it more easy to present a more consistent interface.

Hopefully I can upload the first release before a short trip to the Netherlands…

New project on OpenNTF – Viewr

I have created a new project on OpenNTF named ‘Viewr’. The application allows to distribute movies across your network using JWPLayer.

Some part of the code has already been submitted to OpenNTF via a custom control. But now you have it in a working application!

Please be aware of the license model for JWPLayer and that there are commercial licenses for the LongTail Video products. Luckily the prices are not that harsh.

The application has never been in real use in my organization and is therefor not widely tested. I am curious about your experiences and feedback.

I also would like to invite developers to participate in the project. For example a limited set of formats are allowed for upload. It would be much user friendly to have automatic conversion in place in the background.

Also thumbnails have to be uploaded by users themsselves and the duration time is a manual input.

I have no idea if this project will make it as long as my Bildr project, but we will see. My available time to work on these projects is limited.

Nevertheless: enjoy!