5 XPages Tipps #1

1. Extending a predefined RichText Toolbar

The built-in RichText editor has some predefined toolbars.. in many cases one of them will fit the needs, but sometimes you want to extend an existing toolbar with just some of the existing tool-buttons.. In my case i wanted the Large Toolbar (not the Full), but the HTML Button was missing.. In order to achieve this, just add these lines:

XPage:

<xp:inputRichText id="fldBody"
value="#{newsletter.Body}">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="toolbarType"
value="Large">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
</xp:inputRichText>

Client Side Javascript:

<script language="Javascript">
XSP.addOnLoad(function (){modifyCKEditor()} );
</script>

function modifyCKEditor(){
CKEDITOR.config.toolbar_Large.push(['Source'])
}

2. adjusting a DOM Node Attribute

for example the src attribute of an img tag.. In the dojo documentation it is described like this:

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  domAttr.get(node, attr); // get
  domAttr.set(node, attr, value); // set
});

// Dojo <1.7
dojo.attr(node, attr); // get
dojo.attr(node, attr, value); // set

more infos: http://dojotoolkit.org/reference-guide/1.7/dojo/attr.html
xpages in 8.5.3 is using Dojo 1.6, so i thought this should work:

dojo.attr(oButtonImage, "src", sSource);

but it doesn’t…
this works:

oButtonImage.attr({
src: sSource
});

in JQuery it would be the simple 1liner “oButton.attr(“src”, sSource)” ….

3. Dynamically bind a field in a custom control

If you’re a lazy developer, like me, you know already the benefits of the XPages custom controls. However sometimes passing over parameters can be tricky.. If you use the same custom control in an xpage several times and want to save their data into different fields, you need to give some prefix/suffix for the fields and define the datasource fields accordingly.. you can do this like this:

<xp:inputText value="${javascript:'#{dataSourceName.'+compositeData.FieldNamePrefix+'FieldName}'}"></xp:inputText>

4. Always use an id attribute for components, especially buttons!

I once nearly ended up in the mad house, because on each click on an XPage (no matter where on the xpage, just anywhere in the body..), it triggered a partial refresh and the actions defined in a button.. i tried to remove certain parts of the XML Tree, commented things out, all the stuff to do if something weird is going on.. finally i found it: no id attribute setted in the button tag..after setting it, it worked as it should..

It’s always good to use some kind of naming convention, e.g. i use the following:

btn….. for Button elements
pnl….. for Panels
fld….. for input text fiels
rpt…. for repeat controls
tbl….. for tables
and so on..

if the application is growing and several buttons doing a partial refresh on several elements,  it is easy to loose control and debugging can be a nightmare.. using a naming convention helps you identifying trouble making elements on the fly.. don’t forget: use only <xp:..> elements if you need some kind of logic in them.. if you want to use simple layout components it’s better to use plain html tags..

5. Get rid of the “java.lang.ClassCastException: className incompatible with className” – Error

If you’re using Managed Beans (they’re great!) and accessing them in other java classes, you might get this error.. a “Project \ clean..” in Domino Designer should remove the error… Performing a Clean recently is anyway a good practice, definetly before deployement…

Hope this Tipps will help, i will publish another 5 tipps in the future… see you at Lotussphere IBM Connect 2013!!!