Www.3layer.com.br Merlin www.3layer.com.br The First Runtime GUI Generator.

Apresentação em tema: "Www.3layer.com.br Merlin www.3layer.com.br The First Runtime GUI Generator."— Transcrição da apresentação:

1 www.3layer.com.br Merlin www.3layer.com.br The First Runtime GUI Generator

2 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 2 de 44 Sumário Cenário A proposta Comparações Características e Funcionalidades O presente e o futuro EOF >> panorama geral

3 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 3 de 44 Sobre o autor Marcelo Mrack, mmrack@3layer.com.brmmrack@3layer.com.br 30 anos, 9 em TI, 8 em Java Bacharel em C. Computação, UNISC – 2001 Mestre em C. Computação, UFRGS – 2008 Atuação em projetos web e desktop n camadas Arquiteto na 3Layer Tecnologia Arquieto na DevelopIT Consultor e instrutor Hibernate, Java EE Especialidades: IHC, Patterns, geradores, PU Ágil e UML

4 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 4 de 44 Panorama geral Quanto custa construir um sistema Meyers, Brad – User Interface Software Tools (1994,2002) Referências Sistema completo Interface do usuário TC TC elementares 100% 50% 30% 18% Custo de construção 2 2 1 1 1 2 Pesquisas próprias (2005,2006) >> a construção da IU hoje

5 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 5 de 44 A construção da IU hoje O cenário atual 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. As diversas formas de construir interface de usuário e os problemas em comum AbordagensProblemas recorrentes Escrita de código-fonte Uso de ferramentas WYSIWYG 1 Uso de assistentes de criação Geração baseada em modelos Templates MDA 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? >> a ferramenta proposta

6 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 6 de 44 A ferramenta proposta Abdicar totalmente da geração do código-fonte Gerar a TC durante a execução do sistema, através de um processo de interpretação de meta-informações oriundas das próprias classes da aplicação A idéia-chave CAFE class Cliente { String codigo; String nome; } new JFrame.add( Merlin.createIU(Pessoa.class) ).setVisible(true); >> motivação 123 Tempo de projetoTempo de execução 4

7 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 7 de 44 Motivação TC são funções do modelo de dados consistência, aparência, validação, organização, customizações, etc. A dependência da TC em relação ao modelo de dados Modelo de classesTela de Cadastro >> motivação

8 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 8 de 44 Motivação Regras clássicas >> motivação O mapeamento básico entre os elementos Modelo de dadosTela de Cadastro ClasseTela AtributoControle RelacionamentoNavegação

9 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 9 de 44 Motivação Regras clássicas Implementando as regras clássicas ClasseTelaAtributoControleRelacionamentoNavegação public class Cliente { String nome; Cidade naturalidade; boolean ativo; } >> motivação Nome Cadastro de Clientes Ativo Naturalidade SalvarCancelar O cadastro gerado A classe de dados 1 1

10 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 10 de 44 Motivação Regras clássicas Implementando as regras clássicas ClasseTelaAtributoControleRelacionamentoNavegação public class Cliente { String nome; Cidade naturalidade; boolean ativo; } >> motivação Nome Cadastro de Clientes Ativo SalvarCancelar O cadastro gerado A classe de dados 2 2 Naturalidade

11 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 11 de 44 Motivação Regras clássicas Implementando as regras clássicas ClasseTelaAtributoControleRelacionamentoNavegação public class Cliente { String nome; Cidade naturalidade; boolean ativo; } >> o objetivo da ferramenta Nome Cadastro de Clientes Ativo Naturalidade SalvarCancelar O cadastro gerado A classe de dados 3 3

12 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 12 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.createUI(Cliente.class) ).setVisible(true);

13 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 13 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

14 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 14 de 44 O processo 1.Criar as classes de dados 2.Opcionalmente, decorar elas com anotações 3.Dentro da aplicação, invocar Merlin.createUI >> comparação

15 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 15 de 44 Uma pequena comparação A mesma entrada e as diferentes saídas... 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 >> comparação

16 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 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) Um gerador tradicional (a)Merlin (b) Nome Cadastro de Usuário Dicas O campo nome é obrigatório. O campo logradouro é obrigatório O campo número é obrigatório Logradouro Rua São Sepé Número 256 Complemento Cidade Porto Alegre Endereço Observações SalvarCancelar nome usuario logradouro Rua São Sepé numero 256 complemento cidade Porto Alegre observacoes SalvarCancelar codigo >> comparação

17 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 17 de 44 Uma pequena comparação A mesma entrada e as diferentes saídas... >> comparação Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) Um gerador tradicional (a)Merlin (b) Nome Cadastro de Usuário Dicas O campo nome é obrigatório. O campo logradouro é obrigatório O campo número é obrigatório Logradouro Rua São Sepé Número 256 Complemento Cidade Porto Alegre Endereço Observações SalvarCancelar nome usuario logradouro Rua São Sepé numero 256 complemento cidade Porto Alegre observacoes SalvarCancelar codigo Porque Observações é uma caixa de texto de múltiplas linhas?

18 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 18 de 44 Uma pequena comparação A mesma entrada e as diferentes saídas... Nome Cadastro de Usuário Dicas O campo nome é obrigatório. O campo logradouro é obrigatório O campo número é obrigatório Logradouro Rua São Sepé Número 256 Complemento Cidade Endereço Observações SalvarCancelar nome usuario logradouro Rua São Sepé numero 256 complemento cidade observacoes SalvarCancelar codigo Porque é Observações e não Observacoes? >> comparação Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) Um gerador tradicional (a)Merlin (b)

19 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 19 de 44 Uma pequena comparação A mesma entrada e as diferentes saídas... >> características gerais Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) Um gerador tradicional (a)Merlin (b) Nome Cadastro de Usuário Dicas O campo nome é obrigatório. O campo logradouro é obrigatório O campo número é obrigatório Logradouro Rua São Sepé Número 256 Complemento Cidade Porto Alegre Endereço Observações SalvarCancelar nome usuario logradouro Rua São Sepé numero 256 complemento cidade Porto Alegre observacoes SalvarCancelar codigo Qual é o campo da cidade exibido na caixa de seleção?

20 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 20 de 44 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 e GWT Outras aplicações podem ser SWT, XUL Baseada no modelo de objetos do sistema Ter uma API minimalista Anotações Merlin.createUI() Reusar (e apostar em novos) padrões do Java 220, 317 e 318 – EJB e JPA 299 – Web Beans (JBoss Seam) 295 – Java Beans Binding 227 – Binding/Data Acess for J2EE 273 – DesignTime Bean 303 – Bean Validation (Hibernate Validator) 094 – Java Rules Engine (JBoss Drools) >> características gerais

21 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 21 de 44 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 >> características gerais

22 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 22 de 44 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 Tempo Custo S1S1 S2S2 S3S3 SnSn >> características gerais

23 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 23 de 44 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 do Merlin Tempo Custo S1S1 S2S2 S3S3 SnSn >> histórico

24 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 24 de 44 O 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 >> histórico RootLIBs classes S1S1 S2S2 SnSn C1C1 C2C2 CnCn

25 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 25 de 44 O 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 >> slistaks RootLIBs Histórico classes S1S1 S2S2 SnSn C1C1 C2C2 CnCn

26 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 26 de 44 Slistaks 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 12 110 nome status codigo 110 >> slistaks de graça

27 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 27 de 44 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 codigo : 148 milhões O termo nome é mais significativo, logo ele é usado na caixa de seleção >> mais slistaks de graça

28 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 28 de 44 Mais 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 >> ainda slistaks de graça Se observacao é (ou já foi) um textArea, é provável que outrasInformacoes também o seja

29 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 29 de 44 Ainda slistaks de graça 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 assumimos que os termos são iguais. Assim, se observacao é (ou já foi) um textArea, é provável que observacoes também o seja. >> eu adoro slistaks

30 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 30 de 44 Eu adoro slistaks Corretores ortográficos Para gerar labels observacao = observação Utilizando corretores ortográficos disponíveis no próprio ambiente >> agrupamentos

31 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 31 de 44 Agrupamentos Agrupando controles nas telas Requisito Os campos Cidade, Rua e Número devem ser exibidos em conjunto Criando um agrupamento simples A classe de dadosA tela @Group(caption=Endereço,fields =cidade,rua,numero) class Cliente { String nome; Cidade cidade; String rua; String numero; } Cadastro de Cliente Dicas Nome SalvarCancelar Cadastro de Cliente 1 2 3 4 5 6 7 8 >> dependências Rua Número Cidade Endereço

32 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 32 de 44 Dependências Vinculando controles nas telas Requisito Se o cliente possuir cheque especial, habilitar limite de crédito Criando dependências simples A classe de dadosA tela class Cliente { String nome; @Dependence(limite) boolean possuiCheque; double limite; } Cadastro de Cliente Dicas Nome SalvarCancelar Cadastro de Cliente Limite Possui cheque 1 2 3 4 5 6 >> agentes

33 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 33 de 44 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 Scripts Regras de negócio Propriedades Controle de tela >> agentes ?

34 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 34 de 44 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 Scripts Regras de negócio Propriedades Controle de tela Agentes >> agentes

35 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 35 de 44 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 classe de dadosA tela class Cliente { String nome; @Agent( event={focusLost}, action={habilitarCartao}) float salario; boolean cartaoCredito; } Cadastro de Cliente Dicas Nome SalvarCancelar Cadastro de Cliente Salário Cartão de crédito 1 2 3 4 5 6 7 8 >> agentes

36 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 36 de 44 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 classe de dadosA tela class Cliente { String nome; @Async @Agent( event={focusLost}, action={habilitarCartao}) float salario; boolean cartaoCredito; } Cadastro de Cliente Dicas Nome SalvarCancelar Cadastro de Cliente Salário Cartão de crédito 1 2 3 4 5 6 7 8 >> agentes

