Error - 'getComponent()' is null in XPages

One of the most irritating issues that I encountered while working with XPages, especially when enhancing an existing Lotus Notes application is 'getComponent()' is null error.

My suggestion here will be silly, but I honeslty feel that there will be people out there who will acknowledge its severity

when a code fragement say, getComponent("fieldName").getValue() returns this error,

1.Check  if a component with if "fieldName" actually exists

and
2. Note that "FieldName" is different from "fieldName" - cross check with the cases in the component name and the one mentioned in your code

Thanks and Regards,
Karthick

Dojo drop down button in XPages

The post speaks about how a simple drop down action button can be created in XPage using dojo

The code fragment that is necessary to the job is  as follows 
       dojo.require("dijit.form.Button"); dojo.require("dijit.Menu");
         dojo.addOnLoad(function() { var menu = new dijit.Menu({ style:
        "display: none;" }); var menuItem1 = new dijit.MenuItem({ label:
        "Save", iconClass: "dijitEditorIcon dijitEditorIconSave",
        onClick: function() { alert('save'); } });
        menu.addChild(menuItem1);

        var menuItem2 = new dijit.MenuItem({ label: "Cut", iconClass:
        "dijitEditorIcon dijitEditorIconCut", onClick: function() {
        alert('cut'); } }); menu.addChild(menuItem2);

        var button = new dijit.form.DropDownButton({ label: "hello!",
        name: "programmatic2", dropDown: menu, id: "progButton" });
        dojo.byId("dropdownButtonContainer").appendChild(button.domNode);
        });

Ensure that you add the following div tag to your page. Or else you might see a black page with possible an error in the console
    <div id="dropdownButtonContainer"></div>
</xp:view>

Dojox Fish Eye Lite in XPages - Link Zoomer

A links that you see on the page would get zoomed in and out as u mouse over and mouse out on the same.
This is done with the help of Dojox Fish Eye Lite

<title>Fish Eye Light Anchor tag Example</title>
 
  Step1: Enclose the following style imports to a style tag on the xpage
    @import "../dijit/themes/soria/soria.css";
    @import "/resources/dojo.css";

Step 2: Add the following script tag to the XPage to specify the inclusion of dojo.js and djConfig parameters
  <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script>

Step 3: Now add the following script to your page
      dojo.require("dojox.widget.FisheyeLite");
       dojo.addOnLoad(function(){
        dojo.query("a", dojo.byId("myParagraph")).forEach(function(n){
          new dojox.widget.FisheyeLite({
            properties:{
              fontSize:1.50,
              letterSpacing:2.00
            }
        },n);
        }).connect("onclick",dojo,"stopEvent");
      });
 
Step 4: Add a custom link to your page, preview and mouse over them... The links will have
zoom in/zoom out effect as you mouse in and mouse out on them

Dojo Title Pane in XPages

Dojo sections are an awesome feature. I personally feel that these are good but takes its toll on the performance in the page load

Step 1: Include the following style imports by enclosing the same into a style tag on the XPage
        @import "../dijit/themes/soria/soria.css";
        @import "/resources/dojo.css"

Step 2: Include the dojo.xd.js file into the xpage with the following script tag
    <script type="text/javascript" src="dojo.xd.js"
djConfig="parseOnLoad: true"></script>

Step 3: Associate the following code to the XPage        
           dojo.require("dojo.parser");
           dojo.require("dijit.TitlePane");

Step 4: Add the following div tag to see how the section works on the XPage
         <div dojoType="dijit.TitlePane" title="Welcome to Roseindia
Dojo Tutorial">
          
      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. The purpose of this tips, for a new
user learn to dojo then you need to know about the what is dojo and its
directory structure.

        </div>

Dojo Tabbed Tables in XPages

Create an Xpage and copy paste the following code into the source tab of the same. Preview the XPage and you will tabbed tables created using dojo as displayed in the following figure.
 
 

Step 1. Enclose the following style imports to a style tag on the XPage
        @import "../resources/dojo.css"; @import
        "../dijit/themes/tundra/tundra.css";
    
