Lab - Forms Experience Builder v8

IBM Collaboration Solutions © 2012 IBM Corporation

IBM Forms Experience
Builder v 8.0
Fundamentos

IBM Forms Experience Builder v8.0 Page 1


Legal Disclaimer
Enquanto os esforços foram feitos para verificar a integridade e exatidão das informações contidas nesta publicação, que é
fornecido COMO É (AS IS) sem qualquer tipo de garantia, expressa ou implícita. Além disso, esta informação é baseada em
planos e estratégias atuais de produtos da IBM, que estão sujeitas a alterações sem aviso prévio pela IBM. A IBM não será
responsável por quaisquer danos decorrentes do uso de, ou relacionado, a esta publicação ou quaisquer outros materiais. Nada
contido nesta publicação visa, nem terá o efeito de, criar quaisquer garantias ou representações da IBM ou de seus fornecedores
ou licenciadores, ou alterar os termos e condições do contrato de licença aplicável que rege o uso de software IBM.

Referências neste material a produtos, programas ou serviços não significam que eles estarão disponíveis em todos os países
nos quais a IBM opera. Datas de lançamento de produtos e/ou capacidade referenciados nesta apresentação podem mudar a
qualquer momento a critério exclusivo da IBM, baseada em oportunidades de mercado ou outros fatores, e não pretende ser um
compromisso de produto futuro ou disponibilidade de recursos de qualquer forma. Nada contido nestes materiais é a intenção,
nem deve ter o efeito de, declarando expressa ou implicitamente que todas as atividades desenvolvidas por você irá resultar em
todas as vendas específicas, crescimento da receita ou outros resultados.

A performance é baseada em medições e projeções usando benchmarks padrões da IBM em um ambiente controlado. O
rendimento real ou o desempenho que qualquer usuário irá experimentar irá variar dependendo de muitos fatores, incluindo
considerações, tais como a quantidade de multiprogramação no fluxo de trabalho do usuário, a configuração I/O, a configuração
de armazenamento, e a carga de trabalho processado. Portanto, nenhuma garantia pode ser dada de que um usuário individual
vai conseguir resultados semelhantes aos aqui mencionados.

Todos os exemplos de clientes descritos são apresentados como exemplos de como esses clientes têm usado os produtos da
IBM e os resultados que alcançamos. Reais custos ambientais e características de desempenho podem variar por cliente.

IBM, o logotipo IBM, Lotus, IBM Forms Experience Builder, IBM DB2, IBM Websphere Application Server são marcas
registradas da International Business Machines Corporation nos Estados Unidos, outros países, ou ambos.

SUSE, SUSE Linux Enterprise são marcas comerciais da SUSE Corporation e Novell Inc. nos Estados Unidos, outros países,
ou ambos.

Firefox é uma marca comercial da Mozilla Foundation nos Estados Unidos, outros países, ou ambos.

Outros nomes de empresas, produtos ou serviços podem ser marcas comerciais ou marcas de serviço de terceiros.

Qualquer referência a reformas, Zeta Bank, Acme ou Exemplo referem-se a uma empresa fictícia e são utilizados apenas para
fins ilustrativos.

© IBM Corporation 2012. Todos os direitos reservados.

Page 2 IBM Forms Experience Builder v8.0


IBM Forms Experience Builder v8.0 – Fundamentos
As informações contidas neste material é de caráter introdutório e fornecida apenas para fins
informativos e demonstrativos da ferramenta IBM Forms Experience Builder v8.0. Tendo por finalidade a
demonstração das funcionalidades e características fundamentais da ferramenta através de exemplos
práticos.

O conteúdo deste material foi desenvolvido com base em uma máquina virtual possuindo o sistema
operacional baseado em Linux e com os seguintes programas instalados: IBM Installation Manager
V1.4.3, IBM Forms Experience Builder v8.0; IBM Websphere Application Server v8.0; IBM DB2
Enterprise Server Edition v9.7.

Informações como usuário e senha, url, entre outros, são fornecidos com base no ambiente configurado
para o treinamento de Forms Experience Builder. Caso haja interesse de configurar um ambiente similar
a este utilizado no treinamento, verifique a apresentação denominada “Bootcamp - Forms Experience
Builder v8.0”, que possui informações e passos de configuração deste ambiente.

