Loiane Groner

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!

Palestras do Sun Tech Days Brasil 2009

Loiane — Wed, 16 Dec 2009 07:50:15 PST

Se você não foi ao Sun Tech Days que aconteceu nos dias 8 e 9 desse mês em São Paulo, por motivo de trabalho ou porque mora longe, ou até mesmo porque não conseguiu chegar, não tem problema!

A Sun disponibilizou os slides aprensentados no evento:

Keynotes

Enterprise Computing

Client Technologies

OpenSolaris

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

Java Campinas e CampinasJUG agora no Twitter

Loiane — Tue, 15 Dec 2009 03:34:54 PST

Os Grupos de Usuários Java de Campinas e região – CampinasJUG e JavaCampinas agora também estão no twitter.

Poderemos acompanhar as notícias mais importantes que acontecem nos JUGs e também ter em primeira mão quando vai ser o próximo encontro.

Follow na gente!

CampinasJUG: http://twitter.com/campinasjug

JavaCampinas: http://twitter.com/javacampinas

Acompanhe as novidades pelo blog também: http://www.campinasjug.org

Para o Ciclo de Manutenção, Agilidade Já!

Loiane — Fri, 11 Dec 2009 05:28:37 PST

Enquanto todos querem agilidade e a maioria ainda discute a agilidade, sem buscá-la realmente, alguns já iniciaram o caminho que levará a um ciclo de trabalho mais inteligente. Isto irá transformar a maneira de TI suportar o seu negócio e melhorará seu desempenho no desenvolvimento de software.

Um assunto recorrente, sempre que discutimos projetos de software, é a questão da manutenção de sistemas, sempre encarada como o primo pobre pelos processos ou metodologias de desenvolvimento. Apesar de ser um assunto importante, pois é a maioria do volume de trabalho desenvolvido nas organizações de hoje, frequentemente a manutenção é tratada como um caso particular do problema geral de desenvolvimento.

Acesse o link abaixo e saiba mais sobre este assunto.

Atenciosamente,

O time de iniciativas acadêmicas agradece

Minha aventura: Sun Tech Days 2009

Loiane — Thu, 10 Dec 2009 03:00:30 PST

Terça feira (8) fiquei muito desapontada. Tentei ir ao Sun Tech Days em São Paulo, mas não consegui, quer dizer, não me deixaram chegar até o evento.

Pois bem, vou começar:

Querido diário blog, acordei na terça feira às 4:40 da madruga para me arrumar para ir ao Sun Tech Days. Saí de casa às 5:50 com destino à rodoviária de Campinas. Embarquei no ônibus às 6 horas com rumo à São Paulo. Tempo previsto de viagem (com direito a um pouquinho de trânsito até o terminal Tietê): 1:30 horas, ou seja, deveria ter desembarcado em São Paulo às 7:30, e com metrô e taxi até o lugar o evento, ter chegado no máximo às 8:30 (tempo limite para concorrer ao almoço com o James Gosling, pai do Java).

O motorista do ônibus não faz o trecho Campinas – São Paulo, então ele não recebeu um número de protocolo da viagem, o que significa que ele não poderia pegar passageiros no meio do caminho, apenas àqueles que embarcaram na rodoviária. “Viagem direta para São Paulo” – disse o motorista. Uhuu, vou chegar mais cedo ainda, eu pensei.

Quando ando de ônibus, geralmente durmo, acordei às 7 horas e ainda estávamos na Bandeirantes (rodovia de acesso à São Paulo) – meia hora até chegar até a rodoviária. Passaram-se 15 minutos e vimos os carros parados na rodovia, faltando 15 Km para chegar à Marginal Tietê. Pensei que devia ser o trânsito normal, afinal, é horário de pico, tem trânsito mesmo.

7:30 – não andamos nem 500 metros. Comecei a ficar preocupada – tudo bem que ia perder a chance de almoçar com o Gosling, mas pelo menos queria chegar no keynote dele às 10 horas.

9 Horas – mais 500 metros. MUITO preocupada. O pessoal do ônibus começou a ligar para os parentes que moram em sampa para perguntar o porquê do trânsito: rio Tietê transbordou e alagou vários pontos da Marginal. Ninguém entra ou sai de São Paulo.

