Firefox 15 out now – with integrated JavaScript debugger

This week the new FireFox 15 browser was released with a nice new list of goodies

http://www.mozilla.org/en-US/firefox/15.0/releasenotes/?utm_source=html5weekly&utm_medium=email

One thing which caught my eye was the integrated debugger within the native Firefox developer tools. This is not a new feature to those of us used to FireBug debugging but a very nice addition to the toolkit. Firebug is a fantastic tool and I cannot do without it – but it takes up memory and slows things down a bit. having an integrated debugger (I assume) will be quicker and less disruptive. We will have to have a play and see.

Here is a screenshot from my MWLUG 2012 presentation which was demonstrating the Firebug debugger

FireFox 15 integrated JavaScript debugger
FireFox 15 integrated JavaScript debugger

Productive !

Advertisements

jQuery in XPages #14 – TOC (Create a menu to scroll to a form section)

In this article I will demonstrate how to implement the jQuery plugin TOC (Table of Contents) into your XPage and let your users select the section of the document they want to scroll to at the click of a link.

Introduction

When you are dealing with a long complex form and you need to open the document, edit one field and exit – it can be a pain to scroll down and find the section. Another frustration is having to scroll up and down the page comparing two different fields. The TOC jQuery plugin can help with this and it works especially well within the confines of the OneUI construct with the Left Column already provided as a perfect spot to put the menu.

The Demonstration

The demonstration can be found here

Download

The demonstration database can be downloaded from the link above or from here

What does it do?

Well the TOC plugin creates a “menu” of sorts on the page and allows the user to click on the menu and scroll to that place on the page.

The menu is created on the left and scrolls with the user – clicking on the link

Clicking on the TOC link
Clicking on the TOC link

Scrolls the user down the page to the section

Scrolls to the new section
Scrolls to the new section

 

Setting up the database

As with many of the jQuery plugins this one is very simple and easy to implement within your XPage. You first need to download jQuery and the TOC plugin and add them to your database.

jQuery TOC can be found here and the source code can be downloaded from here.

The latest version of jQuery can be downloaded from the jQuery.com website

The jQuery and TOC JavaScript libraries are added to the database through the WebContents folder. Change the Designer perspective to show the Package Explorer (Window–>Show Eclipse Views–>Package Explorer) and drag and drop the two libraries from your computer into the “js” folder. (You can see the demo database as an example)

The js libraries are added to our XPage Source as follows

	<script src="js/jquery-1.8.min.js" clientSide="true"></script>
	<script src="js/toc.js" clientSide="true"></script>

The CSS is added to our XPage like this

	<link rel="stylesheet" href="toc.css"/>

Adding TOC to our XPage

Instantiating TOC on the XPage uses code which looks like this. I just used the basics but I changed highlightOffsets to be 200 as I think that works better:

$('document').ready( function(){
	$('#toc').toc({
	    'selectors': '.inTOC', //elements to use as headings
	    'container': 'body', //element to find all selectors in
	    'smoothScrolling': true, //enable or disable smooth scrolling on click
	    'prefix': 'toc', //prefix for anchor tags and class names
	    'onHighlight': function(el) {}, //called when a new section is highlighted
	    'highlightOnScroll': true, //add class to heading that is currently in focus
	    'highlightOffset': 200, //offset to trigger the next headline
	    'anchorName': function(i, heading, prefix) { //custom function for anchor name
	        return prefix+i;
	    },
	    'headerText': function(i, heading, $heading) { //custom function building the header-item text
	        return $heading.text();
	    }
	});
});

Where #toc is a <div with id=”toc” as an attribute and .inTOC are the HTML elements (class=”inTOC”) which are used to determine the titles of the TOC and the sections on the webpage which they refer to. In my demo database you will find the toc <div> in the commonContainer custom control.

