WDK of Documentum 6 brings in come major enhancement for developers. The new library is Section 508 compliant and has also undergone user testing for accessibility and usability by the NFB (National Federation for the Blind). The list of new features is a big list including change to UI like right-click context menus, XML-based fixed menus that can be modified or extended, Configurable keyboard shortcuts etc. In this post we will see how to add a menu to the menu bar using configuration elements rather than extending menubar component.

In previous versions on WDK, you would have extended the menubar component and placed the xml in custom/config folder. You would also move the menubar.jsp with your new menu and menu items. In D6, things are little different. Let me quote from WDK tutorial PDF:

<config>

 <scope>

  <menuconfig modifies="menubar_tools_menu:webcomponent/config/library/menubar/menubar_component.xml">

   <insert path="menu[name=tools_menu]">

    <actionmenuitem dynamic = "genericnoselect"

     name = "hello_world_menu_item"

     id = "hello_world_menu_item"

     value = "Hello World"

     action = "hello_world_action"

     showifinvalid = "true"/>

   </insert>

  </menuconfig>   

 </scope>

</config>

<menuconfigids>

 <id>menubar_file_menu</id>

 <id>menubar_edit_menu</id>

 <id>menubar_view_menu</id>

<id>menubar_tools_menu</id>

</menuconfigids>

<component modifies="menubar:webcomponent/config/library/menubar/menubar_component.xml">

 <replace path="menuconfigids">

  <menuconfigids>

   <id>menubar_file_menu</id> 

   <id>menubar_tools_menu</id>

   <id>my_tools_menu</id>

  </menuconfigids>

 </replace>  

</component>

<menuconfig id="my_tools_menu">

   <menu name="Level1" value="Level One">

    <actionmenuitem dynamic = "genericnoselect"

     name = "hello_world_menu_itemx"

     id = "hello_world_menu_itemx"

     value = "Hello World"

     action = "hello_world_action"

     showifinvalid = "true"/>

   </menu>

</menuconfig>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<config version="1.0">

 <scope>  

  <menuconfig id="my_tools_menu">

   <menu name="Level1" value="Level One">

    <actionmenuitem dynamic = "genericnoselect"

     name = "hello_world_menu_itemx"

     id = "hello_world_menu_itemx"

     value = "Hello World1"

     action = "hello_world_action"

     showifinvalid = "true"/>

   </menu>

  </menuconfig>  

  <component modifies="menubar:webcomponent/config/library/menubar/menubar_component.xml">

   <replace path="menuconfigids">

    <menuconfigids>

     <id>menubar_file_menu</id> 

     <id>menubar_tools_menu</id>

     <id>my_tools_menu</id>

    </menuconfigids>

   </replace>   

  </component>  

 </scope>

</config>

Libraries like iText,PDFBox are some of the best libraries available for PDF creation and manipulation. But these libraries have its disadvantages. One such disadvantage is templating the PDFs you create. In a enterprise where reports (PDF files) are generated automatically and routed to work-flows or stored in content management repositories. These reports follow an enterprise level style and pattern which can be reused, can change and will require proper management. Hardcoding styles and formats of reports into your application can cause lots of issues in future. That's when XSL-FO and Java (or other language) come into picture. In this article I will introduce XSL-FO and Apache FOP.

Let me intoduce XSL-FO first. XSL-FO stand for Extensible Stylesheet Language Formatting Objects and is a language for formatting XML data. It was initially part of the XSL W3C recommendation. So W3C has come up with XSLT for transforming XML documents and XSL-FO for formatting. XSL-FO documents are XML files that contain information about the output layout and output contents. But they do not specify the content type of the output. This output can be any document type; all you need is a transformation library that transform the XSL-FO to the appropriate content. In this article I will make use of Apache FOP, which is part of Apache XML Graphics Project.

First look at XSL-FO:
Here is a sample XSL-FO file. Like any other XML file, its starts with XML declaration:

<?xml version="1.0" encoding="utf-8"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">



<fo:layout-master-set>

  <fo:simple-page-master master-name="A4">

    <fo:region-body margin="2cm" />

    <fo:region-before/>

  </fo:simple-page-master>

</fo:layout-master-set>



<fo:page-sequence master-reference="A4"> 

  <fo:flow flow-name="xsl-region-body">

    <fo:block>Hello World!</fo:block>

  </fo:flow>

</fo:page-sequence>

</fo:root>

OutputStream outputPDF = new BufferedOutputStream(new FileOutputStream("hello.pdf"));



FopFactory ff = FopFactory.newInstance();

Fop fop = ff.newFop(MimeConstants.MIME_PDF, outputPDF);

TransformerFactory factory = TransformerFactory.newInstance();



Transformer transformer = factory.newTransformer();

Source src = new StreamSource(new File("hello.fo"));

Result res = new SAXResult(fop.getDefaultHandler());

transformer.transform(src, res);     

With plenty of open source AJAX libraries out there (and increasing), Google has come up with the idea of host the most popular once. This will developers instant access to AJAX libraries like jQuery, Dojo etc. Web developers ; I would say mostly people who have blogs and wikis hosting on free services like blogger, wordpress etc, will now be able to use these libraries by just loading them using the new API.

AJAX Libraries API will simply help you to loading architecture for the most popular open source Java Script libraries. These libraries are hosted on Google's servers. Developers can use Google's API loader's google.load method to load the library. Presently, Google hosts the following Java Script libraries:

<script src="http://www.google.com/jsapi"></script>

<script>

  // Load jQuery

  google.load("jquery", "1.2.3");

</script>

<html>

<head>

<script src="http://www.google.com/jsapi"></script>

<script>

google.load("jquery", "1.2.3");



google.setOnLoadCallback(function() {



 $("a").click(function() {

     alert("Hello world!");

   });



 $("#sam").click(function() {

  alert("display");

  $("#hidden").show();

 });



});

</script>

</head>

  <body> 

   The content begins.. <br/>

   <div class="divStyle newStyle"> <a href="http://www.google.com">This</a> is a test </div>   <br/>

   <div id="sam"> This is another Test <div id="hidden" style="display:none">hidden text</div></div>

   The content ends.. <br/>

  </body>

</html>

Documentum provides a very good framework for web applications called WDK. If you have worked with WDK, I am sure you must have come across the Ajax and webtop examples. When ExtJS 2.1 was released I needed to test it features, and the idea of using Ext in Documentum struck me! Here we will integrate Ext and Documentum in a simple WDK application. We will use WDK widgets to build the regural forms but add Ext Slider widget (not available in WDK) to the form.

Integrating or mashups are not always easy. As web developer we all would think that just adding the Ext java script files to the WDK application folders will be enough to get things started. But that turned out to be wrong. So lets start with troubled water.

Troubled Water
We will have few questions first and try answering them. Where will be deploy our Ext files? Where will we access Ext files from (container JSPs or our custom component JSPs)? I will answer these questions collectively. I assume you already have a skeleton WDK application on your server and I am sure you know our customizations will go into to custom folder.

We will hold all Ext related files in customjs folder under the custom folder. And as any normal WDK application, I will have my configurations in config and create appropriate JSPs. Now lets come to the second question. We will access these files from component JSP and will use complete context path to access the java script files. The reason to use complete context path is that, container JSPs access all java script files from /wdk/include folder. Now you know the folder structure, let move to programming.

Setting up Ext
Like any other Ext enabled application I will have a appjs which hold my custom Ext files. In customjs folder I have two folders : appjs and extjs. extjs will hold all the Ext library and appjs will hold our application.js file. In our application we will just be adding a slider to the Documentum form. My application.js will look like this:

app = function() {   

  var sampleSlider; 

   var sliderClick = function(slider,event) {



    sobject = document.getElementById("agetxt");

    sobject.value = slider.getValue();



    sobject = document.getElementById("sliderval");

    sobject.value = slider.getValue();



   }

  return {

   init:function() {        

    sampleSlider = new Ext.Slider({renderTo:'sample-slider',width: 200,minValue: 0,maxValue: 100});

    sampleSlider.addListener('dragend',sliderClick);



   }   

  }; 

}();

In my previous article I introduced you to Adobe's Spry framework for Ajax and explained its pros and cons. In this article, we will implement Spry into a blog and see how beautifully it works. Our aim will be to add an accordion in the right column. We will display a panel of badges, and widgets like Blog Rush and Feedjit in this accordion.

