Loiane Groner

ExtJS, Spring MVC 3 e Hibernate 3.5: Exemplo de um CRUD Grid

Loiane — Thu, 02 Sep 2010 04:30:50 PDT

Este tutorial demonstra como implementar um CRUD Grid (Create, Read, Update, Delete) usando ExtJS, Spring MVC 3 e Hibernate 3.5

O que geralmente queremos fazer com os dados

Create (Criar) – (Insert)
Read (Ler/Visualizar) – (Select)
Update (Atualizar) – (Update)
Delete (Deletar) – (Delete)

Até a versão 3.0 do ExtJS, podíamos apenas LER dados utilizando o componente dataGrid. Se você quisesse fazer um update, insert ou delete, você tinha que codificar funções específicas para essas ações no lado ExtJS. Com a versão 3.0 (e versões mais recentes) do ExtJS, a biblioteca javascript introduziu o ext.data.writer, e você não tem todo aquele trabalho de criar as funções específicas, pode utilizar o Writer para ter um CRUD Grid.

Mas o que é preciso para ter todas as funcionalidades funcionando apenas com o uso desse writer?

No exemplo desse tutorial, estou usando JSON como formato de dados para troca de informações entre brwoser e servidor.

Código ExtJS

Primeiro, é preciso criar um Ext.data.JsonWriter:

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

Onde writeAllFields significa que queremos enviar todos os campos do registro para o banco de dados. identifies that we want to write all the fields from the record to the database. Se você tem uma estrutura de dados um pouco complicada ou o usuário irá fazer muitas iterações de update, é melhor deixar setado como false.

Por exemplo, Essa é a declaração da minha estrutura de dados no ExtJS:

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

Se eu apenas atualizar o nome do contato, a aplicação irá apenas enviar o nome do contato e a id do mesmo para o servidor dizendo que foi atualizado (se o campo writeallfields estiver como false). Se tiver setado como true, irá enviar todos os campos, e o trabalho para descobrir o que sofreu alteração ficará para o server. Como o hibernate possui o método saveOrUpdate, precisamos enviar o objeto completo para o server, pois o hibernate descobre sozinho o que é preciso fazer update ou não.

Agora, é necessário configurar o proxy, como esse:

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

E só para constar, é assim que meu reader se parece:

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

O próximo passo é juntat tudo (writer, proxy e reader) no objeto store:

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

O autosave significa que deseja salvar as alterações automaticamente no servidor (não precisa de um botão salvar na tela, assim que o usuário atualizar, deleter ou criar um novo dado, será enviado automaticamente para o servidor). Para este exemplo, implementei um botão salvar, assim, qualquer registro ou dado que for adicionado ou alterado terá uma marcação vermelha (no canto superior esquerdo da célula), assim quando o evento (ou botão) salvar for disparado, serão enviados para o servidor os dados que sofreram alteração (marcados com o flag vermelho). Você pode fazer múltiplos updates e enviar todos para o servidor em apenas uma vez (Observe como isso foi tratado no código da classe de serviço no código fonte desse projeto).

E para deixar a vida ainda mais fácil (afinal, pra isso que usamos bibliotecas como ExtJS ), vamos usar o plugin RowEditor, que permite a edição dos dados de forma muito simples. Tudo o que precisa fazer para usar esse plugin é primeiro adicionar os arquivos necessários na sua página HTML (ou JSP, ou outra extensão!):

E adicionar o plugin na declaração do grid:

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

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

Código Java

E Finalmente, precisamos de código no lado servidor.

Controller:

package com.loiane.web;

@Controller
public class ContactController  {

	private ContactService contactService;

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

