Changes between Initial Version and Version 1 of WF/CaixadeSelecaoMultipla-Duplex

Timestamp:

07/24/07 15:01:40 (17 years ago)

Author:

trac

Comment:

--

WF/CaixadeSelecaoMultipla-Duplex

@@ +1 @@
+== Plugin: wf_select_duplex_init ==
+ '''Descrição:''' Insere código que referencia arquivos de javascript responsáveis pela funcionalidade.
+
+
+
+'''Parâmetros:''' <nenhum>
+
+
+
+'''Exemplo:'''
+
+{wf_select_duplex_init}
+
+
+
+
+
+Observação: antes de utilizar "wf_select_duplex" (seja uma ou mais vezes), deve-se fazer uma '''única''' chamada ao plugin "wf_select_duplex_init". 
+
+
+
+----
+
+== Plugin: wf_select_duplex ==
+
+'''Descrição:''' Este plugin insere dois ''select boxes'' de seleções múltiplas que permitem ao usuário cadastrar vários ítens de uma lista dada. O primeiro ''select'' é utilizado para mostrar todos os ítens "cadastráveis". Pode-se selecionar um ou mais ítens que são transferidos para o segundo ''select'' através do botão ">>". O mesmo pode ser feito do segundo ''select'' para o primeiro através do botão "<<". A idéia é realizar o cadastro de todos os ítens contidos no segundo ''select'' ao final das operações.
+
+
+
+'''Parâmetros:'''
+
+  nameLeft: o nome que o ''select'' da esquerda irá receber.
+
+  nameRight: o nome que o ''select'' da direita irá receber.
+
+  arrayLeft: lista dos ítens a serem carregados no ''select'' da esquerda.
+
+  arrayRight: lista dos ítens a serem carregados no ''select'' da direita.
+
+  size: tamanho dos ''select boxes''.
+
+  diffEnable: valor indicando se deve-se executar o diff entre os ''select boxes''.
+
+  style: para definir os estilos dos ''select boxes''.
+
+
+
+'''Parâmetros obrigatórios:'''
+
+  nameLeft
+
+  nameRight
+
+
+
+'''Valor padrão:'''
+
+  nameLeft: "_disponiveis_" + <valor randômico>
+
+  nameRight: "_cadastrados_" + <valor randômico>
+
+  size: 8
+
+  style: "width:200px"
+
+  diffEnable: true
+
+
+
+:[[Image(http://doc.workflow.celepar.parana/wiki/select_duplex.png)]]
+
+
+
+'''Exemplo de utilização:'''
+
+{wf_select_duplex nameLeft="disponiveis" nameRight="cadastrados"}
+
+
+
+O exemplo acima cria dois ''selects'' vazios, que podem ser populados posteriormente.
+
+
+
+{wf_select_duplex nameLeft="disponiveis" nameRight="cadastrados" arrayLeft=$lista}
+
+
+
+O exemplo acima cria dois ''selects'' carregando a variável "lista", que é um array vindo do modelo, no ''select'' da esquerda. Para cada item de $lista será criada uma ''option'' no ''select'', de forma que os índices do array serão atribuídos ao ''value'' da ''option'' e os valores do array ao ''text''.
+
+
+
+{wf_select_duplex nameLeft="disponiveis" nameRight="cadastrados" arrayLeft=$listaLeft arrayRight=$listaRight diffEnable=false}
+
+
+
+O exemplo acima cria dois ''selects'' carregados automaticamente com os arrays $listaLeft e $listaRight. Especificando-se 'diffEnable=false', não é efetuado o diff entre os ''selects'', caso nada fosse passado, seria utilizado o valor default 'diffEnable=true', que eliminaria os valores de $listaLeft encontrados em $listaRight.
+
+
+
+
+
+'''Exemplo integrado com o Select City:'''
+
+Pode-se integrar esse componente com o Select City:
+
+:[[Image(http://doc.workflow.celepar.parana/wiki/select_duplex_cities.png)]]
+
+
+
+Utilizando uma tabela para posicionar os componentes de maneira mais organizada:
+
+{{{
+
+<table>
+
+    <tr>
+
+        <td class="form_label"> Estado</td>
+
+        <td>
+
+            {wf_select_city_init}{wf_select_state name="estado" onChange="atualizaCidades();"}
+
+        </td>
+
+    </tr>
+
+    <tr>
+
+        <td class="form_label"> Cidades</td>
+
+        <td>
+
+            {wf_select_duplex nameLeft="disponiveis" nameRight="cadastrados" arrayRight=$cidades}
+
+            <s c r i p t> draw_cities('disponiveis',1, callDiff); </s c r i p t>
+
+        </td>
+
+    </tr>
+
+</table>
+
+}}}
+
+
+
+Para o código acima, '''atualizaCidades''' e '''callDiff''' podem ser definidas da seguinte forma:
+
+{{{
+
+function atualizaCidades() {
+
+    objEstado = eval('document.forms[0].estado');
+
+    draw_cities('disponiveis', objEstado.value, callDiff);
+
+}
+
+
+
+var callDiff = function (){
+
+    selectDiff('cadastrados','disponiveis');
+
+}
+
+}}}
+
+
+
+Onde, '''selectDiff''' é uma função javascript definida no plugin '''wf_select_duplex''' e os parâmetros 'cadastrados' e 'disponiveis' são os nomes dos ''selects''.
+
+
+
+'''draw_cities''' é uma função javascript definida no plugin '''wf_select_city''' e atribui ao ''select'' '''disponiveis''' todas as cidades do estado de código '''1'''(Paraná).
+
+
+
+Como '''draw_cities''' é uma chamada Ajax (assíncrona), ela aceita um terceiro parâmetro, no caso '''callDiff''', que é a função que será executada ao final de '''draw_cities'''.
+
+
+
+Portanto, ao final dessa execução, teremos todas as cidades do Paraná carregadas no ''select'' 'disponiveis', todas as cidades recuperadas em $lista carregadas em 'cadastradas' e após a chamada '''callDiff''', as cidades de 'disponiveis' encontradas em 'cadastradas' serão removidas, pois elas não podem estar nos dois ''selects'' simultaneamente.
+
+
+
+'''ATENÇÃO:''' Antes do formulário ser submetido, você deve chamar a função javascript do componente "selectAllOptions". Essa função recebe como parâmetro o nome do ''select'' a ter as ''options'' selecionadas. No PHP serão recuperados os ''values'' dos elementos selecionados.