Loiane Groner

ExtJS, Spring MVC 3 and Hibernate 3.5: CRUD DataGrid Example

Loiane — Thu, 02 Sep 2010 10:30:27 +0000

This tutorial will walk through how to implement a CRUD (Create, Read, Update, Delete) DataGrid using ExtJS, Spring MVC 3 and Hibernate 3.5.

What do we usually want to do with data?

Create (Insert)
Read / Retrieve (Select)
Update (Update)
Delete / Destroy (Delete)

Until ExtJS 3.0 we only could READ data using a dataGrid. If you wanted to update, insert or delete, you had to do some code to make these actions work. Now ExtJS 3.0 (and newest versions) introduces the ext.data.writer, and you do not need all that work to have a CRUD Grid.

So… What do I need to add in my code to make all these things working together?

In this example, I’m going to use JSON as data format exchange between the browser and the server.

ExtJS Code

First, you need an Ext.data.JsonWriter:

 // The new DataWriter component.
    var writer = new Ext.data.JsonWriter({
        encode: true,
        writeAllFields: true
    });

Where writeAllFields identifies that we want to write all the fields from the record to the database. If you have a fancy ORM then maybe you can set this to false. In this example, I’m using Hibernate, and we have saveOrUpate method – in this case, we need all fields to updated the object in database, so we have to ser writeAllFields to true. This is my record type declaration:

    var Contact = Ext.data.Record.create([
	{name: 'id'},
    {
        name: 'name',
        type: 'string'
    }, {
        name: 'phone',
        type: 'string'
    }, {
        name: 'email',
        type: 'string'
    }]);

Now you need to setup a proxy like this one:

    var proxy = new Ext.data.HttpProxy({
        api: {
            read : 'contact/view.action',
            create : 'contact/create.action',
            update: 'contact/update.action',
            destroy: 'contact/delete.action'
        }
    });

FYI, this is how my reader looks like:

    var reader = new Ext.data.JsonReader({
        totalProperty: 'total',
        successProperty: 'success',
        idProperty: 'id',
        root: 'data',
        messageProperty: 'message'  // <-- New "messageProperty" meta-data
    },
    Contact);

The Writer and the proxy (and the reader) can be hooked to the store like this:

 // Typical Store collecting the Proxy, Reader and Writer together.
    var store = new Ext.data.Store({
        id: 'user',
        proxy: proxy,
        reader: reader,
        writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
        autoSave: false // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
    });

Where autosave identifies if you want the data in automatically saving mode (you do not need a save button, the app will send the actions automatically to the server). In this case, I implemented a save button, so every record with new or updated value will have a red mark on the cell left up corner). When the user alters a value in the grid, then a “save” event occurs (if autosave is true). Upon the “save” event the grid determines which cells has been altered. When we have an altered cell, then the corresponding record is sent to the server with the ‘root’ from the reader around it. E.g if we read with root “data”, then we send back with root “data”. We can have several records being sent at once. When updating to the server (e.g multiple edits). And to make you life even easier, let’s use the RowEditor plugin, so you can easily edit or add new records. All you have to do is to add the css and js files in your page:

Add the plugin on you grid declaration:

    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update'
    });

    // create grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "NAME",
             width: 170,
             sortable: true,
             dataIndex: 'name',
             editor: {
                xtype: 'textfield',
                allowBlank: false
            }},
            {header: "PHONE #",
             width: 150,
             sortable: true,
             dataIndex: 'phone',
             editor: {
                 xtype: 'textfield',
                 allowBlank: false
            }},
            {header: "EMAIL",
             width: 150,
             sortable: true,
             dataIndex: 'email',
             editor: {
                xtype: 'textfield',
                allowBlank: false
            }})}
        ],
        plugins: [editor],
        title: 'My Contacts',
        height: 300,
        width:610,
		frame:true,
		tbar: [{
            iconCls: 'icon-user-add',
            text: 'Add Contact',
            handler: function(){
                var e = new Contact({
                    name: 'New Guy',
                    phone: '(000) 000-0000',
                    email: 'new@loianetest.com'
                });
                editor.stopEditing();
                store.insert(0, e);
                grid.getView().refresh();
                grid.getSelectionModel().selectRow(0);
                editor.startEditing(0);
            }
        },{
            iconCls: 'icon-user-delete',
            text: 'Remove Contact',
            handler: function(){
                editor.stopEditing();
                var s = grid.getSelectionModel().getSelections();
                for(var i = 0, r; r = s[i]; i++){
                    store.remove(r);
                }
            }
        },{
            iconCls: 'icon-user-save',
            text: 'Save All Modifications',
            handler: function(){
                store.save();
            }
        }]
    });

Java code

Finally, you need some server side code.

Controller:

package com.loiane.web;

@Controller
public class ContactController  {

	private ContactService contactService;

	@RequestMapping(value="/contact/view.action")
	public @ResponseBody Map view() throws Exception {

		try{

			List contacts = contactService.getContactList();

			return getMap(contacts);

		} catch (Exception e) {

			return getModelMapError("Error retrieving Contacts from database.");
		}
	}

	@RequestMapping(value="/contact/create.action")
	public @ResponseBody Map create(@RequestParam Object data) throws Exception {

		try{

			List contacts = contactService.create(data);

			return getMap(contacts);

		} catch (Exception e) {

			return getModelMapError("Error trying to create contact.");
		}
	}

	@RequestMapping(value="/contact/update.action")
	public @ResponseBody Map update(@RequestParam Object data) throws Exception {
		try{

			List contacts = contactService.update(data);

			return getMap(contacts);

		} catch (Exception e) {

			return getModelMapError("Error trying to update contact.");
		}
	}

	@RequestMapping(value="/contact/delete.action")
	public @ResponseBody Map delete(@RequestParam Object data) throws Exception {

		try{

			contactService.delete(data);

			Map modelMap = new HashMap(3);
			modelMap.put("success", true);

			return modelMap;

		} catch (Exception e) {

			return getModelMapError("Error trying to delete contact.");
		}
	}

	private Map getMap(List contacts){

		Map modelMap = new HashMap(3);
		modelMap.put("total", contacts.size());
		modelMap.put("data", contacts);
		modelMap.put("success", true);

		return modelMap;
	}

	private Map getModelMapError(String msg){

		Map modelMap = new HashMap(2);
		modelMap.put("message", msg);
		modelMap.put("success", false);

		return modelMap;
	}

	@Autowired
	public void setContactService(ContactService contactService) {
		this.contactService = contactService;
	}

}

Some observations:

In Spring 3, we can get the objects from requests directly in the method parameters using @RequestParam. I don’t know why, but it did not work with ExtJS. I had to leave as an Object and to the JSON-Object parser myself. That is why I’m using a Util class – to parser the object from request into my POJO class. If you know how I can replace Object parameter from controller methods, please, leave a comment, because I’d really like to know that!

Service Class:

package com.loiane.service;

@Service
public class ContactService {

	private ContactDAO contactDAO;
	private Util util;

	@Transactional(readOnly=true)
	public List getContactList(){

		return contactDAO.getContacts();
	}

	@Transactional
	public List create(Object data){

        List newContacts = new ArrayList();

		List list = util.getContactsFromRequest(data);

		for (Contact contact : list){
			newContacts.add(contactDAO.saveContact(contact));
		}

		return newContacts;
	}

	@Transactional
	public List update(Object data){

		List returnContacts = new ArrayList();

		List updatedContacts = util.getContactsFromRequest(data);

		for (Contact contact : updatedContacts){
			returnContacts.add(contactDAO.saveContact(contact));
		}

		return returnContacts;
	}

	@Transactional
	public void delete(Object data){

		//it is an array - have to cast to array object
		if (data.toString().indexOf('[') > -1){

			List deleteContacts = util.getListIdFromJSON(data);

			for (Integer id : deleteContacts){
				contactDAO.deleteContact(id);
			}

		} else { //it is only one object - cast to object/bean

			Integer id = Integer.parseInt(data.toString());

			contactDAO.deleteContact(id);
		}
	}

	@Autowired
	public void setContactDAO(ContactDAO contactDAO) {
		this.contactDAO = contactDAO;
	}

	@Autowired
	public void setUtil(Util util) {
		this.util = util;
	}
}

Contact Calss – POJO:

package com.loiane.model;

@JsonAutoDetect
@Entity
@Table(name="CONTACT")
public class Contact {

	private int id;
	private String name;
	private String phone;
	private String email;

	@Id
	@GeneratedValue
	@Column(name="CONTACT_ID")
	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	@Column(name="CONTACT_NAME", nullable=false)
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	@Column(name="CONTACT_PHONE", nullable=false)
	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	@Column(name="CONTACT_EMAIL", nullable=false)
	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}
}

DAO Class:

package com.loiane.dao;

@Repository
public class ContactDAO implements IContactDAO{

	private HibernateTemplate hibernateTemplate;

	@Autowired
	public void setSessionFactory(SessionFactory sessionFactory) {
		hibernateTemplate = new HibernateTemplate(sessionFactory);
	}

	@SuppressWarnings("unchecked")
	@Override
	public List getContacts() {
		return hibernateTemplate.find("from Contact");
	}

	@Override
	public void deleteContact(int id){
		Object record = hibernateTemplate.load(Contact.class, id);
		hibernateTemplate.delete(record);
	}

	@Override
	public Contact saveContact(Contact contact){
		hibernateTemplate.saveOrUpdate(contact);
		return contact;
	}
}

Util Class:

package com.loiane.util;

@Component
public class Util {

	public List getContactsFromRequest(Object data){

		List list;

		//it is an array - have to cast to array object
		if (data.toString().indexOf('[') > -1){

			list = getListContactsFromJSON(data);

		} else { //it is only one object - cast to object/bean

			Contact contact = getContactFromJSON(data);

			list = new ArrayList();
			list.add(contact);
		}

		return list;
	}

	private Contact getContactFromJSON(Object data){
		JSONObject jsonObject = JSONObject.fromObject(data);
		Contact newContact = (Contact) JSONObject.toBean(jsonObject, Contact.class);
		return newContact;
	}
)
	private List getListContactsFromJSON(Object data){
		JSONArray jsonArray = JSONArray.fromObject(data);
		List newContacts = (List) JSONArray.toCollection(jsonArray,Contact.class);
		return newContacts;
	}

	public List getListIdFromJSON(Object data){
		JSONArray jsonArray = JSONArray.fromObject(data);
		List idContacts = (List) JSONArray.toCollection(jsonArray,Integer.class);
		return idContacts;
	}
}

If you want to see all the code (complete project will all the necessary files to run this app), download it from my GitHub repository: http://github.com/loiane/extjs-crud-grid-spring-hibernate

This was a requested post. I’ve got a lot of comments from my previous CRUD Grid example and some emails. I made some adjustments to current code, but the idea is still the same. I hope I was able answer all the questions.

Happy coding!

How to resize an ExtJS Panel, Grid, Component on Window Resize without using Ext.Viewport

Loiane — Tue, 24 Aug 2010 10:30:56 +0000

This post will walk through how to resize an ExtJS Panel, Grid, Component on Window Resize without using Ext.Viewport.

Problem:

You have a legacy page and you want to change an html grid for an ExtJS DataGrid, because it has so many cool features. Or you have a page with some design and you are going to use only one ExtJS Component. In both cases, you also want to render your ExtJS Component to a specific DIV. Also, you want you component to be resized in case you resize the browser window.

How can you do that if resize a single component in an HTML page it is not the default behavior of an ExtJS Component (except if you use Ext.Viewport)?

Solution:

Condor (from ExtJS Community Support Team) developed a plugin that can do that for you.

I had to spend some time to understand how the plugin works, and I finally got it working as I wanted.

Well, I recommend you to spend some time reading this thread: http://www.sencha.com/forum/showthread.php?28318 (if you have any issues or questions, please publish it on the thread, so other members can give you the support you need).

