Merlin The First Runtime GUI Generator

Transcrição

1 Merlin The First Runtime GUI Generator

2 Sumário >> panorama geral Cenário A proposta Comparações Características e Funcionalidades O presente e o futuro EOF Merlin - The First Runtime GUI Generator slide 2 de 44

3 Sobre o autor Marcelo Mrack, mmrack@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 Merlin - The First Runtime GUI Generator slide 3 de 44

4 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 - The First Runtime GUI Generator slide 4 de 44

5 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 - The First Runtime GUI Generator slide 5 de 44

6 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 >> motivação A idéia-chave Tempo de projeto Tempo de execução class Cliente { String codigo; String nome; } CAFE new JFrame.add( Merlin.createIU(Pessoa.class) ).setvisible(true); Merlin - The First Runtime GUI Generator slide 6 de 44

7 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 - The First Runtime GUI Generator slide 7 de 44

8 Motivação Regras clássicas >> motivação O mapeamento básico entre os elementos Modelo de dados Classe Atributo Relacionamento Tela de Cadastro Tela Controle Navegação Merlin - The First Runtime GUI Generator slide 8 de 44

9 Motivação Regras clássicas Classe Atributo Relacionamento Tela Controle Navegação Implementando as regras clássicas 1 A classe de dados public class Cliente { String nome; Cidade naturalidade; boolean ativo; } O cadastro gerado >> motivação Cadastro de Clientes 1 Nome Naturalidade Ativo Cancelar Salvar Merlin - The First Runtime GUI Generator slide 9 de 44

10 Motivação Regras clássicas Classe Atributo Relacionamento Tela Controle Navegação 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 - The First Runtime GUI Generator slide 10 de 44

11 Motivação Regras clássicas Classe Atributo Relacionamento Tela Controle Navegação Implementando as regras clássicas A classe de dados public class Cliente { String nome; 3 Cidade naturalidade; boolean ativo; } O cadastro gerado >> o objetivo da ferramenta Cadastro de Clientes Nome Naturalidade Ativo 3 Cancelar Salvar Merlin - The First Runtime GUI Generator slide 11 de 44

12 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); Merlin - The First Runtime GUI Generator slide 12 de 44

13 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 - The First Runtime GUI Generator slide 13 de 44

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

15 Uma pequena comparação A mesma entrada e as diferentes saídas... >> comparação Uma classe de dados para teste ou em notação UML public class Usuario { long codigo; String nome; String observacoes; String logradouro; int numero; Cidade cidade; String complemento; } Merlin - The First Runtime GUI Generator slide 15 de 44

16 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 Porto Alegre logradouro Rua São Sepé numero 256 complemento observacoes Cancelar Salvar Nome Endereço Cidade Porto Alegre Logradouro Rua São Sepé Número 256 Complemento Observações Cancelar Salvar Merlin - The First Runtime GUI Generator slide 16 de 44

17 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 Porto Alegre logradouro Rua São Sepé numero 256 complemento observacoes Cancelar Salvar Nome Endereço Cidade Porto Alegre 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 - The First Runtime GUI Generator slide 17 de 44

18 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 - The First Runtime GUI Generator slide 18 de 44

19 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 Porto Alegre logradouro Rua São Sepé numero 256 complemento observacoes Cancelar Salvar Nome Endereço Cidade Porto Alegre 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 - The First Runtime GUI Generator slide 19 de 44

20 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 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) Merlin - The First Runtime GUI Generator slide 20 de 44

21 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 - The First Runtime GUI Generator slide 21 de 44

22 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 - The First Runtime GUI Generator slide 22 de 44

23 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 - The First Runtime GUI Generator slide 23 de 44

24 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 - The First Runtime GUI Generator slide 24 de 44

25 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 - The First Runtime GUI Generator slide 25 de 44

26 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 codigo 110 Merlin - The First Runtime GUI Generator slide 26 de 44

27 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 - The First Runtime GUI Generator slide 27 de 44

28 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 Se observacao é (ou já foi) um textarea, é provável que outrasinformacoes também o seja Merlin - The First Runtime GUI Generator slide 28 de 44

29 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 assumimos que os termos são iguais. Assim, se observacao é (ou já foi) um textarea, é provável que observacoes também o seja. Merlin - The First Runtime GUI Generator slide 29 de 44

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

31 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 A classe de dados Endereço,fields = cidade,rua,numero ) class Cliente { String nome; Cidade cidade; String rua; String numero; } Cancelar Salvar Merlin - The First Runtime GUI Generator slide 31 de 44

32 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 class Cliente { String limite ) boolean possuicheque; double limite; } Merlin - The First Runtime GUI Generator slide 32 de 44

33 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 - The First Runtime GUI Generator slide 33 de 44

34 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 - The First Runtime GUI Generator slide 34 de 44

35 Agentes na execução de regras de negócio Agentes 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. >> agentes 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 class Cliente { String event={ focuslost }, action={ habilitarcartao }) float salario; boolean cartaocredito; } Merlin - The First Runtime GUI Generator slide 35 de 44

36 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 class Cliente { event={ focuslost }, action={ habilitarcartao }) float salario; boolean cartaocredito; } Merlin - The First Runtime GUI Generator slide 36 de 44

37 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 public class AlgumasRegras { public void habilitarcartao() JTextField JCheckBox cartao; boolean debitos = true; //processa regra de negócio... cartao.setenabled(!debitos); } } Merlin - The First Runtime GUI Generator slide 37 de 44

38 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 class Cliente property={ border=borderfactory. createlineborder(color.green,2) }) String nome; float salario; boolean cartaocredito; } Merlin - The First Runtime GUI Generator slide 38 de 44

39 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 class Cliente { String script={ /scripts/calc.js }) float salario; float limitecredito; } Merlin - The First Runtime GUI Generator slide 39 de 44

40 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 var salario = new Float(this.caller.getText()); var limite = Merlin.getControle( cliente.limitecredito ); limite.settext(salario * 0.3); Merlin - The First Runtime GUI Generator slide 40 de 44

41 Layout >> 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 Merlin - The First Runtime GUI Generator slide 41 de 44

42 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 A classe de dados Cadastro de Cliente Cadastro de Cliente Salário Observações 5 2 Nome Observações class Cliente observacoes ) String nome; float String observacoes; } Merlin - The First Runtime GUI Generator slide 42 de 44

43 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 A classe de dados Cadastro de Cliente Cadastro de Cliente Salário Observações Nome class Cliente observacoes ) String nome; float salario; String observacoes; } Merlin - The First Runtime GUI Generator slide 43 de 44

44 Layout >> layout Um layout maluco Eu quero do meu jeito A tela desejada Cadastro de Cliente Cadastro de Cliente Observações Salário Nome Merlin - The First Runtime GUI Generator slide 44 de 44

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

46 Layout Criando um layout maluco 2. Define-se nomes de controles idênticos aos que serão gerados >> layout A tela desejada txtsalario lblobservacoes Cadastro de Cliente txtaobservacoes lblsalario lblnome cliente.nome TemplateMaluco extends JPanel { //... } Merlin - The First Runtime GUI Generator slide 46 de 44

47 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); O resultado final Cadastro de Cliente Cadastro de Cliente Observações Salário Nome Merlin - The First Runtime GUI Generator slide 47 de 44

48 Extensões >> extensões Modificando os controles de tela gerados Uma interface padrão A classe de dados A tela gerada class Cliente { String nome; Cidade naturalidade } Cadastro Cadastro de Cliente de Cliente Dicas Nome Naturalidade Cancelar Salvar Merlin - The First Runtime GUI Generator slide 48 de 44

49 Extensões >> extensões Modificando os controles de tela gerados Uma interface com controle customizado A classe de dados A tela gerada class Cliente { String Cidade naturalidade } Cadastro de Cadastro Clientede Cliente Dicas Nome Naturalidade Cancelar Salvar Merlin - The First Runtime GUI Generator slide 49 de 44

50 Extensões >> demos Modificando os controles de tela gerados Uma interface com controle customizado A classe de dados A tela gerada class Cliente { String Cidade naturalidade } Cadastro de Cadastro Clientede Cliente Dicas Nome Naturalidade Cancelar Salvar Criando o controle customizado class Lookup extends JPanel //faz como quiser } Merlin - The First Runtime GUI Generator slide 50 de 44

51 Demos >> estágio atual e perspectivas Dois demos simples Criando uma tela simples Usando renderizadores e binders cutomizados Merlin - The First Runtime GUI Generator slide 51 de 44

52 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 Merlin - The First Runtime GUI Generator slide 52 de 44

53 Fim Conteúdo Contato Histórias Merlin - The First Runtime GUI Generator slide 53 de 44