Escolar Documentos
Profissional Documentos
Cultura Documentos
AndroMDA
1.
2.
MDA e AndroMDA........................................................................................... 3
Preparao do Ambiente para Utilizao do AndroMDA ................................... 3
2.1. JDK ........................................................................................................... 3
2.2. JBOSS ....................................................................................................... 4
2.3. Instalao e Configurao Maven............................................................... 4
2.4. Instalao do AndroMDA .......................................................................... 5
2.5. Instalao do Magic Draw.......................................................................... 6
2.6. Instalao do Eclipse.................................................................................. 6
2.7. Instalao do Plug-in JBossIDE ................................................................. 6
3. Desenvolvimento de Projetos com AndroMDA ................................................. 9
3.1. Criao de Novo Projeto/Configurao do Ambiente ................................. 9
3.2. Configurao do Banco.............................................................................11
4. Iniciando o projeto no MagicDraw....................................................................12
4.1. Modelo Bsico..........................................................................................12
4.1.1.
O Problema ...........................................................................................12
4.1.2.
Metodologia Utilizada...........................................................................12
4.1.3.
Casos de Uso.........................................................................................12
4.2. Modelagem de Sistemas............................................................................13
4.3. Exemplo de caso de uso de consulta..........................................................13
4.3.1.
Camada de Domnio..............................................................................13
4.3.1.1.
Cdigo de Banco de Dados gerados...................................................20
4.3.1.2.
Criao de Value Object....................................................................21
4.3.2.
Camada de Servios ..............................................................................23
4.3.3.
Camada de Interface..............................................................................26
4.3.4.
Gerao de Cdigo e Deploy da Aplicao............................................46
4.4. Exemplo de caso de uso de Detalhamento .................................................54
4.4.1.
Camada de Domnio..............................................................................55
4.4.2.
Camada de Servio................................................................................55
4.4.3.
Camada de Interface..............................................................................55
4.4.4.
Gerao de Cdigo e Deploy da Aplicao............................................63
4.5. Exemplo de caso de uso de alterao.........................................................64
4.5.1.
Camada de Domnio..............................................................................64
4.5.2.
Camada de Servio................................................................................64
4.5.3.
Camada de Interface..............................................................................64
4.5.4.
Gerao de Cdigo e Deploy da Aplicao............................................74
4.6. Exemplo de caso de uso de incluso..........................................................76
4.6.1.
Camada de Domnio..............................................................................76
4.6.2.
Camada de Servio................................................................................76
4.6.3.
Camada de Interface..............................................................................76
4.6.4.
Gerao de Cdigo e Deploy da Aplicao............................................82
4.7. Exemplo de caso de uso de excluso .........................................................83
4.7.1.
Camada de Domnio..............................................................................83
4.7.2.
Camada de Servio................................................................................83
4.7.3.
Camada de Interface..............................................................................83
4.7.4.
Gerao de Cdigo e Deploy da Aplicao............................................89
4.7.5.
Modo de Operao ................................................................................89
4.7.6.
Excluso Mltipla .................................................................................92
1. MDA e AndroMDA
MDA (Model Driven Architecture) uma abordagem de desenvolvimento que
utiliza UML e ferramentas de transformao. Tais ferramentas utilizam os modelos
UML como insumos para transform-los em artefatos, que podem ser outros modelos
ou cdigo fonte especfico de alguma linguagem ou plataforma.
A MDA divide o trabalho de desenvolvimento em duas reas principais. Os
modeladores representam uma aplicao em particular, por meio da criao de um
PIM (Platform Independent Model Modelo Independente de Plataforma). O PIM
o primeiro artefato especificado pela MDA, o a modelagem do sistema nos
padres da UML independente de qualquer tecnologia especfica que ser utilizada.
Ferramentas podem ento transformar o PIM em um PSM (Platform Specific Model
Modelo Especfico de Plataforma). O PSM o segundo artefato especificado pela
MDA, o modelo do sistema destinado a um ambiente de execuo especfico, para
uma tecnologia em particular. Assim, mais ferramentas podem usar o PSM e gerar
cdigo para essa plataforma. O PSM pode ser feito em UML, mas isso no
obrigatrio. O padro MDA (http://www.omg.org/mda/) controlado pelo OMG
(Object Management Group).
O AndroMDA (http://www.andromda.org/) um framework MDA, de cdigo
aberto, que recebe modelos UML, armazenados em formato XMI, como entrada e
utiliza cartuchos (bibliotecas de transformao) para produzir diversos artefatos. O
AndroMDA implementado na linguagem Java e j possui cartuchos (mecanismos
semelhantes a plug-ins) para gerao de artefatos para vrias tecnologias Java, como
Hibernate, EJB, Struts, JSF e Spring.
Outras ferramentas so utilizadas juntamente com o AndroMDA no processo
de desenvolvimento. Entre elas temos:
2.1.
JDK
2.2.
JBOSS
2.3.
2.4.
Instalao do AndroMDA
encarrega de buscar este plug-in no(s) repositrio(s) para o(s) qual(is) estiver
configurado.
No caso do plug-in do AndroMDA o seguinte comando deve ser executado:
maven
plugin:download
-DgroupId=andromda
-DartifactId=mavenandromdapp-plugin-coppetec -Dversion=3.1
Aps a execuo desse comando o Maven ter instalado o plug-in do
AndroMDA no cach local do usurio e tarefas referentes ao AndroMDA podero ser
executadas atravs do Maven.
Eventualmente, dependendo das tarefas executadas, o Maven poder buscar
outros artefatos nos repositrios, contudo isso ser feito de forma transparente e
automtica.
2.5.
2.6.
Instalao do Eclipse
2.7.
do
plug-in
em
9. Para iniciar a execuo do JBoss, clique com o boto direito na aba Server
Navigator e escolha a opo Start do meu de contexto. Para terminar
aconselhvel que seja utilizada a opo Shutdown.
3.1.
Criao de Novo Projeto/Configurao do
Ambiente
O plug-in do AndroMDA para o Maven j possui um procedimento
parametrizado para criao de projetos, que funciona como um wizard, onde o usurio
deve responder a perguntas. Atravs das respostas fornecidas o AndroMDA ir
direcionar a criao da estrutura bsica e dos artefatos bsicos de configurao de
projetos. O procedimento para criao de um novo projeto :
1. Abra o console (command prompt) e v para o diretrio onde se deseja criar o
projeto. Na verdade o projeto ser gerado em um subdiretrio do diretrio
escolhido.
2. Digite o comando: maven andromdapp:generate
3. Responda as perguntas de acordo com o seu projeto. Abaixo um exemplo com
respostas tpicas (perguntas em negrito e respostas em itlico):
Please enter your first and last name (i.e. Chad Brandon):
9
Chad Brandon
Please enter the name of your J2EE project (i.e. Animal Quiz):
SuportePais
Please enter the id for your J2EE project (i.e. animalquiz):
SuportePais
Please enter a version for your project (i.e. 1.0-SNAPSHOT):
1.0
Please enter the base
org.andromda.samples):
package
name
for
your
J2EE
project
(i.e.
br.gov.tutorial
Would you like an EAR or standalone WAR (enter 'ear' or 'war')?
ear
Would you like to use modules (enter 'yes' or ' no')?
no
Please enter the type of transactional/persistence cartridge to use (enter
'hibernate', 'ejb', or 'spring'):
hibernate
Would you like to use the jBpm workflow engine, it uses Hibernate3
(enter 'yes' or 'no')?
no
Please enter the hibernate version number (enter '2' for 2.1.x or '3' for 3.0.x):
3
Would you like a web application? (enter 'yes' or 'no'):
yes
Would you like your web tier to use JSF or Struts? (enter 'jsf' or 'struts'):
struts
Would you like to be able to expose your services as web services? (enter 'yes' or
'no'):
no
4. Aps receber as respostas, o AndroMDA criar um subdiretrio onde ser
gerada a estrutura inicial do projeto. A partir desse momento chamaremos esse
diretrio de <DiretorioProjeto>.
5. Ainda no console,
<DiretorioProjeto>.
para
diretrio
onde
est
seu
projeto:
6. Digite maven. Isto obrigar o Maven a obter todos os artefatos (por exemplo,
bibliotecas) de que o projeto depender.
10
3.2.
Configurao do Banco
11
</exception-sorterclass-name>
</local-tx-datasource>
Onde as tags abaixo devem estar relacionadas com os campos do arquivo
project.properties mostrado acima:
Modelo Bsico
4.1.1. O Problema
O problema relacionado a este tutorial servir de base para as aplicaes a
serem desenvolvidas no projeto. Embora este seja bem mais simples, fornecer a base
necessria para o prosseguimento do projeto.
O problema se trata de um sistema de informao, com manipulao em um
banco de dados centralizado em servidor. O banco de dados para a organizao do
cadastro de pases. Com isso, a aplicao dever ser capaz de incluir, consultar, editar
e excluir cadastro de paises.
12
4.2.
Modelagem de Sistemas
4.3.
14
15
16
17
Para cada entidade, podem ser atribudos tagged values para agregar ao
modelo parmetros para a gerao de cdigo. Por exemplo, o tagged value
@andromda.persistence.table reflete o nome da tabela a ser criada no banco de dados.
Da mesma forma, podemos atribuir esteretipos e tagged values aos atributos.
Entre os esteretipos temos: <<Identifier>> que determina que o atributo ser o
identificador do objeto (possvel chave primria) e <<Unique>> que determina que o
valor do atributo dever ser nico.
Como exemplo de tagged values temos @andromda.persistence.column que
define o nome da coluna a ser criada no banco de dados e
@andromda.persistence.column.lenght que define o tamanho da coluna.
Agora vamos criar a outra classe desse pacote, que a UnidadeFederativa.
1. Assim como fez antes crie dentro do pacote cd a classe UnidadeFederativa
2. Crie os atributos cdigo, descrio, ambos pblicos assim como feito
anteriormente.
3. Crie uma associao entre as classes, v no diagrama de classes e puxe
association de uma classe para outra.
4. A associao ser de 1 para muitos, para fazer isso clique duas vezes na
associao e ir aparecer a tela de especificao, v no boto ao lado do nome
e coloque 1 na parte do pais e coloque 0..* na parte de UnidadeFederativa.
18
19
21
4. Para cada atributo da classe Pais, crie um atributo com o mesmo nome e tipo
dentro da classe PaisVO. Ou seja: devem ser criados os atributos, todos
pblicos,
codigo(String[datatype]),
codigoAuxiliar(String[datatype]),
descricao(String[datatype]) e valor(String[datatype]), conforme a figura
abaixo:
22
23
chamada
PaisException
com
esteretipo
24
25
26
27
28
10. Criar um diagrama de atividade ( New Diagram => Activity Diagram) dentro
do caso de uso criado acima. Nome do diagrama de atividades dever ser
padronizado de acordo com o caso de uso, por exemplo: ConsultarPaisDA
Um diagrama de atividade essencialmente um grfico de fluxo, mostrando o
fluxo de controle de uma atividade para outra. Na MDA as atividades do tipo
FrontEndView sero transformadas em telas para o usurio e as demais atividades
sero interaes com o servidor.
c) Criar uma transio do estado inicial para a atividade que foi criada
no exemplo acima (ver figura abaixo);
30
31
32
33
35
36
16. Para uma visualizao mais detalhada da atividade Consulta Pais clique com o
boto direito e desmarque a opo Suppress Actions.
17. At aqui voc definiu as aes que sero executadas para exibir o formulrio
de preenchimento das informaes para consulta de um pas, e j possvel
visualizar este formulrio executando a aplicao. Para tal execute os
seguintes passos:
37
38
39
40
41
42
O preenchimento dessa tag indica quais atributos da coleo paises devem ser
exibidos na tabela que apresentar o resultado da consulta.
24. Para finalizar o diagrama de atividades, necessrio :
a) Adicionar um estado final;
b) O nome deste estado final deve ser o nome do caso de uso que ser invocado
aps o trmino desse caso de uso. Como exemplo, criamos um estado final que
volta para o caso de uso principal da aplicao, nesse exemplo o caso de uso
ConsultarPais.
c) O ltimo passo criar uma transio entre a ao Resultado da Consulta de
Pais, para o estado final criado anteriormente, esta transio tambm dever ter
um trigger do tipo (Type) signal, nome (Name) voltar e sem parmetros
43
27. Salve
o
modelo
UML
como:
<DiretorioProjeto>\mda\src\uml\<NomeProjeto>.xml. Onde <NomePojeto>
deve ser igual ao nome dado ao projeto no momento de sua criao, de acordo
com a resposta dada ao AndroMDA (ver item 3).
28. Valide o modelo gerado at o momento. No prompt de comando, entrar no
diretrio <DiretorioProjeto> e executar o comando maven. O resultado
apresentado deve ser BUILD SUCCESFULL.
29. Executar o comando maven deploy.
30. Para ver a tela gerada, abra um browser e acesse o endereo
http://localhost:8080/<nome
do
projeto>/.
Por
exemplo:
http://localhost:8080/SuportePais/. Garanta que o JBoss esteja rodando.
31. Observe que, desta vez, ao clicar no boto Consulta, no formulrio de filtro,
aparecer uma tela com ttulo Resultado da Consulta de Pais com um boto
Voltar. Se voc clicar no boto Voltar, voc ser redirecionado para a tela
principal, que neste caso, a tela de filtro. No retornado nenhum resultado na
consulta pois no foi especificado nenhuma implementao para obter os
paises e exibi-los. Alm disso, provavelmente a tabela de paises estar vazia.
45
46
47
48
49
9 Repita os dois passos anteriores para todos os arquivos .jar abaixo. Voc
tambm pode selecionar todos os arquivos usando a tecla Ctrl e cliar Ok
apenas uma vez.
MAVEN_REPO/struts/jars/struts-1.2.8.jar
MAVEN_REPO/servletapi/jars/servletapi-2.4-20040521.jar
MAVEN_REPO/hibernate/jars/hibernate-3.1.3-coppetec.jar"
MAVEN_REPO/jboss/jars/jboss-j2ee-4.0.2.jar
MAVEN_REPO/dom4j/jars/dom4j-1.4-dev-8.jar
MAVEN_REPO/commons-logging/jars/commons-logging-1.0.4.jar
MAVEN_REPO/commons-validator/jars/commons-validator-1.1.4.jar
MAVEN_REPO/commons-beanutils/jars/commons-beanutils-1.7.0.jar
MAVEN_REPO/commons-lang/jars/commons-lang-2.1.jar
Caso persista um erro do tipo: ...only available if source level is 5.0....
a) Clique com o boto direito do mouse sobre o projeto no Package Explorer e
selecione a opo Properties.
b) Na barra lateral a direita selecione a opo Java Compiler.
c) Marque a opo Enable project specific settings.
d) Altere o campo Compiller compliance level para a opo 5.0.
50
52
Criteria criterios =
session.createCriteria(PaisImpl.class);
if(vo instanceof PaisVO){
PaisVO paisVO = (PaisVO)vo;
Pais pais = new PaisImpl();
if ((paisVO.getCodigo()!= null) &&
(!paisVO.getCodigo().equals(""))){
pais.setCodigo(paisVO.getCodigo());
}
if ((paisVO.getCodigoAuxiliar()!= null) &&
(!paisVO.getCodigoAuxiliar().equals(""))){
pais.setCodigoAuxiliar(paisVO.getCodigoAuxiliar
());
}
if( (paisVO.getDescricao()!= null) &&
(!paisVO.getDescricao().equals(""))){
pais.setDescricao(paisVO.getDescricao());
}
if( (paisVO.getValor()!= null) &&
(!paisVO.getValor().equals(""))){
pais.setValor(paisVO.getValor());
}
}
criterios.add(Example.create(pais).enableLike(MatchM
ode.ANYWHERE));
return criterios;
}
17 Salve os arquivos no Eclipse, abra um terminal e, no diretrio do projeto,
execute o comando maven core deploy.
18 Inicialize o JBoss conforme descrito anteriormente e no browser teste a
aplicao na url: http://localhost:8080/SuportePais/
19 Para executar a aplicao passo a passo, abra a classe que deseja
acompanhar a execuo.
20 Incluir o breakpoint na linha do cdigo desejada. Para isso, clique com o
boto direito na barra a esquerda do eclipse.
21 Abra a aplicao no browser http://localhost:8080/SuportePais/
22 Execute o mtodo marcado com o breakpoint. Nesse momento, o eclipse
habilita a execuo passo a passo.
23 Pressione F5 (Step into) ou F6 (Step over) para acompanhar o cdigo.
24 Para encerrar a depurao do cdigo, pressione o boto Resume na janela
de Debug.
53
4.4.
54
55
56
57
esteretipo
diretrios
58
59
60
61
importante observar que a opo plaintext faz com que o parmetro seja
exibido como label no formulrio web. No entanto, essa opo s funciona com
parmetros do tipo String [datatype]. Caso os parmetros sejam de outros tipos as
aes do formulrio podem no funcionar.
30. Repita os passos para criao de parmetros com os nomes codigoAuxiliar,
valor, descrio, todos do tipo String [datatype]
31. Acrescente o parmetro id, do tipo Long[datatype] contendo a tagged value
@andromda.presentation.view.field.type igual a hidden ao invs de plaintext
O diagrama de atividades ficar como a figura abaixo:
62
Para ver a tela gerada, rode o comando maven install deploy no prompt
de comando, inicialize o JBoss, abra um browser e acesse o endereo
http://localhost:8080/<nome
do
projeto>/.
Por
exemplo:
http://localhost:8080/SuportePais
63
form.setValor(pais.getValor());
form.setDescricao(pais.getDescricao());
form.setUfs(pais.getUnidadeFederativas());
form.setId(pais.getId());
}
2. Salve os arquivos no Eclipse, abra um terminal e, no diretrio do projeto,
execute o comando maven install deploy.
3. Inicialize o JBoss conforme descrito anteriormente e no browser teste a
aplicao na url: http://localhost:8080/SuportePais/
4.5.
Este caso de uso pode ser invocado a partir da listagem de pais resultando da
consulta de pais e a partir do detalhamento de um pas.
64
65
66
67
68
20. Crie um mtodo chamado recuperaPais que retorna void e recebe como parmetro
id do tipo Long[datatype]
69
24. Crie uma ao chamada Altera Pais e crie uma transio entre a ao Preencha os
Campos para Alterao e a ao criada.
70
25. Crie um trigger com o nome Salvar e adicione os atributos: id(Long [datatype]),
codigo (String [datatype]), codigoAuxiliar (String [datatype]), valor (String
[datatype]), descricao (String [datatype]). Este trigger gerar um boto na tela de
alterao. Os parmetros do trigger representam os dados modificados que devem
sem aplicados no objeto pais.
71
28. Para cada um dos outros parmetros, na aba Taggeds Values, selecione a opo
@andromda.presentation.view.field.required e clique no boto Create Value.
29. Crie uma operao na classe AlteraPaisControle chamado alteraPais que retorna
void e recebe como parmetros id(Long [datatype]), codigo (String [datatype]),
codigoAuxiliar (String [datatype]), valor (String [datatype]), descricao (String
[datatype]).
72
73
34. Para ver a tela gerada, rode o comando maven install deploy no prompt de
comando, inicialize o JBoss, abra um browser e acesse o endereo
http://localhost:8080/<nome do projeto>/. Por exemplo:
http://localhost:8080/SuportePais/
pais.setCodigo(form.getCodigo());
pais.setCodigoAuxiliar(form.getCodigoAuxiliar()
);
pais.setId(form.getId());
pais.setValor(form.getValor());
pais.setDescricao(form.getDescricao());
getPaisHandler(request).manipulaPais(pais, new
UpdateAction());
saveWarningMessage(request,"sucesso.alteracao.p
ais");
PreenchaOsCamposParaAlteracaoSalvarFormImpl
((PreenchaOsCamposParaAlteracaoSalvarFormImpl)
form).clean();
} catch (Exception e) {
saveErrorMessage(request,
"erro.alteracao.pais");
((PreenchaOsCamposParaAlteracaoSalvarFormImpl)
form).clean();
e.printStackTrace();
}
}
2. Salve os arquivos no Eclipse, abra um terminal e, no diretrio do projeto,
execute o comando maven install deploy.
3. Inicialize o JBoss conforme descrito anteriormente e no browser teste a
aplicao na url: http://localhost:8080/SuportePais/
75
4.6.
76
77
9. Crie uma operao chamada incluiPais que retorna void [datatype] e possui os
parmetros que sero utilizados na criao no novo pas. No nosso exemplo,
inclua os parmetros codigo (String [datatype]), codigoAuxiliar (String
[datatype]), valor (String [datatype]), descricao (String [datatype])
78
12. Crie uma transio entre as aes Preencha os Dados de Pais e Inclui Pais.
13. Adicione para cada atributo criado em 11, na aba Valore Etiquetados, a tagged
value opo @andromda.presentation.view.field.required e clique no boto Create
Value.
79
80
81
21. Para ver a tela gerada, rode o comando maven install deploy no prompt de
comando, inicialize o JBoss, abra um browser e acesse o endereo
http://localhost:8080/<nome doprojeto>/. Por exemplo:
http://localhost:8080/SuportePais/
http://localhost:8080/SuportePais/
4.7.
83
84
85
86
10. Crie uma transio entre as aes Detalhamento do Pais e Deleta Pais com
uma trigger do tipo sinal com nome Excluir e parmetro id do tipo
Long[datatype]
11. Na especificao do parmetro id do item 10, adicione a tagged value
@andromda.presentation.web.view.field.type com o valor hidden
87
14. Crie uma transio entre a ao Deleta Pais e o estado final ConsultarPais
88
15. Para ver a tela gerada, rode o comando maven install deploy no prompt de
comando, inicialize o JBoss, abra um browser e acesse o endereo
http://localhost:8080/<nome doprojeto>/. Por exemplo:
http://localhost:8080/SuportePais/
89
uso DetalharPais por essa transio, mas de um modo operao estar sendo
setado. Para isso, basta separar por ,.
13. Para ver a tela gerada, rode o comando maven install deploy no prompt de
comando, inicialize o JBoss, abra um browser e acesse o endereo
http://localhost:8080/<nome doprojeto>/. Por exemplo:
http://localhost:8080/SuportePais/
14. O modo operao tambm pode ser utilizado para campos, de forma a
especificar quando um campo de uma tela deve ser apresentado ou no de
acordo com o modo operao. Para isso, basta acrescentar a tagged value
@andromda.presentation.view.field.operation.mode com o valor do modo
operaao. Este valor um array de String, podendo conter vrios modos
operaes. Basta colocar os valores separados por ,.
92
93
94
11. Crie uma operao chamada removeVarios que retorna void e recebe como
parmetro id do tipo Long[datatype] na classe ConsultaPaisControle
95
13. Crie uma transio entre a ao Remove Vrios Paises e o estado final
ConsultarPais.
96
14. Para ver a tela gerada, rode o comando maven install deploy no prompt de
comando, inicialize o JBoss, abra um browser e acesse o endereo
http://localhost:8080/<nome doprojeto>/. Por exemplo:
http://localhost:8080/SuportePais/
15. No Eclipse abra o arquivo:
<DiretorioProjeto>/web/src/java/<PacoteProjeto>/web/cadastroPais/consultaPais/Con
sultaPaisControleImpl.java
Iremos implementar o mtodo removeVarios da seguinte forma:
public void removeVariosPaises(ActionMapping mapping,
RemoveVariosPaisesForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception {
try {
List<Long> paises = form.getIdRowSelection();
for(Long id: paises){
Pais pais = new PaisImpl();
pais.setId(id);
pais = (Pais)
getPaisHandler(request).manipulaPais(pais, new
SelectAction()).get(0);
getPaisHandler(request).manipulaPais(pais, new
DeleteAction());
}
saveWarningMessage(request, "sucesso.remocao.pais");
} catch (Exception e) {
saveErrorMessage(request, "erro.remocao.pais");
e.printStackTrace();
}
}
16. Salve os arquivos no Eclipse, abra um terminal e, no diretrio do projeto,
execute o comando maven install deploy.
17. Inicialize o JBoss conforme descrito anteriormente e no browser teste a
aplicao na url: http://localhost:8080/SuportePais/
97
4.8.
98
4.8.3. Retrabalho
O fato da personalizao dos JSP serem a ltima parte do tutorial no foi por
acaso.
Quando criamos uma pgina personalizada, estamos "forando" o maven a
utilizar a nossa pgina personalizada e no a que ele gera automaticamente. Isso quer
dizer que, se voc fizer alguma alterao no modelo, ela no vai aparecer na sua
pgina personalizada, pois s quem pode mexer nela voc. como se o maven
dissesse: "OK! Crie sua pgina personalizada, mas ela de sua inteira
responsabilidade! Eu no vou chegar nem perto dela!". Por isso que o processo de
personalizao deve ser a ltima coisa a ser feita na etapa de desenvolvimento, pois
qualquer alterao no modelo no ser repassada para a sua pgina personalizada.
Mas e se, futuramente, voc realmente precisar adicionar algo no modelo? Tem como
fazer com que, por exemplo, um novo campo de formulrio aparea na pgina que foi
personalizada? Sim, claro!
Basta:
Localizar a pgina gerada automaticamente (ela continuar sendo gerada no
mesmo caminho que vimos acima, s que no ser exibida na tela do sistema). Dentro
da pgina, localize o cdigo gerado do seu interesse e copie para a rea de
transferncia (editar/copiar). Por exemplo, se voc adicionou um novo campo no
modelo, localize e copie o cdigo desse novo campo. O nome o mesmo que voc
utilizou no modelo. Cole o cdigo na sua pgina personalizada, onde voc quer que
ele aparea.
4.8.4. Abas
Vamos fazer a ultima modificao no exemplo do sistema do tutorial, iremos
inserir uma aba na pagina de detalhamento do pas e colocar a exibio das unidades
federativas nesta. Para inserir abas na suas pginas personalizadas, basta copiar o
cdigo abaixo e colar no local do cdigo onde voc quer que a aba seja renderizada.
No nosso caso ser o arquivo detalhes-do-pais-ufs.jspf que est na caminho
\SeuProjeto\web\target\src\br\gov\tutorial\web\cadastroPais\detalhaPais\. Lembrando
que para alterar uma pagina jsp devemos copiar SOMENTE a pagina desejada para o
diretrio jsp que conter as pginas personalizadas.
Codigo das abas:
<div class="SubAbaResultado">
<div class="BotaoMostraSubAba"
onClick="mensagens.style.display =''; this.style.display
='none';
BotaoAbaDadoComplementar2.style.display ='';"
id="BotaoAbaDadoComplementar1">
<bean:message
key="custom.reenvio.mensagem.antecessoras"/>
<img src="/sgdcp/layout/sgdc/BotMostraSubAba.gif"
width="16" height="12">
</div>
<div id="BotaoAbaDadoComplementar2"
onClick="mensagens.style.display ='none';
this.style.display='none';
BotaoAbaDadoComplementar1.style.display ='';"
99
class="BotaoMostraSubAba"
style="display:none ">
<bean:message
key="custom.reenvio.mensagem.antecessoras"/>
<img src="/sgdcp/layout/sgdc/BotEscondeSubAba.gif"
width="16" height="12">
</div>
</div>
Como a aba fecha: Repare que existem duas divises lgicas div dentro da
diviso lgica da aba. Uma delas responsvel por abrir a aba e a outra responsvel
por fech-la. Repare nos comandos que esto no onClick, o mensagens.style.display
responsvel pela mostragem da aba, se tiver none a aba no mostrada e se for
atribuda ento ela ser mostrada. J o BotaoAbaDadoComplementar1.style.display
e o AbaDadoComplementar2.style.display so os comandos que passam a deciso de
uma diviso lgica pra outra, dessa forma sempre depois que for aberta a aba o
prximo clique ir fech-la, j o prximo abrir de novo e assim em diante.
Vamos fazer nosso exemplo
1. Altere mensagens.style.display , na segunda e na dcima linha pelo contedo
da tag id do bloco de pgina que voc deseja colocar dentro da aba. No nosso
caso ser o bloco que tem a id ufs.
2. Dessa forma, voc quer que todo o cdigo envolvido pela tag <div id="ufs ">
fique dentro de uma aba. Agora Substitua mensagens.style.display por
ufs.style.display .
3. Caso voc queira que a aba inicie fechada coloque o atributo
style=display:none" dentro da tag do local desejado, ou seja, <div id=" ufs "
style="display:none">. Caso voc no altere isso a aba vai iniciar aberta
mostrando o contedo. Experimente fazer dos dois jeitos para ver
funcionando.
4. O rtulo da aba est definido por uma chave. Substitua a chave
custom.reenvio.mensagem.antecessoras do cdigo pela chave que apontar
para o cdigo da sua aba.
Se tiver feito tudo segundo o sugerido, o cdigo html ficara da seguinte forma:
<div class="SubAbaResultado">
<div class="BotaoMostraSubAba"
id="BotaoAbaDadoComplementar1" onClick="ufs.style.display
='';
this.style.display ='none';
BotaoAbaDadoComplementar2.style.display ='';"
>
<bean:message
key="detalhar.pais.detalhamento.do.pais.param.ufs"/>
<img src="/SuportePais/layout/sgdc/BotMostraSubAba.gif"
width="16" height="12">
</div>
<div
class="BotaoMostraSubAba"
id="BotaoAbaDadoComplementar2"
onClick="ufs.style.display ='none';
this.style.display='none';
BotaoAbaDadoComplementar1.style.display ='';"
100
class="BotaoMostraSubAba"
style="display:none "
>
<bean:message
key="detalhar.pais.detalhamento.do.pais.param.ufs"/>
<img src="/SuportePais/layout/sgdc/BotEscondeSubAba.gif"
width="16" eight="12">
</div>
</div>
Depois disso abra um terminal e, no diretrio do projeto, execute o comando
maven install deploy.
Inicialize o JBoss conforme descrito anteriormente e no browser teste a
aplicao na url:http://localhost:8080/SuportePais/
101