Hi everyone,

I finally finished writing my ExtJS 4 book a couple of months ago and now the book was already uploaded to the printers. Just waiting to be published!

Meanwhile, you can check out a sample chapter. It is chapter 04, and it is about charts.

You can buy the book at the publisher’s website or amazon.com

I hope you enjoy it!

ExtJS 4 First Look – book – sample chapter: Upgraded Charts

This tutorial will walk you throughout how to save and load an image from database (MySQL) using Hibernate.

Requirements

For this sampel project, we are going to use:

• Eclipse IDE (you can use your favorite IDE);
• MySQL (you can use any other database, make sure to change the column type if required);
• Hibernate jars and dependencies (you can download the sample project with all required jars);
• JUnit - for testing (jar also included in the sample project).

PrintScreen

When we finish implementing this sample projeto, it should look like this:

Database Model

Before we get started with the sample projet, we have to run this sql script into MySQL:

DROP SCHEMA IF EXISTS `blog` ;
CREATE SCHEMA IF NOT EXISTS `blog` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci ;
USE `blog` ;

-- -----------------------------------------------------
-- Table `blog`.`BOOK`
-- -----------------------------------------------------
DROP TABLE IF EXISTS `blog`.`BOOK` ;

CREATE  TABLE IF NOT EXISTS `blog`.`BOOK` (
  `BOOK_ID` INT NOT NULL AUTO_INCREMENT ,
  `BOOK_NAME` VARCHAR(45) NOT NULL ,
  `BOOK_IMAGE` MEDIUMBLOB NOT NULL ,
  PRIMARY KEY (`BOOK_ID`) )
ENGINE = InnoDB;

This script will create a table BOOK, which we are going to use in this tutorial.

Book POJO

We are going to use a simple POJO in this project. A Book has an ID, a name and an image, which is represented by an array of bytes.

As we are going to persist an image into the database, we have to use the BLOB type. MySQLhas some variations of BLOBs, you can check the difference between them here. In this example, we are going to use the Medium Blob, which can store L + 3 bytes, where L < 2^24.

Make sure you do not forget to add the column definition on the Column annotation.

package com.loiane.model;

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

@Entity
@Table(name="BOOK")
public class Book {

	@Id
	@GeneratedValue
	@Column(name="BOOK_ID")
	private long id;

	@Column(name="BOOK_NAME", nullable=false)
	private String name;

	@Lob
	@Column(name="BOOK_IMAGE", nullable=false, columnDefinition="mediumblob")
	private byte[] image;

	public long getId() {
		return id;
	}

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

	public String getName() {
		return name;
	}

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

	public byte[] getImage() {
		return image;
	}

	public void setImage(byte[] image) {
		this.image = image;
	}
}

Hibernate Config

This configuration file contains the required info used to connect to the database.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-configuration PUBLIC
		"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
		"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
    <session-factory>
        <property name="hibernate.connection.driver_class">com.mysql.jdbc.Driver</property>
        <property name="hibernate.connection.url">jdbc:mysql://localhost/blog</property>
        <property name="hibernate.connection.username">root</property>
        <property name="hibernate.connection.password">root</property>
        <property name="hibernate.dialect">org.hibernate.dialect.MySQLDialect</property>
    	<property name="connection.pool_size">1</property>
    	<property name="show_sql">true</property>
    </session-factory>
</hibernate-configuration>

Hibernate Util

The HibernateUtil class helps in creating the SessionFactory from the Hibernate configuration file.

package com.loiane.hibernate;

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

import com.loiane.model.Book;

public class HibernateUtil {

	private static final SessionFactory sessionFactory;

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

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

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

DAO

In this class, we created two methods: one to save a Book instance into the database and another one to load a Book instance from the database.

package com.loiane.dao;

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

import com.loiane.hibernate.HibernateUtil;
import com.loiane.model.Book;

public class BookDAOImpl {

	/**
	 * Inserts a row in the BOOK table.
	 * Do not need to pass the id, it will be generated.
	 * @param book
	 * @return an instance of the object Book
	 */
	public Book saveBook(Book book)
	{
		Session session = HibernateUtil.getSessionFactory().openSession();
		Transaction transaction = null;
		try {
			transaction = session.beginTransaction();
			session.save(book);
			transaction.commit();
		} catch (HibernateException e) {
			transaction.rollback();
			e.printStackTrace();
		} finally {
			session.close();
		}
		return book;
	}

	/**
	 * Delete a book from database
	 * @param bookId id of the book to be retrieved
	 */
	public Book getBook(Long bookId)
	{
		Session session = HibernateUtil.getSessionFactory().openSession();
		try {
			Book book = (Book) session.get(Book.class, bookId);
			return book;
		} catch (HibernateException e) {
			e.printStackTrace();
		} finally {
			session.close();
		}
		return null;
	}
}

Test

To test it, first we need to create a Book instance and set an image to the image attribute. To do so, we need to load an image from the hard drive, and we are going to use the one located in the images folder. Then we can call the DAO class and save into the database.

Then we can try to load the image. Just to make sure it is the same image we loaded, we are going to save it in the hard drive.

package com.loiane.test;

import static org.junit.Assert.assertNotNull;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;

import org.junit.AfterClass;
import org.junit.BeforeClass;
import org.junit.Test;

import com.loiane.dao.BookDAOImpl;
import com.loiane.model.Book;

public class TestBookDAO {

	private static BookDAOImpl bookDAO;

	@BeforeClass
	public static  void runBeforeClass() {
		bookDAO = new BookDAOImpl();
	}

	@AfterClass
	public static void runAfterClass() {
		bookDAO = null;
	}

	/**
	 * Test method for {@link com.loiane.dao.BookDAOImpl#saveBook()}.
	 */
	@Test
	public void testSaveBook() {

		//File file = new File("images\\extjsfirstlook.jpg"); //windows
		File file = new File("images/extjsfirstlook.jpg");
        byte[] bFile = new byte[(int) file.length()];

        try {
	        FileInputStream fileInputStream = new FileInputStream(file);
	        fileInputStream.read(bFile);
	        fileInputStream.close();
        } catch (Exception e) {
	        e.printStackTrace();
        }

        Book book = new Book();
        book.setName("Ext JS 4 First Look");
        book.setImage(bFile);

        bookDAO.saveBook(book);

        assertNotNull(book.getId());
	}

	/**
	 * Test method for {@link com.loiane.dao.BookDAOImpl#getBook()}.
	 */
	@Test
	public void testGetBook() {

		Book book = bookDAO.getBook((long) 1);

		assertNotNull(book);

		try{
        	//FileOutputStream fos = new FileOutputStream("images\\output.jpg");  //windows
        	FileOutputStream fos = new FileOutputStream("images/output.jpg");
            fos.write(book.getImage());
            fos.close();
        }catch(Exception e){
        	e.printStackTrace();
        }
	}
}

To verify if it was really saved, let’s check the table Book:

and if we right click…

and choose to see the image we just saved, we will see it:

Source Code Download

You can download the complete source code (or fork/clone the project – git) from:

Github: https://github.com/loiane/hibernate-image-example

BitBucket: https://bitbucket.org/loiane/hibernate-image-example/downloads

Happy Coding!

This screencast will walk you through how to set up Eclipse IDE for Ext JS 4 development with Spekt Eclipse plugin. It demonstrates how to enable the autocomplete feature on Eclipse or Aptana

I wrote a tutorial about it a while ago, but it demonstrates how to configure Spket with Ext JS 3. This is an updated tutorial for Ext JS 4.

Spket: Setting up Eclipse IDE for Ext JS 4 development from Loiane Groner on Vimeo.

This is a new category on my blog. On the next screencasts I will try to say something instead of writing! Hope you liked it!

Happy Coding!

This tutorial will walk through out how to add a tooltip to a Grid Header. This feature is not natively supported by Ext JS 4 API. Fortunately,  there is a third-party plugin we can use to do it.

To get started, I created a JavaScript project on Eclipse IDE and it looks like this:

Plugin Code

The first thing we have to add (after Ext JS 4 SDK) is the plugin. To do so, I created a folder ux (for plugins) and a folder called grid (inside ux) because it is a plugin for Ext 4 grid. Then I created a file name HeaderToolTip.js with the following content:

/**
 * @class Ext.ux.grid.HeaderToolTip
 * @namespace ux.grid
 *
 *  Text tooltips should be stored in the grid column definition
 *
 *  Sencha forum url:
 *  http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip
 */
Ext.define('Ext.ux.grid.HeaderToolTip', {
    alias: 'plugin.headertooltip',
    init : function(grid) {
        var headerCt = grid.headerCt;
        grid.headerCt.on("afterrender", function(g) {
            grid.tip = Ext.create('Ext.tip.ToolTip', {
                target: headerCt.el,
                delegate: ".x-column-header",
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    beforeshow: function(tip) {
                        var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id  +']');
                        if (c  && c.tooltip)
                            tip.update(c.tooltip);
                        else
                            return false;
                    }
                }
            });
        });
    }
});

Grid with Header Tooltip

Now we need to build the application code. To test, simply create a data grid:

Ext.Loader.setConfig({enabled: true});

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.ux.grid.HeaderToolTip'
]);

Ext.onReady(function() {

    var myData = [
        ['3m Co'],
        ['Alcoa Inc'],
        ['Altria Group Inc'],
        ['American Express Company'],
        ['American International Group, Inc.'],
        ['AT&T Inc.'],
        ['Boeing Co.'],
        ['Caterpillar Inc.'],
        ['Citigroup, Inc.'],
        ['E.I. du Pont de Nemours and Company'],
        ['Exxon Mobil Corp'],
        ['General Electric Company']
    ];

    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'}
        ],
        data: myData
    });

    Ext.create('Ext.grid.Panel', {
        store: store,
        plugins: ['headertooltip'],
        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company',
                tooltip: 'Some tooltip'
            }
        ],
        height: 200,
        width: 200,
        title: 'Grid with Header Tooltip',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        }
    });
});

On line 1, we have to enable the Ext.Loader so Ext can dynamic loading the files we need.

On lines 3-7 we declared the components we need to have loaded before loading our application. Note the Ext.ux.grid.HeaderTooltip.js is included as well. This way, Ext JS knows it has to look for a file called HeaderTooltip.js inside the folder ux/grid.

Then on line 35 we have to include the HeaderTooltip plugin as a plugin of the grid we want to display a header tooltip.

And finally, on line 42 we need to declared a column config called tooltip with the header tooltip we want to display.

HTML Page

Then we can create an HTML file we can run on a browser:

<html>
<head>
    <title>Grid with Header Tooltip</title>

    <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext4/ext-all.js"></script>

    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div id="grid-example" style="padding:20px;"></div>
</body>
</html>

And when we execute the application, we will get the following:

And it is done!

Disclaimer: I am not the author of this HeaderTooltip plugin. So if you get any errors, please contact the author of the plugin on Sencha Forum: http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip. I simply demonstrated how to use the plugin on this tutorial.

I’m using Ext JS 4.0.2a (open source version) on this project.

Download the Source Code:

You can download the source code from:

My github: https://github.com/loiane/extjs4-grid-header-tooltip

Happy Coding!

For Ext JS 3, I implemented a plugin called PagingToolbarResizer. However, ExtJS 4 introduced some changes on the API and the plugin does not work for this new version, so I ported it to Ext JS 4.

Download

The complete source code with a complete example of how to use it you can find in my github account: https://github.com/loiane/extjs4-ux-paging-toolbar-resizer

Demo

Working demo: http://loianegroner.com/extjs/examples/extjs4-ux-paging-toolbar-resizer/

How to use it

To use it, is is very simple. Simply place the ux folder in your project and call the plugin like the following:

bbar: Ext.create('Ext.PagingToolbar', {
    store: store,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: "No topics to display",
    items:[
		'-', {
		text: 'Show Preview',
		pressed: pluginExpanded,
		enableToggle: true,
		toggleHandler: function(btn, pressed) {
			var preview = Ext.getCmp('gv').getPlugin('preview');
			preview.toggleExpanded(pressed);
		}
    }],
    plugins : [new Ext.create('Ext.ux.PagingToolbarResizer',{options : [ 5, 10, 15, 20, 25 ]})]
})

And then you will have a combobox with some paging values available on the Ext JS Grid Paging Toolbar.

Happy coding!

Ext JS 4 reorganized the API packages names and as a consequence, some classes has a new class name now. The Ext JS 3 class names are still valid in Ext JS 4, but when we are migrating an app from Ext JS 3 to Ext JS 4, it is recommended to change the class name as well.

That being said, I created a simple application where you can quickly search for a Ext JS 3 class name and find its correspondent Ext JS 4 class name. This application contains only the classes which name have  changed.

I hope this can help someone.

And I am open for suggestions to improve this app.

Link: http://loianegroner.com/extjs/examples/ext4-ext3-class-names/

Happy coding!

Ed Spencer created a plugin that is capable of creating a print version of an ExtJS grid. This plugin was originally created for ExtJS 3.x. I ported it to ExtJS 4, in case someone need it.

The plugin can be downloaded on the following link: https://github.com/loiane/extjs4-ux-gridprinter/archives/master

The zip file contains the source code of the plugin plus an example of how to use it. To run the example page, simply open it on any browser (you will need an internet connection).

To use the plugin in your project, copy the ux folder and paste it on your project, as the following sample project I created:

Plugin Code:

/**
 * @class Ext.ux.grid.Printer
 * @author Ed Spencer (edward@domine.co.uk)
 * Helper class to easily print the contents of a grid. Will open a new window with a table where the first row
 * contains the headings from your column model, and with a row for each item in your grid's store. When formatted
 * with appropriate CSS it should look very similar to a default grid. If renderers are specified in your column
 * model, they will be used in creating the table. Override headerTpl and bodyTpl to change how the markup is generated
 *
 * Usage:
 *
 * 1 - Add Ext.Require Before the Grid code
 * Ext.require([
 *   'Ext.ux.grid.GridPrinter',
 * ]);
 *
 * 2 - Declare the Grid
 * var grid = Ext.create('Ext.grid.Panel', {
 *   columns: //some column model,
 *   store   : //some store
 * });
 *
 * 3 - Print!
 * Ext.ux.grid.Printer.print(grid);
 *
 * Original url: http://edspencer.net/2009/07/printing-grids-with-ext-js.html
 *
 * Modified by Loiane Groner (me@loiane.com) - September 2011 - Ported to Ext JS 4
 * http://loianegroner.com (English)
 * http://loiane.com (Portuguese)
 */
Ext.define("Ext.ux.grid.Printer", {

	requires: 'Ext.XTemplate',

	statics: {
		/**
		 * Prints the passed grid. Reflects on the grid's column model to build a table, and fills it using the store
		 * @param {Ext.grid.Panel} grid The grid to print
		 */
		print: function(grid) {
			//We generate an XTemplate here by using 2 intermediary XTemplates - one to create the header,
			//the other to create the body (see the escaped {} below)
			var columns = grid.columns;

			//build a useable array of store data for the XTemplate
			var data = [];
			grid.store.data.each(function(item) {
				var convertedData = [];

				//apply renderers from column model
				for (var key in item.data) {
					var value = item.data[key];

					Ext.each(columns, function(column) {
						if (column.dataIndex == key) {
							convertedData[key] = column.renderer ? column.renderer(value) : value;
						}
					}, this);
				}

				data.push(convertedData);
			});

			//use the headerTpl and bodyTpl markups to create the main XTemplate below
			var headings = Ext.create('Ext.XTemplate', this.headerTpl).apply(columns);
			var body     = Ext.create('Ext.XTemplate', this.bodyTpl).apply(columns);

			var htmlMarkup = [
				'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
				'<html>',
				  '<head>',
				    '<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />',
				    '<link href="' + this.stylesheetPath + '" rel="stylesheet" type="text/css" media="screen,print" />',
				    '<title>' + grid.title + '</title>',
				  '</head>',
				  '<body>',
				    '<table>',
				      headings,
				      '<tpl for=".">',
				        body,
				      '</tpl>',
				    '</table>',
				  '</body>',
				'</html>'
			];

			var html = Ext.create('Ext.XTemplate', htmlMarkup).apply(data); 

			//open up a new printing window, write to it, print it and close
			var win = window.open('', 'printgrid');

			win.document.write(html);

			if (this.printAutomatically){
				win.print();
				win.close();
			}
		},

		/**
		 * @property stylesheetPath
		 * @type String
		 * The path at which the print stylesheet can be found (defaults to 'ux/grid/gridPrinterCss/print.css')
		 */
		stylesheetPath: 'ux/grid/gridPrinterCss/print.css',

		/**
		 * @property printAutomatically
		 * @type Boolean
		 * True to open the print dialog automatically and close the window after printing. False to simply open the print version
		 * of the grid (defaults to true)
		 */
		printAutomatically: true,

		/**
		 * @property headerTpl
		 * @type {Object/Array} values
		 * The markup used to create the headings row. By default this just uses <th> elements, override to provide your own
		 */
		headerTpl: [
			'<tr>',
				'<tpl for=".">',
					'<th>{text}</th>',
				'</tpl>',
			'</tr>'
		],

		/**
		 * @property bodyTpl
		 * @type {Object/Array} values
		 * The XTemplate used to create each row. This is used inside the 'print' function to build another XTemplate, to which the data
		 * are then applied (see the escaped dataIndex attribute here - this ends up as "{dataIndex}")
		 */
		bodyTpl: [
			'<tr>',
				'<tpl for=".">',
					'<td>\{{dataIndex}\}</td>',
				'</tpl>',
			'</tr>'
		]
	}
});

Usage:

To use the plugin you can create a button and in the handler function you can call the static function of the plugin (you need to pass a grid instance as argument to the print function).

Ext.Loader.setConfig({enabled: true});

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.ux.grid.Printer',
]);

Ext.onReady(function() {

    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
        ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
        ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
        ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
        ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
        ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
        ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
        ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
        ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
        ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
        ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
        ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
        ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
        ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
        ['McDonalds Corporation',               36.76, 0.86,  2.40,  '9/1 12:00am'],
        ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
        ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
        ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
        ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
        ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
        ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
        ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
    ];

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        stateId: 'stateGrid',
        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text     : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                text     : 'Change',
                width    : 75,
                sortable : true,
                renderer : change,
                dataIndex: 'change'
            },
            {
                text     : '% Change',
                width    : 75,
                sortable : true,
                renderer : pctChange,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            }
        ],
        height: 350,
        width: 600,
        title: 'Array Grid with Print Option',
        renderTo: Ext.getBody(),
        tbar: [{
            text: 'Print',
            iconCls: 'icon-print',
            handler : function(){
            	Ext.ux.grid.Printer.printAutomatically = false;
            	Ext.ux.grid.Printer.print(grid);
            }
        }]
    });
});

There are some options you can customize, such as the stylesheet path and the printAutomatically.

And when we execute the code above, we will get a grid with a print button like the following:

And when we click on the Print button, a new page will be opened with the following content:

Demo

Demo: http://loianegroner.com/extjs/examples/extjs4-ux-gridprinter/

Github repository: https://github.com/loiane/extjs4-ux-gridprinter

The original plugin (ExtJS 3.x) – by Ed Spencer:  http://edspencer.net/2009/07/printing-grids-with-ext-js.html

Happy Coding!

Sencha published on the Learning Center two User’s Guides about Ext Designer.

The first one is about how to use Ext Designer with Ext JS 3:

http://www.sencha.com/learn/ext-designer-for-ext-js-3-users-guide/

And the second one is about how to use Ext Designer with Ext JS 4:

http://www.sencha.com/learn/ext-designer-for-ext-js-4-users-guide/

Both user’s guides are in PDF format and you can download them on the links above.

Happy Coding!

Hi folks,

I’m very happy to announce that my book: ExtJS 4 First Look is released for pre order now.

The book is going to be out in November/2011. Currently is in review phase and I think they are going to release the RAW as well.

I’ve been working on this book since March, when Sencha released the Ext 4 preview version. If you follow me on twitter or follow the updates on my blog, you know I am in love with Ext JS.

This book has been a challenge for me, first because it is a book, it is huge deal; second because it is something new on the market (ExtJS has been on the market for a few years, but there is a lot of new cool features in Ext4), so I am studying a lot all these new features and third because I wrote the book in English, which is not my first language (I’m from Brazil, so my mother language is Portuguese-Brazil) . But so far did not get any complain from the editors about English errors (which is a big Yay for me!).

In my family, I’m part of the first generation that could go to college, so writing and publising a book in a foreign language is a super ultra mega huge deal, and my parents are very very proud. So is my husband, who was/is really patient through out all this process.

I also would like to thank everyone for the support and ideas for the book! Thank you very much!

Well, about the book: this is a book for developers who already know some Ext JS. This book highlights the new features from Ext JS 4, there are some example comparing how something was done in Ext 3 and how you should do in Ext 4. So if you do not have any knowledge about Ext JS, this is not the book for you.

The book is driven by examples. So to explain something, I present an example and a screenshot of the output of the code and then I explain what the code does. It is pretty much what I usually do here on my blog, but with more details.

I put so much work and love in this book and I hope you enjoy it. I can’t wait November to have a print edition on my hands!

Link for the book page: http://www.packtpub.com/ext-js-4-first-look/book

The book is also available at Amazon:

Happy Coding!

Update – January 2012:

For all people asking me when the book is going to be available: I got in touch with someone from Packt and they said to me they had an internal problema with the release of some books, including mine. Their answer is that the book is going to be published this month (January 2012 – I do not have the exact date). I apologize to everyone that already bought the book and did not get it yet.

But you have to understand that I am just the author of the book, I do not control the publishing process, these things are not up to me. I am also really hoping that this book is going to be published soon.

This is an example of how to use Ext JS 4 and JQuery in an application together.

To use Ext JS 4 with any JS frameowork is very simple: you need to import the js framework file (in this case JQuery ) and import Ext JS. ANd you are ready to develop with both frameworks!

It is very basic and simple, but I get some emails asking about it once in a while, so I thought it would be nice to share, in case you did not use both in a project together before.

Following is how the sample project structure looks like:

And this is the HTML page:

<html>
<head>
	<title>Ext JS 4 + JQuery</title>

	<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />

	<script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="ext4/ext-all.js"></script>
</head>
<body>
	<script type="text/javascript">
	Ext.onReady(function() {
		Ext.Msg.alert('Alert',$('#divId').text());

	});
	</script>
	<div id="divId" style="padding:20px;">Using Ext JS 4 + JQuery</div>
</body>
</html>

And the output will be:

Download the source code:

Github: https://github.com/loiane/extjs4-jquery

Google Code (zip file): https://code.google.com/p/extjs4-jquery/downloads/list

Happy Coding!

This tutorial will walk you through how to run a web application on Jetty webserver directly from Eclipse.

Requirements:

1. Install Jetty webserver
2. Install plugin Run-Jetty-Run on Eclipse

As I mentioned on the tutorials listed above, I am trying to use Jetty instead of Tomcat. In this post, I will show how it is easy to deploy a web applicationon Jetty directly from Eclipse.

Steps:

1 – Create a Dynamic Web Project (you can right click on the Project Explorer view or go to File -> New…):

2 – Give a name to the project and click on Next:

3 – Click on Next:

4 – Check the option Generate web.xml… and click on Finish:

5 – This is how the project will look like:

6 – Select the project and click on Run Button -> Run Configurations…

7 – Double click on Jetty Webapp. It will create a jetty project configuration under the Jetty Webapp with the project name. Click on Run:

8 – Wait for the server to start:

9 – Test your application!

I also recorded a video with the steps above:

See? It is very simple!

The sample project source code is also available on my github: https://github.com/loiane/test-jetty

Happy Coding!

This tutorial will walk you through out how to install Jetty on Eclipse, so you can run web applications on Jetty directly from Eclipse IDE.

As I mentioned on a previous post (Installing and running Jetty), I am trying to use Jetty instead of Tomcat. What I like about Tomcat is that Eclipse has native support to it. You can quickly go to the servers view and add a new Tomcat server instance in less than a minute. But Eclipse does not have native support to Jetty, and I did some research of how to do the same easy way with Jetty as well.

I found this plugin Run-Jetty-Run hosted on Google Code and it is very simple to use. So in this post I will show how to install it within Eclipse and in the next post I will show how it is easy to use.

There are two ways of installing a plugin on Eclipse now: using Eclipse Marketplace or the old way which is Install new Software.

Eclipse Marketplace

The link of Run-Jetty_run Plugin on Marketplace is: http://marketplace.eclipse.org/content/run-jetty-run

1 – Open Eclipse, go to the Help -> Eclipse Marketplace:

2 – Search for run-jetty-run and click on install:

3 – Confirm the installation of the plugin:

4 – Review and accept the licence and click on Finish:

5 – Wait while the plugin is being installed and then restart Eclipse.

Old way - Install new Software

1 – Open Eclipse, go to the Help -> Install new Software:

2 – Click on Add, then fill the form with Name:Jetty (or whatever you like) and Location: http://run-jetty-run.googlecode.com/svn/trunk/updatesite 

3 – Select the plugin and click on Next:

4 – Confirm the installation of the plugin:

5 – Review and accept the licence and click on Finish:

6 – Wait while the plugin is being installed and then restart Eclipse.

On next post, we will see how to use it.

Happy Coding!

This tutorial will walk you through out how to use the Ext JS 4 File Upload Field in the front end and Spring MVC 3 in the back end.

This tutorial is also an update for the tutorial Ajax File Upload with ExtJS and Spring Framework, implemented with Ext JS 3 and Spring MVC 2.5.

Ext JS File Upload Form

First, we will need the Ext JS 4 File upload form. This one is the same as showed in Ext JS 4 docs.

Ext.onReady(function(){

    Ext.create('Ext.form.Panel', {
        title: 'File Uploader',
        width: 400,
        bodyPadding: 10,
        frame: true,
        renderTo: 'fi-form',
        items: [{
            xtype: 'filefield',
            name: 'file',
            fieldLabel: 'File',
            labelWidth: 50,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Select a File...'
        }],

        buttons: [{
            text: 'Upload',
            handler: function() {
                var form = this.up('form').getForm();
                if(form.isValid()){
                    form.submit({
                        url: 'upload.action',
                        waitMsg: 'Uploading your file...',
                        success: function(fp, o) {
                            Ext.Msg.alert('Success', 'Your file has been uploaded.');
                        }
                    });
                }
            }
        }]
    });
});

HTML Page

Then in the HTML page, we will have a div where we are going to render the Ext JS form. This page also contains the required javascript imports:

<html>
<head>
<title>Spring FileUpload Example with ExtJS 4 Form</title>

	<!-- Ext JS Files -->
	<link rel="stylesheet" type="text/css" href="/extjs4-file-upload-spring/extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="/extjs4-file-upload-spring/extjs/bootstrap.js"></script>

	<!-- file upload form -->
	<script src="/extjs4-file-upload-spring/js/file-upload.js"></script>

</head>
<body>

	<p>Click on "Browse" button (image) to select a file and click on Upload button</p>

	<div id="fi-form" style="padding:25px;"></div>
</body>
</html>

FileUpload Bean

We will also need a FileUpload Bean to represent the file as a multipart file:

package com.loiane.model;

import org.springframework.web.multipart.commons.CommonsMultipartFile;

/**
 * Represents file uploaded from extjs form
 *
 * @author Loiane Groner
 * http://loiane.com
 * http://loianegroner.com
 */
