Raible's Wiki: ValidationAndList

At line 73 changed 1 line.

Para ativar validação cliente (client-side) em nosso personForm.jsp, uma tag javascript JSP e um script são obrigatórios na parte inferior do personForm.jsp. O seguinte código já deverá existir (graças ao appgen) - só necessitamos retirar os comentários dele. A razão pela qual este código está comentada é porque o Validator dispara uma exceção se um nome de formulário for especificado e nenhuma validação existir para ele.

A validação do lado cliente é habilitada por padrão no personForm.jsp. Existe uma tag JSP <html:javascript> e um script na parte inferior da página que habilita isso. O seguinte código já deve existir (graças ao AppGen) - mas pode ser necessário retirar os comentários se estes foram feitos no último tutorial.

At line 75 removed 2 lines.

;:''Pessoalmente, eu considero isto [um bug|http://nagoya.apache.org/bugzilla/show_bug.cgi?id=27316], mas a equipe de desenvolvedores do Struts não concorda.''

At line 86 changed 1 line.

Now that you have Validation configured for this form, whenever this form is used in an action-mapping with validate="true", these rules will be applied. In the [last tutorial|CreateActions], we added the "savePerson" action-mapping for PersonAction. The XDoclet tags for this action-mapping were:

Agora que possuímos a validação configurada para este formulário, estas regras serão aplicadas toda vez que este formulário for utilizado em um action-mapping com validate="true". No [tutorial anterior|CreateActions_pt], adicionamos o action-mapping "savePerson" para a classe PersonAction. As tags XDoclet para este action-mapping eram:

At line 94 changed 1 line.

So now, as long as your web/pages/personForm.jsp has <html:form action="savePerson">, validation should kick in when we try to save this form. Run __ant db-load deploy__, start Tomcat and go to [http://localhost:8080/appfuse/editPerson.html?id=1].

Então agora, contanto que nosso web/pages/personForm.jsp possua um <html:form action="savePerson">, a validação deve ser realizada quando tentarmos salvar este formulário. Rodaremos __ant db-load deploy__, inicie o Tomcat (ou __ant db-load deploy start.tomcat__ para simplificar) e vá para [http://localhost:8080/appfuse/editPerson.html?id=1].

At line 96 changed 1 line.

If you erase the values in the firstName and lastName fields and click the save button, you should get the following JavaScript alert.

Se apagarmos os valores nos campos firstName e lastName, e clicarmos o botão Salvar, devemos receber o seguinte alerta Javascript:

At line 102 changed 1 line.

To make sure things are ''really'' working as expected, you can turn off JavaScript and ensure the server-side validation is working. This is easy in [Mozilla Firebird|http://www.mozilla.org/products/firebird/] (my favorite browser), just go to Tools → Options → Web Features and uncheck "Enable JavaScript". Now if you clear the fields and save the form, you should see the following:

Para nos certificarmos que tudo está ''realmente'' executando como esperamos, podemos desligar Javascript para provar que a validação do lado do servidor está funcionando. Isto é relativamente simples no [Mozilla Firebird|http://www.mozilla.org/products/firebird/] (meu browser favorito), apenas vá em Ferramentas(Tools) → Opções (Options) → Facilidades (Web Features) and uncheck "Permitir Javascript" ("Enable JavaScript"). Agora se limparmos os campos e salvarmos formulário, devemos ver o seguinte:

At line 108 changed 1 line.

If you don't see these validation errors, there are a couple possibilities:

Se não forem mostrados os erros de validação, podem haver algumas possibilidades:

At line 110 changed 4 lines.

* The form saves with a success message, but the firstName and lastName fields are now blank.

;:''This is because the <html:form> in web/pages/personForm.jsp has action="editPerson" - make sure it has __action="savePerson"__.''

* You click save, but a blank page appears.

;:''The blank page indicates that the "input" attribute of you "savePerson" forward is incorrectly configured. Make sure it relates to a local or global action-forward. In this example, it should be __input="edit"__, which points to the .personDetail tile's definition. From my experience, the input's value must be a forward, not a path to an action.''

* O formulário salva com a mensagem de sucesso, mas os campos firstName e lastName estão em branco.

;:''Isto é porque o <html:form> na página web/pages/personForm.jsp possui action="editPerson" - certifique-se que ele contenha __action="savePerson"__.''

* Clicamos em "Salvar", mas uma página em branco apareceu.

;:''A página em branco indica que o atributo de "entrada" de nosso envio "savePerson" está configurada erroneamente. Devemos nos certificar que ele esteja relacionado com um action-forward local ou global. Neste exemplo, ele deve ser __input="edit"__, que aponta para a definição de .personDetail. Por experiência própria, um valor de entrada deve ser um envio, não um caminho para uma action.''

At line 115 changed 1 line.

If you only want server-side validation (no JavaScript), you can remove the ''onsubmit'' attribute of <html:form> (in web/pages/personForm.jsp) as well as the Validator JavaScript tags at the bottom of the page.

Se desejarmos apenas validação do lado servidor (sem Javascript), podemos remover o atributo ''onsubmit'' do <html:form> (em web/pages/personForm.jsp) assim como as tags de validação Javascript no final da página.

At line 126 changed 1 line.

To create a List screen (also called a master screen), we need to create methods that will return all the rows from our ''person'' table. Let's start by adding tests for these methods to our PersonDaoTest and PersonManagerTest classes. I usually name this method ''getEntities'' (i.e. getUsers), but you could also use ''getAll'' or ''search'' - it's really just a matter of personal preference.

Para criarmos uma tela de listagem (também chamada uma tela mestre), devemos criar métodos que retornarão todas as tuplas de nossa tabela ''person''. Vamos começar adicionando os métodos de teste às nossas classes PersonDaoTest e PersonManagerTest. Geralmente nomeio este método ''getEntidades'' (i.e. getUsers), mas podemos também utilizar ''getAll'' ou ''search'' - isto é realmente uma questão de preferência pessoal.

At line 128 changed 1 line.

Open test/dao/**/dao/PersonDaoTest.java and add a ''testGetPeople'' method:

Abra o arquivo test/dao/**/dao/PersonDaoTest.java e adicione o método ''testGetPeople'':

At line 139 changed 1 line.

The reason I'm passing in a person object to the ''getPeople'' method is to allow for filtering (based on values in person) in the future. Adding this parameter in your getPeople() method signature is optional, but the rest of this tutorial assumes you have done this.

A razão pela qual passamos um objeto person ao método ''getPeople'' é para permitir filtragem (baseado nos atributos do person) no futuro. Adicionando este parâmetro na assinatura de nosso método getPeople() é opcional, mas o resto do tutorial assume que fizemos isto.

At line 141 changed 1 line.

Now open test/service/**/service/PersonManagerTest.java and add a ''testGetPeople'' method:

Agora abra o arquivo test/service/**/service/PersonManagerTest.java e adicione um método ''testGetPeople'':

At line 150 changed 1 line.

// set expected behavior on dao

// seta o comportamento esperado do DAO

At line 160 changed 1 line.

In order for these tests to compile, you need to add the ''getPeople()'' method to the PersonDao and PersonManager interfaces, and their implementations.

Para estes testes compilarem, devemos adicionar o método ''getPeople()'' às interfaces PersonDao e PersonManager, assim como a suas implementações.

At line 163 changed 1 line.

Open src/dao/**/dao/PersonDao.java and add the getPeople() method signature:

Abra o arquivo src/dao/**/dao/PersonDao.java e adicione a assinatura do método getPeople():

At line 170 changed 1 line.

Now add the same method signature to src/service/**/service/__PersonManager.java__. Save all your files and adjust the imports in your tests. Next you need to implement the getPeople() method in your implementation classes. Open src/dao/**/dao/hibernate/PersonDaoHibernate.java and add the following method:

Agora devemos adicionar a mesma assinatura de método ao arquivo src/service/**/service/__PersonManager.java__. Devemos salvar todos os arquivos e ajustar os imports em nossos testes. Após isso, devemos implementar o método getPeople() em nossas classes de implementação. Abra o arquivo src/dao/**/dao/hibernate/PersonDaoHibernate.java e adicione o seguinte método:

At line 181 changed 1 line.

You'll notice here that nothing is being done with the ''person'' parameter. This is just a placeholder for now - in the future you may want to filter on it's properties using [Hibernate's Query Language|http://www.hibernate.org/hib_docs/reference/en/html/queryhql.html] (HQL) or using [Criteria Queries|http://www.hibernate.org/hib_docs/reference/en/html/querycriteria.html].

Devemos notar que nada está sendo feito com o parâmetro ''person''. Este parâmetro não está sendo utilizado ainda como filtro - no futuro talvez necessitemos executar este filtro utilizando [Hibernate's Query Language - HQL|http://www.hibernate.org/hib_docs/reference/en/html/queryhql.html] ou utilizando [Criteria Queries|http://www.hibernate.org/hib_docs/reference/en/html/querycriteria.html].

At line 183 changed 1 line.

''An example using a Criteria Query:''

''Um exemplo utilizando Criteria Query:''

At line 187 changed 1 line.

// filter on properties set in the person object

// filtra as propriedades no objeto person

At line 198 changed 1 line.

Now implement the ''getPeople()'' method in src/service/**/impl/PersonManagerImpl.java:

Agora devemos implementar o método ''getPeople()'' no arquivo src/service/**/impl/PersonManagerImpl.java:

At line 207 changed 1 line.

After saving all your changes, you should be able to run both tests by executing the following:

Após salvarmos todas as modificações, poderemos rodar ambos os testes executando os seguintes comandos:

At line 212 changed 1 line.

If everything works - ''nice job!'' Now you need to add this ''retrieve all'' functionality to the web tier.

Se tudo funcionar - ''Bom Trabalho!'' Devemos agora adicionar a funcionalidade de ''recuperar todos'' à camada web.

At line 215 changed 1 line.

Open test/web/**/action/PersonActionTest.java and add the following method:

Devemos abrir o arquivo test/web/**/action/PersonActionTest.java e adicionar o seguinte método:

At line 231 changed 1 line.

This class will not compile until you add the PERSON_LIST variable to the src/dao/**/Constants.java file.

Esta classe não compilará até que adicionemos a variável PERSON_LIST ao arquivo src/dao/**/Constants.java.

At line 233 changed 1 line.

;:%%(color: blue)''I usually copy a similar variable that already exists in this file - i.e. USER_LIST.''

;:%%(color: blue)''Geralmente eu copio uma variável similar que já existe no arquivo - i.e. USER_LIST.''

At line 238 changed 1 line.

* The request scope attribute that holds the person list

* O atributo de escopo de requisição que contém a lista de pessoas

At line 243 changed 1 line.

Now save all your changes. You won't be able to run __ant test-web -Dtestcase=PersonAction__ yet since ''PersonAction.search()'' does not exist (yet).

Agora devemos salvar todas as nossas modificações. Não seremos capazes de rodar __ant test-web -Dtestcase=PersonAction__ ainda porque o método ''PersonAction.search()'' não existe (ainda).

At line 246 changed 1 line.

Open src/web/**/action/PersonAction.java and add the following XDoclet tag at the top - to forward to our list screen.

Abra o arquivo src/web/**/action/PersonAction.java e adicione a seguinte tag XDoclet na parte superior - para mapearmos um envio à nossa tela de listagem.

At line 253 changed 1 line.

Now add the search method to the body of the PersonAction class.

Agora devemos adicionar o método de pesquisa ao corpo da classePersonAction.

At line 255 changed 1 line.

;:%%(color: blue)''I used UserAction.search() as a template for this method.''

;:%%(color: blue)''Utilizei UserAction.search() como um template para este método.''

At line 264 changed 1 line.

log.debug("Entering 'search' method");

log.debug("Entrando no método 'search'");

At line 271 changed 1 line.

// return a forward to the person list definition

// retorna um envio à definição da lista de pessoas

At line 276 changed 1 line.

Run __ant test-web -Dtestcase=PersonAction__.

Rode __ant test-web -Dtestcase=PersonAction__.

At line 283 changed 1 line.

Open the personList.jsp file in ''web/pages''. At the top of the file is a <bean:struts> tags that exposes the edit screen's forward as a page-scoped variable. This should already have a value of "editPerson".

Devemos abrir o arquivo personList.jsp em ''web/pages''. Na parte superior do arquivo existe uma tag <bean:struts> que expõe o envio à tela de edição como uma variável de escopo de página. Esta variável já deve estar com o valor de "editPerson".

At line 287 changed 1 line.

<%-- For linking to edit screen --%>

<%-- Para ligar com a tela de edição --%>

At line 291 changed 1 line.

Add this to the metadata/web/global-forwards.xml, as well as one for viewing the list. This way, they will get included in our struts-config.xml file.

Adicione o seguinte conteúdo ao arquivo metadata/web/global-forwards.xml, contendo envios globais tanto para a tela de edição quanto para a tela de listagem. Desta forma, eles serão incluídos em nosso arquivo struts-config.xml.

At line 299 changed 1 line.

Another thing you'll probably want to change is the plural form of the items you're listing. The generated name in this example is "persons" and it should probably be people. At or near line 31, you should have the following line:

Outra coisa que provavelmente devemos mudar é o plural dos itens que estamos listando. O nome gerado no exemplo é "persons" e provavelmente deve ser pessoas (ou people, se estiver utilizando i18n). Perto ou na linha 31, devemos ter a seguinte linha:

At line 303 changed 1 line.

Change it to:

Devemos mudar para:

At line 305 changed 1 line.

{{{<display:setProperty name="paging.banner.items_name" value="people"/>}}}

{{{<display:setProperty name="paging.banner.items_name" value="pessoas"/>}}}

At line 307 changed 1 line.

Finally, add the title and heading keys (personList.title and personList.heading) to web/WEB-INF/classes/ApplicationResources.properties. Open this file and add the following:

Finalmente, devemos adicionar as chaves de título e de cabeçalho (personList.title e personList.heading) ao arquivo web/WEB-INF/classes/ApplicationResources.properties (no nosso caso, web/WEB-INF/classes/ApplicationResources_pt.properties). Devemos abrir este arquivo e adicionar o seguinte:

At line 310 changed 3 lines.

# -- person list page --

personList.title=Person List

personList.heading=All People

# -- página da lista de pessoas --

personList.title=Lista de Pessoas

personList.heading=Todas as Pessoas

At line 315 changed 2 lines.

As a reminder, the {{personList.title}} is what ends up in the brower's title bar (the <title> tag) and

{{personList.heading}} will be put into an &lth1> tag before any page content.

Como um lembrete, o {{personList.title}} é o que está na barra de título do navegador (a tag <title>) e {{personList.heading}} será colocado em uma tag &lth1> antes de qualquer conteúdo da página.

At line 318 changed 1 line.

At this point, you should be able to run __ant clean deploy__, start Tomcat and view this page in your browser at [http://localhost:8080/appfuse/editPerson.html?method=Search].

Neste ponto, já seremos capazes de rodar __ant clean deploy__, iniciar o Tomcat e ver a página no navegador em [http://localhost:8080/appfuse/editPerson.html?method=Search].

At line 320 changed 1 line.

Now that we have a List Screen, let's change the pages that are displayed after adding and deleting a new Person. In src/web/**/action/PersonAction.java, change the ''mapping.findForward("mainMenu")'' in the ''save'', ''delete'' and ''cancel'' methods to be:

Agora que temos uma tela de listagem, vamos mudar as páginas que são mostradas após adicionar e remover uma nova pessoa. Em src/web/**/action/PersonAction.java, devemos mudar o ''mapping.findForward("mainMenu")'' nos métodos ''save'', ''delete'' e ''cancel'' para:

At line 327 changed 1 line.

You will also need to change ''verifyForward("mainMenu")'' to be ''verifyForward("viewPeople")'' in the testRemove method of test/web/**/action/PersonActionTest.java. Lastly, the Canoo tests "AddPerson" and "DeletePerson" need to be updated. Open test/web/web-tests.xml and change the following line in the "AddPerson" target:

Devemos também modificar ''verifyForward("mainMenu")'' para ''verifyForward("viewPeople")'' no método testRemove do arquivo test/web/**/action/PersonActionTest.java. Por último, os testes Canoo "AddPerson" e "DeletePerson" devem ser atualizados. Devemos abrir o arquivo test/web/web-tests.xml e modificar a seguinte linha do alvo (''target'') "AddPerson":

At line 329 changed 1 line.

{{{<verifytitle description="Main Menu appears if save successful"

{{{<verifytitle description="O Menu Principal aparece se o save ocorreu com sucesso"

At line 332 changed 1 line.

to:

para:

At line 334 changed 1 line.

{{{<verifytitle description="Person List appears if save successful"

{{{<verifytitle description="A lista de pessoas aparece se salvou com sucesso"

At line 337 changed 1 line.

Then in the "DeletePerson" target, change the following line:

E no alvo (''target'') "DeletePerson", devemos mudar as seguintes linhas:

At line 339 changed 1 line.

{{{<verifytitle description="display Main Menu"

{{{<verifytitle description="mostra o Menu Principal"

At line 343 changed 1 line.

to:

para:

At line 345 changed 1 line.

{{{<verifytitle description="display Person List" text=".*${personList.title}.*" regex="true"/>}}}

{{{<verifytitle description="mostra a Lista de Pessoas" text=".*${personList.title}.*" regex="true"/>}}}

At line 347 changed 1 line.

We use "viewPeople" instead of "list" so that the search method will be executed, rather than simply forwarding to the personForm.jsp (which the "list" forward points to).

Utilizamos "viewPeople" ao invés de "list" para que o método de pesquisa seja executado, ao invés de simplesmente enviar para a página personForm.jsp (que o envio "list" aponta).

At line 349 changed 1 line.

To test that displaying this page works, create a new JSP test in test/web/web-tests.xml:

Para testar esta página, devemos criar um novo teste JSP no arquivo test/web/web-tests.xml:

At line 353 changed 1 line.

At line 355 changed 1 line.

description="Tests search for and displaying all people">

description="Testa a procura e mostra todas as pessoas">

At line 361 changed 2 lines.

<verifytitle description="we should see the personList title"

<verifytitle description="devemos ver o título da lista de pessoas"

At line 370 changed 1 line.

You'll also want to add the "SearchPeople" target to the "PersonTests" target so it will be executed along with all the other person-related tests.

Devemos também adicionar o alvo (''target'') "SearchPeople" ao alvo "PersonTests" para que ele seja executado juntamente com os outros testes relacionados à pessoa.

At line 374 changed 1 line.

At line 377 changed 2 lines.

description="Call and executes all person test cases (targets)">

<echo>Successfully ran all Person JSP tests!</echo>

description="Chama e executa todos os casos de teste (targets) relacionados à pessoa">

<echo>Rodou todos os testes JSP de Pessoa com sucesso!</echo>

At line 382 changed 1 line.

Now you can run __ant test-canoo -Dtestcase=SearchPeople__ (or ''ant test-jsp'' if Tomcat isn't running) and hopefully it will result in "BUILD SUCCESSFUL". If so - ''nice work!''

Agora podemos rodar __ant test-canoo -Dtestcase=SearchPeople__ (ou ''ant test-jsp'' se o Tomcat não está rodando) e se tudo der certo isto resultará em um "BUILD SUCCESSFUL". Se este foi o resultado - ''bom trabalho!!''

At line 385 changed 1 line.

The last step is to make the list, add, edit and delete functions visible to the user. The simplest way is to add a new link to the list of links in web/pages/mainMenu.jsp:

O último passo é fazer as funções de listagem, adição, edição e remoção visíveis ao usuário. O meio mais simples é adicionar um novo link para a lista de links no arquivo web/pages/mainMenu.jsp:

At line 387 changed 1 line.

%%note __NOTE:__ The other links in mainMenu.jsp don't use <html:link> so this JSP can be shared among the various web framework implementations in AppFuse (i.e. Spring MVC and WebWork).%%

%%note __NOTA:__ Os outros links em mainMenu.jsp não utilizam <html:link> então o JSP pode ser compartilhado entre os vários frameworks web existentes no appfuse (i.e. como o Spring MVC e o WebWork).%%

At line 398 changed 1 line.

Where ''menu.viewPeople'' is an entry in web/WEB-INF/classes/ApplicationResources.properties.

Onde ''menu.viewPeople'' é uma entrada em web/WEB-INF/classes/ApplicationResources.properties (no nosso caso, web/WEB-INF/classes/ApplicationResources_pt.properties).

At line 400 changed 1 line.

menu.viewPeople=View People

menu.viewPeople=Mostrar Pessoas

At line 403 changed 1 line.

The other (more likely) alternative is that you'll want to add it to the menu. To do this, add the following to web/WEB-INF/menu-config.xml:

A outra (mais eficiente) alternativa é que adicionemos isto ao menu. Para fazê-lo, devemos adicionar o seguinte conteúdo ao arquivo web/WEB-INF/menu-config.xml:

At line 410 changed 1 line.

Make sure the above XML is inside the <Menus> tag, but not within another <Menu>. Then add this new menu to web/common/menu.jsp - which should now look as follows:

Devemos nos certificar que o XML acima esteja dentro da tag <Menus>, mas não dentro de outra tag <Menu>. Então devemos adicionar este novo menu à página web/common/menu.jsp - a qual deve agora estar da seguinte forma:

At line 428 changed 1 line.

Now if you run __ant clean deploy__ start Tomcat and go to [http://localhost:8080/appfuse/mainMenu.html], you should see something like the screenshot below.

Agora se rodarmos __ant clean deploy__ , iniciarmos o Tomcat e acessarmos [http://localhost:8080/appfuse/mainMenu.html], veremos algo como a tela abaixo.

At line 434 changed 1 line.

Notice that there is a new link on the left side (from mainMenu.jsp) and on the right in our menu (from menu.jsp).

Devemos notar que existe um novo link do lado esquerdo (do mainMenu.jsp) e do lado direito no nosso menu (from menu.jsp).

At line 436 changed 2 lines.

!!That's it!

You've completed the full lifecycle of developing a set of master-detail pages with AppFuse and Struts - __Congratulations__! Now the real test is if you can run all the tests in your app without failure. To test, stop tomcat and run __ant clean test-all__. This will run all the unit tests within your project. As a reminder, it should be easy to setup and test AppFuse from scratch using __ant setup-db setup-tomcat test-all__. Also, if you're looking for more robust examples - checkout [Struts Resume|StrutsResume].

!!É isso!

Você completou o ciclo de vida completo de desenvolvimento de um conjunto de páginas master-detail com o AppFuse e Struts - __Parabéns__! Agora o teste real é se você puder rodar todos os testes em sua aplicação sem falhas. Para testar, pare o Tomcat e rode __ant clean test-all__. Isto rodará todos os testes unitários de seu projeto. Como um lembrete, é fácil de instalar e testar o Appfuse do zero utilizando __ant setup-db setup-tomcat test-all__. Ainda assim, se você estiver procurando exemplos mais robustos, veja o [Struts Resume|StrutsResume].

At line 439 changed 1 line.

''__Happy Day!__''

''__Tena um Bom Dia!__''

Raible's Wiki

AppFuse

Other Applications

ValidationAndList_pt