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

layer.

Merlin

layer.

The First Runtime GUI Generator

Merlin - The First Runtime GUI Generator slide 2 de 44

layer.

Sumário

Cenário A proposta Comparações Características e Funcionalidades O presente e o futuro EOF

>> panorama geral

layer.

Panorama geral Quanto custa construir um sistema

Meyers, Brad – User Interface Software Tools (1994,2002)

Referências

Sistema completo

Interface do usuário

TC elementares

Custo de construção

12Pesquisas próprias (2005,2006)

>> a construção da IU hoje

layer.

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

layer.

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çãoA idéia-chave

class Cliente { String codigo; String nome;}

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

).setVisible(true);

>> motivação

Tempo de projeto Tempo de execução

layer.

Motivação TC são funções do modelo de dados

consistência,aparência,validação,

organização,customizações,

A dependência da TC em relação ao modelo de dados

Modelo de classes Tela de Cadastro

>> motivação

layer.

Motivação Regras clássicas

>> motivação

O mapeamento básico entre os elementos

Modelo de dados Tela de Cadastro

Classe Tela

Atributo Controle

Relacionamento Navegação

layer.

Implementando as regras clássicasClasse Tela

Atributo Controle

public class Cliente { String nome; Cidade naturalidade; boolean ativo;}

>> motivação

Cadastro de Clientes

Naturalidade

SalvarCancelar

O cadastro gerado

A classe de dados

layer.

Atributo Controle

>> motivação

SalvarCancelar

O cadastro gerado

A classe de dados

Naturalidade

layer.

Atributo Controle

>> o objetivo da ferramenta

Naturalidade

SalvarCancelar

O cadastro gerado

A classe de dados

layer.

O objetivo da ferramenta Gerar TCs elementares com o menor esforço

possívelUm exemplo de interface elementar a ser gerada

>> algumas definições

O código essencial

new JFrame().add(Merlin.createUI(Cliente.class)).setVisible(true);

layer.

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

layer.

O processo

1. Criar as classes de dados2. Opcionalmente, decorar elas com

anotações3. Dentro da aplicação, invocar

Merlin.createUI

>> comparação

layer.

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

layer.

A mesma entrada e as diferentes saídas...Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b)

Um gerador tradicional (a) Merlin (b)

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 Porto Alegre

Endereço

Observações

SalvarCancelar

usuario

logradouro Rua São Sepé

numero 256

complemento

cidade Porto Alegre

observacoes

SalvarCancelar

codigo

>> comparação

layer.

>> comparação

Interfaces geradas por ferramentas tradicionais (a) e pelo Merlin (b)

Cidade Porto Alegre

Endereço

Observações

SalvarCancelar

usuario

numero 256

complemento

cidade Porto Alegre

observacoes

SalvarCancelar

codigo

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

linhas?

layer.

Cidade

Endereço

Observações

SalvarCancelar

usuario

numero 256

complemento

cidade

observacoes

SalvarCancelar

codigo

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

>> comparação

layer.

>> características gerais

Cidade Porto Alegre

Endereço

Observações

SalvarCancelar

usuario

numero 256

complemento

cidade Porto Alegre

observacoes

SalvarCancelar

codigo

Qual é o campo da cidade exibido na caixa de

seleção?

layer.

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)

layer.

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

layer.

O custo dos geradores tradicionais

CustoS1 S2 S3 Sn

layer.

O custo do Merlin

CustoS1

S2S3 Sn

>> histórico

layer.

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 juntoClasses nos servidores de aplicação

>> histórico

Root LIBs classes

classes

layer.

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 juntoClasses nos servidores de aplicação

>> slistaks

Root LIBs

Histórico

classes

layer.

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. AgrupamentosUtilizando a ocorrência de termos para produzir o conteúdo em comboboxes

110nome

status

codigo 110

>> slistaks de graça

layer.

Slistaks de graça

Google como fonte de informações Relevância de campos pode ser obtida de

forma onlineO 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

layer.

Mais slistaks de graça

Dicionários de sinônimos Para inferir mapeamentos de controles

observacao = informacaoComplementar = outrasInformacoes

Todos geram textAreasUtilizando 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

layer.

Ainda slistaks de graça

Algoritmos de similaridade Para detectar aproximações e inferir

correspondências observacao = observacoes

Muitos frameworks na webUtilizando 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

layer.

Eu adoro slistaks

Corretores ortográficos Para gerar labels

observacao = observação

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

>> agrupamentos

layer.

Agrupamentos

Agrupando controles nas telas Requisito

Os campos Cidade, Rua e Número devem ser exibidos em conjuntoCriando 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

SalvarCancelar

Cadastro de Cliente 1

>> dependências

Número

Cidade

Endereço

layer.

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

SalvarCancelar

Cadastro de Cliente

Limite

Possui cheque

>> agentes

