First, I assume that you've seen the keynote by now. If you haven't, here's the full session. If you skip to about 1:12:00 that's where my part begins.
I divided my demo into 3 parts:
- IBM Mail Next ( check out what Twitter had to say)
- New features in IBM Connections
- Customizing IBM Connections for an intranet portal
To render the activity stream as shown above, I needed five parts:
1. Include the right JavaScript
<script src="jquery-1.9.1.min.js"></script>
<script src="waterfall-master/demos/js/libs/handlebars/handlebars.js"></script>
<script src="waterfall-master/demos/js/waterfall.min.js"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>
2. Create the proper CSS for styling
<style type="text/css">
.homepage {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-weight: 300;
color: #444;
line-height: 1.2;
background-color: #f0f0f0;
padding-left: 12px;
margin: 0 auto;
width: 1000px;
font-size: 14pt;
}
.columnHeader {
font-size: 150%;
padding-left: 13px;
}
a {
color: #1c8aae !important;
text-decoration: none !important;
}
.date {
color: #d9d9d9 !important;
text-decoration: none !important;
}
.timeago {
color: gray !important;
border-bottom: none !important;
}
.card {
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 5px 5px 15px 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
background: -moz-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
width: 415px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.newsfeed {
//padding-left: 20px;
float: left;
width: 450px;
}
.leftColumn {
padding: 10px 20px 20px 20px ;
float: left;
}
.rightColumn {
float: left;
width: 325px;
padding-top: 10px;
}
.photo {
width: 50px;
height: 50px;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
}
.message {
font-size: 75%;
}
.attachment {
max-width: 320px;
max-height: 240px;
}
.attachDiv {
padding: 5px 0;
height: 240px;
}
.signature {
font-size: 90%;
color: #666 !important;
}
</style>
3. Create a placeholder for the HTML to be rendered asynchronously
<body style="background-color: #f0f0f0; margin: 0; overflow: scroll;">
<div class="homepage">
<div class="newsfeed">
<p class="columnHeader">News</p>
<div id="container" class="container"> <!-- activity stream will be rendered here --> </div>
</div>
</div>
....
4. Create a template for how I wanted it to look (that way the Waterfall plugin knows how to render the activity stream)
<script type="text/x-handlebars-template" id="waterfall-tpl">
{{#list}}
<div class="card">
<div class="message">
<div class="leftColumn">
<img class="photo" src="{{photoId actor}}" />
</div>
<div class="rightColumn">
{{{title}}} {{#if object.summary}} "<i>{{{object.summary}}}</i>" {{/if}}
<br/>
{{#each object.attachments}}
<div class="attachDiv">
<img class="attachment" src="{{this.url}}" />
</div>
{{/each}}
<br/>
<div class="signature">
<img style="vertical-align: middle;" src="{{generator.image.url}}"> <a class="date" href="{{object.url}}">
<abbr class="timeago" title="{{published}}">{{makeDatePretty published}}</abbr>
</a> • {{object.likes.totalItems}} Likes • {{object.replies.totalItems}} Comments • Save This
</div>
</div>
</div>
</div>
{{/list}}
</script>
5. Call Waterfall against the Activity Stream API
<script>
$('#container').waterfall({
itemCls: 'card',
colWidth: 420,
gutterWidth: 20,
gutterHeight: 20,
maxPage: 1,
isAnimated: true,
isFadeIn: true,
debug: false,
checkImagesLoaded: false,
path: function(page) {
return 'http://connections.demolotus.com/connections/opensocial/basic/rest/activitystreams/@me/@all/@all?shortStrings=true&rollup=true&format=json&page=' + page;
}
});
</script>
And there you have it! This will give you the activity stream in a multi-column format with a rendering similar to what you see in Pinterest. To change how it looks, you mostly have to look at steps 2 and 4 above and provide the layout/styling you want.
In the next few posts, I'll share the code for the other pages. But really it all came down to Waterfall! Once you learn that plug-in, there's tons you can do !!!
I hope this is helpful!