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"));
 });
});

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>


Saturday, May 3, 2014

Reviving Archaic Tech: Setup DB Resource/JDBC Realm in Tomcat 7

Setup JDBC Realm in Context.xml

<Realm className="org.apache.catalina.realm.JDBCRealm"
driverName="com.mysql.jdbc.Driver"
connectionURL="jdbc:mysql://localhost/jcredentials?user=root&password=*****"
userTable="users" userNameCol="username" userCredCol="passwd"
   userRoleTable="user_roles" roleNameCol="rolename"/>

Setup JDBC Resource in Context.xml

<Resource name="jdbc/jBlogDB"
auth="Container" 
type="javax.sql.DataSource" 
username="root" password="****"
driverClassName="com.mysql.jdbc.Driver" 
url="jdbc:mysql://localhost/jblog"
maxActive="8" maxIdle="4"/>

LAMP Installation and Setup

Installing Apache, MySQL and PHP on Xubuntu

Configure scripts:


Apache 2.4.9


./configure --prefix=/usr/local/apache --enable-modules=all --enable-isapi --enable-so --enable-cache --enable-case-filter --enable-deflate --enable-proxy --enable-rewrite --enable-ssl --with-mpm=worker

PHP 5.5.12

./configure --prefix=/usr/local/php --with-apxs=/usr/local/apache/bin/apxs --enable-bcmath --enable-calendar --with-mysqli --enable-calendar --enable-ftp --with-gd --with-curl --with-xsl --with-xmlrpc --with-bz2 --enable-intl --enable-mysqlnd --with-pear --enable-zip --enable-soap

Post Install changes to Apache http.conf

// Should be automatically added
LoadModule php5_module        modules/libphp5.so

// Add Handler Manually
AddHandler application/x-httpd-php .php

// Update Document Root
DocumentRoot "/home/user/Development/web"
// Configure root directory - default settings

<Directory "/home/user/Development/web">
    
# Possible values for the Options directive are "None", "All",
# or any combination of:
# Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
# Note that "MultiViews" must be named *explicitly* --- "Options All"
# doesn't give it to you.
# The Options directive is both complicated and important.  Please see
# http://httpd.apache.org/docs/2.4/mod/core.html#options 
# for more information.

Options Indexes FollowSymLinks
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
# AllowOverride FileInfo AuthConfig Limit

AllowOverride None
# Controls who can get stuff from this server.

Require all granted
</Directory>