• Save
Lab - Forms Experience Builder v8
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Lab - Forms Experience Builder v8

on

  • 560 views

Laboratórios referentes ao Bootcamp em português sobre Forms Experience Builder v8.0, provido pela IBM Collaboration Solutions.

Laboratórios referentes ao Bootcamp em português sobre Forms Experience Builder v8.0, provido pela IBM Collaboration Solutions.
Data do Bootcamp: 12.06.2012

Statistics

Views

Total Views
560
Views on SlideShare
560
Embed Views
0

Actions

Likes
1
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Lab - Forms Experience Builder v8 Document Transcript

  • 1. IBM Collaboration Solutions © 2012 IBM Corporation IBM Forms Experience Builder v 8.0 FundamentosIBM Forms Experience Builder v8.0 Page 1
  • 2. IBM Collaboration Solutions © 2012 IBM CorporationLegal DisclaimerEnquanto 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 emplanos 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. Nadacontido nesta publicação visa, nem terá o efeito de, criar quaisquer garantias ou representações da IBM ou de seus fornecedoresou 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ísesnos quais a IBM opera. Datas de lançamento de produtos e/ou capacidade referenciados nesta apresentação podem mudar aqualquer momento a critério exclusivo da IBM, baseada em oportunidades de mercado ou outros fatores, e não pretende ser umcompromisso 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 emtodas 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. Orendimento real ou o desempenho que qualquer usuário irá experimentar irá variar dependendo de muitos fatores, incluindoconsiderações, tais como a quantidade de multiprogramação no fluxo de trabalho do usuário, a configuração I/O, a configuraçãode armazenamento, e a carga de trabalho processado. Portanto, nenhuma garantia pode ser dada de que um usuário individualvai 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 daIBM 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 marcasregistradas 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 parafins ilustrativos.© IBM Corporation 2012. Todos os direitos reservados.Page 2 IBM Forms Experience Builder v8.0
  • 3. IBM Collaboration Solutions © 2012 IBM CorporationIBM Forms Experience Builder v8.0 – FundamentosAs informações contidas neste material é de caráter introdutório e fornecida apenas para finsinformativos e demonstrativos da ferramenta IBM Forms Experience Builder v8.0. Tendo por finalidade ademonstração das funcionalidades e características fundamentais da ferramenta através de exemplospráticos.O conteúdo deste material foi desenvolvido com base em uma máquina virtual possuindo o sistemaoperacional baseado em Linux e com os seguintes programas instalados: IBM Installation ManagerV1.4.3, IBM Forms Experience Builder v8.0; IBM Websphere Application Server v8.0; IBM DB2Enterprise Server Edition v9.7.Informações como usuário e senha, url, entre outros, são fornecidos com base no ambiente configuradopara o treinamento de Forms Experience Builder. Caso haja interesse de configurar um ambiente similara este utilizado no treinamento, verifique a apresentação denominada “Bootcamp - Forms ExperienceBuilder v8.0”, que possui informações e passos de configuração deste ambiente.SumárioRequisitos básicos …............................................................................................................................ 04Lab 1 – Familiarizando com o IBM Forms Experience Builder v8.0 …................................................... 06Lab 2 – Configurando um serviço …...................................................................................................... 32Lab 3 – Configurando regras em páginas …......................................................................................... 39Lab 4 – Configurando regras em componentes de formulários …......................................................... 44Lab 5 – Trabalhando com fórmulas …................................................................................................... 56Lab 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 CorporationRequisitos básicosResumoEsta etapa tem por finalidade prover informações para iniciar os serviços necessários para ofuncionamento do ambiente de IBM Forms Experience Builder.Passos1. Inicie a máquina virtual2. 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 DB25. Inicie o Websphere Application ServerPage 4 IBM Forms Experience Builder v8.0
  • 5. IBM Collaboration Solutions © 2012 IBM Corporation6. 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 CorporationLab 1 – Familiarizando com o IBM Forms Experience Builder v8.0ResumoEste exemplo tem por finalidade testar uma parte das funcionalidades do IBM Forms Experience Builderatravés de um simples exemplo prático, para familiarizar-se com a ferramenta e seus recursos com umavisão geral.Todas as características podem ser personalisadas da forma que o usuário preferir, inserindo ouretirando os conteúdos e componentes abordados neste laboratório.Passos1. Realizar o log in com o usuário “user1” e senha “password2. 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 Corporation4. Delete duas colunas da seção do topo 1 25. E delete também uma linha 1 26. Insira uma imagem na seção topo 1 2IBM Forms Experience Builder v8.0 Page 7
  • 8. IBM Collaboration Solutions © 2012 IBM Corporation7. Clique em “Edit Properties”8. Procure pela imagem desejada 1 2 4 3Page 8 IBM Forms Experience Builder v8.0
  • 9. IBM Collaboration Solutions © 2012 IBM Corporation9. Insira um “Tabbed Folder” 2 3 110. 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 Corporation11. Apague uma linha e uma coluna da aba de Informativo e adicione um texto 2 3 112. 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 Corporation13. Na aba de Arquivo, apague uma coluna e uma linha e adicione um item do tipo “Attachment” 3 4 1 214. 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 Corporation15. 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 616. Dê um nome a estes dois itens inseridos e adicione as opçõesPage 12 IBM Forms Experience Builder v8.0
  • 13. IBM Collaboration Solutions © 2012 IBM Corporation17. Adicione uma imagem na coluna ao lado da “Tabbed Folder” de tamanho 250 x 15018. Adicionar um “HTML Fragment” logo abaixo da “Tabbed Folder” 2 3 119. 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 Corporation20. Escreva alguns códigos HTML21. Adicione uma pesquisa ao lado de “HTML Fragment” 2 1 3Page 14 IBM Forms Experience Builder v8.0
  • 15. IBM Collaboration Solutions © 2012 IBM Corporation22. Dê um nome à pesquisa e edite as opções de seleção23. Adicione os itens da pesquisaIBM Forms Experience Builder v8.0 Page 15
  • 16. IBM Collaboration Solutions © 2012 IBM Corporation24. Adicione um “Single Line Entry 2 125. 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 Corporation26. Insira um “Page Navigation” 2 127. Duplique esta página e a nomeie para “Page 2” 1 2IBM Forms Experience Builder v8.0 Page 17
  • 18. IBM Collaboration Solutions © 2012 IBM Corporation28. Na “Page 2”, apague os componentes deixando somente os do topo e do rodapé29. Insira um “Single Line Entry” 2 130. Insira um campo do tipo “Number” 2 1Page 18 IBM Forms Experience Builder v8.0
  • 19. IBM Collaboration Solutions © 2012 IBM Corporation31. Insira um campo do tipo “Currency” 2 132. Insira um “checkbox” 1 233. Insira um campo do tipo “DropDown” 1 234. Insira um campo do tipo “Date” 2 1IBM Forms Experience Builder v8.0 Page 19
  • 20. IBM Collaboration Solutions © 2012 IBM Corporation35. Insira um campo do tipo “Email” 2 136. Insira um campo do tipo “Time” 2 1Page 20 IBM Forms Experience Builder v8.0
  • 21. IBM Collaboration Solutions © 2012 IBM Corporation37. Dê um nome para os campos adicionados nesta páginaIBM Forms Experience Builder v8.0 Page 21
  • 22. IBM Collaboration Solutions © 2012 IBM Corporation38. Edite as propriedades dos componentes de Data e Hora para que fiquem ocultos quando a opção de “Deseja agendar?” não estiver ativa39. Clique em “Preview” para visualizar o formulárioPage 22 IBM Forms Experience Builder v8.0
  • 23. IBM Collaboration Solutions © 2012 IBM Corporation40. O formulário ficará da seguinte forma: Página 2 Página 141. Clique em “Save” e em seguida em “Cancel” para fechar a interface gráfica de edição 2 142. Agora com o formulário criado, clique em “Deploy”IBM Forms Experience Builder v8.0 Page 23
  • 24. IBM Collaboration Solutions © 2012 IBM Corporation43. Clique em “Start” para iniciar a circulação do formulárioNota: É possível programar o período de circulação do formulário, com data para início e término. Ainda é possível determinaro 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 mesmoPage 24 IBM Forms Experience Builder v8.0
  • 25. IBM Collaboration Solutions © 2012 IBM Corporation45. É 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 mesmoNota: Para adicionar diversas marcações em uma única vez, basta separar os valores por vírgula ou espaço 1 2 346. É possível também encontrar link preenchimento do formulário e também para visualização do mesmoIBM Forms Experience Builder v8.0 Page 25
  • 26. IBM Collaboration Solutions © 2012 IBM CorporationOu 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árioPage 26 IBM Forms Experience Builder v8.0
  • 27. IBM Collaboration Solutions © 2012 IBM Corporation49. 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áficaIBM Forms Experience Builder v8.0 Page 27
  • 28. IBM Collaboration Solutions © 2012 IBM Corporation52. Clique em “Print” para visualizar o formato de impressão do formulárioNota: O formato de impressão do formulário traz as informações em formato de relatórioPage 28 IBM Forms Experience Builder v8.0
  • 29. IBM Collaboration Solutions © 2012 IBM Corporation53. Para exportar os dados, basta clicar em 1 254. Escolha um dos formatos disponíveis para salvar55. Clique para “abrir com”IBM Forms Experience Builder v8.0 Page 29
  • 30. IBM Collaboration Solutions © 2012 IBM CorporationNota: Os dados serão visualizados em formato de tabela56. Para exportar este formulário, clique em “Export”57. E clique em “OK”Nota: É possível exportar também as informações coletadas58. 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 Corporation59. Assim como é possível exportar os dados coletados, também é possível de importá-losIBM Forms Experience Builder v8.0 Page 31
  • 32. IBM Collaboration Solutions © 2012 IBM CorporationLab 2 – Configurando um serviçoResumoEste exemplo tem por finalidade demonstrar a integração de um serviço existente com os componentesde 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 deServiço muitas vezes são diferentes, as Descrições de Serviço contêm também um componente demapeamento. O componente de mapeamento permite que você mapeie os dados vindos do aplicativoForms Experience Builder. O componente de mapeamento permite também mapear valores constantesconfigurados diretamente na Descrição de Serviço para o Transporte de Serviço. Os valores vindos doTransporte de Serviço, bem como valores constantes, podem ser mapeados nos dados retornados aoaplicativo Forms Experience Builder.Passos1. Crie um novo formulárioPage 32 IBM Forms Experience Builder v8.0
  • 33. IBM Collaboration Solutions © 2012 IBM Corporation2. 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árioIBM Forms Experience Builder v8.0 Page 33
  • 34. IBM Collaboration Solutions © 2012 IBM Corporation4. Vá em “Settings”, selecione o serviço e clique para adicionar uma configuração a ele 1 2 35. Selecione o serviço chamado “Get Countries By Region”Page 34 IBM Forms Experience Builder v8.0
  • 35. IBM Collaboration Solutions © 2012 IBM Corporation6. Em “Inputs”, selecione o campo “Especifique a região” e “Region” em “Get Countries By Region” e clique para associar 1 3 2 4IBM Forms Experience Builder v8.0 Page 35
  • 36. IBM Collaboration Solutions © 2012 IBM Corporation7. Em “Outputs”, selecione “Country Name” e associe com as opções do “DropDown” de nome “Países” 1 2 3 4; 6 5Page 36 IBM Forms Experience Builder v8.0
  • 37. IBM Collaboration Solutions © 2012 IBM Corporation8. Edite as propriedades do “Button” para chamar o serviço de “Get Countries By Region” quando clicado 1 2 39. Edite as propriedades do componente “Drop Down” para que seja possível ser carregado pela chamada do serviço 2 3 1IBM Forms Experience Builder v8.0 Page 37
  • 38. IBM Collaboration Solutions © 2012 IBM Corporation10. Clique em “Preview” para visualizar o formulário11. 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 312. Agora digite “Oceania” e realize o mesmo procedimento anterior, para agora visualizar os países que fazem parte da região digitadaPage 38 IBM Forms Experience Builder v8.0
  • 39. IBM Collaboration Solutions © 2012 IBM CorporationLab 3 – Configurando regras em páginasResumoEste exemplo tem por finalidade demonstrar a atuação de regras para exibir/ocultar uma página, deacordo com um determinado valor estipulado.As regras no IBM Forms Experience Builder podem ajudar você a administrar um formulário de modoque grupos diferentes de usuários sejam perguntados por informações diferentes. É possível incluirdiversas condições booleanas, como AND ou OR, para cada regra.Passos1. Crie um novo formulário2. Dê o nome de “Salário”IBM Forms Experience Builder v8.0 Page 39
  • 40. IBM Collaboration Solutions © 2012 IBM Corporation3. Inclua um componente do tipo “currency” e nomeie para“Salário”4. Crie uma segunda página 1 25. 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 ocultaNota: 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 6Page 40 IBM Forms Experience Builder v8.0
  • 41. IBM Collaboration Solutions © 2012 IBM Corporation6. Adicione um “Text” e clique para editar suas propriedades 2 17. Digite o seguinte texto: “Seu salário é ”8. Insira agora um item seguido do texto digitado 1 2 3O texto ficará então da seguinte forma:IBM Forms Experience Builder v8.0 Page 41
  • 42. IBM Collaboration Solutions © 2012 IBM Corporation9. Volte à primeira página e adicione um “Page Navigation”10. Clique em “Preview” para visualizar o formulário11. Digite um valor inferior à 30000Nota: Perceba que o botão “Next” ficou desativado, ou seja, a segunda página não é exibida em função da regra criada12. Agora digite um valor superior ou igual à 30000Nota: Perceba que agora o botão “Next” está ativoPage 42 IBM Forms Experience Builder v8.0
  • 43. IBM Collaboration Solutions © 2012 IBM Corporation13. Clique em “Next” e veja que o valor do campo salário é exibido em forma de textoIBM Forms Experience Builder v8.0 Page 43
  • 44. IBM Collaboration Solutions © 2012 IBM CorporationLab 4 – Configurando regras em componentes de formuláriosResumoEste exemplo tem por finlidade explorar mais a configuração de regras nos componentes deformulários.Com o recurso Regras, é possível criar uma experiência do usuário dinâmica que assegura a capturade dados exata e o cumprimento das regras de negócios. As regras permitem orientar o usuário peloformulário, ocultando questões ou páginas que não são relevantes. As regras também permitem quevocê aplique suas regras de validação de negócios dentro do formulário para assegurar que os dadossejam válidos antes de o formulário ser submetido. As etapas a seguir descrevem como configurarregras que requerem que os usuários insiram informações adicionais, dependendo de como a primeiraquestão é respondida.Passos1. Crie um novo formulário2. Dê um nome a este formulárioPage 44 IBM Forms Experience Builder v8.0
  • 45. IBM Collaboration Solutions © 2012 IBM Corporation3. 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 Corporation5. 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 26. 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 Corporation8. 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 5IBM Forms Experience Builder v8.0 Page 47
  • 48. IBM Collaboration Solutions © 2012 IBM Corporation9. 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 9Nota: Não esquecer de utilizar a lógica “AND” ao adicionar a outra regra 1 210. Clique em “Preview” para visualizar o formulárioPage 48 IBM Forms Experience Builder v8.0
  • 49. IBM Collaboration Solutions © 2012 IBM CorporationNota: Observe que os campos “Onde seu site de serviço está localizado?” e “Qual é seu cargo?” não são de caráterobrigatórios11. 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órioIBM Forms Experience Builder v8.0 Page 49
  • 50. IBM Collaboration Solutions © 2012 IBM Corporation12. Digite o site do trabalhado como sendo “São Paulo”Nota: Observe que o terceiro campo tornou-se de caráter obrigatório13. 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 Corporation14. Edite suas propriedades para exibir a informação de que é um trabalhador de tempo parcial, exibir o local de atuação e o cargoNota: Utilizar o recurso “Insert Item” para inserir os parâmetros dos campos dentro do texto 1 2IBM Forms Experience Builder v8.0 Page 51
  • 52. IBM Collaboration Solutions © 2012 IBM Corporation15. Crie a regra para que o texto seja exibido quando o trabalhador não for de tempo integral 1 2 3 4 516. Adicione um texto inicial aos campos 1 e 217. Clique novamente em “Preview” para visualizar o formulárioPage 52 IBM Forms Experience Builder v8.0
  • 53. IBM Collaboration Solutions © 2012 IBM Corporation18. 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ãoNota: Observe que o terceiro campo não tornou-se de caráter obrigatórioIBM Forms Experience Builder v8.0 Page 53
  • 54. IBM Collaboration Solutions © 2012 IBM Corporation20. Digite o cargo como sendo “IT Specialist” ou qualquer outro cargoPage 54 IBM Forms Experience Builder v8.0
  • 55. IBM Collaboration Solutions © 2012 IBM CorporationLab 5 – Trabalhando com fórmulasResumoEste exemplo tem por finalidade explorar a capacidade de criar e editar fórmulas para designar valoresa 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 CorporationPassos1. Crie um novo formulário2. Dê o nome de “Utilizando fórmulas”3. Insira cinco “Single Line Entry” da forma que fique como a imagem abaixoPage 56 IBM Forms Experience Builder v8.0
  • 57. IBM Collaboration Solutions © 2012 IBM Corporation4. Altere o nome deles para que fique como a imagem abaixo5. Edite as propriedades do campo “Email” e crie uma regra para que este componente seja somente leitura 1 2 3 4 5 6IBM Forms Experience Builder v8.0 Page 57
  • 58. IBM Collaboration Solutions © 2012 IBM Corporation6. Faça o mesmo procedimento para o campo “Nome Completo” 1 2 3 4 5 67. 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 6Page 58 IBM Forms Experience Builder v8.0
  • 59. IBM Collaboration Solutions © 2012 IBM CorporationNota: Para adicione o campo de “Usuário” ao campo “Input 1” da fórmula, seguir o procedimento demonstrado pela imagemabaixo 2 1 3Nota: A constante deve ser adicionada clicando no ícone ao lado do campo de “Input 2”, para este exemplo insira um valor dedomínio de email (ex.: @cocbase.charlotte.ibm.com) 2 3 4 1IBM Forms Experience Builder v8.0 Page 59
  • 60. IBM Collaboration Solutions © 2012 IBM Corporation8. 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 39. 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 5Nota: Esta fórmula irá concatenar o Nome com um espaço para na próxima fórmula concatenar este valor gerado com oSobrenome. Assim ficará o Nome + “Espaço” + Sobrenome.Page 60 IBM Forms Experience Builder v8.0
  • 61. IBM Collaboration Solutions © 2012 IBM CorporationNota: Para inserir a constante “Espaço” ao “Input 2”, clique no ícone ao lado deste campo e entre com um valor constante deespaço (apenas de um espaço no campo “Value”) 1 3 210. 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 511. Clique em “Preview” para visualizar o formulárioIBM Forms Experience Builder v8.0 Page 61
  • 62. IBM Collaboration Solutions © 2012 IBM Corporation12. 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” respectivamentePage 62 IBM Forms Experience Builder v8.0
  • 63. IBM Collaboration Solutions © 2012 IBM CorporationNota: Perceba que o campo “Nome Completo” foi preenchido com os valores de nome e sobrenome e possuindo umespaçamento entre ambos os valoresIBM Forms Experience Builder v8.0 Page 63
  • 64. IBM Collaboration Solutions © 2012 IBM CorporationLab 6 – Explorando estilos em um formulárioResumoEste exemplo tem por finalidade exemplificar a utilização de folhas de estilo em um formulário atravésde estilos existentes no sistema e também através da importação um arquivo de folha de estilo emcascata (.css) de um template existente.Uma folha de estilo consiste de uma lista de regras. Cada regra ou conjunto de regras consiste de umou mais seletores e um bloco de declaração. Um declaração de bloco é composta por uma lista dedeclarações entre chaves. Cada declaração em si é uma propriedade, dois pontos (:), um valor, entãoum ponto e vírgula (;).Passos1. Criar um novo formulário2. Dê o nome de “Definindo estilo”Page 64 IBM Forms Experience Builder v8.0
  • 65. IBM Collaboration Solutions © 2012 IBM Corporation3. Insira uma “Section” no topo4. Insira uma “Image” dentro desta “Section”IBM Forms Experience Builder v8.0 Page 65
  • 66. IBM Collaboration Solutions © 2012 IBM Corporation5. Agora expanda a seção com a imagem de modo que elas ocupem duas colunasPage 66 IBM Forms Experience Builder v8.0
  • 67. IBM Collaboration Solutions © 2012 IBM Corporation6. 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 4IBM Forms Experience Builder v8.0 Page 67
  • 68. IBM Collaboration Solutions © 2012 IBM Corporation9. Insira uma “Tabbed Folder” abaixo do componente “Seção”10. Insira alguns textos para popular as abasPage 68 IBM Forms Experience Builder v8.0
  • 69. IBM Collaboration Solutions © 2012 IBM Corporation11. 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 Corporation12. Agora expanda a imagem de modo que elas ocupem duas linhasPage 70 IBM Forms Experience Builder v8.0
  • 71. IBM Collaboration Solutions © 2012 IBM Corporation13. Clique em “Preview” para visualizar o formulário14. Observe a interface gráfica do formulário15. Volte à interface gráfica de edição e acesse a guia “Style” e escolha o tema “Dark Blue” 1 2 3IBM Forms Experience Builder v8.0 Page 71
  • 72. IBM Collaboration Solutions © 2012 IBM Corporation16. Clique novamente em “Preview” para visualizar o formulário17. Observe agora a interface gráfica do formulário18. Volte novamente à interface gráfica de edição e ainda na guia “Style” e escolha o tema “Simple” 1 2Page 72 IBM Forms Experience Builder v8.0
  • 73. IBM Collaboration Solutions © 2012 IBM Corporation19. Clique novamente em “Preview” para visualizar o formulário20. Observe agora a interface gráfica do formulárioIBM Forms Experience Builder v8.0 Page 73
  • 74. IBM Collaboration Solutions © 2012 IBM Corporation21. 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 122. Procure pelo arquivo “CoffeeFeedback.css” dentro da pasta “TEMPLATES” 1 4 2 3 5Page 74 IBM Forms Experience Builder v8.0
  • 75. IBM Collaboration Solutions © 2012 IBM Corporation23. Posteriormente clique em “OK” para estilo no formulário24. Clique novamente em “Preview” para visualizar o formulário25. Observe agora a interface gráfica do formulárioIBM Forms Experience Builder v8.0 Page 75