Sintonizei na rádio: Marginal Pinheiros totalmente parada, os carros com os motores desligados. Marginal Tietê: totalmente parada. Rodovia Anhanguera: totalmente parada. Rodovia dos Bandeirantes: totalmente parada. O cara da rádio pediu para os motoristas riscarem a Anhanguera e a Bandeirantes do mapa. Minha situação: DESESPERADA!

11 horas – ainda na Bandeirantes, faltando ainda 10 Km até a Marginal Tietê. Perdi o keynote do Gosling (e único em todo o evento) – perdi meu dia! Possibilidade levantada no ônibus: voltar para Campinas assim que chegasse o próximo retorno – já que não tinha como entrar em São Paulo. Problema: dos 40 passageiros do ônibus, 4 não queriam voltar – queiram nadar! Depois de quase 15 minutos argumentando com eles, consegui fazer com que concordassem em voltar (pelo menos consegui colocar me prática um pouco do meu lado de liderança – um ponto positivo da viagem).

Meio dia – eita retorno que não chega! Tava tenso mesmo! Detalhe: o ônibus não tinha sanitário, e já estava á 6 horas dentro do ônibus, minha bexiga me matando! Solução: arbusto! Pulei o murinho na beira da pista e fui atrás de um arbusto mesmo (com um pouco de público, mas que se dane, eu pensei). Nessas horas queria ser homem viu! Ainda bem que tinha gel anti-séptico da Victoria Secrets na minha bolsa! hehehe

12:30h – Finalmente o bendito retorno chegou. Mas quando chegou no retorno, liberaram a Marginal Tietê e o trânsito começou a fluir. O motorista resolveu continuar, já que tinha essas benditas 4 pessoas que queriam continuar até a rodoviária. No caminho até a rodoviária, o motorista não conseguiu mais andar, pois tava tudo alagado. E a notícia: cancelaram todas as passagens para Campinas. Ou seja, deixou os 4 doidos ali mesmo, pois não tinha como continuar e voltamos. Fazer o que? Não iria arriscar a ficar atolada, e nem ter como voltar para casa depois.

13h – Voltando para Campinas.

14 horas – sem nehum trânsito, chegamos à Campinas.

Saldo do dia 1: 7 horas para chegar até São Paulo – 1:30 em dias normais. 8 horas totais dentro do ônibus, sem banheiro, sem café da manhã, sem nenhum biscoito na bolsa. Já passando mal (pressão baixa). Devorei um sanduíche do Bobs mesmo – na rodoviária, parecendo que não comia à 1 semana – e com medo de desmaiar por causa da minha pressão.

Saldo do dia 2: curso intensivo para Zen Budista. Curso completo e intensivo de paciência – para quem não me conhece, não sou a pessoa mais paciente do mundo (ainda trabalhando essa parte).

Saldo do dia 3: prejuízo de 200 reais: o único motivo de eu querer ir ao Sun Tech Days era o James Gosling. Perdi a oportunidade de conhecer ele.

Saldo negativo 4: perdi todo meu planejamento (e eu ODEIO quando isso acontece). Paguei a inscrição para o evento em Outubro, me planejei para ir desde Outubro, trabalhei nos feriados de Novembro só para poder ir nesse evento! Fiquei muito p da vida, mas muito TRISTE mesmo. Além do trauma de ir para São Paulo. Vou ficar sem ir para lá um bom tempo!

Sei que teve gente que perdeu a vida (6 mortos no total); pessoas que perderam a casa/comércio. Realmente é muito triste tudo isso – os 200 reais e o dia que perdi não se comparam com isso.

O mais triste ainda é ver o prefeito de São Paulo dizer que a chuva teve seu lado bom: viu que precisa investir mais (isso pq ele deve andar de helicóptero, né?). E ainda a notícia que o que causou o transbordamento do rio Tietê foi a falha nas bombas que tiram água do Tietê e passa para o rio Pinheiro, que tira água deste e passa para uma represa (ou algo do tipo) – e no mesmo dia – o jornal Estado de São Paulo publicou que o prefeito apenas investiu 10% do dinheiro destinado à essas obras. Muita cara de pau pro meu gosto. Já que perdi o que eu queria no evento, resolvi trocar os meus documentos na quarta – transferir meu título de eleitor. Vou levar tudo isso em consideração no ano que vem!

