Dojo Split Container in XPages

A nice draggable split section created using dojo

Step 1: Include the following style to the xpage
        @import "../dijit/themes/tundra/tundra.css";
        @import "resources/dojo.css"
   
Step 2: Associate the following script to the XPage
    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script>

Step 3: Add the followng script to the XPage
       dojo.require("dojo.parser");
       dojo.require("dijit.layout.SplitContainer");
       dojo.require("dijit.layout.ContentPane");

Step 4: Add the following html code to the XPage
        <div dojoType="dijit.layout.SplitContainer" orientation="horizontal"
sizerWidth="10" activeSizing="true"
                style="border: 1px solid #FF00FF; width: 600px; height: 205px;">

                <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="10">
                    <p><b>Introduction to Dojo and Tips</b></p>
                   
                       This tips is light towards people with some JavaScript knowledge,
 priestly used another JavaScript (Ajax) framework before, now have a real need to use
some of the features found in dojo. In this tips, learn about the dojo and its directory
structure.
                      
                </div>
                <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="10">
                    <p><b>Benefits of Dojo</b></p>
                   
                            *  Associative arrays<br/>
              * Loosely typed variables<br/>
              * Regular expressions<br/>
              * Objects and classes<br/>
              * Highly evolved date, math, and string libraries<br/>
              * W3C DOM support in the Dojo

                      
                </div>
        </div>