Ferramenta para Conversão de Interfaces Java Swing para...
Transcript of Ferramenta para Conversão de Interfaces Java Swing para...
![Page 1: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/1.jpg)
Ferramenta para Conversão
de Interfaces Java Swing para
Interfaces Web
Aluno: Silvio Gonçalves Neto
Orientador: Matheus Carvalho Viana
![Page 2: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/2.jpg)
Roteiro
• Introdução
• Objetivos
• Fundamentação Teórica
• Trabalhos Correlatos
• Requisitos
• Especificação
• Implementação
• Operacionalidade da Ferramenta
• Resultados e Discussões
• Conclusões e Sugestões
![Page 3: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/3.jpg)
Introdução
• Demanda crescente por sistemas web devido a
vantagens em relação a plataforma desktop.
• Contudo as empresas operam com sistemas
desktop e o processo de conversão tende a ser
caro e demorado
• Portanto, é necessária uma forma eficiente de
efetuar essa conversão
![Page 4: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/4.jpg)
Objetivos
• Desenvolver uma ferramenta que auxilie na conversão de interfaces
Java Swing para interfaces web baseadas em HTML, CSS e
JavaScript.
Objetivo Geral:
Objetivos Específicos:• conversão de componentes Java Swing para componentes HTML;
• conversão dos tratamentos de eventos mais comuns da interface
Java para JavaScript;
• meio automatizado para atualização da interface de sistemas Java
existentes para web;
• testar a viabilidade de converter componentes gráficos desktop para
web.
![Page 5: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/5.jpg)
Fundamentação Teórica
• Analisador léxico identifica símbolos (tokens) dentro do
código fonte.
• Analisador sintático verifica se a ordens dos tokens faz
sentido para a linguagem em questão.
Analisador Léxico/Sintático
![Page 6: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/6.jpg)
Fundamentação Teórica
• Programas que geram código de outros programas.
• Visam Qualidade e Produtividade.
• Podem ser construídos com base em templates.
• Templates definem a estrutura do código a ser gerado
Geradores de Código
![Page 7: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/7.jpg)
Gerador de Código com Templates
Fundamentação Teórica
![Page 8: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/8.jpg)
Fundamentação Teórica
Interface Java Swing x Web
![Page 9: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/9.jpg)
Trabalhos Correlatos
SwingToHtml (SEVERO, 2008)
![Page 10: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/10.jpg)
Trabalhos Correlatos
DelphiToWeb (SOUZA, 2005)
![Page 11: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/11.jpg)
Trabalhos Correlatos
Converte Forms (SCHVEPE, 2006)
![Page 12: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/12.jpg)
Desenvolvimento
• Requisitos
• Especificação
• Implementação
• Operacionalidade da Ferramenta
• Resultados e Discussões
![Page 13: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/13.jpg)
RequisitosRequisitos Funcionais
RF01: efetuar análise léxica e sintática dos
arquivos de entrada
RF02: converter componentes Java Swing para
HTML
RF03: converter os tratamentos de evento de Java
para JavaScript
![Page 14: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/14.jpg)
Requisitos
Requisitos Não-Funcionais
RNF01: possuir interface de fácil usabilidade
RNF02: utilizar o MoDisco para analisar o código
Java
RNF03: utilizar templates e o motor Acceleo para
fazer a geração do código
RNF04: utilizar HTML 5 para formatação dos
arquivos de saída
RNF05: utilizar CSS 3 para aplicar estilo nos
arquivos de saída
![Page 15: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/15.jpg)
Especificação
Diagrama de Casos de Uso
![Page 16: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/16.jpg)
Especificação
Diagrama de Componentes
![Page 17: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/17.jpg)
Implementação
Ferramentas utilizadas:
• IDE Eclipse Modeling
• MoDisco
• Acceleo
![Page 18: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/18.jpg)
Implementação
MoDisco
![Page 19: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/19.jpg)
Implementação
MoDisco
public class Exemplo extends JFrame{
public Exemplo(){
JButton btn = new JButton("botao");
![Page 20: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/20.jpg)
<ownedElementsxsi:type="java:ClassDeclaration"name="Exemplo" >
<modifier visibility="public"/><bodyDeclarations
xsi:type="java:ConstructorDeclaration“ name="Exemplo"><body originalCompilationUnit="//@compilationUnits.0">
<statements xsi:type="java:VariableDeclarationStatement" ><type
type="//@ownedElements.1/@ownedPackages.0/@ownedElements.4"/><fragments name="btn">
<initializer xsi:type="java:ClassInstanceCreation“method="//@ownedElements.1/@ownedPackages.0/@ownedElements.4/@bo
dyDeclarations.0"><arguments xsi:type="java:StringLiteral"
escapedValue="" botao""/><type
type="//@ownedElements.1/@ownedPackages.0/@ownedElements.4"/></initializer>
</fragments></statements>
![Page 21: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/21.jpg)
Implementação
Acceleo
![Page 22: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/22.jpg)
Implementação
Acceleo: templates
![Page 23: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/23.jpg)
Implementação
Acceleo: templates
![Page 24: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/24.jpg)
Implementação
Acceleo
[template public generateApp(modelo : Model)][comment @main/]
[genCss('form.css') /][genJs('utils.js') /]
[for (compUnit : CompilationUnit | modelo.compilationUnits)][genHtml(compUnit) /]
[/for][/template]
![Page 25: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/25.jpg)
Implementação
Acceleo: templates
![Page 26: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/26.jpg)
[template public genCss(fileName : String)][file (fileName, false, 'UTF-8')]* {
margin:0;padding:0;list-style:none;vertical-align:baseline;
}.j-label { white-space: nowrap; }.j-textfield, .j-passwordfield { padding: 2px; }.temMenu {
position: absolute;margin-top: 60px;
}.flow-layout-center { text-align: center; }.flow-layout-right { text-align: right; }.flow-layout-left { text-align: left; }.flow-layout > * { display: inline-block; }[/file][/template]
![Page 27: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/27.jpg)
[template public genHtml(compUnit : CompilationUnit)][for (classe : ClassDeclaration | compUnit.types -> filter(ClassDeclaration))][if (classe.superClass <> null and classe.superClass.type.name.toUpper() = 'JFRAME')][file (compUnit.name.replace('.java', '.html'), false, 'UTF-8')]<!DOCTYPE html><html><head>
<title>[genTitle(bodyDec) /]</title><link rel="stylesheet" href="bootstrap.min.css" /><script src="bootstrap.min.js"></script><script src="utils.js"></script>
</head><body>
[genMenu(bodyDec) /]<form action="#" method="post" class="form-horizontal">
[genComponentes(bodyDec) /]</form>
</body></html>[/file][/if][/for][/template]
![Page 28: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/28.jpg)
Implementação
Acceleo: templates
![Page 29: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/29.jpg)
[template public genComponentes(declarations : Sequence(BodyDeclaration))][for (ctor : ConstructorDeclaration | declarations -> filter(ConstructorDeclaration))][if (ctor._body.getFromJFrame('setLayout') -> getTipoLayout('BorderLayout'))]. . .[else]<div class="container-fluid . . .>[for (exp : ExpressionStatement | ctor._body.getFromJFrame('add'))][let metodo : MethodInvocation = exp.expression]
[if (metodo.arguments -> filter(SingleVariableAccess) -> size() = 1)][for (singleVar : SingleVariableAccess | metodo.arguments ->
filter(SingleVariableAccess))][definirComponente(singleVar.getNomeComponente(),
singleVar.variable.oclAsType(VariableDeclarationFragment), ctor._body) /][/for]
[/if][/let][/for]</div>[/if][/for][/template]
![Page 30: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/30.jpg)
[template public definirComponente(nome : String, frag : VariableDeclarationFragment, bodyBlock : Block)][let nomeComponente : String = nome.toUpper()][if (nomeComponente = 'JPANEL')]. . .[elseif (nomeComponente = 'JBUTTON')][genButton(frag) /][/if]
. . .
[/let][/template]
![Page 31: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/31.jpg)
[template public genButton(frag : VariableDeclarationFragment)]
<button type="button" class="btn btn-primary" [genEstiloComponente(frag, false) /] [genId(frag) /]>[getTextoComponente(frag) /]</button>
[genButtonAction(frag) /]. . .[/template]
![Page 32: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/32.jpg)
[template private genButtonAction(frag : VariableDeclarationFragment)][if (frag.getMetodoPorNome('addActionListener') -> notEmpty())][let var : SingleVariableAccess = frag.getMetodoPorNome('addActionListener') -> first()][if (var.eContainer(MethodInvocation) <> null)]<script type="text/javascript">
$(function() {$('#[frag.name /]').click(function() {
// TODO});
});</script>[/if][/let][/if][/template]
![Page 33: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/33.jpg)
Implementação
Acceleo: templates
![Page 34: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/34.jpg)
[template public genEstiloComponente(frag : VariableDeclarationFragment, temHeight : Boolean)][let metodo : MethodInvocation = frag.getMetodoPorNome('setbounds') -> at(1).eContainer(MethodInvocation)][if (metodo.arguments -> size() = 4)][let x : NumberLiteral = metodo.arguments -> at(1)][let y : NumberLiteral = metodo.arguments -> at(2)][let width : NumberLiteral = metodo.arguments -> at(3)][let height : NumberLiteral = metodo.arguments -> at(4)]
style="position:absolute;left:[x.tokenValue /]px;top:[y.tokenValue/]px;width:[width.tokenValue /]px;[if (temHeight)]height:[height.tokenValue/]px;[/if]“
[/let][/let][/let][/let][/if][/let][/template]
![Page 35: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/35.jpg)
Operacionalidade da
Implementação
![Page 36: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/36.jpg)
Operacionalidade da
Implementação
![Page 37: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/37.jpg)
Resultados e Discussões
• Testes com a ferramenta geraram interfaces
web equivalentes às interfaces originais
– Os componentes Swing viram elementos HTML
– A aparência é definida em um arquivo CSS
– A chamada dos eventos é gerada em JavaScript
• A geração de código provê maior eficiência e
qualidade na conversão da interface
![Page 38: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/38.jpg)
Resultados e Discussões
Características SwingToHtml DelphiToWebConverte
FormsSwingToWeb
uso de templates
para conversão
da interface
sim não sim sim
uso de
analisadores
léxico/sintático
sim sim sim sim
plataformaaplicativo
independente
aplicativo
independente
aplicativo
independenteIDE Eclipse
Entrada Java Delphi PL/SQL Java
saídaHTML;
JavaScript
HTML; arquivo
.LZT; XMLarquivos .java
HTML; CSS;
JavaScript
![Page 39: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/39.jpg)
Conclusões e Sugestões
• O MoDisco facilitou a construção ferramenta, pois não foi necessário implementar o analisador léxico/sintático
• A construção de templates do Acceleo simplificou o processo de conversão do código
• A ferramenta não converte todos os componentes de interface
• Implementado apenas a chamada dos eventos não o código interno do mesmo
![Page 40: Ferramenta para Conversão de Interfaces Java Swing para ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1...Java Swing para interfaces web baseadas em HTML, CSS e JavaScript.](https://reader035.fdocuments.in/reader035/viewer/2022071611/614ab91912c9616cbc6999ab/html5/thumbnails/40.jpg)
Conclusões e Sugestões
• Implementar a conversão do código Java dentro dos tratamentos de evento
• Implementar a conversão de componentes não tratados pela ferramenta
• Implementar a conversão de componentes Java Swing que estão codificados em métodos além do construtor da classe
• Implementar um tratamento de erros na ferramenta afim de avisar ao utilizador sobre problemas que possam estar ocorrendo