E de agora em diante, prefiro ver as notícias de engarrafamento em São Paulo apenas nos sites de notícias e pela televisão. Fazer parte da notícia, não, obrigada!

Você gostaria de trabalhar na IBM?

Loiane — Mon, 07 Dec 2009 03:43:38 PST

A IBM, seus parceiros e clientes estão buscando estagiários e funcionários como você!

Você quer um estágio ou um emprego? Eu gostaria de convidá-lo a fazer parte da comunidade de alunos, ex-alunos e profissionais que obtiveram conhecimento, qualificações e/ou certificações IBM.

1) Como ser encontrado pela IBM, pelos clientes e pelos parceiros
É claro que você já usa redes sociais. Então vai ser fácil unir-se ao My developerWorks, nossa rede social, preencher seu perfil, colocar tags, participar de grupos e interagir com outros estudantes e profissionais.

O My developerWorks é a rede social do ecossistema IBM, o lugar para você aprender, aumentar suas qualificações e expô-las para quem as valoriza.
Você usou nosso software em seus projetos, trabalhos, aulas de laboratório?
Cadastre-se no www.ibm.com/developerworks/mydeveloperworks e informe isso em seu perfil (profile). Coloque as tags “academic_initiative” e “Brasil” e o nome de sua cidade no seu perfil.

Quer ser localizado rapidamente por quem busca um conhecimento específico?
Filie-se a GRUPOS (groups) com o mesmo conhecimento. É assim que possíveis empregadores irão buscar, por exemplo, um DBA de DB2, um desenvolvedor Java, um administrador de mainframe, etc. sem ter que pesquisar cada um dos perfis para localizar o conhecimento desejado.

Todos começam pela expressão Skills AI BR (habilitações Academic Initiative Brasil) seguida pelo nome do conhecimento.
Veja alguns blocos, sugeridos e criados pelos seus professores e pela IBM a partir do uso do software IBM em suas aulas:

Projetos de bancos de dados em DB2, administração de mainframe, soluções SOA com Webshpere, modelagem de aplicações J2EE, programação básica em Java com Websphere/Rational, por exemplo.

A partir destes blocos, eu criei grupos no My developerWorks e gostaria muito de ter você como membro ativo desses grupos. Cada profissional empregado no ecossistema é motivo de muita alegria para nós do Academic Initiative.

Clique em Connect, depois em Groups, e na barra de pesquisa digite Skills AI BR
pesquise os grupos e associe-se àqueles que correspondam ao seu conhecimento.

Participar destes grupos também facilita que você receba eventuais comunicações de cursos.

2) Você gostaria de trabalhar na IBM?
Além de consultar os grupos de conhecimento mencionados no item 2, o time de Recrutamento da IBM criou um grupo com as vagas voltadas para TI com foco em estudantes e profissionais recém-formados. Está logo na primeira página do developerWorks (www.ibm.com/developerworks/br ou, se vc preferir, siga o link abaixo:

https://www.ibm.com/developerworks/mydeveloperworks/groups/service/html/communityview?communityUuid=1f8dcb56-48ec-401a-b464-1dd304801b47

Esse grupo será atualizado com novas vagas na próxima semana. Fique de olho!

Também não deixe de cadastrar seu curriculum no site oficial da IBM: www.ibm.com/br

3) Como aumentar o seu conhecimento, ir além do que você viu nas aulas?
Troque informações com as pessoas do(s) seu(s) grupo(s), monte outros grupos, pesquise e indique material para estudo.
Uma boa fonte é o portal do estudante que contémroteiros de estudo, software e material didático para aprendizado ou no site mundial:
http://www.ibm.com/br/university/studentsoftwarecatalog.phtml – site local em português
https://www.ibm.com/developerworks/university/students/index.html – site mundial

Para discussões sobre o trabalho em TI e novidades tecnológicas, o blog do Academic Initiative é um excelente ponto de partida:
https://www.ibm.com/developerworks/mydeveloperworks/blogs/academicbr/

4) Como ser contratado rapidamente e para as melhores posições? Certificação!!!
Você já tem uma certificação IBM?
Parabéns! Não deixe de informar isso no seu perfil e, se desejar que seu nome saia publicado numa lista de profissionais certificados, envie um e-mail para dwbr [at] br [dot] ibm [dot] com autorizando a postagem dos seguintes dados: Nome, E-mail, Cidade, Estado, Data da Certificação, Número da Prova Realizada, Título da Certificação.

