Nota do editor: Conhece bem este tópico? Deseja compartilhar a sua experiência? Participe agora do programa wiki do software IBM Lotus.
| Wiki do WebSphere Portlet Factory |
|---|
Este artigo aborda um conjunto de construtores personalizados desenvolvidos para WebSphere Portlet Factory que estendem a funcionalidade base do construtor Radio Button Group fornecido no WebSphere Portlet Factory. O construtor de grupo de botões de opções, que está pronto para uso sem modificação, permite que cada botão de opções seja associado a um rótulo e a um valor. Esse construtor base permite que o layout do grupo seja horizontal ou vertical. Entretanto, o construtor não permite entrada de dados mais complexos nos grupos de botões de opções, como exibir uma caixa de entrada de texto para um determinado botão de opções no grupo ou uma lista suspensa para um botão de opções específico no grupo.
As extensões do construtor, Radio Button Group Grid, Text Input Plus e Select Plus, oferecem o recurso de renderização dos grupos de botões de opções em um formato de grade e permitem que qualquer membro de um grupo de botões de opções seja associado a uma caixa de texto ou a uma lista suspensa. Para grupos maiores, talvez seja preferível exibir os botões de opções em um layout de grade.
Os construtores personalizados e um modelo de amostra que mostra o uso dos construtores personalizados estão disponíveis para download com este artigo. Este artigo considera que você tem experiência prática com o WebSphere Portlet Factory Designer e que se sente confortável ao criar modelos e usar construtores. No momento da redação deste artigo, a versão mais atual do WebSphere Portlet Factory Designer é a 6.1.2. Os construtores atuais e o modelo de amostra que acompanha este artigo são executados no WebSphere Portlet Factory 6.0 e mais recentes.
Visão geral do modelo de amostra
O modelo de amostra contém oito grupos de botões de opções. Esses exemplos são mencionados nas seções posteriores do artigo. Os oito exemplos são exibidos em uma página, com um único botão de enviar abaixo. No envio, os valores selecionados são salvos, e o texto é escrito na parte inferior da página para verificar a seleção. Os exemplos são independentes um do outro. Cada exemplo é adicionado à pagina com uma única tag de span, com referência ao nome de grupo de botões de opções, por exemplo, <span name=”rbg1”></span>. Os grupos de botões de opções de exemplo recebem o nome de rbg1, rbg2, rbgg3 etc. até rbgg8.
Os primeiros dois exemplos, mostrados na figura 1, são grupos de botões de opções criados com o construtor de grupo de botões de opções. Neste artigo, os elementos que chamamos de "prontos para uso" são aqueles incluídos no produto e podem ser usados imediatamente, sem modificação.
Figura 1. rbg1 e rbg2
Os dois últimos exemplos, mostrados na figura 2, apresentam o recurso de grade do construtor Grid do grupo de botões de opções. O exemplo 3 usa agrupamento vertical, e o exemplo 4, agrupamento horizontal. O construtor da grade do grupo de botões de opções e seus recursos serão discutidos mais adiante neste artigo.
Figura 2. rbgg3 e rbgg4
Os exemplos 5 a 8, mostrados na figura 3, apresentam grupos de botões de opções com construtores plus e/ou select plus de entrada de texto incorporados. Esses construtores serão abordados mais adiante neste artigo.
Figura 3. rbgg5, rbgg6, rbgg7, rbgg8
JavaScript™ está incorporado aos exemplos 5, 6 e 7 com o uso do construtor HTML Event Action. O JavaScript é usado para alterar automaticamente a seleção do botão de opções quando ocorre uma alteração em uma lista suspensa ou quando se enfoca uma entrada de texto. O construtor HTML é usado nos mesmos exemplos para modificar levemente o alinhamento das entradas de texto e dos campos de seleção.
Uma parte do esboço do modelo é mostrada na figura 4. Os componentes de cada exemplo são agrupados. Veja o retângulo arredondado esboçado que destaca os componentes do exemplo um, rbg1. Os construtores dos exemplos 2 a 8 seguem o mesmo agrupamento.
Figura 4. Amostra de esboço de modelo
Grupos de botões de opções prontos para uso
Os grupos de botões de opções criados com o construtor de grupo de botões de opções são compostos por conjuntos de botões de opções vinculados a rótulos. Os grupos podem ser renderizados em uma coluna (verticalmente) ou em uma linha (horizontalmente). Exemplos de grupos de botões de opções criados com o construtor de grupo de botões de opções incluso no WebSphere Portlet Factory são apresentados nas figuras 5 e 6.
Figura 5. Grupo de botões de opções rbg1 renderizado verticalmente
Figura 6. Grupo de botões de opções rbg2 renderizado verticalmente
Figura 7 mostra o Radio Button Group pronto para uso disponível no WebSphere Portlet Factory. Além de selecionar a página, a tag e a origem dos dados do grupo de botões de opções, os usuários também especificam a orientação horizontal ou vertical.
Figura 7. Construtor do grupo de botões de opções
As entradas do construtor para rbg1 são mostradas na figura 8. Especifique o seguinte:
- No campo Page , selecione Main .
- No campo Tag, selecione rgb1.
- No campo Lookup Table Used , selecione None .
- No campo Radio Group Data , digite A,B,C,D,E.
- No campo Selected Value , selecione ${Variables/group1SelectedVar}.
- No campo Orientation , selecione Vertical.
Clique em OK.
Figura 8. Entradas do construtor rbg1
As entradas do construtor para o grupo de botões de opções rbg2 são mostradas na figura 9. Especifique o seguinte:
- No campo Page , selecione Main .
- No campo Tag, selecione rgb2.
- No campo Lookup Table Used , selecione None .
- No campo Radio Group Data , digite 1, 2, 3, 4.
- No campo Selected Value , selecione ${Variables/group2SelectedVar}.
- No campo Orientation , selecione Horizontal.
Clique em OK.
Figura 9. Entradas do construtor rbg2
As extensões personalizadas do construtor do grupo de botões de opções oferecem a seguinte funcionalidade:
- A capacidade de renderizar o grupo de botões de opções em um formato de grade, horizontal e verticalmente, com renderização em uma das duas formas a seguir:
- Renderize os botões horizontalmente e agrupe em um índice especificado e crie o layout de outra linha de botões
- Renderize os botões verticalmente e agrupe em um índice especificado e crie o layout de outra coluna de botões
- A capacidade de associar qualquer membro de um grupo de botões de opções a uma caixa de texto ou lista suspensa. O botão de opção pode fornecer um rótulo opcionalmente. O grupo de botões de opções pode ser criado com o construtor pronto para uso ou com o construtor estendido; para isso, especifique o layout da grade.
Figuras 10 e 11 são exemplos de grupos de botões de opções com a funcionalidade estendida de renderização de grade. Os exemplos podem ser encontrados no modelo de amostra. Os construtores têm o nome de rbgg3 e rbgg4.
Figura 10. Grupo de botões de opções rbgg3 renderizado como uma grade, layout vertical, agrupamento em um índice de 3
Figura 11. Grupo de botões de opções rbgg4 renderizado como uma grade, layout horizontal, agrupamento em um índice de 5
Figuras 12, 13, 14 e 15 são exemplos de entrada de texto e componentes suspensos usados em conjunto com grupos de botões de opções. Observe como os grupos de botões de opções podem conter uma mistura de rótulos, entradas de texto e componentes suspensos.
Figura 12. Grupo de botões de opções rbgg5 renderizado verticalmente, com as primeiras três opções associadas a rótulos e componentes suspensos
Figura 13. Grupo de botões de opções rbgg6 com orientação vertical, além de uma entrada de texto associada a cada botão de opções
Figura 14. Grupo de botões de opções rbgg7 com orientação vertical, uma entrada de texto associada ao primeiro botão de opções e uma lista suspensa associada ao segundo botão de opção
Figura 15. Grupo de botões de opções rbgg8, layout vertical, agrupamento em um índice de 5, segundo botão de opções associado a uma entrada de texto e oito botões de opções associados a uma lista suspensa
As extensões descritas anteriormente são implementadas por três construtores personalizados:
- construtor da grade de grupo de botões de opções
- construtor plus de entrada de texto
- construtor select plus
Construtor de grade de grupo de botões de opções
Esse novo construtor estende a funcionalidade do construtor de grupo de botões de opções no WebSphere Portlet Factory, com o recurso adicional de permitir que os usuários escolham a renderização do grupo em uma grade. Na figura 16, a opção de criação de grade, mostrada em um retângulo, é uma extensão do construtor Radio Button Group base.
Figura 16. Entradas do construtor de grade do grupo de botões de opções sem grade
Para renderizar o grupo em uma grade, selecione a caixa próxima à opção Create Grid . Quando esta caixa está selecionada, outro campo de entrada se torna visível, permitindo que os usuários especifiquem os botões de opções a serem renderizados antes de a coluna ou a linha ser agrupada para o seguinte. O campo de entrada # Options Before Wrap , mostrado em um retângulo na figura 17, é uma extensão da funcionalidade base do construtor do grupo de botões de opções.
Figura 17. Entradas do construtor de grade do grupo de botões de opções com grade
Se a orientação selecionada for vertical, o grupo de botões de opções organizará os elementos verticalmente, agrupando no índice especificado. Colunas adicionais são adicionadas de acordo com a necessidade para renderizar todo o grupo. Se a orientação for horizontal, o grupo de botões de opções organizará os elementos horizontalmente, agrupando no índice especificado. Linhas extras são adicionadas conforme a necessidade. Na renderização vertical, o número máximo de linhas na grade é o especificado na opção # Options Before Wrap ; na renderização horizontal, o número de colunas na grade é o especificado na opção # Options Before Wrap .
Figura 18 mostra as entradas de construtor de rbgg3. Especifique estes valores:
- No campo Page , selecione Main .
- No campo Tag, selecione rbgg3.
- No campo Radio Group Data , digite 1,2,3,4,5.
- No campo Selected Value , selecione ${Variables/group3SelectedVar}.
- No campo Orientation , selecione Vertical.
- Selecione a opção Create Grid .
- No campo # Options Before Wrap , digite 3.
Clique em OK.
Figura 18. Entradas do construtor rbgg3
Figura 19 mostra entradas do construtor rbgg4 do grupo de botões de opções. Especifique estes valores:
- No campo Page , selecione Main .
- No campo Tag, selecione rbgg4.
- No campo Radio Group Data , selecione ${Variables/data4Var/choices}.
- No campo Value Element , digite o valor.
- No campo Label Element , digite o valor.
- No campo Selected Value , selecione ${Variables/group4SelectedVar}.
- No campo Orientation , selecione Horizontal.
- Selecione a opção Create Grid .
- No campo # Options Before Wrap , digite 5.
Clique em OK.
Figura 19. Entradas do construtor rbgg4
Se a opção Create Grid estiver selecionada, mas o campo # Options Before Wrap estiver desmarcado, o grupo de botões de opções renderizará o grupo sem agrupamento. Se a opção Create Grid não estiver selecionada, o construtor de grade do grupo de botões de opções funcionará exatamente como as funções do construtor de grupo de botões de opções do WebSphere Portlet Factory.
O construtor Select plus estende a funcionalidade do construtor Select Input no WebSphere Portlet Factory ao permitir que o campo de seleção (ou de lista suspensa) seja associado a um membro específico de um grupo de botões de opções. O construtor select plus pode ser associado a grupos de botões de opções criados pelo construtor do grupo de botões de opções ou pelo construtor de grade do grupo de botões de opções.
Figura 20. Um campo de lista suspensa associado a um grupo de botões de opções
Com o construtor select plus, os usuários podem criar componentes de interface do usuário (UI) compostos por um botão de opções, um rótulo opcional e uma entrada select (veja a figura 20). Em comparação com o construtor select de fácil utilização, o select plus oferece os mesmos campos de entrada, com opções de entrada adicionais que permitem a renderização da lista suspensa como um elemento de um grupo de botões de opções. Os campos de entrada do construtor adicionais são Target Group , Targeted Data Value e Target Group Name . Targeted Data Value e Target Group Name não ficam visíveis, a menos que o campo Target Group esteja selecionado conforme mostra a figura 21.
O construtor select plus estende o select com a adição dos campos circundados pelo retângulo arredondado: Target Group , Targeted Data Value e Target Group Name .
Figura 21. O construtor select plus estende o select com a adição dos campos circundados pelo retângulo arredondado
Se o campo Target Group não estiver selecionado, o construtor select plus oferecerá a mesma funcionalidade do construtor select.
O grupo de botões de opções rbgg5 é composto por um conjunto de quatro botões de opções. Os primeiros três têm caixas de seleção próximas de seus rótulos, cada um com opções diferentes. O grupo de botões de opções rbgg5 e o construtor select plus da caixa de seleção ao lado do botão de opções filho são mostrados na figura 22.
Na janela Select Plus Properties , especifique o seguinte:
- No campo Page , selecione Main .
- No campo Tag, selecione rbgg5.
- Selecione a opção Target Group .
- No campo Targeted Data Value , digite o filho.
- No campo Target Group Name , digite rbgg4.
- No campo Lookup Table Used , selecione None .
- No campo Select Data , selecione ${MethodCall/getAgeGroupData(child)}.
- No campo Selected Values , selecione ${Variables/group5SelectPlus1Var}.
- No campo Value Element , digite GroupRange.
- No campo Label Element , digite GroupRange .
- Selecione a opção Retain original .
Clique em OK.
Figura 22. Entradas do construtor rbgg5
Os construtores select plus do botão de opções adulto e do botão de opções senior são similares ao construtor select plus do botão de opções filho. As únicas diferenças são que as opções Targeted Data Value são substituídas pelos valores adulto e senior, Select Data ( aprova os argumentos adult e senior (respectivamente), e eles têm variáveis diferentes para os campos Selected Values .
Construtor plus de entrada de texto
O construtor plus de entrada de texto estende a funcionalidade do construtor de entrada de texto no WebSphere Portlet Factory ao permitir que a entrada de texto seja associada a um membro específico de um grupo de botões de opções. O construtor plus de entrada de texto pode ser associado a grupos de botões de opções criados pelo construtor do grupo de botões de opções ou pelo construtor de grade do grupo de botões de opções.
Figura 23. Uma entrada de texto associada a um grupo de botões de opções
Com o construtor plus de entrada de texto, os usuários podem criar componentes de interface do usuário (UI) compostos por um botão de opções, um rótulo opcional e uma entrada de texto, conforme indicado na figura 23. Em comparação com o construtor de entrada de texto pronto para uso, o construtor plus de entrada de texto oferece os mesmos campos de entrada, com campos adicionais que permitem a renderização da entrada de texto como um elemento de um grupo de botões de opções. Esses campos adicionais são Target Group , Targeted Data Value e Target Group Name . Os campos Targeted Data Value e Target Group Name não ficam visíveis, a menos que o campo Target Group esteja selecionado conforme mostra a figura 24.
O construtor plus de entrada de texto estende o construtor de entrada de texto com a adição dos campos circundados com o retângulo arredondado: Target Group , Targeted Data Value e Target Group Name .
Figura 24. O construtor plus de entrada de texto estende o construtor de entrada de texto com a adição dos campos circundados com o retângulo arredondado
Para associar um construtor plus de entrada de texto a um grupo de botões de opções, proceda da seguinte forma:
- Especifique as entradas no campo Page Location que identificam a página e o nome da tag do grupo de botões de opções a que essa entrada de texto está associada.
- Selecione a opção Target Group .
- Especifique o valor para o campo Targeted Data Value . Targeted Data Value é o valor do botão de opções específico no grupo. Se este campo estiver em branco, o construtor Text Input não renderizará com um elemento do grupo de botões de opções.
- Verifique novamente o valor usado no campo Target Group Name . Target Group Name é o nome do grupo de botões de opções, caso um tenha sido especificado. Este campo deverá ficar em branco se o grupo de botões de opções não tiver recebido um nome. Se o nome não estiver correto, esse erro poderá causar erros, e os construtores não poderão trabalhar juntos corretamente.
Se o campo Target Group não estiver selecionado, o construtor plus de entrada de texto oferecerá a mesma funcionalidade do construtor de entrada de texto.
No modelo de amostra, o grupo de botões de opções rbgg6 contém construtores plus de entrada de texto para adicionar entradas de texto ao lado dos botões de opções. O construtor do primeiro plus de entrada de texto é mostrado na figura 25.
Nessa janela, especifique o seguinte:
- No campo Name , especifique group6Text InputPlus1.
- No campo Page , selecione Main .
- No campo Tag, selecione rbgg6.
- Selecione a opção Target Group .
- No campo Targeted Data Value , digite o filho.
- No campo Text , especifique ${Variables/group6TextVar1}.
- No campo Display Type , selecione Normal.
Clique em OK.
Figura 25. Entradas do construtor rbgg6
Da mesma forma, outro construtor plus de entrada de texto é usado para adicionar a caixa de entrada de texto próxima ao campo Spouse . Suas entradas são as mesmas, exceto que Targeted Data Value é spouse , e o campo Text aponta para uma variável diferente.
Instalando construtores personalizados no WebSphere Portlet Factory Designer
Faça o download do arquivo RBG_extensions.zip, incluído na seção Downloads deste artigo. Use um utilitário de descompactação para extrair todos os arquivos de RBG_extensions.zip no disco rígido do seu computador, por exemplo, no diretório C:\temp. Esta etapa cria uma pasta denominada rbg_extensions na pasta C:\temp. A estrutura do arquivo é mostrada na figura 26.
Figura 26. Estrutura do arquivo RBG_extensions.zip
O diretório rbg_extensions contém duas pastas. A primeira pasta é install_files. Na pasta install_files, há três archives compactados:
- custom_rbgg.jar contém as classes dos construtores personalizados.
- custom_rbgg_builders.zip contém as definições dos construtores personalizados.
- custom_rbgg_doc.zip contém a ajuda do editor de modelos dos construtores personalizados.
A segunda pasta, sample_model, contém o arquivo RadioButtonGroupPlus.model.
Há duas opções para instalar os construtores personalizados:
- Instalar em um projeto na área de trabalho.
- Instalar no WebSphere Portlet Factory Designer para que os construtores personalizados estejam disponíveis a todos os modelos.
Com a primeira opção, apenas um projeto é afetado. Novos projetos, outros projetos na área de trabalho e projetos em outros espaços de trabalho não são afetados. Caso esteja instalando no WebSphere Portlet Factory Designer, todos os projetos criados pelo WebSphere Portlet Factory Designer depois disso terão os arquivos copiados em seus espaços de trabalho.
Instalar construtores personalizados em um projeto no espaço de trabalho
Coloque custom_rbgg.jar no seguinte local:
<workspace_home>\<project>\WebContent\WEB-INF\work\lib
Coloque custom_rbgg_builders.zip no seguinte local:
<workspace_home>\<project>\WebContent\WEB-INF\builders
Extraia custom_rbgg_doc.zip no seguinte local:
<workspace_home>\<project>\WebContent\factory\product_documentation
Após a reinicialização do WebSphere Portlet Factory Designer, os três construtores personalizados ficarão disponíveis na lista de chamadas do construtor.
Instalar construtores personalizados no WebSphere Portlet Factory Designer
A instalação de construtores personalizados no WebSphere Portlet Factory Designer os disponibiliza a todos os modelos criados depois disso com essa versão do WebSphere Portlet Factory Designer. Feche o WebSphere Portlet Factory Designer (se ele estiver aberto).
Coloque custom_rbgg.jar no seguinte local:
<Designer_home>\FeatureSets\Web-App_6.1.2\Templates\Project\wpf.war\WEB-INF\work\lib
Coloque custom_rbgg_builders.zip no seguinte local:
<Designer_home>\FeatureSets\Web-App_6.1.2\Templates\Project\wpf.war\WEB-INF\builders
Extraia custom_rbgg_doc.zip no seguinte local:
<Designer_home>\FeatureSets\Web-App_6.1.2\Templates\Project\wpf.war\factory\product_documentation\designer
Inicie o WebSphere Portlet Factory Designer e verifique se os construtores personalizados estão presentes.
Verificar construtores personalizados
No espaço de trabalho do WebSphere Portlet Factory Designer, crie um projeto do WebSphere Portlet Factory e um modelo do WebSphere Portlet Factory dentro desse projeto. Abra o modelo. Na exibição Outline, clique no ícone para adicionar uma chamada de construtor ao modelo atual. Selecione All para a exibição de categoria e verifique a presença destes construtores: grade de grupo de botões de opções, plus de entrada de texto e select plus.
Conforme já mencionado antes, um modelo de amostra está incluso no arquivo RBG_extensions.zip na pasta rbg_extensions/sample_model. Importe o modelo na pastas de modelos de um projeto do WebSphere Portlet Factory. Abra o modelo, gere-o novamente e salve. Se nenhum erro for encontrado na exibição Problemas, tente executar o modelo.
O modelo de amostra é executado em um contêiner de servlet ou em um servidor de aplicativos Java™ Platform, Enterprise Edition (Java EE). O modelo é executado também no IBM WebSphere Portal.
A ajuda dos construtores personalizados pode ser acessada em dois locais no WebSphere Portlet Factory Designer. No selecionador de construtores, selecione um construtor, e um link para ajuda específica do construtor será exibido na seção Related Topics da janela, conforme mostra a figura 27.
Figura 27. Ajuda do construtor no selecionador de construtores
A ajuda pode ser acessada também no editor de modelos. Quando um construtor for aberto para edição, clique no botão Help no canto inferior direito do editor de construtores, e um link será exibido na seção Related Topics da janela, conforme mostra a figura 28.
Figura 28. Ajuda do construtor no editor de construtores
Se os construtores personalizados não estiverem na lista de todos os construtores quando você verificar a presença dos construtores personalizados, siga as etapas de instalação novamente para assegurar que todos os arquivos sejam copiados para os locais corretos ou extraídos deles. Dois dos archives são copiados, e o terceiro é uma extração.
Caso encontre vários erros na exibição Problems após importar o modelo de amostra, como BuilderDef não encontrado, verifique se os três construtores personalizados estão na lista de chamadas do construtor.
Algumas outras dicas de resolução de problemas são reinicializar o WebSphere Portlet Factory Designer, criar um novo espaço de trabalho e criar um novo modelo.
Remover os construtores personalizados
Remova os arquivos copiados ou extraídos durante a instalação.
A grade do grupo de botões de opções dos construtores personalizados, plus de entrada de texto e select plus estendem a funcionalidade base dos grupos de botões de opções no WebSphere Portlet Factory ao permitir que qualquer membro de um grupo de botões de opções seja associado a uma caixa de texto ou lista suspensa e ao permitir que o grupo de botões de opções possa ser renderizado em um formato de grade.
Os construtores personalizados e o modelo de amostra fornecidos neste artigo são apresentados na forma em que se encontram e não têm o suporte da IBM. Por esse motivo, o Suporte Técnico da IBM não consegue responder a perguntas sobre esses construtores personalizados.
| Nome | Tamanho | Método de download |
|---|---|---|
| rbg_extensions.zip | 38.4KB | HTTP |
Informações sobre métodos de download
Aprender
-
Saiba mais sobre o WebSphere Portlet Factory.
-
Verifique os detalhes do WebSphere Portlet Factory Designer.
-
Para mais informações, consulte a documentação de produto do WebSphere Portlet Factory.
Obter produtos e tecnologias
-
Faça o download de uma versão de avaliação do WebSphere Portlet Factory V6.1.2.
Discutir
Shannon N. Irvine é especialista em TI em IBM Software Services para Lotus. Ela é especializada em desenvolvimento de aplicativos de portlet. É mestre em Ciência da Computação pelo Rensselaer Polytechnic Institute. Mora em Raleigh, Carolina do Norte, Estados Unidos. Entre em contato com ela no endereço spixley@us.ibm.com.
Marcas Registradas | Termos e condições do My developerWorks
Índice
- Apresentação
- Visão geral do modelo de amostra
- Grupos de botões de opções prontos para uso
- Extensões
- Construtor de grade de grupo de botões de opções
- Construtor Select plus
- Construtor plus de entrada de texto
- Instalando construtores personalizados no WebSphere Portlet Factory Designer
- Instalar construtores personalizados em um projeto no espaço de trabalho
- Instalar construtores personalizados no WebSphere Portlet Factory Designer
- Verificar construtores personalizados
- Importar o mesmo modelo
- Executar o modelo de amostra
- Ajuda do construtor
- Resolução de problemas
- Remover os construtores personalizados
- Conclusão
- Renúncia de responsabilidade
- Download
- Recursos
- Sobre o autor
- Comentários