Prática do padrão WorkWithPlus

P á g i n a | 2

Introdução

O padrão WorkWithPlus é um padrão desenvolvido por DVelop Software Solutions com o objetivo de

acompanhar a alteração tecnológica da nova versão de GeneXus. Foi desenvolvido a partir do WorkWith

Pattern convencional, desenvolvido pela Artech, com o objetivo de aumentar sensivelmente a flexibilidade

oferecida ao usuário, tanto para modificar a forma em que se geram os objetos, bem como para modificar

os objetos gerados sem perder a sua relação com o padrão.

Exercício

1. Começamos por criar uma nova KB.

P á g i n a | 3

2. Em Prototyping Environment selecionamos a opção C# e em Target a opção Web.

3. Em seguida criamos uma nova transação (TRN) com nome Pais, com os seguintes atributos

(PaisId definir como AutoNumber = true).

P á g i n a | 4

4. Logo salvamos a TRN e vamos a opção correspondente a “Patterns”. Aqui vamos encontrar a

opção para aplicar o padrão WorkWithPlus.

5. Selecionamos o Tab correspondente a WorkWithPlus e pressionamos o check box onde diz

“Apply this pattern on save”. Depois disso salvamos as alterações e vemos em Output o resultado

da geração do padrão. Por ser a primeira vez que aplicamos o pattern, WorkWithPlus importará

arquivos de configuração e em seguida aplicará o padrão à TRN selecionada. Por sua vez, aplicará

à TRN o Tema WorkWithPlus que depois se poderá editar.

P á g i n a | 5

6. Verificamos se são gerados objetos distintos para cada TRN, tais como o objeto WWPais, para

trabalhar com todos os países, o objeto ViewPais, para ver um país em particular, a tela

correspondente à TRN País, etc.

7. Após isso, executamos a KB pela primeira vez (F5), onde serão pedido os dados para criação da

base de dados do aplicativo, forneça essas informações e prossiga.

8. A análise de impacto da KB confirma que temos uma nova TRN e devemos impactar as

alterações na base de dados. Como a base de dados ainda não existe, ela será criada

automaticamente. E em seguida a aplicação é gerada e executada.

P á g i n a | 6

10. Entramos na opção “Work With Pais”, e pressionamos o botão de (+) para ingressar países.

11. Ingressamos 4 países e regressamos à KB, ao nó do pattern WorkWithPlus.

P á g i n a | 7

12. Desde a instância de cada TRN podemos fazer um "Preview" de como se vai gerar a tela, sem

ter que especificar, compilar e executar. Para fazer isso pressionamos o botão direito sobre o nó

principal da TRN e selecionamos a opção “Preview” como se mostra na imagem superior.

A partir desta ação se mostrará uma tela com uma representação gráfica de como esta será

gerada.

13. O WorkWithPlus nos permite modificar propriedades de cada elemento dessa tela e ver as

alterações refletidas em "Preview". Nesse caso selecionamos o atributo “PaisNombre” e vamos a

propriedades.

14. Marcamos a opção “Is required” como True, para que o padrão WorkWithPlus estabeleça este

atributo como requerido.

P á g i n a | 8

15. Este passo agregará as regras correspondentes ao nível de Rules como se vê na imagem

superior. Depois disso podemos pressionar novamente F5 e testar a funcionalidade agregando

algum país adicional.

16. Depois voltamos à KB e criamos a transação Persona, como se mostra em seguida, (PersonaId

tem AutoNumber = true).

17. O atributo PersonaSexo se define com base em um Domínio Sexo que tem a seguinte

estrutura:

P á g i n a | 9

18. De seguida aplicamos o padrão WorkWithPlus a esta TRN, e se move a tabela TableActions

para cima de TableContent.

P á g i n a | 10

19. Selecionamos a opção "Preview" da transação para ver como se vai gerar a tela (observar que

as ações aparecem por cima dos dados uma vez que se moveu a tabela de lugar).

P á g i n a | 11

20. Depois selecionamos para que o atributo PersonaId não seja visível na transação, e retornamos

a tabela que contém as ações para debaixo da tabela que contém os atributos.

Em seguida queremos ter a possibilidade de selecionar em tempo de execução as colunas que

desejamos ver no grid correspondente ao nó selecionado, ou seja Trabalhar com Personas. Para

isso selecionamos o nó “Grid” dentro do ramo “Selection (Work With Personas)”.

21. Marcamos como True a opção “Columns selector”. Retornamos à TRN Personas no modo

