Collaboration Today

November 10, 2014, 1:12 am

Since last Friday, I am a member of the curators team of Collaboration Today.
Curators add content to the site, categorize it and can mark to show up on the home page.
I hope in this manner to contribute further to the Notes Domino XPages community.
For those who do not yet know Collaboration Today.
Collaboration Today is a news aggregator for IBM Collaboration Solutions professionals covering news about various IBM products like IBM Connections, IBM Domino, IBM WebSphere Portal etc. and cross product topics like mobile, cloud and analytics.

Collaboration Today was created by Bruce Elgort, Per Henrik Lausten, Serdar Basegmez, Frank van der Linden and Niklas Heidloff in the summer of 2012.

Follow Collaboration Today on Twitter.
Website Collaboration Today.

↧

XPages Goes Responsive

November 10, 2014, 4:23 am

≫ Next: Demo Database XPages And More

≪ Previous: Collaboration Today

Bootstrap is now part of the latest XPages Extension Library!
Responsive Web Design Support in XPages, Enhanced Application Layout Wizard and Enhancements to the theme combo boxes in the Xsp Properties editor have been added to the new release of the XPages Extension Library.

From the release notes:
Support for Bootstrap, a Responsive Web Design (RWD) framework, is a new feature that has been added to the new release of the XPages Extension Library. It comes in the form of an XPages Responsive Bootstrap plugin that you can leverage in XPages applications.
The plugin provides two themes that you can use in your applications as well as Bootstrap v3.2.0 & jQuery v2.1.1. With Bootstrap you can create dynamic responsive web applications that provide an optimised user experience for a range of devices, from mobile phones to large desktop monitors.

Responsive Application Layout Configuration

The XRB plugin adds a new renderer for the Application Layout control and a new Application Configuration complex type for the control. The new renderer type (com.ibm.xsp.theme.bootstrap.layout.ResponsiveAppLayout) is automatically applied to Application Layout controls in your application when you enable either of the Bootstrap themes in the application's xsp.properties. The renderer gives the Application Layout a Bootstrap look and feel, as well as making the control responsive.
The new Bootstrap Responsive Application Configuration further enhances the responsive capabilities of the App Layout control. You can add it to a new App Layout control using the enhanced Application Layout wizard or via the Properties panel for the control.

You can also update existing Application Layout controls to use the responsive configuration, by changing your application layout configuration from "xe:applicationConfiguration" or "xe:oneuiApplication" to use "xe:bootstrapResponsiveConfiguration" instead.

jQuery 2.1.1 is packaged as part of the XPages Repsonsive Bootstrap plugin. "jquery-2.1.1.js" is provided as a resource in the "Bootstrap3.2.0"& "Bootstrap3.2.0_flat" themes.

You can download the new release from the OpenNTF website : XPages Extension Library.

See also the blog post from Mark Leussink Bootstrap in XPages: now part of the Extension Library.

Using Bootstrap in XPages means from today using the OpenNTF XPages Extension Library!

↧

Demo Database XPages And More

November 14, 2014, 2:35 am

≫ Next: Select2 Placeholder Combo Box

≪ Previous: XPages Goes Responsive

The first version of the demo database is available for download and contains the examples below.
The focus in this first version is on the code examples and not (yet) on the UI.
The demo database uses the OpenNTF Bootstrap4XPages plugin which will be 'replaced' in the next version of the demo database. The OpenNTF Bootstrap4XPages plugin will be included in the new release of the OpenNTF Extension Library (see XPages Goes Responsive).

Remarks:
- The demo database uses the OpenNTF Bootstrap4XPages plugin.
- The database is set up for demonstration purposes only.
- For more information see the associated blog posts.
- Check the Custom Controls for the code examples.
- The WebContent Folder contains the following resources/plugins.

1. Bootstrap DateTimePicker
Associated XPage : BootstrapDateTimePicker
More info : Using Bootstrap DateTimePicker

2. Reusable Bootstrap Text / Rich Text Fields
Associated XPage : BootstrapReusableFields
Associated Custom Controls : ccRBSTextField / ccRBSRichTextField
More info : Reusable Bootstrap Text Field and Reusable Rich Text Field

3. Bootstrap Text Fields With Validation
Associated XPage : BootstrapTextFieldsWithValidation
Associated Custom Control : ccvalidationBSTextField
More info : Validation Reusable Text Field

4. Bootstrap RichText Field With Validation
Associated XPage : BootstrapRichTextFieldWithValidation
Associated Custom Control : ccvalidationBSRichTextField
More info : Validation Rich Text Field

5. Bootstrap Reusable Fields including validation (and Font Awesome)
Associated XPage : BootstrapReusableFieldsWithValidation
Associated Custom Controls : ccvalidationBSRichTextField / ccvalidationBSTextField
(aggregation of point 3 and 4)
More info : Font Awesome Icons

6. BootstrapCK4 Skin for CKEditor4
Associated XPage : CKEditorSkin
Associated Custom Controls : ccCKEditorSkin and ccBSCKE
More info : BootstrapCK4 Skin for CKEditor

7. Bootstrap FileInput Plugin
Associated XPage : FileInput
More info : Using FileInput in XPages

8. Select2 (Bootstrap4XPages Plugin)
Associated XPages : Select2InXPages / Select2InXPagesPlugin
Associated Custom Controls : ccselect2 / ccselect2plugin
More info : Using Select2 in XPages (Part I) and Using Select2 in XPages (Part II)

9. Using Font Awesome Icons
Associated XPages : FontAwesomeIcons / FontAwesomeIconComputedText
Associated Custom Controls : ccRBSTextFieldFA / ccRBSTextFieldFAComputedText
More info : Font Awesome Icons

The demo database will be expanded in the future with more examples associated with future blog post.

Download Demo Database XPages And More

↧

Select2 Placeholder Combo Box

November 17, 2014, 2:12 am

≫ Next: Select2 minimumInputLength

≪ Previous: Demo Database XPages And More

Following the XPages And More Demo Database I got some questions regarding a placeholder in Select2 for a single value field.
In this blog post I describe how to add a placeholder to a Combo Box.
The placeholder can be declared via a data-placeholder attribute attached to the select, or via the placeholder configuration element.
When a placeholder is used for a non-multi-value select box such as a Combo Box, an empty tag is required as a first option.
Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.

A. Declaration via a data-placeholder attribute

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).select2();
}
);
]]></xp:this.value>
</xp:scriptBlock>

<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}">
<xp:this.attrs>
<xp:attr name="placeholder"
value="Select a Category">
</xp:attr>
</xp:this.attrs>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list; }]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>

Result

B. Declaration via placeholder configuration element

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).select2({
placeholder: "Select a category",
allowClear: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list; }]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>

The required empty tag can be added through an empty array 'value' as a first selection.

var arr = new Array("")

A possible problem can be that there is no empty value present in the selection list itself.

If a value has been selected it can not be put back to an empty value.

To deselect the selected value an 'allow clear' element can be added to the comboBox.

Note that this option only works with non-multi-value based selects because multi-value selects always provide such a button for every selected option.

Result

Sample Code Custom Control

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.data>

<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>

</xp:this.data>

<xp:this.resources>

<xp:script

src="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"

clientSide="true">

</xp:script>

<xp:styleSheet

href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.css">

</xp:styleSheet>

<xp:styleSheet

href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css">

</xp:styleSheet>

<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>

</xp:this.resources>

<xp:scriptBlock id="scriptBlock2">

<xp:this.value><![CDATA[

$(document).ready(

function() {

x$( "#{id:comboBox1}" ).select2({

placeholder: "Select a category",

allowClear: true

});

}

);

]]></xp:this.value>

</xp:scriptBlock>

<xp:scriptBlock id="scriptBlock1">

<xp:this.value><![CDATA[

$(document).ready(

function() {

x$( "#{id:listBox1}" ).select2({

placeholder: "Select a software category"

});

}

);

]]></xp:this.value>

</xp:scriptBlock>

<xp:panel>

<h1>

Select2

<xp:span style="color:rgb(255,255,255)">.</xp:span>

<small>Combo Box / List Box</small>

</h1>

</div>

Select2 - Combo Box

<xp:comboBox id="comboBox1"

value="#{document1.Categories}">

<xp:selectItems>

<xp:this.value><![CDATA[#{javascript:var arr = new Array("");

var res = @DbLookup("", "byKeyWord", "Category", 2);

var list = arr.concat(res);

return list; }]]></xp:this.value>

</xp:selectItems>

</xp:comboBox>

</div>

<div class="panel-footer">Combo Box - Single Value</div>

</div>

Select2 - List Box

<xp:listBox id="listBox1"

value="#{document1.Categories}" multiple="true">

<xp:selectItems>