In my case I added a <Span to the page above the section I wanted – but to “hide” it from being seen I used a style. The reason I did this is because of the dijitTitlePane which did not lend itself well to being a selector for this purpose.

	<style>
		.inTOC {visibility: hidden;}
	</style>

	<xp:span styleClass="inTOC">Personal Information</xp:span>
	<xp:div id="titleChildren" dojoType="dijit.TitlePane" title="Personal Information" style="font-weight:bold">
		Panel contents
	</xp:div>

Scrolling up and down the page

A really nice feature of the TOC plugin is that when you scroll up and down the page the menu highlights to show that you are looking at that section. Can seem fairly obvious but that is a really nice touch for the user experience.

Overall

I really like this plugin – it is very simple, very, and fulfills a common requirement perfectly.

 

jQuery side note

As I have told many people my purpose of these jQuery in XPages examples is not to make you use them today – but when the requirement comes along you know it is there. Just this week my customer said to me that they wanted a menu on their LONG web form to be able to click on it and scroll to the section in question. I had seen the TOC plugin and bookmarked it a few months ago – I knew it existed and within 2 hours it was implemented within the design of their application.

2 hours !

And that is why jQuery rocks – not just the code itself but the fact that so many people have written so many cool plugins for the rest of us to take advantage of.

 

 

Nice simple OneUI XPage layout section with dijit.TitlePane

In this article I will demonstrate how to make a nice looking layout section on your XPages which goes well with OneUI

Introduction

I have a requirement to lay out a form into sections with headers which “looks good” within the OneUI framework. There are many ways I could do this but the reason I chose dojo.TitlePane was because of the original requirement to make “collapsible sections” and I am already using OneUI and wanted to conform to that look and feel.

Demonstration

The collapsible and non-collapsible sections are demonstrated here

Creating a collapsible section

Could not be easier. We add the script tag to “require” the loading of the titlePane library and then tell the web page which “div” elements we want to be TitlePanes. The dojoType=”dijit.TitlePane” tells the dojo code on page load to convert this div to a nice looking TitlePane.

<script type="text/javascript">
	dojo.require("dijit.TitlePane");
</script>

<xp:div id="titleChildren" dojoType="dijit.TitlePane" title="Collapsible Pane - Click on me">
	HERE IS YOUR CONTENT
</xp:div>

And you fill your content into the <xp:div> section – couldn’t be easier!

Collapsible dojo.TitlePane
Collapsible dojo.TitlePane

Creating a non-collapsible pane

And then my requirements changed and the section had to be non-collapsible – of course……

So I had to come up with a simple way to turn what I had into the new requirement.

There is a parameter on the TitlePane “toggleable” which when set to false dictates that the title bar cannot be clicked on and there is no mouse over color. Don’t hurt yourself but here is the dojo API documentation for the TitlePane

<script type="text/javascript">
	dojo.require("dijit.TitlePane");
</script>

<div id="titleChildren" dojoType="dijit.TitlePane" class="noToggle" title="Collapsible Pane - Click on me" toggleable="false">
	HERE is the text
<div>

In this case I used a <div> and not an <xp:div> so that it will work in R<8.5.3. If you have 8.5.3+ then you can add the <attr> toggleable to your <xp:div>.

The last thing we need to do is to add a CSS to hide the expandable icon

<style>
	.noToggle .dijitArrowNode {
		background-image: url("") !important
	}
</style>

so there we have it

Non-Collapsible TitlePane
Non-Collapsible TitlePane

Demonstration

The collapsible and non-collapsible sections are demonstrated here

Dojo Firebug Extension – from an XPage developer’s perspective

In this article I take a rather irreverent look at, and describe some what I was hoping would be, the useful capabilities of the dojo firebug extension available at https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/

Introduction

I love firebug for my client side JavaScript development – for many reasons too numerous to mention here. If you have no idea what firebug is then you should google it and find out – USE IT and you will never go back…..

So what’s this Dojo extension all about then ?

Right off the bat I loved finding this quote “The Dojo Firebug Extension started as an internal IBM initiative to help IBMers working with Dojo.”, and more importantly got me straight off on the thought of what can this do for me in my XPages?

The documentation is available here – https://getfirebug.com/wiki/index.php/DojoFirebugExtension_Reference_Guide and as firebug extensions go – this one is fairly well documented – nice job 🙂