Requirements to make the plugin work:

Your have to apply the following style to the DIV (the width is up to you, the other styles are mandatory, otherwise it will not work):

If you have any border around your ExtJS component, you have to set a HEIGHT. And you will also have to set a height to your ExtJS component. In this case, autoHeight will not work. If you DO NOT have any border or other design on the ExtJS component side, you do not need to set height and you can use autoHeight. In my case, I put a border on the external DIV, so I have to set Height:

HTML code (all DIVs):

And you need to add the plugin to the component (In this case, I’m using an ExtJS DataGrid):

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 490,
        autoWidth:true,
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'
        ,viewConfig:{forceFit:true}
    	,renderTo: 'reportTabContent' // render the grid to the specified div in the page
    	,plugins: [new Ext.ux.FitToParent("reportTabContent")]
    });

And done! Now you can resize the browser and the component will resize itself!

I tested it on Firefox, Chrome and IE6.

You can download my sample project from my GitHub: http://github.com/loiane/extjs-fit-to-parent

PS.: If you want to use the full browser window, use a Viewport.

Happy coding!

ExtJS plugin: PagingToolbarResizer

Loiane — Mon, 02 Aug 2010 10:30:29 +0000

Well, this is my first ExtJS plugin. Though it is not an advanced plugin, I’m very happy and it is a big accomplishment for me!

The problem:

ExtJS PagingToolbar Component allows the developer to set a predetermined page size, which is the total number of records that will be displayed on the grid at once.

Let’s say we want to display 10,000 (ten thousand) records and we are going to use the paging feature. We are going to display only 50 records at once (per page). If you do the math, it is 200 pages to visualise. No problem so far.

The user User1 wants to see 100 records per page, and the user User2 wants to see 150 records per page, just like we can choose on Ebay search:

The solution/plugin:

For this reason, I implemented this plugin PagingToolbarResizer. It adds a combobox (dropdown) on the paging toolbar with some options for page size. It is totally customizable.

Let’s take a look at some configuration options:

options: it can be a store or an array of integers. If you are going to retrieve the options list from database, you should use a store, otherwise you can use a simple array. Defaults to Defaults to [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500, 1000].
displayText: The message to display before the combobox (defaults to ‘Records per Page’).
prependCombo: this flag indicates if you want to display the combobox before paging buttons or after them. Defaults to false.

And it is very easy to use:

        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }],
            plugins : [new Ext.ux.plugin.PagingToolbarResizer( {options : [ 5, 10, 15, 20, 25 ], prependCombo: true})]
        })

You can also download the plugin here:

http://loianegroner.com/extjs/PagingToolbarResizer.zip

I hope this will help someone!

The Big Website Merge: java.sun.com, developers.sun.com, BigAdmin, and OTN

Loiane — Thu, 01 Jul 2010 18:02:43 +0000

This is the email Oracle sent to JUG Leaders mailing-list:

JUG Leaders, Java Champions:

You may have noted the reference to a planned Website integration in the FAQ that was published just at Sun/Oracle change-in-control. After months of work and planning by some of the same people who have run these sites for years, this project is at hand: On July 19, developers.sun.com, java.sun.com, BigAdmin, and Oracle Technology Network will become one (under oracle.com/technetwork). Because of your importance in the community, you are the first people to be notified about this news, and we encourage you to share it with your members/peers.

We have tried to anticipate major questions in the new FAQ published here. But before you get that far, I want to assure you of some very important things in relation to java.sun.com:

- All non-obsolete content will be migrated (yes, a clean-up was done), and when possible, original information architecture will be preserved.
- Although URLs will change, we will implement 1:1 redirects for the most popular/important content from the migrated sites – including the Java APIs. Your bookmarks won’t break.
- Java developers will continue to have their own “place” in the framework (atoracle.com/technetwork/java), just as they did under java.sun.com, and the content there will continue to be Technology-focused (not product-focused).
- Ultimately, I think you’ll find the approach similar to that of developers.sun.com.

I encourage you to read the FAQ for more information, and if you have comments or feedback, to provide it via this list or to me directly.

We are going to do everything we can to make this integration as seamless as possible, but the reality is that this project is large and complex; so you may encounter some challenges on the first day. However we’ll make incremental improvements quickly, and we need your help and feedback to do that.

Hibernate 3 Annotations Tutorial

Loiane — Mon, 14 Jun 2010 11:17:43 +0000

This tutorial will walk through how to implement a hello world project using Hibernate Annotations and MySQL database.

Requirements

Download and unzip Hibernate Core distribution from the Hibernate website. Hibernate 3.5 and onward contains Hibernate Annotations.

Starting with version 3.5 (currently trunk), Annotations and EntityManager have been merged back into the Hibernate Core codebase as invidual modules. We will also begin bundling Envers at the same time. This will significantly help simplify compatibility guidelines.

Download SLF4 lib as well.
Download the database connector. In this example, I’m using MySQL database.

Configuration

First, set up your classpath:

Copy hibernate3.jar and the required 3rd party libraries available in lib/required.
Copy lib/jpa/hibernate-jpa-2.0-api-1.0.0.Final.jar to your classpath as well.
Also copy slf4j-simple-1.5.8.jar from SLF4 (I’ve got an exception without this lbi in my classpath)

The picture will all required libraries is given bellow:

Let’s start by creating our POJO (Plain Old Java Object) class that represents the table in the database.

This is the City table:

And here is the City class:

package com.loiane.com.model;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="CITY")
public class City {

	private long id;

	private String name;

	public City(String name) {
		super();
		this.name = name;
	}

	public City() {}

	@Id
	@GeneratedValue
	@Column(name="CITY_ID")
	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	@Column(name="CITY_NAME", nullable=false)
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
}

Here is a list of all annotations used and its meaning:

@Entity declares the class as an entity (i.e. a persistent POJO class)
@Table is set at the class level; it allows you to define the table, catalog, and schema names for your entity mapping. If no @Table is defined the default values are used: the unqualified class name of the entity.
@Id declares the identifier property of this entity.
@GeneratedValue annotation is used to specify the primary key generation strategy to use. If the strategy is not specified by default AUTO will be used.
@Column annotation is used to specify the details of the column to which a field or property will be mapped. If the @Column annotation is not specified by default the property name will be used as the column name.

You also need to create the HibernateUtil class. The HibernateUtil class helps in creating the SessionFactory from the Hibernate configuration file. Its implementation is shown bellow:

package com.loiane.util;

import org.hibernate.SessionFactory;
import org.hibernate.cfg.AnnotationConfiguration;

import com.loiane.com.model.City;

public class HibernateUtil {

	private static final SessionFactory sessionFactory;

	static {
		try {
			sessionFactory = new AnnotationConfiguration()
								.configure()
								.addPackage("com.loiane.model") //the fully qualified package name
								.addAnnotatedClass(City.class)
								.buildSessionFactory();

		} catch (Throwable ex) {
			System.err.println("Initial SessionFactory creation failed." + ex);
			throw new ExceptionInInitializerError(ex);
		}
	}

	public static SessionFactory getSessionFactory() {
		return sessionFactory;
	}
}

You need to create a hibernate.cfg.xml as well, with all the information needed to connect to the database, such as database url, user, password:




    
        com.mysql.jdbc.Driver
        root
        jdbc:mysql://localhost/blog
        root
        org.hibernate.dialect.MySQLDialect
    	1
    	true
        create

Here is an example of how to select, update, insert and delete a City:

package com.loiane.dao;

import java.util.List;

import org.hibernate.HibernateException;
import org.hibernate.Session;
import org.hibernate.Transaction;

import com.loiane.com.model.City;
import com.loiane.util.HibernateUtil;

public class CityDAO {

	public Long saveCity(String cityName)
	{
		Session session = HibernateUtil.getSessionFactory().openSession();
		Transaction transaction = null;
		Long cityId = null;
		try {
			transaction = session.beginTransaction();
			City city = new City();
			city.setName(cityName);
			cityId = (Long) session.save(city);
			transaction.commit();
		} catch (HibernateException e) {
			transaction.rollback();
			e.printStackTrace();
		} finally {
			session.close();
		}
		return cityId;
	}

	@SuppressWarnings("unchecked")
	public void listCities()
	{
		Session session = HibernateUtil.getSessionFactory().openSession();
		Transaction transaction = null;
		try {
			transaction = session.beginTransaction();
			List cities = session.createQuery("from City").list();

			for (City city : cities){
				System.out.println(city.getName());
			}

			transaction.commit();
		} catch (HibernateException e) {
			transaction.rollback();
			e.printStackTrace();
		} finally {
			session.close();
		}
	}

	public void updateCity(Long cityId, String cityName)
	{
		Session session = HibernateUtil.getSessionFactory().openSession();
		Transaction transaction = null;
		try {
			transaction = session.beginTransaction();
			City city = (City) session.get(City.class, cityId);
			city.setName(cityName);
			transaction.commit();
		} catch (HibernateException e) {
			transaction.rollback();
			e.printStackTrace();
		} finally {
			session.close();
		}
	}

	public void deleteCity(Long cityId)
	{
		Session session = HibernateUtil.getSessionFactory().openSession();
		Transaction transaction = null;
		try {
			transaction = session.beginTransaction();
			City city = (City) session.get(City.class, cityId);
			session.delete(city);
			transaction.commit();
		} catch (HibernateException e) {
			transaction.rollback();
			e.printStackTrace();
		} finally {
			session.close();
		}
	}
}

and the Main class (you can try to run this class):

package com.loiane.main;

import com.loiane.dao.CityDAO;

public class Main {

	public static void main(String[] args) {

		CityDAO cityDAO = new CityDAO();

		long cityId1 = cityDAO.saveCity("New York");
		long cityId2 = cityDAO.saveCity("Rio de Janeiro");
		long cityId3 = cityDAO.saveCity("Tokyo");
		long cityId4 = cityDAO.saveCity("London");

		cityDAO.listCities();

		cityDAO.updateCity(cityId4, "Paris");

		cityDAO.deleteCity(cityId3);

		cityDAO.listCities();
	}
}

If your setup is OK, this is the output:

Hibernate: insert into CITY (CITY_NAME) values (?)
Hibernate: insert into CITY (CITY_NAME) values (?)
Hibernate: insert into CITY (CITY_NAME) values (?)
Hibernate: insert into CITY (CITY_NAME) values (?)
Hibernate: select city0_.CITY_ID as CITY1_0_, city0_.CITY_NAME as CITY2_0_ from CITY city0_
New York
Rio de Janeiro
Tokyo
London
Hibernate: select city0_.CITY_ID as CITY1_0_0_, city0_.CITY_NAME as CITY2_0_0_ from CITY city0_ where city0_.CITY_ID=?
Hibernate: update CITY set CITY_NAME=? where CITY_ID=?
Hibernate: select city0_.CITY_ID as CITY1_0_0_, city0_.CITY_NAME as CITY2_0_0_ from CITY city0_ where city0_.CITY_ID=?
Hibernate: delete from CITY where CITY_ID=?
Hibernate: select city0_.CITY_ID as CITY1_0_, city0_.CITY_NAME as CITY2_0_ from CITY city0_
New York
Rio de Janeiro
Paris

You do not need to worry about creating the table in the database.The bellow configuration does it for you!

create

For more information about Hibernate Annotations, please read the Hibernate Documentation.

You can download the complete source code (including all the libraries) from my GitHub repository: http://github.com/loiane/hibernate-annotations

I developed this sample project using Eclipse IDE.

Happy Coding!

I’m a DZone MVB (Most Valuable Blogger)!

Loiane — Mon, 07 Jun 2010 10:30:43 +0000

Check it out, I’m a DZone MVB (Most Valuable Blogger)!