Dúvidas?
E-mail = pwisv [at] br [dot] ibm [dot] com
Telefone = 08007074837 Opção 1

Sucesso!!! Esperamos ver você trabalhando na IBM ou em nossos parceiros e clientes.

Time Academic Initiative

Descontos em livros da Oreilly para membros de um JUG (Java Users Group)

Loiane — Thu, 03 Dec 2009 08:50:34 PST

A Oreilly Books está oferecendo 35% de desconto em livros impressos e 45% de desconto em eBooks para os membros do JUG.

Quem tiver curiosidade ou quiser dar uma olhada nos livros diponíveis: http://www.oreilly.com/store

Alguns dos livros diponíveis são os da Série Head First.

Quem tiver interesse em adquirir algum livro com o desconto, favor entrar em contato para passar o código da promoção. Não se esqueça de dizer quel é o JUG que você participa!

Sorteio de 10 convites para o Google Wave

Loiane — Thu, 26 Nov 2009 03:08:20 PST

Estamos chegando perto do Natal, e como presente, o Alan, que escreve no blog http://esborniacomputacional.blogspot.com/ está dando 12 convites do Google Wave para sorteio.

Para participar do sorteio é muito simples: basta decodificar a frase abaixo e escrever uma breve explicação de como chegou ao resultado:

L|’x|lyv’|t’jvu}p{l’whyh’v'Nvvnsl’^h}l(

Duas dicas para resolver:

Tabela ASCII
Problema 458 do UVA Online Judge (juíz online de problemas estilo maratona de programação – ACM ICPC)

Atentar para as letras maiúsculas e minúsculas, a frase é case sensitive!

Fácil, fácil!

Não precisa nem fazer um programinha para isso, basta usar um pouco de lógica!

E como o título do post descreve o sorteio de 10 convites, vamos sortear 10 convites. As duas primeiras pessoas que responderem levam um convite cada. Os outros 10 convites vamos sortear entre as demais pessoas que responderem.

Cada comentário receberá um número, do mais velho para o mais novo, ou seja, o primeiro a comentar fica com o número 1. O sorteio será feito através do site www.random.org.

Os comentários serão liberados apenas depois do prazo, que é até às 20 horas dessa sexta feira – 27 de novembro. Por isso, não se preocupe se não ver o seu comentário aqui no blog.

Só aceitaremos as respostas corretas e com a explicação! Apenas a resposta não será considerada válida!

Boa sorte e bons códigos!

Oportundiade: IBM abre 150 vagas para estagiários

Loiane — Wed, 25 Nov 2009 05:44:34 PST

A IBM abriu as inscrições para seu programa de estágio Passaporte IBM 2010, que deve contratar 150 pessoas na primeira fase.

No processo seletivo, serão aceitos os alunos que se formarem entre dezembro de 2011 e julho 2012 e que tenham conhecimentos do idioma inglês, ao menos no nível intermediário.

As especializações mais procuradas pela IBM são Ciências da Computação, Engenharia da Computação, Processamento de Dados, Análise de Sistemas e Tecnologia da Informação e demais cursos de Tecnologia. Também existem oportunidades para estudantes de áreas como Administração de Empresas, Ciências Contábeis, Economia, Direito, Marketing e para cursos técnicos em informática e eletrônica.

“A IBM Brasil oferece boas oportunidades para quem está começando a carreira. Em 2009 cerca de 70% dos estagiários já foram efetivados na companhia”, ressalta Adriana Vasconcelos, gerente de Recrutamento e Seleção da IBM Brasil.

As vagas são principalmente para as cidades de São Paulo, Rio de Janeiro e Hortolândia, onde está situado o segundo maior Centro Global de Serviços da IBM no mundo. Há também vagas nas cidades de Porto Alegre, Brasília, Belo Horizonte entre outras localidades.

Segundo a empresa, os interessados devem se inscrever apenas para as vagas referentes aos seus cursos atuais e com o texto “Passaporte IBM” no título. As inscrições estão disponíveis no site www.ibm.com/br/estagio.

O processo de seleção é dividido em três fases. A primeira consiste de testes de inglês e raciocínio lógico. A segunda é um processo de dinâmica de grupo, enquanto última é composta por entrevistas individuais com os gerentes das vagas em aberto. Os resultados das etapas serão divulgados por e-mail aos candidatos e os aprovados no processo do 1º trimestre de 2010 iniciam seu estágio no mês de março.

O valor da bolsa estágio varia de acordo com o nível de inglês, carga horária e ano letivo.

Fonte: http://info.abril.com.br/noticias/carreira/ibm-abre-vagas-para-estagiarios-25112009-13.shl

Ótima oportunidade para quem estava esperando! Muito estagiários são efetivados em pouco tempo (3-6 meses), além de ser uma mega oportunidade de crescimento profissional e pessoal. Recomendo!

Concurso de Mainframe para Estudantes do Brasil

Loiane — Tue, 24 Nov 2009 03:16:17 PST

A IBM tem o prazer de anunciar o 3º Concurso de Mainframe para Estudantes do Brasil. As inscrições estarão abertas no período de 17 a 26 de Novembro de 2009 no site do concurso.

Serão diversos prêmios nas várias fases do concurso, desde pen drives até notebook Think Pad para o ganhador e professor mais indicado. Os 3 melhores ainda concorrem a vagas de estágio na IBM na área técnica de mainframe.

O Concurso consiste na navegação em um mainframe real via rede, seguindo tarefas que estão no site da IBM passo-a-passo. Ao final de cada etapa os melhores classificados ganham prêmios e ficam habilitados para a fase seguinte até que cheguem na última parte e concluam o concurso.

Não perca tempo, verifique o regulamento e faça sua inscrição no site do concurso!

Divulgue para quem achar necessário. Contamos com sua ajuda e participação caso seja estudante.

Página do Concurso: http://www.ibm.com/br/systems/z/concursomainframe

Atenciosamente,

Equipe do Concurso Mainframe – IBM Brasil

Sun Tech Days 2009 – Eu vou!

Loiane — Mon, 23 Nov 2009 02:00:36 PST

Em dezembro, o Sun Tech Days 2009 estará de volta ao Brasil. E, desta vez, contará com a presença do Pai do Java: James Gosling!

E é claro que não vou perder essa oportunidade!

Se você desenvolve em Java, Scripting, MySQL, OpenSolaris, NetBeans ou RIA’s, você não pode ficar de fora deste evento!

No Sun Tech Days Brasil, que está em sua oitava edição, você vai ver de perto os principais experts da Sun, além de aprender, compartilhar informações, interagir, criar oportunidades, conhecer outros desenvolvedores e, principalmente, participar. Afinal, deixamos para trás a Era da Informação, para mergulhar na Era da Participação, onde todos trazem inovações, compartilham conhecimentos e inspiram pensamentos!

A principal razão de estar indo é por causa do James Gosling. Ele é uma das pessoas que mais admiro e é claro, agradeço a ele por ser o pai do Java, linguagem que tanto amo!

Conhecido mundialmente como “Pai do Java”, James Gosling é Bacharel em Ciências da Computação pela Universidade de Calgary, Canadá e Ph.D. em Ciência da Computação pela Carnegie-Mellon University, quando defendeu sua tese intitulada “A Manipulação Algébrica das Restrições”. Construiu sistemas de aquisição de dados via satélite, uma versão multiprocessador do Unix, vários compiladores, sistemas de email e gerenciadores de janela. Ele também desenvolveu o editor de texto WYSIWYG, um editor de desenhos restritos e um editor de texto chamado ‘Emacs’ para sistemas Unix. Na Sun, começou como engenheiro líder do sistema de janelas NeWS. Foi ele que fez o design original da linguagem de programação Java e implementou o seu primeiro compilador e máquina virtual. Em fevereiro de 2007, James foi nomeado um oficial da Ordem do Canadá.

Bem, além do papi do Java, o Sun Tech Days terá Install Fest (instalação do Open Solaris).Além disso, terá algumas sessões técnicas, além da agenda de palestras de evento.

Esse evento é simplesmente imperdível. Já garanti minha inscrição desde a primeira semana de novembro.

Não perca a oportunidade de passar dois dias com os nerds Java do Brasil e algumas feras em Java do mundo!

O único problema do evento é ser no meio da semana: terça e quarta feira, mas trabalhei e vou trablhar nos feriados de novembro (2 e 20) para poder ir ao evento. O que a gente não faz né?

Vou ficar em São Paulo. Se alguém de Campinas também for e quiser marcar de se encontrar lá ou ir junto, é só entrar em contato.

Vejo vocês lá!

My new English blog: loianegroner.com

Loiane — Fri, 20 Nov 2009 09:42:52 PST

Ontem eu anunciei que coloquei meu novo blog em inglês no ar. Só que houve uma mudança nos planos. Resolvi mudar o domínio, para não ter confusão, e poder administrar o outro blog melhor.

Bem, é isso: novo domínio: loianegroner.com.

Em breve, tradução dos tutoriais aqui do blog.

See ya!

Novo blog: loiane.com em Inglês

Loiane — Thu, 19 Nov 2009 03:29:27 PST

Já tem algum tempo que estava com essa idéia de transformar ou fazer um blog em inglês. Me organizei no último mês e coloquei o novo blog no ar hoje: http://loianegroner.com

A idéia surgiu depois que recebi algumas visitas de pessoas de outros países e de um email que recebi. Pensei: “Por que não tentar”?

Bom porque vou poder treinar mais e é claro, estudar mais inglês. A idéia inicial é traduzir alguns posts aqui do blog, os tutoriais. Depois pretento levar os dois blogs separadamente.

Inglês é uma parte delicada! rs

Desde que entrei na IBM, melhorei muito meu inglês, devido às reuniões diárias com os desenvolvedores e gerentes dos EUA, e ser a única brasileira no time ajuda bastante. Não tenho fluência na língua, mas eles me entendem e eu entendo eles! rs

Àqueles que tem bastante conhecimento, fiquem à vontade para corrigir, dar dicas. A idéia é crescer e aprender cada vez mais.

See ya!

Impressão de GRID no EXTJS com GridPrinter

Loiane — Wed, 18 Nov 2009 02:00:13 PST

O Grids é um dos componentes Ext JS mais utilizados, e geralmente representam dados/informações que o usuário gostaria de imprimir (como relatórios, por exemplo). Como o grid usualmente é parte de uma aplicação maior (não apenas contém o grid na página), apenas imprimir a página (Ctrl + P) não é uma boa solução, pois é feita apenas a impressão das informações que cabem na página de impressão (e o grid pode conter barras de rolagem, e estas, sairão na página impressa).

Uma outra solução para impressão de grids, seria construir uma outra página HTML ou JSP, contendo apenas as informações que serão impressas. Mas teríamos que fazer uma requisição ao servidor, buscar os dados e renderezar uma nova página. Pra que então utilizar o ExtJs Grid, se você vai fazer tudo na mão novamente. Dobro de trabalho.

Recentemente em um projeto, passe por essa situação, então comecei a buscar no Oráculo uma solução. Encontrei duas. Uma vai ser apresentada neste post, e a outra apresentarei no próximo post.

A primeira solução, com GridPrinter, gera uma página em HTML apenas com as informações do Grid. Porém com uma diferença: o GridPrinter é um plugin Third Party (de terceiros) para o ExtJS, ou seja, não preciso fazer uma requisição ao servidor para renderizar uma nova página. Este plugin, obtém as informações do próprio grid, e gera a página para a impressão, em outra palavras, tudo é feito via javascript/ExtJS, todo o trabalho fica no lado cliente (browser), o que torna a solução bem leve.

Só tem um porém: como o GridPrinter pega os dados que estão renderizados na página, se você tiver um Grid com paginação, as únicas informações que serão impressas são aquelas que o usuário está visualizando.

Vamos ao código:

Construindo o Grid

Primeiro, precisamos configurar o grid. Vamos adicionar um botão na barra de tarefas (top tool bar – tbar) que irá chamar o script que irá construir a página HTML que servirá para impressão:

//checkboxes
    var sm = new Ext.grid.CheckboxSelectionModel();

    // cria o grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            sm,
            {header: "NOME", width: 170, sortable: true, dataIndex: 'nome'},
            {header: "TELEFONE", width: 150, sortable: true, dataIndex: 'telefone'},
            {header: "EMAIL", width: 150, sortable: true, dataIndex: 'email'},
            {header: "DATA NASC.", width: 100, sortable: true, dataIndex: 'aniversario',
            	renderer: Ext.util.Format.dateRenderer('d/m/Y')},
            {header: "ENDEREÇO", width: 200, sortable: true, dataIndex: 'endereco'},
        ],
        sm:sm,
        title: 'Impressão Grid Extjs',
        autoHeight:true,
        width:800,
		renderTo: document.body,
		frame:true,
		tbar : [
		        {
		          text   : 'Imprimir',
		          handler: function() {
		        	Ext.ux.GridPrinter.print(grid);
		          }
		        }
		      ]
    });

