Friday, May 9, 2014

Layouts using Dojo 1.9

Generate layout and add side accordion container
/*
 * @File : layout.js
 */
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;overflow:hidden;"
 });
 var mainPane = new ContentPane({
  id : "mainPane",
  region : "center",
  content:"

Main Pane

" }); var btmPane = new ContentPane({ id : "btmPane", region : "bottom", content:"

Main Pane

" }); app.addChild(topPane); app.addChild(leftPane); app.addChild(mainPane); //app.addChild(btmPane); app.startup(); // ----------------------------------------- }); require(["dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-attr", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dojo/domReady!"], function(dom, on, domConstruct, domStyle, domAttr, ContentPane, AccordionContainer) { var ctnr = new AccordionContainer({ style : "height:100%;" }); ctnr.addChild(new ContentPane({ title : "List Posts", content : "Create/Edit Blog Posts", style : "" })); ctnr.addChild(new ContentPane({ title : "Calendar/ToDo", content : "Hi how are you?" })); ctnr.addChild(new ContentPane({ title : "Wiki", content : "Edit Wiki" })); ctnr.placeAt(dom.byId("leftPane")); ctnr.resize(); });
Now generate form elements for blog updates
/**
 * 
 * @ File  blogEdit.js
 */
/**
 * @author Anang Phatak
 */
require([ "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-style", "dojo/ready",
  "dojo/dom-attr", 
  "dojox/layout/TableContainer",
   "dijit/registry", 
   "dijit/form/Form","dijit/form/TextBox", "dijit/form/Button", 
   "dijit/TitlePane",
   "dijit/Editor", 
   "dijit/_editor/plugins/FullScreen",
   "dijit/_editor/plugins/TextColor", 
   "dijit/_editor/plugins/FontChoice", 
   "dijit/_editor/plugins/LinkDialog", 
   "dijit/_editor/plugins/Print", 
   "dijit/_editor/plugins/ViewSource", 
//   "dojox/editor/plugins/PrettyPrint",
//   "dojox/editor/plugins/PageBreak",
//   "dojox/editor/plugins/ShowBlockNodes",
//   "dojox/editor/plugins/Preview",
//   "dojox/editor/plugins/Save",
//   "dojox/editor/plugins/ToolbarLineBreak",
//   "dojox/editor/plugins/NormalizeIndentOutdent",
//   "dojox/editor/plugins/Breadcrumb",
//   "dojox/editor/plugins/FindReplace",
//   "dojox/editor/plugins/PasteFromWord",
//   "dojox/editor/plugins/InsertAnchor",
//   "dojox/editor/plugins/CollapsibleToolbar",
//   "dojox/editor/plugins/TextColor",
//   "dojox/editor/plugins/Blockquote",
//   "dojox/editor/plugins/Smiley",
//   "dojox/editor/plugins/UploadImage",
   "dojox/editor/plugins/TablePlugins",
   "dojox/html/entities",
   "dojo/domReady!" ], 
function(dom, on, domConstruct, domStyle, ready, domAttr,
  TableContainer, 
  registry, Form, TextBox, Button,
  TitlePane, Editor,
  FullScreen, TextColor, FontChoice, LinkDialog, Print, ViewSource,
  TablePlugins,
  entities
//  PrettyPrint,
//  PageBreak,
//  ShowBlockNodes,
//  Preview,
//  Save,
//  ToolbarLineBreak,
//  NormalizeIndentOutdent,
//  Breadcrumb,
//  FindReplace,
//  PasteFromWord,
//  InsertAnchor,
//  CollapsibleToolbar,
//  TextColor,
//  Blockquote,
//  Smiley,
//  UploadImage
  ) {
 
 ready(function () {
  
  var tp = new TitlePane({
   title:"Login to jBlog", 
   open:true
  });
  
  var frm = new Form({
   action: '',
         method: 'post',
         label: "Login to jBlog",
         onSubmit:function () {
          console.log(arguments);
     
          return false;
         }
  });
  
  var tc = new TableContainer({
   id:"loginCntr",
   cols:1,
   showLabels:true,
   orientation:"horiz",
   valign:"top",
   label:"Login to jBlog"
  });
  
  var titleTxt = new TextBox({
   id:"txtTitle",
   name:"blogTitle",
   label: "Blog Title:",
   placeHolder: "New Blog Title",
   style:"width:100%;",
   required:true
  });
  
  var btnSubmit = new Button({
   id:"btnSubmit",
   type:"Submit",
   label: "Submit"
  });
  
  var editor = new Editor({
   id : "blogEditor",
   label : "Blog Text",
   extraPlugins : [
     'fullscreen',
     'foreColor',
     'hiliteColor',
     'createLink',
     'insertImage',
     "|",
     'insertTable',
     'print',
     'viewsource',
     "|",
     {
      name : "dijit/_editor/plugins/FontChoice",
      command : 'fontName',
      values : [ 'Segoe UI', 'Calibri', 'Courier New',
        'Helvetica', 'Verdana', 'Myriad', 'Garamond' ]
     }, 
     'fontSize', 
     'formatBlock'],
   "class" : "nihilo",
   "style" : "font-family:Courier New, font-size:8pt;"
  });
  on(editor, 'change', function(v) {
   console.log(entities.encode(v));
  });
  
  tc.addChild(titleTxt);
  tc.placeAt(frm);
  editor.placeAt(frm);
  btnSubmit.placeAt(frm, "last");
  frm.placeAt(dom.byId("mainPane"));
 });
});

No comments:

Post a Comment