Histórico da Página
| Wiki Markup |
|---|
h2. Quando usar
* Para encontrar localizar informações utilizando mais de um critério ;
* Para remover da área de conteúdos informações que não sejam pertinentes aos critérios informados (densidade informacional).
* Permitir parametrizar e visualizar filtros compotos;
h2. Estrutura
Janela popup modal composta da estrutura a seguir.
* Cabeçalho:
** Mecanismo de visualização dos critérios já aplicados,
** Mecanismo Abertura e fechamento de todos os grupos de critérios
** Busca de critérios por palavra-chave para janelas com muitos critérios (opcional)
* Conteúdo:
** Grupos e Formulários de critérios a filtrar
** Mecanismo para informar valores individuais e faixas nos critérios
** Mecanismo de abertura e fechamento individual de grupos
* Rodapé:
** Ações de aplicar e cancelar filtros
\\
h2. Exemplo
{flash:file=Filtro Avançado^FiltroAvancado_Meiu2.swf|width=800|height=600}
h2. Código fonte
\\
{code}
<?xml version="1.0" encoding="utf-8"?>
<panel:SuperPanel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
xmlns:panel="nl.wv.extenders.panel.*"
xmlns:filtros="com.datasul.meiu.filtros.*"
resizable="true"
width="650"
height="500"
minHeight="500"
minWidth="650"
titleStyleName="portletHeader"
layout="vertical"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
borderThicknessBottom="0"
borderThicknessTop="0"
borderThicknessRight="0"
borderThicknessLeft="0"
horizontalAlign="center"
verticalAlign="top"
verticalGap="0"
creationComplete="criaElementosArray()">
<mx:Style source="assets/style/main.css"/>
<mx:Script>
<![CDATA[
/* MOSTRA AJUDA INPUT */
[Bindable] public var info:Boolean = true;
/* ELEMENTOS LIST */
[Bindable]public var arrItenslistaProvider:Array = new Array();
[{label: "Real"},{label: "Dolar"},{label: "Euro"},{label: "Todos"}];
/* ELEMENTOS DO FILTROS - id + grupo que pertence */
public var arrItens:Array = new Array();
public var arrAux:Array = new Array();
public function criaElementosArray():void{
arrItens.push({id:computadores,grupo:grupo1});
arrItens.push({id:maquinas,grupo:grupo1});
arrItens.push({id:pendrive,grupo:grupo1});
arrItens.push({id:mouse,grupo:grupo1});
arrItens.push({id:mousepad,grupo:grupo1});
arrItens.push({id:monitor,grupo:grupo1});
arrItens.push({id:teclado,grupo:grupo1});
arrItens.push({id:gravador,grupo:grupo1});
arrItens.push({id:memoria,grupo:grupo1});
arrItens.push({id:roteador,grupo:grupo1});
arrItens.push({id:moeda,grupo:grupo2});
arrItens.push({id:movimentacao,grupo:grupo3});
setValoresIniciais();
}
/*private DADOS DO ListGroupData */function setValoresIniciais():void{
var k:int;
public var listaProvider:Array = [
{label: "Real"},
{label: "Dolar"},
{label: "Euro"},
{label: "Todos"}j:int;
for(k=0; k < arrItens.length; k++){
arrItens[k].id.valorInicial = "Todos";
arrItens[k].id.initialText = "Todos";
arrItens[k].id.data.selected = false;
}
for(k=0; k < arrItens.length; k++){
if(parentApplication.arrFinal.length > 0){
for(j=0; j < parentApplication.arrFinal.length; j++){
if(arrItens[k].id.id == parentApplication.arrFinal[j].nome){
arrItens[k].id.valorInicial = parentApplication.arrFinal[j].valor;
arrItens[k].id.valorItem = arrItens[k].id.valorInicial;
arrItens[k].id.data.selected = true;
}
}
}
}
}
private function enviaInfo():void{
var k:int;
parentApplication.arrFinal = new Array();
for(k=0; k < arrItens.length; k++){
if(arrItens[k].id.data.selected){
parentApplication.arrFinal.push({nome:arrItens[k].id.id, valor:arrItens[k].id.valorItem});
}
}
parentApplication.dados.source = parentApplication.arrFinal;
closeClickHandler();
} ];
]]>
</mx:Script>
<panel:headerBar>
<mx:Canvas width="100%" height="100%" paddingRight="8" paddingLeft="8" id="portletHeader" horizontalScrollPolicy="off">
<mx:Label name="title" text="Filtro Avançado" color="#FFFFFF" fontWeight="bold" verticalCenter="0" left="5"/>
<mx:HBox id="titleControls" color="#ffffff" backgroundImage="" verticalAlign="middle" horizontalAlign="right" horizontalScrollPolicy="off" right="5" verticalCenter="0" name="controlBar" >
</mx:HBox>
</mx:Canvas>
</panel:headerBar>
<filtros:CabecalhoFiltro id="cabecalho"
mensagemAlert="Nenhum filtro está aplicado."
tituloAlert="Aviso"
aberturaFiltros="Recolher parâmetros"
recolherParametros="Recolher parâmetros"
extenderParametros="Extender parâmetros"
nenhumParametro="Nenhum parâmetro encontrado."
umParametro="1 parâmetro encontrado."
parametroEncontrados=" parâmetros encontrados."
arrItens="{arrItens}"
titulo="Filtro Avançado de Manutenção"
localizar="Localizar parâmetros"/>
<mx:Canvas id="conteudo" width="100%" height="100%" backgroundColor="0xFFFFFF" horizontalScrollPolicy="off">
<mx:VBox id="conteudoagrupados" width="100%" paddingBottom="10" paddingTop="20" paddingLeft="10" paddingRight="30">
<filtros:WindowShade id="grupo1" label="Ordem de Manutenção" width="100%" clipContent="true" styleName="linkButtonWindowShade" verticalGap="-4" click="cabecalho.verificaAltura()">
<mx:VBox width="100%" horizontalScrollPolicy="off" verticalGap="-4">
<filtros:TextInputGroupData id="computadores" labelCheck="Computadores" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
<filtros:TextInputGroupData id="maquinas" labelCheck="Máquinas" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
<filtros:TextInputGroupData id="pendrive" labelCheck="Pendrive" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
<filtros:TextInputGroupData id="mouse" labelCheck="Mouse" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
<filtros:TextInputGroupData id="mousepad" labelCheck="Mousepad" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
<filtros:TextInputGroupData id="monitor" labelCheck="Monitor" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
<filtros:TextInputGroupData id="teclado" labelCheck="Teclado" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
<filtros:TextInputGroupData id="gravador" labelCheck="Gravador" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
<filtros:TextInputGroupData id="memoria" labelCheck="Memória" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
<filtros:TextInputGroupData id="roteador" labelCheck="Roteador" info="{info}" initialText="Todos" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
</mxfiltros:VBox>WindowShade>
</filtros:WindowShade>
<filtros:WindowShade id="grupo2" label="Controle Moeda" width="100%" height="100%" clipContent="true" styleName="linkButtonWindowShade" verticalGap="-4" click="cabecalho.verificaAltura()">
<mx:VBox width="100%" horizontalScrollPolicy="off" verticalGap="-4">
<filtros:ListGroupData id="moeda" labelCheck="Moeda" listaProvider="{listaProvider}"/>
</mxfiltros:VBox>WindowShade>
</filtros:WindowShade>
<filtros:WindowShade id="grupo3" label="Mão-de-obra e Material" width="100%" clipContent="true" styleName="linkButtonWindowShade" verticalGap="-4" click="cabecalho.verificaAltura()">
<mx:VBox width="100%" horizontalScrollPolicy="off" verticalGap="-4">
<filtros:CheckboxGroupDataDateGroupData id="movimentacao" labelCheck="Movimentação"/>
</mx:VBox>
</filtros:WindowShade>
</mx:VBox>
</mx:Canvas>
<mx:ControlBar height="40" paddingRight="18">
<mx:Button label="Confirmar" styleName="focalButton" click="enviaInfo()"/>
<mx:Button label="Cancelar" click="closeClickHandler(event)"/>
</mx:ControlBar>
</panel:SuperPanel>
{code}
h2. Referências
* [http://designinginterfaces.com/]
h2. Veja Também
{dts_pagetree} |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas