ozinisle: Dojo Toolbar related tips and tricks in XPages

A while ago I was working on creating a tool bar for one of my Xpages. I was able to find a lot of reliable resources on the internet. It did take me a lot of time to understand and build my own toolbar though.

In summary my understanding is you may have to use all or few of the following dojo.require attributes in your page

dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Toolbar");
dojo.require("dijit.Tooltip");
dojo.require("dijit.ToolbarSeparator");

I also found that I was using the code line "var djConfig = { baseScriptUri : "js/dojo/",parseOnLoad : true };"
I am not sure if I had used the djConfig variable any where in my program to construct the tool. I guess it automatically loads with Xpages. If not - what stops you from a copy & paste :)

! guess I copy codes blindly at times lol.

Again I wanted this to be visible to the entire XPage and hence I used a "xp:scriptBlock" tag to define them

Later I copied code from the standard examples about dojo toolbar available on the web and modified it to suit my requirements
This sure is a lot of code. Just skip or delete the code fragments that might not be of interest to you.

Now I have acquired a decent tool bar when I preview the page on the browser. Which looks like the following.

<div id="toolbar" style='display:none;position:fixed;_position:absolute;

top:0;_top:expression(eval(document.body.scrollTop));

left:0;_left:expression(eval(document.body.scrollLeft));'>

<div dojoType="dijit.form.Button" id="toolbar1_Home"

iconClass="iconHome" showLabel="false">

Home

</div>

Home

</span>

<div dojoType="dijit.form.Button" id="toolbar1_ExportAll"

iconClass="iconExportAll" showLabel="true">

Export All

</div>

Export all data to Excel Sheet

</span>

<!-- div dojoType="dijit.form.Button" id="toolbar1_ExportSelected"

iconClass="iconExportSelected" showLabel="true">

Export Selected

</div>

Export

selected documents to Excel Sheet

</span>

<div dojoType="dijit.form.Button" id="toolbar1_PrintPage"

iconClass="iconPrintPage" showLabel="true">

</div>

Print the page as you see it

</span>

<div dojoType="dijit.form.Button" id="toolbar1_PrintAll"

iconClass="iconPrintAll" showLabel="true">

Preview All

</div>

Preview all documents

</span>

<div dojoType="dijit.form.Button" id="toolbar1_PrintSelected"

iconClass="iconPrintSelected" showLabel="true">

Preview Selected

</div>

Preview selected documents

</span>

<div dojoType="dijit.form.Button" id="toolbar1_SearchField"

iconClass="" showLabel="true">

<xp:inputText style="width:222.0px" id="SearchContent">

</xp:inputText>

</div>

<div dojoType="dijit.form.Button" id="toolbar1_SearchButton"

iconClass="iconSearchButton" showLabel="false">

Search Image

</div>

</span>

<div dojoType="dijit.form.Button" id="toolbar1_HighlightButton"

iconClass="iconHighlightButton" showLabel="false">

Highlight Matches

</div>

Highlight

matches without searching

</span>

<div dojoType="dijit.form.Button" id="toolbar1_AdvSearchButton"

iconClass="iconAdvancedSearch" showLabel="false">

Advanced Search

</div>

Advanced

Searching Options

</span>

<div dojoType="dijit.form.Button" id="div1" iconClass=""

showLabel="true">

<xp:label value="Show " id="label3"></xp:label>

<xp:comboBox style="width:80.0px" defaultValue="30"

id="docsToDisplay">

<xp:selectItem itemLabel="30 Docs" itemValue="30">

</xp:selectItem>

<xp:selectItem itemLabel="50 Docs" itemValue="50">

</xp:selectItem>

<xp:selectItem itemLabel="100 Docs" itemValue="100">

</xp:selectItem>

<xp:selectItem itemLabel="200 Docs" itemValue="200">

</xp:selectItem>

<xp:selectItem itemLabel="1000 Docs" itemValue="1000">

</xp:selectItem>

<xp:eventHandler event="onchange" submit="true"

refreshMode="complete">

<xp:this.action><![CDATA[#{javascript:var searchViewGrid:com.ibm.xsp.component.xp.XspViewPanel=getComponent("searchViewPanel");

var docsToDisplay=getComponent("docsToDisplay").getValue();

var docToDispInt=java.lang.Integer.parseInt(docsToDisplay)

searchViewGrid.setRows(docToDispInt)}]]></xp:this.action>

</xp:eventHandler>

</xp:comboBox>

</div>

Its a lot of code. Atleast I got a nice looking tool bar like the following on my screen now.

Now take a closer look at the parent tag that I have defined for the tool bar. The style that is being computed/defined here helps the tool bar stay on top of the page irrespective of the page scroll

I dont know whether this method is recommended or not but, it servers the purpose. So if you find/know of a better way to do this please do let me know of the same.

Here the various icon classes that I have used here are responsible for the nice icons that are being displayed on the tool bar. So mark sure that you define your styles properly. Following is one such example of the associated style sheet

Our net stop is to see how to define an onclick event for our nice tool bar buttons here. Hi hi what did you expect. On click event related activites needs to be explicity defined through code and its not a simple onclick event definition. Following is the way to do it.

It would seem a little complicated, but its easy to understand. Following screen shot shows how I defined onclick events for the toolbar buttons along with how I defined the functions that were associated with the onclick events

Hope this helps :)

ozinisle

Pages

Monday, May 27, 2013

Dojo Toolbar related tips and tricks in XPages

No comments:

Post a Comment