<xp:this.value><![CDATA[#{javascript:@Text("");

@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>

</xp:selectItems>

</xp:listBox>

</div>

<div class="panel-footer">List Box - Multiple Values</div>

</div>

</xp:panel>

</xp:view>

In one of the next blog post I will also be discussing some other features of Select2.

↧

Select2 minimumInputLength

November 25, 2014, 1:26 am

≫ Next: Select2 maximumSelectionSize

≪ Previous: Select2 Placeholder Combo Box

In this blog post I describe the basic use of the property minimumInputLength which can easily be added to a Select2 field.
Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful.
With this property the number of characters necessary to start a search can be indicated.
The property minimumInputLength can not be added as an attribute to a Combo Box / List Box.

<xp:this.attrs>
<xp:attr name="minimumInputLength" value="2"></xp:attr>
</xp:this.attrs>

The property minimumInputLength is also NOT available in the Select2 Picker for Combo / List Box from the OpenNTF Bootstrap4XPages plugin.

So the property minimumInputLength has to be added as an Select2 option.

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).select2({
placeholder: "Select a category",
allowClear: true,
minimumInputLength : 2
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

Result

Sample Code Custom Control

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:bx="http://www.openntf.org/xsp/bootstrap">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script
src="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"
clientSide="true">
</xp:script>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.css">
</xp:styleSheet>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css">
</xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).select2({
placeholder: "Select a category",
allowClear: true,
minimumInputLength : 2
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).select2({
placeholder: "Select a software category",
minimumInputLength : 2
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div class="page-header">
<h1>
Select2
<xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small>
</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list; }]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1"
value="#{document1.Categories}" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@Text("");
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</div>
</xp:panel>
</xp:view>

↧

Select2 maximumSelectionSize

November 25, 2014, 4:01 am

≫ Next: IBM Verse

≪ Previous: Select2 minimumInputLength

In this blog post I describe the basic use of the property maximumSelectionSize which can easily be added to a Select2 field.
Select2 allows the developer to limit the number of items that can be selected in a multi-select control, for example a List Box. In the example below only 3 or less items can be selected.
If this number is less than 1 selection is not limited.
Once the number of selected items reaches the maximum specified the contents of the dropdown will be populated by the formatSelectionTooBig function.
The formatSelectionTooBig function returns a String containing "You can only select (maximumSelectionSize value) items" message or Function used to render the message.

The property maximumSelectionSize can not be added as an attribute to a List Box.

<xp:this.attrs>
<xp:attr name="maximumSelectionSize"value="3">
</xp:attr>

Just like the property minimumInputLength, the property maximumSelectionSize is also NOT available in the Select2 Picker for Combo / List Box from the OpenNTF Bootstrap4XPages plugin.

The property maximumSelectionSize has to be added as an Select2 option.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).select2({
placeholder: "Select a software category",
minimumInputLength : 2,
maximumSelectionSize : 3
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

Result

Sample Code Custom Control

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"

xmlns:xc="http://www.ibm.com/xsp/custom"

xmlns:bx="http://www.openntf.org/xsp/bootstrap">

<xp:this.data>

<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>

</xp:this.data>

<xp:this.resources>

<xp:script

src="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"

clientSide="true">

</xp:script>

<xp:styleSheet

href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.css">

</xp:styleSheet>

<xp:styleSheet

href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css">

</xp:styleSheet>

<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>

</xp:this.resources>

<xp:scriptBlock id="scriptBlock2">

<xp:this.value><![CDATA[

$(document).ready(

function() {

x$( "#{id:comboBox1}" ).select2({

placeholder: "Select a category",

allowClear: true,

minimumInputLength : 2

});

}

);

]]></xp:this.value>

</xp:scriptBlock>

<xp:scriptBlock id="scriptBlock1">

<xp:this.value><![CDATA[

$(document).ready(

function() {

x$( "#{id:listBox1}" ).select2({

placeholder: "Select a software category",

minimumInputLength : 2,

maximumSelectionSize : 3

});

}

);

]]></xp:this.value>

</xp:scriptBlock>

<xp:panel>

<h1>

Select2

<xp:span style="color:rgb(255,255,255)">.</xp:span>

<small>Combo Box / List Box</small>

</h1>

</div>

Select2 - Combo Box

<xp:comboBox id="comboBox1"

value="#{document1.Categories}">

<xp:selectItems>

<xp:this.value><![CDATA[#{javascript:var arr = new Array("");

var res = @DbLookup("", "byKeyWord", "Category", 2);

var list = arr.concat(res);

return list; }]]></xp:this.value>

</xp:selectItems>

</xp:comboBox>

</div>

<div class="panel-footer">Combo Box - Single Value</div>

</div>

Select2 - List Box

<xp:listBox id="listBox1"

value="#{document1.Categories}" multiple="true">

<xp:selectItems>

<xp:this.value><![CDATA[#{javascript:@Text("");

@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>

</xp:selectItems>

</xp:listBox>

</div>

</xp:panel>

</xp:view>

↧

IBM Verse

December 2, 2014, 12:32 am

≫ Next: Select2 Auto Tokenization

≪ Previous: Select2 maximumSelectionSize

IBM Verse integrates email, meetings, calendars, file sharing, instant messaging and social updates through a single environment. IBM Verse improves your productivity with an experience that personalizes and unites inbox, calendar, to-do's, social networks, chats, meetings and documents.
IBM Verse delivers a cloud-based approach to managing your workday.
Designed for web and mobile, with its simple, see-only-what-you-need interface, IBM Verse helps you focus on the things that matter most. Lightening-fast search and an array of intelligent, security-rich and engaging social apps help you prioritize and open up new ways to work.

Meet IBM Verse
Meet IBM Verse, a revolutionary product that will change the way you reimagine work.

A Day With IBM Verse

What does a day in the life of IBM Verse look like? Check out this three minute video on how IBM Verse can help you reimagine work

More info : IBM Verse

↧

Select2 Auto Tokenization

December 2, 2014, 4:48 am

≫ Next: Looking for a new job

≪ Previous: IBM Verse

In this blog post I describe the basic use of the Tokenization function which can easily be added to a Select2 field.
Select2 supports the ability to add choices automatically as the user is typing into a (search) field. This is particularly useful when the user should be able to quickly enter a number of tags by separating them with a comma or a space.
The tokenizer function can process the input typed into a (search) field after every keystroke and extract and select choices.
Tokenizer only applies to multi-selects.
The separators are defined in the tokenSeparators option, an array of strings that define token separators for the default tokenizer function. By default, this option is set to an empty array which means tokenization using the default tokenizer is disabled. It is recommended to set this option to a value similar to [',', ''].
In the example below the built in tokenizer function is used in combination with a Multiline Edit Box (inputTextarea).

The function has to be added as an Select2 option.

<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputTextarea1}" ).select2({
tags:["red", "green", "blue"],
tokenSeparators: [",", ""]
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

Result

Predefined Tags

Own input from the user in conjunction with entering a comma or space (tokenSeparators) to exit the input and add the tag(s) into the field.

Sample Code Custom Control

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:bx="http://www.openntf.org/xsp/bootstrap">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script
src="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"
clientSide="true">
</xp:script>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.css">
</xp:styleSheet>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css">
</xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).select2({
placeholder: "Select a category",
allowClear: true,
minimumInputLength : 2
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).select2({
placeholder: "Select a software category",
minimumInputLength : 2,
maximumSelectionSize : 3
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputTextarea1}" ).select2({
tags:["red", "green", "blue"],
tokenSeparators: [",", ""]
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div class="page-header">
<h1>
Select2
<xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small>
</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list; }]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1"
value="#{document1.Categories}" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@Text("");
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Tags Field
<xp:inputTextarea id="inputTextarea1"
value="#{document1.Tags}">
</xp:inputTextarea>
</div>
</div>
</xp:panel>
</xp:view>

↧

Looking for a new job

December 9, 2014, 5:11 am

≫ Next: Quick Tip - @Formula Weekdays

≪ Previous: Select2 Auto Tokenization

I am currently looking for a new job, preferably in the Notes Domino XPages environment as a Developer / Notes Domino Consultant.

Extensive experience as:
- Notes Domino / XPages Developer
- Administrator Archie XRM (SQL) - CRM

Latest Courses:
- D8L55 - Introduction to IBM Lotus Domino 8.5 XPages
- N7D540 - Using Lotusscript in IBM Lotus Domino Applications
- D8520 - Building Web Applications Designer 8
- XP852 - Lotus Domino Designer 8.5.2 Basic XPage Application
- XPages and the JSF Lifecycle Courselet
- XPages How to programmatically manage the titleBarTabs Object

Specialization
Lotus Domino, LotusScript, Lotus Notes, Web Development, XPages, AJAX, HTML, XSP, JavaScript, Software Development

Currently I am moderator of the Google+ XPages Community and Curator of Collaboration Today.

For more information:
- LinkedIn
- Twitter

↧

Quick Tip - @Formula Weekdays

January 21, 2015, 2:33 am

≫ Next: Export to Excel

≪ Previous: Looking for a new job

Currently I am working on a classic Notes database, a Leave Registration database.
The question was to only include weekdays in a new request even if the request contained a weekend.
I solved this by using the following @Formula I came across:

Weekday := "2" : "3" : "4" : "5":"6";
R := @TextToTime(@Explode(@TextToTime(@Text(DateField1) + " - " + @Text(DateField2))));
D := @Replace(@Text(@Weekday(R)); Weekday; "X" + Weekday);
W := @Trim(@Right(@Left(@Explode("<" + @Implode(D + "=" + @Text(R); "<") + "<"; "X"); "<"); "="));
W

Based on the request an XML file is generated which is used as an import file for a different application. In the example below a request was made in which a weekend is contained.

The generated XML file includes only the Friday and Monday based on the @Formula.

Not very complicated but it works. Perhaps it may still be of some help to someone.

↧

Export to Excel

January 22, 2015, 4:12 am

≫ Next: Notes Domino 9.0.1 FP3

≪ Previous: Quick Tip - @Formula Weekdays

A frequently asked question from end-users is whether the data within a view can be exported to Excel. This applies to both the classic Notes applications and for XPages applications. At the moment I am working on a classic Notes application, a complaints system. In this application a view is included with all documents and associated fields which the end-users want to export to Excel. To export the data to Excel a button is included in the View with some LotusScript functionality. In the LotusScript functionality the possibility is included that the end users can export all documents in the view or only selected documents in the view.

I use the following LotusScript:

Sub Click(Source As Button)
On Error Resume Next
Dim s As New notessession
Dim db As notesdatabase
Set db= s.currentdatabase
Dim uiw As New NotesUIWorkspace
Dim otherdoc As NotesDocument
Dim otherview As NotesView
Dim othercol As NotesDocumentCollection
Dim tempdoc As notesdocument
Dim uiv As notesuiview

Set uiv = uiw.currentview

If Instr(s.Notesversion, "Release 4") Then
currentviewname = s.getenvironmentstring("CurrentView")
If currentviewname="" Then
Msgbox "Notes R4, code is not set up properly. Contact developer."
End
End If
Call s.setenvironmentvar("CurrentView","")
Elseif uiv.viewalias <> "" Then 'use alias if it isn't blank
currentviewname = uiv.viewalias
Else ' use name
currentviewname = uiv.viewname
End If

Set otherview = db.GetView(currentviewname)
If otherview Is Nothing Then
Messagebox "Could not open the view. """& currentviewname & """"
Exit Sub
End If

Set othercol = db.unprocesseddocuments
If othercol.count >1 Then 'if more than one doc selected then confirm
resp = Messagebox("Do you want to export only the "& _
"selected "& othercol.count & " documents?", 36, "Selected only?" )
Else
Messagebox "Exporting all rows. (To export only selected "& _
"rows tick those required in the left margin first.)"
End If '6= yes

Dim object As NotesEmbeddedObject
Dim xlApp As Variant
Dim oWorkbook As Variant

Set xlApp = CreateObject("Excel.Application")
xlApp.Visible = True 'set to visible, this can be moved to the end if you wish

Set oworkbook = xlApp.Workbooks 'handle to Workbook
oworkbook.Add

hcolmn=1
Forall c In otherview.Columns
xlApp.cells(1,hcolmn) = c.title
hcolmn=hcolmn+1
End Forall
row=2
If resp=6 Then 'selected documents
Dim seldoc As notesdocument
Set seldoc = othercol.GetFirstDocument
While Not seldoc Is Nothing
If resp=6 Then
Set otherdoc = otherview.getnextdocument(seldoc)
If otherdoc Is Nothing Then
Set otherdoc = otherview.getprevdocument(seldoc)
If otherdoc Is Nothing Then
Print ">1 doc should be selected"
End
Else
Set otherdoc = otherview.getnextdocument(otherdoc)
End If
Else 'got next doc
Set otherdoc = otherview.getprevdocument(otherdoc)
End If
End If
For colmn = 0 To Ubound(otherview.Columns)
xlApp.cells(row,colmn+1) = otherdoc.columnvalues(colmn)
Next
row=row+1
Set seldoc = othercol.GetNextDocument(seldoc)
Wend
Else ' all documents
Set otherdoc = otherview.GetFirstDocument
While Not otherdoc Is Nothing
For colmn = 0 To Ubound(otherview.Columns)
xlApp.cells(row,colmn+1) = otherdoc.columnvalues(colmn)
Next
row=row+1
Set otherdoc = otherview.GetNextDocument(otherdoc)
Wend
End If

xlApp.application.Rows("1:1").Select
With xlApp.application.Selection.Font
.bold = True
.ColorIndex = 48
.Name = "Arial"
.Size = 12
End With

xlApp.application.Rows("2:2").Select
xlApp.application.ActiveWindow.FreezePanes = True

xlApp.cells.select
xlApp.selection.Columns.AutoFit
xlApp.application.rows("1:1").Select
End Sub

The result is an export to Excel including column headers.
Perhaps this LotusScript may still be of some help to someone.

↧

Notes Domino 9.0.1 FP3

January 22, 2015, 4:48 am

≫ Next: IBM ConnectED 2015

≪ Previous: Export to Excel

Notes/Domino 9.0.1 FP3 is available !
9.0.1 Fix Pack 3 is a collectionof low-risk, high-impact fixes to help customers safely avoid known issues. IBM strongly recommends that customers running Notes/Domino 9.0.1x upgrade to this latest Fix Pack since it addresses a small percentage of defects that impact the broadest set of customers.
9.0.1 Fix Pack 3 addresses defects in both the Client, Server, Notes Browser Plug-in and Domino SE OpenSocial component.

9.0.1 Fix Pack 3 updates the embedded Notes/Domino JVM to 1.6 SR16 FP2 to address security vulnerabilities. This release has all of the content from the recently released POODLE and POODLE on TLS vulnerabilities in one easy to install package that includes the content from Domino 9.0.1 Fix Pack 2 Interim Fix 3 and Notes 9.0.1 Fix Pack 2 Interim Fix 4.
9.0.1 Fix Pack 3 is the first Fix Pack to sign using the IBM Apple Developer ID. 9.0.1 Fix Pack 3 also introduces Apple v2 Developer ID signing, which is the signing required under OS X 10.10, 10.9.5 and above.

Download Options for Notes & Domino 9.0.1 Fix Packs

Notes Domino Fix List

Client

IFAY9MRJUG (LO81533) - Fixes issue where a meeting created on GMT+1 timezone shows an hour off. This was an issue related to recent Russian Time Zone changes. (technote 1687069)
•CSCT8UCRDC (LO69503) - Resolved situation where an expired ID Vault password prevents Notes client setup. Users encountering this issue will see the setup program continuously loop presenting the password expired dialog box followed by the User Information setup dialog box.
+MNAA9A79FG (LO78239) - Fixes issue where Sans-Serif DBCS characters are rotated 90 degrees.
WWAG9Q64R6 (LO78239) - After installing the Russian DST patch for Windows, the calendar month view in the Notes client shows duplicated days.
BJGY9K5MR4 (IT01988) - Updated timezone and DST information for the Notes Standard client to include tzdata2014f. For details on timezone updates, refer to this link: http://www.ibm.com/developerworks/java/jdk/dst/olson_table.html
HNEO4Y9BHV (LO19418) - Fixes "Error: This field cannot be split into multiple paragraphs" error received when copying and pasting a bitmap.
+PCDM9K3PMF (LO80390) - Fixes issue where Notes 9.0.1 does not honor the value set in "Permanently Delete Documents After" preference on local replicas when the value set is more than 46 days. This is a regression in 9.0.1. (technote 1673586)
JSTN9NRV8B (LO81875) - Notes Browser Plug-in fails to launch under trusted sites zone with error message: "Protected mode is turned on in your Web Browser".

Server

ITDL9PWMFU (LO82383) - Fix for CVE-2014-3566 - SSLv3 POODLE (Padding Oracle On Downgraded Legacy Encryption). Solution adds TLS 1.0 support all Domino protocols not covered under other SPRs (technote 1692551)
YDEN8RNH22 (LO67453) - Support added for TLS 1.0 for SMTP
LCAY9QCDSW (L)82544) - Support added for TLS 1.0 for POP3
BINN88QRPP (LO54370) - Fixes issue where when using the Domino Administrator client to delete users from the address book, the error: "Error Looking up name on LDAP Server" occurs. This error is seen if long alternate names are set for the users. (technote 1515714)
JPAI9CTMWE (LO82330) - Fixed an intermittent issue that would cause a single Notes database to be locked preventing anyone from opening the database until the Domino server is restarted. Before this fix, users would experience the following error attempting to open the database: "This database is currently in use by another person or process, and cannot be accessed at this time. In order to share a Notes database, it must be accessed via a Domino Server by all users of the database.”
PALT9P8JDG (LO82071) - Fixes XPage Mobile controls failing on iOS 8 (technote 1686751)
JKEG8YRGFN (LO71955) - The TNEF Enable Conversion function does not work well when the mail attachment type is .msg.
GFAL9AKKJZ (LO76630) - Adds ability to validate NLO files during resync, as well as utility to encrypt/decrypt/re-encrypt NLO files. (technote 1673931)
OIHZ93TRRY (LO73440) - Fixes an Out of Office issue for non-English Notes template users where the return date and leave date are switched.

Update now!

↧

IBM ConnectED 2015

January 28, 2015, 6:41 am

≫ Next: Notes Domino 9.0.1 FP3 IF1

≪ Previous: Notes Domino 9.0.1 FP3

Watch the IBM ConnecteED 2015 OGS

Overview public session slides from recent IBM ConnectED 2015

Track 1 - Strategy and Innovation
This track is designed for all levels of IT professionals and business leaders who are looking to social and digital experience technologies to transform their business. From new ways to work and delivering exceptional digital experiences to social adoption best practices—and with “sneak peeks” at every turn—this track will be full of thought provoking information and expertise that you won’t find anywhere else!

INV102: IBM’s Social Business Transformation
Ed Brill
In this presentation, IBM Vice President Ed Brill describes the organization's progress on its social business journey. Real examples of how IBMers are driving innovation, speed,agility, client satisfaction, and employee engagement through the use of IBM Connections and other social tools are included, along with discussion of how to measure the business outcomes from internal social.
Link: Slides INV102

Track 2: Application Development
In this track, application developers will learn about building applications in a marketplace that is demanding compelling content and engaging social interaction and information. Topics will include Cloud, Analytics, Mobile, and Social, using technologies for IBM Domino, IBM Connections, and IBM Exceptional Customer and Employee Experience Suite.

AD101: IBM Domino Application Development Futures
Eamon Muldoon and Pete Janzen
2014 review - Responsive XPages - Relational data source for XPages - Document encryption and signatures - Open source - Domino on Bluemix
Link: Slides AD101

AD201 IBM Domino Applications in Bluemix
Martin Donnelly and Brian Gleeson
This session will show how Bluemix enables you to deploy Domino applications to the cloud in a matter of minutes. We will demonstrate how to leverage Bluemix buildpacks like XPages and Node.js both to modernize Domino applications and to give them a new home on a highly scalable and resilient PaaS. You will learn how to mix and match Bluemix runtimes and services to create Domino cloud apps rapidly, stage them privately and put them into production. You'll see how to use cutting edge tooling to monitor and manage your apps. This is the future.
Link: Slides AD201

AD302 - Responsive Application Development for XPages
Brian Gleeson
Bootstrap has recently been integrated into the XPages core framework, allowing the creation of sleek, polished, responsive XPages applications. Using this new feature your apps will look great, with a consistent look and feel from the web browser to the mobile experience on phones & tablets. This session will demonstrate all of the tools now at your disposal, such as the Bootstrap-ized XPages controls, icons, fonts, CSS, new controls, themes and jQuery! We'll show you why this new feature is one that you can't ignore.
Link: Slides AD302

Track 3 - Infrastructure and Deployment
In this track, application developers will learn about building applications in a marketplace that is demanding compelling content and engaging social interaction and information. Topics will include Cloud, Analytics, Mobile, and Social, using technologies for IBM Domino, IBM Connections, and IBM Exceptional Customer and Employee Experience Suite.

IDI103 - What is New in IBM Connections and IBM Connections Mobile
David Brooks and Luis Benitez
IBM Connections provides the platform of social tools you need to transform your organization into a social business. IBM Connections enables you to reach your customers and partners faster, drive innovation, share content and expertise, and complete work faster. In this session, we'll describe what's new in IBM Connections and highlight the new features being planned for the next release. See first hand how IBM Connections can work for you!
Link: Slides IDI103

Track 4 - Best Practices
The popular Best Practices track is delivered by the community—for the community—and is all about solutions that can be implemented TODAY. Whether it’s adoption or development—Domino, mobile, cloud or portal, sessions here provide tips, tricks, and quick maneuvers with a focus on learning from the experiences of others. These sessions take away pain, bring back the fun and deliver the technologies.

BP101: @IF("It\’s Really Good";"It MUST Be Notes";"Must Be Something Else") 25 Notes on 25 Years of Notes!
Mat Newman, Alan Lepofsky and Carl Tyler
25 years of the most revolutionary desktop application ever created condensed into 25 "Notes". We'll panel our way through the good, the interesting and the controversial, as we take a trip down memory lane, you'll laugh, you'll cry, but one thing is for certain, you'll fall in love with Notes all over again!
Link: Slides BP101

BP102: Practical IBM Notes and Domino Internet Security / Track 4: Best Practices
Daniel Nashed
Securing Domino internet protocols becomes more and more an essential factor in your customer, supplier and partner communication.
Not only HTTPS but also SMTP TLS. S/MIME, secure LDAP and IMAP are important current requirements.
This session provides technical details, best practices and current information from the field about security protocols and how they can be used in the current Domino 9.0.1 release.
Link: Slides BP102

BP103: Solving the Weird, the Obscure, and the Mind-Bending
Kim Greene and Luis Guirigay
When you’re in the trenches every day, you see a lot of really interesting problems which you are charged with solving. This session will cover issues that are weird and obscure in nature and caused some mind bending to resolve. You will learn about topics that cover multiple aspects of the IBM Collaboration portfolio. Real-world customer examples will be shared in detail such as replies from emails sent from multiple users in the company all delivered to the Domino Administrator account, the journey of moving a Sametime environment from one domain to another while preserving user’s buddy lists and upgrading the server at the same time, complex replication issues that seemed to defy logic, debugging and overcoming Sametime configuration hurdles, rogue agents wreaking havoc and how to track them down and unravel the path of destruction, system and application performance issues and isolation of performance bottlenecks running in disguise in your environment, and a whole lot more.
Link: Slides BP103

BP104: IBM Notes Traveler Daily Business – Administration, Monitoring and Support
René Winkelmeyer
These slides have been shown at IBM ConnectED 2015 in Orlando and show a best practice overview for several IBM Notes Traveler related configurations.

Link: Slides BP104

BP105: Take Your XPages Development to the Next Level
Paul Calhoun and Brad Balassaitis
This intermediate-level session is for anyone who has a little bit of XPages experience. In the session, we dug deeper into a number of features that are built into XPages and can help improve application responsiveness, streamline design with code reuse, and take more control over the output that is generated by XPages controls.
Link: Slides BP105

BP106: From XPages Hero To OSGi Guru: Taking The Scary Out Of Building Extension Libraries
Paul Withers and Christian Guedemann
Why? Development Environment & Debugging - Repository Structure / Deployment - Basic Plugin Structure - Providing Client-Side Resources - Providing Third-Party Java Classes - Providing Components.
Link: Slides BP106

BP107: Ten Lines Or Less: Interesting Things You Can Do In Java With Minimal Code
Julian Robichaux and Kathy Brown
Don’t be afraid of Java! Many IBM Notes/Domino developers, both new and seasoned, have an irrational fear of learning and using Java because it seems overwhelming. Julian and Kathy will help you over this stumbling block with several short, understandable, and useful examples of Java that you can learn from. All of the examples will be ten lines of code or less, making them approachable and easy to understand. And we will show you how to integrate the Java code with an XPages application so you can get started right away.
Link: Slides BP107

BP108: Be Open - Use Web Services and REST in XPages Applications
Bernd Hort
Presentation and the sample database.
Link: Slides / Database BP108

BP109: Sametime Voice and Video in the Real World
Jeremy Sanders
With the reach of Voice and Video now including mobile devices enterprises are beginning to see these as a must have. But beyond the basics how does it scale up? In this session we focus on the real world demands for Voice and Video – what users really want – including the Sametime 9 Mobile Client – and what enterprises really need including not only scalability but also redundancy and security.
Link: Slides BP109

BP110: Mastering Your Logs, Everything You Should Know about Logging in IBM Domino
Benedek Menesi
Properly logging and monitoring what happens in your Domino environment is critically important for both security and performance. In order to get the most out of your log data when things go wrong, it’s vital to understand its structure, how and what is (or isn’t) logged, and how to search logs effectively. In this in-depth session we will talk about the inner workings of various Domino logging mechanisms by dissecting the structure of log event documents such as Miscellaneous, Replication, Usage Session, User Activity etc.

Link: Slides BP110

BP201 Creating Your Own Connections Confection - Getting The Flavour Right
Gabriella Davis
IBM Connections 5 comes in a variety of exciting flavours - fancy a vanilla install, or maybe you want to add some extra sauce like External users or IBM Docs? A sprinkling of File Viewer and a few Surveys or maybe a dollop of Sametime. In this session we'll take a look at how to build the right flavour combination of Connections for your business from deciding what features you want through to architecting a solution.
Link: Slides BP201

BP202: Beyond Theory: Trials and Tribulations in Becoming a Successful Social Business
Sasja Beerendonk and Femke Goedhart
There are many theories and ideas around “how to become a social business” but what really does or doesn’t work? We wanted to know, and instead of just going blindly with the theory, we did the opposite and interviewed 32 companies in various stages of their journey to becoming a social business. Not just asking them about the big wins, but also talking about the struggles and small successes that really made the difference for them.
Link: Slides BP202

BP203: Best and Worst practices deploying IBM Connections
Christoph Stoettner
Installation and Requirements - Tuning - Enhance the user experience - Backup - Checklists - Resources.
Link: Slides BP203

BP204: Customizing the Connections Mobile App
Michael J. McReady
How many people have a mobile phone on them right now? More than one phone? Next Questions. How many people have a mobile device besides their mobile phone? Who uses the connections mobile app? Who uses the web interface? Who uses both?
Link: Slides BP204

BP205: There’s an API for that! Why and how to build on the IBM Connections PLATFORM
Mikkel Flindt Heisterberg
Presentation from IBM ConnectED 2015 in Orlando, Florida.
Link: Slides BP205

BP206: Connections Directory Integration: A Tour Through Best Practices for Directory and Security Integration With IBM Connections
Gabriella Davis
Presentation from Connections 2015 with Terri Warren.
In this directory, data integration and single sign on session, we'll explore best practices for successful integration of social software with your existing directory data. Learn how to utilize Single Sign On across your environment as well as how to successfully utilize directory information across all of the Connections applications.
Link: Slides BP206

BP207 - Considerations for the Cloud
Chris Miller
re you considering a move to the cloud? Where do you start? One of the most important questions you will need to consider is around access and performance. Start your path by gaining insight into actual bandwidth usage for users in the cloud with examples and things to consider. Explore options for designing easy connectivity to the cloud for your organization and users. Take away numerous sample diagrams of deployment and network options and learn the right questions to ask any cloud provider around security, redundancy and more.
Link: Slides BP207

BP301: What’s your second most valuable asset and nearly doubles every year?
Henning Kunz and Florian Vogler
Data! But do you know where this data is duplicated, by whom and exactly how it’s scattered across laptops, desktops, file servers and IBM Domino databases?
Let us show you how to analyze local drives, network drives and server based apps to get a grasp of what data is out there and what it means to your business. Learn how to collect, aggregate and analyze file sizes and types, as well as identify knowledge sharing patterns. This session will empower you to work towards reducing your data storage costs and increasing collaboration efficiency!
Link: Slides BP301

BP302: Future-Proofing Enterprise IT
Daniel Reimannand Franz Walder
Virtualization, cloud, optimization, migration – Everyone’s talking about the next thing in enterprise IT, but clear answers on direction aren’t readily available and mistakes are costly.
Let us show you how to understand the demands and usage patterns across your enterprise in order to make smart strategic decisions that help you manage IT while keeping cost in check. Analyze and visualize what in your IBM ICS Infrastructure is actually used, by whom and where those people are geographically. Learn about security risks, application design complexity and webification readiness without getting (any more) grey hair.
Link: Slides BP302

Track 5 - Spotlight on IBM Business Partners
Back by popular demand! Sessions in this track showcase the highly-acclaimed solutions that our Business Partner community is known for—with the strategic thinking, technical detail and best practices on how the solution was built! Whether your focus is social software, email, unified communications, or creating exceptional digital experiences - on-premise or in the cloud - there’s something here for you!

SPOT104: Lightning-Fast Development of Native Mobile Apps for IBM Connections and IBM Connections Cloud
John Tripp & Phil Riand
This is the presentation that John Tripp & Phil Riand made at IBMConnectED introducing Darwino, a new full-stack enterprise development platform for social and mobile cloud enabled applications that work natively on mobile devices - even offline.
Link: Slides SPOT104

SPOT107: XCC – Web Content Management Extension for IBM Connections
Felix Binsack and Scott Rogers
STRATEGIES FOR INTERNAL COMMUNICATIONS AND COLLABORATION
What Do These People Have in Common ? Internal Communications Knowledge Worker Traditional Manager „Employees have to be aware of our priorities, strategy, values and important news. Everything important must be published on my platform. I do not care about social as long as employees do not use it as a propaganda platform. My content needs to look great.“ „I do not care about the constant self praise. I need Enterprise Social Software to get my work done and stay in touch with my peers.
Link: Slides SPOT107

Track 6 - Beyond the Everyday
In this track, we step outside the standard uses of our IBM technologies and see how people have combined tools and new techniques to innovate and extend what their software can do to deliver business value. Meeting the demands for multiple technologies, platforms, frameworks, mobile, cloud, on premises and beyond, “Beyond the Everyday” is where unique approaches will be explained and demonstrated. These sessions may feature IBM products as part of a larger story or may be entirely focused around stretching the products we know to the limits of their capabilities. One thing is for certain, they all will be about new ideas and will leave the audience excited to try for themselves!

BTE101: Yes! You CAN Use Those Cool New Frameworks in Your Mobile Domino Apps!
Theo Heselmans
Did you know there is an abundance of cool CSS and JS frameworks out there? Have you ever wanted to find out how you can use them in your own (mobile) Domino apps? We'll show real world applications from our customers using some of these powerful frameworks inside Domino. Explore with us on how they integrated Bootstrap, Ratchet.js, Knockout.js, Backbone.js, Underscore.js, jQuery.js, Zepto.js and more!
Link: Slides / Demo Database

BTE102: The Future of Web Development Write Once, Run Everywhere with AngularJS and Domino
Marky Roden - Mark Leusink

Link: Slides BTE102

BTE103: 1 app 2 developers 3 servers
Mark Myers and René Winkelmeyer
Getting the Same Application to run on different servers.
Its about being able to write a core app and deploy it on any server with a Java core. It does not even need to be a Java app, this works just as well for pure client side websites using popular client side JavaScript frameworks eg, AngluarJS, backbone. This also means you can use your preferred IDE, ie sublime text for AngularJS.

Link: Slides BTE103

BTE201: Working With External Users in IBM Connections
Gabriella Davis
Connections 5 introduces us to a new model of access - the external user. Originally designed to have limited rights within your Connections environment, the security surrounding external user access is deliberately very restrictive. To achieve appropriate access for the external user, we must tell Connections how to identity an external user by flagging either an LDAP attribute or a new LDAP source.
Link: Slides BTE201

Track 7 - Master Classes
At ConnectED, the JumpStarts have transformed into Master Classes. They are still designed to get developers and administrators up and running on the products, techniques, and technologies that are the foundation of the IBM portfolio. What is new this year is that they will also provide you with a roadmap for the rest of the event in their respective product and technology fields. So on Sunday plan to attend the Master Classes for your areas of interest and we will point you to specific breakout sessions, ChalkTalks, labs and other events that will help you come up to speed on social collaboration and digital experience technologies

MAS101: #UserBLAST2015
Mat Newman
#UserBLAST has been a session I've done for the past few years, beginning (sort of) with "Where is the Love" at Lotusphere 2010. Inspired by Gabriella Davis and Paul Mooney's AdminBLAST sessions, the idea has always been to demonstrate the power of my favourite piece of software (hence posting "25 Notes on 25 years of Notes" before this post) by showing people where stuff is and how it works in the Notes client.
Link: Slides MAS101

MAS103 XPages Performance and Scalability
Paul Withers and Tony McGuckin
This session draws upon material taken from the Mastering XPages, Second Edition book from IBM Press. Where applicable the presenters will suggest further reading available from this book about topics in this session.
Link: Slides MAS103

MAS202: Customizing IBM Connections
Paul Bastide
IBM Connections enables you to connect and socialize with colleagues, find experts, and quickly share and organize information to get work done. As a developer, you can leverage the IBM Connections data to provide a better experience for your users. In this session, you learn what features you can extend, leverage and use to build a compelling experience. The session highlights how best to extend and work with the IBM Connections Cloud.
Link: Slides MAS202

The Graph Revolution
Nathan Freeman
Speedgeeking presentation given by Nathan Freeman at IBM's ConnectED 2015 Conference covering the implementation of graph in the OpenNTF Domino API.
Link: Slides The Graph Revolution

Blogposts and other news from IBM ConnectED 2015

IBM previewed XPages Applications running on Bluemix
Niklas Heidloff
At IBM ConnectED 2015 IBM announced and previewed a new capability which allows developers to run XPages applications on IBM Bluemix.
Link: XPages Applications on Bluemix

Quick Demo of the new Social File Sharing Service in Bluemix
Niklas Heidloff
At IBM ConnectED 2015 IBM announced and previewed a new service for IBM Bluemix, called Social File Sharing. The service allows storing and sharing files in the cloud and it helps users to find relevant files via social metadata, for example likes, tags, comments and the number of downloads.
Link: Demo Social File Sharing Service Bluemix

pluginDemoAngularJS
Christian Güdemann
A Plugin that contains Angular.js

Link: pluginAngularJS

IBM ConnectED Thoughts and Reflections

A Few ConnectED Thoughts
Eric McCormick
Also known in some circles as “LotusSphere 15”, the 2015 IBM ConnectED conference has now come to an official close. This was my first Connect-usSphere and, making things more interesting, I was named an IBM Champion for 2015 about the time when I knew I would be a speaker (even if it was just a Chalk Talk).
Link: Read More

Blue Chalky Soup
Eric McCormick
This is the code name I gave my boiled down session to keep it more in fitting with IBM’s description of a Chalk Talk, I got interesting with things. Specifically a reveal.js mini presentation (mostly so I could give people further reading or references and resources), served by a Node.js/Express app, with live updating presenter controlled slide state, triggered via a web socket. I am clearing my queue, as it were, so here is a link to the repository with my code base on GitHub.
Link: Read More

IBM ConnectED (Not Lotusphere) Reflections
Paul Withers
It’s been a busy week as always. So now the dust has settled here are a few thoughts.
No Matter What Changes, The Community Persists.
Our community is an awesome thing, often mentioned with envy by those working outside what was ICS and is now ESS (Enterprise Social Solutions). Over recent years there have been some notable exceptions at our January event. I think we’ll have to wait some months, if not longer, to see the impact of the structural changes within IBM.
Link: Read More

My reflections of IBMConnectED
Patrick Kwinten
Yes, or ofcourse, I attended the IBMConnectED 2015 event in Orlando. First start with a summary of sessions I attended: XPages Performance and Scalability IBM Domino Applications on Cloud IBM's Mobile Collaboration Strategy and Portfolio IBM ConnectED - A New Way to Engage IBM Domino - 2015 and Beyond IBM Domino Applications in Bluemix.
Link: Read More

Best ConnectED ever !!!
Marky Roden
All one of it, and it was the best!!
Well OK seriously, it was also the best Connect-o-sphere I have been to in all my 4 years.
Above all else I had an excellent time hanging out with and speaking with the most excellent Mark Leusink. It is kinda hard to coordinate a presentation when you only have 48 hours to prepare together, Mark made it very easy. When people like Mark Myers (who I have an inordinate amount of respect for) say things like this about you, it is very hard not to blush.
Link: Read More

Recap of Ask IBM session (Ask the Developers and Ask the PMs) at IBM ConnectED / Lotusphere 2015
David Hablewitz
Each year I bring with me a large collection of questions and enhancement requests that I first vet in the Meet the Developers lab. Those questions which I either don’t get a satisfactory answer or get an answer that I think others would like to hear, I will bring them to the Ask the Product Managers or Ask the Developers sessions.
Link: Read More

A Recap of IBM ConnectED 2015 for IBM Collaboration Solutions Users
Teamstudio
IBM General Manager of Enterprise Social Solutions, Jeff Schick, opened this year’s IBM Collaboration Solutions conference in Orlando on Jan. 26. During the opening general session, Schick explained that IBM envisioned a new format for the event, and transformed it into a more strategic business and technical conference than it has been in the past.
Link: Read More

IBM ConnectED 2015 – The Good and The Bad
Karl-Henry Martinsson
When I arrived to Orlando for the 18th time to attend Lotusphere (now renamed IBM ConnectED), it was with mixed feelings. The conference was much smaller than before, and everyone expected this to be the last conference in the Lotusphere format in Orlando. IBM had a contract with Disney that expired after the 2015 conference and we all knew it. So most attendees did see this as a last hurrah or a kind of farewell to Lotusphere.
Link: Read More

Thoughts on Lotusphere 2016
Nathan T. Freeman
Plenty of people are talking about the bittersweet celebration that was IBM ConnectED 2015 in Orlando this past week. I agree that in many ways, this was the best Lotusphere ever, as the attendees were focused on making the most out of an event that will likely never be again. IBM was much less overbearing than in the past, focusing on Verse and Bluemix without the kind of announcement-gavage we used to choke on all week.
Link: Read More

My Take on IBM ConnectED 2015
Kathy Brown
I am surprised to be saying this, to have said it this week, but…this was my best Lotusphere ever. Before you start arguing and telling me what things you felt weren’t the best, I will say, this was *MY* best Lotusphere.
Honorable mention: my first Lotusphere in 2008. I went by myself and didn’t know a soul there. I didn’t know about Planet Lotus or who any of the speakers or attendees were.
Link: Read More

IBMLOTUSCONNECTOSPHEREED 2015/2016 THOUGHTS
Julian Woodward
The smaller scope of the conference worked well. The bulk of attendees have always been primarily interested in the “Lotus” stable of products, but in recent years IBM has tried to force peripheral products (SUT, Kenexa for god’s sake, Portal, Customer Experience Thingummy) down our throats, and forced out, in particular out of the OGS, most of the content that the bulk of attendees, who have PAID TO BE THERE, are interested in. The pendulum swung back this year. Whether it landed in quite the right place is open to debate, but it was definitely a better place.
Link: Read More

ConnectED-sphere sudo review
Darren Duke
I was fully expecting to write a "what a train wreck" review before I went. I was not expecting to say I had a metric shit ton of fun. But I did. And based on other posts I've perused it seems almost everyone else did. There are far more eloquent reviews elsewhere, so this will be bare bones.
Link: Read More

Domino and SSL ciphers. The server document may not be doing what we expect it to do
Darren Duke
Now, I'm back in the office it's time to address this. So based on that session it seems as if LDAP, SMTP, DIIOP, POP3 and IMAP (and Remote debug monitor?) protocols do not adhere to the cipher list in the server document (there was no mention of internet sites documents, but I would presume they are affected by this issue too).
Link: Read More

IBM ConnectED 2015, As I Saw It
David Greenstein
I did not always know I was going into technology. In a previous life, like so many of my technical brethren, I was a musician. During the mind-late 1990's I played in a band that would do events like weddings, bar mitzvahs, etc. We would close each night with this Eric Clapton song. It speaks of getting ready to go out with your wife, then the realization of how luck you are to be the one with her, and end with her tucking you in at the end of the night the way only your better half can or does. I felt this sentiment through the entire week of ConnectED this year.
Link: Read More

ConnectED: The Good Stuff
John Roling
Okay, I know the last post seemed completely down on IBM, and mainly it was because of logistics and cheaping out on basic stuff. It’s just that such a high bar had been set by Lotusphere in the past. I was there when 10,000 attendees took over everything, and comparing this year to even prior down years was pretty bad.
Link: Read More

From IBM ConnectED 2015 - What's New in IBM Connections
Luis Benitez
Yesterday I posted a recap of the IBM ConnectED 2015 OGS. Today, I wanted to focus on the What's New in IBM Connections session that I presented at after the keynote. The intent of the session was to recap our deliveries in 2014 (which were a lot!) and then give you a glimpse at what's coming next.
Link: Read More

IBM ConnectED 2015 recap and recollection
Ed Brill
I just returned from my 19th IBM-related January trip to Orlando in the last 20 years. Was this trip to IBM ConnectED 2015 the last one? I don't know. I'm no longer in the product organization connected to the event; this year, now that I report to the IBM CIO office, I was more client than vendor. It was nice to have my brand everywhere.
Link: Read More

Videos

Darwino @ IBM ConnectED 2015

We unveiled Darwino at IBM ConnectED. This is a video that we made to demonstrate the power of Darwino in the IBM Collaboration context.

Darwino & Domino Working Together - How we built it

Domino4Wine

Introducing the Domino4Wine project: Domino Designer and Administrator running natively on Mac and Linux using CrossOver + WINE technology.

IBM ConnectED OGS & week in review

IBM ConnectED 2015 Closing Session Osborn Cut

↧

Notes Domino 9.0.1 FP3 IF1

February 16, 2015, 10:04 am

≫ Next: XPages goes Bootstrap

≪ Previous: IBM ConnectED 2015

IBM Domino 9.0.1 FP3 IF1 is available for Download.
The latest Interim Fix for Notes 9.0.1 Fix Pack 3 is Interim Fix 1 (February 2015). The latest Interim Fix for Domino 9.0.1 Fix Pack 3 is Interim Fix 1 (February 2015).
Note that Interim Fixes are cumulative and contain all of the fixes from previous versions.

Domino
IMPORTANT NOTE: To fully protect your Domino server from the POODLE attack, IBM recommends upgrading to Domino 9.0.1 Fix Pack 3 ( click here for download links), which combines the JVM SR16FP2 update plus all fixes included in 9.0.1 Fix Pack 2 Interim Fixes. If you are unable to upgrade to 9.0.1 Fix Pack 3, then IBM recommends applying the latest JVM patch (SR16FP2), which is available for download from technote #1692733.

Notes
IMPORTANT NOTE: To fully protect the Notes client from the POODLE attack, IBM recommends upgrading to Notes 9.0.1 Fix Pack 3 ( click here for download links), which combines the JVM SR16FP2 update plus all fixes included in 9.0.1 Fix Pack 2 Interim Fixes. If you are unable to upgrade to 9.0.1 Fix Pack 3, then IBM recommends applying the JVM Patch (SR16FP2), which is available for download from technote #1692733.

Link : Interim Fixes for 9.0.1.x IBM Notes, IBM Domino & IBM iNotes

↧

XPages goes Bootstrap

March 26, 2015, 4:27 pm

≫ Next: Notes 9.0.1 FP3 IF3 - TLS 1.2

≪ Previous: Notes Domino 9.0.1 FP3 IF1

A new release of the XPages Extension Library is available on OpenNTF (OpenNTF XPages Extension Library).
This release is the twelfth IBM Notes Domino 9.0.1 version of the XPages Extension Library to OpenNTF. It contains new enhancements and a number of bug fixes.
More and more Bootstrap functionalities become available in the XPages Extension Library such as the new Carousel, Dashboard, and Navbar controls which further enhance the Responsive tool set available to XPages application developers.

But the most notable absentee is still Select2. A little strange because Select2 was already available in the OpenNTF Bootstrap4XPages plugin. In addition any developer who works with Bootstrap uses Select2 in their applications. Unfortunately, we have to (continue to) use the Bootstrap4XPages plugin or we need to keep adding Select2 manual to our applications. The latter is certainly the best solution if you want to use multiple features of Select2 (see my blog posts about Select2).
Hopefully Select2 will be included in Release 13.

So what is new in Release 12 of the XPages Extension Library (from the release note).

New xe:mapValuePicker and xe:collectionValuePicker tags
New inPlaceForm Simple Action
New Responsive Web Design Functionality
Responsive Design Demonstration Application: ToDo.nsf
New xsp.properties “suppress” option for dataView control
New URL Parameters in the REST Calendar Service

New xe:mapValuePicker and xe:collectionValuePicker tags for the Value Picker Control
Based on customer suggestions, this release provides 2 new value picker data providers tags that can be used in the "dataProvider" property of the Value Picker control to provide the list of options that will be shown in the Value Picker dialog.
The first tag, the Map Picker Data Provider (xe:mapValuePicker) lets you compute a java.util.Map that will be used for the entries in the picker dialog. The map keys are the label, and the map values are the data values that will be saved.
The Collection Picker Data Provider (xe:collectionValuePicker) lets you compute a java.util.Collection that will specify the values displayed in the dialog.
See also the blog post by Paul Withers, New Release of Extension Library, Including MapPicker and CollectionPicker.

New xe:inPlaceFormAction for hiding and showing In Place Form Control
Based on a customer pull request through GitHub, this release contains a new xe:inPlaceFormAction server side Simple Action. The xe:inPlaceFormAction is used to show and hide In Place Form controls that are commonly used for in place editing of an individual document directly within a Repeat control that lists multiple documents.

New Responsive Web Design Functionality
The three new responsive controls added to this extlib release are:
Carousel, Dashboard, and Navbar. The Carousel is a slideshow control, the Dashboard is a control for displaying important information to users at a glance, and the Navbar is a navigation bar control.
All of these controls appear in a new control palette in Domino Designer, the Responsive palette, from where they can be dragged into an XPage. Each of the controls is responsive in design.

The Carousel control is a slideshow component that can be added to your application. It allows automatic and/or manual cycling through a number of slides in the Carousel. This control would typically be used at the top of a web page, often on the landing page or homepage of an application, although it can be adapted and used in a number of situations.

The Dashboard control is a component that can be used to highlight important information to users at a glance in an application. The Dashboard is made up of a number of "dash nodes" - up to 12 of them. Each node can then be further be customised. For example, this control could be used as an administration dashboard that displays the status of a number of services. As another example, the dashboard could display the different status types for tasks and the number of tasks currently under each status type in a task tracking application.

The Navbar control is a navigation bar that can be added to an XPage. In previous releases of the Extension Library, navbar functionality was built into the ApplicationLayout control when using the Bootstrap themes. With this release of the ExtLib, you can add Navbars to any XPage without needing to rely on the Application Layout control.

Simple Responsive Layout Configuration
The Simple Responsive Application Layout Configuration is a new configuration for the Application Layout control. It is a simplified configuration, reducing the number of available properties and rendered elements in the Application Layout. This configuration has more of a focus on responsive capabilities, and is designed to be quick and easy to configure whilst still providing plenty of functionality.

Responsive Design Demonstration Application: ToDo.nsf
In this release of the XPages Extension Library, a new demonstration application, named "ToDo.nsf," has been included. This application lets you do straight-forward ToDo task tracking but has been designed using all of the latest responsive & Bootstrap features provided with the ExtLib. It specifically uses a Bootstrap theme, glyphicons, jQuery, and the new XPages Bootstrap controls.

For more detailed information about the new features I refer to the release note (PDF).
All in all a nice new release but personally I would have preferred Select2 above a Slider and a Dashboard.

NOTE: Please be aware of technote SWG21696682 as it affects the installation of the Extension Library if the UpdateSite.nsf method is used.

↧

Notes 9.0.1 FP3 IF3 - TLS 1.2

March 30, 2015, 9:58 am

≫ Next: Responsive html5video() in XPages

≪ Previous: XPages goes Bootstrap

IBM Notes 9.0.1 Fix Pack 3 Interim Fix 3 brings TLS (Transport Layer Security) 1.2 (with protocols HTTP, SMTP, LDAP, POP3 & IMAP) including new ciphers.
NOTE: To fully protect the Notes client from the POODLE attack, IBM recommends upgrading to Notes 9.0.1 Fix Pack 3 which combines the JVM SR16FP2 update plus all fixes included in 9.0.1 Fix Pack 2 Interim Fixes.

Downloads:
Notes 901 FP3 IF3 - W32 Basic
Notes 901 FP3 IF3 - W32 Standard

Fix List for Notes 9.0.1 Fix Pack 3 Interim Fix 3:

SPR	Description
KLYH9UBNGW	Add pinning to SHA-256 for TLS 1.2
KLYH9URNJH	TLS 1.2 Notes / Domino as a TLS client rejects handshake with server if no common signature algorithm available
KLYH9URNFY	TLS 1.2 Client handshake request rejected by Server if server certificate chain signature type not supported by the client
KLYH9UQJQN	Remove RC4-SHA from the default cipher list for TLS 1.2
RKUR9PEDEB	Implement HSTS (Http Strict Transport Security).This header informs supported browsers that the site should only be accessed over an SSL-protected connection (HTTPS)
RGET9TSMKD	Add IP Information to HTTP Thread logs for SSL Handshake connections
MKIN9QHT5W	Passing a directory to kyrtool will crash the tool
DKEN9RVQGD	kyrtool import all sometimes reports "SECIssUpdateKeyringPrivateKey returned error 0x0720", "AVA separator not found" or "Syntax error in OID" when a '/' is in a certificate name part
DKEN9SSUR6	Add more detailed logging for SSL/TLS connections to help diagnose failed connections
KLYH9UFNWH	New notes.ini SSL_DISABLE_TLS_10 to support Disabling TLS1.0 for compliance reasons. Used in conjunction with existing DISABLE_SSLV3=1 allows you to limit communication to TLS 1.2 only for protocols: HTTP, SMTP, LDAP, POP3 & IMAP
KLYH9QKTGH	Added SHA-256 cipher specs for increased security with TLS 1.2
KLYH9QKTED	Added Advanced Encrption Standard (AES) Galois/Counter Mode for increased security with TLS 1.2
KLYH9QKTBL	Added Perfect Forward Secrecy (PFS) via Ephemeral Diffie-Hellman (DHE) cipher specs for SSL/TLS
KLYH9QKT4B	Notes / Domino Support for TLS 1.2 (Transport Layer Security 1.2) with protocols: HTTP, SMTP, LDAP, POP3 & IMAP
HCHC9GG66F	Administrator Client Shows Wrong File Sizes of database with DAOS size>0 After Server Restart
IFAY9QZGKG	Getting Error When Using Google calendar Feeds
TTAN8YRHD9	[WINDOWS ONLY] - Additional Time Zone For Salvador & Buenos Aires Shows Incorrect Time

Link : Interim Fixes for 9.0.1.x versions of IBM Notes, Domino, iNotes & Notes Browser Plug-in

Recommended links:
First Perfect Forward Secrecy Ciphers shipped with 9.0.1 FP3 IF2 by Daniel Nashed
Domino 9.0.1 FP3 IF3 is about to ship by Daniel Nashed
Engage conference security presentation by Daniel Nashed
New Version of KyrTool released by Daniel Nashed
TLS 1.2 in Domino and the settings I use by Darren Duke
New Start Script Version 3.0 with systemd support released by Daniel Nashed

↧

Responsive html5video() in XPages

April 19, 2015, 3:14 pm

≫ Next: Responsive videos in XPages using FitVids.js

≪ Previous: Notes 9.0.1 FP3 IF3 - TLS 1.2

A few days ago I was asked how html5video() could be used in XPages, in combination with Bootstrap, and how this could be made responsive. This involved 'homemade' videos which were not published on youtube or other media. In this article I give a basic example of how a 'homemade' video can be added to an XPages application using html5video () and how to make it responsive. This example does not work for videos from Youtube or Vimeo seen these are delivered via iframes. More about that in the next blog post.

html5video() is a jQuery plugin to easily control & customize your HTML5 video player.
The HTML markup structure is pretty simple.

<video width="370" height="214" id="video1">
<source src="video/namevideo.ogv" type="video/ogg">
<source src="video/namevideo.webm" type="video/webm">
<source src="video/namevideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

The following settings are available.

Property	Default	Description
controls	false	show / hide video controls
autoplay	false	Sets video should start playing as soon as it is loaded
playSelector	null	jQuery selector trigger playing video
pauseSelector	null	jQuery selector trigger pausing video
stopSelector	null	jQuery selector trigger stoping video
fullSelector	null	jQuery selector trigger full screen mode
timerSelector	null	jQuery selector current time container
durationSelector	null	jQuery selector video duration container
barSelector	null	jQuery selector progress bar container
volume	0.5	set volume

In XPages we can use html5video() in the following manner.
First we have to add the jquery.html5video.js file to the WebContent Folder in the Package Explorer.
For this purpose I created a new Folder 'videojs'.

Next we need to include jquery.html5video.js on the XPage / Custom Control. In this example I include all files on an XPage.

<script type="text/javascript" src="videojs/jquery.html5video.js"></script>

Further we need the great XSnippet by Mark Roden, x$ jQuery selector for XPages and include it on the XPage. You can add the XSnippet to the Script Libraries.

<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>

The script itself can be made up as follows. The script can be built up to your own preferences using the settings shown above. The name of the id in the script must correspond with the name which is included later on in the video tag.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:video1}" ).html5video({
controls : true,
autoplay : false
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

Next we can build up the video tag. In this example I added the video itself in the WebContent Folder in the Package Explorer.

<video width="570" id="video1">
<source src="video/Circle II Circle Almelo Naxtstage 2014.mp4" type="video/mp4"></source>
Your browser does not support the video tag.
</video>

Remark: In this case we are using standard HTML5 video that will make the video fit the width of a container (column). It's important to remove the height declaration so that the aspect ratio of the video is maintained as it grows and shrinks. This can easily be done by a stylesheet (css).
The simple css file should be structured as follows.

video {
width: 100% !important;
height: auto !important;
}

The stylesheet must also be added to the XPage.

<xp:styleSheet href="/videoresponsive.css"></xp:styleSheet>

The result is a responsive video.

Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
<xp:styleSheet href="/videoresponsive.css"></xp:styleSheet>
</xp:this.resources>
<script type="text/javascript" src="videojs/jquery.html5video.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:video1}" ).html5video({
controls : true,
autoplay : false
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>html5video() <small> jQuery Plugin for Controlling and Customizing HTML5 Video/Audio</small></h1>
</div>
<div class="col-md-6">
<h3>Circle II Circle Almelo 2014</h3>
<video width="570" id="video1">
<source src="video/Circle II Circle Almelo Naxtstage 2014.mp4"
type="video/mp4">
</source>
Your browser does not support the video tag.
</video>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

More info about the jQuery plugin can be found on this website : html5video()

↧

Responsive videos in XPages using FitVids.js

April 22, 2015, 3:18 pm

≫ Next: Responsive videos in XPages using a Stylesheet

≪ Previous: Responsive html5video() in XPages

When we use YouTube or Vimeo videos the process as described in my previous blog post, Responsive html5video() in XPages, will not work to make the video responsive. The reason is that with videos from YouTube we are dealing with a video that is delivered via an iframe. In this case setting a height is required, otherwise browsers will render the iframe at a static height of 150px. To scale a video to fit any browser, tablet or mobile device for responsive design you can use a Javascript solution or a CSS solution. In this example I will show you how you can use FitVids.js, a javascript solution that injects HTML and CSS to the video code markup in order to make the video responsive.

FitVids.js is a lightweight, easy-to-use jQuery plugin for fluid width video embeds.
In an XPage / Custom Control we can use FitVids.js as follows. As an example, we use a YouTube video. In practice, adding a YouTube video means nothing more than copy and paste the link / URL (iframe) in the relevant XPage / Custom Control.

<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/_XL5tgpZmpk" frameborder="0"></iframe>
</div>

Copying and pasting the link works properly and the video is neatly displayed on the XPage taking into account the specified width and height. But there is one problem, the video is NOT responsive.

To make these (iframe) videos responsive we can use FitVids,js.
First we have to add the jquery.fitvids.js file to the WebContent Folder in the Package Explorer.
For this purpose I created a Folder 'videojs'.

Next we need to include jquery.fitvids.js on the XPage / Custom Control. In this example I include all files on an XPage.

<script type="text/javascript" src="videojs/jquery.fitvids.js"></script>

Further we need to add a ScriptBlock to the XPage to target the videos container with fitVids(). This is a simple script.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
jQuery(".wrapper").fitVids({ customSelector: ""})
}
);
]]></xp:this.value>
</xp:scriptBlock>

Finally, the video itself can be added to the XPage.

<div class="col-md-6">
<div class="wrapper">
<iframe width="560" height="315" id="video1"
src="https://www.youtube.com/embed/_XL5tgpZmpk" frameborder="0">
</iframe>
</div>
</div>

If we perform a preview in the browser we now have a responsive video in a simple manner.

Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<script type="text/javascript" src="videojs/jquery.fitvids.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
jQuery(".wrapper").fitVids({ customSelector: ""})
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>Responsive Video <small> iframe Video (YouTube, Vimeo, etc.) </small></h1>
</div>
<div class="col-md-6">
<div class="wrapper">
<iframe width="560" height="315" id="video1"
src="https://www.youtube.com/embed/_XL5tgpZmpk" frameborder="0">
</iframe>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

You can download FitVids.js from GitHub : FitVids.js
In the next blog post I will give an example how to use a Stylesheet (CSS) in order to make a video responsive.

↧

Responsive videos in XPages using a Stylesheet

April 27, 2015, 2:06 pm

≫ Next: Using a responsive jQuery Gallery for images and videos in XPages

≪ Previous: Responsive videos in XPages using FitVids.js

In my last two blog posts I demonstrated in what way html5video () (Responsive html5video() in XPages) and FitVids.js (Responsive videos in XPages using FitVids.js) could be used in order to make own videos and iframe videos responsive in XPages applications. In this blog post I show a third possibility, namely the use of a simple Stylesheet (CSS). What we actually do is 'wrapping' the video in another element that gives us fluid width with a reasonable height. It is not a new solution, but it is a commonly used solution in responsive design.

Below the Stylesheet that I use in my XPages applications.

.video-container {
position:relative;
padding-bottom:56.25%; /* 16:9 */
padding-top:30px;
height:0;
overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

The first CSS declarations target the video container and the second target what is in the container, in this case it's the YouTube Video (iframe), You can also apply this to objects and embed elements. The most important element (line) is the padding-bottom rule of 56.25%, this figure is reached by using the video's aspect ratio of 16*9, so 9 divided by 16 = 0.5625 or 56.25%.

The Stylesheet needs to be added to the XPages / Custom Control.

<xp:this.resources>
<xp:styleSheet href="/videocontainer.css"></xp:styleSheet>
</xp:this.resources>

The last step is to add the video itself whereby we use the video container declaration from the Stylesheet.

<div class="col-md-6">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_XL5tgpZmpk" frameborder="0"></iframe>
</div>
</div>

That's all we need to do. Very simple.
If we perform a preview in the browser we see that the video is responsive.

Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/videocontainer.css"></xp:styleSheet>
</xp:this.resources>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>Responsive Video <small> - iframe Video (YouTube, Vimeo, etc.)</small></h1>
</div>
<div class="col-md-6">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_XL5tgpZmpk" frameborder="0"></iframe>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

The three examples I have given in order to make videos responsive in XPages Applications I will add to the demo database and make it available soon. This brings an end to this short series, but more is on the way!

↧

Using a responsive jQuery Gallery for images and videos in XPages

April 30, 2015, 11:11 pm

≫ Next: Superb XPages topics that have been shared

≪ Previous: Responsive videos in XPages using a Stylesheet

In one of my recent projects XPages one of the questions of the applicant was to implement a responsive image / video gallery. Hereby the possibility should consist to view the images / video 'full screen' as well as the ability to display thumbnails below the gallery. In this article I will give an example in which in a simple manner a responsive gallery can be added to an XPage / Custom Control. I use in this example Fotorama, a simple, stunning, but powerful jQuery gallery. To use Fotorama the files fotorama.css and fotorama.js need to be added to the XPage / Custom Control. Fotorama's CDN is provided by CDNJS which means that we can use the following "links".


<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css" rel="stylesheet">
</link>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js"></script>


Another option is to download the Fotorama files and add the files to the WebContent folder in the Package Explorer.

<xp:this.resources>
<xp:styleSheet href="/fotorama.css"></xp:styleSheet>
</xp:this.resources>
<script type="text/javascript" src="fotorama/fotorama.js"></script>

For the photos which should eventually be added to the gallery I created a folder 'images' in the WebContent folder in the Package Explorer.

Further I imported the photos which should be used in the galley into the newly created Folder 'ímages'.

Setting up fotorama on an XPages / Custom Control is very simple. Fotorama initialized automatically in all the blocks with the fotorama class.

<div class="fotorama" ..... </div>

Fotorama’s dimensions are the dimensions of the first image (or column). Other pictures are scaled proportionally to fit. To reserve the space on the page before the first image is loaded, use data-width and data-height. But solely set a data-width and data-height makes the gallery NOT responsive! To make fotorama responsive, we have to define width in percents and aspect ratio.

<div class="fotorama"
data-width="100%"
data-ratio="800/600">
</div>

For customizing the basic settings of Fotorama I used the following data-attributes: data-nav for displaying the thumbnails, data-allowfullscreen for allowing Fotorama to enter fullscreen, data-arrows for controlling the way users interact with the Fotorama, data-width to make the gallery responsive and data-fit for stretching and cropping the image to completely cover the Fotorama. There are many other possibilities for adjusting the default settings.

<div class="col-md-7">
<div class="fotorama"data-nav="thumbs" data-allowfullscreen="true"data-arrows="true" data-click="true" data-swipe="false"data-width="100%" data-ratio="800/600">

<img src="images/Photo1.jpg"data-fit="cover"></img>
<img src="images/Photo2.jpg" data-fit="cover"></img>
<img src="images/Photo3.jpg" data-fit="cover"></img>
<img src="images/Photo4.jpg" data-fit="cover"></img>
<img src="images/Photo5.jpg" data-fit="cover"></img>
<img src="images/Photo6.jpg" data-fit="cover"></img>
<img src="images/Photo7.jpg" data-fit="cover"></img>
<img src="images/Photo8.jpg" data-fit="cover"></img>
</div>
</div>

The final result is a responsive image gallery with all the options as indicated by the applicant.

Fotorama can also be used for videos.
To add a video from YouTube or Vimeo just link to the video page. Fotorama will automatically fetch the splash images.

<h1>Video Gallery</h1>
<div class="fotorama">
<a href="https://vimeo.com/7863677">Omnia - Alive</a>
<a href="https://vimeo.com/50046920">Omnia - Dance Until We Die</a>
</div>

You can use the same data-attributes as for the image gallery.

<h1>Video Gallery</h1>
<div class="fotorama"data-nav="thumbs"data-fit="cover"
data-allowfullscreen="true"data-arrows="true" data-click="true"
data-swipe="false"data-width="100%" data-ratio="800/600">
<a href="https://vimeo.com/7863677">Omnia - Alive</a>
<a href="https://vimeo.com/50046920">Omnia - Dance Until We Die</a>
<a href="https://vimeo.com/61524508">Omnia - I don't speak Human</a>
<a href="https://vimeo.com/60063689">Omnia - Saltatio Vita</a>
<a href="https://vimeo.com/49597866">Omnia - Fee Ra Huri</a>
</div>

The final result is a responsive video gallery.

Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">

<link
href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css"
rel="stylesheet">
</link>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js">
</script>

<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>A simple, stunning, powerful jQuery gallery</h1>
</div>
<div class="col-md-7">
<h1>Images Gallery</h1>
<div class="fotorama" data-nav="thumbs"
data-allowfullscreen="true" data-arrows="true" data-click="true"
data-swipe="false" data-width="100%" data-ratio="800/600">

<img src="images/Photo1.jpg" data-fit="cover"></img>
<img src="images/Photo2.jpg" data-fit="cover"></img>
<img src="images/Photo3.jpg" data-fit="cover"></img>
<img src="images/Photo4.jpg" data-fit="cover"></img>
<img src="images/Photo5.jpg" data-fit="cover"></img>
<img src="images/Photo6.jpg" data-fit="cover"></img>
<img src="images/Photo7.jpg" data-fit="cover"></img>
<img src="images/Photo8.jpg" data-fit="cover"></img>
</div>
</div>
<div class="col-md-7">
<h1>Video Gallery</h1>
<div class="fotorama" data-nav="thumbs" data-fit="cover"
data-allowfullscreen="true" data-arrows="true" data-click="true"
data-swipe="false" data-width="100%" data-ratio="800/600">
<a href="https://vimeo.com/7863677">Omnia - Alive</a>
<a href="https://vimeo.com/50046920">Omnia - Dance Until We Die</a>
<a href="https://vimeo.com/61524508">Omnia - I don't speak Human</a>
<a href="https://vimeo.com/60063689">Omnia - Saltatio Vita</a>
<a href="https://vimeo.com/49597866">Omnia - Fee Ra Huri</a>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For download and other information: Fotorama - A simple, stunning, powerful jQuery gallery

↧

Latest Images