		try{

			List contacts = contactService.getContactList();

			return getMap(contacts);

		} catch (Exception e) {

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

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

		try{

			List contacts = contactService.create(data);

			return getMap(contacts);

		} catch (Exception e) {

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

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

			List contacts = contactService.update(data);

			return getMap(contacts);

		} catch (Exception e) {

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

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

		try{

			contactService.delete(data);

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

			return modelMap;

		} catch (Exception e) {

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

	private Map getMap(List contacts){

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

		return modelMap;
	}

	private Map getModelMapError(String msg){

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

		return modelMap;
	}

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

}

Algumas observações:

No Spring 3, é possível obter os objetos do request diretamente nos parâmetros do método utilizando a anotação @RequestParam. Não sei porque, mas não funcionou com o CRUD do ExtJS. Tive que deixar como Object e fazer o parser de JSON-Objeto “na mão”. Por isso que utilizei uma classe Util – para fazer o parser do Objeto do request para a minha classe POJO. Se souber de um jeito para consertar isso, por favor, deixe um comentário ou entre em contato. Realmente quero saber a solução!

Classe de Serviço:

package com.loiane.service;

@Service
public class ContactService {

	private ContactDAO contactDAO;
	private Util util;

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

		return contactDAO.getContacts();
	}

	@Transactional
	public List create(Object data){

        List newContacts = new ArrayList();

		List list = util.getContactsFromRequest(data);

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

		return newContacts;
	}

	@Transactional
	public List update(Object data){

		List returnContacts = new ArrayList();

		List updatedContacts = util.getContactsFromRequest(data);

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

		return returnContacts;
	}

	@Transactional
	public void delete(Object data){

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

			List deleteContacts = util.getListIdFromJSON(data);

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

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

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

			contactDAO.deleteContact(id);
		}
	}

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

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

Classe Contato – POJO:

package com.loiane.model;

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

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

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

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

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

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

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

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

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

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

Classe DAO:

package com.loiane.dao;

@Repository
public class ContactDAO implements IContactDAO{

	private HibernateTemplate hibernateTemplate;

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

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

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

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

Classe Util:

package com.loiane.util;

@Component
public class Util {

	public List getContactsFromRequest(Object data){

		List list;

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

			list = getListContactsFromJSON(data);

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

			Contact contact = getContactFromJSON(data);

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

		return list;
	}

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

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

Se quiser visualizar o código inteiro dessa app de exemplo (ou fazer o donwload do código completo), visite o meu repositório do GitHub: http://github.com/loiane/extjs-crud-grid-spring-hibernate

Este post foi um pedido de alguns leitores do post anterior de CRUD Grid (e do blog em inglês), além de ter recebido alguns emails. Fiz alguns ajustes em relação ao post anterior, mas a idéia ainda é a mesma. Espero ter respondido a todas as perguntas em relação a esse assunto.

Bons códigos!

Como Redimensionar ExtJS Panel, Grid, ou Outro Componente Quando Redimensionar o Browser

Loiane — Tue, 24 Aug 2010 04:30:03 PDT

Este post mostrará como redimensionar um ExtJS Panel, Grid, ou qualquer outro componente quando redimensionar a janela do browser sem utilizar Ext.Viewport.

Problema:

Você tem uma página legada e quer trocar um grid feito em html por um grid em ExtJS (porque possui recursos bem legais). Ou a página possui algum design e você apenas quer usar um componente em ExtJS. Em ambos os casos, você deseja renderizar o componente ExtJS em um DIV específico. E você também quer que este componente ExtJS seja redimensionado quando o browser for redimensionado.

Como fazer isso, sendo que este não é comportamento padrão de um componente ExtJS? Só para esclarecer, os componentes ExtJS só sofrem redimensionamento se estiverem dentro de um Viewport, e este ocupa todo o espaço disponível na tela, não sendo possível utilizar nenhum outro design em HTML, JPEG, etc.

Solução:

Condor (do ExtJS Community Support Team) desenvolveu um plugin que consegue resolver este problema.

Gastei algum tempo para entender como o plugin funciona, e finalmente consegui fazê-lo funcionar do jeito que desejava.

Bem, em primeiro lugar, recomendo que passe algum tempo lendo a thread do forum para enteder bem o cenário: http://www.sencha.com/forum/showthread.php?28318 (se tiver alguma pergunta, por favor, publique diretamente no fórum para que o autor do plugin e outros membros lhe forneçam o suporte que precisa).

Como fazer o plugin funcionar:

É preciso aplicar o seguinte estilo (css) no DIV (o atributo de largura – width é com o designer; o outros estilos são obrigatórios para fazer o plugin funcionar):

Se tiver alguma borda ao redor do componente ExtJS, é necessário setar a altura - HEIGHT. E também será ncessário setar a altura no componente ExtJS. Neste caso, o autoHeight (altura automática) não irá funcionar. Se não tiver nenhuma borda ou nenhum outro design nos lados no componente, não é necessário setar a altura e neste caso, o autoHeight funciona. No meu caso (exemplo aqui do blog), coloquei uma borda no DIV exterior (apenas para simular o design), então tive que setar a altura:

Código HTML do meu “design”:

E também é preciso adicionar o plugin no componente (Neste caso, estou usando o ExtJS DataGrid):

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

Pronto! Quando redimensionar browser, o componente ExtJS fará também!

Testei no Firefox, Chrome e IE6.

Você també pode fazer o download do projeto de exemplo no meu GitHub: http://github.com/loiane/extjs-fit-to-parent

PS.: Se quiser usar todo o espaço disponível na tela, utilize Viewport.

Bons códigos!

Happy Hour Ágil Campinas – 19/08 – Eu Fui!

Loiane — Fri, 20 Aug 2010 06:17:43 PDT

Ontem teve o Happy Hour Ágil em Campinas, no Giovanetti do Cambuí.

Foi a primeira vez em Campinas e foi muito legal, Abordamos vários assunto, ligados à Agile e não ligados à Agile, apenas para jogar conversa fora!

Alguns tópicos abordados:

Scrum – se usa, como usa atualmente na empresa, coisas legais que aprendeu, etc
Certificação Scrum
Scrum.org versus ScrumAliance.org
Artigo do PMI sobre Agile: http://www.pmi.org/resources/pages/agile.aspx
Livro A Arte da Guerra – e suas lições (ou não! rs)
Cavaleiros do Zodíaco (anime e mangá) !!!
E voltou para Scrum

Bem, depois disso fui embora; o papo deve ter continuado!

Outro ponto do encontro foi o Betthoven (São Bernado) rondando pelo Giovanetti. Muito fofo!

E uma foto dos participantes:

Na foto: @albertoleal, @loiane, @pigodinho, @samuelmenezes, @felipero, @flavia_oliv, @peralles, @rafajagua, @renatorfr.

Se esqueci de alguém avisa!

Todas as fotos podem ser conferidas no Flickr: http://www.flickr.com/photos/loiane/sets/72157624641855823/

E fique ligado nos próximos HHA: http://groups.google.com/group/happy-hour-agil

Até o próximo HHA!

Happy Hour Ágil em Campinas – dia 19/08/10

Loiane — Tue, 17 Aug 2010 05:27:10 PDT

Está sendo organizado, através do twitter (e lista de discussão), um Happy Hour Ágil que acontecerá em Campinas/SP. Será no dia 19/08 às 19:30h no Giovannetti da Rua Padre Vieira, 1277 – Cambuí – Campinas, ao lado da Prefeitura. Esta vai ser a primeira vez que o evento vai ser realizado na cidade.

Mapa do local onde será o encontro:

Queremos reservar mesa, então precisamos saber qtas pessoas vão. Para confirmar presença, responda ao tópico na lista de discussão (http://groups.google.com/group/happy-hour-agil) – HHA dia 19/8 em Campinas.

Para acompanhar o que estamos falando sobre este Happy Hour lá no twitter, procure pela tag #HHA.

Vamos tomar um chopp ou refri e conversar sobre Agile!

obs.: post copiado do blog do Alberto Leal

Nos vemos lá!

ExtJS plugin: PagingToolbarResizer

Loiane — Mon, 02 Aug 2010 04:04:54 PDT

Ei pessoal,

Este é o meu primeiro plugin em ExtJS. Apesar de não ser algo complicado, estou muito feliz e é um grande feito para mim!

Bem, chega e introduções e vamos ao que realmente interessa.

O problema:

O componente ExtJS PagingToolbar permite ao desenvolvedor setar um valor predeterminado para o tamanho da página (atributo page size), que é o número total de itens/registros que serão exibidos pelo grid de vez só (por página).

Suponha que queremos exibir 10.000 (dez mil) itens no grid e que vamos usar o recurso de paginação. Vamos exibir apenas 50 itens por página. Se fizer a matemática, são 200 página no total a serem exibidas. Até agora nenhum problema, pois este é o comportamento normal do componente de paginação.

O usuário Pessoa1 quer ver 100 itens por página, e o usuário Pessoa2 quer visualizar 150 itens por página. Pode ser que depois de 10 minutos eles mudem de opinião e queiram visualizar um outro número de itens por página. Se você for fazer uma pesquisa no Ebay (ou americanas.com, saraiva, etc), vai ver uma opção de quantos itens deseja ver ao mesmo tempo. E é isto que desejamos fazer.

A solução/plugin:

Por esta razão, implementei o plugin PagingToolbarResizer, que adiciona uma (dropdown) na barra de paginação (paging toolbar) com algumas opções de quantos itens serão exibidos por página. O plugin deve ser acoplado no objeto PagingToolbar e é totalmente customizável.

Vamos dar uma olhada nas opções de configuração:

options: pode ser uma store ou um array de inteiros. Se desejar obter a lista de opções de um banco de dados, por exemplo, deve usar uma store, caso contrário, use um array. Os valores padrões são: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500, 1000].
displayText: É a mensagem a ser exibida junto ao combobox (label). A mensagem padrão é ‘Records per Page’. Neste caso, pode-se usar um mensagem em qualquer outra língua, como o Português.
prependCombo: esta flag indica se deseja exibir o combobox antes do botões de paginação. Padrão é false (no caso da imagem acima, está setado como true).

E o plugin é bem simples de usar:

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

E também pode fazer o download neste link:

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

Espero que ajude alguém!

PodCasts Gratuitos para Aprender Inglês (e outras línguas)

Loiane — Thu, 29 Jul 2010 10:50:31 PDT

Tempos atrás twittei que estava gostando bastante de alguns podcasts, e estava aprendendo novos vocabulários. Algumas pessoas pediram para postar um artigo aqui no blog com a lista dos meus podcasts favoritos.

Bem, em primeiro lugar vem a pergunta? Em que lugar eu acho esses podcasts?

Recentemente fiz a aquisição de um iPhone (agora faço parte do clubinho dos felizes e endividados! rs). Comecei a explorar o iTunes e achei ótimos podcasts por lá. E o melhor: são todos free. Uma outra coisa legal é que você não precisa de ter um iPod ou iPhone para ouvir os podcasts. Você pode usar o iTunes para acompanhar e ouvir/ver os podcasts que você baixar ou pode escutar num mp3 player qualquer.

Muitos podcasts divulgam seus sites/blogs, e você também tem a opção de acompanhar o RSS do blog, sem precisar do iTunes. O legal do iTunes é que você pode clicar no botão “Subscribe” e toda vez que você abrir o iTunes, vai verificar se tem alguma atualização e vai fazer o download automático para você!

Então vamos lá!

O primeiro passo é fazer o download do iTunes, se ainda não tiver instalado na sua máquina: http://www.apple.com/br/itunes/download/

Depois de instalado, você deve criar uma conta na Apple Store: http://iphoneapps.com.br/itunes/como-criar-uma-conta-na-app-store-united-states-sem-cartao/

Abra o iTunes:

1 – No meu esquerdo, clique em iTunes Store. Vai abrir a Home Page.

2 – No menu superior da iTunes Store, tem a opção de PodCasts: (clique nas imagens para ver em tamanho original)

3 – No menu direito, clique em Language Learning:

4 – Irá abrir a seguinte tela. Nela, você pode escolher outras línguas além do inglês:

5 – Vai abrir a lista dos podcasts disponíveis. Aí é só você escolher o que quiser. Como já disse anteriormente, você pode acompanhar todos os podcasts através do botão subscribe. Só que só irá fazer o download dos mais novos.

6 – se quiser fazer o download dos anteriores, basta clicar no ícone do podcast e depois escolher o botão “Free” de cada episódio, que irá adicionar à lista de transferências:

7 – Depois que terminar a transferência, basta ir na sua biblioteca de podcasts e começar a ouvir! Os listados abaixo são os meus preferidos!

8 – se você quiser ouvir os podcasts em algum mp3 player, basta pegar os arquivos mp3 da pasta do iTunes. Se você usa o Ruindows Windows, fica na pasta Minhas Músicas:

Simples, fácil, e totalmente free!

Aproveite para dar uma olhada nos outros podcasts da iTunes Store, e vídeo aulas da iTunes University. Várias universidades como Havard e outras conhecidas mundialmente publicam cursos super legais e grátis!

Happy learning and enjoy!

ExtJS agora é Sencha!

Loiane — Tue, 15 Jun 2010 05:16:14 PDT

Notícia super quente que foi divulgada nessa manhã. ExtJS agora é Sencha!

Juntaram a ExtJS, e os projetos JQTouch e Raphaël e a Sencha nasceu!

Devo continuar com as tags ExtJS aqui no blog, mas vou acrescentar Sencha também daqui por diante.

Segue a notícia traduzida do blog da Sencha/ExtJS: http://www.sencha.com/blog/2010/06/14/ext-js-jqtouch-raphael-sencha/ (viva ao Google Translator! rs)

Coisas boas estão acontecendo! Hoje, estamos unindo forças com os projetos jQTouch e Raphaël, mudando o nosso nome da empresa para Sencha e mover o nosso endereço web a partir de www.extjs.com para www.sencha.com.

jQTouch e Raphaël são a principal fonte de projetos opensource em suas áreas, e nós estamos incrivelmente animados para ter seus criadores, David e Kaneda Dmitry Baranovskiy, juntando-se com a equipe Ext JS para formar Sencha. Nós acreditamos que essas colaborações conduzirão a algumas coisas novas. Nos próximos meses, fique atento para isso. Você não terá que esperar muito tempo, eu prometo!

Acreditamos que os elementos gráficos ricos e suporte touch serão componentes essenciais do framework Ajax nos próximos anos. Se você tem acompanhado o nosso blog sobre HTML5, você vai saber que não só HTML5 e CSS3 trarão recursos significativos para internet, mas que isso já está chegando em dispositivos móveis (em verdade, ele já está aqui).

Por Sencha?
Estamos escolhendo Sencha como o nosso nome, pois ele evoca próxima geração de desenvolvimento de software e é fácil de lembrar, soletrar e pronunciar. Sencha – o nome de um chá verde japonês popular – é a tradição de Java, e representa um novo patamar de desenvolvimento. É uma sensação inesquecível para nós. Nós esperamos que você goste também.

Os roteiros para a Ext JS, Ext GWT, Designer, Direct, etc não mudam, como resultado disso. Estamos muito animados sobre as coisas novas no Ext JS 4.0 e do resto da linha de produtos. Alguns dos nomes de cada produto pode evoluir no futuro (por exemplo, estamos pensando em mudar o nome para Designer Ext Sencha Designer), mas não esperem grandes alterações imediatas aqui.

Raphaël e jQTouch permanecerão licenciados do MIT.
Estamos na criação de uma fundação chamada Sencha Labs, que detém os direitos autorais e marcas para todos os projetos não-comerciais associados ao Sencha. Nossa licença de escolha para estes projetos é, e continuará a ser, a licença MIT. Vamos manter nossos projetos não-comerciais com as contribuições de Sencha e as comunidades destes projetos. Temos o prazer de anunciar que Jonathan Stark, um desenvolvedor de dispositivos móveis conhecido e autor de dois livros O’Reilly sobre Android e desenvolvimento de aplicativos iPhone, será o mantenedor oficial para jQTouch daqui para frente. (Bem-vindo a bordo, Jonathan!)

Bem, vamos esperar mais novidades e consequentemente, novidades aqui no blog também!

Como popular um ExtJS ComboBox usando um Spring Controller

Loiane — Mon, 14 Jun 2010 04:30:23 PDT

Para popular/carregar um ExtJS ComboBox usando um Controller Spring, é necessário criar um request em Ajax usando Ext.data.HttpProxy e como response/resposta do server, você pode retornar um objeto JSON (ou um XML – neste exemplo, vou usar JSON, mas funcionar da memsa maneira que XML). Usando um JsonReader (ou XMLReader), pode-se ler os valores dos erver e popular o ComboBox. É a mesma lógica utilizada para popular um ExtJS DataGrid.

Frameworks/Bibliotecas que estou usando nesse tutorial:

ExtJS (download da última versão aqui);
Spring MVC 3
Jackson (usado para retornar o JSON do Controller)

Se você estiver usando Spring 2.5, pode conferir outros exemplo de como popular um JSONStore other examples e retornar JSON do Spring JSON from Spring using Spring-JSON lib.

Neste exemplo, vamos criar um combobox para listar todos os estados brasileiros. O screenshot pode ser conferido na figura abaixo:

O primeiro passo é crier um POJO (Objeto java com constructor e métodos getters e setters dos atributos):

public class State {

	private String code;
	private String name;

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

        //get and set methods
}

Abaixo segue o Controller. O request está mapeado no método loadStates(), que busca/seleciona os estados de um repositório de dados (Estou usando apenas um método por motivos acadêmicos (e portabilidade, sem precisar instalar banco de dados, etc, porém, você pode buscar essas informações de um banco de dados):

@Controller
public class StateController {

	private StateService stateService;

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

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

		return modelMap;
	}

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

A anotação @ResponseBody converte automaticamento o objeto Map em um objeto JSON, por causa do framework Jackson. Você pode ver mais sobre as simplificações Ajax do Spring 3 neste link. E este é o objeto JSON que foi retornado do método loadStates para o browser:

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

E o conteúdo acima foi retornado por um método da classe StateService (neste caso, meu repositório de dados):

@Service
public class StateService {

	public List getBrazilianStates(){

		List states = new ArrayList();

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

		return states;
	}
}

E finalmente, o código ExtJS com a declaração do reader e do comboBox:

Ext.onReady(function(){

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

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

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

	store.load();

	stateForm.render(document.body);

});

Você pode fazer o download do projeto complete (incluindo todos os jars e arquivos ExtJS nencessários) do meu repositório do GitHub: http://github.com/loiane/extjs-combobox
Este projeto foi desenvolvido no Eclipse e usei o TomCat como webserver.

Bons códigos!

Me tornei DZone MVB (Most Valuable Blogger)!

Loiane — Mon, 07 Jun 2010 04:30:18 PDT

Ei pessoal, me tornei DZone MVB (Most Valuable Blogger)!

Quero agradecer ao time do Dzone (especialmente à editora do portal) pelo convite. Estou muito honrada em fazer parte do programa!

O programa DZone MVB reúne um grupo de blogueiros de grande talento, autores, e tecnólogos que estão sempre escrevendo sobre temas de interesse para a comunidade de desenvolvedores. Estas pessoas são reconhecidas na indústria para a suas contribuições e conhecimentos técnicos profundos sobre temas que vão desde design e arquitetura de software à programação de uma série de plataformas, incluindo Java,. NET, Ruby e outros.

Já publicaram o primeiro post, How to Populate Ext JS ComboBox using Spring Controller, como pode ser conferido pela foto abaixo (É oficial! Yay!) . Este post ainda não foi postado aqui no blog, publicarei em breve!

Todo o conteúdo do portal é publicado em inglês, mas como publico os artigos aqui no blog em português e no loiane.com em inglês, então é o mesmo conteúdo!

As minhas contribuições serão publicadas no JavaLobby.

Bem legal fazer parte do programa, sempre fui fã do Dzone, especialmente por causa dos RefCardz, que uso bastante no dia a dia. E agora também vou ter a oportunidade de dar dicas e poder revisar os RefCardz antes de serem publicados.

Estou muito feliz, pois muitos profissionais e blogueiros talentosos fazem parte do programa. Me sinto honrada também por ser a segunda brasileira a fazer parte (o único brasileiro que fazia parte é o Felipe Gaúcho). Um honra poder ajudar a divulgar conteúdo escrito por nós, brasileiros.

Feliz também porque poucas mulheres estão no time de blogueiros do DZone, mais uma para ajudar a aumentar esse número!

Você pode conferir a lista de todos os blogueiros e profissionais que fazem parte neste link: http://www.dzone.com/page/mvbs

E obrigada a você que continua lendo esse blog!

ExtJS: Páginas SSL com itens não seguros

Loiane — Fri, 28 May 2010 04:30:11 PDT

Quando você acessa uma página SSL da sua aplicação web, o sistema mostra um warning com a mensagem: ”This page contains both secure and nonsecure items. Do you want to display the nonsecure items?” (Esta página contém itens seguros e não seguros. Deseja visualizar os items não seguros?)

Este é um erro comum que ocorre quando algum elemento numa página web segura (que é acessada via https:// na barra de endereço) não é acessado de uma fonte segura (ou seja, do mesmo domínio). Isso geralmente ocorrer com imagens, frames, iframes, Flash e JavaScripts.

Como resolver esse “pequeno problema” quando sua página/projeto foi desenvolvido com ExtJS?

Existe uma propriedade na classe Ext chamada BLANK_IMAGE_URL:

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

ou seja:

“URL para uma imagem gif transparente 1×1 usado pelo Ext para criar ícones alinhados com imagens de fundo CSS. (O padrão é “http://extjs.com/s.gif” e você deve alterar essa caminho para uma URL no seu servidor).”

Segue abaixo um screenshot do Firebug quando tentei carregar uma aplicação que usa a biblioteca ExtJS:

A solução é bem simples. É preciso apontar a propriedade BLANK_IMAGE_URL para a imagem “s.gif” que está no diretório da sua aplicação.

Por exemplo: se o nome da sua aplicação é “extjs-crud-grid“, deve apontar para:

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

extjs-crud-grid – diretório da aplicação:

Espero que tenha ajudado!

Bons códigos!

8++ perguntas para @loiane – por @hlegius

Loiane — Tue, 11 May 2010 05:09:50 PDT

Tempos atrás o Helio me enviou um questionário para eu responder, uma espécie de “entrevista”. E agora ele publicou no blog dele!

São minhas opiniões pessoais, e isso não quer dizer que estou certa ou errada, é apenas meu ponto de vista (e cada um tem o seu né?).

Quero agradecer ao Helio pela oportunidade. Obrigada mocinho!

Segue o link do post: http://www.hlegius.pro.br/8-perguntas-para-loiane/

[Pessoal] Diário de Bordo – Maio

Loiane — Sun, 02 May 2010 05:00:21 PDT

Me deu vontade de escrever este post para fazer um update do que está acontecendo no momento e para dizer o porquê de estar meio sumida no último mês.

Nas últimas semanas, tenho trabalhado mais com manutenção de um projeto e estou participando da fase de elaboração de um novo projeto, com direto a Scrum, etc. A parte mais divertida disso tudo são as reuniões de planning poker! Estou tendo muitas reuniões e está sobrando pouco tempo para trabalhar (leia: codificar), e com isso, pouco tempo para estudar coisas novas no trabalho e conseqüentemente postar coisas novas aqui no blog. Ainda está meio incerto, mas provavelmente deve vir um terceiro projeto na minha mão. E detalhe: projetos só com um desenvolvedor, neste caso, euzinha. Meu foco agora está totalmente no trabalho e tentar estudar ainda mais para melhorar.

Estou estudando alguns componentes novos no ExtJS (novos no sentido de nunca ter usado antes) e estou estudando Spring 3 e REST. Tem um problema que estou um pouco mais de um mês tentado resolver com ExtJS e Spring 3, e isso está tirando meu sono.

Tenho alguns projetos de exemplo prontos, mas está faltando tempo para escrever o tutorial e postar nos blogs (loiane.com e loianegroner.com).

Comecei a estudar Ruby de verdade. Antes sempre lia artigos, tutoriais para tentar ficar por dentro, mas nunca coloquei a mão na massa de fato. Agora comecei a ler o livro The Ruby Programming Language e estou praticando aos poucos.

Claro que a vida não se resume somente a trabalho, certo? Também estou lendo Percy Jackson – The Lightning Thief. Meu esposo (que é devorador de livros) acompanha a série desde que publicaram o primeiro livro aqui no Brasil, e agora eu comecei a ler em inglês, para aprender mais vocabulário. Por se tratar de um livro infanto-juvenil, a linguagem é bem tranquila para ler em inglês.

Tenho adotado a prática de comprar livros não técnicos em inglês agora. Primeiro que são mais baratos do que os traduzidos para o português. Segundo porque tô aprendendo muito com a leitura. Não olho no dicionário quando não sei uma palavra. Leio mais um pouco para tentar descobrir o significado no contexto. Se a palavra aparecer mais de uma vez e mesmo assim que não entender, aí pesquiso num dicionário em inglês mesmo, não faço tradução. Isso tem me ajudado muito. Falando nisso, esse ano já li 6 livros não técnicos em inglês, que são os da série House of Night (pode zuar, eu não ligo! rs). A linguagem é ótima para aprender, tem bastante gírias. Semana passada lançaram o sétimo livro e já encomendei o meu na amazon!

Falando em inglês, também virei professora voluntária de inglês básico numa igreja aqui de Campinas. Uma irmã da igreja me convidou e já tem quase 2 meses que dou aula uma vez por semana. Está sendo uma experiência muito legal, principalmente porque a aula é no domingo, e ver adolescentes na sala querendo aprender algo em pleno domingo, simplesmente não tem preço! Vejo que ainda há esperança neste país.

Bem, é isso. Como toda mulher, estou tentando conciliar casa, cachorro, trabalho, família, atividades extras e vida pessoal. Já trabalho faz uns 4+ anos e nunca tirei férias. Tirar um tempo para relaxar também não faz mal a ninguém. Bom que depois volto com muita vontade de escrever para o blog e com tutoriais fresquinhos!

Sorteio de 1 mês de curso de inglês gratuito na Englishtown

Loiane — Sun, 11 Apr 2010 03:55:02 PDT

Há algum tempo que venho destacando a importância de inglês para nós, que trabalhamos na área de TI.

Esse blog foi um dos selecionados para parceria com a Englishtown, a maior escola de inglês online do mundo. “Os profissionais de TI usam o inglês diariamente, por isso a Englishtown oferece módulos especificos para profissionais dessa área. O blog da Loiane é um bom canal para divulgação desses cursos”, explica Paula Albocino, relações públicas da Englishtown. Os blogs e sites selecionados irão oferecer bolsas de estudo a seus leitores.

Para participar do sorteio de 1 mês de acesso gratuito aos cursos de inglês online da Englishtown, basta deixar um comentário nesse post respondendo a seguinte pergunta:

“Com qual frequência você fala inglês no trabalho e por que a fluência no idioma é tão importante para profissionais de TI?”

O leitor sorteado pelo Blog da Loiane irá ganhar 1 mês de curso gratuito na Englishtown.

A Englishtown oferece cursos de inglês online, com aulas em grupo e individuais, com professores nativos ao vivo 24 horas. O site da Englishtown possui uma área gratuita com teste de nivelamento, diversos vídeos, artigos, dicas, exercícios para todos os níveis, e uma comunidade online com alunos de todo o mundo.

Para quem já é fluente, a Englishtown oferece aulas de preparação para o Toefl e para o Toeic, além de inglês para negócios e indústrias específicas.

Os leitores terão até o dia 12 de abril (segunda feira) para deixar os comentários!

Boa sorte a todos!

Update: Resultado do sorteio: o ganhador do curso foi o Glaydson Maget. Parabéns e obrigado a todos que participaram!

O que Aprendi em 1 Ano de IBM

Loiane — Mon, 05 Apr 2010 04:40:18 PDT

Na semana passada completei 1 ano de IBM. E também um pouquinho mais de 1 ano que estou em Campinas – SP. Apenas 1 ano e parece que passaram uns 5 anos, pois cresci muito tanto profissionalmente quanto pessoalmente.

Bem, neste post vou tentar resumir como foi meu último ano profissional e quais foram as tecnologias que aprendi.

Atuo no meu trabalho como analista de sistemas e desenvolvedora de software pleno. De vez em quando dou uns pitacos como arquiteta de solução e dou uns palpites na hora de escolher certas tecnologias. Amooo estudar (por isso que mantenho esse blog, entre outras razões), e isso me dá liberdade de pesquisar, testar e apresentar novas sugestões na hora de desenvolver um sistema.

Essa parte de pesquisar também faz parte do meu trabalho. Às vezes tenho um dia para estudar, às vezes tenho uma semana para estudar uma tecnologia. Aprender coisas novas é crucial na nossa profissão. Adoro pesquisar, e hoje tenho espaço para fazer os dois.

Em um ano já participei de 3 projetos. O primeiro foi um sistema grande, o segundo foram apenas 3 meses e desenvolvi boa parte do sistema sozinha e o terceiro está começando agora, também com uma equipe bem pequena de desenvolvedores.

Algumas tecnologias que aprendi para desenvolvê-los – só tinha ouvido falar antes de entrar na IBM, nunca nem tinha feito um hello world:

Spring MVC e Security
ExtJS (core e componentes)
JQuery (core)
iBatis (alternativa ao Hibernate – e bem mais leve)

Aperfeiçoei (e muuuito): CSS, HTML e javascript. Também comecei a aprender UNIX/AIX e usamos Scrum nos projetos agora. Bem bacana.

Sem falar que meu inglês melhorou horrores. Ganhei muito vocabulário e estou melhorando a gramática bastante (sabe esses erros bobos que a gente comete?). Isso graças às reuniões diárias com o time (que fica todo nos EUA), então tenho muitas oportunidades de praticar (por isso que também criei um blog em inglês – para praticar). Explicando: trabalho diretamente com americanos (chefe, desenvolvedores, tudo), de brasileira só tem a minha pessoa.

O bom de trabalhar para americanos é que você aprende muito com eles. É um nível totalmente diferente daqui. E o legal é que eles levam em consideração idéias de uma pessoa sem muita experiência como eu (que adora experimentar tecnologias novas e desconhecidas). No início as reuniões eram basicamente só escutar. Agora já falo, dou pitaco. O ruim é quando quero falar alguma coisa que não sei expressar em inglês, aí entra o embromation! rs

Bem, a maior parte do conteúdo desse blog vem das minhas horas de estudo. Aprendo uma coisa nova, escrevo e publico aqui. É meu diário de aprendizado profissional. E quase tudo usei nas minhas tarefas do trabalho.

Nesse 1 ano, virei embaixadora acadêmica pelo programa IBM Academic Initiative e sempre que posso, tento atuar no programa, seja conversando e trocando idéias com alunos, seja ajudando a divulgar as notícas do programa. Já fiz algumas amizadades por isso e aprecio isso.

Também virei mentora de Java no último mês. Ou seja, se algum padawan entrar para o projeto e precisar de treinamento Java, é só falar com a “tia” Loiane, que passa umas coisas pra estudar e depois analisa se já pode começar a atuar em um projeto para praticar o que aprendeu. Quando comecei a estagiar, tive dois ótimos mentores, o Thiagão e o Jeveaux, que foram muito pacientes e me ensinaram muitas coisas. E por isso sou eternamente grata a eles (e também tenho um carinho especial por terem sidos meus “tios”). Espero que agora eu possa repassar o que aprendi a outras pessoas, e assim continuar essa corrente.

Toda essa experiência tem sido muito gratificante para mim. Mudar de estado (ES), entrar numa empresa com uma cultura organizacional bem diferente do que estava acostumada, enfim, sou muito grata aos que me deram essa oportunidade, e espero retribuir toda a confiança que depositaram em mim. Aos responsáveis e a todos que sempre me deram suporte, meu MUITO OBRIGADA!

ExtJS e Spring Framework: Exemplo de um CRUD Grid

Loiane — Thu, 25 Mar 2010 05:59:53 PDT

Este tutorial demonstra como implementar um CRUD Grid (Create, Read, Update, Delete) usando ExtJS e Spring Framework

O que geralmente queremos fazer com os dados

Create (Criar) – (Insert)
Read (Ler/Visualizar) – (Select)
Update (Atualizar) – (Update)
Delete (Deletar) – (Delete)

Mas o que é preciso para ter todas as funcionalidades funcionando apenas com o uso desse writer?

No exemplo desse tutorial, estou usando JSON como formato de dados para troca de informações entre brwoser e servidor.

Primeiro, é preciso criar um Ext.data.JsonWriter:

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

Por exemplo, Essa é a declaração da minha estrutura de dados no ExtJS:

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

Agora, é necessário configurar o proxy, como esse:

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

E só para constar, é assim que meu reader se parece:

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

O próximo passo é juntat tudo (writer, proxy e reader) no objeto store:

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

E adicionar o plugin na declaração do grid:

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

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

E Finalmente, precisamos de código no lado servidor. O Controller que implementei ficou assim:

package com.loiane.web;

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

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

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

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

public class ContactController extends MultiActionController  {

	private ContactService contactService;

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

		try{

			List contacts = contactService.getContactList();

			return getModelMap(contacts);

		} catch (Exception e) {

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

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

		try{

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

			List contacts = contactService.create(data);

			return getModelMap(contacts);

		} catch (Exception e) {

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

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

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

			List contacts = contactService.update(data);

			return getModelMap(contacts);

		} catch (Exception e) {

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

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

		try{

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

			contactService.delete(data);

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

			return new ModelAndView("jsonView", modelMap);

		} catch (Exception e) {

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

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

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

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

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

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

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

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

}

Se quiser visualizar o código inteiro dessa app de exemplo (ou fazer o donwload do código completo), visite o meu repositório do GitHub: http://github.com/loiane/extjs-crud-grid

Só mais uma observação: você pode usar o dataWriter para salvar as informações que foram arrastadas para o grid com o plugin DataDrop (Lembra do plugin?). Também incluí o plugin no projeto, caso deseje testar.

Bons códigos!

Cartão de Referência Unix e Vi – Linha de Comando

Loiane — Wed, 17 Mar 2010 10:44:28 PDT

No começo dessa semana, comecei a usar Unix/Aix no trabalho para algumas tarefas. E tenho que confessar: fiquei muito confusa com todos aqueles comandos que não são nada intuitivos.

Estava parecendo aquelas pessoas que nunca ligaram um computador na vida e você precisa ensiná-los como usar o mouse e como move o cursor na tela. Totalmente iniciante.

E com isso, é claro que preciso daquelas” colinhas“, estilo cartão de referência quando trabalho no ambiente de linha de comando. Até imprimi e coloquei algumas na baia do meu trabalho.

Resolvi procurar no Google e encontrei algumas cheat sheets/ref cards bem interessantes. E resolvi compartilhar (caso também precise disso como eu):

Referências:

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

Como Importar Arquivo Excel para um ExtJS DataGrid usando DataDrop Grid Plugin

Loiane — Mon, 08 Mar 2010 05:31:13 PST

Este tutorial mostra como importar dados de uma planilha excel para um grid/tabela do ExtJS usando o plugin DataDrop (por Shea Freaderick) – selecionar, clicar e arrastar.

Semana passada estava procurando um plugin que permite importar dados do excel diretamente para um grid.

Não achei nenhum plugin que fizesse isso no forum ExtJS que funcione como o plugin para exportar dados do grid para excel; isto é, em plugin que não precise de nenhum código no lado servidor – bem, se quisesse algum código do lado servidor eu poderia simplesmente usar o plugin para fazer upload de arquivo e fazer toda a parte da lógica no lado servidor (com Java, PHP ou qualquer outra linguagem), mas não era isso que eu estava procurando.

Entretanto, achei um plugin muito interessante. Na verdade, esse plugin é tudo de bom. Até agora, é o plugin mais legal que já vi para data grid do ExtJS! Realmente é incrível e virei super fã dos envolvidos no desenvolvimento deste.

Ok, mas o que é este plugin de que tanto estou falando?

É chamado de DataDrop desenvolvido por Shea Frederick (também conhecido como VinylFox no fórum do ExtJS) e você pode fazer drag e drop a partir de uma planilha excel. Muito legal!

Esse plugin é muito útil se você precisa importar dados do excel de maneira super rápida. Mas no meu ponto de vista, se você precisar importar uma quantidade grande de dados de uma planilha, esse plugin não é muito prático, quer dizer, não é prático selecionar várias linhas e colunas da planilha (digamos, umas 10 mil linhas – isso vai ser um pouco chato de fazer). Bem, de qualquer maneira, o plugin funciona!

O que é preciso para usar o plugin?

1 – Download do plugin do repositório do autor (Google code)

2 – Adicionar os imports dos arquivos javascript na sua página html (juntamente com os outros imports de outros arquivos ExtJS)

3 – Adicionar o “Ext.ux.grid.DataDrop” na declaração de plugins do datagrid:

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

Você pode fazer o donwload do exemplo que fiz a partir do meu respositório GitHub: http://github.com/loiane/extjs-grid-dragdrop-excel

Outras observações:

No website do VinylFox, tem um vídeo que demonstra como o plugin funciona, e ele usa o Open Office.

Na minha primeira tentativa para fazer o plugin funcionar, tentei selecionar dados do Microsoft Excel e fazer o drag e drop no grid, mas não sabia como arrastar os dados do excel (sim, eu sei, sou totalmente newbie quando se trata de M$ Excel– só sei fazer matemática básica – realmente vergonhoso! ) – Com Open Office e Lotus Symphony é tão simples, você pode selecionar e clicar em qualquer lugar da seleção para arrastar!

If you are newbie just like me, Bem, se você for um newbie como eu, fiz um pequeno vídeo demonstrando como fazer (tem que clicar na borda da seleção para arrastar):

Bons códigos!

Tutorial: Upload de Arquivo com ExtJS e Spring Framework

Loiane — Mon, 01 Mar 2010 03:30:59 PST

Esse tutorial aborda como implementar um form para upload de arquivo usando o form ExtJS no lado cliente e Spring Framework no lado servidor.

O que você precisa antes de começar esse tutorial?

ExtJS
Spring Framework (MVC) e dependências (há uma opção com dependência para download)
commons-io-1.4.jar
commons-fileupload-1.2.jar

Primeiro precisa implementar o form de upload. você pode usar o que está disponível na página de exemplo do ExtJS (File Upload example) para ver as opções disponíveis (Estou usando o terceiro form).
Abaixo está o código que implementei (ou melhor, copiei da página de exemplo do ExtJS e adaptei de acordo com minha necessidade – 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();
            }
        }]
    });

});

E aqui tem o exemplo de como usar (página HTML):

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

Antes de começar a codificar o Controoler, é necessário ter um FileUploadBean (não é obrigatório, mas para deixar mais organizado):

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

}

E aqui está o FileUploadController (apenas estou gravando o arquivo que foi feito upload para o diretório C:). Você pode adicionar alguma validação ou processar o arquivo nesta classe (mas por favor, adicione uma classe de serviço para isso – controller é apenas para redirecionar o request! ). Você também pode retornar mensagens para o ExtJS dizendo que foi um sucesso ou alguma mensagem de erro.

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
	}

}

Também é preciso adicionar esse bloco de código no arquivo servlet.xml:

Bem simples!

Você pode fazer o download do projeto de exemplo do meu github: http://github.com/loiane/extjs-file-import-spring

Bons códigos!

Concurso de Mainframes IBM

Loiane — Thu, 25 Feb 2010 05:45:14 PST

Os participantes do concurso deverão desenvolver aplicações em linguagem EGL para Mainframe e para isso poderão utilizar a versão gratuita do IBM Rational EGL Community Edition, disponível no portal developerWorks.

Os projetos apresentados deverão ter uma proposta detalhada de uma aplicação Mainframe, que serão posteriormente analisadas e avaliadas por um painel de juízes qualificados. A IBM também irá disponibilizar para download um modelo de abstract, que poderá ajudar os estudantes na composição de seus projetos.

As aplicações desenvolvidas serão julgadas quanto a sua complexidade, funcionalidade e usabilidade das aplicações propostas. Ao todo serão 4 critérios de avaliação, em que cada item terá uma nota de 1 a 25 pontos.

Critérios de avaliação:

1. Objetividade da documentação
2. Entendimento técnico
3. Usabilidade real da aplicação de acordo com os benefícios propostos
4. Conjunto de funcionalidades apresentadas pela aplicação (de acordo com os requisitos submetidos e com a documentação proposta)

Vale lembrar que os participantes poderão desenvolver seus projetos em duplas. Os vencedores serão premiados com notebook Lenovo (1º lugar), GPS (2º lugar) e MP3 Players (3º lugar), de acordo com o ranking de classificação.

O abstract de cada projeto deverá ser enviado para análise até o dia 20 de Março de 2010.

Carreira em TI: Currículo para Primeiro Estágio

Loiane — Mon, 22 Feb 2010 05:33:32 PST

Fazer um bom currículo é considerado uma tarefa difícil. Fazer um currículo para o primeiro estágio ou primeiro emprego é considerado por muitos uma tarefa impossível. Este post tem como objetivo apresentar algumas dicas para deixar essa tarefa mais fácil.

Mesmo em início de carreira, o estudante e o profissional recém-formado devem ter os mesmos cuidados de um profissional ao elaborar o seu currículo. Apesar de muitas vezes não ter atuado na área de interesse, ele deve enfatizar o seu potencial, mencionando os conhecimentos que adquiriu durante a fase de faculdade.

Um ponto importante é escrever o currículo em 3ª pessoa. Lembre-se que currículo é um documento, e não uma cartinha que está escrevendo.

Um bom currículo deve começar com seu nome seguido ou não dos seus dados pessoais (pode colocar no final do currículo). Pausa para explicação: dados pessoais são os seus dados de contato. Não coloque RG, CPF, endereço. Se o empregador quiser saber esses dados, ou vai te perguntar na entrevista ou vai pedir isso explicitamente no anúncio da vaga. Se o empregador não pedir explicitamente, não coloque. Só vai deixar o currículo mais feio. Coloque apenas nome, telefone de contato e email.

Logo após o seu nome ou dados pessoais, vem o sumário. O sumário é um resumo da sua carreira profissional. Por exemplo: Desenvolvedor Java com X anos de experiência, etc.

No próprio sumário (ou após ele), você deve colocar os seus conhecimentos técnicos:
Linguagens: Java, C++;
IDEs: Eclipse, Netbeans, etc.
Frameworks: JSF, Struts, Spring

Se for o seu primeiro currículo, ou seja, se você não tem nenhuma experiência, coloque as ferramentas e linguages que viu/trabalhou na faculdade.

Após o sumário e conhecimento técnicos, coloque quais são as experiências/empresas pelas quais já passou. Além disso, coloque um resumo das suas responsabilidade e/ou projetos relevantes nos quais participou.

O que fazer se não tiver nenhuma experiência nesse caso?

A graduação, apesar de parecer ser apenas graduação, é uma fonte de oportunidades. Quem estudou, teve iniciativa, participou de ONGs ou outras atividades — até grêmio escolar — ou seja, se mexeu, tem boas chances de fazer um bom currículo e ter um bom diferencial. Quem nunca fez nada, vai ter um pouco de problema (essa é uma boa hora para começar a fazer e não ficar para trás).

Trabalhar em ONGs, projetos voluntários, grêmio estudantil, ser presidente/líder de turma é uma boa forma de mostrar que tem iniciativa, liderança e capacidade de comunicação, características que toda empresa procura em um profissional.

É importante destacar que não se deve fazer auto elogios no currículo: “Tenho espírito de equipe e liderança, etc”. Isso deve ficar implícito pelas atividades que descrever.

Os próximos ítens são Formação Acadêmica e Idiomas. Algumas informações como escola de primeira linha e idiomas fluentes são utilizados como critério de seleção, portanto, são características que merecem destaque no currículo.

No item de formação, reforce seu desempenho nos estudos. Se tirava boas notas, deixe isso claro. Se seu resultado foi excepcional em uma determinada disciplina ou grupo de disciplinas, fale sobre este assunto e explique o que o motivou a ter este resultado exemplar. Por outro lado, se sua notas não são tão boas, não escreva no currículo, mas esteja preparado para ser questionado sobre o assunto na entrevista. Muitas empresas pedem para anexar o histórico/boletim. É bom estar preparado para isso.

Proefiência em línguas estrangeiras. Ah, essa é uma parte importantíssima e que a maioria das pessoas não organizam muito bem.

Muitos colocam:

Inglês: leitura: intermediário; conversão: bom, escrita: bom

Não coloque isso no seu currículo profissional. Isso é para bolsas escolares ou outras posições acadêmicas (como professor). Para mercado de trabalho: NÃO!

Então como se deve colocar: existem 4 níveis de proeficiência: básico, intermediário, avançado e fluente. Como cada um “acha” que está em um nível, muitas vezes, o empregador não sabe interpretar o que cada nível significa. Se quiser (e deve), é bom colocar uma legenda, assim, o empregador não terá dúvidas:

Fluente: está apto para trabalhar no exterior
Avançado: apto para viajar para o exterior desacompanhado
Intermediário: leitura e escrita com conhecimentos verbais limitados (apto para viajar para o exterior com um assistente)
Básico: capaz de se comunicar com pessoas de outros países a um nível mínimo.

Depois, se for necessário, pode colocar uma parte de outras informações/atividades complementares, como por exemplo: prêmios que ganhou, se tem experiência internacional (intercâmbio), se é palestrante, cursos que participou, etc.

Outros pontos importantes para primeiro currículo de estágio:

Seminários e congressos. Outro item importante para o primeiro currículo é a participação em seminários e congressos. Mesmo que não sejam diretamente ligados à vaga que está se candidatando, servem para mostrar que é uma pessoa interessada e ávida por conhecimento. Muitos congressos também oferecem mini-cursos que ser citados, desde que tenha participado deles.

Iniciação científica, monitoria, estágios e programas de trainee. Muitas pessoas com pouca experiência profissional já participaram de programas de estágio ou trainee. Outras fizeram iniciação científica ou monitoria de disciplinas durante o curso universitário. Se este é o seu caso, reforce sua participação, mesmo que tenha sido em uma área diferente da pretendida. Artigos publicados em congressos também são interessantes.

Cursos, Palestras, concursos do Academic Initiative ou outro programa acadêmico (ex: SAI): ótima oportunidade de adquirir novos conhecimentos, aumentar seu networking e um novo item para seu currículo!

Maratona de Programação ICPC: torneio de programação organizado pela SBC (Sociedade Brasileira de Computação) no Brasil, e pela ACM (Association for Computinger Machinery – um dos maiores órgãos de computação mundial) a nível mundial, além de ser patrocinado pela IBM. Uma atividade que vale outro para o currículo e que é super bem vista por grandes empresas, como IBM.

Ter um blog e escrever notas de aula, pequenos tutoriais sobre tópicos que está aprendendo ou até mesmo publicar a monografia/trabalhos acadêmicos é uma forma legal de mostrar seu desempenho acadêmico e que domina a linguagem ou tecnologia que citou no currículo. Após o contato, pode citar o link do seu blog/wesite.

E o mais importante de todos: Não minta. Nunca!

Outra dica valiosa: se for enviar seu currículo por email, nunca envie em formato .doc ou outro formato de editor de texto. Sempre envie em pdf, que é o formato de troca de arquivos mundialmente. Isso pode pegar mal, pois você pode enviar formato open office e o empregador que só usa o Micorosft Office não vai conseguir abrir. Já com pdf, seu documento poderá ser lido em qualquer plataforma.

E se quiser ter uma base, segue um modelo de currículo para primeiro estágio (fiz baseado em experiência própria):

Currículo para Primeiro Estágio em TI

Boa sorte e sucesso!

Meu Primeiro Projeto em Java

Loiane — Mon, 15 Feb 2010 03:00:47 PST

Nesse post vou descrever sobre como foi meu primeiro contato e projeto desenvolvido em Java.

Aproveitando o fato que todo mundo faz uma pausa durante o carnaval, resolvi postar algo mais light essa semana. E também atendendo à pedidos, vou comentar como foi meu primeiro contato com java e postar o código fonte do meu primeiro projeto desenvolvido em java (esses projeto que a gente faz para aprender mais a linguagem).

Meu primeiro contato com uma linguagem de programação foi Pascal, se é que se pode considerar Pascal uma linguagem. Na época, todo mundo falava em Java e uma professora (Cinthia Caliari) nos convidou para começar um grupo de estudos fora do horário escolar.

O grupo era formado pela professora e mais 5 pessoas. Três vezes por semana, ficávamos uma hora a mais na faculdade para aprender os conceitos básicos de OO e os comandos básicos em Java. Dois meses de estudo depois, a professora sugeriu um projeto para ver se tínhamos aprendido mesmo. O projeto era um jogo da forca voltado para crianças que estão aprendendo a ler/escrever. Usamos swing para contruir a interface gráfica e várias figuras bonitinhas para ser bem intuitivo para as crianças.

Não me lembro muito bem, mas acho que demorei quase um mês para fazer esse projeto (Janeiro de 2006). Valeu muito a pena ter colocado a mão na massa e valeu ter participado do grupo de estudos, pois 4 meses depois consegui meu primeiro estágio, e os conceitos que aprendemos ajudaram muito na entrevista.

Screenshot do joguinho:

: Clique para ampliar

Código fonte: http://github.com/loiane/JogoDaForca

Olhando esse código novamente, dá pra perceber que não tinha noção nenhuma de documentação (tudo é comentário! rs). Percebo que melhorei bastante, tanto no quesito de lógica, quanto na beleza do código (que tá horrível).

Esse tipo de coisa é legal pra gente ver o quanto a gente melhorou e o quanto a gente ainda precisa melhorar. É legal acompanhar o progresso que você fez.

E uma dica: tá aprendendo uma nova linguagem? Estude a parte básica, faça aqueles probleminhas de lógica de programação com a nova linguagem para aprender bem os comandos básicos e depois desenvolva um projeto para treinar. Vai perceber que isso faz uma diferença danada!

Até a próxima e um ótimo carnaval para aqueles que estão curtindo!

Entrevista para o Jornal A Tribuna Jan/2010: Profissões em que Sobram Vagas de Emprego

Loiane — Thu, 11 Feb 2010 03:30:53 PST

Na última de semana de janeiro tive a honra de conceder mais uma entrevista para o jornal A Tribuna – vendido no Espírito Santo, meu estado natal – sobre mercado de trabalho na área de TI.

A reportagem fala sobre os profissionais que são difíceis de achar, o que fazer para se destacar no mercado. Tem uma outra página também sobre quais são as profissões mais procuradas e qual o salário médio destas.

Foi matéria de capa do jornal do dia 31 de janeiro de 2010, e matéria chefe do caderno de economia do jornal.

A entrevista que dei foi sobre como está o mercado de trabalho na área de TI; na matéria destaquei a importância do profissional que possui inglês. Outro ponto foram as atividades extras durante a graduação, que podem ajudar a alavancar a sua carreira.

Agradeço mais uma vez à coordenação de computação e ao núcleo de comunicação da Faesa pela indicação para participar da matéria.

Aproveite as oportunidades

Aproveito o post para deixar algumas dicas para aqueles que fazem faculdade. Quase todas as oportunidades que tive nos primeiros 3 anos de carreira foi a faculdade que proporcionou de alguma forma:

Meu primeiro estágio foi pela indicação do coordenador do curso;
convite para participar da Maratona de Programação – fomos pra final nacional (primeiro time capixaba a conseguir isso), o que rendeu propaganda no site da faculdade e propaganda nos dois jornais do estado (isso nos deu bastante destaque na faculdade)
saí do estágio para o primeiro emprego, indicação de um colega de monitoria
algumas outras matérias para o jornal e no próprio site da faculdade

O que estou querendo dizer é: a faculdade apenas não nos fornace parte do conteúdo que precisamos saber para começar nossa carreira. O seu networking começa na sala de aula, com seus futuros colegas de profissão, que poderão te ajudar a conseguir um emprego depois. Os professores não são apenas professores, podem se tornar amigos, que também te ajudam fora da sala de aula (e até participam da cervejada!). E essa parceria não precisa terminar quando você se formar!

Aproveite também os eventos na sua área! São ótimos para conhecer novas pessoas e trocar idéias com os mais experientes.

São as pequenas coisas, que às vezes nem damos a devida importância, que fazem muita diferença na nossa carreira!

Até a próxima!

ExtJS: Exportar de GRID para Excel

Loiane — Mon, 08 Feb 2010 04:01:30 PST

Esse tutorial irá abordar como exportar dados de um ExtJS DataGrid para um arquivo Excel.

Às vezes, o usuário deseja exportar os dados de um graid para um arquivo excel (.xls ou .csv).
Existe um plugin ExtJS desenvolvido por terceiros que faz isso para você.

Existem alguns “probleminhas” que você deve saber antes de começar:

Só funciona em browsers que suportam data URLs (URL com dados), como Firefox, Opera e IE8.
Testei com as seguintes versões do ExtJS: 2.2.1, 3.0, 3.0.3 e 3.1, mas só funcionou na versão 3.0. Se alguém estiver usando alguma outra versão e conseguir fazer funcionar, me avise, pois posso ter esquecido de algum detalhe.
Só funcionad com os dados que estão no data Store – se você usar paginação, então crie um método para exportar no lado servidor. Esse plugin apenas é útil para quem desejar exportar uma pequena tabela para o Excel (todos os dados visíveis na tela).
Se os dados no Store forem voláteis (podem mudar, sofrer update, etc), a URL para exportação deve ser recalculada.

Vamos começar:

Primeiro, crie um arquivo javascript no projeto e cole o seguinte código (criei um arquivo exporter.js): http://github.com/loiane/extjs-export-excel/blob/master/WebContent/js/exporter.js (esse arquivo tem muitas linhas, por isso não coloquei/colei o conteúdo aqui).

E no código que contém o grid, adiciona o seguinte código:

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());

