Mais conteúdo relacionado Semelhante a Lab - Forms Experience Builder v8 (20) Lab - Forms Experience Builder v81. IBM Collaboration Solutions © 2012 IBM Corporation
IBM Forms Experience
Builder v 8.0
Fundamentos
IBM Forms Experience Builder v8.0 Page 1
2. IBM Collaboration Solutions © 2012 IBM Corporation
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
3. IBM Collaboration Solutions © 2012 IBM Corporation
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.
IBM Forms Experience Builder v8.0 Page 3
4. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 4 IBM Forms Experience Builder v8.0
5. IBM Collaboration Solutions © 2012 IBM Corporation
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.
IBM Forms Experience Builder v8.0 Page 5
6. IBM Collaboration Solutions © 2012 IBM Corporation
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”
Page 6 IBM Forms Experience Builder v8.0
7. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 7
8. IBM Collaboration Solutions © 2012 IBM Corporation
7. Clique em “Edit Properties”
8. Procure pela imagem desejada
1
2
4
3
Page 8 IBM Forms Experience Builder v8.0
9. IBM Collaboration Solutions © 2012 IBM Corporation
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”
IBM Forms Experience Builder v8.0 Page 9
10. IBM Collaboration Solutions © 2012 IBM Corporation
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”
Page 10 IBM Forms Experience Builder v8.0
11. IBM Collaboration Solutions © 2012 IBM Corporation
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”
IBM Forms Experience Builder v8.0 Page 11
12. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 12 IBM Forms Experience Builder v8.0
13. IBM Collaboration Solutions © 2012 IBM Corporation
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...”
IBM Forms Experience Builder v8.0 Page 13
14. IBM Collaboration Solutions © 2012 IBM Corporation
20. Escreva alguns códigos HTML
21. Adicione uma pesquisa ao lado de “HTML Fragment”
2
1
3
Page 14 IBM Forms Experience Builder v8.0
15. IBM Collaboration Solutions © 2012 IBM Corporation
22. Dê um nome à pesquisa e edite as opções de seleção
23. Adicione os itens da pesquisa
IBM Forms Experience Builder v8.0 Page 15
16. IBM Collaboration Solutions © 2012 IBM Corporation
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.
Page 16 IBM Forms Experience Builder v8.0
17. IBM Collaboration Solutions © 2012 IBM Corporation
26. Insira um “Page Navigation”
2
1
27. Duplique esta página e a nomeie para “Page 2”
1
2
IBM Forms Experience Builder v8.0 Page 17
18. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 18 IBM Forms Experience Builder v8.0
19. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 19
20. IBM Collaboration Solutions © 2012 IBM Corporation
35. Insira um campo do tipo “Email”
2
1
36. Insira um campo do tipo “Time”
2
1
Page 20 IBM Forms Experience Builder v8.0
21. IBM Collaboration Solutions © 2012 IBM Corporation
37. Dê um nome para os campos adicionados nesta página
IBM Forms Experience Builder v8.0 Page 21
22. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 22 IBM Forms Experience Builder v8.0
23. IBM Collaboration Solutions © 2012 IBM Corporation
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”
IBM Forms Experience Builder v8.0 Page 23
24. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 24 IBM Forms Experience Builder v8.0
25. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 25
26. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 26 IBM Forms Experience Builder v8.0
27. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 27
28. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 28 IBM Forms Experience Builder v8.0
29. IBM Collaboration Solutions © 2012 IBM Corporation
53. Para exportar os dados, basta clicar em
1
2
54. Escolha um dos formatos disponíveis para salvar
55. Clique para “abrir com”
IBM Forms Experience Builder v8.0 Page 29
30. IBM Collaboration Solutions © 2012 IBM Corporation
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”
Page 30 IBM Forms Experience Builder v8.0
31. IBM Collaboration Solutions © 2012 IBM Corporation
59. Assim como é possível exportar os dados coletados, também é possível de importá-los
IBM Forms Experience Builder v8.0 Page 31
32. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 32 IBM Forms Experience Builder v8.0
33. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 33
34. IBM Collaboration Solutions © 2012 IBM Corporation
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”
Page 34 IBM Forms Experience Builder v8.0
35. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 35
36. IBM Collaboration Solutions © 2012 IBM Corporation
7. Em “Outputs”, selecione “Country Name” e associe com as opções do “DropDown” de nome
“Países”
1
2
3
4; 6 5
Page 36 IBM Forms Experience Builder v8.0
37. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 37
38. IBM Collaboration Solutions © 2012 IBM Corporation
10. Clique em “Preview” para visualizar o formulário
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
Page 38 IBM Forms Experience Builder v8.0
39. IBM Collaboration Solutions © 2012 IBM Corporation
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
1. Crie um novo formulário
2. Dê o nome de “Salário”
IBM Forms Experience Builder v8.0 Page 39
40. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 40 IBM Forms Experience Builder v8.0
41. IBM Collaboration Solutions © 2012 IBM Corporation
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:
IBM Forms Experience Builder v8.0 Page 41
42. IBM Collaboration Solutions © 2012 IBM Corporation
9. Volte à primeira página e adicione um “Page Navigation”
10. Clique em “Preview” para visualizar o formulário
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
Page 42 IBM Forms Experience Builder v8.0
43. IBM Collaboration Solutions © 2012 IBM Corporation
13. Clique em “Next” e veja que o valor do campo salário é exibido em forma de texto
IBM Forms Experience Builder v8.0 Page 43
44. IBM Collaboration Solutions © 2012 IBM Corporation
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
1. Crie um novo formulário
2. Dê um nome a este formulário
Page 44 IBM Forms Experience Builder v8.0
45. IBM Collaboration Solutions © 2012 IBM Corporation
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”
IBM Forms Experience Builder v8.0 Page 45
46. IBM Collaboration Solutions © 2012 IBM Corporation
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?"
Page 46 IBM Forms Experience Builder v8.0
47. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 47
48. IBM Collaboration Solutions © 2012 IBM Corporation
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
10. Clique em “Preview” para visualizar o formulário
Page 48 IBM Forms Experience Builder v8.0
49. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 49
50. IBM Collaboration Solutions © 2012 IBM Corporation
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”
Page 50 IBM Forms Experience Builder v8.0
51. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 51
52. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 52 IBM Forms Experience Builder v8.0
53. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 53
54. IBM Collaboration Solutions © 2012 IBM Corporation
20. Digite o cargo como sendo “IT Specialist” ou qualquer outro cargo
Page 54 IBM Forms Experience Builder v8.0
55. IBM Collaboration Solutions © 2012 IBM Corporation
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.
IBM Forms Experience Builder v8.0 Page 55
56. IBM Collaboration Solutions © 2012 IBM Corporation
Passos
1. Crie um novo formulário
2. Dê o nome de “Utilizando fórmulas”
3. Insira cinco “Single Line Entry” da forma que fique como a imagem abaixo
Page 56 IBM Forms Experience Builder v8.0
57. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 57
58. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 58 IBM Forms Experience Builder v8.0
59. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 59
60. IBM Collaboration Solutions © 2012 IBM Corporation
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.
Page 60 IBM Forms Experience Builder v8.0
61. IBM Collaboration Solutions © 2012 IBM Corporation
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
11. Clique em “Preview” para visualizar o formulário
IBM Forms Experience Builder v8.0 Page 61
62. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 62 IBM Forms Experience Builder v8.0
63. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 63
64. IBM Collaboration Solutions © 2012 IBM Corporation
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”
Page 64 IBM Forms Experience Builder v8.0
65. IBM Collaboration Solutions © 2012 IBM Corporation
3. Insira uma “Section” no topo
4. Insira uma “Image” dentro desta “Section”
IBM Forms Experience Builder v8.0 Page 65
66. IBM Collaboration Solutions © 2012 IBM Corporation
5. Agora expanda a seção com a imagem de modo que elas ocupem duas colunas
Page 66 IBM Forms Experience Builder v8.0
67. IBM Collaboration Solutions © 2012 IBM Corporation
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
IBM Forms Experience Builder v8.0 Page 67
68. IBM Collaboration Solutions © 2012 IBM Corporation
9. Insira uma “Tabbed Folder” abaixo do componente “Seção”
10. Insira alguns textos para popular as abas
Page 68 IBM Forms Experience Builder v8.0
69. IBM Collaboration Solutions © 2012 IBM Corporation
11. Insira uma imagem, com tamanho 250 x 375, ao lado do componente “Seção”
IBM Forms Experience Builder v8.0 Page 69
70. IBM Collaboration Solutions © 2012 IBM Corporation
12. Agora expanda a imagem de modo que elas ocupem duas linhas
Page 70 IBM Forms Experience Builder v8.0
71. IBM Collaboration Solutions © 2012 IBM Corporation
13. Clique em “Preview” para visualizar o formulário
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
IBM Forms Experience Builder v8.0 Page 71
72. IBM Collaboration Solutions © 2012 IBM Corporation
16. Clique novamente em “Preview” para visualizar o formulário
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
Page 72 IBM Forms Experience Builder v8.0
73. IBM Collaboration Solutions © 2012 IBM Corporation
19. Clique novamente em “Preview” para visualizar o formulário
20. Observe agora a interface gráfica do formulário
IBM Forms Experience Builder v8.0 Page 73
74. IBM Collaboration Solutions © 2012 IBM Corporation
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
Page 74 IBM Forms Experience Builder v8.0
75. IBM Collaboration Solutions © 2012 IBM Corporation
23. Posteriormente clique em “OK” para estilo no formulário
24. Clique novamente em “Preview” para visualizar o formulário
25. Observe agora a interface gráfica do formulário
IBM Forms Experience Builder v8.0 Page 75