Thanks to the DZone team for inviting me. I’m very honored to be part of this program!

DZone’s MVB program brings together a group of highly talented bloggers, authors, and technologists actively writing about topics of interest to the developer community. These people are recognized in the industry for their contributions and deep technical knowledge on subjects ranging from software design and architecture to programming on a range of platforms including Java, .NET, Ruby and others.

They already posted the first article, How to Populate Ext JS ComboBox using Spring Controller, which you can see in the picture bellow (It’s official!)

I’m very happy, because the is so many talented bloggers and professionals in this program. It is really an honor for me. You can see all MVBs in tthis link: http://www.dzone.com/page/mvbs

Thanks everyone!

ExtJS: Stop the “page contains secure and nonsecure items” Warning

Loiane — Mon, 24 May 2010 10:30:14 +0000

Are your SSL web pages plagued by the browser warning “This page contains both secure and nonsecure items. Do you want to display the nonsecure items?“

This is a common error that occurs when some element on a secure web page (one that is loaded with https:// in the address bar) is not being loaded from a secure source. This usually occurs with images, frames, iframes, Flash, and JavaScripts.

How to solve this “issue” if the system was developed with ExtJS?

There is a property in Ext class named BLANK_IMAGE_URL:

“URL to a 1×1 transparent gif image used by Ext to create inline icons with CSS background images. (Defaults to “http://extjs.com/s.gif” and you should change this to a URL on your server).”

Following are given a screenshot from Firebug when I loaded an application which uses ExtJS:

The solution is very simple. You need to point BLANK_IMAGE_URL to “s.gif” image that is in your application’s directory.

For example: if your application’s name is “extjs-crud-grid“, you should point it to:

Ext.onReady(function(){
     Ext.BLANK_IMAGE_URL = '/extjs-crud-grid/ext-3.1.1/resources/images/default/s.gif';
)};

extjs-crud-grid application’s directory:

Hope it helped!

Happy coding!

How to Populate Ext JS ComboBox using Spring Controller

Loiane — Wed, 19 May 2010 10:30:21 +0000

This tutorial will walk through how to populate an ExtJS ComboBox using a Spring Controller.

To populate ExtJS ComboBox using Spring Controller, you need create an Ajax request using Ext.data.HttpProxy and as response you can return JSON Objects (or an XML – in this example, I will use JSON). And using a JsonReader, you can read values and popolate ComboBox. It is the same logic used to populate an ExtJS DataGrid.

Frameworks/Libraries I’m using in this tutorial:

ExtJS (you can download the lastest version here);
Spring MVC 3
Jackson (used to return JSON from Spring Controller)

If you are using Spring 2.5, you can see my other examples of how to return JSON from Spring using Spring-JSON lib.

I am going to create a combobox to list all states of Brazil. The screenshot of this tutorial is given bellow:

First step is to create a POJO (Java Object with getters and setters methods only – and constructor):

public class State {

	private String code;
	private String name;

	public State(String code, String name) {
		super();
		this.code = code;
		this.name = name;
	}

        //get and set methods
}

Following is the Controller. The request is mapped to loadStates() method, which retrieves states from a source (I’m using a method for academic puporses, but you can retrieve data from a database):

@Controller
public class StateController {

	private StateService stateService;

	@RequestMapping(value="getStates.json", method = RequestMethod.GET)
	public @ResponseBody Map loadStates() {

		HashMap> modelMap = new HashMap>();
		modelMap.put("states", stateService.getBrazilianStates());

		return modelMap;
	}

	@Autowired
	public void setStateService(StateService stateService) {
		this.stateService = stateService;
	}
}

The @ResponseBody converts automaticaly the Map object into a JSON object, because of Jackson. Find out about Spring 3 Ajax simplifications here. This is the JSON object the loadStates method returns to the browser:

{"states":[{"name":"Acre","code":"AC"},{"name":"Alagoas","code":"AL"},{"name":"Amapá","code":"AP"},{"name":"Amazonas","code":"AM"},{"name":"Bahia","code":"BA"},{"name":"Ceará","code":"CE"},{"name":"Distrito Federal","code":"DF"},{"name":"Espírito Santo","code":"ES"},{"name":"Goiás","code":"GO"},{"name":"Maranhão","code":"MA"},{"name":"Mato Grosso","code":"MT"},{"name":"Mato Grosso do Sul","code":"MS"},{"name":"Minas Gerais","code":"MG"},{"name":"Pará","code":"PA"},{"name":"Paraíba","code":"PB"},{"name":"Paraná","code":"PR"},{"name":"Pernambuco","code":"PE"},{"name":"Piauí","code":"PI"},{"name":"Rio de Janeiro","code":"RJ"},{"name":"Rio Grande do Norte","code":"RN"},{"name":"Rio Grande do Sul","code":"RS"},{"name":"Rondônia","code":"RO"},{"name":"Roraima","code":"RR"},{"name":"Santa Catarina","code":"SC"},{"name":"São Paulo","code":"SP"},{"name":"Sergipe","code":"SE"},{"name":"Tocantins","code":"TO"}]}

The content above is retrieved from this method in the StateService class:

@Service
public class StateService {

	public List getBrazilianStates(){

		List states = new ArrayList();

		states.add(new State("AC","Acre"));
		states.add(new State("AL","Alagoas"));
		states.add(new State("AP","Amapá"));
		states.add(new State("AM","Amazonas"));
		states.add(new State("BA","Bahia"));
		states.add(new State("CE","Ceará"));
		states.add(new State("DF","Distrito Federal"));
		states.add(new State("ES","Espírito Santo"));
		states.add(new State("GO","Goiás"));
		states.add(new State("MA","Maranhão"));
		states.add(new State("MT","Mato Grosso"));
		states.add(new State("MS","Mato Grosso do Sul"));
		states.add(new State("MG","Minas Gerais"));
		states.add(new State("PA","Pará"));
		states.add(new State("PB","Paraíba"));
		states.add(new State("PR","Paraná"));
		states.add(new State("PE","Pernambuco"));
		states.add(new State("PI","Piauí"));
		states.add(new State("RJ","Rio de Janeiro"));
		states.add(new State("RN","Rio Grande do Norte"));
		states.add(new State("RS","Rio Grande do Sul"));
		states.add(new State("RO","Rondônia"));
		states.add(new State("RR","Roraima"));
		states.add(new State("SC","Santa Catarina"));
		states.add(new State("SP","São Paulo"));
		states.add(new State("SE","Sergipe"));
		states.add(new State("TO","Tocantins"));

		return states;
	}
}

Finally, here is the ExtJS code for combobox:

Ext.onReady(function(){

	var store = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({
			url: 'getStates.json'
		}),
		reader: new Ext.data.JsonReader({
			root:'states'
		},
		[{name: 'code'},
		 {name: 'name'}
		])
	});

	var combo = new Ext.form.ComboBox({
		id: 'statesCombo',
		store: store,
		displayField: 'name',
		valueField: 'code',
		hiddenName : 'codeId',
		typeAhead: true,
		mode: 'local',
		fieldLabel: 'States of Brazil',
		anchor: '100%',
		forceSelection: true,
		triggerAction: 'all',
		emptyText:'Select a state...',
		selectOnFocus:true
	});

	var stateForm = new Ext.FormPanel({
		frame:true,
		url: 'saveState.json',
		title: 'Combo Box Example',
		bodyStyle:'padding:5px 5px 0',
		width: 250,
		labelAlign: 'top',
		layout: 'form',
		items: [combo]
	});

	store.load();

	stateForm.render(document.body);

});

You can download the complete project from my GitHub repository: http://github.com/loiane/extjs-combobox
I developed this sample project on Eclipse, and I used TomCat as webserver.

Happy coding!

Populating an ExtJS DataGrid + RowExpander using Spring MVC 3

Loiane — Fri, 14 May 2010 00:08:42 +0000

This tutorial will walk through how to implement an ExtJS DataGrid with RowExpander plugin using Spring MVC Framework version 3 in the server side.

Sometimes you need to show more information than fits within the grid, as an expansion of the record/row. ExtJS DataGrid component provides a plugin called RowExpander, which does exactly what its name says and I just described before.

It is very simple to use.

Let’s say you want to show information about some books. The following class represents your data (it is a POJO):

public class Book {

	private int id;
	private String title;
	private String publisher;
	private String ISBN10;
	private String ISBN13;
	private String link;
	private String description;
}

But you do not want to show all the attributes within the grid. You just want to show the book title and the publisher, and if the user wants to know more about that book, he/she has to expand the row. First, let’s declare a JSON store to get data from server. You can configure the store normally, as all the data is going to be a column in the datagrid.

	var store = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({
			url: 'getBooks.action'
		}),
		reader: new Ext.data.JsonReader({
			root:'books'
		},
		[{name: 'id'},
		 {name: 'title'},
		 {name: 'publisher'},
		 {name: 'isbn10'},
		 {name: 'isbn13'},
		 {name: 'link'},
		 {name: 'description'},
		])
	});

And a method in the server to retrieve the data:

@Controller
public class BookController {

	private BookService bookService;

	/**
	 * Get all the books from "database" to display on
	 * ExtJS data grid
	 * @return JSON object
	 */
	@RequestMapping(value="getBooks.action", method = RequestMethod.GET)
	public @ResponseBody Map view() {

		List books = bookService.getBooks();

		Map modelMap = new HashMap();
		modelMap.put("books", books);

		return modelMap;
	}

	@Autowired
	public void setBookService(BookService bookService) {
		this.bookService = bookService;
	}
}

To learn more about Spring 3 annotations and how to retrieve data from server in JSON data format, please read: http://blog.springsource.com/2010/01/25/ajax-simplifications-in-spring-3-0/

Let’s declare the datagrid:

    var gridBooks = new Ext.grid.GridPanel({
        store: store,
        cm: new Ext.grid.ColumnModel({
            defaults: {
                sortable: true,
                width: 200
            },
            columns: [
                expander,
                {header: "Title", dataIndex: 'title'},
                {header: "Publisher", dataIndex: 'publisher'}
            ]
        }),
        width: 430,
        height: 270,
        plugins: expander,
        title: 'ExtJS Books',
        renderTo: 'gridBooks'
    });

You need to declare the rowExpander plugin as a column (first one – line 9), just like you need to do when you use ColumnModel (checkbox), and you also need to declare it as a plugin (line 16).

And now, let’s take a look how to declare the plugin:

    var expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '
ISBN10: {isbn10}

',
            'ISBN13: {isbn13}

',
            'Link: {link}

',
            'Description: {description}'
        )
    });

Let you imagination flow and create the expansion you want using HTML or anything Ext.Template enables you to do!

Don’t forget to import RowExpander javascript file:




Row Expander + Spring

You can download the complete project from my GitHub repository: http://github.com/loiane/extjs-rowexpander

Happy Coding!

Ext Designer Review

Loiane — Tue, 06 Apr 2010 10:40:35 +0000

A couple of weeks ago, I decided to download Ext Designer and play around with it. In this post, I am going to write a review about this application.

Disclaimer: I am not being paid to do this and no one asked me to. Everything I say/write here is my honest opinion.

Designer is a desktop application that helps you create interfaces faster than ever in an easy-to-use, drag-and-drop environment.

The ExtJS Team created a Preview screencast in which they mock up some interfaces.

It really is cool. There is a post on ExtJS Blog you can check out all the features of this great tool.

Despite being a great tool with all those amazing features, there are some features and ExtJS components I missed in the application.

First, I created a simple ExtJS application to illustrate what I mean.

It generates the code for each component you create:

Personal Info – Field Set:

Name Text Field:

If you take a look, you will see the name text field within the personal info field set is declared in a different way.

If you want to export the whole code to your favorite IDE, so you can integrate ExtJS with a programming language or platform (e.g.: PHP, Java, .NET), you just need to select the root component and click on “Export Code to Disk” or “Export code to ClipBoard”:

Look now at the code generated from the project I created – it is the same code you get when you choose the export function:

MyWindowUi = Ext.extend(Ext.Window, {
    title: 'Ext Designer Test',
    width: 400,
    height: 250,
    initComponent: function() {
        this.items = [
            {
                xtype: 'tabpanel',
                activeTab: 1,
                items: [
                    {
                        xtype: 'panel',
                        title: 'Grid',
                        items: [
                            {
                                xtype: 'grid',
                                title: 'My Grid',
                                columns: [
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Name',
                                        sortable: true,
                                        resizable: true,
                                        width: 100,
                                        dataIndex: 'name'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Phone #',
                                        sortable: true,
                                        resizable: true,
                                        width: 100,
                                        dataIndex: 'phone'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Address',
                                        sortable: true,
                                        resizable: true,
                                        width: 100,
                                        dataIndex: 'address'
                                    }
                                ],
                                bbar: {
                                    xtype: 'paging'
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        title: 'Form',
                        items: [
                            {
                                xtype: 'fieldset',
                                title: 'Personal Info',
                                layout: 'form',
                                items: [
                                    {
                                        xtype: 'textfield',
                                        fieldLabel: 'Name',
                                        anchor: '100%',
                                        name: 'nameField'
                                    },
                                    {
                                        xtype: 'textarea',
                                        fieldLabel: 'Address',
                                        anchor: '100%',
                                        name: 'addressField'
                                    },
                                    {
                                        xtype: 'textfield',
                                        fieldLabel: 'Phone #',
                                        anchor: '100%',
                                        name: 'phoneField'
                                    }
                                ]
                            },
                            {
                                xtype: 'button',
                                text: 'Save'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        title: 'Tree',
                        items: [
                            {
                                xtype: 'treepanel',
                                title: 'My Tree',
                                root: {
                                    text: 'Root Node'
                                },
                                loader: {

                                }
                            }
                        ]
                    }
                ]
            }
        ];
        MyWindowUi.superclass.initComponent.call(this);
    }
});

It generated a single code block! Lucky me it is a small and simple project! Imagine the code generated from a big project? Not friendly if you need to maintain this project in the future.

This is the first thing I think they could improve in Ext Designer. If the tool creates a class for each component already, why do not use the reference to it to generate the whole code? And they could export all the classes in different files. I think this is the way most of ExtJS developers does when they have to develop a big project.

The second thing I did not like is that the code is read only. I am a developer, and sometimes I just want to set a property in the code. It may be faster than searching the property in the Component Config tab, after all, I am used to set the properties in the code already. I understand this can be sort of a protection if a person does not know ExtJS and he/she can mess up with the code trying to change anything.

Third: I missed some components, such as radio group and graphs, among others. Maybe this is something they can implement for a near future?

The coolest feature in my opinion is the preview function. It is really awesome!

In general, Ext Designer is a great tool and I love it! It is very intuitive.

I do not recommend it if you are learning ExtJS. I think it is important to understand how ExtJS works and the components patterns before you get started with a visual tool. However, it is great if you are an ExtJS developer already. It can save you a lot of time. It is also great to prototype and design applications (if there is a design team in your company that do not know ExtJS programming).

I definitely recommend buying it.

You can download the full version (with all the features) and try it for 15 days for free (all you need to do is to register as a user on the ExtJS forum). After the evaluation period, you have to get a license.

Happy coding!

Updated: ExtJS quoted this review on ExtJS Notes (Thank You!) – http://notes.extjs.com/post/501611295/ext-designer-is-a-great-tool

ExtJS and Spring MVC Framework: CRUD DataGrid Example

Loiane — Mon, 22 Mar 2010 12:49:55 +0000

This tutorial will walk through how to implement a CRUD (Create, Read, Update, Delete) DataGrid using ExtJS and Spring Framework.

What do we usually want to do with data?

Create (Insert)
Read / Retrieve (Select)
Update (Update)
Delete / Destroy (Delete)

So… What do I need to add in my code to make all these things working together?

In this example, I’m going to use JSON as data format exchange between the browser and the server.

First, you need an Ext.data.JsonWriter:

 // The new DataWriter component.
    var writer = new Ext.data.JsonWriter({
        encode: true,
        writeAllFields: false
    });

Where writeAllFields identifies that we want to write all the fields from the record to the database. If you have a fancy ORM then maybe you can set this to false. For example. This is my record type declaration:

    var Contact = Ext.data.Record.create([
	{name: 'id'},
    {
        name: 'name',
        type: 'string'
    }, {
        name: 'phone',
        type: 'string'
    }, {
        name: 'email',
        type: 'string'
    }, {
        name: 'birthday',
        type: 'date',
        dateFormat: 'm/d/Y'
    }]);

If I only update the name of any contact in the datagrid, the app will only send the contact id and contact name back to server. In another words, the app will only send the updated data to the server + id (in update cases) and only the contact id in delete cases. Try to change it to true and enable Firebug plugin in your browser to see what happens. Now you need to setup a proxy like this one:

    var proxy = new Ext.data.HttpProxy({
        api: {
            read : 'contact/view.action',
            create : 'contact/create.action',
            update: 'contact/update.action',
            destroy: 'contact/delete.action'
        }
    });

FYI, this is how my reader looks like:

    var reader = new Ext.data.JsonReader({
        totalProperty: 'total',
        successProperty: 'success',
        idProperty: 'id',
        root: 'data',
        messageProperty: 'message'  // <-- New "messageProperty" meta-data
    },
    Contact);

The Writer and the proxy (and the reader) can be hooked to the store like this:

 // Typical Store collecting the Proxy, Reader and Writer together.
    var store = new Ext.data.Store({
        id: 'user',
        proxy: proxy,
        reader: reader,
        writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
        autoSave: false // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
    });

Add the plugin on you grid declaration:

    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update'
    });

    // create grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "NAME",
             width: 170,
             sortable: true,
             dataIndex: 'name',
             editor: {
                xtype: 'textfield',
                allowBlank: false
            }},
            {header: "PHONE #",
             width: 150,
             sortable: true,
             dataIndex: 'phone',
             editor: {
                 xtype: 'textfield',
                 allowBlank: false
            }},
            {header: "EMAIL",
             width: 150,
             sortable: true,
             dataIndex: 'email',
             editor: {
                xtype: 'textfield',
                allowBlank: false
            }},
            {header: "BIRTHDAY",
             width: 100,
             sortable: true,
             dataIndex: 'birthday',
             renderer: Ext.util.Format.dateRenderer('m/d/Y'),
             editor: new Ext.form.DateField ({
                allowBlank: false,
                format: 'm/d/Y',
                maxValue: (new Date())
            })}
        ],
        plugins: [editor],
        title: 'My Contacts',
        height: 300,
        width:610,
		frame:true,
		tbar: [{
            iconCls: 'icon-user-add',
            text: 'Add Contact',
            handler: function(){
                var e = new Contact({
                    name: 'New Guy',
                    phone: '(000) 000-0000',
                    email: 'new@loianetest.com',
                    birthday: '01/01/2000'
                });
                editor.stopEditing();
                store.insert(0, e);
                grid.getView().refresh();
                grid.getSelectionModel().selectRow(0);
                editor.startEditing(0);
            }
        },{
            iconCls: 'icon-user-delete',
            text: 'Remove Contact',
            handler: function(){
                editor.stopEditing();
                var s = grid.getSelectionModel().getSelections();
                for(var i = 0, r; r = s[i]; i++){
                    store.remove(r);
                }
            }
        },{
            iconCls: 'icon-user-save',
            text: 'Save All Modifications',
            handler: function(){
                store.save();
            }
        }]
    });

Finally, you need some server side code. This is how my Controller looks like:

package com.loiane.web;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.multiaction.MultiActionController;

import com.loiane.model.Contact;
import com.loiane.service.ContactService;

public class ContactController extends MultiActionController  {

	private ContactService contactService;

	public ModelAndView view(HttpServletRequest request,
			HttpServletResponse response) throws Exception {

		try{

			List contacts = contactService.getContactList();

			return getModelMap(contacts);

		} catch (Exception e) {

			return getModelMapError("Error trying to retrieve contacts.");
		}
	}

	public ModelAndView create(HttpServletRequest request,
			HttpServletResponse response) throws Exception {

		try{

			Object data = request.getParameter("data");

			List contacts = contactService.create(data);

			return getModelMap(contacts);

		} catch (Exception e) {

			return getModelMapError("Error trying to create contact.");
		}
	}

	public ModelAndView update(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		try{

			Object data = request.getParameter("data");

			List contacts = contactService.update(data);

			return getModelMap(contacts);

		} catch (Exception e) {

			return getModelMapError("Error trying to update contact.");
		}
	}

	public ModelAndView delete(HttpServletRequest request,
			HttpServletResponse response) throws Exception {

		try{

			String data = request.getParameter("data");

			contactService.delete(data);

			Map modelMap = new HashMap(3);
			modelMap.put("success", true);

			return new ModelAndView("jsonView", modelMap);

		} catch (Exception e) {

			return getModelMapError("Error trying to delete contact.");
		}
	}

	/**
	 * Generates modelMap to return in the modelAndView
	 * @param contacts
	 * @return
	 */
	private ModelAndView getModelMap(List contacts){

		Map modelMap = new HashMap(3);
		modelMap.put("total", contacts.size());
		modelMap.put("data", contacts);
		modelMap.put("success", true);

		return new ModelAndView("jsonView", modelMap);
	}

	/**
	 * Generates modelMap to return in the modelAndView in case
	 * of exception
	 * @param msg message
	 * @return
	 */
	private ModelAndView getModelMapError(String msg){

		Map modelMap = new HashMap(2);
		modelMap.put("message", msg);
		modelMap.put("success", false);

		return new ModelAndView("jsonView",modelMap);
	}

	/**
	 * Spring use - DI
	 * @param dadoService
	 */
	public void setContactService(ContactService contactService) {
		this.contactService = contactService;
	}

}

If you want to see all the code (complete project will all the necessary files to run this app), download it from my GitHub repository: http://github.com/loiane/extjs-crud-grid

I just want to make one more observation: You can also use dataWriter to save the data dragged from an excel file and dropped into the grid (remember DataDrop plugin?). I also included this plugin in this code project (check out my Github repository).

Happy coding!

Updated: I posted a new CRUD DataGrid example, using Spring MVC 3 and Hibernate 3.5: http://loianegroner.com/2010/09/extjs-spring-mvc-3-and-hibernate-3-5-crud-datagrid-example/

Quick Tip: Unix-VI Cheat Sheets

Loiane — Wed, 17 Mar 2010 17:36:45 +0000

Earlier this week, I started to play around Unix/Aix. I have to confess: I was very confused with all those commands that are anything intuitive.

I was looking like those people that have never turned a computer on before, and you have to teach them how to use a mouse and how to move the cursor around the screen. Totally newbie.

I definitely need those cheat sheets I can reference when I’m working on the command line environment.

So I goggled it and I found some interesting cheat sheets/ref cards. Following are some links that helped me (in case you need it as well):

References:

vi Editor “Cheat Sheet”
Linux-Unix cheat sheets – The ultimate collection
Free Unix/Linux and vi/vim cheat sheets

Importing an Excel Spreadsheet into an ExtJS DataGrid using DataDrop Grid Plugin

Loiane — Mon, 08 Mar 2010 10:30:35 +0000

This tutorial will walk through how to import an Excel Spreadsheet into a DataGrid using DataDrop Plugin (by Shea Freaderick).

Last week I was looking for a plugin that would allow me to import data from an excel file.