Sumário
Requisitos básicos …............................................................................................................................ 04

Lab 1 – Familiarizando com o IBM Forms Experience Builder v8.0 …................................................... 06

Lab 2 – Configurando um serviço …...................................................................................................... 32

Lab 3 – Configurando regras em páginas …......................................................................................... 39

Lab 4 – Configurando regras em componentes de formulários …......................................................... 44

Lab 5 – Trabalhando com fórmulas …................................................................................................... 56

Lab 6 – Explorando estilos em um formulário …......….......................................................................... 64

© IBM Corporation 2012. Todos os direitos reservados.



Requisitos básicos
Resumo

Esta etapa tem por finalidade prover informações para iniciar os serviços necessários para o
funcionamento do ambiente de IBM Forms Experience Builder.

Passos

1. Inicie a máquina virtual

2. Faça o log in com o usuário “root” e senha “password”

3. Abra um terminal e realizar o log in com o usuário “db2inst1”

4. Inicie o DB2

5. Inicie o Websphere Application Server



6. Abra o navegador e acesse o IBM Forms Experience Builder através do link determinado para ele,
por exemplo: http://cocbase.charlotte.ibm.com:9080/forms ou utilizando-se através do IP do
servidor onde se encontra instalado.



Lab 1 – Familiarizando com o IBM Forms Experience Builder v8.0
Resumo

Este exemplo tem por finalidade testar uma parte das funcionalidades do IBM Forms Experience Builder
através de um simples exemplo prático, para familiarizar-se com a ferramenta e seus recursos com uma
visão geral.

Todas as características podem ser personalisadas da forma que o usuário preferir, inserindo ou
retirando os conteúdos e componentes abordados neste laboratório.

Passos

1. Realizar o log in com o usuário “user1” e senha “password'

2. Clicar em “New Application”

3. Insira um nome para o formulário e a descrição do mesmo. Posteriormente selecione o tema e/ou
layout. E finalmente clique em “Create”



4. Delete duas colunas da seção do topo

1
2

5. E delete também uma linha

1

2

6. Insira uma imagem na seção topo

1

2



7. Clique em “Edit Properties”

8. Procure pela imagem desejada

1
2

4
3



9. Insira um “Tabbed Folder”

2
3

1

10. Adicione as abas e dê um nome a elas

Nota: Para adicionar mais abas, basta clicar na imagem de + (demonstrado pela seta de cor cyan). Para adicionar
informações adicionais ao passar com o ponteiro do mouse sobre o item, basta escrever no item denominado “Hover
help text”



11. Apague uma linha e uma coluna da aba de Informativo e adicione um texto

2

3

1

12. Insira um texto qualquer, configure sua formatação e clique em “OK”



13. Na aba de Arquivo, apague uma coluna e uma linha e adicione um item do tipo “Attachment”

3

4 1
2

14. Dê um nome a este item e clique em “OK”

Nota: Em itens/campos interativos você pode optar por torna-lo obrigatório ou não, basta selecionar o item denominado
“Required”



15. Na aba de Opções, apague uma linha e adicione um “Select One” e um “Select Many” em colunas
diferentes

2

1

3 5

4

6

16. Dê um nome a estes dois itens inseridos e adicione as opções



17. Adicione uma imagem na coluna ao lado da “Tabbed Folder” de tamanho 250 x 150

18. Adicionar um “HTML Fragment” logo abaixo da “Tabbed Folder”

2

3

1

19. Insira os códigos HTML clicando sobre o texto “HTML, click to edit...”



20. Escreva alguns códigos HTML

21. Adicione uma pesquisa ao lado de “HTML Fragment”

2

1

3



22. Dê um nome à pesquisa e edite as opções de seleção

23. Adicione os itens da pesquisa



24. Adicione um “Single Line Entry

2

1

25. Dê um nome a este campo e edite a propriedade dele, com o intúito de torna-lo oculto quando não
for acionada a opção Não do item 3.



26. Insira um “Page Navigation”

2

1

27. Duplique esta página e a nomeie para “Page 2”

1

2



28. Na “Page 2”, apague os componentes deixando somente os do topo e do rodapé

29. Insira um “Single Line Entry”

2

1

30. Insira um campo do tipo “Number”

2

1



31. Insira um campo do tipo “Currency”