"structure" e selecionamos o atributo “PaisId”. Para esse atributo selecionamos a opção InputType

= Descriptions. Em ItemDescriptions = PaisNombre, e em Suggest = OnRequest (esta opção nos

permitirá ingressar um país escrevendo o nome e não o id do mesmo).

P á g i n a | 12

22. Depois de alterar esta configuração pressionamos F5 novamente, reorganizamos as alterações

correspondentes e vamos para a tela de ingressar pessoas.

P á g i n a | 13

23. Depois de ingressar uma pessoa voltamos ao grid correspondente a Trabalhar com Personas.

Se desejamos agora alterar as colunas, tanto a sua ordem como selecionar quais são ou não

visíveis, podemos fazê-lo com Columns Selector.

24. Ao pressionar o botão de ‘Edit Columns’ se abre um popup onde podemos selecionar que

colunas queremos ver e em que ordem. Depois de realizar as modificações pressionamos o botão

de Update columns e vemos refletidas as alterações no grid.

P á g i n a | 14

25. Em seguida queremos agregar uma coluna nova no grid, para isso retornamos ao nó Selection,

e no nó da grid selecionamos “Add” e depois “GridVariable” para inserir uma variável nova como

coluna.

Assim que selecionamos que queremos agregar esta variável, aparece uma janela onde se deve

escolher sobre que atributo ou domínio estará baseada essa variável. Elegemos o atributo

‘PersonaNombre’ e aceitamos. Se agregará no grid o seguinte nó:

26. Na nova variável modificamos o nome para “Nombre Completo”. Depois em LoadCode

iniciamos a variável. Este código se vai inserir diretamente no evento Load do objeto

WWPersonas. Lhe atribuímos:

&NombreCompleto = PersonaNombre + ' ' + PersonaApellido + ' (' + PersonaEdad.ToString() + ')'

P á g i n a | 15

Depois disso abrimos o objeto “WWPersonas” e podemos verificar que no evento Load se inseriu

o código que agregamos na propriedade anterior.

Uma das vantagens de WorkWithPlus é a flexibilidade para poder editar os objetos gerados. O que

quer dizer que podemos editar os objetos por fora do código gerado pelo padrão. Ao fazer essas

alterações particulares sobre o objeto este ficaria normalmente deslinkado do padrão, e ao aplicar

o padrão novamente se perderia as alterações particulares. Com WorkWithPlus isso não ocorre, as

alterações particulares são guardados e o objeto se mantém linkado com a instância do padrão. Se

pode notar que o código gerado pelo padrão está delimitado por comentários (Start e End). O

usuário pode agregar código tanto por cima como por baixo do código gerado automaticamente, e

o mesmo não será sobrescrito no momento de reaplicar o padrão. Também se podem definir

novos eventos ou subs (isso se exemplificará mais à frente na parte prática).

28. Depois de executar (F5) vemos o resultado no grid.

29. De seguida vemos como se pode modificar a tabela que contém os botões de “Inserir” e

“Exportar” de forma a alinhar os mesmos para a esquerda.

P á g i n a | 16

30. Também podemos alterar as colunas de lugar, como por exemplo mover a coluna Apellido

para cima, isto é, para antes da coluna Nombre.

Todas estas alterações na instância se podem salvar e aplicar novamente. Internamente o

WorkWithPlus vai deixar o nosso código de usuário igual sem alterações, e de acordo com isso vai

realizar as suas alterações.

31. Depois de aplicar estas alterações pressionamos F5 e vemos as alterações em execução.

32. Da mesma forma que se pode ingressar código de usuário, o usuário do padrão WorkWithPlus

pode inserir “zonas de usuário”. Estas são blocos ou zonas dentro das telas dos web panels

gerados pelo padrão, nos quais o programador tem total controle.

Ou seja, dentro destas zonas de usuário podemos inserir qualquer controle (textblock, variable,

User Control, etc) e ao re-aplicar o padrão estes se preservam da mesma forma em que os

inserimos. Por sua vez, podemos usar código de usuário para modificar propriedades nos

controles ou lhes atribuir comportamentos.

P á g i n a | 17

De seguida vamos inserir uma Zona de Usuário ou “UserTable” no nó Selection dentro da tabela

TableGridHeader.

33. Atribuímos um nome à tabela que vai definir uma zona de usuário: myUserTable e salvamos a

transação.

P á g i n a | 18

34. Depois de salvar a transação, abrimos o objeto WWPersona para ver debaixo da grelha a nossa

User Table.

35. Dentro desta tabela inserimos um TextBlock de nome “PagesTextBlock”.

36. A partir do código vamos usar este TextBlock para mostrar a página actual na qual nos

encontramos no grid. Para isso ingressamos o seguinte código no evento Grid.Load do objeto

WWPersona:

37. De seguida pressionamos F5 e vemos as alterações em execução.

P á g i n a | 19

Com este exemplo podemos ver o potencial desta funcionalidade, que permite ao usuário inserir

qualquer tipo de controle que interaja com os demais controles na tela (e desta forma agregar

valor aos objetos gerados por WorkWithPlus).

38. Em seguida vamos gerar um Web Panel de associação. Para isso criamos 2 TRN, Empresa e

Moeda. Depois criamos uma terceira TRN EmpresaMoneda (que será o que vai gerar a tabela de

relação) como se mostra nas imagens (a TRN EmpresaMoneda deve estar configurada como

Business Component).

O Web Panel de associação permitirá ao usuário selecionar para determinada empresa, quais as

moedas que a mesma vai operar (as moedas relacionadas com cada empresa).

39. Aplique o padrão WorkWithPlus na transação de Empresa, e dentro do nó Level selecionamos

a opção Add -> Association, e selecionamos a TRN EmpresaMoneda.

P á g i n a | 20

De seguida salvamos a instância e assim se aplicará o pattern e se irá criar o novo Web Panel.

Depois disso modificamos os TextBlocks: “Not associated Empresa Moneda” e “Associated

Empresa Moneda” por “Monedas no asociadas” e “Monedas asociadas”.

41. Agregamos uma UserAction ao nível do grid do nó Selection e selecionamos em GXObject o

objeto criado como associação. Selecionamos o tipo Imagem para o controle e especificamos uma

imagem.

P á g i n a | 21

42. Agregamos um parâmetro a UserAction que seja “EmpresaId”.

43. Depois salvamos o padrão novamente e executamos. Ingressamos uma empresa e 3 moedas e

em seguida executamos Work With Empresas e pressionamos o botão de “Moneda Asociadas”

para modificar esta relação de N a N (desta forma poderemos entrar no novo Web Panel de

associação que nos permitirá selecionar as moedas relacionadas com cada empresa).

P á g i n a | 22

44. Em Seguida, queremos que todos os objetos WW tenham a ação para exportar em pdf o grid

com os valores que estão sendo filtrados. Então vamos em Preferences da "KB Navigator /

Patterns / Work With Plus, e criamos uma StandardAction na qual selecionamos o nome

“ExportReport”. Agregamos a mesma na tabela “Table Actions”.

P á g i n a | 23

Devemos configurar a propiedade ‘Include Action’ desta ação, para a ação esteja incluída no

objeto em <default>,:

Depois configuramos a propriedade “Preview” de WorkWithPlus Configuration de forma a ver

como ficarão os objetos gerados a partir deste Template, podemos associar qualquer transação da

aplicação. Aqui selecionamos Persona:

P á g i n a | 24

Salvamos a configuração e executamos Preview do objeto Selection, e vemos o resultado:

Para que esta alteração impacte todas as instâncias (em particular os objetos Selection) de toda a

aplicação, executamos a ação ‘Update Instances’, sobre o nó ‘Instance Generation Template’. Logo

se pode visualizar o log que mostra quais Instâncias foram impactadas corretamente e que as

propriedades não se impactaram, pois haviam sido modificadas nessa instância em particular,

entre outros.

Em seguida, abrimos Transação de País e confirmamos que se inseriu a nova ação.

P á g i n a | 25

P á g i n a | 26

Por último, executamos a aplicação e testamos o "export report".

45. Agora vamos criar um web panel a partir do web panel template denominado:

WorkWithWithoutBaseTable. Para isso criamos um web panel que se denomine

‘WebPanelEjemplo’ e abrimos a instância do Pattern, clicamos na opção "Apply this pattern on

save" e salvamos o objeto, em seguida selecionamos o template no qual vamos basear este

WebPanel da seguinte forma:

Agora selecionamos o template ‘WorkWithWitohutBaseTable’ e observamos que se ingressaram

todos os nós que foram definidos no template:

P á g i n a | 27

Em seguida agregamos variáveis no grid, baseadas em PersonaNombre, PersonaApellido e

PersonaEdad, teremos uma tela similar a de baixo:

Depois de salvar a WebPanel, se abre Eventos e se realiza o "for each" correspondente para que

percorra a tabela de Persona e lhe sejam atribuídas as variáveis.

Por último se executa a aplicação e se vêm os resultados em execução.