Spry provides widgets that are independent to one another and this makes it very easy to implement it restrictive environment. Another plus point is that your implementation of accordion is going to be very small. And the implementation is very simple. Once you have the downloaded Spry framework, you need unzip it and get hold of just two files located at \widgets\accordion. You need SpryAccordion.css and SpryAccordion.js files to build your project. If you want to make come changes, you can modify the CSS file. The file contains all the necessary style classes required for the accordion widget.

Once your custom modifications are done. Its time we move it on to the web! To host these two files, I will be using Google Pages. Many of you will be wondering why I am using Google pages and not other services that are specifically used to host files on web. The reason is, majority of these hosting services are bocked at corporate gateways and offices. I am not willing to mess up by blog when professionals access my blog. So, I will be using Google Pages. Coding a Spry widget is very simple. The accordion we are building will be represented as DIV tags. We will have a main DIV tag denoting the widget and each accordion panel will be represented as separate DIVs inside the main one. Each panel is further divided into panel heading and content. Both these parts are also denoted using DIV. So our widget code will look like this on completion:

<div class="Accordion" id="sampleAccordion" tabindex="0">

 <div class="AccordionPanel">

  <div class="AccordionPanelTab">Panel Heading</div>

  <div class="AccordionPanelContent">

   All the blog badges, images, will go in here.

 I can have multiple para tags and other tag here.

  </div>

 </div>

 <div class="AccordionPanel">

  <div class="AccordionPanelTab">Panel Heading next</div>

  <div class="AccordionPanelContent">

   Content for Panel 2 goes here!

  </div>

 </div>

 <div class="AccordionPanel">

  <div class="AccordionPanelTab">Final</div>

  <div class="AccordionPanelContent">

   Content for the last accordion panel goes here!

  </div>

 </div> 

</div>

<script language="JavaScript" type="text/javascript">

var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion");

</script>

<link href="http://araotest.googlepages.com/SpryAccordion.css" rel="stylesheet" type="text/css" media="all" />

<script src="http://araotest.googlepages.com/SpryAccordion.js" type="text/javascript"></script>

All computer graduates must be familiar with a paper named DBMS (where we cramp about RDBMS, relational model etc). I am sure majority of you must have come across the book “Database System Concepts” authored by Silberschartz, Korth and Sudarshan. The book has one or two chapters on Object Oriented Database which most of use just skim through or doesn’t even bother to read. Even though the book only introduces the basic concepts… it was dumped deep in memory until I found db4o.

Db4o is a open source Object Database for Java and .NET. It provides a native object database engine that can be embedded into any application. The database like many other successful open source product is dual licensed. The free version is licensed under GPL. So what’s special about db4o?

In 1990s many non-native ODBMS make into market that was unsuccessful for technical and business reasons. ODBMS stores objects directly into database but this is not what we see now. We usually use RDBMS (Oracle, MySQL or SQL Server) and our programming paradigm (OOP) does not match up with RDBMS. Industry has provided solutions to reduce the complexity. One such example is Hibernate. But using these ORM (Object-Relation Mapper) does not solve the problem completely.

We now have pure ODBMS to solve these issues. Db4o works for both Java and .NET programming environment and claims to be 55x faster than Hibernate. The database is also very small and supports features like ACID transactions, replication system, data compatibility with RDBMS and very important; easy coding. The database also provides multiple querying system, has a GUI interface (ObjectManager) where users can browse, view, read, delete objects. You will also get database tuning tools so db4o is worth a look!

I did some code to have a feel the object database and found it very simple and straight forward. Db4o provides multiple ways to query and an interesting method is Query-By-Example. When we study DBMS as a paper during graduation, we concentrate on SQL and RDBMS; I think students should have a look at ODBMS and try it along with RDBMS.

Finally I have the CRUD application built on Ext and Java. CRUD stands for Create Read Update and Delete. This application will show how to build a simple but complete web application. I have used Java as my server side and Oracle XE to store my data. You can use any server side technology and persistence technology. Now let’s look at the application.

The major reason to build this web application was to make use of multiple Ext components and show how they can be used in an application. Please note that I have kept the code simple. You will find many improvements that can be made. I leave it as an exercise for you to do. The Application has three parts: Front End (Ext), server side (Java Servlets) and back end (Oracle).

The Front End:
The front end consists of a HTML page and JavaScript file. The complete application code goes into this JavaScript file. We have a main menu, forms for creating, editing and a grid view to display all the records available. The main menu is stick to the body as toolbar. I have implemented both drop down menu and normal action button to demonstrate how both of these can be implemented.

Below is a snap shot of the front-end:



The Server Side:
I work on java and love it! So my server side is Java. You may use PHP,.Net or any other of your choice. I have four Servlets create; each for my major operations. With minor tweaking, you can easily reduce the number (yet another exercise!). All these Servlets connect to Oracle XE for INSERT, SELECT, UPDATE or DELETE operations.

The Back End:
Finally the last part of the application: the back end where all the data is stored. Oracle provides its version of DB freely named Express Edition. The DB has all features available for its commercial version. But XE has some restriction like your DB size cannot exceed 2GB. But the product comes with a very good web application to do all sort of operations from admin to application building.

Our table consists of four fields: Name, Age, City and Phone number. I have not specified any primary key but for update operation I make use of name as search field. Below is the table structure:


The Code:
Enough of background! Let’s have a look at the Ext coding:

app = function() {



    var createForm;

    var updateForm;

    var ds;

    var dataGrid;

    var menu;

    var updateMenuItem;

    var createMenuItem;

    var readMenuItem;

    var deleteMenuItem;

    var tb;

    var sm;



  var onCreateClick = function() {

   createForm.show();

  }



  var onReadClick = function() {  

   dataGrid.show();

   ds.load({params:{start:0,limit:3,forumId: 4}});



  }  



  var onUpdateClick = function() {

   if(sm.getSelected()) {

    var record = sm.getSelected();



    var rname = record.get('name');    

    var nameComponent = updateForm.getComponent('upName');



    var rage = record.get('age');    

    var ageComponent = updateForm.getComponent('upAge');



    var rcity = record.get('city');    

    var cityComponent = updateForm.getComponent('upCity');



    var rphone = record.get('phone');    

    var phoneComponent = updateForm.getComponent('upPhone');



    nameComponent.setValue(rname);  

    ageComponent.setValue(rage);

    cityComponent.setValue(rcity);

    phoneComponent.setValue(rphone);



    updateForm.show();

   } else {

    Ext.MessageBox.alert("Error!!!","Please select a record that you would like to update!

 For selecting a record, click on Read and choose any record from the data grid.");

   }

  }



  var onDeleteClick = function() {

   if(sm.getSelected()) {

    var record = sm.getSelected();    

    var rname = record.get('name');

    Ext.Ajax.request({url:'DeleteAction',success: doneFunction,failure: errorFunction,params:{name:rname}});

   } else {

    Ext.MessageBox.alert("Error!!!","Please select a record that you would like to delete!

 For selecting a record, click on Read and choose any record from the data grid.");

   }

  }



  var saveButtonHandler = function() {   

   createForm.form.submit({url:'FormAction', waitMsg:'Saving Data...',success:doneFunction});

  }



  var updateButtonHandler = function() {   

   updateForm.form.submit({url:'UpdateAction', waitMsg:'Updating Data...',success:doneFunction});

  }



  var closeButtonHandler = function() {

   createForm.hide();

  }



  var cancelButtonHandler = function() {

   updateForm.hide();

  }



  var doneFunction = function(form,action) {   

   Ext.MessageBox.alert("Save Status","Data Saved to DB");

   ds.load(); 

  }



  var errorFunction = function() {

   Ext.MessageBox.alert("Error","Error Error Error ");



  }



  var onRowClick = function(SelectionModel,rowIndex,record)  {



  }



  return {



   init:function() {



    menu = new Ext.menu.Menu();

    createMenuItem = new Ext.menu.Item({text:'Create',handler:onCreateClick});

    readMenuItem = new Ext.menu.Item({text:'Read',handler:onReadClick});

    updateMenuItem = new Ext.menu.Item({text:'Update',handler:onUpdateClick});

    deleteMenuItem = new Ext.menu.Item({text:'Delete',handler:onDeleteClick});



    menu.add(createMenuItem,readMenuItem,updateMenuItem,deleteMenuItem);   



    tb = new Ext.Toolbar();

    tb.render('menu'); 

    tb.add({text:'Operations',menu: menu});

    tb.add({text:'Create',handler: onCreateClick});

    tb.add({text:'Read',handler:onReadClick});

    tb.add({text:'Update',handler:onUpdateClick});

    tb.add({text:'Delete',handler:onDeleteClick});



    createForm = new Ext.FormPanel({applyTo:'createForm',

       bodyStyle:'padding:10px',

       title:'Create data record',

       labelWidth:50,

       items:[new Ext.form.TextField({fieldLabel:'Name',

            name:'name'}),

          new Ext.form.NumberField({fieldLabel:'Age',

         name:'age',  

         width:25,

         maxLength :2}),

          new Ext.form.TextField({fieldLabel:'City',

         name:'city'}),

          new Ext.form.NumberField({fieldLabel:'Phone',

         name:'phone'})            

       ],

       buttons:[{text:'Save',handler:saveButtonHandler},

         {text:'Close',handler:closeButtonHandler} 

       ]

      });



   ds = new Ext.data.Store({

       url:'ReadToList',

        reader: new Ext.data.XmlReader({record:'record'},

           ['name','age','city','phone'])

         });



   var cm = new Ext.grid.ColumnModel([{header: "Name", width:80, dataIndex: 'name',sortable: true},

   {header: "Age", width: 50, dataIndex: 'age',sortable: true},

   {header: "City", width: 100, dataIndex: 'city',sortable: true},

   {header: "Phone", width: 100, dataIndex: 'phone',sortable: true}

   ]); 



   sm = new Ext.grid.RowSelectionModel({singleSelect:'true'});

   sm.addListener('rowselect',onRowClick,this);



   var tbp = new Ext.PagingToolbar({pageSize:3,store:ds,displayInfo:true});



   dataGrid = new Ext.grid.GridPanel({applyTo:'readPanel',

    ds:ds,

    cm:cm,

    sm:sm,

    tbar:tbp,

    title:'CRUD Data from Database'    

   });



   updateForm = new Ext.FormPanel({applyTo:'updateForm',

       bodyStyle:'padding:10px',

       title:'Update data record',

       labelWidth:50,

       items:[new Ext.form.TextField({id:'upName',

        fieldLabel:'Name',                    

        name:'uname'}),

          new Ext.form.NumberField({id:'upAge',

        fieldLabel:'Age',

        name:'uage',  

        width:25,

        maxLength :2}),

          new Ext.form.TextField({id:'upCity',

        fieldLabel:'City',

        name:'ucity'}),

          new Ext.form.NumberField({id:'upPhone',

        fieldLabel:'Phone',

        name:'uphone'})            

        ],

       buttons:[{text:'Update',handler:updateButtonHandler},

        {text:'Cancel',handler:cancelButtonHandler} 

       ]

    });

      } 

  };

}();

This is in response to the first comment I received for my previous post: All about Ext.FormPanel. My reader had requested for an example where HtmlEditor are used. And here is the response! We will learn to create forms that use the WYSIWYG editor provided by Ext.

The Basics
Ext provides developers with a good WYSIWYG editor under Ext.form.HtmlEditor. But making use of it can be bit tricky. The editor provided, is simple yet very powerful. It even has option for source editing apart from other normal options like font size, font family, colour, links etc. The library provides enough options to customize the components to user needs. Below are the important configuration options for the editor:

formObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),

  title:'Sample form',

                bodyStyle:'padding:10px',        labelWidth:60,                        items:[new Ext.form.TextField({id:'tf',

           name:'uname',                  inputType:'text',          fieldLabel:'Name',          allowBlank:false                 }),                 new Ext.form.TextField({id:'ema',         name:'email',          inputType:'text',         fieldLabel:'E-mail'       }),           new Ext.form.HtmlEditor({id:'sug',          name:'suggest',         fieldLabel:'Suggestion'        })          ], 

        buttons:[{text:'Submit',handler:buttonHandler}]     

});

Ext.QuickTips.init();

app = function() {

  var formObject;



  var buttonHandler = function(button,event) {

     alert('You clicked the button!');

  };   



return {



   init:function() {



   Ext.QuickTips.init();  



   formObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),

                    title:'Sample form',

                    bodyStyle:'padding:10px',

                    labelWidth:60 ,

                    items:[

                        new Ext.form.TextField({id:'tf',

                        name:'uname',

                        inputType:'text',     

                        fieldLabel:'Name',

                        allowBlank:false  

                        }),

                        new Ext.form.TextField({id:'ema',

                        name:'email',

                        inputType:'text',

                        fieldLabel:'E-mail'

                        }),                

                        new Ext.form.HtmlEditor({id:'sug',

                        name:'suggest',

                        fieldLabel:'Suggestion'                  

                        })

                  ],

                  buttons:[{text:'Submit',handler:buttonHandler}]            

                });

   } 

};

Forms are very important part of a web application. As they play a major role in date collection and manipulation, designing a fully functional form becomes a challenging task. Ext provides all necessary widget required to build complex forms in a simple way. It also has a good validation, submit and data load functionality. I will cover creating and submitting of forms.

In Ext, forms are classes derived from Panel and the library provides two ways to build a form: BasicForm and FormPanel. We will see how to build a form using FormPanel.

The Basics:
Ext provides form related class under the package Ext.form. Creating a form starts with instantiating an object of FormPanel. Like any Ext component, the constructor accepts the configuration of the component you are creating. A simple form creation will look like this:

panelObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),

                                     title:'A simple form'

                                   });

panelObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),        title:'A simple form',

    height:170,    

    labelWidth:60 ,                 items:[new Ext.form.TextField({id:'tf',              name:'uname',                inputType:'text',               fieldLabel:'Name'                }),                 new Ext.form.TextArea({id:'ta',             name:'addr',               fieldLabel:'Address',              height:70,

                                      width:150                })             ],           bbar:[{text:'Submit',handler:buttonHandler}]

    });

app = function() {



 var formObject;



 var buttonHandler = function(button,event) {

  formObject.form.submit({url:'FormAction', 

waitMsg:'Saving Data...',

success:doneFunction

});

 };  



 var doneFunction = function(form,action) {

  alert("success");

 }



return {



 init:function() {



 formObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),        title:'Sample form',         height:300,          contentEl:'panel1',         labelWidth:60,          frame:true,          collapsible:true,         items:[              new Ext.form.TextField({id:'tf',

         name:'uname',

allowBlank:false, 

         inputType:'text',           fieldLabel:'Name           }),             new Ext.form.TextField({id:'pa',          name:'password',           inputType:'password',          fieldLabel:'Password'        })             ],         buttons:[{text:'Submit',handler:buttonHandler}]        });              

}   

};

}();

One fellow programmer raised this question in jGuru forum; "if a user logs-in to my web application written in PHP in Firefox, Java Script should simulate doing 'Ctrl+' so that the screen size increases". For me it sounded like implementing one of the points mentioned in Section 508. Section 508 was an amend to US congress which says electronic and information technology should be accessible to people with disabilities. Many sites like BBC have implemented this. Let have a look how we can implement one of the point in Section 508.

Here we will implement in a very small way. The solution I have provided is not complete, but you need to take it forward and modify if you need to use it in blogs or sites. For experiencing a good implementation of Section 508 check out this.

The Requirement:
As a simple statement: Provide keyboard shortcuts to increase and decrease font size in a browser. Usually sites will have button where users can select the size, font and even colour of the page’s text. In this work, we will focus on to provide button to increase and decrease font size and also provide keyboard shortcut.

Why Keyboard shortcut?
Until recently, web application never supported keyboard shortcuts. They have become famous through Gmail and Google Reader and it has been success ever since. Providing shortcuts to you web applications and web pages can improve the productivity of the user. It can also help in quick navigation. But the problem is providing a “standard” set of shortcuts which will work on all browsers. For example, you can increase the font size in Firefox with “Ctrl + Plus”, but this is not applicable in IE.

Our implementation:
We will have a non-standard keyboard shortcut to increase and decrease the font in our implementation. :( (I can’t help it!). To handle keyboard events through javascript you will find many libraries available on web. I will be using the openjs library and the reason? It’s a simple, single file library. To keep your implementation simple and easy to handle we will have the styles, script and HTML in one file.

To start with, we will be using CSS to apply style to all content in your page. Let say we have many styles, but what we need is the list of CSS class which needs to be updated when user request to increase or decrease font size. We will update all these CSS styles through JavaScript when user click on the appropriate button or hit the keyboard shortcut. To handle keyboard, we will initialize listeners in an init method.

shortcut.add("Ctrl+Shift+A",increment);

shortcut.add("Ctrl+Shift+Z",decrement);  

function getStyleByName(styleName) {

 for (i=0; i<document.styleSheets.length; i++) { 

  if (document.styleSheets[i].cssRules) {

   for (j=0;j<document.styleSheets[i].cssRules.length; j++) {

       if (document.styleSheets[i].cssRules[j].selectorText == styleName) {

         return document.styleSheets[i].cssRules[j].style;

       }

     }

  } else {

   for (j=0;j<document.styleSheets[i].rules.length; j++) {

       if (document.styleSheets[i].rules[j].selectorText == styleName) {

         return document.styleSheets[i].rules[j].style;

       }

     }

    } 

  }

}

<html>

  <head>

  <style>

  .divStyle {

   color: red;  

  }

  .newStyle {

   font-weight: bold;

  }

  </style>  

  <script type="text/javascript" src="shortcuts.js"></script>

    <script type="text/javascript">

    //<![CDATA[ 

function getStyleByName(styleName) {

 for (i=0; i<document.styleSheets.length; i++) { 

  if (document.styleSheets[i].cssRules) {

   for (j=0;j<document.styleSheets[i].cssRules.length; j++) {

       if (document.styleSheets[i].cssRules[j].selectorText == styleName) {

         return document.styleSheets[i].cssRules[j].style;

       }

     }

  } else {

   for (j=0;j<document.styleSheets[i].rules.length; j++) {

       if (document.styleSheets[i].rules[j].selectorText == styleName) {

         return document.styleSheets[i].rules[j].style;

       }

     }

  }

  }

}



function testStyleSheet() {  

 var styleObj = getStyleByName(".divStyle");

 if(styleObj) {

  alert('style.font-size: ' + styleObj.fontSize);

 } else {

  alert('style not found.');

 }

} 



function increment() {

 var styleObj = getStyleByName(".divStyle");

 if(styleObj) {

  styleObj.fontSize = "20px";  

 } else {

  alert('style not found.');

 }

}



function decrement() {

 var styleObj = getStyleByName(".divStyle");

 if(styleObj) {

  styleObj.fontSize = "10px";  

 } else {

  alert('style not found.');

 }

}



function init() {

 shortcut.add("Ctrl+Shift+A",increment);

 shortcut.add("Ctrl+Shift+Z",decrement);  

}

 //]]>

   </script>

  </head>

  <body onLoad="init()"> 

   <input type="submit" onclick="increment()" value="Increment Size"/>

   <input type="submit" onclick="decrement()" value="Decrement Size"/>

   <input type="submit" onclick="testStyleSheet()" value="Test StyleSheet"/>

   <hr/>

   <div class="divStyle">A sample text</div>

   <div> Without the disStyle class attched to the DIV tag. the fonts will not increment and decrement. The big trouble is the key combination in mozilla.

    http://www.openjs.com/scripts/events/keyboard_shortcuts/

   </div>

   <div class="divStyle newStyle"> This is a test </div>

  </body>

</html>

I have already demonstrated the difference of ExtJS1.x and 2.0 with a simple "Hello World" program. Now let’s get deeper and this time it’s about buttons in ExtJS. In this article we will cover creating, handling and manhandling of Ext buttons.

Setting up your programming environment:

There isn’t much to this. If you do not have ExtJS 2.0, you need to download the latest version. All you have to do is unzip the downloaded file, place them in a proper folder structure. I usually have a folder structure as shown:



The js folder has all the JavaScript of the application. Inside this folder I have separate folders for different libraries and I store my custom JavaScript files in appjs. Again this appjs can have subfolders to separate JavaScript files module-wise. This might not be the best folder structure but for now we will stick to this. If you are new to Ext you can have a look at my "Hello World" program.

Ok! Now we are ready for some action. Let’s start with creating a simple button.

Creating a Button:

Ext has Button class implement in the base package ie, Ext. To create a button all you have to do is create an instance of this class and specify the attributes. The Button class has a parameterized constructor with one parameter, the button’s configuration!
Here is the code to create a simple button:

buttonObject = new Ext.Button({applyTo:'button-div',text:'Simple Button'});

buttonObject = new Ext.Button({applyTo:'button-div',text:'Testing',handler:buttonHandler});

app = function() {



        var buttonObject;



 var buttonHandler = function(button,event) {

  alert('You clicked the button!');

 };



 return {



     init:function() {

  buttonObject = new Ext.Button({applyTo:'button-div',         text:'Testing',

      handler:buttonHandler});



    } 

 };

}();

buttonNext = new Ext.Button({text:'Touch me'});

buttonNext.applyToMarkup('nxt-button');

buttonNext.addListener('mouseover',mouseHandler);

app = function() {



 var buttonObject;

 var buttonNext;



 var buttonHandler = function(button,event) {

  alert('You clicked the button!');

  buttonNext.fireEvent('mouseover');

 };



 var mouseHandler = function(button,event) {

  alert('Mouse on me!');

 };



 return {

        init:function() {

  buttonObject = new Ext.Button({applyTo:'button-div',

      text:'Click me',

      handler:buttonHandler});



             buttonNext = new Ext.Button({text:'Touch me'});

  buttonNext.applyToMarkup('nxt-button');

  buttonNext.addListener('mouseover',mouseHandler);

    } 

 };

}();

buttonNext.suspendEvents();

jQuery is one of the simplest JavaScript library available for handling events, performing animations, and add Ajax web pages. jQuery team has announced the alpha release of two new JavaScript libraries: jQuery UI and jQuery Ehchant! These two libraries add UI and special effects to existing jQuery library.

Like any other JavaScript library, jQuery UI provides a set of themable widgets on top of the jQuery core library. The (Alpha) library provides widgets like Accordion, Dialog boxes, Tabbed content panes, Tables etc. And the team still working on widgets like Menu, Toolbars, Tree, Splitter, Rich Text Editor etc. for a demo on the existing widgets try the URL : http://ui.jquery.com/1.5a/demos/.

On the other side, jQuery Ehchant is meant for special effects. You can see dome cool examples of this library here! To use these, you will need the jQuery core library. So download jQuery 1.2.3! this new release includes support for Adobe AIR, Namespacing and of course, jQuery UI. You can download these libraries at:

jQuery UI: http://jqueryjs.googlecode.com/files/jquery.ui-1.5a.zip
jQuery Enchant: http://jqueryjs.googlecode.com/files/jquery.enchant-1.0a.zip

You can also access all the documentations here. Happy jQuerying!

Ext JavaScript library, used for building rich internet applications has emerged as a popular and very vast library. The Ext team has recently released 2.0.1 which is a maintenance release and fixes lots of issues it predecessor had. Over time, developers around have created wrapper libraries to make Ext more developer friendly and easier.

Ext makes the complete use of JavaScript to build the rich application. The code to build a page at times becomes quite large (especially if you have lot of components). Using Ext in its raw form can be difficult if you are new to JavaScript. This is mainly because it difficult to debug the js code and Ext still lacks good tutorials. But I have come across many open-source projects that are aimed to make developer’s life easy. All these projects seem to be quite good and moving in positive direction.

ExtTLD: Ext library extension for java developers! You have all Ext components represented in the form of tags. All you have to do is add the TLD library, add JSTL support and Apache commons library to your project. The project is still in beta stage and is available for download. But I am not sure of the license in which this library will be distributed and its Tag source code is not available for download.

To test, I downloaded the library and was programming the next minute. The steps are simple and easy. Have a look at sample code:

<ext:body>

<ext:window title="Testing" width="300" height="300" id="myWindow">

 <ext:toolbar>

  <ext:toolbar.button text="Button 1" />

 </ext:toolbar>

 <div style="padding:5px">This is a simple window in Ext </div>

</ext:window>

</ext:body>

Many bloggers and small companies make use of Google Analytics to analyze their web traffic. But how many of them are making full use of it? Analytics don't end at installing the code and setting Goals. There are many fine tuning a web developer needs to do in order to trac