I did not find any plugin on ExtJS forum that works like export excel from grid; I mean, a plugin I do not need any server side code – I could use file upload plugin and do the whole logic thing on server side, but that is not what I was looking for. However, I did find an interesting plugin. Actuality, this plugin I found is awesome! The coolest ExtJS grid plugin I have ever seen! It is really amazing!

So, what is this plugin I am talking a lot about it?

It is called DataDrop developed by Shea Frederick (a.k.a VinylFox) and you can drag data into an ExtJS Datagrid from a spreadsheet.

It is very helpful if you need to import some data from an Excel file. In my point of view, I think it is not good plugin if you need to import large amount of data, because it is not very practical to select a large amount of rows and columns from a spreadsheet. It works very well with any file size, though.

What do you need to use this plugin?

1 – Download plugin from author’s repository (Google code)

2 – Add javascript import to your html page (along with your other ExtJS imports)

3 – Add “Ext.ux.grid.DataDrop” to your datagrid plugins declaration

    // create grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "NAME", width: 170, sortable: true, dataIndex: 'name'},
            {header: "PHONE #", width: 150, sortable: true, dataIndex: 'phone'},
            {header: "EMAIL", width: 150, sortable: true, dataIndex: 'email'},
            {header: "BIRTHDAY", width: 100, sortable: true, dataIndex: 'birthday',
            	renderer: Ext.util.Format.dateRenderer('m/d/Y')}
        ],
        plugins: [Ext.ux.grid.DataDrop],
        title: 'My Contacts',
        autoHeight:true,
        width:590,
		renderTo: document.body,
		frame:true
    });

You can download a working example from my Github repository: http://github.com/loiane/extjs-grid-dragdrop-excel

Other observations:

On VinylFox website, there is a video that demonstrates how to use the plugin with Open Office.

In my first attempt to run my example, I tried to select data from Microsoft Excel and drag and drop into datagrid, but I could not find how to do it (yes, I know, I’m totally M$ Excel newbie – just know how to do simple math – shame on me) – it is so easy to drag data from Open Office and Lotus Symphony – you can click on any place!

If you are newbie just like me, I recorded a video demonstrating how to do it:

Happy coding!

Ajax File Upload with ExtJS and Spring Framework

Loiane — Mon, 01 Mar 2010 10:30:31 +0000

This tutorial will walk you through how to implement an ajax file upload form using ExtJS on client side and Spring Framework on server side.

What are you going to need before start this tutorial?

ExtJS
Spring Framework (MVC) and its dependencies
commons-io-1.4.jar
commons-fileupload-1.2.jar

First, you need to implement the ExtJS File Upload form. You can use ExtJS File Upload example page to see how it looks like (I’m using third example).
Bellow is the form I implemented (or copied from ExtJS and adapted it to my needs – spring):

Ext.onReady(function(){

    Ext.QuickTips.init();

    var msg = function(title, msg){
        Ext.Msg.show({
            title: title,
            msg: msg,
            minWidth: 200,
            modal: true,
            icon: Ext.Msg.INFO,
            buttons: Ext.Msg.OK
        });
    };

    var fp = new Ext.FormPanel({
        renderTo: 'fi-form',
        fileUpload: true,
        width: 500,
        frame: true,
        title: 'File Upload Form',
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 50,
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select a File to import',
            fieldLabel: 'File',
            name: 'file',
            buttonCfg: {
                text: '',
                iconCls: 'upload-icon'
            }
        }],
        buttons: [{
            text: 'Upload',
            handler: function(){
                if(fp.getForm().isValid()){
	                fp.getForm().submit({
	                    url: 'fileUpload/import.action',
	                    waitMsg: 'Uploading your file...',
	                    success: function(fp, o){
	                        msg('Success', 'Processed file on the server');
	                    }
	                });
                }
            }
        },{
            text: 'Reset',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });

});

And here is an example of how to use it (html page):

Spring FileUpload Example with ExtJS Form

Spring File Upload Example Integrated with ExtJS FileUpload Form

Click on "Browse" button (image) to select a file and click on Upload button

Before starting to code a FileUploadController, you are going to need a FileUploadBean:

package com.loiane.beans;

import org.springframework.web.multipart.MultipartFile;

public class FileUploadBean {

	private MultipartFile file;

	public MultipartFile getFile() {
		return file;
	}

	public void setFile(MultipartFile file) {
		this.file = file;
	}

}

And here is my FileUploadController (I am simply storing the uploaded file in a directory in my hard drive – C:). You can add some validation or process the file in this class. You can also add some message to return to client side in case of success or failure.

package com.loiane.web;

import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.validation.BindException;
import org.springframework.web.bind.ServletRequestDataBinder;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.support.ByteArrayMultipartFileEditor;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.SimpleFormController;

import com.loiane.beans.FileUploadBean;

public class FileUploadController extends SimpleFormController  {

	protected ModelAndView onSubmit(
			HttpServletRequest request,
			HttpServletResponse response,
			Object command,
			BindException errors) throws ServletException, IOException {

		// cast the bean
		FileUploadBean bean = (FileUploadBean) command;

		MultipartFile file = bean.getFile();
		String fileName = null;

		if (file == null) {
			System.out.println("User Did not upload file");
		}
		else {
			System.out.println("Uploaded File Name is :" + file.getOriginalFilename());
		}

		InputStream inputStream = null;
		OutputStream outputStream = null;
		if (file.getSize() > 0) {
			inputStream = file.getInputStream();
			String root = "C:\\";
			fileName = root + file.getOriginalFilename();
			outputStream = new FileOutputStream(fileName);
			int readBytes = 0;
			byte[] buffer = new byte[10000];
			while ((readBytes = inputStream.read(buffer, 0 , 10000))!=-1){

				outputStream.write(buffer, 0, readBytes);
			}
			outputStream.close();
			inputStream.close();
		}

		return null;

	}     

	protected void initBinder(HttpServletRequest request, ServletRequestDataBinder binder)
	throws ServletException {
		// to actually be able to convert Multipart instance to byte[]
		// we have to register a custom editor
		binder.registerCustomEditor(byte[].class, new ByteArrayMultipartFileEditor());
		// now Spring knows how to handle multipart object and convert them
	}

}

You also need to add this in your servelt.xml:

Very simple!

Here is the source code of my example project: http://github.com/loiane/extjs-file-import-spring

Happy coding!

Book Review: Ext JS 3.0 Cookbook by Jorge Ramon

Loiane — Wed, 24 Feb 2010 11:00:55 +0000

In an effort to start off my New Year’s resolution of reading more technical books, today I am going to publish my first book review of this year. Let’s see how many books I am going to read until December/2010.

I am going to start writing a review about the Ext JS 3.0 Cookbook by Jorge Ramon, published by Packt Publishing, who sent me a review copy of this book. This is my honest opinion about it.

Motivation

As you can see, if you navigate through my blog, I am an ExtJS fan and I use it daily in my work.

ExtJS website has a good set of basic examples, but if you need something more fancy, you have to spend some time until you find what you need or make some customizations.

The good thing about this book is that is very hands on, and it is very practical, just like a cookbook. It’s literally “109 great recipes for building impressive rich internet applications”. It contains those special recipes you spend some time looking for on the Internet.

I do not recommend this book if you are trying to learn ExtJS, you need to learn some ExtJS basics concepts to understand it.

However, if you are somewhat familiar with ExtJS and you are looking to boost your knowledge about what the framework is capable of, this is a great recipe book, and I definitely recommend it. The code is clean and readable. It’s a handy reference and a set of problem/answers that solve discrete problems.

Format of this book

This book is labeled as a cookbook, and it follows that convention quite well. There is a nice format for each recipe that mostly follows:

Definition/explanation of the recipe – an introduction of the problem
The How to do it…… section
The How it works… section
The There’s more… section
The See also… section

This reoccurring pattern really helps you quickly find what you’re looking for, especially when you’re using the recipe as a refresher as opposed to initial discovery.

My opinion about this book

It does what it says it is on the cover, and it is well organized, well written and consistent.

The book is focused: there is no long introduction (personally, I hate books with long introductions).

The “How to do it…” sections are is step-by-step, and explaining what each step does.

The book covers excellent examples using components provided by ExtJS framework.

As a cookbook, I think it missed some tips of third party plug-ins (and this is something I did not find in any ExtJS book), just like in JQuery page (maybe this is an idea for another book? ).

Conclusion

This book is a great reference for those who work with ExtJS everyday. This is one of the best books I have read about ExtJS. It is worth to have it.

You can check out a sample chapter of Ext JS 3.0 Cookbook.

And this is the link to the book page.

Spring MVC and AJAX with JSON

Loiane — Mon, 15 Feb 2010 11:43:23 +0000

This tutorial will walk through how to configure Spring MVC to return a JSON object to client browser.

One of the main decisions to be taken while developing AJAX applications is the format of messages passed by the server to the client browser. There are many options to choose from including plain text, XML, CSV etc. One of the more popular choices today is the JavaScript Object Notation (JSON). JSON provides a nice name-value pair data format that is easy to generate and parse.

How to do it?

You can use json-lib-ext-spring. There are other libs, this is the one I found. If you know or use another one, please leave a comment with the library name.

Do not forget to download Json-lib and its dependencies.

Now you have to configure your XML files:

Create a views.xml file under WEB-INF folder and paste the following code into it:

Add this config to you spring configuration file:



	
		/WEB-INF/views.xml
	
	
		1

Make sure to set the order if you are using any other view resolvers.

Now you just have to use “jsonView” as the viewname and the model will be converted to JSONbefore being sent back to the client:

return new ModelAndView("jsonView", modelMap);

Here is an example:

	public ModelAndView getColumnsJson(HttpServletRequest request,
			HttpServletResponse response) throws Exception {

		Map modelMap = new HashMap(2);
		modelMap.put("rows", service.generateColumns());
		return new ModelAndView("jsonView", modelMap);

	}

Happy coding!

ExtJS: How to Export DataGrid to Excel

Loiane — Mon, 08 Feb 2010 11:06:36 +0000

This tutorial will walk through how to export data from ExtJS DataGrid directly to Excel.

Sometimes the user wants to export the data from the datagrid to an excel file. There is an ExtJS third party plugin that does it for you.

There are some “issues” you have to be aware of before you start:

It needs a browser that supports data URLs, such as Firefox, Opera and IE8.
I tested it with the following ExtJS versions: 2.2.1, 3.0, 3.0.3 and 3.1, but it only worked with ExtJS 3.0. If anyone is using other ExtJS version and the plugin worked, please, let me know.
It only works on the data in the Store – if you are using server-side paging, then perform this processing on the server. For quick and dirty conversion of a small table to Excel, this might be useful.
If the data in the Store is volatile (It gets reloaded or edited), the data URL will have to be recalculated.

Let’s get started:

First, create a file in your projet and paste this content in it (I called it exporter.js): http://github.com/loiane/extjs-export-excel/blob/master/WebContent/js/exporter.js (this file has too many lines, that’s why I’m not going to past its content here).

Then, in your datagrid, add this code:

var linkButton = new Ext.LinkButton({
        id: 'grid-excel-button',
        text: 'Export to Excel'
});

//create the Grid
var grid = new Ext.grid.GridPanel({
    bbar: new Ext.Toolbar({
        buttons: [linkButton]
    })
});

linkButton.getEl().child('a', true).href = 'data:application/vnd.ms-excel;base64,' +
Base64.encode(grid.getExcelXml());

And if you try to export the data, it will look like this:

Feel free to change the color, fonts. Take a look in the code and try to understand it to make the changes you want.

Ed Spencer also developed a similar plugin. The source code is cleaner than this one. The output is the same, though.

You can download my sample app from my GitHub repository (JEE project): http://github.com/loiane/extjs-export-excel

Happy coding!

Integrating Spring Security with ExtJS Login Page

Loiane — Mon, 01 Feb 2010 10:00:28 +0000