layer.

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

Controlede

>> agentes

layer.

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

Controlede

telaAgentes

>> agentes

layer.

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

SalvarCancelar

Cadastro de Cliente

Salário

Cartão de crédito

>> agentes

layer.

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

class Cliente { String nome; @Async @Agent( event={“focusLost”}, action={“habilitarCartao”}) float salario; boolean cartaoCredito;}

Cadastro de Cliente

SalvarCancelar

Cadastro de Cliente

Salário

Cartão de crédito

>> agentes

layer.

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

123456789

>> agentes

layer.

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; boolean cartaoCredito;}

Cadastro de Cliente

SalvarCancelar

Cadastro de Cliente

Salário

Cartão de crédito

>> agentes

layer.

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

SalvarCancelar

Cadastro de Cliente

Salário

Limite de crédito

>> agentes

layer.

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

/scripts/calc.js

>> layout

layer.

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

layer.

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

Observações

5Observações

>> layout

layer.

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

Cadastro de ClienteCadastro de Cliente

Salário

Observações

>> layout

layer.

Layout

Um layout maluco Eu quero do meu jeito

>> layout

A tela desejadaCadastro de ClienteCadastro de Cliente

Salário

Observações

layer.

Layout

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

TemplateMaluco extends JPanel { //... }

Cadastro de Cliente

>> layout

A tela desejada

layer.

Layout

Criando um layout maluco2. 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 { //... }

layer.

Layout

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

como parâmetroMerlin.createIhc(Cliente.class,

TemplateMaluco.class);

>> extensões

O resultado finalCadastro de ClienteCadastro de Cliente

Salário

Observações

layer.

Extensões Modificando os controles de tela gerados

Uma interface padrão

A classe de dados A tela geradaCadastro de Cliente

Naturalidade

SalvarCancelar

Cadastro de Clienteclass Cliente { String nome; Cidade naturalidade}

>> extensões

layer.

A classe de dados A tela gerada

class Cliente { String nome; @RenderAs(Lookup.class) Cidade naturalidade}

Cadastro de Cliente

Naturalidade

SalvarCancelar

Cadastro de Cliente1

>> extensões

layer.

Criando o controle customizado

class Lookup extends JPanel //faz como quiser}

A classe de dados A tela gerada

class Cliente { String nome; @RenderAs(Lookup.class) Cidade naturalidade}

Cadastro de Cliente

Naturalidade

SalvarCancelar

Cadastro de Cliente1

>> demos

layer.

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

layer.

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

layer.

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-merli

Histórias http://telasdecadastro.blogspot.com

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

Documents

Merlin Pc1

LEROY MERLIN ITALIA · LEROY MERLIN IN ITALIA LEROY MERLIN NEL MONDO Leroy Merlin è l’azienda multispecialista che offre la possibilità di migliorare la propria casa grazie all’offerta

M3M Merlin | M3M Merlin Resale Sector 67 Gurgaon@9999062200

Steadicam Merlin

Leroy Merlin | LeroyMerlin · Leroy Merlin | LeroyMerlin

Merlin Brochure

Merlin 6pp

SIMSCRIPT II.5 Release Notes 2.01 · Web viewa GUI/project based development environment for building simulation applications, and runtime reusable libraries. SimStudio contains a

MERLIN LEGEND Communications System Release 7 · 5ESS, AUDIX, CONVERSANT, CentreVu, DEFINITY, Magic On Hold, MERLIN, MERLIN LEGEND, MERLIN Mail, PARTNER, PassageWay, MLX-10, ... call

leroy merlin

Merlin User Manual v3 · 3/13/2020 · Merlin User Manual v3 • Programmable software rules engine via a GUI for Control Port functions. • Streamlined codec wizards and GUI for

Merlin 2000

Real-Time High Performance Multimedia Systems on Android · GUI Audio - Open SLES / Tiny ALSA Video –Camera Client ... Android Framework and Runtime Android API Standardization

Merlin Duo

MERLIN DNC MERLIN DNC€¦ · MERLIN DNC FEATURE SHEET Achieve maximum machine utilization MERLIN DNC MERLIN DNC Operator Panel MERLIN DNC is a new plug-in for MERLIN, the IIoT (Industrial

MERLIN EPISODE NINE PRODUCTION SCRIPT …leethomson.myzen.co.uk/Merlin/Merlin_1x09_-_Excalibur.pdf · finish mine. MERLIN ... UTHER tenses again. MERLIN EPISODE NINE PRODUCTION SCRIPT

MERLIN - Avaya

Teacher’s Papers and Answers merlin - Merlin Publishers

Modelo Merlin

CANoe as Open Environment - Vector · LabWindows CVI Runtime LabVIEW VI LabWindows CVI Runtime configuration data exchange CANoe GUI CANoe RT Interface to LabVIEW Realization: Usage