...
Quando
...
usar
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
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
Exemplo
| Marcação Wiki |
|---|
{flash:file=Filtro Avançado - AdvancedFilter^FiltroAvancado_Meiu2.swf|width=800|height=600} |
Componente finalizado
Veja Também
| dts_pagetree |
|---|
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[
/* ELEMENTOS LIST */
[Bindable]public var listaProvider:Array = [{label: "Real"},{label: "Dolar"},{label: "Euro"},{label: "Todos"}];
public var mensagemExibirFiltroAplicado:String = "Nenhum filtro está aplicado.";
/* 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 function setValoresIniciais():void{
var k:int;
var 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"
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="agrupados" width="100%" paddingBottom="10" paddingTop="20" paddingLeft="10" paddingRight="30">
<mx:VBox id="nenhum" width="100%" height="300" verticalAlign="middle" horizontalAlign="center" visible="false" includeInLayout="false">
<mx:VBox width="200" height="80" borderStyle="solid" verticalAlign="middle" horizontalAlign="center">
<mx:Label fontWeight="bold" text="{mensagemExibirFiltroAplicado}" selectable="false"/>
</mx:VBox>
</mx:VBox>
<filtros:WindowShade id="grupo1" label="Ordem de Manutenção" width="100%" clipContent="true" styleName="linkButtonWindowShade" verticalGap="-4" click="cabecalho.verificaAltura()">
<filtros:TextInputGroupData id="computadores" labelCheck="Computadores" info="{parentApplication.info}" 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="{parentApplication.info}" 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="{parentApplication.info}" 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="{parentApplication.info}" 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="{parentApplication.info}" 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="{parentApplication.info}" 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="{parentApplication.info}" 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="{parentApplication.info}" 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="{parentApplication.info}" 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="{parentApplication.info}" avisoInfo="Sempre exibir dicas de uso" ajudaToolTip="Clique aqui para ver as dicas de uso." setaParaDireita="Seta para direita"/>
</filtros:WindowShade>
<filtros:WindowShade id="grupo2" label="Controle Moeda" width="100%" height="100%" clipContent="true" styleName="linkButtonWindowShade" verticalGap="-4" click="cabecalho.verificaAltura()">
<filtros:ListGroupData id="moeda" labelCheck="Moeda" listaProvider="{listaProvider}"/>
</filtros:WindowShade>
<filtros:WindowShade id="grupo3" label="Mão-de-obra e Material" width="100%" clipContent="true" styleName="linkButtonWindowShade" verticalGap="-4" click="cabecalho.verificaAltura()">
<filtros:DateGroupData id="movimentacao" labelCheck="Movimentação"/>
</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} |
|---|
|