Se tentar exportar a tabela da figura (por exemplo) para o arquivo excel, vai ficar mais ou menos assim:

Você também pode trocar as cores, fontes, etc. Dê uma olhada no código do exporter.js, tente enterder e faça a mudanças que desejar.

Ed Spencer também desenvolveu um plugin similar. O código fonte dele está mais limpo que este. Porém, o arquivo Excel gerado será o mesmo.

Você pode fazer o donwload do projeto exemplo (JEE) do meu repositório GitHub: http://github.com/loiane/extjs-export-excel

Bons códigos!

Integrando Spring Security com a página de Login do ExtJS

Loiane — Mon, 01 Feb 2010 03:09:40 PST

Esse tutorial irá abordar como configurar o form de login da biblioteca ExtJS (Ajax) ao invés de utilizar a página de login (login.jsp) padrão do Spring Security..

Em vez de usar a página de login do Spring Security, por que não usar um form feito com Ajax?

E como integrar a página de login do ExtJS com o framework Spring Security?

Ok, você já tentou fazer isso, o usuário foi autenticado com sucesso, mas o usuário não é redirecionado para a página principal da aplicação. Como consertar isso?

Não importa de você setou a opção default-target-url no arquivo applicationContext-security.xml, ou setou uma URL para redirecionamento no lado do servidor. Não vai funcionar.