37 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 37 de 44 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 public class AlgumasRegras { public void habilitarCartao() { @In JTextField salario; @In JCheckBox cartao; boolean debitos = true; //processa regra de negócio... cartao.setEnabled(!debitos); } 1 2 3 4 5 6 7 8 9 10 >> agentes

38 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 38 de 44 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 classe de dadosA tela class Cliente { @Agent( property={border=BorderFactory. createLineBorder(Color.green,2) }) String nome; float salario; boolean cartaoCredito; } Cadastro de Cliente Dicas Nome SalvarCancelar Cadastro de Cliente Salário Cartão de crédito 1 2 3 4 5 6 7 8 >> agentes

39 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 39 de 44 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 classe de dadosA tela class Cliente { String nome; @Agent( script={/scripts/calc.js}) float salario; float limiteCredito; } Cadastro de Cliente Dicas Nome SalvarCancelar Cadastro de Cliente Salário Limite de crédito 1 2 3 4 5 6 >> agentes 7

40 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 40 de 44 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. O script externo escrito em BeanShell var salario = new Float(this.caller.getText()); var limite = Merlin.getControle(cliente.limiteCredito); limite.setText(salario * 0.3); 1 2 3 4 5 6 /scripts/calc.js >> layout

41 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 41 de 44 Layout O posicionamento de controles é totalmente executado por algoritmos, os quais utilizam Gerenciadores de layout (TableLayout, JGoodies Forms, MigLayout) 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 >> layout

42 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 42 de 44 Layout Alterando o layout via anotações Modificando algumas coisas Redefinindo a ordem de controles e a posição de labels na tela A classe de dadosA tela class Cliente { @Order(after=observacoes) String nome; float salario; @Caption(pos=Caption.TOP_LEFT) String observacoes; } Cadastro de Cliente Salário 1 2 3 4 5 6 Nome Observações 7 2 5 >> layout

43 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 43 de 44 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 classe de dadosA tela @Caption(pos=Caption.TOP_LEFT) class Cliente { @Order(after=observacoes) String nome; float salario; String observacoes; } Cadastro de Cliente Salário 1 2 3 4 5 6 Nome Observações 7 >> layout

44 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 44 de 44 Layout Um layout maluco Eu quero do meu jeito >> layout A tela desejada Cadastro de Cliente Salário Nome Observações

45 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 45 de 44 Layout Criando um layout maluco 1.Cria-se uma classe IU com o layout desejado TemplateMaluco extends JPanel { //... } Cadastro de Cliente >> layout A tela desejada

46 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 46 de 44 Layout Criando um layout maluco 2.Define-se nomes de controles idênticos aos que serão gerados Cadastro de Cliente lblSalario txtSalario lblNome cliente.nome txtaObservacoes lblObservacoes >> layout A tela desejada TemplateMaluco extends JPanel { //... }

47 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 47 de 44 Layout Criando um layout maluco 3.Executa-se a geração passando o template como parâmetro Merlin.createIhc(Cliente.class, TemplateMaluco.class); >> extensões O resultado final Cadastro de Cliente Salário Nome Observações

48 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 48 de 44 Extensões Modificando os controles de tela gerados Uma interface padrão A classe de dadosA tela gerada Cadastro de Cliente Dicas Nome Naturalidade SalvarCancelar Cadastro de Cliente class Cliente { String nome; Cidade naturalidade } 1 2 3 4 >> extensões

49 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 49 de 44 Extensões Modificando os controles de tela gerados Uma interface com controle customizado A classe de dadosA tela gerada class Cliente { String nome; @RenderAs(Lookup.class) Cidade naturalidade } Cadastro de Cliente Dicas Nome Naturalidade SalvarCancelar Cadastro de Cliente 1 2 3 4 5 >> extensões

50 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 50 de 44 Extensões Modificando os controles de tela gerados Criando o controle customizado class Lookup extends JPanel //faz como quiser } Uma interface com controle customizado A classe de dadosA tela gerada class Cliente { String nome; @RenderAs(Lookup.class) Cidade naturalidade } Cadastro de Cliente Dicas Nome Naturalidade SalvarCancelar Cadastro de Cliente 1 2 3 4 5 1 2 3 >> demos

51 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 51 de 44 Demos Dois demos simples Criando uma tela simples http://3layer.no-ip.info:6666/confluence/pages/viewpage.action?pageId=6979626 Usando renderizadores e binders cutomizados http://3layer.no-ip.info:6666/confluence/display/MERLIN/Renderizadores+e+Binders >> estágio atual e perspectivas

52 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 52 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 2008/2 Beta release em Swing, Alpha release em JSF 2009 em diante Desenvolvimento efetivo do projeto, gerência de realimentação 2010 produto para o mercado >> EOF

53 www.3layer.com.br Merlin - The First Runtime GUI Generatorslide 53 de 44 Fim www.3layer.com.br Conteúdo http://merlin.dev.java.net http://merlin.3layer.com.br http://treelayer.dev.java.net http://treelayer-merlin.blogspot.com Contato http://groups.google.com/group/treelayer-merlin Histórias http://telasdecadastro.blogspot.com