Sunday, May 4, 2014

Dojo 1.9 Layout Example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<link rel="stylesheet" href="//localhost/common/libs/dojo-release-1.9.3/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="//localhost/common/libs/dojo-release-1.9.3/dijit/themes/soria/soria.css" />
<link rel="stylesheet" href="//localhost/common/libs/dojo-release-1.9.3/dijit/themes/nihilo/nihilo.css" />
<link rel="stylesheet" href="//localhost/common/libs/dojo-release-1.9.3/dijit/themes/tundra/tundra.css" />

<script>
 dojoConfig={
   async:true
 };
</script>
 <style>
 html, body {
  width:100%;height:100%;overflow:hidden;margin:0;padding:0;
  font-family:Verdana, Helvetica, sans-serif;
  font-size:9pt;
  }
 </style>
 <script src="//localhost/common/libs/dojo-release-1.9.3/dojo/dojo.js"></script>
 <script>
 var appStyle = "claro";
 require(["dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-attr",
          "dojo/domReady!"], function (dom, on, domConstruct, domStyle, domAttr){
  domAttr.set(document.body, "class", appStyle);
  document.body.appendChild(domConstruct.create("div", {
   id:"app", 
   style:"width:100%;height:100%;"
  }));
 });
 
 require(["dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-attr",
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer",
          "dojo/domReady!"], 
 function (dom, on, domConstruct, domStyle, domAttr, BorderContainer, ContentPane, AccordionContainer){
  
  var app = new BorderContainer({
    id:"appContainer", 
    design:"headline"
   }, dom.byId("app"));
  
  var topPane = new ContentPane({
    id:"topPane",
    region:"top",
    style:"background-color:#E1EBFD;height:auto;"
   }, dom.byId("headerDiv"));
  var leftPane = new ContentPane({
    id:"leftPane", 
    region:"left", 
    splitter:true,
    style:"background-color:#E1EBFD;width:25%;padding:0; margin:0;"
   });
  var mainPane = new ContentPane({
   id:"mainPane", 
   region:"center"
  });
  
  app.addChild(topPane);
  app.addChild(leftPane);
  app.addChild(mainPane);
  app.startup();
  
  // -----------------------------------------
  var ctnr = new AccordionContainer({
   style:"height:100%"
   });
  
  ctnr.addChild(new ContentPane({
         title: "This is a content pane",
         content: "Hi!"
     }));
  
  ctnr.addChild(new ContentPane({
         title:"This is as well",
         content:"Hi how are you?"
     }));
  
  ctnr.addChild(new ContentPane({
         title:"This too",
         content:"Hello im fine.. thnx"
     }));
  
  leftPane.addChild(ctnr);
  ctnr.resize();
 });
 </script>


No comments:

Post a Comment