WCS with Dojo



Dojo is an open source toolkit that helps you write robust and efficient JavaScript code.

djConfig is a quick way to configure a few options as dojo is loaded.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: false"></script>
 
djConfig="parseOnLoad: true" this means that dojo.parser will be automatically loaded. The dojo parser exists to parse any dojoType attributes in your HTML. If you set djConfig="parseOnLoad: false" then you must do as shown below.


<script type="text/javascript" djConfig="parseOnLoad:false" src="dojo/dojo.js"></script>

<script type="text/javascript">

    dojo.require("dojo.parser");
    dojo.addOnLoad(function(){
        dojo.parser.parse();
    });
</script>

If  we don't have any dijit elements or dojoType attributes, we can keep the parseOnLoad as false.

 

In WCS EnvironmentSetup.jspf will have the below dojo settings which will be used across JSP  files


<c:set var="dojolocale" value="${fn:replace(locale, '_' , '-')}" />
<c:set var="dojolocale" value="${fn:toLowerCase(dojolocale)}" />

<c:set var="dojoDir" value="${staticAssetContextRoot}/dojo18"/>
<c:set var="dojoFile" value="${dojoDir}/dojo/dojo.js"/>
<c:set var="dojoFileDesktop" value="${dojoDir}/dojo/dojodesktop.js"/>

<%-- Register module path to the NLS error messages folder --%>
<c:set var="dojoConfigParams" value="parseOnLoad: true, isDebug: false,  modulePaths: {storetext: '${sdb.jspStoreDirFilePath}'}, useCommentedJson: true,locale: '${dojolocale}' "/>


Sample Accordion Pane Developed in WCS using Dojo

Please note that  EnvironmentSetup.jspf is included in the jsp file .


<%@ taglib uri="http://commerce.ibm.com/foundation" prefix="wcf" %>
<%@ taglib uri="http://commerce.ibm.com/coremetrics"  prefix="cm" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="flow.tld" prefix="flow" %>
<%@ include file="Common/EnvironmentSetup.jspf" %>
<%@ include file="Common/nocache.jspf" %>
<%@ include file="include/ErrorMessageSetup.jspf" %>

<script type="text/javascript" src="<c:out value="${dojoFile}"/>" djConfig="${dojoConfigParams}"></script>

<script type="text/javascript">

dojo.require("dojo.parser");
dojo.require("dijit.layout.AccordionContainer");

dojo.addOnLoad(function() {
dojo.parser.parse();

});
              
                             
</script>                            
             
                             
<style type="text/css">
               /* bring in the claro theme */
               @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
</style>

<html>
<body class="claro">


<!-- The container must be a dijit.layout.AccordionContainer -->
<div id="accordion" dojoType="dijit.layout.AccordionContainer">

               <!-- Accordion item -->
               <div class="element" title="Accordian Pane1" dojoType="dijit.layout.ContentPane" selected="true" >
                                             <p>Accordian Item1</p>
               </div>
              
               <!-- Accordion item -->
               <div class="element" title="Accordian Pane2"  dojoType="dijit.layout.ContentPane">
                                             <p> Accordian Item2...</p>
               </div>
              
               <!-- Accordion item -->
               <div class="element" title="Accordian Pane3" dojoType="dijit.layout.ContentPane">
                                             <p> Accordian Item3</p>
               </div>
              
</div>

</body>

</html>



 As  you can see  by setting “ selected="true” will set the first accordion item as selected

1 comment: