CRUD application using ExtJS and Java

Finally I have the CRUD application built on ExtJS 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.

GNOME 2.22 Released!

The GNOME community announced the release of GNOME 2.22 after six months of development. With its aim to provide ease of use, stability, and first class internationalization and accessibility support, let’s see some of the new features of this release.

Like any other release, this release also has new features, improvements, bug fixes, and translations. New application named Cheese. Cheese lets you take photos and make videos using your computer's webcam. It’s an open-source clone of Apple's Photobooth. Vinagre is a new remote desktop client that supports multiple simultaneous connections.

Some newly introduced features include window compositing on capable platforms. By default, this feature is disabled. GNOME has also added live previews when switching windows, transparency effects, simplified keyboard settings, improvements to tomboy and much more. Evolution, GNOME’s messaging and calendar application has also evolved to support Google Calendars and custom message labels (tagging) for your email.

So far we discussed about UI and utilities enhancement, but GNOME comes with some architectural changes as well! Two major changes include: GVFS and GIO. GVFS is the replacement for GNOME-VFS and GIO, a new shared library that is part of GLib and provides the API for GVFS. GVFS will provide a network-transparent virtual filesystem layer for GTK+ and provide better APIs for developers.

I just started GNOME 2.22 VMware Live Demo download which is around 1G and can’t wait to get it downloaded. As of now, Live CD is still not available. New version will be available for installation in Fedora 9 and Ubuntu 8.04. And I am looking forward to move from Ubuntu 6.06 to 8.04! :)

Microsoft Releases IE8 beta 1

A surpise move from Microsoft! They have released the new version of Internet Explorer, IE8. And its available for download. This shows the software giant is
not going to allow Firefox creep into its market share. You can download the latest version (beta 1) but now lets have a look at what features will IE8 provide.

Microsoft had promised the availability first beta version in first half of 2008. They also promised that it will have full support for web standards. With this beta release, Microsoft is looking at web developers and designer community and detailing some of the investments in the product for this audience. That means, They are trying to avoid broken pages! IE7 broke pages that used to work in IE6, so did the other older versions.

With IE8, Microsoft wants to improve the standards conformance of the browser and bring it up to a level that's comparable to Firefox and others. Plus make it backward compatible! IE8 will have three rendering engines, two of which are the already familiar "quirks mode" and "(not so) standards mode." used in IE7 and a new engine. This mode will be activated through
<meta> tag. So you will have to add:
<meta http-equiv="X-UA-Compatible" content="IE=8" />

IE will claim to be faster and will have some exciting features like

Activities
Activities are contextual services to quickly access a service from any web page. Some commonly use tasks like "Add to Digg", send as email etc.Activities are services that the user can install and manage. They are some what like add-ons in Fire fox, but with a specific use.

WebSlices
This is a new feature for where users can get information by subscribing to content directly within a web page. They behave like feeds in short! Internet Explorer 8 Users can discover WebSlices within a web page and add them to the Favorites bar(just like fire fox).

Favorites Bar
In IE7, User where able to access their favorite with a single click. Now you will get dedicated bar on top of tabs.The favorite bar can have links, feeds, WebSlices and even Word, Excel and PowerPoint documents.

Automatic Crash Recovery
Another new feature that is already present in IE's competitors. A crash recovery functionality to prevent the loss of work and productivity in the event of the browser crashing or hanging.

Phishing Filter
This is not a new feature, but Microsoft says its improved and will have some new features added to phishing filter.

IE8 doesn't bring much of a innovation. Its competitor like Firefox 2.0 and Opera already have these features. Microsoft is bound to loose its browser market if IE8 can't make up to the features provided my others.

Getting started with Ext HtmlEditor

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:

• createLinkText – The default text for the create link prompt.
• defaultLinkValue – The value for the create link value. By default the value is http://
• enableAlignments – Enable alignment buttons.
• enableColors – Enable foreground and highlight colour buttons.
• enableFont – Enables font selection.
• enableFontSize – Enables the option of increasing font size.
• enableFormat – Enables the formatting buttons like bold and italic.
• enableLinks – Enable links button.
• enableLists – Provides the facility to create numbered and bullet list.
• enableSourceEdit – Provide provision for source editing.
• fontFamilies – Used to specify the supported font families. This is an array of font names.

Options like enableAlignments, enableColors are boolean variables and are all set to true by default. A default for will have all the options enabled. In one way, these default values cause trouble. I will explain about the troubles soon.

Now let’s create our first HtmlEditor. Out approach will be to create a simple feedback for where will ask users to enter name, email address and suggestion. This suggestion field will be represented as a rich editor. Have a look at the code:

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

Everything looks good and planned? On execution of this code, you will get javascript errors saying tip.register is null!!

The Trouble
We just failed in creating our form. What is the solution to this error? Another problem is that I didn’t get much help from documentation either. But later I figured out the problem was because we didn’t initialize the tool tip.

What is the relation between tool tip class and our editor? A simple fact: the buttons in editor’s tool bar make use of tool tips. We need to initialize QuickTip as follows:

Ext.QuickTips.init();

First HtmlEditor
All you need to do is initialize the QuickTip and then create the form. The tool tip initialization can be done in init method of your class. Here is the final working code:

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

There you go! You have your HtmlEditor and forms working smooth.

The final comments
Ext forms have lots of features and forms are important part of web application. I personally feel Ext’s documentation should provide more explanation on the form elements, submitting and load of forms.

All about Ext.FormPanel !

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.