O problema é que o ExtJS faz uma chamada/request Ajax, e nenhum redirecionamento irá funcionar no lado servidor (spring). Você deve fazer esse redirecionamento no lado cliente, que é no código ExtJS/javascript.

Primeiro, você precisa crier o form do login. Você pode utilizar o código de exemplo disponibilizado pelo ExtJS: http://www.extjs.com/learn/Tutorial:Basic_Login e customizá-lo/modificá-lo para funcinoar com o Spring Security.

Se der uma olhada no arquivo login.jsp (padrão do Spring Security), você irá perceber três pontos chaves do form:

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

É isso que precisa customizar no login do ExtJS para fazê-lo funcinar com o Spring Security. Mas não pense que é assim tão fácil, ainda tem um pequeno detalhe que precisa consertar para funcionar perfeitamente.

O login.js irá ficar assim após as moficações:

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');

});

O que está faltando?

É necessário customizar a classe AuthenticationProcessingFilter para o Spring Security executar a ação no login.

Os métodos “onSuccessfulAuthentication” e “onUnsuccessfulAuthentication” precisam retornar algum conteúdo JSON. Se o usuário for autenticado com sucesso, então redireciona-o para a página principal da aplicação, senão, a aplicação irá mostrar uma mensagem de erro.

Essa é a classe MyAuthenticationProcessingFilter customizada:

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();

	}

}

