Loiane Groner

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

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

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

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

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

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

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

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

What do you need to use this plugin?

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

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

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

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

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

Other observations:

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

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

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

Happy coding!

Ajax File Upload with ExtJS and Spring Framework

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

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

What are you going to need before start this tutorial?

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

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

Ext.onReady(function(){

    Ext.QuickTips.init();

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

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

});

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

Spring FileUpload Example with ExtJS Form

Spring File Upload Example Integrated with ExtJS FileUpload Form

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

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

package com.loiane.beans;

import org.springframework.web.multipart.MultipartFile;

public class FileUploadBean {

	private MultipartFile file;

	public MultipartFile getFile() {
		return file;
	}

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

}

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

package com.loiane.web;

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

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

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

import com.loiane.beans.FileUploadBean;

public class FileUploadController extends SimpleFormController  {

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

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

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

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

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

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

		return null;

	}     

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

}

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

Very simple!

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

Happy coding!

Book Review: Ext JS 3.0 Cookbook by Jorge Ramon

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

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

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

Motivation

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

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

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

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

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

Format of this book

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

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

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

My opinion about this book

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

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

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

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

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

Conclusion

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

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

And this is the link to the book page.

Spring MVC and AJAX with JSON

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

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

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

How to do it?

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

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

Now you have to configure your XML files:

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

Add this config to you spring configuration file:



	
		/WEB-INF/views.xml
	
	
		1

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

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

return new ModelAndView("jsonView", modelMap);

Here is an example:

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

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

	}

Happy coding!

ExtJS: How to Export DataGrid to Excel

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

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

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

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

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

Let’s get started:

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

Then, in your datagrid, add this code:

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

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

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

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

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

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

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

Happy coding!

Integrating Spring Security with ExtJS Login Page

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

				method:'POST',

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

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

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

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

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

			},

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

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

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

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

			});
		}
		}]
	});

	login.render('login');

});

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

What are we missing then?

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

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

This is MyAuthenticationProcessingFilter class:

package com.loiane.security;

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

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

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

public class MyAuthenticationProcessingFilter extends AuthenticationProcessingFilter {

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

		HttpServletResponseWrapper responseWrapper = new HttpServletResponseWrapper(response);

		Writer out = responseWrapper.getWriter();

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

	}

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

		HttpServletResponseWrapper responseWrapper = new HttpServletResponseWrapper(response);

		Writer out = responseWrapper.getWriter();

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

	}

}

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

Now you can login using ExtJS login form.

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

Happy coding!

Spring Security: Login and Logout Form JSP

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

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

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

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

login.jsp

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


  
    Login
  

  
    Login

    
      
        Your login attempt was not successful, try again.


        Reason: .
      
    

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

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

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

logout link:

">Logout

That’s it!

Happy Coding!

Tutorial: Getting Started with Spring Security

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

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

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

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

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

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

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

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

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

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

Now, let’s start with XML configuration.

Web.xml

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


	contextConfigLocation
	
           /WEB-INF/security-applicationContext.xml
	



	springSecurityFilterChain
	org.springframework.web.filter.DelegatingFilterProxy



	springSecurityFilterChain
	/*

applicationContext-security.xml

Let’s create the applicationContext-security.xml.

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

Now, you can try to execute the web application.

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

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

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

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

First change: replace the following code

for

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

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

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

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

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

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

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

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

This requires that a dataSource be created first.

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

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

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

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

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

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

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

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

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

...

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


    ...
        
    ...

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


    ...
    	
    ...

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


    ...
        
    ...

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

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

Happy coding!

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

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

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

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

click on the picture to see full size

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

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

There is also some twitter statuses:

From Valerie’s:

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

From developerWorks’:

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

Thank you Valerie, for giving me this opportunity!

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

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

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

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

How to do it

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

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

GirdPanel definition:

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

How it works

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

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

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

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

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

Now you can create your own renderer functions!

Happy coding!

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

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

Ext.Window Panel: Show or Hide?

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

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

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

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

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

HTML:



Ext.Window: close or hide

	

	
	

	



	

	

    Hello Dialog
    
        
        
            Ext.Window Panel: Close or Hide?

JS:

Ext.onReady(function(){

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

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

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

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

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

                items: tab,

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

Happy Coding!

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

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

Getting Started with ExtJS DataGrid

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

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

Screeshot for this tutorial:

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

Terminology:

Displaying data in a grid requires two Ext components:

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

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

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

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

Setting up a data store:

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

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

Simple (Array)
XML
JSON

Step 1: Adding data to our data store:

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

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

Step 2: Defining your data for the data store

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

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

{name: ‘title’}

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

‘title’

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

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

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

Step 3: Displaying the GrigPanel

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

Code:

Ext.onReady(function(){

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

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

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

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

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

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

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

Reference: Learning Ext JS – Book

Sun Tech Days Brazil Presentations

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

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

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

Keynotes

Enterprise Computing

Client Technologies

OpenSolaris

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

Getting Started with JSON

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

This post will walk through JSON basic concepts.

What is JSON?

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

It is easy for humans to read and write.

It is easy for machines to parse and generate.

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

It is lighter than XML.

JSON versus XML

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

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

JSON Values

JSON is built on two structures:

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

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

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

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

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

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

JSON Syntax

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

Example:

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

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

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

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

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

Happy coding!

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

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

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

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

KEY UPDATES TO JAVA EE 6

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

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

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

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

KEY UPDATES TO GLASSFISH ENTERPRISE SERVER V3

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

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

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

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

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

KEY UPDATES TO THE NETBEANS 6.8 IDE

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

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

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

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

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

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

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

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

Additional information is available at:

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

Getting started with ExtJS in your J2EE project

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

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

Level: Basic

This is the screenshot of this tutorial:

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

PS.: I’m using Eclipse IDE.

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

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

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

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



	
  	
	

	

	
	

	
	

	

  	

	Getting Started with Extjs

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

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

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

Reference: Ext Js Community

Happy Coding!

Ext JS: Which events are fired by a component?

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

Quick Tip:

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

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

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

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

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

Happy coding and debuging!

Tutorial: Using the EGit Eclipse Plugin with GitHub

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

I started to use GitHub a couple of months ago.

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

What this tutorial covers:

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

Enjoy it and Happy coding!

New to UNIX?

Loiane — Tue, 24 Nov 2009 11:40:37 +0000

New to UNIX? Learn UNIX and improve the skill you have with these UNIX resources.

The AIX® and UNIX® zone of developerWorks contains articles, tutorials, and tips to help developers with AIX and UNIX application development and system administration. For users trying to find their way in a new topic, all of that information can be overwhelming. This page provides an overview for readers who would like to learn about AIX and UNIX, but don’t know where to start.

More resources:

UNIX tips: Learn 10 good UNIX usage habits
UNIX Downloads

Happy Studying!

Hello World!

Loiane — Wed, 18 Nov 2009 13:30:07 +0000

After almost a year writing in my blog in Portuguese, I decided to start a new one in English.

I’m going to start translating some of my posts, and maybe I can write some exclusive ones in the future.

I’m not fluent in English, but I’ll give my best. Feel free to give me some tips to improve my proficiency in English. I will appreciate it.

This blog it’s an excuse for me to study and learn more about technologies and the English language. It is kind a log of everything I study (personal and work stuff).

Here, you will find some Java and related technologies tutorials, including some javascript libraries tutorials, such as Ext JS and JQuery, and other stuff.

Well, good luck for me and happy coding!