2

1

32. Insira um “checkbox”

1

2

33. Insira um campo do tipo “DropDown”

1
2

34. Insira um campo do tipo “Date”

2

1



35. Insira um campo do tipo “Email”

2

1

36. Insira um campo do tipo “Time”

2

1



37. Dê um nome para os campos adicionados nesta página



38. Edite as propriedades dos componentes de Data e Hora para que fiquem ocultos quando a opção
de “Deseja agendar?” não estiver ativa

39. Clique em “Preview” para visualizar o formulário



40. O formulário ficará da seguinte forma:

Página 2

Página 1

41. Clique em “Save” e em seguida em “Cancel” para fechar a interface gráfica de edição

2
1

42. Agora com o formulário criado, clique em “Deploy”



43. Clique em “Start” para iniciar a circulação do formulário

Nota: É possível programar o período de circulação do formulário, com data para início e término. Ainda é possível determinar
o envio de email notificando quando a circulação se iniciará e/ou finalizar.

44. Para ver os detalhes do formulário criado, basta clicar sobre a região do mesmo



45. É possível adicionar marcações (tags) para que fiquem mais fáceis a identificação do formulário,
além de facilitar a busca pelo mesmo

Nota: Para adicionar diversas marcações em uma única vez, basta separar os valores por vírgula ou espaço

1

2 3

46. É possível também encontrar link preenchimento do formulário e também para visualização do
mesmo



Ou basta clicar nos link superiores:

47. Copie o link de “Launch Form”

48. Faça o “Log out”, cole o link e faça o login com outro usuário



49. Preencha o formulário e clique em “Submit”

50. Para visualizar as informações coletadas, faça o login com o usuário detentor do formulário e clique
em “View responses”

51. Agora é possível visualizar as informações coletadas. Ao clicar em um usuário, é possível ver as
informações por ele preenchidas, de forma gráfica



52. Clique em “Print” para visualizar o formato de impressão do formulário

Nota: O formato de impressão do formulário traz as informações em formato de relatório



53. Para exportar os dados, basta clicar em

1

2

54. Escolha um dos formatos disponíveis para salvar

55. Clique para “abrir com”



Nota: Os dados serão visualizados em formato de tabela

56. Para exportar este formulário, clique em “Export”

57. E clique em “OK”

Nota: É possível exportar também as informações coletadas

58. Agora é possível realizar a importação utilizando outro usuário. Para importar, basta clicar em
“Import”



59. Assim como é possível exportar os dados coletados, também é possível de importá-los



Lab 2 – Configurando um serviço
Resumo

Este exemplo tem por finalidade demonstrar a integração de um serviço existente com os componentes
de um formulário.

A Arquitetura de Serviços do Forms Experience Builder consiste em dois componentes de alto nível:
Transportes de Serviço e Descrições de Serviço.

● Transportes de Serviço – Fornecem uma maneira de comunicar-se com outro serviço ou com o
próprio serviço. O comportamento de um Transporte de Serviço é controlado por meio de
parâmetros passados no tempo de execução. Por exemplo, você pode criar um Transporte de
Serviço para comunicar-se com um servidor de email ou com uma biblioteca de conversão de
unidade.

● Descrições de Serviço – Fornecem a interface na parte superior de um Transporte de Serviço.
A interface permite que os Transportes de Serviço sejam genéricos e configurados por meio de
uma Descrição de Serviço. Além de fornecer uma interface para um Transporte de Serviço,
uma Descrição de Serviço fornece uma interface para. A interface apresentada à interface de
mapeamento do Forms Experience Builder e a interface do Transporte de Serviço em muitos
casos são diferentes.

Como a interface apresentada à interface de Mapeamento de Serviço e aquela do Transporte de
Serviço muitas vezes são diferentes, as Descrições de Serviço contêm também um componente de
mapeamento. O componente de mapeamento permite que você mapeie os dados vindos do aplicativo
Forms Experience Builder. O componente de mapeamento permite também mapear valores constantes
configurados diretamente na Descrição de Serviço para o Transporte de Serviço. Os valores vindos do
Transporte de Serviço, bem como valores constantes, podem ser mapeados nos dados retornados ao
aplicativo Forms Experience Builder.

Passos

1. Crie um novo formulário