E o arquivo applicationContext-security.xml ficará assim:

Agora irá logar normalmente com o form de login do ExtJS.

Fiz uma pequena aplicação de exemplo. Se desejar, pode fazer o download do meu repositório no GitHub: http://github.com/loiane/spring-security-extjs-login

Bons códigos!

Spring Security: Página login.jsp e Logout

Loiane — Mon, 25 Jan 2010 03:00:18 PST

Quando você faz a configuração do Spring Security na sua aplicação, você tem a opção de dizer qual é a sua página de login (login.jsp) no arquivo applicationContext-security.xml.

Mas como esse arquivo login.jsp se parece? Como faço para a página ser reconhecida pelo framework no processo de autenticação? Se você fizer uma busca pelo Google, não irá encontrar tão facilmente. Há muitos artigos sobre como configurar o framework, mas poucos (poucos mesmo) que mostram a tal página. Devido a dificuldade que tive quando comecei a estudar, resolvi compartilhar aqui no blog.

A verdade é: basta olhar nos arquivos .jar de exemplo que vem quando faz o download do spring security. Você vai encontrar tanto a página de login (login.jsp) quando o link de logout:

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

Observação muito importante: o nome do campos de input DEVEM continuar os mesmos. NÃO MUDE! Caso mudar, o processo de autenticação irá falhar.

