BP204 - Enhancing IBM Lotus Quickr for IBM Lotus Domino with Web 2.0 Integration

Troy Reimer, Viktor Krantz
These speakers were the driving engineering force behind the popular Lotus Quickr Templates that shipped with Quickr 8 and have been continually updated. As well, they have been working with Quickr and its predecessors since 2000, developing applications for the world’s largest Lotus Quickr customers. In this session, we’ll introduce you to some innovations that make Lotus Quickr even more valuable to your teams - integration with external sources, tagging, categories, and more. Learn the techniques and pre-packaged code libraries that make Lotus Quickr development easy and valuable to your organization.

BP215 -”The Great Code Giveaway”: The Art of the Possible

Rob Novak, Viktor Krantz
Once again, we’ve invested hundreds of hours into new examples and applications that will open your eyes to “The Art of the Possible” with Lotus software. In its eighth year at Lotusphere, The Great Code Giveaway provides you with a new perspective and new applications that you can use to enhance your IBM Lotus Domino investment. Come and watch while we unveil this year’s valuable - and free - applications and examples!

SHOW202 - Show ‘n Tell: Developing for Lotus Quickr Domino Services

Troy Reimer, Viktor Krantz
In this session, you’ll learn how to develop custom themes for Lotus Quickr, implement custom forms, and build an application that can actually be used in your organization. We’ve developed a template for you to follow along, learning the intricacies of Lotus Quickr development and the most efficient approaches to programming based on their experience with the platform. Take away new approaches, new methods, and a new appreciation for what you can accomplish with Lotus Quickr.

After CU I flew over to Västerås, Sweden to visit my family over there. 5 days of visiting with my father and mother and siblings was just great. In only a few days I managed to eat both moose, Swedish craw fish and Swedish roe deer. All superbly prepared by my sister and sister-in-law. The chanterelle sauce that we had with the roe deer was unbelievable.

Monday evening I left Sweden and flew back to London where Carl Tyler picked my up at the airport and I got to spend a couple of nights with his parents outside London. Tuesday we went to Oxford where we walked around for a few hours looking at the old universities there. Very nice. Thank you Carl (and Carl’s parents) for a couple of wonderful days.

It is great to be out on these speaker engagements and visit friends you only see a few times a year but boy is it nice to back home with family again.

Collaboration University 2008 - Chicago & London

So I’m off to Collaboration University after the last few weeks being very hectic. Wrapping up a few customer projects needed to be finished before it all starts and of course the CU slides and demo code as well. I’m out for almost 3 weeks straight this time, first Chicago and then off to London for the repeated event there.

The last few days I get to back to the old country (Sweden) and visit with my family there. I’m also visiting with a couple of old friends preparing for our football trip to New York in October-November. More on that later.

I have three sessions at CU this year:

• Quickr Custom Themes: What a Difference a Version Makes!
• Leveraging the Dojo Toolkit, JavaScript, and JSON in Quickr
• Tags and Categories in Quickr: How to Add, Use and Present

I’m really looking forward to Collaboration University this year. Record attendance and great locations are going to make a great conference.

CU there.

Our approach the past two years has been to quickly get the basics out of the way on the first day then progress rapidly into meatier stuff by afternoon. Even so, we’d get a few complaints from those who have more experience, because they already knew all the morning content. That worked “OK”, but this year with the delivery of these early sessions outside the confines of the three onsite days, we’ve found a great solution. Those who need and want the basics get them - and can attend all of these sessions on their own time - and those who don’t are not missing anything because we’re starting the conference at a higher level.

As an example, Carl Tyler put together this 5-minute segment of his pre-conference video on Installing and Configuring Eclipse for Sametime Plug-in Development. It is the prerequisite session for his live session on creating Sametime plug-ins (makes sense), and in the full session you can follow along and prepare your own machine to be ready to use those live materials. Enjoy!

From Rob Novak’s blog:

The SNAPPS Quickr Templates at QuickrTemplates.com have been updated with various fixes and a new feature I’ll describe here. But first, a note on versions.

We elected to match version numbers with Quickr when 8.1 shipped, so 90 days ago when they were posted, our versions revved to 8.1. Now we also have fixes to the templates unrelated to the Quickr version number or hotfix level, so have taken our versioning out two decimal points - the new version is 8.1.0.1. If we have another release before IBM revs to 8.1.1 (or whatever’s next), our version will be 8.1.0.2. Clear? Good.

Enjoy!

CU Agenda - with Carl Tyler

Go over to Collaboration University and click on Sessions and Speakers pages and roll over things, change days, play around - it’s a very cool data-driven Domino application.

Today's tutorial: Dojo Tag Cloud Widget using dojo.data store

So I though it was time to post another Dojo widget tutorial. This time I have written a widget for displaying a tag cloud. Even though you could use it for any kind of links, the most common use is obviously tags from your blog or other website. The TagCloud widget is using dojo.data and any kind of store to display the tags. Let’s jump into some code shall we. In the bottom of this tutorial you will find links for downloading all the code.

First we need to add our core Dojo and dependencies to our JavaScript in the head of our HTML page.

<script type="text/javascript" src="/dojo111/dojo/dojo.js"
djConfig="isDebug: false, parseOnLoad: true, usePlainJson: true"></script>
<script>
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("mydojo.TagCloud");
dojo.require("dojo.parser");    // scan page for widgets and instantiate them
</script>

You can see that we added the ItemFileReadStore, after that we have the topic of the tutorial: mydojo.TagCloud and last we added the dojo.parser so that we can create our widgets by HTML markup. You can see that the name space for my widget is mydojo.TagCloud. That means that I’ve created a folder named mydojo in the same folder as the dojo, dijit and dojox folders.
Now we add the dojo.data store and the markup HTML for our Tag Cloud widget inside our body.

<body>
<div dojoType="dojo.data.ItemFileReadStore" jsId="cloudStore" url="tagcloud.json" /></div>
<div dojoType="mydojo.TagCloud" store="cloudStore"></div>
<body>

You can see what it looks like in example 1.

The link above will give you the default TagCloud widget. If you look at the code, through Firebug naturally, you’ll see that it is made up of a DIV element with an unordered list, UL, inside. The list has all the tags from our dojo store with different sizes. Larger for tags with more values.

Most people want a tag cloud to look like a tag cloud though For that we need to add some style to our code inside the head tag.

<style type="text/css">
.TagCloud {
font-family:Arial, sans-serif;
font-size:0.8em;
width:350px;
}
.TagCloud ul {
padding: 0pt;
margin: 0pt;
}
.TagCloud li {
display:inline;
}
</style>

See example 2.

As you can see in the style classes above we declared a font and width inside a class named “TagCloud”. That class is always added to the div tag that the widget creates. That default class name can be changed and you can also add other classes that I will explain later. We also declared that any UL tag inside “TagCloud” will not have any margin or padding. That is because the browser automatically adds some margin and padding to unordered lists and we don’t want that for our tag cloud. Last in our style sheet we add the definition of our list item, LI. We want it to display inline and not be in a list format.

Lets add some more style to our tag cloud before I explain what attributes we can pass in to our widget. We add some more attributes to our existing classes and add two more rules.

<style type="text/css">
.TagCloud {
font-family:Arial, sans-serif;
font-size:0.8em;
width:350px;
padding: 2px;
border:1px solid #666666;
background-color:#EEEEEE;
}
.TagCloud ul {
padding: 0pt;
margin: 0pt;
text-align:center;
}
.TagCloud li {
display:inline;
white-space:nowrap;
line-height:1.7em;
}
.TagCloud a:link, .TagCloud a:visited {
color:#FF0000;
text-decoration:none;
}
.TagCloud a:hover {
color:#666666;
text-decoration:underline;
}
</style>

View it in example 3.

Tag Cloud Widget Attributes

There are a number of attributes we can pass in to change behavior and/or functionality of our widget. If we open up our widget JavaScript file we will see a number of variables at the top. You can actually change all of those by just adding attributes to our widget HTML code. They are documented inline in the code but lets look at a few of them.

//sizeDifference: Boolean
//If we should show larger font for more tags
sizeDifference: true,

//fontMaxSize: Integer
//The size of the largest tag in percent
fontMaxSize: 200,

//fontMinSize: Integer
//The size of the smallest tag in percent
fontMinSize: 100,

So we can choose not to have a difference in size on the tags. How would we add that? Let’s look at the example below.

<div dojoType="mydojo.TagCloud" store="cloudStore" sizeDifference="false"></div>

See what it looks like in example 4.

We have just added the sizeDifference attribute with a value of false to our widget code. Other then that it is the same code as example 3 above.

We can also choose to have bigger difference in size on tags. As you can see I’ve added the fontMaxSize attribute to our widget DIV tag.

<div dojoType="mydojo.TagCloud" store="cloudStore" fontMaxSize="400"></div>

Really large fonts in example 5.

I mentioned earlier that you can also add more style sheet classes besides the default class “TagCloud” to your widget. By adding the normal “class” attribute to our DIV tag. Classes will be appended after the “TagCloud” class. The default class can also be changed by changing the “baseClass” attribute.

What happens when the user clicks the tag? Well, since I don’t know what should happen because it depends entirely on what your tags represent and also on what kind of server the code sit on. In this blog, based on Wordpress, the tag when clicked would take you to a url that look like:

/index.php/tag/the_tag

So how do we do that? Well, one of the variables/attributes in our TagCloud widget is “clickFunction” with a default value of “tagItemClicked”. So you can add JavaScript funtion named “tagItemClicked” or pass in a new value to “clickFunction”. I’m going to show you the first way. Let’s add the following code to our JavaScript in the head of our HTML page.

function tagItemClicked(sTag){
alert("You clicked on " + sTag);
}

See example 6.

If you click a tag it will alert the tag. Not very useful so let’s change it a little to make it work on my blog.

function tagItemClicked(sTag){
location.href = '/index.php/tag/' + sTag;
}

Updated to example 7.

Two other very important variables that we can change in our widget are the names of the item value names in our data.store. Default are “name”, “slug” and “count” and you can obviously keep those. Many times however you might not have the luxury over what your Ajax (XHR) call will return, or you just don’t like mine. In that case you can change them by adding the attributes “tagAttr”, “slugAttr” and “countAttr”.

Below is the JSON i’ve been calling with the ItemFileReadStore in all our examples so far.

{items:[
{name:"ajax", count:15},
{name:"beth", count:2},
{name:"blog", count:4},
{name:"calendar", count:3},
{name:"calendar entries", slug:"calendar-entries", count:2},
{name:"Collaboration University", slug:"collaboration-university", count:14},
{name:"cu-2007", count:11},
{name:"demo", count:6},
{name:"dojo", count:31},
{name:"domino", count:20},
{name:"family", count:9},
{name:"google", count:2},
{name:"ibm", count:5},
{name:"lotusphere", count:11},
{name:"lotus quickr", slug:"lotus-quickr", count:27},
{name:"movies", count:2},
{name:"podcast", count:3},
{name:"snapps", count:30},
{name:"templates", count:17},
{name:"tutorial", count:11},
{name:"widget", count:4},
{name:"xhr", count:3}
]}

As you can see it uses the default “name” and “count” attributes for each item. If however that would be changed to “word”, “special” and “number” everywhere…

{items:[
{word:"ajax", number:15},
{word:"beth", number:2},
{word:"calendar entries", special:"calendar-entries", number:2},
...
{word:"xhr", number:3}
]}

…we would change our HTML markup to:

<div dojoType="mydojo.TagCloud" store="cloudStore" tagAttr="word" slugAttr="special" countAttr="number"></div>

What is the “slug” attribute you might ask. When a tag need a different call than it’s name you can add the slug attribute. If none is there it will just use the name attribute instead. In the example above the tag “calendar entries” has a slug of “calendar-entries” that way we can display one way but still link to the right URL.

Calling our widget with JavaScript

What if we wanted to do all this by JavaScript instead? Well Dojo widgets have this build in so all we have to do is code our HTML page a little different.

We can delete the reference to “dojo.parser” in our SCRIPT since we no longer are parsing HTML markup and we would add the following JavaScript.

function createTagCloud() {
var oStore = new dojo.data.ItemFileReadStore({
url:"tagcloud.json"
});
var oCloudDiv = dojo.byId('tagCloudDiv');
var oCloud = new mydojo.TagCloud({
store: oStore
},oCloudDiv);
}

dojo.addOnLoad(function(){
createTagCloud();
});

Then in our body we would add the following HTML.

<body>
<div id="tagCloudDiv"></div>
</body>

JavaScript version example 8.

I hope you enjoyed this tutorial and I would love to read your comments. Here you can download the Dojo Tag Cloud Widget (335). Happy coding. 

Julian Robichaux is joining SNAPPS

For the first time in 5 years SNAPPS have hired a new member to our team. I’m thrilled to announce that Julian Robichaux is joining SNAPPS as a Senior Developer (or whatever he wants his title to be). Julian, who you know from six years of blogging at nsftools.com, the Taking Notes Podcast, and various speaking engagements at Lotusphere, The VIEW, ILUG, and others, brings 12 years of Notes & Domino experience to SNAPPS. Julian has provided companies and clients with a number of “out of the box” solutions, knows all the relevant programming languages and toolkits, and has extensive experience with relational database integration.

He spent a couple of days here in Overland Park with the team last week to make sure we were a good fit and let me say, I know it will be. Julian and I have met just briefly before at various conferences but I have followed his blog and the TNP’s closely. He will continue to work from his office in Georgia but will come in to the office every so often. He will be joining us for Collaboration University in September and will continue to speak at various events, just under the SNAPPS name now.

So Julian, I’m very excited about working with you and I know that SNAPPS will benefit from your knowledge and expertise. Hey, we might have some fun too.

Liz & Rob Novak

Today is SNAPPS president Rob Novak’s birthday. Rocky Oliver created a post where you can write a limerick for him.

Here is my contribution:

A man named Rob was a vegetarian
He was eaten for lunch by a librarian
Said the woman, “Hello!
You’d be tastier, for sure
If you had been salted and septuagenarian!”

Happy birthday Rob.