Dynamic TabPanel height with Dojo TabContainer in XPages

In this article I will discuss how to make your Tab Panels dynamically resize to the size of their content. I will use the doLayout property of the dijit control, exposed through the extension library control properties in XPages Designer.

Introduction

The Extension Library provides us with many easy to use Dojo “containers” including the TabContainer and TabPanel. What is sometimes difficult to decifer though is how to configure the dojo container to bend to your will and meet your requirements.

The Problem

My problem was that I have a container with multiple tabs and some are really large and some are small. The out of box the box functionality provides the ability to size the TabContainer and it forces that size on all the panels. This leaves me with two options (see the demo):

  • Make all the boxes large enough to cover the largest panel
    • which looks daft on the panels with very little content
  • Make the overflow of the larger panels use a scroll bar
    • style=”overflow-y: auto”
    • This is “ok” but with a lot of scrolling it makes the panel difficult to use

The solution

So I was searching around Google and I could not find an answer to “dojo TabContainer dynamic resize” which was very frustrating – so I came upon the dojo documentation for the TabContainer. http://dojotoolkit.org/reference-guide/1.7/dijit/layout/TabContainer.html And experience has told me I am wasting my time with the Dojo documentation but I figured what the hey and clicked in……

Now I would rather stab my eyes out than read the dojo API documentation – but I have to hold my hand up and give them props for this one – it is right there in the demonstrations on the first page “A TabContainer with flexible height” – Brilliant!

The trick is to add doLayout=”false” to your dojo container – simple – and a working demonstration as well – well done sirs!!!

So then I went to the XPages designer to look and see if the property was there on the custom control – and yes it was – brilliant – and how absolutely 100% USELESS the help was for it……How is this helpful???

XPages designer help for the doLayout property of the TabContainer control
XPages designer help for the doLayout property of the TabContainer control

It would have been much more helpful to say “default=true – forces all the Tab Panels to be the same height as the TabContainer. Set to false to allow for flexible tab Panel height!”

The dojo API documentation says “If true, change the size of my currently displayed child to match my size” – written by closet programmers and not by real people, apparently.

Demo

Here is the simple demonstration of the difference – quite striking really

http://demo.xomino.com/xomino/xPlay.nsf/xTabContainer.xsp

Conclusion

Dojo reference guide actually helped………and I need to use it more often apparently.

(I still refuse to waste my time on the API documentation though)

The Moral

I think for me it is imperative to understand more about how the dojo containers work in their original environment – the CSJS library before attempting to use them in XPages. I realize this is contrary to the idea that we don’t “have” to understand them to use them in XPages – but actually – I now think it is essential

For more information check out the Dijit information – reference guide – real people speak!

http://dojotoolkit.org/reference-guide/1.7/dijit/info.html#dijit-info

Advertisements

11 thoughts on “Dynamic TabPanel height with Dojo TabContainer in XPages

  1. Same here, I also find it essential to know how the underlying Dojo controls work. I prefer to use them directly (in many times even without their html tags and parseOnLoad), not hidden/wrapped by Extlib code where it’s not obvious what is going on behind the scenes.

    • Thanks Karsten.

      You know I did wonder about that as well……….another case of a new capability provides basic functionality for the masses but hinders the power developer who understands the technology already??

  2. Hi All,

    I am having trouble with extension library Dojo Tab Container (djTabContainercontrol) with events.
    Currently I am designing one application where I have an extension library Dojo Tab Container and I want to execute some js when I click on a tab’s title bar.

    I can’t seem to figure out how to add an event to that.

    Please suggest.

    Regards,
    Yogesh Kashid

  3. Thanks Marky,

    I got the solution , I used onShow event of the djTabPane as you suggested which clicks the button, It partially refreshes the content of the Panel of the djTabPane. It works perfectly.

  4. Hi all,

    I am using Notes 9 and I tried using Dojo tab in my xpage. I have a view and a tab container with a tab pane. In a column event I am creating a new tab using this ssjs.

    var unid=row.getUniversalID()
    getComponent(“djTabContainer1”).createTab({action: “editDocument”, documentId: unid, tabUniqueKey: docId})

    now this code works well, if the view exist in the current db where the xpage resides. But if the view is in a different db then the same throws an exception

    Error calling method ‘createTab(Object)’ on java class ‘com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabContainer’
    Could not open the document

    Anyone have idea on this..Kindly help out.. Thanks in advance…

    • I am afraid I have not tried this – try asking the question on Stack overflow and maybe someone else has

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s