E para o logout, a única coisa que deve fazer é enviar o usuário para um determindado servlet definido pelo framework spring security.

logout link:

">Logout

Bons códigos e até a próxima!

Tutorial: Começando com Spring Security

Loiane — Mon, 18 Jan 2010 03:00:41 PST

Esse tutorial vai cobrir um cenário básico onde integra um módulo do framework Spring – Spring Security, utilizando autenticação via banco de dados, em uma aplicação web que já utiliza o Spring.

Como qualquer outro assunto relacionado à Spring, a curva de aprendizado em um pouco grande. Mas como qualquer outro assunto Spring, uma vez que você faz a primeira configuração e aprende, pode usá-la sempre em outras aplicações, ou seja, o famoso Ctrl C + Ctrl V.

Quando comecei a estudar Spring Security no final de dezembro, encontrei esses primeiros passos sugeridos na página do Spring Security.

E se você quiser configurar a parte de segurança na sua aplicação web utilizando Spring Security, segia os seguintes passos:

A primeira coisa que precisa fazer é adicionar os arquivos do framework no classpath da aplicação. Faça o download do Spring Security, e copie os seguintes arquivos da pasta dist; cole-os na pasta lib da sua aplicação:

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

Também é necessário fazer o download do Apache Commons Codec: commons-codec-1.3.jar