Step 2: Add the inclusion of the dojo.xd.js to the XPage as mentioned below
    <script type="text/javascript" src="dojo.xd.js"  djConfig="parseOnLoad: true">
    </script>

Step 3: Associate the following script with the XPage
        dojo.require("dojo.parser");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.form.Button"); dojo.require("dojo.widget");
 
Step 4:  Put the following div tags on the page and preview the same. You will be able to see a nice good tabbed table on your screen
    <h1>Tab Container</h1>
    <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:500px;height:100px">
        <div id="tab1" dojoType="dijit.layout.ContentPane"
            title="First Tab" selected="true" closable="true">
            First Tab
        </div>
        <div id="tab2" dojoType="dijit.layout.ContentPane"
            title="Second Tab" closable="true">
            Second Tab
        </div>
        <div id="tab3" dojoType="dijit.layout.ContentPane"
            title="Third Tab" closable="true">
            Third Tab
        </div>
    </div>

Note :  We can work with the tabbeb table through dojo code as well. Following is a simple way of selecting a particular tab
    var tabbedPanel = dojo.byId("mainTabContainer");
    tabbedPanel.selectTab("tab2");

Hope this helps :)

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>

Dojo Slider in XPages

Create an Xpage and copy paste the following code into the source tab of the same. Preview the XPage and you will see a slider created using dojo as displayed in the following figure.

Step 1: Associate the following styles to the XPage
      @import "../resources/dojo.css";
      @import "../dijit/themes/tundra/tundra.css";
 
Step 2: Add the following scripts to the page
        dojo.require("dojo.parser");
        dojo.require("dijit.form.Slider");

Step 3: Add the following mark up to the page
    <b>Slider:</b>
    <div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"
       value="5" minimum="-10" maximum="10" discreteValues="11"
       intermediateChanges="true"
       onChange="dojo.byId('horizontalSlider').value = arguments[0];document.getElementById('#{id:SliderValue}').value=arguments[0]"
       handleSrc="preciseSliderThumb.png"
     
       style="width: 250px"
    ></div>
  
    <xp:inputText id="SliderValue"></xp:inputText>  

Step 4: Now preview the page and see how it works on the browser

Hope this helps :)

Dojo Accordian Pane in XPages

Create an Xpage and copy paste the following code into the source tab of the same. Preview the XPage and you will see toggling sections created using dojo as displayed in the following figure.

Associate the following styles with a page
        @import "../dijit/themes/tundra/tundra.css";
        @import "/resources/dojo.css"

Associate the following js library inclusion with the XPage
    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script>

Add the following script to the XPage
       dojo.require("dojo.parser");
       dojo.require("dijit.layout.AccordionContainer");

Step 4: Now add the following markup to the XPage
        <div dojoType="dijit.layout.AccordionContainer" duration="80"
                style="margin-right: 10px; width: 500px; height: 200px;">

        <div dojoType="dijit.layout.AccordionPane" selected="true" title="Benefits of Dojo">
                        <p >Benefits of Dojo: Associative arrays, Loosely typed variables,
Regular expressions, Objects and classes, Highly evolved date, math, and string libraries,
W3C DOM support in the Dojo.</p >
                </div>
      
                <div dojoType="dijit.layout.AccordionPane" title="Introduction to Dojo">
                     <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.</p>
                </div>
      
                <div dojoType="dijit.layout.AccordionPane" title="WebSite for Dojo Tutorial">
                   <p>If you want to learn dojo. Please go the following url and read the dojo
tutorials with running examples.
           URL: www.roseindia.net/dojo/</p>
                </div>
        </div>
   
Now preview the same and see how they work on the browser

Hope this helps :)

Dojo Tooltip on XPages

The following code fragment when copy pasted into an xpage shall show you how dojo tool tips (as in image) work on XPages.

Step 1: Include the following style to the xpage
      @import "../resources/dojo.css";
      @import "../dijit/themes/tundra/tundra.css";