public class FileUploadBean {

	private CommonsMultipartFile file;

	public CommonsMultipartFile getFile() {
		return file;
	}

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

File Upload Controller

Then we will need a controller. This one is implemented with Spring MVC 3.

package com.loiane.controller;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.loiane.model.ExtJSFormResult;
import com.loiane.model.FileUploadBean;

/**
 * Controller - Spring
 *
 * @author Loiane Groner
 * http://loiane.com
 * http://loianegroner.com
 */
@Controller
@RequestMapping(value = "/upload.action")
public class FileUploadController {

	@RequestMapping(method = RequestMethod.POST)
	public @ResponseBody String create(FileUploadBean uploadItem, BindingResult result){

		ExtJSFormResult extjsFormResult = new ExtJSFormResult();

		if (result.hasErrors()){
			for(ObjectError error : result.getAllErrors()){
				System.err.println("Error: " + error.getCode() +  " - " + error.getDefaultMessage());
			}

			//set extjs return - error
			extjsFormResult.setSuccess(false);

			return extjsFormResult.toString();
		}

		// Some type of file processing...
		System.err.println("-------------------------------------------");
		System.err.println("Test upload: " + uploadItem.getFile().getOriginalFilename());
		System.err.println("-------------------------------------------");

		//set extjs return - sucsess
		extjsFormResult.setSuccess(true);

		return extjsFormResult.toString();

}

Ext JS Form Return

Some people asked me how to return something to the form to display a message to the user. We can implement a POJO with a success property. The success property is the only thing Ext JS needs as a return:

package com.loiane.model;

/**
 * A simple return message for Ext JS
 *
 * @author Loiane Groner
 * http://loiane.com
 * http://loianegroner.com
 */
public class ExtJSFormResult {

	private boolean success;

	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}

	public String toString(){
		return "{success:"+this.success+"}";
	}
}

Spring Config

Don’t forget to add the multipart file config in the Spring config file:

    <!-- Configure the multipart resolver -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- one of the properties available; the maximum file size in bytes -->
        <property name="maxUploadSize" value="100000"/>
    </bean>

NullPointerException

I also got some questions about NullPointerException. Make sure the fileupload field name has the same name as the CommonsMultipartFile property in the FileUploadBean class:

ExtJS:

{
	xtype: 'filefield',
	name: 'file',
	fieldLabel: 'File',
	labelWidth: 50,
	msgTarget: 'side',
	allowBlank: false,
	anchor: '100%',
	buttonText: 'Select a File...'
}

Java:

public class FileUploadBean {

	private CommonsMultipartFile file;
}

These properties ALWAYS have to match!

You can still use the Spring MVC 2.5 code with the Ext JS 4 code presented in this tutorial.

Download

You can download the source code from my Github repository (you can clone the project or you can click on the download button on the upper right corner of the project page): https://github.com/loiane/extjs4-file-upload-spring

You can also download the source code form the Google Code repository: http://code.google.com/p/extjs4-file-upload-spring/

Both repositories have the same source. Google Code is just an alternative.

Happy Coding!

Last week I was at the Java 7 launch party in Sao Paulo, Brazil and it was really cool. There were a lot of developers on the party to celebrate Java 7 (afterall, we have been waiting for it for 5 years!).

I took some pictures at the event: http://www.flickr.com/photos/loiane/sets/72157627015952961/

Video of the event: http://blogs.oracle.com/java/entry/java_7_celebration_begins

Slides: http://blogs.oracle.com/darcy/resource/ProjectCoin/CoinLaunch.pdf

Anyways, I was really excited with the event and I went home and started to play with Java 7 language features.

As I will have to wait for Open JDK for Mac to be released, I had to play with it on Windows. You can download Java 7 here.

Another issue I found is Eclipse does not have native support for Java 7. They released a plugin, but it still beta. So I decided to play with NetBeans.

The current version of NetBeans is 7, and it already comes with native support to Java 7. If you install Java 7 and then install NetBeans, it will set Java 7 as the default JDK for development.

Then I created a Java Project on NetBeans but the source code was still compiling in Java 6. You have to make a small change to make it compile with Java 7.

All set and I started to play with some languages new features, aka Project Coin.

Strings in Switch:

In all examples, I tried first to write code as we usually do, and then convert the code to a Java 7 feature. The cool thing about NetBeans is it already have tips to convert the code.

First, will compare some Strings using if-else. NetBeans will popup a warning like this:

And if we accept the change, it will convert the code into this:

Following is the code:

Before:

 public void testStringInSwitch(String param){

        final String JAVA5 = "Java 5";
        final String JAVA6 = "Java 6";
        final String JAVA7 = "Java 7";

        if (param.equals(JAVA5)){
            System.out.println(JAVA5);
        } else if (param.equals(JAVA6)){
            System.out.println(JAVA6);
        } else if (param.equals(JAVA7)){
            System.out.println(JAVA7);
        }
    }

Java7:

 public void testStringInSwitch(String param){

        final String JAVA5 = "Java 5";
        final String JAVA6 = "Java 6";
        final String JAVA7 = "Java 7";

        switch (param) {
            case JAVA5:
                System.out.println(JAVA5);
                break;
            case JAVA6:
                System.out.println(JAVA6);
                break;
            case JAVA7:
                System.out.println(JAVA7);
                break;
        }
    }

Binary Literals:

Before:

public void testBinaryIntegralLiterals(){

        int binary = 8;

        if (binary == 8){
            System.out.println(true);
        } else{
            System.out.println(false);
        }
}

Java7:

 public void testBinaryIntegralLiterals(){

        int binary = 0b1000; //2^3 = 8

        if (binary == 8){
            System.out.println(true);
        } else{
            System.out.println(false);
        }
}

And if you try to declare a constant number in the code, NetBeans will warn you to convert it into a Binary Literal:

to

public void testUnderscoresNumericLiterals() {

        int oneMillion_ = 1_000_000;
        int oneMillion = 1000000;

        if (oneMillion_ == oneMillion){
            System.out.println(true);
        } else{
            System.out.println(false);
        }
    }

Underscore Between Literals:

public void testUnderscoresNumericLiterals() {

	int oneMillion_ = 1_000_000; //new
    int oneMillion = 1000000;

    if (oneMillion_ == oneMillion){
		System.out.println(true);
    } else{
        System.out.println(false);
    }
}

Diamond Syntax:

Before:

public void testDinamond(){

    List<String> list = new ArrayList<String>();
    Map<String, List<String>> map = new HashMap<String, List<String>>();
}

Java7:

public void testDinamond(){
    List<String> list = new ArrayList<>();
    Map<String, List<String>> map = new HashMap<>();
}

When we write code in Java 6 syntax, NetBeans will warn us to convert it into Java 7 Diamond Syntax:

To

Multi-Catch Similar Exceptions:

Before:

    public void testMultiCatch(){

        try {
            throw new FileNotFoundException("FileNotFoundException");
        } catch (FileNotFoundException fnfo) {
            fnfo.printStackTrace();
        } catch (IOException ioe) {
            ioe.printStackTrace();
   }

Java 7:

    public void testMultiCatch(){

        try {
            throw new FileNotFoundException("FileNotFoundException");
        } catch (FileNotFoundException | IOException fnfo) {
            fnfo.printStackTrace();
        }
    }

Same thing here. NetBeans will ask to convert the code into Java 7:

To

Try with Resources:

Before:

    public void testTryWithResourcesStatement() throws FileNotFoundException, IOException{

         FileInputStream in = null;
        try {
            in = new FileInputStream("java7.txt");

            System.out.println(in.read());

        } finally {
            if (in != null) {
                in.close();
            }
        }

    }

Java 7:

    public void testTryWithResourcesStatement() throws FileNotFoundException, IOException{

        try (FileInputStream in = new FileInputStream("java7.txt")) {

            System.out.println(in.read());

        }
    }

Same thing here:

To:

There is also varargs simplification, but I did not understand this one very well to code an example.

There are another features that were submited, but did not make it into this release:

• Elvis Operator
• List and Maps Index
• Collection Literals
• Null-Safe navigation

The code presented on this post is not only theory, I really ran it in my machine. You can get/download the NetBeans project from my github: https://github.com/loiane/Java7HelloWorld

A quick update: A DZone released today a RefCardz about NetBeans and Java 7 – it is a pdf and the download is free: http://refcardz.dzone.com/refcardz/netbeans-ide-7-programming

This tutorial will walk you through how to download, install and run Jetty – 100 % Java HTTP and Servlet Container.

If you do not know Jetty, Following is what Wikipedia says about it:

Jetty is a pure Java-based HTTP server and servlet container (Application server) developed as a free and open source project as part of the Eclipse Foundation. It is currently used in products such as ActiveMQ,^[1] Alfresco, ^[2] Apache Geronimo,^[3] Apache Maven, Google App Engine,^[4] Eclipse,^[5] FUSE,^[6] HP OpenView, JBoss,^[7] Liferay,^[8] Ubuntu, Twitter’s Streaming API^[9] and Zimbra.^[10] Jetty is also used as a standard Java application server by many open source projects such as Eucalyptus and Hadoop.

I am doing some experiments, and I decided to use Jetty instead of TomCat.

So let’s get this server up and running!

1 – Downloading

You can download Jetty from two sources: Eclipse or Codehaus.

1. http://jetty.codehaus.org/jetty/
2. http://www.eclipse.org/jetty/downloads.php

The current stable version is 7, so I downloaded this one from Eclipse page.

The compressed file is platform independent. So if you use Mac, Linux or Windows, that is ok, it will run on any OS.

2 – Installing

Simply uncompress the file to a directory. You should have something like this:

Installation is complete! Let’s get it running.

3 – Running Jetty

1. Open a terminal.
2. Go to the Jetty installation directory.
3. Enter the following command:

java -jar start.jar

Now open a browser and go to localhost to check if Jetty was installed sucessfully:

http://localhost:8080/

You should get a page like this:

And it is done!

Happy coding!

This tutorial will walk you through how to configure SSL (https://localhost:8443 access) on Tomcat in 5 minutes.

For this tutorial you will need:

• Java SDK (used version 6 for this tutorial)
• Tomcat (used version 7 for this tutorial)

The set up consists in 3 basic steps:

1. Create a keystore file using Java
2. Configure Tomcat to use the keystore
3. Test it
4. (Bonus ) Configure your app to work with SSL (access through https://localhost:8443/yourApp)

1 – Creating a Keystore file using Java

Fisrt, open the terminal on your computer and type:

Windows:

cd %JAVA_HOME%/bin

Linux or Mac OS:

cd $JAVA_HOME/bin

The $JAVA_HOME on Mac is located on “/System/Library/Frameworks/JavaVM.framework/Versions/{your java version}/Home/”

You will change the current directory to the directory Java is installed on your computer. Inside the Java Home directory, cd to the bin folder. Inside the bin folder there is a file named keytool. This guy is responsible for generating the keystore file for us.

Next, type on the terminal:

keytool -genkey -alias tomcat -keyalg RSA

When you type the command above, it will ask you some questions. First, it will ask you to create a password (My password is “password“):

loiane:bin loiane$ keytool -genkey -alias tomcat -keyalg RSA
Enter keystore password:  password
Re-enter new password: password
What is your first and last name?
  [Unknown]:  Loiane Groner
What is the name of your organizational unit?
  [Unknown]:  home
What is the name of your organization?
  [Unknown]:  home
What is the name of your City or Locality?
  [Unknown]:  Sao Paulo
What is the name of your State or Province?
  [Unknown]:  SP
What is the two-letter country code for this unit?
  [Unknown]:  BR
Is CN=Loiane Groner, OU=home, O=home, L=Sao Paulo, ST=SP, C=BR correct?
  [no]:  yes

Enter key password for
	(RETURN if same as keystore password):  password
Re-enter new password: password

It will create a .keystore file on your user home directory. On Windows, it will be on: C:\Documents and Settings\[username]; on Mac it will be on /Users/[username] and on Linux will be on /home/[username].

2 – Configuring Tomcat for using the keystore file – SSL config

Open your Tomcat installation directory and open the conf folder. Inside this folder, you will find the server.xml file. Open it.

Find the following declaration:

<!--
<Connector port="8443" protocol="HTTP/1.1" SSLEnabled="true"
    maxThreads="150" scheme="https" secure="true"
    clientAuth="false" sslProtocol="TLS" />
-->

Uncomment it and modify it to look like the following:

Connector SSLEnabled="true" acceptCount="100" clientAuth="false"
    disableUploadTimeout="true" enableLookups="false" maxThreads="25"
    port="8443" keystoreFile="/Users/loiane/.keystore" keystorePass="password"
    protocol="org.apache.coyote.http11.Http11NioProtocol" scheme="https"
    secure="true" sslProtocol="TLS" />

Note we add the keystoreFile, keystorePass and changed the protocol declarations.

3 – Let’s test it!

Start tomcat service and try to access https://localhost:8443. You will see Tomcat’s local home page.

Note if you try to access the default 8080 port it will be working too: http://localhost:8080

4 – BONUS - Configuring your app to work with SSL (access through https://localhost:8443/yourApp)

To force your web application to work with SSL, you simply need to add the following code to your web.xml file (before web-app tag ends):

<security-constraint>
	<web-resource-collection>
		<web-resource-name>securedapp</web-resource-name>
		<url-pattern>/*</url-pattern>
	</web-resource-collection>
	<user-data-constraint>
		<transport-guarantee>CONFIDENTIAL</transport-guarantee>
	</user-data-constraint>
</security-constraint>

The url pattern is set to /* so any page/resource from your application is secure (it can be only accessed with https). The transport-guarantee tag is set to CONFIDENTIAL to make sure your app will work on SSL.

If you want to turn off the SSL, you don’t need to delete the code above from web.xml, simply change CONFIDENTIAL to NONE.

Reference: http://tomcat.apache.org/tomcat-7.0-doc/ssl-howto.html (this tutorial is a little confusing, that is why I decided to write another one my own).

Happy Coding!

JaxB can handle Java.util.Date serialization, but it expects the following format: “yyyy-MM-ddTHH:mm:ss“. What if you need to format the date object in another format?

I had the same issue when I was working with Spring MVc 3 and Jackson JSON Processor, and recently, I faced the same issue working with Spring MVC 3 and JAXB for XML serialization.

Let’s digg into the issue:

Problem:

I have the following Java Beans which I want to serialize in XML using Spring MVC 3:

package com.loiane.model;

import java.util.Date;

public class Company {

	private int id;

	private String company;

	private double price;

	private double change;

	private double pctChange;

	private Date lastChange;

	//getters and setters

And I have another object which is going to wrap the POJO above:

package com.loiane.model;

import java.util.List;

import javax.xml.bind.annotation.XmlElement;
import javax.xml.bind.annotation.XmlRootElement;

@XmlRootElement(name="companies")
public class Companies {

	@XmlElement(required = true)
	private List<Company> list;

	public void setList(List<Company> list) {
		this.list = list;
	}
}

In my Spring controller, I’m going to return a List of Company through the the @ResponseBody annotation – which is going to serialize the object automatically with JaxB:

@RequestMapping(value="/company/view.action")
public @ResponseBody Companies view() throws Exception {}

When I call the controller method, this is what it returns to the view:

<companies>
	<list>
		<change>0.02</change>
		<company>3m Co</company>
		<id>1</id>
		<lastChange>2011-09-01T00:00:00-03:00</lastChange>
		<pctChange>0.03</pctChange>
		<price>71.72</price>
	</list>
	<list>
		<change>0.42</change>
		<company>Alcoa Inc</company>
		<id>2</id>
		<lastChange>2011-09-01T00:00:00-03:00</lastChange>
		<pctChange>1.47</pctChange>
		<price>29.01</price>
	</list>
</companies>

Note the date format. It is not the format I expect it to return. I need to serialize the date in the following format: “MM-dd-yyyy“

Solution:

I need to create a class extending the XmlAdapter and override the marshal and unmarshal methods and in these methods I am going to format the date as I need to:

package com.loiane.util;

import java.text.SimpleDateFormat;
import java.util.Date;

import javax.xml.bind.annotation.adapters.XmlAdapter;

public class JaxbDateSerializer extends XmlAdapter<String, Date>{

	private SimpleDateFormat dateFormat = new SimpleDateFormat("MM-dd-yyyy");

    @Override
    public String marshal(Date date) throws Exception {
        return dateFormat.format(date);
    }

    @Override
    public Date unmarshal(String date) throws Exception {
        return dateFormat.parse(date);
    }
}

And in my Java Bean class, I simply need to add the @XmlJavaTypeAdapter annotation in the get method of the date property.

package com.loiane.model;

import java.util.Date;

import javax.xml.bind.annotation.adapters.XmlJavaTypeAdapter;

import com.loiane.util.JaxbDateSerializer;

public class Company {

	private int id;

	private String company;

	private double price;

	private double change;

	private double pctChange;

	private Date lastChange;

	@XmlJavaTypeAdapter(JaxbDateSerializer.class)
	public Date getLastChange() {
		return lastChange;
	}
	//getters and setters
}

If we try to call the controller method again, it is going to return the following XML:

<companies>
	<list>
		<change>0.02</change>
		<company>3m Co</company>
		<id>1</id>
		<lastChange>09-01-2011</lastChange>
		<pctChange>0.03</pctChange>
		<price>71.72</price>
	</list>
	<list>
		<change>0.42</change>
		<company>Alcoa Inc</company>
		<id>2</id>
		<lastChange>09-01-2011</lastChange>
		<pctChange>1.47</pctChange>
		<price>29.01</price>
	</list>
</companies>

Problem solved!

Happy Coding!

Let’s explain each one with examples.

1 – First scenario: we want to retrieve all the articles from database with an optional filter: title. In other words, if user specify an article title, we are going to retrieve the articles that match with the title, otherwise we are going to retrieve all the articles from database. So we are going to implement a condition (if):

<select id="selectArticleByTitle" parameterType="com.loiane.model.Article"
	resultType="Article">
	SELECT id, title, author
	FROM article
	WHERE id_status = 1
	<if test="title != null">
		AND title LIKE #{title}
	</if>
</select>

2 – Second scenario: Now we have two optional filters: article title and author. The user can specify both, none or only one filter. So we are going to implement two conditions:

<select id="selectArticleByTitleAndAuthor" parameterType="com.loiane.model.Article"
	resultType="Article">
	SELECT id, title, author
	FROM article
	WHERE id_status = 1
	<if test="title != null">
		AND title LIKE #{title}
	</if>
	<if test="author != null">
		AND author LIKE #{author}
	</if>
</select>

3 – Third scenario: Now we want to give the user only one option: the user will have to specify only one of the following filters: title, author or retrieve all the articles from iBatis category. So we are going to use a Choose element:

<select id="selectArticleByTitleOrAuthorOrCategory"
	parameterType="com.loiane.model.Article" resultType="Article">
	SELECT id, title, author
	FROM article
	WHERE id_status = 1
	<choose>
		<when test="title != null">
			AND title LIKE #{title}
		</when>
		<when test="author != null">
			AND author LIKE #{author}
		</when>
		<otherwise>
			AND id_category = 3
		</otherwise>
	</choose>
</select>

4 – Fourth scenario: take a look at all three statements above. They all have a condition in common: WHERE id_status = 1. It means we are already filtering the active articles Let’s remove this condition to make it more interesting.

<select id="selectArticleByTitleAndAuthor" parameterType="com.loiane.model.Article"
	resultType="Article">
	SELECT id, title, author
	FROM article
	WHERE
	<if test="title != null">
		title LIKE #{title}
	</if>
	<if test="author != null">
		AND author LIKE #{author}
	</if>
</select>

What if both title and author are null? We are going to have the following statement:

SELECT id, title, author
FROM article
WHERE

And what if only the author is not null? We are going to have the fololwing statement:

SELECT id, title, author
FROM article
WHERE
AND author LIKE #{author}

And both FAILS!

How to fix it?

5 – Fifth scenario: we want to retrieve all the articles with two optional filters: title and author. To avoid the 4th scenatio, we are going to use a Where element:

<select id="selectArticleByTitleAndAuthorDynamic" parameterType="com.loiane.model.Article"
	resultType="Article">
	SELECT id, title, author
	FROM article
	<where>
		<if test="title != null">
			title LIKE #{title}
		</if>
		<if test="author != null">
			AND author LIKE #{author}
		</if>
	</where>
</select>

MyBatis has a simple answer that will likely work in 90% of the cases. And in cases where it doesn’t, you can customize it so that it does.

The where element knows to only insert “WHERE” if there is any content returned by the containing tags. Furthermore, if that content begins with “AND” or “OR”, it knows to strip it off.

If the where element does not behave exactly as you like, you can customize it by defining your own trim element. For example,the trim equivalent to the where element is:

<select id="selectArticleByTitleAndAuthorDynamic2" parameterType="com.loiane.model.Article"
	resultType="Article">
	SELECT id, title, author
	FROM article
	<trim prefix="WHERE" prefixOverrides="AND |OR ">
		<if test="title != null">
			title LIKE #{title}
		</if>
		<if test="author != null">
			AND author LIKE #{author}
		</if>
	</trim>
</select>

The overrides attribute takes a pipe delimited list of text to override, where whitespace is relevant. The result is the removal of anything specified in the overrides attribute, and the insertion of anything in the with attribute.

You can also use the Trim element with SET.

6 – Sixth scenario: the user will choose all the categories an article can belong to. So in this case, we have a list (a collection), and we have to interate this collection and we are going to use a foreach element:

<select id="selectArticleByListCategories" resultType="Article">
	SELECT id, title, author
	FROM article
	WHERE id_category IN
	<foreach item="category" index="index" collection="list" open="("
		separator="," close=")">
		#{category}
	</foreach>
</select>

The foreach element is very powerful, and allows you to specify a collection, declare item and index variables that can be used inside the body of the element. It also allows you to specify opening and closing strings, and add a separator to place in between iterations. The element is smart in that it won’t accidentally append extra separators.

Note: You can pass a List instance or an Array to MyBatis as a parameter object. When you do, MyBatis will automatically wrap it in a Map, and key it by name. List instances will be keyed to the name “list” and array instances will be keyed to the name “array”.

The complete Article.xml file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="Article">

    <select id="selectArticleByTitle" parameterType="com.loiane.model.Article"
     resultType="Article">
    	SELECT id, title, author
		FROM article
		WHERE id_status = 1
		<if test="title != null">
			AND title LIKE #{title}
		</if>
    </select>

    <select id="selectArticleByTitleAndAuthor" parameterType="com.loiane.model.Article"
     resultType="Article">
    	SELECT id, title, author
		FROM article
		WHERE id_status = 1
		<if test="title != null">
			AND title LIKE #{title}
		</if>
		<if test="author != null">
			AND author LIKE #{author}
		</if>
    </select>

    <select id="selectArticleByTitleOrAuthorOrCategory" parameterType="com.loiane.model.Article"
     resultType="Article">
    	SELECT id, title, author
		FROM article
		WHERE id_status = 1
		<choose>
			<when test="title != null">
				AND title LIKE #{title}
			</when>
			<when test="author != null">
				AND author LIKE #{author}
			</when>
			<otherwise>
				AND id_category = 3
			</otherwise>
		</choose>
    </select>

	 <select id="selectArticleByTitleAndAuthorDynamic" parameterType="com.loiane.model.Article"
     resultType="Article">
    	SELECT id, title, author
		FROM article
		<where>
			<if test="title != null">
				title LIKE #{title}
			</if>
			<if test="author != null">
				AND author LIKE #{author}
			</if>
		</where>
    </select>

    <select id="selectArticleByTitleAndAuthorDynamic2" parameterType="com.loiane.model.Article"
     resultType="Article">
    	SELECT id, title, author
		FROM article
		<trim prefix="WHERE" prefixOverrides="AND |OR ">
			<if test="title != null">
				title LIKE #{title}
			</if>
			<if test="author != null">
				AND author LIKE #{author}
			</if>
		</trim>
    </select>

    <select id="selectArticleByListCategories" resultType="Article">
    	SELECT id, title, author
		FROM article
		WHERE id_category IN
		<foreach item="category" index="index" collection="list"
			open="(" separator="," close=")">
			#{category}
		</foreach>
    </select>
</mapper>

This tutorial will walk you through how to setup iBatis (MyBatis) in a simple Java project and will present an example using a class constructor with arguments.

Pre-Requisites

For this tutorial I am using:

IDE: Eclipse (you can use your favorite one)
DataBase: MySQL
Libs/jars: Mybatis, MySQL conector and JUnit (for testing)

This is how your project should look like:

Sample Database

Please run the script into your database before getting started with the project implementation. You will find the script (with dummy data) inside the sql folder.

1 – POJO

I represented the beans here with a UML model, but you can download the complete source code in the end of this article.

As you can see, we do not have a default construtor in this class, only a constructor with some arguments. Some persistence frameworks requires a default constructor, but you have to be careful with your business logic.

Let’s say there are a couple of mandatory atributes in your class. Nothing is going to stop you if you do not set these atributes and try to insert, update on the database. And you problably will get an exception for that.

To prevent this kind of situation, you can create a constructor with the mandatory arguments. And ibatis/mybatis can handle this situation for you, because you do not need to create a default constructor.

2 – Blog Mapper – XML

While properties will work for most Data Transfer Object (DTO) type classes, and likely most of yourdomain model, there may be some cases where you want to use immutable classes. Often tables thatcontain reference or lookup data that rarely or never changes is suited to immutable classes.Constructor injection allows you to set values on a class upon instantiation, without exposing publicmethods. MyBatis also supports private properties and private JavaBeans properties to achieve this, butsome people prefer Constructor injection. The constructor element enables this.

In order to inject the results into the constructor, MyBatis needs to identify the constructor by the type of its parameters. Java has no way to introspect (or reflect) on parameter names. So when creating a constructor element, ensure that the arguments are in order, and that the data types are specified.

If you need, you can still map another attributes, such as association, collection in your resultMap.

Following is the Blog.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="Blog">

	<resultMap id="resultBlog" type="Blog">
		<constructor>
			<idArg column="id" javaType="int"/>
			<arg column="url" javaType="String"/>
		</constructor>
	    <result property="name"/>
    </resultMap>

    <select id="selectBlog" resultMap="resultBlog">
    	SELECT idBlog as id, name, url FROM BLOG
    </select>

</mapper>

3 - Blog Mapper – Annotations

We did the configuration in XML, now let’s try to use annotations to do the same thing we did using XML.

This is the code for BlogMapper.java:

package com.loiane.data;

import java.util.List;

import org.apache.ibatis.annotations.Arg;
import org.apache.ibatis.annotations.ConstructorArgs;
import org.apache.ibatis.annotations.Select;

import com.loiane.model.Blog;

public interface BlogMapper {

	/**
	 * Returns the list of all Blog instances from the database.
	 * @return the list of all Blog instances from the database.
	 */
	@Select("SELECT idBlog as id, name, url FROM BLOG ")
	@ConstructorArgs(value = {
        @Arg(column="id",javaType=Integer.class),
        @Arg(column="url",javaType=String.class)
    })
	List<Blog> selectAllBlogs();
}

Let’s take a look at the @ConstructorArgs and @Arg annotations:

@ConstructorArgs

Collects a group of results to be passed to a result object constructor.

Attributes: value, which is an array of Args.

Xml equivalent: constructor

@Arg

A single constructor argument that is part of a ConstructorArgs collection.

Attributes: id, column, javaType, jdbcType, typeHandler.

The id attribute is a boolean value that identifies the property to be used for comparisons, similar to the <idArg> XML element.

Xml equivalent: idArg, arg

We do not need to use the @Results annotation because the other attributes has the same name, so Mybatis knows how to map them.

Download

If you want to download the complete sample project, you can get it from my GitHub account: https://github.com/loiane/ibatis-constructor

If you want to download the zip file of the project, just click on download:

There are more articles about iBatis to come. Stay tooned!

Happy Coding!

Once again though, some may find this external definition of maps somewhat tedious. Thereforethere’s an alternative syntax for those that prefer a more concise mapping style. For example:

This tutorial will walk you through how to setup iBatis (MyBatis) in a simple Java project and will present examples using advanced result mapings, how to hadle mappings with association, collections, n+1 problem and will show how to configure these relationships using XML configuration and annotations.

Pre-Requisites

For this tutorial I am using:

IDE: Eclipse (you can use your favorite one)
DataBase: MySQL
Libs/jars: Mybatis, MySQL conector and JUnit (for testing)

This is how your project should look like:

Sample Database

Please run the script into your database before getting started with the project implementation. You will find the script (with dummy data) inside the sql folder.

1 – POJOs – Beans

I represented the beans here with a UML model, but you can download the complete source code in the end of this article.

The goal of this post is to demonstrate how to retrieve all the blog information from the database, but as you can see, the class Blog contains an association (Author) and a collection of Posts (and it contains a collection of Tags). And we are going to try to retrieve all this information at once.

So we are going to demonstrate One-to-one, one-to-many and many-to-many relationships using iBatis/Mybatis.

2 – Advanced Result Mapping

The result map on the code above is an advanced result mapping. As I already mentioned on previous posts, the resultMap element is the most important and powerful element in MyBatis.

MyBatis was created with one idea in mind: Databases aren’t always what you want or need them to be. While we’d love every database to be perfect 3rd normal form or BCNF, they aren’t. And it would be great if it was possible to have a single database map perfectly to all of the applications that use it, it’s not. Result Maps are the answer that MyBatis provides to this problem.

The resultMap element has a number of sub-elements and a structure worthy of some discussion. The following is a conceptual view of the resultMap element.

• constructor – used for injecting results into the constructor of a class upon instantiation
• id – an ID result; flagging results as ID will help improve overall performance
• result – a normal result injected into a field or JavaBean property
• association – a complex type association; many results will roll up into this type
• collection – a collection of complex types
• discriminator – uses a result value to determine which resultMap to use.

Best Practice: Always build ResultMaps incrementally. Unit tests really help out here. If you try to build a gigantic resultMap like the one above all at once, it’s likely you’ll get it wrong and it will be hard to work with. Start simple, and evolve it a step at a time. And unit test! The downside to using frameworks is that they are sometimes a bit of a black box (open source or not). Your best bet to ensure that you’re achieving the behaviour that you intend, is to write unit tests. It also helps to have them when submitting bugs.

Our goal is to write the following result map:

<resultMap id="resultBlog" type="Blog">
	<id property="id" column="idBlog" />
	<result property="name" column="blogname" />
	<result property="url" column="blogurl" />
	<association property="author" column="idBlog" javaType="Author"
		select="selectAuthor" />
	<collection property="posts" column="idBlog" javaType="ArrayList"
		ofType="Post" select="selectPosts" resultMap="resultTag" />
</resultMap>

But let’s take a step at the time. We are going to start retrieving only the Blog data, so our initial result map and query is going to look like this:

<resultMap id="resultBlog" type="Blog">
	<id property="id" column="idBlog" />
	<result property="name" column="blogname" />
	<result property="url" column="blogurl" />
</resultMap>

<select id="selectBlog" resultMap="resultBlog">
	SELECT idBlog, name as blogname, url as blogurl FROM BLOG
</select>

So far, so good. Let’s take another step.

Association

Now let’s also try to retrieve the Author data.

The association element deals with a “has-one” type relationship. For example, in our example, a Blog has one Author. An association mapping works mostly like any other result. You specify the target property, the column to retrieve the value from, the javaType of the property (which MyBatis can figure out most of the time), the jdbcType if necessary and a typeHandler if you want to override the retrieval of the result values.

Where the association differs is that you need to tell MyBatis how to load the association. MyBatis can do so in two different ways:

• Nested Select: By executing another mapped SQL statement that returns the complex type desired.
• Nested Results: By using nested result mappings to deal with repeating subsets of joined results.

We are going to take a look at the Nested Select first.

Here is our resultMap with Author association.

<resultMap id="resultBlog" type="Blog">
	<id property="id" column="idBlog" />
	<result property="name" column="blogname" />
	<result property="url" column="blogurl" />
	<association property="author" column="idBlog" javaType="Author"
		select="selectAuthor" />
</resultMap>

<select id="selectBlog" resultMap="resultBlog">
	SELECT idBlog, name as blogname, url as blogurl FROM BLOG
</select>

<select id="selectAuthor" parameterType="int" resultType="Author">
	SELECT idAuthor as id, name, email FROM AUTHOR WHERE idBlog = #{idBlog}
</select>

Take a look at the select=”selectAuthor” atribute. This means MyBatis is going to execute the author select statment to retrieve all the authors that belong to the blog. To make the relationship between blog and author we specify the column=”idBlog”, so we can filter the authors list.

Note that we set the javaType=”Author”. We are using an Alias (remember?). This is because the columns we are retrieving from database match with Author atributes, so we do not need to specify a resultMap for author.

That’s it. We have two select statements: one to load the Blog, the other to load the Author, and the Blog’s resultMap describes that the “selectAuthor” statement should be used to load its author property.

All other properties will be loaded automatically assuming their column and property names match.

While this approach is simple, it will not perform well for large data sets or lists. This problem is knownas the “N+1 Selects Problem”. In a nutshell, the N+1 selects problem is caused like this:

• You execute a single SQL statement to retrieve a list of records (the “+1”).
• For each record returned, you execute a select statement to load details for each (the “N”).

This problem could result in hundreds or thousands of SQL statements to be executed. This is notalways desirable.The upside is that MyBatis can lazy load such queries, thus you might be spared the cost of thesestatements all at once. However, if you load such a list and then immediately iterate through it toaccess the nested data, you will invoke all of the lazy loads, and thus performance could be very bad.

We are going to show how to avoid the N+1 Select Problem later.

Collection

We are retrieving Blog and Author information from database. So we have to retrieve the Post information now. And a Blog contains a list of Posts, and a Post contains a list of Tags. We are dealing with two relationships here: first one is a one-to-many (Blog-Post) and the second one is a many-to-many (Post-Tag). We are going to show you how to do it.

We are also going to use a Nested Select to retrieve Posts.

Let’s take a look at the resultMap with Post collection:

<resultMap id="resultBlog" type="Blog">
	<id property="id" column="idBlog" />
	<result property="name" column="blogname" />
	<result property="url" column="blogurl" />
	<association property="author" column="idBlog" javaType="Author"
		select="selectAuthor" />
	<collection property="posts" column="idBlog" javaType="ArrayList"
		ofType="Post" select="selectPosts" resultMap="resultTag" />
</resultMap>

The collection element works almost identically to the association. In fact, it’s so similar, to document the similarities would be redundant. So let’s focus on the differences.To continue with our example above, a Blog only had one Author. But a Blog has many Posts.

To map a set of nested results to a List like this, we use the collection element. Just like the association element, we can use a nested select, or nested results from a join.

There are a number things you’ll notice immediately, but for the most part it looks very similar to the association element we learned about above. First, you’ll notice that we’re using the collection element. Then you’ll notice that there’s a new “ofType” attribute. This attribute is necessary to distinguish between the JavaBean (or field) property type and the type that the collection contains.

To handle the Many-to-Many relationship between Post and Tag, we are also going to use a collection element, but we don’t need to use nested results for it:

<resultMap id="resultPosts" type="Post">
	<id property="id" column="idPost" />
	<result property="title" column="title" />
	<collection property="tags" column="idPost" javaType="ArrayList"
		ofType="Tag" resultMap="resultTag" />
</resultMap>

<resultMap id="resultTag" type="Tag">
	<id property="id" column="idTag" />
	<result property="value" column="value" />
</resultMap>

<select id="selectPosts" parameterType="int" resultType="Post"
	resultMap="resultPosts">
	SELECT
	P.idPost as idPost, P.title as title,
	T.idTag as idTag, T.value as value
	FROM Post P
	left outer join Post_Tag PT on P.idPost = PT.idPost
	left outer join Tag T on PT.idTag = T.idTag
	WHERE P.idBlog = #{idBlog}
</select>

And we are done! Let’s see how the Blog.xml file looks like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="Blog">

	<resultMap id="resultBlog" type="Blog">
	    <id property="id" column="idBlog"/>
	    <result property="name" column="blogname"/>
	    <result property="url" column="blogurl"/>
	    <association property="author" column="idBlog" javaType="Author" select="selectAuthor"/>
	    <collection property="posts" column="idBlog" javaType="ArrayList" ofType="Post"
	    	select="selectPosts" resultMap="resultTag"/>
    </resultMap>

    <resultMap id="resultPosts" type="Post">
	    <id property="id" column="idPost"/>
	    <result property="title" column="title"/>
	    <collection property="tags" column="idPost" javaType="ArrayList" ofType="Tag"
	    	resultMap="resultTag"/>
    </resultMap>

	<resultMap id="resultTag" type="Tag">
    	<id property="id" column="idTag"/>
    	<result property="value" column="value"/>
    </resultMap>

    <select id="selectBlog" resultMap="resultBlog">
    	SELECT idBlog, name as blogname, url as blogurl FROM BLOG
    </select>

   <select id="selectAuthor" parameterType="int" resultType="Author">
   		SELECT idAuthor as id, name, email FROM AUTHOR WHERE idBlog = #{idBlog}
   </select>

   <select id="selectPosts" parameterType="int" resultType="Post" resultMap="resultPosts">
   		SELECT
			P.idPost as idPost, P.title as title,
		    T.idTag as idTag, T.value as value
		FROM Post P
      		left outer join Post_Tag PT on P.idPost = PT.idPost
		  	left outer join Tag T on PT.idTag = T.idTag
		WHERE P.idBlog = #{idBlog}
   </select>

</mapper>

Solution to N+1 Selects Problem

As you could read above, the N+1 Selects Problem can happen while you are retrieving data.

How to solve it?

Using Nested Results: By using nested result mappings to deal with repeating subsets of joined results.

What we have to do is to write a single query to retrieve all the data (Blog + Author + Posts + Tags), and hadle the mapping in a single ResultMapping.

Very Important: id elements play a very important role in Nested Result mapping. You should alwaysspecify one or more properties that can be used to uniquely identify the results. The truth is that MyBatis will still work if you leave it out, but at a severe performance cost. Choose as few properties as possible that can uniquely identify the result. The primary key is an obvious choice (even if composite).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="BlogBestPractice">

   <resultMap id="resultBlog" type="Blog">
	    <id property="id" column="idBlog"/>
	    <result property="name" column="blogName"/>
	    <result property="url" column="url"/>
	    <association property="author" column="idBlog" javaType="Author">
	    	<id property="id" column="idAuthor"/>
			<result property="name" column="authorName"/>
			<result property="email" column="email"/>
	    </association>
	    <collection property="posts" column="idBlog" javaType="ArrayList" ofType="Post">
	    	<id property="id" column="idPost"/>
	    	<result property="title" column="title"/>
	    	<collection property="tags" column="idBlog" javaType="ArrayList" ofType="Tag">
	    		<id property="id" column="idTag"/>
    			<result property="value" column="value"/>
	    	</collection>
	    </collection>
    </resultMap>

	<select id="selectBlogBestPractice" resultMap="resultBlog">
    	SELECT
		    B.idBlog as idBlog, B.name as blogName, B.url as url,
		    A.idAuthor as idAuthor, A.name as authorName, A.email as email ,
        	P.idPost as idPost, P.title as title,
		    T.idTag as idTag, T.value as value
		FROM BLOG as B
      		left outer join Author A on B.idBlog = A.idBlog
      		left outer join Post P on P.idBlog = B.idBlog
      		left outer join Post_Tag PT on P.idPost = PT.idPost
		  	left outer join Tag T on PT.idTag = T.idTag
    </select>

</mapper>

3 – BlogDAO

package com.loiane.dao;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.loiane.model.Blog;

public class BlogDAO {

	/**
	 * Returns the list of all Contact instances from the database.
	 * @return the list of all Contact instances from the database.
	 */
	@SuppressWarnings("unchecked")
	public List<Blog> select(){

		SqlSessionFactory sqlSessionFactory = MyBatisConnectionFactory.getSqlSessionFactory();
		SqlSession session = sqlSessionFactory.openSession();

		try {
			List<Blog> list = session.selectList("Blog.selectBlog");
			return list;
		} finally {
			session.close();
		}
	}

	/**
	 * Returns the list of all Contact instances from the database avoiding the N + 1
	 * problem
	 * @return the list of all Contact instances from the database.
	 */
	@SuppressWarnings("unchecked")
	public List<Blog> selectN1ProblemSolution(){

		SqlSessionFactory sqlSessionFactory = MyBatisConnectionFactory.getSqlSessionFactory();
		SqlSession session = sqlSessionFactory.openSession();

		try {
			List<Blog> list = session.selectList("BlogBestPractice.selectBlogBestPractice");
			return list;
		} finally {
			session.close();
		}
	}
}

4 – Annotations

package com.loiane.data;

import java.util.List;

import org.apache.ibatis.annotations.Many;
import org.apache.ibatis.annotations.One;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;

import com.loiane.model.Author;
import com.loiane.model.Blog;
import com.loiane.model.Post;

public interface BlogMapper {

	final String SELECT_POSTS = "SELECT  P.idPost as idPost, P.title as title, T.idTag as idTag, T.value as value " +
			"FROM Post P left outer join Post_Tag PT on P.idPost = PT.idPost " +
			"left outer join Tag T on PT.idTag = T.idTag WHERE P.idBlog = #{idBlog}";

	/**
	 * Returns the list of all Blog instances from the database.
	 * @return the list of all Blog instances from the database.
	 */
	@Select("SELECT idBlog, name as blogname, url as blogurl FROM BLOG")
	@Results(value = {
		@Result(property="id", column="idBlog"),
		@Result(property="name", column="blogname"),
		@Result(property="url", column="blogurl"),
		@Result(property="author", column="idBlog", javaType=Author.class, one=@One(select="selectAuthor")),
		@Result(property="posts", column="idBlog", javaType=List.class, many=@Many(select="selectBlogPosts"))
	})
	List<Blog> selectAllBlogs();

	/**
	 * Returns the list of all Author instances from the database of a Blog
	 * @param idBlog
	 * @return the list of all Author instances from the database of a Blog
	 */
	@Select("SELECT idAuthor as id, name, email FROM AUTHOR WHERE idBlog = #{idBlog}")
	Author selectAuthor(String idBlog);

	/**
	 * Returns the list of all Post instances from the database of a Blog
	 * @param idBlog
	 * @return the list of all Post instances from the database of a Blog
	 */
	@Select(SELECT_POSTS)
	@Results(value = {
		@Result(property="id", column="idPost"),
		@Result(property="title", column="title"),
		@Result(property="tags", column="idPost", javaType=List.class, many=@Many)
	})
	List<Post> selectBlogPosts(String idBlog);

}

@Result

A single result mapping between a column and a property or field.

Attributes: id, column, property, javaType, jdbcType, typeHandler, one, many.

The id attribute is a boolean value that indicates that the property should be used for comparisons (similar to <id> in the XML mappings).

The one attribute is for single associations, similar to <association>, and the many attribute is for collections, similar to <collection>. They are named as they are to avoid class naming conflicts.

@One

A mapping to a single property value of a complex type.

Attributes: select, which is the fully qualified name of a mapped statement (i.e. mapper method) that can load an instance of the appropriate type.

Note: You will notice that join mapping is not supported via the Annotations API. This is due to the limitation in Java Annotations that does not allow for circular references.

@Many

A mapping to a collection property of a complex types.

Attributes: select, which is the fully qualified name of a mapped statement (i.e. mapper method) that can load a collection of instances of the appropriate types.

Note: You will notice that join mapping is not supported via the Annotations API. This is due to the limitation in Java Annotations that does not allow for circular references.

5 – SqlMapConfig.xml

This is how our SqlMapConfig.xml looks like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
	PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>

	<typeAliases>
		<typeAlias alias="Blog" type="com.loiane.model.Blog"/>
		<typeAlias alias="Author" type="com.loiane.model.Author"/>
		<typeAlias alias="Post" type="com.loiane.model.Post"/>
		<typeAlias alias="Tag" type="com.loiane.model.Tag"/>
	</typeAliases>

	<environments default="development">
		<environment id="development">
		  <transactionManager type="JDBC"/>
			<dataSource type="POOLED">
				<property name="driver" value="com.mysql.jdbc.Driver"/>
				<property name="url" value="jdbc:mysql://localhost:3306/blog_ibatis"/>
				<property name="username" value="root"/>
				<property name="password" value="root"/>
			</dataSource>
	   </environment>
	</environments>

    <mappers>
  	   <mapper resource="com/loiane/data/Blog.xml"/>
  	   <mapper resource="com/loiane/data/BlogBestPractice.xml"/>
    </mappers>

</configuration>

6 - MyBatisConnectionFactory

package com.loiane.dao;

import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.Reader;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import com.loiane.data.BlogMapper;

public class MyBatisConnectionFactory {

	private static SqlSessionFactory sqlSessionFactory;

	static {

		try {

			String resource = "SqlMapConfig.xml";
			Reader reader = Resources.getResourceAsReader(resource);

			if (sqlSessionFactory == null) {
				sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);

				sqlSessionFactory.getConfiguration().addMapper(BlogMapper.class);
			}
		}

		catch (FileNotFoundException fileNotFoundException) {
			fileNotFoundException.printStackTrace();
		}
		catch (IOException iOException) {
			iOException.printStackTrace();
		}
	}

	public static SqlSessionFactory getSqlSessionFactory() {

		return sqlSessionFactory;
	}
}

Download

If you want to download the complete sample project, you can get it from my GitHub account: https://github.com/loiane/ibatis-handling-joins

If you want to download the zip file of the project, just click on download:

There are more articles about iBatis to come. Stay tooned!

Happy Coding!

This tutorial will walk you through how to setup iBatis (MyBatis) in a simple Java project and will present examples using simple insert, update, select and delete statements using annotations.

This is the third tutorial of the iBatis/MyBatis series, you can read the first 2 tutorials on the following links:

1. Introduction to iBatis (MyBatis), An alternative to Hibernate and JDBC
2. Getting Started with iBatis (MyBatis): XML Configuration

iBatis/ MyBatis 3 offers a new feature: annotations. But it lacks examples and documentation about annotations. I started to explore and read the MyBatis mailing list archive to write this tutorial.

Another thing you will notice is the limitation related to annotations. I am going to demonstrate some examples that you  can do with annotations in this tutorial. All the power of iBatis is in its XMl configuration.

So let’s play a little bit with annotations. It is much simpler and you can use it for simple queries in small projects. As I already mentioned, if you want something more complex, you will have to use XML configuration.

One more thing before we get started: this tutorial is the same as the previous one, but instead of XML, we are going to use annotations.

Pre-Requisites

For this tutorial I am using:

IDE: Eclipse (you can use your favorite one)
DataBase: MySQL
Libs/jars: Mybatis, MySQL conector and JUnit (for testing)

This is how your project should look like:

Sample Database

Please run this script into your database before getting started with the project implementation:

I will not post the sample database here again. You can get it from the previous post about iBatis or download this sample project. The files are the same.

1 – Contact POJO

We will create a POJO class first to respresent a contact with id, name, phone number and email address – same as previous post.

2 – ContactMapper

In this file, we are going to set up all the queries using annotations. It is the MyBatis-Interface for the SQLSessionFactory.

A mapper class is simply an interface with method definitions that match up against the SqlSession methods.

You can create some strings with the SQL code. Remember it has to be the same code as in XML Configuration.

package com.loiane.data;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Options;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import com.loiane.model.Contact;

public interface ContactMapper {

	final String SELECT_ALL = "SELECT * FROM CONTACT";
	final String SELECT_BY_ID = "SELECT * FROM CONTACT WHERE CONTACT_ID = #{id}";
	final String UPDATE = "UPDATE CONTACT SET CONTACT_EMAIL = #{email}, CONTACT_NAME = #{name}, CONTACT_PHONE = #{phone} WHERE CONTACT_ID = #{id}";
	final String UPDATE_NAME = "UPDATE CONTACT SET CONTACT_NAME = #{name} WHERE CONTACT_ID = #{id}";
	final String DELETE = "DELETE FROM CONTACT WHERE CONTACT_ID = #{id}";
	final String INSERT = "INSERT INTO CONTACT (CONTACT_EMAIL, CONTACT_NAME, CONTACT_PHONE) VALUES (#{name}, #{phone}, #{email})";

	/**
	 * Returns the list of all Contact instances from the database.
	 * @return the list of all Contact instances from the database.
	 */
	@Select(SELECT_ALL)
	@Results(value = {
		@Result(property="id", column="CONTACT_ID"),
		@Result(property="name", column="CONTACT_NAME"),
		@Result(property="phone", column="CONTACT_PHONE"),
		@Result(property="email", column="CONTACT_EMAIL")
	})
	List selectAll();

	/**
	 * Returns a Contact instance from the database.
	 * @param id primary key value used for lookup.
	 * @return A Contact instance with a primary key value equals to pk. null if there is no matching row.
	 */
	@Select(SELECT_BY_ID)
	@Results(value = {
		@Result(property="id"),
		@Result(property="name", column="CONTACT_NAME"),
		@Result(property="phone", column="CONTACT_PHONE"),
		@Result(property="email", column="CONTACT_EMAIL")
	})
	Contact selectById(int id);

	/**
	 * Updates an instance of Contact in the database.
	 * @param contact the instance to be updated.
	 */
	@Update(UPDATE)
	void update(Contact contact);

	/**
	 * Updates an instance of Contact in the database.
	 * @param name name value to be updated.
	 * @param id primary key value used for lookup.
	 */
	void updateName(@Param("name") String name, @Param("id") int id);

	/**
	 * Delete an instance of Contact from the database.
	 * @param id primary key value of the instance to be deleted.
	 */
	@Delete(DELETE)
	void delete(int id);

	/**
	 * Insert an instance of Contact into the database.
	 * @param contact the instance to be persisted.
	 */
	@Insert(INSERT)
	@Options(useGeneratedKeys = true, keyProperty = "id")
	void insert(Contact contact);
}

@Select

The @Select annotation is very simple. Let’s take a look at the first select statment of this class: selectAll. Note that you don’t need to use the mapping if your database table columns mach the name of the class atributes. I used different names to use the @Result annotation. If table columns match with atribute names, you don’t need to use the @Result annotation.

Not let’s take a look on the second method: selectById. Notice that we have a parameter. It is a simple parameter – easy to use when you have a single parameter.

@Update

Let’s say you want to update all the columns. You can pass the object as parameter and iBatis will do all the magic for you. Remember to mach the parameter name with the atribute name, otherwise iBatis can get confused,

Now let’s say you want to use 2 or 3 paramaters, and they don’t belong to an object. If you take a look at iBatis XML configuration you will see you have to set the option parameterType (remember?) and specify you parameter type in it, in another words, you can use only one parameter. If you are using annotation, you can use more than one parameter using the @Param annotation.

@Delete

The @Delete annotation is also very simple. It follows the previous rules related to parameters.

@Insert

The @Insert annotation also follows the rules related to parameters. You can use an object or use the @Param annotation to specify more than one parameter.

What about the generation key? Well, if your database supports auto generation key, you can set it up using annotations with the @Options annotation. You will need to specify the option useGeneratedKeys and keyProperty. If your database does not support auto generation key, sorry, but I still did not figure out how to do it (in last case, use can do it manually and then pass as parameter to your insert query).

3 – MyBatisConnectionFactory

Every MyBatis application centers around an instance of SqlSessionFactory. A SqlSessionFactory instance can be acquired by using the SqlSessionFactoryBuilder. SqlSessionFactoryBuilder can build a SqlSessionFactory instance from an XML configuration file, of from a custom prepared instance of the Configuration class.

An observation about this file: on the previous example, we set the mappers on the iBatis Configuration XML file. Using annotations, we will set the mapper manually. In a future example, I’ll show you how to work with XML and Annotations together.

package com.loiane.dao;

import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.Reader;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import com.loiane.data.ContactMapper;

public class MyBatisConnectionFactory {

	private static SqlSessionFactory sqlSessionFactory;

	static {

		try {

			String resource = "SqlMapConfig.xml";
			Reader reader = Resources.getResourceAsReader(resource);

			if (sqlSessionFactory == null) {
				sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);

				sqlSessionFactory.getConfiguration().addMapper(ContactMapper.class);
			}
		}

		catch (FileNotFoundException fileNotFoundException) {
			fileNotFoundException.printStackTrace();
		}
		catch (IOException iOException) {
			iOException.printStackTrace();
		}
	}

	public static SqlSessionFactory getSqlSessionFactory() {

		return sqlSessionFactory;
	}

}

4 – ContactDAO

Now that we set up everything needed, let’s create our DAO. To call the sql statments, we need to do one more configuration, that is to set and get the mapper from the SqlSessionFactory. Then we just need to call the mapper method. It is a little bit different, but it does the same thing.

package com.loiane.dao;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.loiane.data.ContactMapper;
import com.loiane.model.Contact;

public class ContactDAO {

	private SqlSessionFactory sqlSessionFactory;

	public ContactDAO(){
		sqlSessionFactory = MyBatisConnectionFactory.getSqlSessionFactory();
	}

	/**
	 * Returns the list of all Contact instances from the database.
	 * @return the list of all Contact instances from the database.
	 */
	public List selectAll(){

		SqlSession session = sqlSessionFactory.openSession();

		try {

			ContactMapper mapper = session.getMapper(ContactMapper.class);
			List list = mapper.selectAll();

			return list;
		} finally {
			session.close();
		}
	}

	/**
	 * Returns a Contact instance from the database.
	 * @param id primary key value used for lookup.
	 * @return A Contact instance with a primary key value equals to pk. null if there is no matching row.
	 */
	public Contact selectById(int id){

		SqlSession session = sqlSessionFactory.openSession();

		try {

			ContactMapper mapper = session.getMapper(ContactMapper.class);
			Contact list = mapper.selectById(id);

			return list;
		} finally {
			session.close();
		}
	}

	/**
	 * Updates an instance of Contact in the database.
	 * @param contact the instance to be updated.
	 */
	public void update(Contact contact){

		SqlSession session = sqlSessionFactory.openSession();

		try {

			ContactMapper mapper = session.getMapper(ContactMapper.class);
			mapper.update(contact);

			session.commit();
		} finally {
			session.close();
		}
	}

	/**
	 * Updates an instance of Contact in the database.
	 * @param name name value to be updated.
	 * @param id primary key value used for lookup.
	 */
	public void updateName(String name, int id){

		SqlSession session = sqlSessionFactory.openSession();

		try {

			ContactMapper mapper = session.getMapper(ContactMapper.class);
			mapper.updateName(name, id);

			session.commit();
		} finally {
			session.close();
		}
	}

	/**
	 * Insert an instance of Contact into the database.
	 * @param contact the instance to be persisted.
	 */
	public void insert(Contact contact){

		SqlSession session = sqlSessionFactory.openSession();

		try {

			ContactMapper mapper = session.getMapper(ContactMapper.class);
			mapper.insert(contact);

			session.commit();
		} finally {
			session.close();
		}
	}

	/**
	 * Delete an instance of Contact from the database.
	 * @param id primary key value of the instance to be deleted.
	 */
	public void delete(int id){

		SqlSession session = sqlSessionFactory.openSession();

		try {

			ContactMapper mapper = session.getMapper(ContactMapper.class);
			mapper.delete(id);

			session.commit();
		} finally {
			session.close();
		}
	}
}

5 – Mapper Configuration File

The MyBatis XML configuration file contains settings and properties that have a dramatic effect on how MyBatis behaves.

This time, we do not need to configure alias or xml config files. We did all the magic with annotations, so we have a simple config file with only the information about the database we want to connect with.

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

Download

I suggest you to take a look at the org.apache.ibatis.annotations package and try to find out what each annotation can do. Unfortunatelly, you won’t find much documentation or examples on MyBatis website.

I also created a TestCase class. If you want to download the complete sample project, you can get it from my GitHub account: https://github.com/loiane/ibatis-annotations-helloworld

If you want to download the zip file of the project, just click on download:

There are more articles about iBatis to come. Stay tooned!

In next articles, I’m going to demonstrate how to implement the feature using XML and then Annotations (when it is possible).

Happy Coding!

This tutorial will walk you through how to setup iBatis (MyBatis) in a simple Java project and will present examples using simple insert, update, select and delete statements.

Pre-Requisites

For this tutorial I am using:

IDE: Eclipse (you can use your favorite one)
DataBase: MySQL
Libs/jars: Mybatis, MySQL conector and JUnit (for testing)

This is how your project should look like:

Sample Database

Please run this script into your database before getting started with the project implementation:

DROP TABLE IF EXISTS `blog`.`contact`;
CREATE TABLE  `blog`.`contact` (
  `CONTACT_ID` int(11) NOT NULL AUTO_INCREMENT,
  `CONTACT_EMAIL` varchar(255) NOT NULL,
  `CONTACT_NAME` varchar(255) NOT NULL,
  `CONTACT_PHONE` varchar(255) NOT NULL,
  PRIMARY KEY (`CONTACT_ID`)
)
ENGINE=InnoDB;

insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact0','(000) 000-0000', 'contact0@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact1', '(000) 000-0000', 'contact1@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact2', '(000) 000-0000', 'contact2@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact3', '(000) 000-0000', 'contact3@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact4', '(000) 000-0000', 'contact4@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact5', '(000) 000-0000', 'contact5@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact6', '(000) 000-0000', 'contact6@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact7', '(000) 000-0000', 'contact7@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact8', '(000) 000-0000', 'contact8@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact9', '(000) 000-0000', 'contact9@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact10', '(000) 000-0000', 'contact10@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact11', '(000) 000-0000', 'contact11@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact12', '(000) 000-0000', 'contact12@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact13', '(000) 000-0000', 'contact13@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact14', '(000) 000-0000', 'contact14@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact15', '(000) 000-0000', 'contact15@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact16', '(000) 000-0000', 'contact16@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact17', '(000) 000-0000', 'contact17@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact18', '(000) 000-0000', 'contact18@loianetest.com');
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact19', '(000) 000-0000', 'contact19@loianetest.com');

1 – Contact POJO

We will create a POJO class first to respresent a contact with id, name, phone number and email address:

package com.loiane.model;

public class Contact {

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

	public Contact(int id, String name, String phone, String email) {
		super();
		this.id = id;
		this.name = name;
		this.phone = phone;
		this.email = email;
	}

	public Contact() {}

	//getters and setters
}

2 – Contact.xml

This is the iBatis/myBatis SQL map configuration file for Contact class. We are going to write all the SQL queries, map a query to object in this file – here is where all the magic happens!

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="Contact">

	<resultMap id="result" type="Contact">
	    <result property="id" column="CONTACT_ID"/>
	    <result property="name" column="CONTACT_NAME"/>
	    <result property="phone" column="CONTACT_PHONE"/>
	    <result property="email" column="CONTACT_EMAIL"/>
    </resultMap>

    <select id="getAll" resultMap="result">
    	SELECT * FROM CONTACT
    </select>

    <select id="getById" parameterType="int" resultMap="result">
    	SELECT * FROM CONTACT WHERE CONTACT_ID = #{id}
  	</select>

    <delete id="deleteById" parameterType="int">
    	DELETE from CONTACT WHERE CONTACT_ID = #{id};
    </delete>

    <insert id="insert" parameterType="Contact">
    INSERT INTO CONTACT (CONTACT_EMAIL, CONTACT_NAME, CONTACT_PHONE)
		VALUES (#{name}, #{phone}, #{email});
      <selectKey keyProperty="id" resultType="int" order="AFTER">
		select last_insert_id() as id
	  </selectKey>
    </insert>

	<update id="update" parameterType="Contact">
	  	UPDATE CONTACT
		SET
			CONTACT_EMAIL = #{email},
			CONTACT_NAME = #{name},
			CONTACT_PHONE = #{phone}
		WHERE CONTACT_ID = #{id};
  </update>

</mapper>

What this file contains:

• resultMap – The most complicated and powerful element that describes how to load your objects from the database result sets.
• insert – A mapped INSERT statement.
• update – A mapped UPDATE statement.
• delete – A mapped DELEETE statement.
• select – A mapped SELECT statement.

Result Map

The resultMap element is the most important and powerful element in MyBatis. It’s what allows you to do away with 90% of the code that JDBC requires to retrieve data from ResultSets, and in some cases allows you to do things that JDBC does not even support. In fact, to write the equivalent code for something like a join mapping for a complex statement could probably span thousands of lines of code. The design of the ResultMaps is such that simple statements don’t require explicit result mappings at all, and more complex statements require no more than is absolutely necessary to describe the relationships.

In this example, the name of the table column is different from the Contact class. That is why we have to map the column with the class property. If the column name is the same as the property, you do not need to use the column=”" option in the result map.

And remember that TypeAliases are your friend. Use them so that you don’t have to keep typing the fully qualified path of your class out. – we are going to set it in the myBatis main configuration file.

Select statment

The first select statment in this example is called “getAll“, and it means we are going to use this id to call the statment in DAO class. The other option we set is the resultMap, which we mapped to contact class, and it means the statment is going to return a list of contacts (List).

The second select statment in this example is called “getById“. We set a option called parameter of type int (or Integer) and it returns a object of type Contact. Notice the parameter notation #{id}. This tells MyBatis to create a PreparedStatement parameter. With JDBC, such a parameter would be identified by a “?” in SQL passed to a new PreparedStatement.

Delete Statment

The delete statment is also very simple. We set a parameter type called id (same thing as getById statment) so we can filter what it is going to be deleted.

Update Statment

In the update statement we ser a parameter of type Contact, which means we are going to pass a contact object as parameter to the update method in DAO class. Note the parameter notation #{name}, #{phone}, #{email} and #{id}. All the parameters must have the same name as contact properties, otherwise myBatis will not be able to map the object-parameters.

Insert Statment

Insert is a little bit more rich in that it has a few extra attributes and sub-elements that allow it to deal with key generation in a number of ways. First, if your database supports auto-generated key fields (e.g. MySQL and SQL Server), then you can simply set useGeneratedKeys=”true” and set the keyProperty to the target property and you’re done.

MyBatis has another way to deal with key generation for databases that don’t support auto-generated column types, or perhaps don’t yet support the JDBC driver support for auto-generated keys.

In this example, we are going to set manually the generated id in the object with the selectKey option. In this example, the selectKey would be run after the insert statment and with the last_insert_id() function we will get the last generated key (of type int) and set it to the id property.

3 – Mapper Configuration File

The MyBatis XML configuration file contains settings and properties that have a dramatic effect on how MyBatis behaves. The high level structure of the document is as follows:

• Configuration
  • properties
  • settings
  • typeAliases
  • typeHandlers
  • objectFactory
  • plugins
  • environments
    • environment
      • transactionManager
      • dataSource
• mappers

Hint: you have to follow the order above, otherwise you will get an exception.

The SqlMapConfig.xml from our project:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
	PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>

	<typeAliases>
		<typeAlias alias="Contact" type="com.loiane.model.Contact"/>
	</typeAliases>

	<environments default="development">
		<environment id="development">
		  <transactionManager type="JDBC"/>
			<dataSource type="POOLED">
				<property name="driver" value="com.mysql.jdbc.Driver"/>
				<property name="url" value="jdbc:mysql://localhost:3306/blog"/>
				<property name="username" value="root"/>
				<property name="password" value="root"/>
			</dataSource>
	   </environment>
	</environments>

    <mappers>
  	   <mapper resource="com/loiane/data/Contact.xml"/>
    </mappers>

</configuration>

Let’s take a look at the configuration properties we are using.

Type Aliases

A type alias is simply a shorter name for a Java type. It’s only relevant to the XML configuration and simply exists to reduce redundant typing of fully qualified classnames.

Remember we used Contact as type in the resultMap property in Contact.xml ()? This is a great help!

Environments

MyBatis can be configured with multiple environments. This helps you to apply your SQL Maps to multiple databases for any number of reasons. For example, you might have a different configuration for your Development, Test and Production environments. Or, you may have multiple production databases that share the same schema, and you’d like to use the same SQL maps for both. There are many use cases.

One important thing to remember though: While you can configure multiple environments, you can only choose ONE per SqlSessionFactory instance.

The default environment and the environment IDs are self explanatory. Name them whatever you like, just make sure the default matches one of them.

Transaction Manager

There are two TransactionManager types (i.e. type=”[JDBC|MANAGED]”) that are included with MyBatis:

JDBC – This configuration simply makes use of the JDBC commit and rollback facilities directly. It relies on the connection retrieved from the dataSource to manage the scope of the transaction.

MANAGED – This configuration simply does almost nothing. It never commits, or rolls back a connection. Instead, it lets the container manage the full lifecycle of the transaction (e.g. Spring or a JEE Application Server context). By default it does close the connection. However, some containers don’t expect this, and thus if you need to stop it from closing the connection, set the closeConnection property to false.

In this example we are going to use JDBC.

Data Source

The dataSource element configures the source of JDBC Connection objects using the standard JDBC DataSource interface.

• driver – This is the fully qualified Java class of the JDBC driver (NOT of the DataSource class if your driver includes one).
• url – This is the JDBC URL for your database instance.
• username – The database username to log in with.
• password – The database password to log in with.

4 – MyBatisConnectionFactory

Every MyBatis application centers around an instance of SqlSessionFactory. A SqlSessionFactory instance can be acquired by using the SqlSessionFactoryBuilder. SqlSessionFactoryBuilder can build a SqlSessionFactory instance from an XML configuration file, of from a custom prepared instance of the Configuration class.

package com.loiane.dao;

import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.Reader;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

public class MyBatisConnectionFactory {

	private static SqlSessionFactory sqlSessionFactory;

	static {
		try {

			String resource = "SqlMapConfig.xml";
			Reader reader = Resources.getResourceAsReader(resource);

			if (sqlSessionFactory == null) {
				sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);
			}
		}
		catch (FileNotFoundException fileNotFoundException) {
			fileNotFoundException.printStackTrace();
		}
		catch (IOException iOException) {
			iOException.printStackTrace();
		}
	}

	public static SqlSessionFactory getSqlSessionFactory() {

		return sqlSessionFactory;
	}
}

5 – ContactDAO

Now that we set up everything needed, let’s create our DAO. To call the sql statments, we need to call the namespace and the name of the SQl statment as follows:

package com.loiane.dao;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.loiane.model.Contact;

public class ContactDAO {

	private SqlSessionFactory sqlSessionFactory;

	public ContactDAO(){
		sqlSessionFactory = MyBatisConnectionFactory.getSqlSessionFactory();
	}

	/**
	 * Returns the list of all Contact instances from the database.
	 * @return the list of all Contact instances from the database.
	 */
	@SuppressWarnings("unchecked")
	public List<Contact> selectAll(){

		SqlSession session = sqlSessionFactory.openSession();

		try {
			List<Contact> list = session.selectList("Contact.getAll");
			return list;
		} finally {
			session.close();
		}
	}

	/**
	 * Returns a Contact instance from the database.
	 * @param id primary key value used for lookup.
	 * @return A Contact instance with a primary key value equals to pk. null if there is no matching row.
	 */
	public Contact selectById(int id){

		SqlSession session = sqlSessionFactory.openSession();

		try {
			Contact contact = (Contact) session.selectOne("Contact.getById",id);
			return contact;
		} finally {
			session.close();
		}
	}

	/**
	 * Updates an instance of Contact in the database.
	 * @param contact the instance to be updated.
	 */
	public void update(Contact contact){

		SqlSession session = sqlSessionFactory.openSession();

		try {
			session.update("Contact.update", contact);
			session.commit();
		} finally {
			session.close();
		}
	}

	/**
	 * Insert an instance of Contact into the database.
	 * @param contact the instance to be persisted.
	 */
	public void insert(Contact contact){

		SqlSession session = sqlSessionFactory.openSession();

		try {
			session.insert("Contact.insert", contact);
			session.commit();
		} finally {
			session.close();
		}
	}

	/**
	 * Delete an instance of Contact from the database.
	 * @param id primary key value of the instance to be deleted.
	 */
	public void delete(int id){

		SqlSession session = sqlSessionFactory.openSession();

		try {
			session.delete("Contact.deleteById", id);
			session.commit();
		} finally {
			session.close();
		}
	}
}

Download

If you want to learn more about the MyBatis configuration options, please read the User Guide. You will find everything you need there. All the quoted sentences are from the MyBatis 3 User Guid. I also used it as reference to implement this sample project.

I also created a TestCase class. If you want to download the complete sample project, you can get it from my GitHub account: https://github.com/loiane/ibatis-helloworld

If you want to download the zip file of the project, just click on download:

Next articles we are going to explore more iBatis/MyBatis options!

Happy Coding!

I started to write a new article series about iBatis/MyBatis. This is the first article and it will walk you through what is iBatis/MyBatis and why you should use it.

For those who does not know iBatis/MyBatis yet, it is a persistence framework – an alternative to JDBC and Hibernate, available for Java and .NET platforms. I’ve been working with it for almost two year, and I am enjoying it!

The fisrt thin you may notice in this and following articles about iBatis/MyBatis is that I am using iBatis and Mybatis terms. Why? Until June 2010, iBatis was under Apache license and since then, the framework founders decided to move it to Google Code and they renamed it to MyBatis. The framework is still the same though, only has a different name now.

I gathered some resources, so I am just going to quote them:

What is MyBatis/iBatis?

The MyBatis data mapper framework makes it easier to use a relational database with object-oriented applications. MyBatis couples objects with stored procedures or SQL statements using a XML descriptor. Simplicity is the biggest advantage of the MyBatis data mapper over object relational mapping tools.
To use the MyBatis data mapper, you rely on your own objects, XML, and SQL. There is little to learn that you don’t already know. With the MyBatis Data Mapper, you have the full power of both SQL and stored procedures at your fingertips.
(www.mybatis.org)

iBATIS is based on the idea that there is value in relational databases and SQL, and that it is a good idea to embrace the industrywide investment in SQL. We have experiences whereby the database and even the SQL itself have outlived the application source code, and even multiple versions of the source code. In some cases we have seen that an application was rewritten in a different language, but the SQL and database remained largely unchanged.

It is for such reasons that iBATIS does not attempt to hide SQL or avoid SQL. It is a persistence layer framework that instead embraces SQL by making it easier to work with and easier to integrate into modern object-oriented software. These days, there are rumors that databases and SQL threaten our object models, but that does not have to be the case. iBATIS can help to ensure that it is not.

(iBatis in Action book)

So…

What is iBatis ?

• A JDBC Framework
• Developers write SQL, iBATIS executes it using JDBC.
• No more try/catch/finally/try/catch.
• An SQL Mapper
• Automatically maps object properties to prepared statement parameters.
• Automatically maps result sets to objects.
• Support for getting rid of N+1 queries.
• A Transaction Manager
• iBATIS will provide transaction management for database operations if no other transaction manager is available.
• iBATIS will use external transaction management (Spring, EJB CMT, etc.) if available.
• Great integration with Spring, but can also be used without Spring (the Spring folks were early supporters of iBATIS).

What isn’t iBATIS ?

• An ORM
• Does not generate SQL
• Does not have a proprietary query language
• Does not know about object identity
• Does not transparently persist objects
• Does not build an object cache

Essentially, iBatis is a very lightweight persistence solution that gives you most of the semantics of an O/R Mapping toolkit, without all the drama. In other words ,iBATIS strives to ease the development of data-driven applications by abstracting the low-level details involved in database communication (loading a database driver, obtaining and managing connections, managing transaction semantics, etc.), as well as providing higher-level ORM capabilities (automated and configurable mapping of objects to SQL calls, data type conversion management, support for static queries as well as dynamic queries based upon an object’s state, mapping of complex joins to complex object graphs, etc.). iBATIS simply maps JavaBeans to SQL statements using a very simple XML descriptor. Simplicity is the key advantage of iBATIS over other frameworks and object relational mapping tools.(http://www.developersbook.com )

Who is using iBatis/MyBatis?

See the list in this link: http://www.apachebookstore.com/confluence/oss/pages/viewpage.action?pageId=25

I think the biggest case is MySpace, with millions of users. Very nice!

This was just an introduction, so in next articles I will show how to create an application using iBatis/Mybatis – step-by-step.

Enjoy!

Last month I published a blog post about the new OCP Java SE 6 Programmer Practice Exams book written by Kathy Sierra and Bert Bates. I bought this book on amazon and it took a month to get to where I live (Brazil).

Disclaimer: Neither the publisher or the authors sent me this book for review. I bought it with my own money and this is my honest opinion.

Motivation:

If you are studying to pass the OCJP exam, you must know the most famous OCJP/SCJP book: SCJP Sun Certified Programmer for Java 6 Exam 310-065 (also written by Kathy Sierra and Bert Bates). And you problably know that it is the best book to prepare your self to pass the OCJP exam.

However, studying theory is not enough to pass the exam. If you want to be successful, you have to practice (a lot), and this book is all about practicing.

And as it says on the book cover: “Don’t let the real test be your first test!”.

How the book is organized:

I liked the way the book is organized.

There are couple of chapters to test your knowledge called Self-Assessment and they also contain some study tips.

There are 4 chapters called Practice Exam, and they are a sample of real exams with multiple choice questions, “drag and drop” questions (kind of a complete the sentence question).

And there is also a chapter with study tips and exercises.

After each exam (Self-Assessment or Practice Exam) there is a quick answer key and then the explanation of the answer.

There is also the “Analysing your Results” section, where you can see if you are good to go or need more studying.

The book is organized in a great way. Fisrt the Self-Assessment chapters, then a Practice Exam, then some tips and then more 3 Practice Exam chapters, so you can read the book from cover to cover, and you should read it in the order: start from chapter 1, then chapter 2, and on.

My opinion about this book:

As I mentioned, the book is very well organized.

It does what is says on the cover: it is all about practicing.

The questions are great, very close to the real exam and all the question type and exam topics are covered.

The size of the book is good. It is not heavy, the font is in the right size.

Conclusion:

The only thing that I did not like about te book is the fact that it is a book – in paper version only. The OCJP exam is online, and if we have a interface that looks like the real exam (a software) it would be better. It would be nice if the book came with a CD, as the preparation book does, with a PC version of the exams.

The book is not expensive: I bought it for US$ 19 on amazon. The regular price is US$ 35.

So if you are getting ready for OCJP exam, I recommend you to buy the book, it is worth buying. The main reason I recommend you to buy the book is that it was written by the exam creators, so they know what are they talking about and the questions are just like the real exam.

I liked it and I recommend it!

You can check a sample chapter of this book here.

And if you want to buy this book, here is the link.

This tutorial will present some tips of how to learn Sencha Ext JS.

For those how do not know,

Ext JS is a cross-browser JavaScript library for building rich internet applications. Build rich, sustainable web applications faster than ever.

I have been working with Ext JS for almost two years and I like it very much. That is why I decided to write this tutorial with some tips.

Get to Know Sencha website:

Sencha is the Ext SJ owner The current Ext JS version is 3.3. The version 4 is going to be released on February (with lots of fun new features).

Sencha website is pretty complete. There are some tutorials (some os them are deprecated – but you can still read them and learn something from them), there are the offical forum (the development team and some ext js experts will answer your question), documentation, demos and samples and more. I recommend you to spend some time exploring it and of course bookmark it for future reference.

I am going to link some links I think it is important for you to get to know:

Mains ExtJS page: http://www.sencha.com/products/js/ – this is the Ext JS main page, use it as reference.

Samples and demos: http://www.sencha.com/products/js/ – this is the page I explore every week, looking for new components to learn. This page is really great. If you do not know how to get started with a component, use this page.

Documentation: http://dev.sencha.com/deploy/dev/docs/ – the documentation is great and the layout is very friendly, but it is only for online reference. If you need an offiline reference, please read this tutorial.

Tutorials: http://www.sencha.com/learn/Tutorials – this page is a little bit old, but you can get something from there.

Blog : http://www.sencha.com/blog/ – subscribe the feed, because this blog is great!

Foruns:

English – Official: this is the official forum: http://www.sencha.com/forum/
Spanish: the Spanish community is very active: http://extjses.com/
Portuguese – Brazil: the Brazilian community is growing a lot: http://www.extjs.com.br/forum/

Books:

There are a few book in the market about Ext JS, but they are fantastic! If you have the change to read all of them, please do it!

To get started I recommend: Learning Ext JS 3.2 and/or Ext JS in Action

If you have some experience – intermediate knowlegde: Ext JS 3.0 Cookbook

I have read all the three, the books are great and are worth buying them

Some other tips:

Ext JS is a library with lots of features, and it is hard to get to know all the components at once. I recommend you to get started with the one you are going to use the most in your job and then you can study the others to boost your knowledge.

The Sencha website provides you a great resource, but it is not enough to become a Ext JS master. I recommend you to read the books, because they are going to teach you everything you need to know – from basic to advanced techniques.

Practice is the keyword. Practice, practice and practice. You will not learn if you only read tutorials and books. You need some hands on.

I did a presentation at my work. It is an overview about Ext JS, if you are interested in the Ext JS features, please take a look:

Enjoy!

Written by two of the lead developers of the Java SE Programmer Exam, OCP Java SE 6 Programmer Practice Exams is filled with more than 260 realistic practice questions to prepare you for this challenging exam. To help you understand this material, in-depth explanations of both the correct and incorrect answers are included for every question. This practical guide covers all official objectives for Exam 310-065 and is the perfect companion to SCJP Sun Certified Programmer for Java 6 Study Guide.

Covers all OCP Java SE 6 Programmer exam topics, including:

• Declarations and Access Control
• Object Orientation
• Assignments
• Operators
• Flow Control, Exceptions, and Assertions
• Strings, I/O, Formatting, and Parsing
• Generics and Collections
• Inner Classes
• Threads
• Development

Table of contents

Chapter 1: Self-Assessment Test 1
Chapter 2: Self-Assessment Test 2
Chapter 3: Practice Exam 1
Chapter 4: Coding Exercises
Chapter 5: Practice Exam 2
Chapter 6: Practice Exam 3
Chapter 7: Practice Exam 4
Appendix: Objectives Index

Author comments

Bert Bates, SCJP, was a lead developer of the SCJP and SCJD exams for Sun. He is the coauthor, with Kathy Sierra, of SCJP Sun Certified Programmer for Java 6 Study Guide.

Kathy Sierra, SCJP, was a lead developer of the SCJP exam and the SCJD exam. She was also a certified Sun Java instructor and is the founder of the world’s largest Java certification website, javaranch.com.

Source: http://www.mhprofessional.com/book.php?isbn=0072260882

I saw this book at amazon.com in December 2010 and I decided to buy it. As I live in Brazil, it is going to take a while until I have it in my hands (~2 months – we do not have the 2 days shipment – there is another shipment option, but it is very expensive). So, when I get the book, I am going to write a book review about it and post it here.

I still do not know if it is worth of buying. The resources most used for people to practice for the java certification are Whizlabs and TestKiller. We did not have any official book about it. So I am going to find out if is good in a month!

I bought it for 19 dolars on amazon.com; On McGraw-hill webiste is 35 dolars:

Hi guys,

This blog completed one year and 2010 is coming to an end. So I decided to list the TOP 10 articles/tutorials of 2010.

1. Tutorial: Getting Started with Spring Security
2. ExtJS and Spring MVC Framework: CRUD DataGrid Example
3. Ajax File Upload with ExtJS and Spring Framework
4. Integrating Spring Security with ExtJS Login Page
5. Spring MVC and AJAX with JSON
6. ExtJS: How to Export DataGrid to Excel
7. ExtJS, Spring MVC 3 and Hibernate 3.5: CRUD DataGrid Example
8. Spring Security: Login and Logout Form JSP
9. How to Display an Image/Link Inside an Ext JS GridPanel’s Cell
10. Ext.Window Panel: Show or Hide?

Here is the list of top 10 of the most commented articles:

1. ExtJS and Spring MVC Framework: CRUD DataGrid Example discussed 52 times
2. Ajax File Upload with ExtJS and Spring Framework discussed 22 times
3. Integrating Spring Security with ExtJS Login Page discussed 21 times
4. ExtJS, Spring MVC 3 and Hibernate 3.5: CRUD DataGrid Example discussed 17 times
5. Ext Designer Review discussed 16 times
6. ExtJS: How to Export DataGrid to Excel discussed 11 times
7. Getting Started with JSON discussed 10 times
8. Tutorial: Getting Started with Spring Security discussed 9 times
9. Spring MVC and AJAX with JSON discussed 9 times
10. How to Display an Image/Link Inside an Ext JS GridPanel’s Cell discussed 6 times

Thank you so much for reading this blog, I hope you enjoyed the tutorials, there is more coming in 2011!

Happy Coding!

And a Happy and Healthy New Year!

Yesterday I had the opportunity to have dinner with some Oracle fellows (Java, Netbeans, Glassfish evangelists) and some Java Leaders in a pizza bar in Sao Paulo – Brazil. JavaOne Brazil is starting today.

It was really nice and we had to much pizza. We talked about Java, Oracle and we also talked about movies, relationships, barbecuing, embarrassing moments in our lives. It was nice to know the other side of Java experts.

I also had the pleasure to meet Nichole, from JUG Leaders mailing list. She is really nice (and pretty! ).

Some pictures we took at the dinner: http://www.flickr.com/photos/loiane/sets/72157625423438891/

Oracle also published a blog entry on its blog:
http://blogs.oracle.com/java/2010/12/javaone_latin_america_underway.html

I will write a JavaOne Brazil + Oracle Open World review on next posts.

See ya!