2. Dê um nome a ele e clique em “Create”

3. Insira um “Single Line Entry”, um “Button” e um “Drop Down” e então salve o formulário



4. Vá em “Settings”, selecione o serviço e clique para adicionar uma configuração a ele

1

2
3

5. Selecione o serviço chamado “Get Countries By Region”



6. Em “Inputs”, selecione o campo “Especifique a região” e “Region” em “Get Countries By Region” e
clique para associar

1

3

2

4



7. Em “Outputs”, selecione “Country Name” e associe com as opções do “DropDown” de nome
“Países”

1

2

3
4; 6 5



8. Edite as propriedades do “Button” para chamar o serviço de “Get Countries By Region” quando
clicado

1

2
3

9. Edite as propriedades do componente “Drop Down” para que seja possível ser carregado pela
chamada do serviço

2

3
1




11. Digite “South America” no campo “Especifique a região”, clique no botão “Atualizar Países” e
clique no componente “Drop Down” para visualizar a lista baseada na região

1
2

3

12. Agora digite “Oceania” e realize o mesmo procedimento anterior, para agora visualizar os países
que fazem parte da região digitada



Lab 3 – Configurando regras em páginas
Resumo

Este exemplo tem por finalidade demonstrar a atuação de regras para exibir/ocultar uma página, de
acordo com um determinado valor estipulado.

As regras no IBM Forms Experience Builder podem ajudar você a administrar um formulário de modo
que grupos diferentes de usuários sejam perguntados por informações diferentes. É possível incluir
diversas condições booleanas, como AND ou OR, para cada regra.

Passos


2. Dê o nome de “Salário”



3. Inclua um componente do tipo “currency” e nomeie para“Salário”

4. Crie uma segunda página

1

2

5. Na página 2 edite as propriedades dela na guia “Regra” para que seja exibida somente quando o
valor do campo salário for maior ou igual à 30000, caso contrário ela deve ser oculta

Nota: Você deve configurar a regra na página à qual a regra se aplica, em vez da página a partir da qual a regra é acionada.

1
2
3

4 5 6



6. Adicione um “Text” e clique para editar suas propriedades

2
1

7. Digite o seguinte texto: “Seu salário é ”

8. Insira agora um item seguido do texto digitado

1

2 3

O texto ficará então da seguinte forma:



9. Volte à primeira página e adicione um “Page Navigation”


11. Digite um valor inferior à 30000

Nota: Perceba que o botão “Next” ficou desativado, ou seja, a segunda página não é exibida em função da regra criada

12. Agora digite um valor superior ou igual à 30000

Nota: Perceba que agora o botão “Next” está ativo



13. Clique em “Next” e veja que o valor do campo salário é exibido em forma de texto



Lab 4 – Configurando regras em componentes de formulários
Resumo

Este exemplo tem por finlidade explorar mais a configuração de regras nos componentes de
formulários.

Com o recurso Regras, é possível criar uma experiência do usuário dinâmica que assegura a captura
de dados exata e o cumprimento das regras de negócios. As regras permitem orientar o usuário pelo
formulário, ocultando questões ou páginas que não são relevantes. As regras também permitem que
você aplique suas regras de validação de negócios dentro do formulário para assegurar que os dados
sejam válidos antes de o formulário ser submetido. As etapas a seguir descrevem como configurar
regras que requerem que os usuários insiram informações adicionais, dependendo de como a primeira
questão é respondida.

Passos


2. Dê um nome a este formulário



3. Adicione um componente “Select One” e configure o título para “Você é um trabalhador em tempo
integral?”

4. Configure as propriedades do componente e adicione as opções “Sim” e “Não”



5. Na guia “Advanced” selecione a opção para ser mostrado na posição horizontal e clique em “OK”
para salvar as configurações e retornar à interface gráfica de edição

1

2

6. Inclua uma “Single Line Entry” no formulário. Altere o título para "Onde seu site de serviço está
localizado?"

7. Inclua uma “Single Line Entry” no formulário. Altere o título para "Qual é seu cargo?"



8. Edite as propriedades do segundo componente ("Onde seu site de serviço está localizado?") e
adicione uma regra para que o componente seja de caráter obrigatório quando o trabalhador não
for de tempo integral

1
2

3

4
5