Step 2: Add the inclusion of the dojo.xd.js to the XPage as mentioned below 
    <script type="text/javascript" src="dojo.xd.js"
djConfig="parseOnLoad: true"></script>

Step 3: Associate the following script with the XPage
      dojo.require("dojo.parser");
      dojo.require("dijit.Tooltip");

 Step 4: Add the following html code to the XPage
    <span id="site1">Roseindia.net</span>
    <div dojoType="dijit.Tooltip" connectId="site1"
label="This is a software developement company!">
    </div>
  
    <br/>
    
    <xp:inputText id="textBox1"></xp:inputText>
    <div dojoType="dijit.Tooltip" connectId="#{id:textBox1}"
label="This is a Text field!">
<xp:panel style="background-color:rgb(0,0,255)">
abcdefghijklmn
</xp:panel>
    </div>
    
    <br/><br/>
    <span id="site2">Newstrackindia.com</span>
    <div dojoType="dijit.Tooltip" connectId="site2" label="This is a news publishing site!">    </div>

Step 5: Now preview the page and see how it works on the browser

Hope this helps :)

Radio Group - XPages

The following is a code snippet that shall help you create a  simple yes- no radio button when copy pasted into XPage source code.



<xp:radioGroup id="radioGroup1" value="" layout="pageDirection">
                                                <xp:selectItem itemLabel="yes" itemValue="y"></xp:selectItem>
                                                <xp:selectItem itemLabel="no" itemValue="n"></xp:selectItem>
                                                <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
                                            <xp:this.action><![CDATA[#{javascript://var radioVal=getComponent("radioGroup1").getValue();
//getComponent("inputText1").setValue(radioVal);}]]></xp:this.action>
                                        </xp:eventHandler>
                                    </xp:radioGroup>

Dojo Popup in Xpages - Working with Serverside Scripts - A simple illustration

It took me a really long time to create a dojo popup in XPages. And it took even longer to get the server side scripts work on that Xpage.

The step by step details of how to do the same is posted in many web sites. But the one that really helped me is the post named XPages: How to create a view picklist - Posted by Mark Hughes 


It describes on how to create a picklist in XPages.

Here I have a more simpler version that could help to have a quick understanding of how to get things done in XPages.

Step 1: Add the following javascript code the XPage 
        dojo.require("dijit.Dialog");
        XSP.addOnLoad(function(){dialog_create("Dialog3")});
  
Step 2: Add the following mark ups to the XPage
    <div id="Dialog3" style="display:none">
        <xp:panel id="Dialog3panel">
            <xp:button id="button3" value="Click this to execute a server script">
                <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:getComponent("eb1").setValue("done")}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>

            <xp:br></xp:br>   
            <xp:button id="button2" value="Close">
                <xp:eventHandler event="onclick" submit="false">
                    <xp:this.script><![CDATA[dijit.byId('Dialog3').hide(); ]]></xp:this.script>
                </xp:eventHandler>
            </xp:button>
        </xp:panel>
    </div>

    <xp:button value="Click to get Dojo Popup" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[dijit.byId("Dialog3").show() ]]></xp:this.script>
        </xp:eventHandler>
    </xp:button>

    <xp:inputText id="eb1"></xp:inputText>

3. Now associate the following function to the XPage. (I copied this from OpenNTF.org and am passing on the legacy ... Hope you dont mind it :)

function dialog_create(id, title1) {
    var dialogWidget = dijit.byId(id);
    if( dialogWidget )
        dialogWidget.destroyRecursive(true);
   
    dialogWidget = new dijit.Dialog({
            title: title1, duration:600},
            dojo.byId(id));

    var dialog = dojo.byId(id);
    dialog.parentNode.removeChild(dialog);

    var form = document.forms[0];
    form.appendChild(dialog);
    dialogWidget.startup();
}

4: Now preview the Xpage and see how it works

For a more clearer description of how it works  please visit the link mentioned in beginning of the post.

Hope this helps :)