Depois precisamos configuar a página HTML que chamará o script:



Impressão Grid ExtJs com GridPrinter

Fazendo o Setup do Plugin – GridPrinter

Você pode fazer o download do GridPrinter – versão original aqui.

Além do arquivo javascript, você precisa adicionar o arquivo de estilos (css):

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,
th,td{margin:0;padding:0;}
img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

table {
  width: 100%;
  text-align: left;
  font-size: 11px;
  font-family: arial;
  border-collapse: collapse;
}

table th {
  padding: 4px 3px 4px 5px;
  border: 1px solid #d0d0d0;
  border-left-color: #eee;
  background-color: #ededed;
  font-weight:bold;
}

table td {
  padding: 4px 3px 4px 5px;
  border-style: none solid solid;
  border-width: 1px;
  border-color: #ededed;
}

Fique à vontade para modificar o css, afinal o gosto é do cliente!

Além disso, você precisa dizer ao GridPrinter em que lugar está o arquivo CSS:

   /**
   * @property stylesheetPath
   * @type String
   * The path at which the print stylesheet can be found
   */
  stylesheetPath: '/gridPrinter-extjs/js/gridPrinter/resources/gridPrinter.css',

Fiz algumas mudanças no arquivo original. As mudanças são simples de fazer, basta você entender um pouco da lógica utilizando, e é claro, saber o básico de ExtJS. Você pode conferir as pequenas mudanças que fiz fazendo o download no GitHub.