Vamos começar com a configuração dos XMLs:

Web.xml

Cole o seguinte código no arquivo web.xml. Deve ser inserido logo após ao final da tag /context-param.


	contextConfigLocation
	
           /WEB-INF/applicationContext-security.xml
	



	springSecurityFilterChain
	org.springframework.web.filter.DelegatingFilterProxy



	springSecurityFilterChain
	/*

applicationContext-security.xml

Foi feita uma referência ao arquivo applicationContext-security.xml dentro do web.xml. Vamos criá-lo.

Seguindo o tutorial da página do Spring Security, sugiro começar com o XML encontrado no tutorial de exemplo, e incrementá-lo aos poucos. Esse é o arquivo básico:

Agora você pode tentar executar a aplicação.

Após tentar executar a sua app, e se a seguinte exception for lançada:

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 e o adicione no classpath.

Vamos então fazer algumas mudanças no arquivo applicationContext-security.xml.

Primeira mudança: substitua o bloco de código abaixo

por

O atributo auto-config basicamente diz para o spring-security configurar as opções padrões sozinho, ou seja, o framework faz tudo automático.

A página login.jsp pode ser acessada por qualquer ROLE.

Restringir acessor à página delogin siginifcaria que ninguém poderia acessá-la. Ficaria muito estranho, posi como pode autenticar um usuário se este ainda não efetuou o login?

Note que a página de login é um jsp, e não uma action. A página de login não precisa ser acessada através de uma action.

Na configuração acima, também foi restringido o acesso a todas as outras página. Apenas os usuários com a ROLE_USER podem acessá-la.

Digamos que tenha mais uma role. Fazer o mapeamento das URLS para as roles é bem fácil. Dentro da tag http, coloque as URLS e as roles assim:

É claro que você não quer colocar (nem deve) todos os usernames (usuários) e passwords (senhas) e suas respectivas roles no arquivo applicationContext-security.xml. Como então dizemos ao spring-security para obter essas informações do banco de dados?

Coloque o seguinte bloco de código no applicationContext-security.xml (substitua o bloco com os usuários e senhas)

Para isso é necessário já ter um dataSource criado (não vou abordar esse assunto nesse post).

Agora a pergunta: para isso funcionar, como é que o framework espera que o meu banco de dados se pareça?

A autenticação padrão do spring security requer que a estrutura do banco de dados seja dessa maneira:

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

Mas se desejar configurar as queries que são usadas, pode utilizar a sua própria estrutura do banco de dados, só deve tomar cuidado para que os atributos/colunas da sua query “casem” (sejam os mesmos) com os atributos esperados pelo framework.

Por exemplo? você quer apenas ter uma tabela com todas essas informações no banco de dados (ou até uma tabela com nome e colunas diferentes). Vamos ver como fica a configuração do XML:

Talvex você ainda também queira configurar outras páginas:

Access Denied: essa página será exibida caso o usuário tente acessar uma página que não pertença a sua role:

...

Default Target URL: essa é a página que o usuário será redirecionado caso seja autenticado com sucesso no login:


    ...
        
    ...

Logout URL: essa é a página que o suusário será redirecionado quando fizer logout:


    ...
    	
    ...

Login Failure URL: essa é a página que o usuário será redirecionado caso a autenticação falhe (login). Geralmente é a própria página de login, com algum parâmetro indicando um erro:


    ...
        
    ...

Bem, é isso que você precisa para começar com Spring Security.

Na próxima semana, posto como a página login.jsp do Spring Security se parece.

Bons códigos!

My DeveloperWorks: Como é a vida para um desenvolvedora Java no Brasil?

Loiane — Tue, 12 Jan 2010 04:53:45 PST

Queria compartilhar com vocês a entrevista que a Valerie fez comigo e publicou no blog dela no My developerWorks (em inglês): Interview with Loiane Groner, Java developer in Brazil.

Fiquei muito feliz quando vi o post publicado ontem, e mais feliz ainda quando vi que foi o post mais visto de todos os blogs do developerWorks:

clique para ver tamanho original

E se você olhar no canto, vai ser meu blog no “Featured Blogs”!

Também tem alguns status do twitter:

Da conta da Valerie:

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 )

Da conta do developerWorks:

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

Obrigada Valeria, por esta oportunidade!

Obrigada também a todos os meu queridos amigos e leitores aqui do blog!

ExtJS: Como colocar Ícone e Link nas Células do GRID

Loiane — Mon, 11 Jan 2010 03:00:16 PST

Esse tutorial aborda como colocar/fazer o display de um ícone ou link em uma célula do componente Grid do ExtJS.

Para explicar isso, vamos utilizar um grid com informações básicas de uma pessoa (agenda), e ao invés de apenas mostrar o email do contato, vamos mostrar um icone (envelope), além de colocar um link do tipo mailto. Assim, quando o usuário clicar em cima do link, irá abrir o cliente de email, e este poderá enviar sua mensagem. Um processo bem simples.

Como fazer:

Primeiro, precisamos de dados para o grid (dados ficticios):

//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']
];

Depois vem a definição do Grid:

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

Como funciona:

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

Repare a coluna email, na definição do ColumnModel do data grid. Há um atributo chamado renderer. Uma função renderer é um método/função que intercepta e que pode modificar o valor de uma célula antes que esta seja renderizada (apareça no grid).

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

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

Na função, colocamos apenas um HTML básico de link com função mailto, mais o valor do email e o ícone.

Muito simples né?

Agora você pode ficar brincando e criar suas funções renderer!

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

English: http://loianegroner.com/2010/01/how-to-display-an-imagelink-inside-an-ext-js-gridpanels-cell/

Bons códigos!

ExtJS: Ext.Window: hide ou close?

Loiane — Mon, 04 Jan 2010 03:00:22 PST

Neste curto tutorial, você vai aprender como controlar o componente Ext.Window Panel do ExtJS.

Problema: você criou uma janela com ExtJS, e ela funcionou perfeitamente na primeira vez. Quando a aplicação disparou o evento para abrir a janela pela segunda vez, nada aconteceu, ou você viu um erro no firebug (algum coisa is not defined ou alguma coisa is null). Como reparar isso?

Solução: quando você não diz como o Ext.Window deve trabalhar, o comportamento padrão é fechar (close) o componente, e com isso, destruí-lo (destroy). Devemos então, esconder (hide) o componente, assim, poderemos reutilizá-lo nas próximas vezes.

Código de Exemplo (referência: http://www.extjs.com/deploy/dev/examples/window/hello.html):

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

Bons códigos!

English Version of this post: Ext.Window Panel: Show or Hide?

Download do projeto: http://github.com/loiane/ext-window

Retrospectiva 2009

Loiane — Mon, 28 Dec 2009 10:49:02 PST

2009 foi um ano de muitas bençãos na minha carreira profissional. Espero que 2010 continue abençoado, e cheio de conquistas maravilhosas.

Aqui vai um resumo e meus planos profissionais para 2010. Bom que fica tudo registrado, assim poderei me cobrar no final de 2010!

Bem, em janeiro decidi criar esse blog, influenciada por alguns amigos blogueiros. Esse blog surgiu na idéia de fazer um log de tudo que estudo, com o objetivo de não ter que ficar estudando tudo de novo (se no futuro precisar, aí só voltar aqui e relembrar). Além do log de tutoriais, também fiz um log das notícias que julguei importante para mim.

Fiquei muito feliz ao longo do ano, pois as visitas do blog aumentaram muuuito, e comecei e receber comentários e emails carinhosos. Fiquei feliz porque o conteúdo que publiquei aqui, além de me ajudar, também ajudou/ajuda outras pessoas! Não existe coisa melhor do que ter um retorno positivo do esforço que você faz.

A primeira série de post que fiz foi sobre XML, e até agora, a mais comentada e elogiada aqui no blog! Muito obrigada a todos!

Ainda preciso unir todos esses posts em um pdf, tá na minha lista TO DO!

Em março, me mudei de Vitória – ES para Campinas – interior de São Paulo, por conta de uma proposta de trabalho na IBM de Hortolândia. Um dos meses mais feliz da minha vida, pois esse era um dos meus sonhos. Essa proposta me fez ver que com esforço, dedicação e muita força de vontade, a gente pode realizar muitas coisas! Com a mudança de cidade, mais 10 kilos na balança também (que ainda não consegui perder =/)!

Me tornei embaixadora do IBM Academic Initiative em abril, e a série sobre XML rendeu um mini-curso.

Desque que entrei na IBM, aprendi várias coisas novas. E isso me deu a oportunidade de fazer novos posts. Para meu primeiro projeto, aprendi Spring, ExtJS (principalmente o componente DataGrid), JQuery, iBatis (concorrente do Hibernate), algumas ferramentas da Rational, além de ter melhorado meu inglês pra caramba! Aqui no blog, foquei mais em Spring + Extjs + JSON. Eis os posts:

Comecei a aprender Git também, após fazer minha conta no GitHub – nova modinha nerd para compartilhar código:

Publiquei alguns outros posts sobre carreira também, além de um tutorial sobre como instalar My SQL:

Além de outros posts, que você pode conferir a lista aqui.

No total: 100 posts publicados – 101 com esse, 10 posts ainda tem em modo rascunho (fica pra 2010 – além de mais 5 sobre Spring security – estudei nesse fim de semana do Natal – também pra 2010).

Comecei também meu blog em inglês (http://loianegroner.com) – para treinar mais a língua inglesa – minha conversação técnica ainda precisa melhorar bastante – são muitos termos!

Projetos e metas para 2010:

Melhorar como falar em público – acho que não me sai muito bem na palestra do IV EJES – até agora só me dou bem em sala de aula mesmo -vocação mais pra professora do que palestrante.
Investir mais na série sobre XML – levantado por alguns leitores aqui do blog.
Ler mais livros técnicos – li apenas 5 esse ano. Mas li livros não técnicos também.
Emagrecer os 10 kilos que ganhei – o Milfont teve uma experiência bem legal.
Estudar mais – perco muito tempo jogando (The Sims 3, Counter Strike, Sacred 2).
Casar! rs
Comprar um MAC! – esse não sei se vai entrar em 2010 por causa do casamento, mas meu prazo é até 2011.

Bem, é isso!

Um Feliz 2010 e um ano cheio de realizações maravilhosas para todos nós!

Loiane Groner

ExtJS, Spring MVC 3 e Hibernate 3.5: Exemplo de um CRUD Grid

Código ExtJS

Código Java

Controller:

Classe de Serviço:

Classe Contato – POJO:

Classe DAO:

Classe Util:

Como Redimensionar ExtJS Panel, Grid, ou Outro Componente Quando Redimensionar o Browser

Problema:

Solução:

Como fazer o plugin funcionar:

Happy Hour Ágil Campinas – 19/08 – Eu Fui!

Happy Hour Ágil em Campinas – dia 19/08/10

ExtJS plugin: PagingToolbarResizer

O problema:

A solução/plugin:

Links:

E também pode fazer o download neste link:

PodCasts Gratuitos para Aprender Inglês (e outras línguas)

Bem, em primeiro lugar vem a pergunta? Em que lugar eu acho esses podcasts?

Então vamos lá!

ExtJS agora é Sencha!

Como popular um ExtJS ComboBox usando um Spring Controller

Me tornei DZone MVB (Most Valuable Blogger)!

ExtJS: Páginas SSL com itens não seguros

Como resolver esse “pequeno problema” quando sua página/projeto foi desenvolvido com ExtJS?

8++ perguntas para @loiane – por @hlegius

[Pessoal] Diário de Bordo – Maio

Sorteio de 1 mês de curso de inglês gratuito na Englishtown

O que Aprendi em 1 Ano de IBM

ExtJS e Spring Framework: Exemplo de um CRUD Grid

Cartão de Referência Unix e Vi – Linha de Comando

Como Importar Arquivo Excel para um ExtJS DataGrid usando DataDrop Grid Plugin

Tutorial: Upload de Arquivo com ExtJS e Spring Framework

Spring File Upload Example Integrated with ExtJS FileUpload Form

Concurso de Mainframes IBM

Critérios de avaliação:

Carreira em TI: Currículo para Primeiro Estágio

Meu Primeiro Projeto em Java

Entrevista para o Jornal A Tribuna Jan/2010: Profissões em que Sobram Vagas de Emprego

ExtJS: Exportar de GRID para Excel

Integrando Spring Security com a página de Login do ExtJS

Spring Security: Página login.jsp e Logout

login.jsp

Login

logout link:

Tutorial: Começando com Spring Security

Web.xml

applicationContext-security.xml

My DeveloperWorks: Como é a vida para um desenvolvedora Java no Brasil?

ExtJS: Como colocar Ícone e Link nas Células do GRID

Como fazer:

Como funciona:

ExtJS: Ext.Window: hide ou close?

Retrospectiva 2009