merlin um novo horizonte na criacao das telas de cadastro

www.3laye

r.com.br

Merlin

www.3laye

r.com.br

Um Novo Horizonte na Criação das Telas de Cadastro

Merlin - Um Novo Horizonte na Criação das Telas de Cadastro slide 2 de 44

www.3laye

r.com.br

Sumário

� Cenário

� A proposta

� Comparações

� Características e Funcionalidades

� O presente e o futuro

� EOF

>> panorama geral


www.3laye

r.com.br

Sobre o autor

� Marcelo Mrack, [email protected]� 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


www.3laye

r.com.br

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

12 Pesquisas próprias (2005,2006)

>> a construção da IU hoje


www.3laye

r.com.br

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

Abordagens Problemas recorrentes

� Escrita de código-fonte� Uso de ferramentas WYSIWYG1

� 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


www.3laye

r.com.br

A ferramenta proposta

� 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

Tempo de projeto Tempo de execução

CAFE

class Cliente {String codigo;String nome;

}

new JFrame.add(Merlin.createIhc(Pessoa.class)

).setVisible(true);

>> motivação


www.3laye

r.com.br

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 classes Tela de Cadastro

>> motivação


www.3laye

r.com.br

Motivação

� Regras clássicas

Classe Tela

Atributo Controle

Relacionamento Link

>> motivação


www.3laye

r.com.br

Motivação

� Regras clássicasImplementando as regras clássicas

Classe Tela

Atributo Controle

Relacionamento Link

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


www.3laye

r.com.br

Motivação


Classe Tela

Atributo Controle

Relacionamento Link


String nome;


boolean ativo;

}

>> motivação

Nome


Ativo

SalvarCancelar

O cadastro gerado

A classe de dados

2

2

Naturalidade


www.3laye

r.com.br

Motivação


Classe Tela

Atributo Controle

Relacionamento Link


String nome;


boolean ativo;

}

>> o objetivo da ferramenta

Nome


Ativo

Naturalidade

SalvarCancelar

O cadastro gerado

A classe de dados

3

3


www.3laye

r.com.br

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);


www.3laye

r.com.br

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


www.3laye

r.com.br

O processo

1. Cria-se as classes de dados

2. Opcionalmente, decora-se elas com anotações

3. Dentro da aplicação, invoca-se Merlin.createIhcsobre a classe ou objeto

>> comparação


www.3laye

r.com.br

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


www.3laye

r.com.br


� 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

DicasDicasO campo nome é obrigatório.O campo logradouro é obrigatórioO 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

>> comparação


www.3laye

r.com.br




Nome





Cidade

Endereço

Observações

SalvarCancelar

nome

usuario


numero 256

complemento

cidade

observacoes

SalvarCancelar

codigo

Porque Observações é uma caixa de texto de múltiplas linhas?

>> comparação


www.3laye

r.com.br




Nome





Cidade

Endereço

Observações

SalvarCancelar

nome

usuario


numero 256

complemento

cidade

observacoes

SalvarCancelar

codigo

Porque é Observações e não Observacoes?

>> comparação


www.3laye

r.com.br




Nome





Cidade

Endereço

Observações

SalvarCancelar

nome

usuario


numero 256

complemento

cidade

observacoes

SalvarCancelar

codigo

Qual é o campo da cidade exibido na caixa de seleção?

>> características gerais


www.3laye

r.com.br

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



www.3laye

r.com.br


� 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



www.3laye

r.com.br





� Reuso de históricoO custo dos geradores tradicionais

Tempo

CustoS1 S2 S3 Sn



www.3laye

r.com.br





� Reuso de históricoO custo do Merlin

Tempo

CustoS1

S2S3 Sn

>> histórico


www.3laye

r.com.br

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

Root LIBs classes

S1

S2

Sn

C1

C2

Cn

classes

classes

classes


www.3laye

r.com.br

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

Root LIBs

Histórico

classes

S1

S2

Sn

C1

C2

Cn

classes

classes

classes


www.3laye

r.com.br

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

110nome

status

codigo 110

>> slistaks de graça


www.3laye

r.com.br

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


www.3laye

r.com.br

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

observacao

>> ainda slistaks de graça

Se observacao é (ou já foi) um textArea, é provável que

outrasInformacoes também o seja


www.3laye

r.com.br

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 os termos são conceitualmente iguais. Se observacao é (ou já foi) um textArea, éprovável que observacoes também seja

>> eu adoro slistaks


www.3laye

r.com.br

Eu adoro slistaks

� Corretores ortográficos� Para gerar labels

� observacao = observação

Utilizando corretores ortográficos disponíveis no próprio ambiente

>> agrupamentos


www.3laye

r.com.br

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


www.3laye

r.com.br

Dependências

� Vinculando controles nas telas� Requisito

� Se o cliente possuir cheque especial, habilitar limite de crédito

Criando dependências simples


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

7

8

>> agentes


www.3laye

r.com.br

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

Controledetela

>> agentes

?


www.3laye

r.com.br

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

Controledetela

Agentes

>> agentes


www.3laye

r.com.br

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


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


www.3laye

r.com.br

Agentes

� Agentes na execução de regras de negócio� Requisito


Implementando a regra de negócio

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);

}

}

1

2

3

4

5

6

7

8

9

10

>> agentes


www.3laye

r.com.br

Agentes

� Agentes na execução de regras de negócio� Requisito (agora de forma assíncrona)


Conectando eventos e regras de negócio de forma assíncrona


class Cliente {

String nome;

@Async @Agent(

event={“focusLost”},

action={“habilitarCartao”})

float salario;


}

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


www.3laye

r.com.br

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


class Cliente {

@Agent( property={“border=BorderFactory.createLineBorder(Color.green,2)”})

String nome;

float salario;


}

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


www.3laye

r.com.br

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


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


www.3laye

r.com.br

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


www.3laye

r.com.br

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

>> layout


www.3laye

r.com.br

Layout

� Alterando o layout via anotações� Modificando algumas coisas

Redefinindo a ordem de controles e a posição de labels na tela


class Cliente {

@Order(after=“observacoes”)

String nome;

float salario;

@Caption(pos=Caption.TOP_LEFT)

String observacoes;

}

Cadastro de ClienteCadastro de Cliente

Salário

1

2

3

4

5

6Nome

Observações

7

2

5Observações

>> layout


www.3laye

r.com.br

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


@Caption(pos=Caption.TOP_LEFT)

class Cliente {

@Order(after=“observacoes”)

String nome;

float salario;

String observacoes;

}


Salário

1

2

3

4

5

6Nome

Observações

7

>> layout


www.3laye

r.com.br

Layout

� Criando um layout maluco1. Cria-se uma classe IU com o layout desejado

Um exemplo de layout manual

O template

TemplateMaluco extends JPanel

Cadastro de Cliente

>> layout


www.3laye

r.com.br

Layout

� Criando um layout maluco2. Define-se nomes de controles idênticos aos que serão

gerados


O template

Cadastro de Cliente

TemplateMaluco extends JPanel

lblSalario

salario

lblNome

nome

observacoes

lblObservacoes

>> layout


www.3laye

r.com.br

Layout

� Criando um layout maluco3. Executa-se a geração passando o template como

parâmetroMerlin.createIhc(Cliente.class, TemplateMaluco.class);


O templateCadastro de Cliente


Salário

Nome

Observações

>> extensões


www.3laye

r.com.br

Extensões

� Modificando os controles de tela geradosUma interface padrão

A classe de dados A tela gerada

Cadastro de Cliente

Dicas

Nome

Naturalidade

SalvarCancelar

Cadastro de Clienteclass Cliente {

String nome;

Cidade naturalidade

}

1

2

3

4

>> extensões


www.3laye

r.com.br

Extensões

� Modificando os controles de tela geradosUma interface com controle customizado


class Cliente {

String nome;

@RenderAs(Lookup.class)

Cidade naturalidade

}

Cadastro de Cliente

Dicas

Nome

Naturalidade

SalvarCancelar

Cadastro de Cliente1

2

3

4

5

>> extensões


www.3laye

r.com.br

Extensões

� Modificando os controles de tela gerados

Criando o controle customizado

class Lookup extends JPanel

implements IRenderer {

//metodos para binding do controle

}

Uma interface com controle customizado


class Cliente {

String nome;

@RenderAs(Lookup.class)

Cidade naturalidade

}

Cadastro de Cliente

Dicas

Nome

Naturalidade

SalvarCancelar

Cadastro de Cliente1

2

3

4

5

1

2

3

4

>> estágio atual e perspectivas


www.3laye

r.com.br

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


www.3laye

r.com.br

Fim

www.3laye

r.com.br

� 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 criacao das telas de cadastro

Technology

classe de

ordem de controles

configurao

um gerador

executar funes

campo nome

salrio 4 eventfocuslost

cancelar salvar