This tutorial will walk through how to configure ExtJS Login form (Ajax login form) instead of default Spring Security login.jsp.

Instead of using login.jsp from spring security, why do not use an ajax login form?

And How to integrate the ExtJS Login Form with Spring Security?

You did try to do it, the user is successfully authenticated, but the user is not redirected to the application main page. How to fix this situation? How to make it work?

It does not matter if you set the default-target-url in applicationContext-security.xml, or set a redirect URL on server side. It will not work this way.

The issue is that ExtJS make Ajax calls, and no redirect will work on server side. You have to redirect it on the client side, which is the ExtJS/javascript code.

First, you need to create the login form. You can use the javascript code provided by ExtJS and you can modify it to work with spring security.

If you take a look at the login.jsp, you will see three key points:

URL / form action: j_spring_security_check
Username input name: j_username
Password input name: j_password

That is what you need to customize to make ExtJS Login form works! But do not be too comfortable, there are some issues you need to fix to make it work perfectly.

Take a look how login.js looks like (after customization):

Ext.onReady(function(){
	Ext.QuickTips.init();

	// Create a variable to hold our EXT Form Panel.

	// Assign various config options as seen.
	var login = new Ext.FormPanel({
		labelWidth:80,
		url:'j_spring_security_check',
		frame:true,
		title:'Please Login',

		defaultType:'textfield',
		width:300,
		height:150,
		monitorValid:true,
		// Specific attributes for the text fields for username / password.
		// The "name" attribute defines the name of variables sent to the server.

		items:[{
			fieldLabel:'Username',
			name:'j_username',
			allowBlank:false
		},{
			fieldLabel:'Password',

			name:'j_password',
			inputType:'password',
			allowBlank:false
		}],

		// All the magic happens after the user clicks the button
		buttons:[{

			text:'Login',
			formBind: true,
			// Function that fires when user clicks the button
			handler:function(){
			login.getForm().submit({

				method:'POST',

				// Functions that fire (success or failure) when the server responds.
				// The server would actually respond with valid JSON,
				// something like: response.write "{ success: true}" or

				// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
				// depending on the logic contained within your server script.
				// If a success occurs, the user is notified with an alert messagebox,

				// and when they click "OK", they are redirected to whatever page
				// you define as redirect.

				success:function(){
				Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){

					if (btn == 'ok'){
						window.location = 'main.action';
					}
				});

			},

			// Failure function, see comment above re: success and failure.
			// You can see here, if login fails, it throws a messagebox
			// at the user telling him / her as much.

			failure:function(form, action){
				if(action.failureType == 'server'){
					obj = Ext.util.JSON.decode(action.response.responseText);

					Ext.Msg.alert('Login Failed!', obj.errors.reason);
				}else{
					Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);

				}
				login.getForm().reset();
			}

			});
		}
		}]
	});

	login.render('login');

});

If you make these changes and try to execute the application with a basic applicationContext-security.xml file, the user will be successfully authenticated, but is not going to be redirected.

What are we missing then?

You need to customize AuthenticationProcessingFilter class for spring security to perform actions on login.

The “onSuccessfulAuthentication” and “onUnsuccessfulAuthentication” methods need to return some JSON content. If user is successfully authenticated, then redirect to main page, otherwise, the application will show an error message.

This is MyAuthenticationProcessingFilter class:

package com.loiane.security;

import java.io.IOException;
import java.io.Writer;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletResponseWrapper;

import org.springframework.security.Authentication;
import org.springframework.security.AuthenticationException;
import org.springframework.security.ui.webapp.AuthenticationProcessingFilter;

public class MyAuthenticationProcessingFilter extends AuthenticationProcessingFilter {

	protected void onSuccessfulAuthentication(HttpServletRequest request,
			HttpServletResponse response, Authentication authResult)
	throws IOException {
		super.onSuccessfulAuthentication(request, response, authResult);

		HttpServletResponseWrapper responseWrapper = new HttpServletResponseWrapper(response);

		Writer out = responseWrapper.getWriter();

		String targetUrl = determineTargetUrl( request );
		out.write("{success:true, targetUrl : \'" + targetUrl + "\'}");
		out.close();

	}

	protected void onUnsuccessfulAuthentication( HttpServletRequest request,
			HttpServletResponse response, AuthenticationException failed )
	throws IOException {

		HttpServletResponseWrapper responseWrapper = new HttpServletResponseWrapper(response);

		Writer out = responseWrapper.getWriter();

		out.write("{ success: false, errors: { reason: 'Login failed. Try again.' }}");
		out.close();

	}

}

And this is how applicationContext-security.xml looks like:

Now you can login using ExtJS login form.

I coded a sample application for this example. If you like it, you can download it from my GitHub: http://github.com/loiane/spring-security-extjs-login

Happy coding!

Spring Security: Login and Logout Form JSP

Loiane — Mon, 25 Jan 2010 10:00:52 +0000

When you configure spring security in your web application you can configure your login.jsp in the applicationContext-security.xml.

But how this page looks like? If you search around, you are not going to find it easily. There is many articles about how to configure spring security, but a few ones list login.jsp.

If you take a look in the spring security distribution file, you are going to find an example application, and inside it: login.jsp and logout link.

login.jsp

<%@ taglib prefix='c' uri='http://java.sun.com/jstl/core_rt' %>
<%@ page import="org.springframework.security.ui.AbstractProcessingFilter" %>
<%@ page import="org.springframework.security.ui.webapp.AuthenticationProcessingFilter" %>
<%@ page import="org.springframework.security.AuthenticationException" %>


  
    Login
  

  
    Login

    
      
        Your login attempt was not successful, try again.


        Reason: .
      
    

    
      
        User: 
        Password: 
        Don't ask for my password for two weeks

The names of the fields MUST remain the same or else your authentication will fail.

As far as the logout goes, all you have to do is send the user to a particular servlet define by spring-security.

logout link:

">Logout

That’s it!

Happy Coding!

Tutorial: Getting Started with Spring Security

Loiane — Mon, 18 Jan 2010 10:00:23 +0000

This tutorial will cover a basic scenario where it integrates Spring Security, using database-backed authentication, into an existing Spring web application.

Spring Security is a security framework that provides declarative security for your Spring-based applications. Spring Security provides a comprehensive security solution, handling authentication and authorization, at both the web request level and at the method invocation level. Based on the Spring Framework, Spring Security takes full advantage of dependency injection (DI) and aspect oriented techniques.

Spring Security is also known as Acegi Security (or simply Acegi).

As with anything else related to spring the learning curve on spring-security is just as steep. But once you get the hang of it, it’s easy peasy and you can use the same configuration over and over again in your web apps.

When I started to study Spring Security, I found these suggested steps at Spring Security page.

If you want to configure Spring Security in your web application, follow the steps:

First thing you need to do is to add the jar files in the application classpath. Download Spring Security, and from inside dist folder, copy the following jar files and paste them into your web application lib folder:

spring-security-core-2.0.4.jar
spring-security-core-tiger-2.0.4.jar
spring-security-acl-2.0.4.jar
spring-security-taglibs-2.0.4.jar

Also, you need to download Apache Commons Codec: commons-codec-1.3.jar

Now, let’s start with XML configuration.

Web.xml