9. Edite as propriedades do terceiro componente ("Qual é seu cargo?") e adicione uma regra para que
ele seja chamado quando o trabalhador não for de tempo integral E (utilizar a lógica “AND”)
trabalhe em São Paulo

1
2

3; 6

4 5

7 8
9

Nota: Não esquecer de utilizar a lógica “AND” ao adicionar a outra regra

1

2



Nota: Observe que os campos “Onde seu site de serviço está localizado?” e “Qual é seu cargo?” não são de caráter
obrigatórios

11. Agora selecione a opção negativa para o componente “Você é um trabalhador em tempo integral?”

Nota: Observe que o segundo campo tornou-se de caráter obrigatório



12. Digite o site do trabalhado como sendo “São Paulo”

Nota: Observe que o terceiro campo tornou-se de caráter obrigatório

13. De volta à interface gráfica de edição, adicione um componente do tipo “Text”



14. Edite suas propriedades para exibir a informação de que é um trabalhador de tempo parcial, exibir
o local de atuação e o cargo

Nota: Utilizar o recurso “Insert Item” para inserir os parâmetros dos campos dentro do texto

1

2



15. Crie a regra para que o texto seja exibido quando o trabalhador não for de tempo integral

1
2

3 4 5

16. Adicione um texto inicial aos campos 1 e 2

17. Clique novamente em “Preview” para visualizar o formulário



18. Selecione a opção negativa para o componente “Você é um trabalhador em tempo integral?”

19. Digite o site como sendo “Rio de Janeiro” ou qualquer outra região

Nota: Observe que o terceiro campo não tornou-se de caráter obrigatório



20. Digite o cargo como sendo “IT Specialist” ou qualquer outro cargo



Lab 5 – Trabalhando com fórmulas
Resumo

Este exemplo tem por finalidade explorar a capacidade de criar e editar fórmulas para designar valores
a um item no formulário do IBM Forms Experience Builder.

Há dois locais no Forms Experience Builder onde o editor de Fórmula pode ser acessado:

● A guia Fórmula da janela Propriedades.

● O item de menu Fórmula na guia Configurações.

Este exemplo abordará a fórmula através da:

● Janela de Propriedades

▪ Nota: É possível configurar uma fórmula em um item de formulário usando a janela Propriedades. As
instruções a seguir descrevem como abrir o editor de Fórmula e as opções de fórmula disponíveis. Você deve
configurar a fórmula no item de formulário que armazena o resultado. Por exemplo, para incluir dois números
juntos, configure a fórmula no campo em que você deseja mostrar o resultado.

● Guia de Configurações

▪ Nota: A guia Configurações contém uma seção Fórmula na qual é possível visualizar e criar fórmulas. Quando
você seleciona a opção de menu Fórmulas, são mostradas as fórmulas para o formulário. Elas são divididas
em duas categorias: Fórmulas Gerais e Fórmulas de Item. A categoria Fórmulas de Item é uma lista das
fórmulas criadas no formulário usando a janela Propriedades. Fórmulas Gerais são fórmulas complexas
criadas na guia Configurações.

● Execução a partir de um evento

▪ Nota: As fórmulas gerais por padrão são executadas sempre que um item de formulário é alterado pelo
usuário. É possível configurar fórmulas para que sejam executadas no caso de um evento específico. Por
exemplo, se um cliente estiver inserindo informações em um formulário de pedido, será possível configurar
uma fórmula para calcular o imposto sobre vendas e um subtotal quando o usuário clicar em um botão. Para
executar uma fórmula quando um usuário clicar em um botão.



Passos


2. Dê o nome de “Utilizando fórmulas”

3. Insira cinco “Single Line Entry” da forma que fique como a imagem abaixo



4. Altere o nome deles para que fique como a imagem abaixo

5. Edite as propriedades do campo “Email” e crie uma regra para que este componente seja somente
leitura

1

2
3

4 5

6



6. Faça o mesmo procedimento para o campo “Nome Completo”

1

2
3

4 5

6

7. Agora iremos utilizar a fórmula na Janela de Propriedades. Então adicione uma fórmula ao campo
“Email” para concatenar o campo “Usuário” com uma constante com o valor de domínio de e-mail

1

2
3

4 5

6



Nota: Para adicione o campo de “Usuário” ao campo “Input 1” da fórmula, seguir o procedimento demonstrado pela imagem
abaixo