Resultado

O Grid:

A página de impressão:

Bem melhor do que apenas dá um Ctrl P!

Excluindo a coluna CheckBox da página de impressão

Se você não utilizar o Checkbox, você não vai ver esse símbolo “{}” na primeira coluna. Mas se tiver usando, pode ser que não queira colocar esse símbolo na sua página de impressão, talvez você quer que apareça apenas os dados.

Para retirar essas chaves, basta fazer uma pequena modificação no código do GridPrinter, ou seja, como o GridPrinter pega as configurações do ColumnModel, precisamos apenas excluir a primeira coluna, que é o sm (CheckBox):

    var columns_ = grid.getColumnModel().config;
    var columns = [];
    for (var i=1;i
E o resultado:

Você pode baixar o projeto completo no GitHub:  http://github.com/loiane/gridPrinter-extjs
Até a próxima!

Carreira em TI: Currículo em Inglês

Loiane — Mon, 16 Nov 2009 02:00:39 PST

Uma das grandes dificuldades para as pessoas da área de TI é, muitas vezes, escrever um bom currículo em inglês. E ter um currículo em inglês, é essencial, já que inglês é tão importante quanto saber lógica de programação.

Vou apresentar nesse post um exemplo de um currículo e dar algumas dicas do que você pode fazer para turbiná-lo e deixar bem apresentável.

Na área da TI, um bom currículo não se avalia pela quantidade de páginas que tem. Aliás, não existe uma quantidade X de páginas que um currículo deve ter (pode ser diferente em outras profissões). Tudo depende da experiência que cada um tem, de quantos projetos e empresas que já passou. O mais importante é colocar as informações essenciais e não encher linguiça.

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

A chave principal é como você organiza o currículo: as informações mais importantes e mais relevantes para o empregador devem vir primeiro. Siga a ordem: dados de contato, resumo profissional, experiência, escolaridade, etc. Assim, quem estiver analisando seu currículo já vai saber se você tem o perfil necessário para preencher a vaga.

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. Peloamordedeus, 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

Um erro “grotesco” que vemos por aí é a tradução do nome das empresas para o inglês. Lembrem-se que não se traduz nome próprio. Se a empresa se chama “TI e Soluções”, coloque exatamente isso no currículo. Não vá colocar “IT and Solutions”, pois se a pessoa resolver fazer uma busca no Google, não vai encontrar a mesma empresa.

Depois vem as informações a respeito da sua formação – Educação. Se já é formado, se tem pós, etc.

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ãããããããããããooooooo! FEIO!
Isso é coisa para bolsas escolares ou outras posições acadêmicas. Para mercado de trabalho: NÃO!

Então como devo 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, como por exemplo: prêmios que ganhou, se tem experiência internacional (intercâmbio), se é palestrante, etc.

Obs.: Certificações devem ficar no sumário. (ou em alguma sessão expecífica, se pedido pelo empregador).

E uma informação que é legal colocar: quando é possível começar no trabalho, caso passe no processo de seleção.

Bem, esse é um currículo base. Deixe seu currículo base sempre atualizado. E dependendo da baga e/ou empresa, acrescente ou exclua informações. Personalize seu currículo de acordo com a necessidade. Isso faz toda a diferença.

O primeiro exemplo de currículo é com os projetos relevantes, e o segundo exemplo é com as empresas pelas quais já passou. Escolha um modelo, e boa sorte!

Cv Inglês Projetos – Java Developer

View more documents from Loiane Groner.

Cv Inglês Empresas – Java Developer

View more documents from Loiane Groner.

Resultado do Sorteio do Convite: Google Wave

Loiane — Wed, 11 Nov 2009 03:56:45 PST

Ontem, em parceira com o Alan (que doou 2 convites), fizemos um sorteio de 3 convites para o Google Wave.

A pergunta era muito simples: Quais são os 3 erros do código abaixo (sendo que o código deveria ser executado com sucesso)?

Vamos então à resposta correta:

1- Como deveríamos executar o código, precisamos de um método main. O método do código é Main, o que não está errado (não gera erro de compilação), mas neste caso, é um método como outro qualquer. E como precisamos executar o código, deve ser main.

2- System.out.printl não existe, gera um erro de compilação! O correto poderia ser System.out.println, System.out.print ou até mesmo System.out.printf

3- Tá faltando fechar aspas duplas no final da frase “Quero um convite para o Wave“

E as pegadinhas:

1- A primeira é com o próprio método Main. Não está errado, mas no contexto da pergunta, era um erro.

2- Declaração do pacote com letra maiúscula. Não é um erro, mas não está dentro da convenção java.

3- E o que mais confundiu algumas pessoas, foi o argumento string. Como estamos bem acostumados a sempre escrever String[] args, algumas pessoas acabam achando que o nome do parâmetro só pode ser args. Para curiosidade de alguns, você pode colocar o nome que você quiser, desde que não seja uma palavra reservada da linguagem java. E string não é uma palavra reservada!

Vamos ao resultado dos 3 ganhadores do convite para o Google Wave:

Cada um recebeu um número de acordo com a ordem de chegada, ou seja, quem comentou primeiro, ficou com o número 1 e assim em diante.

E os 3 sorteados foram os números: 39, 11 e 21:

Conferindo na planilha:

Número 39:

Número 11:

Número 21:

Parabéns ao Luis Gustavo Reis, Kaio e Adriano Ohana! Vou entrar em contato com vocês, e se não responderem até o fim do dia, farei um novo sorteio, ok?

E se pintar mais algum convite, coloco um outro desafio aqui no blog. Quem sabe na próxima, pode ser um desafio de lógica ou uma questão pegadinha da certificação!

Até a próxima!

Sorteio de convite: Google Wave

Loiane — Tue, 10 Nov 2009 01:00:28 PST

Os primeiros convites que ganhei distribuí para o pessoal mais chegado. Agora ganhei mais um convite e resolvi sorteá-lo aqui no blog, em decorrência dos emails e pedidos de convite que tenho recebido. Infelizmente não tenho convites suficientes para dar a todos que me pediram, então vou sorteá-lo.

Para participar do sorteio é muito simples: Basta deixar um comentário aqui no post e responer à pergunta abaixo.

Preencha o formulário do comentário com seu nome e email (o email não fica visível).

E é claro, responder a pergunta: quais são os 3 erros do código abaixo?

Ps.: quando excutarmos esse código, deve imprimir Quero um convite para o Wave.

Fácil né?

Divulgarei o resultado do sorteio na quarta feira, e apenas aceitarei os comentários feitos na terça, e com a resposta correta, ok?

Mais uma vez, tenho apenas um convite!

Atualização: O Alan, gentilmente doou mais dois convites, então teremos 3 sortudos!

Boa sorte a todos!