Insert the following block of code. It should be inserted right after the/context-param end-tag.


	contextConfigLocation
	
           /WEB-INF/security-applicationContext.xml
	



	springSecurityFilterChain
	org.springframework.web.filter.DelegatingFilterProxy



	springSecurityFilterChain
	/*

applicationContext-security.xml

Let’s create the applicationContext-security.xml.

I would suggest getting started with the applicationContext-security.xml that is found in the tutorial sample, and trimming it down a bit. Here’s what I got when I trimmed it down:

Now, you can try to execute the web application.

If you try to execute the app and get this exception:

SEVERE: Context initialization failed
org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exception parsing XML document from ServletContext resource [/WEB-INF/applicationContext-security.xml]; nested exception is java.lang.NoClassDefFoundError: org/aspectj/lang/Signature
	at org.springframework.beans.factory.xml.XmlBeanDefinitionReader.doLoadBeanDefinitions(XmlBeanDefinitionReader.java:420)
	at org.springframework.beans.factory.xml.XmlBeanDefinitionReader.loadBeanDefinitions(XmlBeanDefinitionReader.java:342)
	at org.springframework.beans.factory.xml.XmlBeanDefinitionReader.loadBeanDefinitions(XmlBeanDefinitionReader.java:310)
	at org.springframework.beans.factory.support.AbstractBeanDefinitionReader.loadBeanDefinitions(AbstractBeanDefinitionReader.java:143)
	at org.springframework.beans.factory.support.AbstractBeanDefinitionReader.loadBeanDefinitions(AbstractBeanDefinitionReader.java:178)
	at org.springframework.beans.factory.support.AbstractBeanDefinitionReader.loadBeanDefinitions(AbstractBeanDefinitionReader.java:149)
	at org.springframework.web.context.support.XmlWebApplicationContext.loadBeanDefinitions(XmlWebApplicationContext.java:124)
	at org.springframework.web.context.support.XmlWebApplicationContext.loadBeanDefinitions(XmlWebApplicationContext.java:92)
	at org.springframework.context.support.AbstractRefreshableApplicationContext.refreshBeanFactory(AbstractRefreshableApplicationContext.java:123)
	at org.springframework.context.support.AbstractApplicationContext.obtainFreshBeanFactory(AbstractApplicationContext.java:423)
	at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:353)
	at org.springframework.web.context.ContextLoader.createWebApplicationContext(ContextLoader.java:255)
	at org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader.java:199)
	at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:45)
	at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:3764)
	at org.apache.catalina.core.StandardContext.start(StandardContext.java:4216)
	at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1014)
	at org.apache.catalina.core.StandardHost.start(StandardHost.java:736)
	at org.apache.catalina.core.ContainerBase.start(ContainerBase.java:1014)
	at org.apache.catalina.core.StandardEngine.start(StandardEngine.java:443)
	at org.apache.catalina.core.StandardService.start(StandardService.java:448)
	at org.apache.catalina.core.StandardServer.start(StandardServer.java:700)
	at org.apache.catalina.startup.Catalina.start(Catalina.java:552)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	at java.lang.reflect.Method.invoke(Unknown Source)
	at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:295)
	at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:433)

Download aspectjrt-1.5.4.jar and add it to your application classpath. It will work.

Let’s make some changes in applicationContext-security.xml.

First change: replace the following code

for

The auto-config attribute basically tells spring-security to configure default settings for itself.

The login.jsp is allowed to be access from ANY role.

Rrestricting access to it would mean that no one would be able to reach even the login page.

Note how we are using a jsp instead of a spring managed controller. The login page does not need to be a spring managed controller at all.

We also tell spring-security to restrict access to ALL url’s to only those users who have the role ROLE_USER.

Let’s say you have more than one user role. Mapping URLs to roles is really easy. In your http element, simply put successive elements like this:

Of course you do not want to put all the usernames and passwords and theirs roles in the applicationContext-security.xml. But how do we tell spring-security to get all user authentication details from the database?

Put the following code in applicationContext-security.xml (replace usernames and passwords block of code)

This requires that a dataSource be created first.

Now you ask: what does the convention over configuration assume my database tables look like?

You should be aware that the default authentication provider requires the database structure to be in a certain way:

CREATE TABLE users
(
  username character varying(50) NOT NULL,
  "password" character varying(50) NOT NULL,
  enabled boolean NOT NULL,
  CONSTRAINT users_pkey PRIMARY KEY (username)
);

CREATE TABLE authorities
(
  username character varying(50) NOT NULL,
  authority character varying(50) NOT NULL,
  CONSTRAINT fk_authorities_users FOREIGN KEY (username)
      REFERENCES users (username) MATCH SIMPLE
      ON UPDATE NO ACTION ON DELETE NO ACTION
);

CREATE UNIQUE INDEX ix_auth_username
  ON authorities
  USING btree
  (username, authority);

If you want to configure the queries that are used, simply match the available attributes on the jdbc-user-service element to the SQL queries in the Java class referenced above.

For example: You want to simplify tha database schema by adding the user’s role directly to the user table. Let’s modify the xml configuration:

There are a couple other pages that maybe you want to configure.

Access Denied: This is the page the user will see if they are denied access to the site due to lack of authorization (i.e. tried to hit a page that they didn’t have access to hit, even though they were authenticated properly). This is configured as follows:

...

Default Target URL: This is where the user will be redirected upon successful login. This can (and probably should) be a page located under Spring control. Configured as follows:


    ...
        
    ...

Logout URL: The page where the user is redirected upon a successful logout. This can be a page located under Spring control too (provided that it allows anonymous access):


    ...
    	
    ...

Login Failure URL: Where the user will be sent if there was an authentication failure. Typically this is back to the login form, with a URL parameter, such as:


    ...
        
    ...

This is what you need to get started with Spring Security.

Next week, I am going to post how Spring Security login.jsp looks like.

Happy coding!

My DeveloperWorks: What’s life like for a female Java Developer in Brazil?

Loiane — Tue, 12 Jan 2010 12:55:57 +0000

Just wanted to share with you my interview on Valerie’s My developerWorks blog: Interview with Loiane Groner, Java developer in Brazil.

I’m very happy, because this interview was the most viewed entry on My developerWorks yesterday:

click on the picture to see full size

And if you look at the corner, you will see my blog in “Featured Blogs“!

It is just a copy from this one. The tutorials are the same.

There is also some twitter statuses:

From Valerie’s:

Cool new interview on my blog w/ Loiane Groner, java developer making her mark in Brazil: http://bit.ly/8FbnzL (http://twitter.com/vmichelle/status/7634056149 )

From developerWorks’:

What’s life like for a female #javadeveloper in Brazil? Interview w/ Loiane Groner http://bit.ly/8FbnzL (http://twitter.com/developerworks/status/7634404961 )

Thank you Valerie, for giving me this opportunity!

How to Display an Image/Link Inside an Ext JS GridPanel’s Cell

Loiane — Mon, 11 Jan 2010 10:00:11 +0000

This tutorial will walk through how you can display an image/link inside an Ext GridPanel cell using a renderer function.

To explain this approach, I will use a sample GridPanel that displays some dummy contact information (name, phone, birthday and email). Together with email data, we will display a link (mailto) and an email link icon/image.

How to do it

First, we need some data to work with. An ArrayStore with a few dummy records:

//array with data - dummy data
var myData = [
    ['Meyers, Quyn R.',	    '(943) 570-5141', 'Proin@nullamagna.ca',    '05/13/1990'],
	['Whitney, Tad T.',	    '(547) 743-0343', 'vulputate@acurnaUt.org', '05/10/1987'],
	['Lawrence, Flavia J.',	'(404) 826-4553', 'dapibus.id@accumsan.ca',	'01/05/1988'],
	['Morales, Susan I.',	'(276) 707-8084', 'tristique@seacmetus.com','03/09/1992'],
	['Merrill, Desiree Q.', '(911) 546-0559', 'dictum.cursus@vel.ca',   '01/07/1981'],
	['Hampton, Willa Y.',	'(729) 562-8303', 'nascetur@stellus.ca',    '06/17/1991'],
	['Brewer, Brynne F.',	'(818) 302-4393', 'ligula@ullamcorper.org',	'04/20/1989'],
	['Marsh, Drew D.',	    '(645) 671-2779', 'et.euismod.et@eget.ca',	'02/13/1990']
];

GirdPanel definition:

// create grid
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header: 'NAME', width: 170, sortable: true, dataIndex: 'name'},
        {header: 'PHONE #', width: 150, sortable: true, dataIndex: 'phone'},
        {header: 'BIRTHDAY', width: 100, sortable: true, dataIndex: 'birthday',
        	renderer: Ext.util.Format.dateRenderer('d/m/Y')},
        {header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email',
        	renderer: renderIcon }
    ],
    title: 'My Contacts',
    autoHeight:true,
    width:600,
	renderTo: document.body,
	frame:true
});

How it works

{header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email', renderer: renderIcon }

The insteresting part in the above code is the trend column’s mail. A renderer function is an interceptor method that can change the grid cell before it is rendered.

//image path
var IMG_EMAIL = '/gridcell-with-image/img/email_link.png';

//renderer function
function renderIcon(val) {
    return ''+ ' ' + val  +'';
}

Inside the renderer function we just put some HTML code to display what we want. Pretty easy!

Now you can create your own renderer functions!

Happy coding!

Download (J2EE project): http://github.com/loiane/gridcell-with-image

Portuguese: http://www.loiane.com/2010/01/extjs-como-colocar-icone-e-link-nas-celulas-do-grid/

Ext.Window Panel: Show or Hide?

Loiane — Mon, 04 Jan 2010 10:00:16 +0000

From this short tutorial you will learn how to control the Ext.Window panel. It explains how to hide or show it on button click.

Problem: you created a Ext.Window, clicked on a button or link (or something else) and a window showed up. You clicked on close button (up right corner) and it closed. You tried again, but the window did not show from second time (and on) – maybe you got an error message in Firebug console.

Solution: the default behaviour of this componet is to close. But close means destroy the component, so the second time you tried to open it, it did not work. The solution is to hide the window, so you can reuse it when you need it again.

Let’s see some code (Reference: Hello Word Window)

HTML:



Ext.Window: close or hide

	

	
	

	



	

	

    Hello Dialog
    
        
        
            Ext.Window Panel: Close or Hide?

JS:

Ext.onReady(function(){

	Ext.BLANK_IMAGE_URL = '/ext-window/ext-3.0.3/resources/images/default/s.gif';

    var win;
    var button = Ext.get('show-btn');

    var tab = new Ext.TabPanel({
        applyTo: 'hello-tabs',
        autoTabs:true,
        activeTab:0,
        deferredRender:false,
        border:false
    });

    button.on('click', function(){

        // create the window on the first click and reuse on subsequent clicks
    	//cria a janela no primeiro clique e a reusa nos próximos cliques
        if(!win){
            win = new Ext.Window({
                applyTo:'hello-win',
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide', //'close' - destroy the component
                plain: true,

                items: tab,

                buttons: [{
                    text: 'Close',
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        }
        win.show(this);
    });
});

Happy Coding!

Download (J2EE project): http://github.com/loiane/ext-window

Portuguese: ExtJS: Ext.Window: hide ou close?

Getting Started with ExtJS DataGrid

Loiane — Tue, 22 Dec 2009 14:12:55 +0000

This tutorial will walk through how to implement a simple Ext JS datagrid, using a GridPanel to display structured data in a user-friendly grid.

Screeshot for this tutorial:

The grid is, without doubt, one of the most widely-used components of Ext. We all have data, and this needs to be presented to the end user in an easy-to-understand manner. The spreadsheet (a.k.a.: grid) is the perfect way to do this—the concept has been around for quite a while because it works. Ext takes that concept and makes it flexible and downright amazing!

Terminology:

Displaying data in a grid requires two Ext components:

A store that acts like an in-memory database, keeping track of the data we want to display
A grid panel that provides a way to display the data stored in a data store

Before we start to create each of these, let’s look at some of the terminology that will be used, because this can be confusing at first:

Columns: This refers to a whole column of data, and would contain information only relevant to the display of data down through the entire column, including the heading. In Ext JS, this information is part of the Column Model.
Fields: This also refers to an entire column of data, but is refers to the actual data values. With Ext JS, this is used in the reader, for loading data.

Before we get started, you must configure your project to use Ext JS library. If you do not know how to do it, you can check it out this tutorial.

Setting up a data store:

The first thing we need to do is set up our data, which will be placed into a data store. The data store types available in Ext give us a consistent way of reading different data formats such as XML and JSON, and reading this data in a consistent way throughout all of the Ext widgets. Regardless of whether this data it is JSON, XML, an array, or even a custom data type of your own, it’s all accessed in the same way thanks to the data store.

Some data stores available, by default, in Ext are:

Simple (Array)
XML
JSON

Step 1: Adding data to our data store:

In this first example, we are going to use a simple (array) data store, represeting a simple agenda (name, phone, email and birthday date).

The data store needs two things: the data itself, and a description of the data—or what could be thought of as the fields. A reader will be used to read the data from the array, and this is where we define the fields of data contained in our array. The reader acts as an interpreter of sorts; it knows how to interpret a string of data as rows of data to be used with Ext JS.

Step 2: Defining your data for the data store

The reader needs to know which fields to read in as data for our data store, so we will need to define these.

Fields are defined using an array of objects—or if the data is to be read verbatim, just a string specifying the field name. All except one of our fields in this example can be defined with a simple name. For example, the title field could be defined using an object like this:

{name: ‘title’}

However, in our case, because we are just reading in the data as a string, we can simply pass the field name and save some typing:

‘title’

The released field is different because we want to treat its data appropriately, as a date type. For each field format type, there may be options to define the format of the data more explicitly. With the date type, there is a dateFormat string that needs to be defined. If you have used PHP, these date format strings will look familiar, because Ext uses the same date format strings that PHP does.

{name: ‘released’, type: ‘date’, dateFormat: ‘Y-m-d’}

Here are some datatypes supported by ExtJS: string, int, float, boolean, date.

Step 3: Displaying the GrigPanel

The thing that pulls everything together is the GridPanel, which takes care of placing the data into columns and rows, along with adding column headers, and boxing everything together in a neat little package.

Code:

Ext.onReady(function(){

	Ext.BLANK_IMAGE_URL = '/extjs-grid-simple-array/ext-3.0.3/resources/images/default/s.gif';

	//array with data
    var myData = [
        ['Meyers, Quyn R.',	    '(943) 570-5141', 'Proin@nullamagna.ca',    '05/13/1990'],
		['Whitney, Tad T.',	    '(547) 743-0343', 'vulputate@acurnaUt.org', '05/10/1987'],
		['Lawrence, Flavia J.',	'(404) 826-4553', 'dapibus.id@accumsan.ca',	'01/05/1988'],
		['Morales, Susan I.',	'(276) 707-8084', 'tristique@seacmetus.com','03/09/1992'],
		['Merrill, Desiree Q.', '(911) 546-0559', 'dictum.cursus@vel.ca',   '01/07/1981'],
		['Hampton, Willa Y.',	'(729) 562-8303', 'nascetur@stellus.ca',    '06/17/1991'],
		['Brewer, Brynne F.',	'(818) 302-4393', 'ligula@ullamcorper.org',	'04/20/1989'],
		['Marsh, Drew D.',	    '(645) 671-2779', 'et.euismod.et@eget.ca',	'02/13/1990']
    ];

    //data store - description of fields
    var store = new Ext.data.SimpleStore({
        fields: [
           'name',
           'phone',
           'email',
           {name: 'birthday', type: 'date', dateFormat: 'd/m/Y'}
        ]
    });

    //read the data from simple array
    store.loadData(myData);

    // create grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "NAME", width: 170, sortable: true, dataIndex: 'name'},
            {header: "PHONE #", width: 150, sortable: true, dataIndex: 'phone'},
            {header: "EMAIL", width: 150, sortable: true, dataIndex: 'email'},
            {header: "BIRTHDAY", width: 100, sortable: true, dataIndex: 'birthday',
            	renderer: Ext.util.Format.dateRenderer('d/m/Y')}
        ],
        title: 'My Contacts',
        autoHeight:true,
        width:590,
		renderTo: document.body,
		frame:true
    });

    //render to DIV
    grid.render('grid-simple-array');
});

You can download the source code in my Github: http://github.com/loiane/extjs-grid-simple-array

Reference: Learning Ext JS – Book

Sun Tech Days Brazil Presentations

Loiane — Wed, 16 Dec 2009 16:14:46 +0000

If you missed Sun Tech Days Brazil 2009 (December 8-9 – Sao Paulo), because of the rain (just like me: pt-br) or because any other reason, don’t worry about it!

Sun published the presentations (pdf format). It is still missing two presentations:

Keynotes

Enterprise Computing

Client Technologies

OpenSolaris

Application Consolidation with OpenSolaris Containers (coming soon)
Becoming an OpenSolaris Power User
Building High Quality C/C++ Applications
High Availability with OpenSolaris
Mastering Your Multicore System
Maximizing Application Performance
Moving to OpenSolaris
Open Networking (coming soon)
Porting Applications with the OpenSolaris SourceJuicer
Securing Networked Services with OpenSolaris Security Features
Virtualizing Your Application: Which Option is Right for You
What’s New and Cool

Getting Started with JSON

Loiane — Mon, 14 Dec 2009 10:00:45 +0000

This post will walk through JSON basic concepts.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format, widely hailed as the successor to XML in the browser.

It is easy for humans to read and write.

It is easy for machines to parse and generate.

It is based on a subset of the JavaScript Programming Language.

It is lighter than XML.

JSON versus XML

Ps.: This is only from the javascript eval() point of view.

JSON	XML
JSON object are type	XML data is typeless
JSON types: string, number, array, boolean	XML data are all string
Data is readily accessible as JSON objects	XML data needs to be parsed
Retrieving value is easy	Retrieving value is difficult
JSON is supported by all browsers	Cross browser XML parsing can be tricky
Simple API	Complex API
Supported by many Ajax toolkit	Not fully supported by Ajax toolkit
Fast object de-serialization in JavaScript	Slower de-serialization in Javascript
Fully automated way of de-serializing/serializing JavaScript objects	Developers have to write javascript code to serialize/se-serialize to/from XML

JSON Values

JSON is built on two structures:

A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).

An array is an ordered collection of values. An array begins with [ (left bracket) and ends with ] (right bracket). Values are separated by , (comma).

A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.

A string is a collection of zero or more Unicode characters, wrapped in double quotes, using backslash escapes. A character is represented as a single character string. A string is very much like a C or Java string.

A number is very much like a C or Java number, except that the octal and hexadecimal formats are not used.

JSON Syntax

For objects start the object with “{“ and end it with “}”
For members (properties), use pairs of string : value and separate them by commas
For arrays put the arrays between []
For elements put the values directly separated by commas

Example:

This object has 3 properties or name/value pairs. The firstName and lastName are strings and age is a number.

The value can be any Javascript object (and remember everything in Javascript is an object so the value can be a string, number, array, function, even other Objects).

hobbies is an object. That object has two properties or name/value pair (tvseries and games).

tvseries is an array which holds two JSON objects showing the names and seasons of 9 TV Series. Likewise games is also an array which holds four JSON objects showing the names of games I like.

Well, this is just a start. You can study JSON functions and how to convert JSON objects now. You can also study Ajax toolkits taht support JSON.

Happy coding!

Significant Sun S/W releases today: NetBeans 6.8 + Java EE 6 + GlassFish Enterprise Server V3

Loiane — Thu, 10 Dec 2009 17:56:53 +0000

Sun released a couple of significant software releases today…Folks have been working hard to get these release(s) out. So, today, Sun and the NetBeans(TM) community are announcing the availability of the NetBeans Integrated Development Environment (IDE) 6.8 — in conjunction with the availability of Java(TM) Platform Enterprise Edition 6 (Java EE 6) and Sun GlassFish(TM) Enterprise Server v3. ….and there’s a bit more to this. The Software team is holding a virtual event for folks who want to learn more:

An on-line Virtual Conference will be held on December 15th. Registration is at https://dct.sun.com/dct/forms/reg_us_2011_956_0.jsp.

KEY UPDATES TO JAVA EE 6

New Developer Productivity Features: Java EE 6 features simplify Java application development with less XML configuration, more annotations and more POJO-like development.

Support for New Specifications: New specifications are available including RESTful Web services, EJB 3.1 and EJB Lite, and Dependency Injection.

Support for Profiles: Java EE 6 adds support for defining Profiles that may be a subset or superset of the traditional Java EE 6 full stack that are tailored to specific application scenarios or verticals. One specific Profile is defined, the Web Profile, intended for the deployment of modern Web applications.

Additional information is available at: http://java.sun.com/javaee

KEY UPDATES TO GLASSFISH ENTERPRISE SERVER V3

Full Support for Java EE 6: GlassFish Enterprise Server v3 is the first application server to be compatible with the new Java EE 6 specification.

New Modular Runtime: A new modular runtime based on OSGi provides for faster startup and loading only those components required, reducing resource requirements.

GlassFish Web Profile: Implementing the new Java EE 6 Web Profile, this provides an lighter weight runtime optimized for modern Web applications.

Support for Iterative Development: New features allow developers to use an edit, save, reload approach to development, eliminating the time consuming recompile and redeploy steps. This is extended by application state being preserved eliminating the need to recreate that state after each change. NetBeans 6.8 has been released providing full support for Java EE 6 development.

Additional information is available at: http://www.sun.com/glassfishv3

KEY UPDATES TO THE NETBEANS 6.8 IDE

The NetBeans IDE 6.8 is available for download free of charge at www.netbeans.org.

Complete Java EE 6 Support: Java EE 6 language features simplify Java application development with less XML configuration, more annotations and more POJO-like development.

GlassFish v3 Support: Developers can easily target and deploy to GlassFish v3, including the new lightweight GlassFish v3 Web Profile.

JavaFX(TM): The latest version of the NetBeans editor provides improved code completion, hints and navigation for JavaFX.

PHP Support: The NetBeans IDE expands its support of dynamic languages with support for PHP 5.3 and the Symfony (open-source PHP) web framework.

Tighter Integration with Project Kenai: Project Kenai, a collaborative environment for hosting open source projects, now delivers full support for JIRA and improved instant messenger and issue tracker integration. For more information visit www.kenai.com.

C/C++ Profiling: The new Microstate Accounting indicator and I/O usage monitor help developers profile and tune C/C++ applications.

NetBeans Platform: As a rock-solid application framework for Swing applications, the platform saves developers a huge amount of time and effort by providing commonly-used facilities such as menu items, toolbar items, keyboard shortcuts, and window management out of the box.

Additional information is available at:

NetBeans 6.8 IDE - http://netbeans.org/community/releases/68/
Java EE 6 – http://java.sun.com/javaee/
GlassFish v3 – http://www.sun.com/glassfishv3

Getting started with ExtJS in your J2EE project

Loiane — Tue, 01 Dec 2009 10:00:33 +0000

This tutorial will walk through how to get an Ext JS installation up and running quickly in your java (J2EE) project.

Level: Basic

This is the screenshot of this tutorial:

First, if you haven’t downloaded ExtJS already, do it: http://extjs.com/products/extjs/download.php (most current release).

PS.: I’m using Eclipse IDE.

1 - After download the ExtJS library, let’s create a Dynamic Web Project.

2 - Under WebContent folder, create a folder where all ExtJS files will be located (I named it ext-3.0.3). Paste adapter and resources folders under your extjs folder. Also, paste this file: ext-all.js under ext-3.0.3:

3 - Let’s create a html page. You can use this page as a template and adjust it to your needs:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>



	
  	
	

	

	
	

	
	

	

  	

	Getting Started with Extjs

4 - Now, let’s put a Hello World code to make sure everything is ok:

	Ext.onReady(function(){
		Ext.Msg.alert('Test Extjs', 'Hello World');
	});

You can download the source code in my Github: http://github.com/loiane/extjs-helloworld

Reference: Ext Js Community

Happy Coding!

Ext JS: Which events are fired by a component?

Loiane — Fri, 27 Nov 2009 09:00:21 +0000

Quick Tip:

Sometimes, we need to know all events that are fired by an Ext JS component.

It is easy to find out, just use the following code in Firebug:

Ext.util.Observable.capture(Ext.getCmp('id_my_grid'), console.info);

For example: let’s say that the component you want to analyze has id “id_my_grid”. Load the page with the component (project) using Firefox, open Firebug, Console tab and use the code above.

Now do some actions with the component and watch the Firebug output.

Happy coding and debuging!

Tutorial: Using the EGit Eclipse Plugin with GitHub

Loiane — Wed, 25 Nov 2009 09:00:22 +0000

I started to use GitHub a couple of months ago.

I found this Elipse plugin – EGit - and it did made my life so much easier (download projects from GitHub and upload projects – with may files – to GitHub). So I decided to write this tutorial, because I did not find any step by step Egit tutorial on the Internet

What this tutorial covers:

Installing EGit
Importing an existing Eclipse project from Github
Uploading your Eclipse project to Github
Git operations from inside Eclipse

Enjoy it and Happy coding!

Loiane Groner

ExtJS, Spring MVC 3 and Hibernate 3.5: CRUD DataGrid Example

ExtJS Code

Java code

Controller:

Service Class:

Contact Calss – POJO:

DAO Class:

Util Class:

How to resize an ExtJS Panel, Grid, Component on Window Resize without using Ext.Viewport

Problem:

Solution:

Requirements to make the plugin work:

ExtJS plugin: PagingToolbarResizer

The problem:

The solution/plugin:

Links:

You can also download the plugin here:

The Big Website Merge: java.sun.com, developers.sun.com, BigAdmin, and OTN

Hibernate 3 Annotations Tutorial

Requirements

Configuration

I’m a DZone MVB (Most Valuable Blogger)!

ExtJS: Stop the “page contains secure and nonsecure items” Warning

How to solve this “issue” if the system was developed with ExtJS?

How to Populate Ext JS ComboBox using Spring Controller

Populating an ExtJS DataGrid + RowExpander using Spring MVC 3

Ext Designer Review

ExtJS and Spring MVC Framework: CRUD DataGrid Example

Quick Tip: Unix-VI Cheat Sheets

Importing an Excel Spreadsheet into an ExtJS DataGrid using DataDrop Grid Plugin

Ajax File Upload with ExtJS and Spring Framework

Spring File Upload Example Integrated with ExtJS FileUpload Form

Book Review: Ext JS 3.0 Cookbook by Jorge Ramon

Motivation

Format of this book

My opinion about this book

Conclusion

Spring MVC and AJAX with JSON

ExtJS: How to Export DataGrid to Excel

Integrating Spring Security with ExtJS Login Page

Spring Security: Login and Logout Form JSP

login.jsp

Login

logout link:

Tutorial: Getting Started with Spring Security

Web.xml

applicationContext-security.xml

My DeveloperWorks: What’s life like for a female Java Developer in Brazil?

How to Display an Image/Link Inside an Ext JS GridPanel’s Cell

How to do it

How it works

Ext.Window Panel: Show or Hide?

Getting Started with ExtJS DataGrid

Terminology:

Setting up a data store:

Step 1: Adding data to our data store:

Step 2: Defining your data for the data store

Step 3: Displaying the GrigPanel

Code:

Sun Tech Days Brazil Presentations

Keynotes

Enterprise Computing

Client Technologies

OpenSolaris

Getting Started with JSON

What is JSON?

JSON versus XML

JSON Values

JSON Syntax

Significant Sun S/W releases today: NetBeans 6.8 + Java EE 6 + GlassFish Enterprise Server V3

KEY UPDATES TO JAVA EE 6

KEY UPDATES TO GLASSFISH ENTERPRISE SERVER V3

KEY UPDATES TO THE NETBEANS 6.8 IDE

Getting started with ExtJS in your J2EE project

Ext JS: Which events are fired by a component?

Quick Tip:

Tutorial: Using the EGit Eclipse Plugin with GitHub