You have to download a different version based on your firebug and your firefox version….that’s kinda weird and disconcerting and they don’t have my version of firebug or firefox – but hey we truck on in hope.

So What does it do for me as an XPages developer?

Good question – let’s find out…

Well the first thing it showed me was how MASSIVELY complicated the Dojo integration with XPages is……check out some of these idTags on this Tab Container!! 😮

Dojo Firebug extension in action
Dojo Firebug extension in action

 

Open API documentation

This *could be* really useful – if you can get over how useless the API documentation site is – let me paraphrase…….IF you understand how the Dojo API documentation works this *could be* fantastically helpful…..

In my previous article on how I figured out how to use the Dojo Tab Container doLayout (where the screenshots come from) I was struggling to find out what I needed to make the Tab Panel heights dynamic. Would this have helped?….I was kinda bitter at this point as I figured it would have….so i soldiered on..

Select the tab container and look at the extension

Selecting open API documentation
Selecting open API documentation

 

and opening the API documentation

Dojo API documentation
Dojo API documentation

 

*yawns* – so not really – but stay with me

The next options *looks* more useful (so why did you show us the API link? Yes you guessed it…… it *is* ‘cos I hate you and I wanted to force you to look at Dojo API documentation – get over it and don’t ask daft questions)

Open Reference Guide Doc

Open Reference Guide Doc
Open Reference Guide Doc

 

Which shows you this…….

Dojo Reference Guide Documentation
Dojo Reference Guide Documentation

 

First of all I am really impressed that this actually links to the 1.8 version which was only released this week – but that is also not helpful because XPages 8.5.(What I am using) uses 1.6 so which a quite switch over on the right hand side

Switching to 1.6
Switching to 1.6

We get…

Aw Butts - really?/?
Aw Butts – really?/?

And I was just saying how awesome you guys were – CRAP.

As it turns out the plugin is too smart and not smart enough to detect 1) the version of dojo I am using and 2) that this feature it thinks I am using is available in 1.6…

DOH
DOH

DOH *grrr*

Que?

So I didn’t solve that problem but I did find another one – I noticed that IBM modified the Dojo specifically for the extlib!! …if you look at the code reference in the extension

Well that is kinda interesting I guess..
Well that is kinda interesting I guess..

[view:_id1:_id2:_id39:djTabContainer1 (Widget extlib.dijit.TabContainer)]

and when we select to go to the Reference Guide Docs – the URL it is sent to

http://dojotoolkit.org/reference-guide/1.8/extlib/dijit/TabContainer.html

You will see that extlib has been inserted into the URL

the REAL documentation is here

http://dojotoolkit.org/reference-guide/1.8/dijit/layout/TabContainer.html

dijit/layout and not extlib/digit.

If you look at an example from david walsh’s blog you can see the difference…

vive la difference
vive la difference

 

Anything else?

Well I found out how to manage FireFox profiles – http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ which is kinda useful – so I did learn something useful from this investigation.

There are a number of cool Dojo debugging capabilities if you are really into writing seriously with the dijits whereby you can subscribe to the data and watch it move all over the place – kinda cool – not helpful for XPage development though.

So is this really useful for an XPages developer?

Well I have to say from an purely educational perspective it is really interesting to get an insight into how the dijits work…

Some really complex cool stuff going on  in here
Some really complex cool stuff going on in here

 

But I think my overall impression of the extension is that it will not help an XPage developer develop their XPages at all in any sort of way

Shame really 😦

PS

Let me rephrase that last sentiment – I think this COULD be really useful if IBM were inclined to apply some time and effort to making a similar extension for XPages Dojo development – but isn’t the point of XPages is kinda so we don’t have to worry about Dojo…so it would be an uber-dojo-geek expert XPages developer tool only…meh…who wants to do that?? 😉

Shame really 😦

PPS

That is two blog articles in a row about dojo – don’t worry I am not going back to the dark side – jQuery still rocks my world 😉

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