Merlin Um Novo Horizonte na Criação das Telas de Cadastro
Sumário >> panorama geral Cenário A proposta Comparações Características e Funcionalidades O presente e o futuro EOF Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 2 de 44
Sobre o autor Marcelo Mrack, mmrack@gmail.com 29 anos, 8 em TI, 6 em Java Bacharel em C. Computação, UNISC 2001 Mestrando em C. Computação, UFRGS 2006 Atuação em projetos web e desktop n camadas Arquiteto na 3Layer Tecnologia Projetista na CWI Software Consultor e instrutor Hibernate, Java EE Especialidades: IHC, Patterns, geradores, PU Ágil e UML Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 3 de 44
Panorama geral Quanto custa construir um sistema >> a construção da IU hoje Custo de construção Sistema completo Interface do usuário TC TC elementares 18% 30% 2 50% 2 100% 1 1 Referências 1 Meyers, Brad User Interface Software Tools (1994,2002) 2 Pesquisas próprias (2005,2006) Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 4 de 44
A construção da IU hoje O cenário atual >> a ferramenta proposta As diversas formas de construir interface de usuário e os problemas em comum Abordagens Escrita de código-fonte Uso de ferramentas WYSIWYG 1 Uso de assistentes de criação Geração baseada em modelos Templates MDA Problemas recorrentes Tempo elevado de construção Quanto custa criar um template? Demora nas alterações Como refatorar classes já geradas? E se o código já foi alterado? Falta de reuso Posso reusar o label Nome do cliente em projetos diferentes? Gerência de código Código template ou não? E a versão? 1. ( WYSIWYG: /wǻziwǻg/ ) What You See Is What You Get, ou seja o que você vê (ou o que você desenha no editor) é o que você tem quando o sistema estiver em execução. Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 5 de 44
A ferramenta proposta >> motivação Abdicar totalmente da geração do código-fonte Em outras palavras, gerar a TC durante a execução do sistema, através de um processo de interpretação de meta-informações oriundas do próprio modelo de dados A idéia-chave class Cliente { String codigo; String nome; } Tempo de projeto CAFE new JFrame.add( Merlin.createIhc(Pessoa.class) ).setvisible(true); Tempo de execução Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 6 de 44
Motivação TC são funções do modelo de dados >> motivação A dependência da TC em relação ao modelo de dados Modelo de classes Tela de Cadastro consistência, aparência, validação, organização, customizações, etc. Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 7 de 44
Motivação Regras clássicas Classe Tela >> motivação Atributo Relacionamento Controle Link Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 8 de 44
Motivação Regras clássicas Classe Atributo Relacionamento Tela Controle Link Implementando as regras clássicas A classe de dados public class Cliente { String nome; Cidade naturalidade; boolean ativo; } O cadastro gerado 1 >> motivação 1 Cadastro de Clientes Nome Naturalidade Ativo Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 9 de 44
Motivação Regras clássicas Classe Atributo Relacionamento Tela Controle Link Implementando as regras clássicas A classe de dados public class Cliente { 2 String nome; Cidade naturalidade; boolean ativo; } O cadastro gerado >> motivação Cadastro de Clientes Nome 2 Naturalidade Ativo Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 10 de 44
Motivação Regras clássicas Classe Atributo Relacionamento Tela Controle Link Implementando as regras clássicas A classe de dados public class Cliente { String nome; Cidade naturalidade; boolean ativo; } O cadastro gerado >> o objetivo da ferramenta 3 Cadastro de Clientes Nome Naturalidade Ativo 3 Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 11 de 44
O objetivo da ferramenta Gerar TCs elementares com o menor esforço possível Um exemplo de interface elementar a ser gerada >> algumas definições O código essencial new JFrame().add( Merlin.createIhc(Usuario.class) ).setvisible(true); Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 12 de 44
Algunas definições importantes Contexto É a relação entre o elemento e o ambiente em que ele ocorre Algo é importante dependendo do local onde ele está Empirismo É o conhecimento baseado na experiência Eu sei porque eu já fiz isso É reativo Heurística É o conhecimento baseado em aproximações Eu acho que sei porque eu já fiz algo parecido É pró-ativa Inferência Obtém-se novos conhecimentos a partir de informações existentes Quanto mais contexto, melhor >> o processo Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 13 de 44
O processo >> comparação 1. Cria-se as classes de dados 2. Opcionalmente, decora-se elas com anotações 3. Dentro da aplicação, invoca-se Merlin.createIhc sobre a classe ou objeto Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 14 de 44
Uma pequena comparação A mesma entrada e as diferentes saídas... >> comparação Uma classe de dados para teste... public class Usuario { long codigo; String nome; String observacoes; String logradouro; int numero; Cidade cidade; String complemento; }... ou em notação UML Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 15 de 44
Uma pequena comparação A mesma entrada e as diferentes saídas... Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) >> comparação Um gerador tradicional (a) Merlin (b) usuario codigo nome Cadastro de Usuário Dicas O campo nome é obrigatório. O campo logradouro é obrigatório O campo número é obrigatório cidade logradouro Rua São Sepé numero 256 complemento observacoes Cancelar Salvar Nome Endereço Cidade Logradouro Rua São Sepé Número 256 Complemento Observações Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 16 de 44
Uma pequena comparação A mesma entrada e as diferentes saídas... Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) >> comparação Um gerador tradicional (a) Merlin (b) usuario codigo nome Cadastro de Usuário Dicas O campo nome é obrigatório. O campo logradouro é obrigatório O campo número é obrigatório cidade logradouro Rua São Sepé numero 256 complemento observacoes Cancelar Salvar Nome Endereço Cidade Logradouro Rua São Sepé Número 256 Complemento Observações Porque Observações é uma caixa de texto de múltiplas linhas? Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 17 de 44
Uma pequena comparação A mesma entrada e as diferentes saídas... Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) >> comparação Um gerador tradicional (a) Merlin (b) usuario codigo nome Cadastro de Usuário Dicas O campo nome é obrigatório. O campo logradouro é obrigatório O campo número é obrigatório cidade logradouro Rua São Sepé numero 256 complemento observacoes Cancelar Salvar Nome Endereço Cidade Logradouro Rua São Sepé Número 256 Complemento Observações Porque é Observações e não Observacoes? Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 18 de 44
Uma pequena comparação A mesma entrada e as diferentes saídas... Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) >> características gerais Um gerador tradicional (a) Merlin (b) usuario codigo nome Cadastro de Usuário Dicas O campo nome é obrigatório. O campo logradouro é obrigatório O campo número é obrigatório cidade logradouro Rua São Sepé numero 256 complemento observacoes Cancelar Salvar Nome Endereço Cidade Logradouro Rua São Sepé Número 256 Complemento Observações Qual é o campo da cidade exibido na caixa de seleção? Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 19 de 44
Características gerais >> características gerais Essência Não produzir código-fonte, mas sim renderizar a interface do sistema em tempo de execução Ser independente de framework gráfico Protótipo em Swing Previsão para JSF Outras aplicações podem ser SWT, XUL e GWT Baseada no modelo de objetos do sistema Ter uma API minimalista Anotações Merlin.createIhc() Reusar (e apostar em novos) padrões EJB3 Persistence JSR220 Hibernate Validator JSR299 (JBoss Seam) Java Beans Binding JSR295 Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 20 de 44
Características gerais >> características gerais Não utilizar metamodelo externo Tudo reside nas classes compiladas do sistema Utilizar ao máximo conceitos como heurísiticas, empirismo, inferência baseada em contexto, etc. Configuração por exceção Reuso de histórico Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 21 de 44
Características gerais >> características gerais Não utilizar metamodelo externo Tudo reside nas classes compiladas do sistema Utilizar ao máximo conceitos como heurísiticas, empirismo, inferência baseada em contexto, etc. Configuração por exceção Reuso de histórico O custo dos geradores tradicionais Custo S 1 S 2 S 3 S n Tempo Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 22 de 44
Características gerais >> histórico Não utilizar metamodelo externo Tudo reside nas classes compiladas do sistema Utilizar ao máximo conceitos como heurísiticas, empirismo, inferência baseada em contexto, etc. Configuração por exceção Reuso de histórico O custo do Merlin Custo S 1 S 2 S 3 Sn Tempo Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 23 de 44
O histórico >> histórico A busca por informações históricas pode ser feita no próprio classpath do sistema Em servidores de aplicação, tudo pode ser compartilhado Em aplicações simples (standalone), as classes com anotações podem ser exportadas junto Classes nos servidores de aplicação Root LIBs classes C 1 S 1 classes C 2 S 2 classes C n S n classes Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 24 de 44
O histórico >> slistaks A busca por informações históricas pode ser feita no próprio classpath do sistema Em servidores de aplicação, tudo pode ser compartilhado Em aplicações simples (standalone), as classes com anotações podem ser exportadas junto Classes nos servidores de aplicação Root LIBs classes C 1 S 1 classes C 2 S 2 classes Histórico C n S n classes Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 25 de 44
Slistaks >> slistaks de graça Informações de contexto, heurísticas, empirismo e inferência são utilizados para: Gerar corretamente nomes para labels Mapear os tipos de controles em função do tipo de dado Adicionar validadores, tamanho, etc. Agrupamentos Utilizando a ocorrência de termos para produzir o conteúdo em comboboxes nome status 12 110 codigo 110 Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 26 de 44
Slistaks de graça >> mais slistaks de graça Google como fonte de informações Relevância de campos pode ser obtida de forma online O maior contexto gratuito do mundo: A internet nome : 212 milhões O termo nome é mais significativo, logo ele é usado na caixa de seleção codigo : 148 milhões Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 27 de 44
Mais slistaks de graça >> ainda slistaks de graça Dicionários de sinônimos Para inferir mapeamentos de controles observacao = informacaocomplementar = outrasinformacoes Todos geram textareas Utilizando um dicionário de sinônimos gratuito para inferir mapeamentos observacao Se observacao é (ou já foi) um textarea, é provável que outrasinformacoes também o seja Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 28 de 44
Ainda slistaks de graça >> eu adoro slistaks Algoritmos de similaridade Para detectar aproximações e inferir correspondências observacao = observacoes Muitos frameworks na web Utilizando um framework externo para identificar similaridades System.out.print( StringMetrics.compare( observacao, observacoes ) ); //imprime 0.8 (entre 0 e 1) Por exemplo, se o valor for maior que 0.5 os termos são conceitualmente iguais. Se observacao é (ou já foi) um textarea, é provável que observacoes também seja Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 29 de 44
Eu adoro slistaks >> agrupamentos Corretores ortográficos Para gerar labels observacao = observação Utilizando corretores ortográficos disponíveis no próprio ambiente Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 30 de 44
Agrupamentos Agrupando controles nas telas Requisito Os campos Cidade, Rua e Número devem ser exibidos em conjunto Criando um agrupamento simples >> dependências A tela Cadastro de Cadastro Clientede Cliente 1 Dicas Endereço Nome Cidade Rua Número 2 3 4 5 6 7 8 A classe de dados @Group(caption= Endereço,fiel ds= cidade,rua,numero ) class Cliente { String nome; Cidade cidade; String rua; String numero; } Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 31 de 44
Dependências >> agentes Vinculando controles nas telas Requisito Se o cliente possuir cheque especial, habilitar limite de crédito Criando dependências simples A tela A classe de dados Cadastro de Cadastro Clientede Cliente Dicas Nome Possui cheque Limite Cancelar Salvar 1 2 3 4 5 6 class Cliente { String nome; @Dependence( limite ) boolean possuicheque; double limite; } 7 8 Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 32 de 44
Agentes >> agentes Derivados da linguagem Eiffel, agentes são elementos que podem ser plugados na IU e executar funções diversas, como: Tratamento de eventos Invocação de regras de negócio Definição de propriedades Execução de Scripts O conceito de agentes Eventos Controle de tela? Scripts Regras de negócio Propriedades Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 33 de 44
Agentes >> agentes Derivados da linguagem Eiffel, agentes são elementos que podem ser plugados na IU e executar funções diversas, como: Tratamento de eventos Invocação de regras de negócio Definição de propriedades Execução de Scripts O conceito de agentes Eventos Controle de tela Agentes Scripts Regras de negócio Propriedades Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 34 de 44
Agentes >> agentes Agentes na execução de regras de negócio Requisito Ao preencher o salário do cliente, se ele não tiver débitos deve ser habilitado um cartão de crédito para ele. Conectando eventos e regras de negócio A tela A classe de dados Cadastro de Cadastro Clientede Cliente Dicas Nome Salário Cartão de crédito Cancelar Salvar 1 2 3 4 5 6 7 8 class Cliente { String nome; @Agent( event={ focuslost }, action={ habilitarcartao }) float salario; boolean cartaocredito; } Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 35 de 44
Agentes >> agentes Agentes na execução de regras de negócio Requisito Ao preencher o salário do cliente, se ele não tiver débitos deve ser habilitado um cartão de crédito para ele. Implementando a regra de negócio 1 2 3 4 5 6 7 8 9 10 public class AlgumasRegras { public void habilitarcartao() { JTextField salario = (JTextField) Merlin.getControle( cliente.salario ); //processa a regra de negócio... JCheckBox cartao = (JCheckBox) Merlin.getControle( cliente.cartaocredito ); cartao.setenabled(!debitos); } } Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 36 de 44
Agentes >> agentes Agentes na execução de regras de negócio Requisito (agora de forma assíncrona) Ao preencher o salário do cliente, se ele não tiver débitos deve ser habilitado um cartão de crédito para ele. Conectando eventos e regras de negócio de forma assíncrona A tela A classe de dados Cadastro de Cadastro Clientede Cliente Dicas Nome Salário Cartão de crédito Cancelar Salvar 1 2 3 4 5 6 7 8 class Cliente { String nome; @Async @Agent( event={ focuslost }, action={ habilitarcartao }) float salario; boolean cartaocredito; } Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 37 de 44
Agentes >> agentes Agentes na definição de propriedades de controles Requisito Aplicar uma borda verde saliente sobre o nome do cliente. Uma interface com controle customizado A tela A classe de dados Cadastro de Cadastro Clientede Cliente Dicas Nome Salário Cartão de crédito Cancelar Salvar 1 2 3 4 5 6 7 8 class Cliente { @Agent( property={ border=borderfac tory.createlineborder(color.green,2) }) String nome; float salario; boolean cartaocredito; } Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 38 de 44
Agentes >> agentes Agentes na execução de scripts (BeanShell, Groovy, etc.) Requisito Criar uma regra externa configurável para calcular o limite de crédito do cliente em função do valor do salário. Utilizando agentes para externalizar comportamentos através de scripts A tela A classe de dados Cadastro de Cadastro Clientede Cliente Dicas Nome Salário Limite de crédito Cancelar Salvar 1 2 3 4 5 6 class Cliente { String nome; @Agent( script={ /scripts/calc.js }) float salario; float limitecredito; } Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 39 de 44
Agentes >> layout Agentes na execução de scripts (BeanShell, Groovy, etc.) Requisito Criar uma regra externa configurável para calcular o limite de crédito do cliente. O script externo escrito em BeanShell /scripts/calc.js 1 var salario = new Float(this.caller.getText()); 2 3 4 5 6 var limite = Merlin.getControle( cliente.limitecredito ); limite.settext(salario * 0.3); Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 40 de 44
Layout >> layout O posicionamento de controles é totalmente executado por algoritmos, os quais utilizam Gerenciadores de layout (TableLayout, JGoodies Forms) Heurísiticas, UI patterns, regras de usabilidade Configurações via anotações Customizações Simples Uso de anotações Complexas Implementação de novos algoritmos Malucas Design manual Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 41 de 44
Layout >> layout Alterando o layout via anotações Modificando algumas coisas Redefinindo a ordem de controles e a posição de labels na tela A tela Cadastro de Cliente Cadastro de Cliente Salário Observações 5 2 Nome Observações 1 2 3 4 5 6 7 A classe de dados class Cliente { @Order(after= observacoes ) String nome; float salario; @Caption(pos=Caption.TOP_LEFT) String observacoes; } Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 42 de 44
Layout >> layout Alterando o layout via anotações Modificando tudo de uma vez Redefinindo a ordem de controles e a posição de todos os labels na tela A tela Cadastro de Cliente Cadastro de Cliente Salário Observações Nome 1 2 3 4 5 6 7 A classe de dados @Caption(pos=Caption.TOP_LEFT) class Cliente { @Order(after= observacoes ) String nome; float salario; String observacoes; } Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 43 de 44
Layout >> layout Criando um layout maluco 1. Cria-se uma classe IU com o layout desejado Um exemplo de layout manual O template TemplateMaluco extends JPanel Cadastro de Cliente Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 44 de 44
Layout >> layout Criando um layout maluco 2. Define-se nomes de controles idênticos aos que serão gerados Um exemplo de layout manual O template TemplateMaluco extends JPanel lblobservacoes Cadastro de Cliente salario lblsalario observacoes lblnome nome Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 45 de 44
Layout >> extensões Criando um layout maluco 3. Executa-se a geração passando o template como parâmetro Merlin.createIhc(Cliente.class, TemplateMaluco.class); Um exemplo de layout manual O template Cadastro de Cliente Cadastro de Cliente Cadastro de Cliente Observações Salário Nome Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 46 de 44
Extensões >> extensões Modificando os controles de tela gerados Uma interface padrão A classe de dados A tela gerada 1 2 3 4 class Cliente { String nome; Cidade naturalidade } Cadastro Cadastro de Cliente de Cliente Dicas Nome Naturalidade Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 47 de 44
Extensões >> extensões Modificando os controles de tela gerados Uma interface com controle customizado A classe de dados A tela gerada 1 2 3 4 5 class Cliente { String nome; @RenderAs(Lookup.class) Cidade naturalidade } Cadastro de Cadastro Clientede Cliente Dicas Nome Naturalidade Cancelar Salvar Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 48 de 44
Extensões >> estágio atual e perspectivas Modificando os controles de tela gerados Uma interface com controle customizado A classe de dados A tela gerada 1 2 3 4 5 class Cliente { String nome; @RenderAs(Lookup.class) Cidade naturalidade } Cadastro de Cadastro Clientede Cliente Dicas Nome Naturalidade Cancelar Salvar Criando o controle customizado 1 2 3 4 class Lookup extends JPanel implements IRenderer { //metodos para binding do controle } Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 49 de 44
Estágio atual e perspectivas Divulgação Alfa release disponível Controles básicos, agentes, layout e anotações essenciais Telas de cadastro simples Parte teórica em desenvolvimento Binding Telas mestre-detalhte Integração com outros frameworks Captação de recursos financeiros Para 2008 Início: Beta release em Swing Final: Beta release em JSF 2009 em diante Gerência de realimentação >> EOF Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 50 de 44
Fim Conteúdo http://merlin.dev.java.net http://merlin.3layer.com.br http://treelayer.dev.java.net Contato http://groups.google.com/group/treelayer-merlin Histórias http://telasdecadastro.blogspot.com Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 51 de 44