2

1
3

Nota: A constante deve ser adicionada clicando no ícone ao lado do campo de “Input 2”, para este exemplo insira um valor de
domínio de email (ex.: @cocbase.charlotte.ibm.com)

2
3
4

1



8. Agora iremos utilizar a Guia de Configurações para aplicar uma fórmula ao campo “Nome
Completo”. Então vá em “Settings” e adicione uma fórmula

1

2 3

9. O objetivo desta fórmula é concatenar os campos “Nome” e “Sobrenome”, inserindo um espaço
entre eles e ser inserido no campo “Nome Completo”.

Dê o nome de “Formula Nome Completo”, escolha a operação de concatenar e insira no “Input 1” o
campo “Nome”. Para o “Input 2” insira uma constante “espaço” e coloque como resultado o campo
“Nome Completo”. Posteriormente adicione mais uma fórmula.

1

6
2

3 4 5

Nota: Esta fórmula irá concatenar o Nome com um espaço para na próxima fórmula concatenar este valor gerado com o
Sobrenome. Assim ficará o Nome + “Espaço” + Sobrenome.



Nota: Para inserir a constante “Espaço” ao “Input 2”, clique no ícone ao lado deste campo e entre com um valor constante de
espaço (apenas de um espaço no campo “Value”)

1
3 2

10. Após adicionar mais uma fórmula, selecione a operação de concatenar e insira no “Input 1” o
campo “Nome Completo”

1

2 3 4

5




12. Digite um nome de usuário no campo “Usuário”

Nota: Perceba que o campo “Email” foi preenchido com o valor do campo “Usuário”

13. Digite um nome e um sobrenome aos campos “Nome” e “Sobrenome” respectivamente



Nota: Perceba que o campo “Nome Completo” foi preenchido com os valores de nome e sobrenome e possuindo um
espaçamento entre ambos os valores



Lab 6 – Explorando estilos em um formulário
Resumo

Este exemplo tem por finalidade exemplificar a utilização de folhas de estilo em um formulário através
de estilos existentes no sistema e também através da importação um arquivo de folha de estilo em
cascata (.css) de um template existente.

Uma folha de estilo consiste de uma lista de regras. Cada regra ou conjunto de regras consiste de um
ou mais seletores e um bloco de declaração. Um declaração de bloco é composta por uma lista de
declarações entre chaves. Cada declaração em si é uma propriedade, dois pontos (:), um valor, então
um ponto e vírgula (;).

Passos

1. Criar um novo formulário

2. Dê o nome de “Definindo estilo”



3. Insira uma “Section” no topo

4. Insira uma “Image” dentro desta “Section”



5. Agora expanda a seção com a imagem de modo que elas ocupem duas colunas



6. Abaixo da imagem insira mais uma “Section”

7. Insira alguns elementos dentro desta “Section”

8. Edite as propriedades da “Section”, dê um nome e selecione as opções de “Display title bar”, para
que o nome possa ser visível, e “Can Be Collapsed” para que ela possa ser expandida/contraída

1
2

3

4



9. Insira uma “Tabbed Folder” abaixo do componente “Seção”

10. Insira alguns textos para popular as abas



11. Insira uma imagem, com tamanho 250 x 375, ao lado do componente “Seção”



12. Agora expanda a imagem de modo que elas ocupem duas linhas




14. Observe a interface gráfica do formulário

15. Volte à interface gráfica de edição e acesse a guia “Style” e escolha o tema “Dark Blue”

1
2

3




17. Observe agora a interface gráfica do formulário

18. Volte novamente à interface gráfica de edição e ainda na guia “Style” e escolha o tema “Simple”

1

2



21. Retorne à interface gráfica de edição e ainda na guia “Style”, selecione a opção para utilizar seu
próprio estilo personalizado e adicione um arquivo de folha de estilo em cascata (.css)

2
1

22. Procure pelo arquivo “CoffeeFeedback.css” dentro da pasta “TEMPLATES”

1
4
2

3

5



23. Posteriormente clique em “OK” para estilo no formulário




Lab - Forms Experience Builder v8

Mais conteúdo relacionado

Semelhante a Lab - Forms Experience Builder v8

Lab - Forms Experience Builder v8