1. www.3layer.com.br www.3layer.com.br Merlin Um Novo Horizonte na Criao das Telas de Cadastro

2. www.3layer.com.br Sumrio >> panorama geral Cenrio A proposta Comparaes Caractersticas e Funcionalidades O presente e o futuro EOF Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 2 de 44

3. www.3layer.com.br Sobre o autor Marcelo Mrack, mmrack@gmail.com 29 anos, 8 em TI, 6 em Java Bacharel em C. Computao, UNISC 2001 Mestrando em C. Computao, UFRGS 2006 Atuao 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 Criao das Telas de Cadastro slide 3 de 44

4. www.3layer.com.br Panorama geral >> a construo da IU hoje Quanto custa construir um sistema Custo de construo Sistema completo 100% 1 Interface do usurio 50% 1 TC 30% 2 TC elementares 18% 2 Referncias 1 Meyers, Brad User Interface Software Tools (1994,2002) 2 Pesquisas prprias (2005,2006) Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 4 de 44

5. www.3layer.com.br A construo da IU hoje >> a ferramenta proposta O cenrio atual As diversas formas de construir interface de usurio e os problemas em comum Abordagens Problemas recorrentes Escrita de cdigo-fonte Tempo elevado de construo Uso de ferramentas WYSIWYG1 Quanto custa criar um template? Uso de assistentes de criao Demora nas alteraes Como refatorar classes j geradas? Gerao baseada em modelos E se o cdigo j foi alterado? Templates Falta de reuso MDA Posso reusar o label Nome do cliente em projetos diferentes? Gerncia de cdigo Cdigo template ou no? E a verso? 1. ( WYSIWYG: /wziwg/ ) 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 execuo. Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 5 de 44

6. www.3layer.com.br A ferramenta proposta >> motivao Abdicar totalmente da gerao do cdigo-fonte Em outras palavras, gerar a TC durante a execuo do sistema, atravs de um processo de interpretao de meta-informaes oriundas do prprio modelo de dados A idia-chave class Cliente { new JFrame.add( String codigo; CAFE Merlin.createIhc(Pessoa.class) String nome; ).setVisible(true); } Tempo de projeto Tempo de execuo Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 6 de 44

7. www.3layer.com.br Motivao >> motivao TC so funes do modelo de dados A dependncia da TC em relao ao modelo de dados Modelo de classes Tela de Cadastro consistncia, aparncia, validao, organizao, customizaes, etc. Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 7 de 44

8. www.3layer.com.br Motivao >> motivao Regras clssicas Classe Tela Atributo Controle Relacionamento Link Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 8 de 44

9. www.3layer.com.br Motivao >> motivao Regras clssicas Implementando as regras clssicas Classe Tela A classe de dados Atributo Controle public class Cliente { 1 String nome; Relacionamento Link Cidade naturalidade; boolean ativo; } O cadastro gerado Cadastro de Clientes 1 Nome Naturalidade Ativo Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 9 de 44

10. www.3layer.com.br Motivao >> motivao Regras clssicas Implementando as regras clssicas Classe Tela A classe de dados Atributo Controle public class Cliente { 2 String nome; Relacionamento Link Cidade naturalidade; boolean ativo; } O cadastro gerado Cadastro de Clientes Nome 2 Naturalidade Ativo Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 10 de 44

11. www.3layer.com.br Motivao >> o objetivo da ferramenta Regras clssicas Implementando as regras clssicas Classe Tela A classe de dados Atributo Controle public class Cliente { String nome; Relacionamento Link Cidade naturalidade; 3 boolean ativo; } O cadastro gerado Cadastro de Clientes Nome Naturalidade Ativo 3 Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 11 de 44

12. www.3layer.com.br O objetivo da ferramenta >> algumas definies Gerar TCs elementares com o menor esforo possvel Um exemplo de interface elementar a ser gerada O cdigo essencial new JFrame().add( Merlin.createIhc(Usuario.class) ).setVisible(true); Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 12 de 44

13. www.3layer.com.br Algunas definies importantes >> o processo Contexto a relao entre o elemento e o ambiente em que ele ocorre Algo importante dependendo do local onde ele est Empirismo o conhecimento baseado na experincia Eu sei porque eu j fiz isso reativo Heurstica o conhecimento baseado em aproximaes Eu acho que sei porque eu j fiz algo parecido pr-ativa Inferncia Obtm-se novos conhecimentos a partir de informaes existentes Quanto mais contexto, melhor Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 13 de 44

14. www.3layer.com.br O processo >> comparao 1. Cria-se as classes de dados 2. Opcionalmente, decora-se elas com anotaes 3. Dentro da aplicao, invoca-se Merlin.createIhc sobre a classe ou objeto Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 14 de 44

15. www.3layer.com.br Uma pequena comparao >> comparao A mesma entrada e as diferentes sadas... Uma classe de dados para teste ... ... ou em notao UML public class Usuario { long codigo; String nome; String observacoes; String logradouro; int numero; Cidade cidade; String complemento; } Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 15 de 44

16. www.3layer.com.br Uma pequena comparao >> comparao A mesma entrada e as diferentes sadas... Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) Um gerador tradicional (a) Merlin (b) usuario Cadastro de Usurio Dicas Dicas codigo O campo nome obrigatrio. O campo logradouro obrigatrio nome O campo nmero obrigatrio cidade Nome logradouro Rua So Sep Endereo numero 256 Cidade complemento Logradouro Rua So Sep observacoes Nmero 256 Complemento Cancelar Salvar Observaes Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 16 de 44

17. www.3layer.com.br Uma pequena comparao >> comparao A mesma entrada e as diferentes sadas... Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) Um gerador tradicional (a) Merlin (b) usuario Cadastro de Usurio Dicas Dicas codigo O campo nome obrigatrio. O campo logradouro obrigatrio nome O campo nmero obrigatrio cidade Nome logradouro Rua So Sep Endereo numero 256 Cidade complemento Logradouro Rua So Sep observacoes Nmero 256 Complemento Cancelar Salvar Observaes Porque Observaes uma caixa de texto de mltiplas linhas? Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 17 de 44

18. www.3layer.com.br Uma pequena comparao >> comparao A mesma entrada e as diferentes sadas... Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) Um gerador tradicional (a) Merlin (b) usuario Cadastro de Usurio Dicas Dicas codigo O campo nome obrigatrio. O campo logradouro obrigatrio nome O campo nmero obrigatrio cidade Nome logradouro Rua So Sep Endereo numero 256 Cidade complemento Logradouro Rua So Sep observacoes Nmero 256 Complemento Cancelar Salvar Observaes Porque Observaes e no Observacoes? Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 18 de 44

19. www.3layer.com.br Uma pequena comparao >> caractersticas gerais A mesma entrada e as diferentes sadas... Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b) Um gerador tradicional (a) Merlin (b) usuario Cadastro de Usurio Dicas Dicas codigo O campo nome obrigatrio. O campo logradouro obrigatrio nome O campo nmero obrigatrio cidade Nome logradouro Rua So Sep Endereo numero 256 Cidade complemento Logradouro Rua So Sep observacoes Nmero 256 Complemento Cancelar Salvar Observaes Qual o campo da cidade exibido na caixa de seleo? Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 19 de 44

20. www.3layer.com.br Caractersticas gerais >> caractersticas gerais Essncia No produzir cdigo-fonte, mas sim renderizar a interface do sistema em tempo de execuo Ser independente de framework grfico Prottipo em Swing Previso para JSF Outras aplicaes podem ser SWT, XUL e GWT Baseada no modelo de objetos do sistema Ter uma API minimalista Anotaes Merlin.createIhc() Reusar (e apostar em novos) padres EJB3 Persistence JSR220 Hibernate Validator JSR299 (JBoss Seam) Java Beans Binding JSR295 Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 20 de 44

21. www.3layer.com.br Caractersticas gerais >> caractersticas gerais No utilizar metamodelo externo Tudo reside nas classes compiladas do sistema Utilizar ao mximo conceitos como heursiticas, empirismo, inferncia baseada em contexto, etc. Configurao por exceo Reuso de histrico Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 21 de 44

22. www.3layer.com.br Caractersticas gerais >> caractersticas gerais No utilizar metamodelo externo Tudo reside nas classes compiladas do sistema Utilizar ao mximo conceitos como heursiticas, empirismo, inferncia baseada em contexto, etc. Configurao por exceo O custo dos geradores tradicionais Reuso de histrico Custo S1 S2 S3 Sn Tempo Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 22 de 44

23. www.3layer.com.br Caractersticas gerais >> histrico No utilizar metamodelo externo Tudo reside nas classes compiladas do sistema Utilizar ao mximo conceitos como heursiticas, empirismo, inferncia baseada em contexto, etc. Configurao por exceo O custo do Merlin Reuso de histrico Custo S1 S2 S3 Sn Tempo Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 23 de 44

24. www.3layer.com.br O histrico >> histrico A busca por informaes histricas pode ser feita no prprio classpath do sistema Em servidores de aplicao, tudo pode ser compartilhado Em aplicaes simples (standalone), as classes com anotaes podem ser exportadas junto Classes nos servidores de aplicao Root LIBs classes C1 S1 classes C2 S2 classes Cn Sn classes Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 24 de 44

25. www.3layer.com.br O histrico >> slistaks A busca por informaes histricas pode ser feita no prprio classpath do sistema Em servidores de aplicao, tudo pode ser compartilhado Em aplicaes simples (standalone), as classes com anotaes podem ser exportadas junto Classes nos servidores de aplicao Root LIBs classes C1 S1 classes C2 S2 classes Histrico Cn Sn classes Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 25 de 44

26. www.3layer.com.br Slistaks >> slistaks de graa Informaes de contexto, heursticas, empirismo e inferncia so utilizados para: Gerar corretamente nomes para labels Mapear os tipos de controles em funo do tipo de dado Adicionar validadores, tamanho, etc. Agrupamentos Utilizando a ocorrncia de termos para produzir o contedo em comboboxes nome 110 status 12 codigo 110 Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 26 de 44

27. www.3layer.com.br Slistaks de graa >> mais slistaks de graa Google como fonte de informaes Relevncia de campos pode ser obtida de forma online O maior contexto gratuito do mundo: A internet nome : 212 milhes O termo nome mais significativo, logo ele usado na caixa de seleo codigo : 148 milhes Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 27 de 44

28. www.3layer.com.br Mais slistaks de graa >> ainda slistaks de graa Dicionrios de sinnimos Para inferir mapeamentos de controles observacao = informacaoComplementar = outrasInformacoes Todos geram textAreas Utilizando um dicionrio de sinnimos gratuito para inferir mapeamentos observacao Se observacao (ou j foi) um textArea, provvel que outrasInformacoes tambm o seja Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 28 de 44

29. www.3layer.com.br Ainda slistaks de graa >> eu adoro slistaks Algoritmos de similaridade Para detectar aproximaes e inferir correspondncias 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 so conceitualmente iguais. Se observacao (ou j foi) um textArea, provvel que observacoes tambm seja Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 29 de 44

30. www.3layer.com.br Eu adoro slistaks >> agrupamentos Corretores ortogrficos Para gerar labels observacao = observao Utilizando corretores ortogrficos disponveis no prprio ambiente Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 30 de 44

31. www.3layer.com.br Agrupamentos >> dependncias Agrupando controles nas telas Requisito Os campos Cidade, Rua e Nmero devem ser exibidos em conjunto Criando um agrupamento simples A tela A classe de dados Cadastro de Clientede Cliente Cadastro 1 @Group(caption=Endereo,fiel Dicas 2 ds=cidade,rua,numero) Nome 3 class Cliente { Endereo 4 String nome; Cidade 5 Cidade cidade; Rua 6 String rua; Nmero 7 String numero; 8 } Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 31 de 44

32. www.3layer.com.br Dependncias >> agentes Vinculando controles nas telas Requisito Se o cliente possuir cheque especial, habilitar limite de crdito Criando dependncias simples A tela A classe de dados Cadastro de Clientede Cliente Cadastro 1 class Cliente { Dicas 2 String nome; Nome 3 @Dependence(limite) Possui cheque 4 boolean possuiCheque; Limite 5 double limite; Cancelar Salvar 6 } 7 8 Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 32 de 44

33. www.3layer.com.br Agentes >> agentes Derivados da linguagem Eiffel, agentes so elementos que podem ser plugados na IU e executar funes diversas, como: Tratamento de eventos Invocao de regras de negcio Definio de propriedades O conceito de agentes Execuo de Scripts Eventos Controle Scripts de tela ? Regras de negcio Propriedades Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 33 de 44

34. www.3layer.com.br Agentes >> agentes Derivados da linguagem Eiffel, agentes so elementos que podem ser plugados na IU e executar funes diversas, como: Tratamento de eventos Invocao de regras de negcio Definio de propriedades O conceito de agentes Execuo de Scripts Eventos Controle Scripts de Agentes tela Regras de negcio Propriedades Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 34 de 44

35. www.3layer.com.br Agentes >> agentes Agentes na execuo de regras de negcio Requisito Ao preencher o salrio do cliente, se ele no tiver dbitos deve ser habilitado um carto de crdito para ele. Conectando eventos e regras de negcio A tela A classe de dados Cadastro de Clientede Cliente Cadastro 1 class Cliente { Dicas 2 String nome; Nome 3 @Agent( Salrio 4 event={focusLost}, Carto de crdito 5 action={habilitarCartao}) Cancelar Salvar 6 float salario; 7 boolean cartaoCredito; 8 } Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 35 de 44

36. www.3layer.com.br Agentes >> agentes Agentes na execuo de regras de negcio Requisito Ao preencher o salrio do cliente, se ele no tiver dbitos deve ser habilitado um carto de crdito para ele. Implementando a regra de negcio 1 public class AlgumasRegras { 2 public void habilitarCartao() { 3 JTextField salario = (JTextField) 4 Merlin.getControle(cliente.salario); 5 //processa a regra de negcio... 6 JCheckBox cartao = (JCheckBox) 7 Merlin.getControle(cliente.cartaoCredito); 8 cartao.setEnabled(!debitos); 9 } 10 } Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 36 de 44

37. www.3layer.com.br Agentes >> agentes Agentes na execuo de regras de negcio Requisito (agora de forma assncrona) Ao preencher o salrio do cliente, se ele no tiver dbitos deve ser habilitado um carto de crdito para ele. Conectando eventos e regras de negcio de forma assncrona A tela A classe de dados Cadastro de Clientede Cliente Cadastro 1 class Cliente { Dicas 2 String nome; Nome 3 @Async @Agent( Salrio 4 event={focusLost}, Carto de crdito 5 action={habilitarCartao}) Cancelar Salvar 6 float salario; 7 boolean cartaoCredito; 8 } Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 37 de 44

38. www.3layer.com.br Agentes >> agentes Agentes na definio 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 Clientede Cliente Cadastro 1 class Cliente { Dicas 2 @Agent( Nome 3 property={border=BorderFac Salrio tory.createLineBorder(Color 4 .green,2)}) Carto de crdito 5 String nome; Cancelar Salvar 6 float salario; 7 boolean cartaoCredito; 8 } Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 38 de 44

39. www.3layer.com.br Agentes >> agentes Agentes na execuo de scripts (BeanShell, Groovy, etc.) Requisito Criar uma regra externa configurvel para calcular o limite de crdito do cliente em funo do valor do salrio. Utilizando agentes para externalizar comportamentos atravs de scripts A tela A classe de dados Cadastro de Clientede Cliente Cadastro 1 class Cliente { Dicas 2 String nome; Nome 3 @Agent( Salrio script={/scripts/calc.js}) 4 float salario; Limite de crdito 5 float limiteCredito; Cancelar Salvar 6 } Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 39 de 44

40. www.3layer.com.br Agentes >> layout Agentes na execuo de scripts (BeanShell, Groovy, etc.) Requisito Criar uma regra externa configurvel para calcular o limite de crdito do cliente. O script externo escrito em BeanShell /scripts/calc.js 1 var salario = new Float(this.caller.getText()); 2 3 var limite = 4 Merlin.getControle(cliente.limiteCredito); 5 6 limite.setText(salario * 0.3); Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 40 de 44

41. www.3layer.com.br Layout >> layout O posicionamento de controles totalmente executado por algoritmos, os quais utilizam Gerenciadores de layout (TableLayout, JGoodies Forms) Heursiticas, UI patterns, regras de usabilidade Configuraes via anotaes Customizaes Simples Uso de anotaes Complexas Implementao de novos algoritmos Malucas Design manual Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 41 de 44

42. www.3layer.com.br Layout >> layout Alterando o layout via anotaes Modificando algumas coisas Redefinindo a ordem de controles e a posio de labels na tela A tela A classe de dados Cadastro de Clientede Cliente Cadastro 1 class Cliente { Salrio 2 @Order(after=observacoes) Observaes 3 String nome; Observaes 5 4 float salario; 5 @Caption(pos=Caption.TOP_LEFT) 2 Nome 6 String observacoes; 7 } Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 42 de 44

43. www.3layer.com.br Layout >> layout Alterando o layout via anotaes Modificando tudo de uma vez Redefinindo a ordem de controles e a posio de todos os labels na tela A tela A classe de dados Cadastro de Clientede Cliente Cadastro 1 @Caption(pos=Caption.TOP_LEFT) Salrio 2 class Cliente { Observaes 3 @Order(after=observacoes) 4 String nome; 5 float salario; Nome 6 String observacoes; 7 } Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 43 de 44

44. www.3layer.com.br 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 Criao das Telas de Cadastro slide 44 de 44

45. www.3layer.com.br Layout >> layout Criando um layout maluco 2. Define-se nomes de controles idnticos aos que sero gerados Um exemplo de layout manual O template TemplateMaluco extends JPanel Cadastro de Cliente salario lblSalario lblObservacoes observacoes lblNome nome Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 45 de 44

46. www.3layer.com.br Layout >> extenses Criando um layout maluco 3. Executa-se a gerao passando o template como parmetro Merlin.createIhc(Cliente.class, TemplateMaluco.class); Um exemplo de layout manual O template Cadastro de Cliente Cadastro de Clientede Cliente Cadastro Salrio Observaes Nome Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 46 de 44

47. www.3layer.com.br Extenses >> extenses Modificando os controles de tela gerados Uma interface padro A classe de dados A tela gerada 1 class Cliente { Cadastro de Cliente Cliente Cadastro de Dicas 2 String nome; Nome 3 Cidade naturalidade Naturalidade 4 } Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 47 de 44

48. www.3layer.com.br Extenses >> extenses Modificando os controles de tela gerados Uma interface com controle customizado A classe de dados A tela gerada 1 class Cliente { Cadastro de Clientede Cliente Cadastro Dicas 2 String nome; Nome 3 @RenderAs(Lookup.class) Naturalidade 4 Cidade naturalidade 5 } Cancelar Salvar Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 48 de 44

49. www.3layer.com.br Extenses >> estgio atual e perspectivas Modificando os controles de tela gerados Uma interface com controle customizado A classe de dados A tela gerada 1 class Cliente { Cadastro de Clientede Cliente Cadastro Dicas 2 String nome; Nome 3 @RenderAs(Lookup.class) Naturalidade 4 Cidade naturalidade 5 } Cancelar Salvar Criando o controle customizado 1 class Lookup extends JPanel 2 implements IRenderer { 3 //metodos para binding do controle 4 } Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 49 de 44

50. www.3layer.com.br Estgio atual e perspectivas >> EOF Divulgao Alfa release disponvel Controles bsicos, agentes, layout e anotaes essenciais Telas de cadastro simples Parte terica em desenvolvimento Binding Telas mestre-detalhte Integrao com outros frameworks Captao de recursos financeiros Para 2008 Incio: Beta release em Swing Final: Beta release em JSF 2009 em diante Gerncia de realimentao Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 50 de 44

51. www.3layer.com.br Fim www.3layer.com.br Contedo http://merlin.dev.java.net http://merlin.3layer.com.br http://treelayer.dev.java.net Contato http://groups.google.com/group/treelayer-merlin Histrias http://telasdecadastro.blogspot.com Merlin - Um Novo Horizonte na Criao das Telas de Cadastro slide 51 de 44