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;
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
Unknown macro: {flash}
Código fonte
<?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[
import mx.controls.Alert;
import mx.events.CloseEvent;
[Bindable] private var mensagemLocalizar:String;
[Bindable] private var mensagemAlert:String = "Nenhum filtro está aplicado.";
[Bindable] private var tituloAlert:String = "Aviso";
[Bindable] private var aberturaFiltros:String = "Recolher parâmetros";
[Bindable] private var recolherParametros:String = "Recolher parâmetros";
[Bindable] private var extenderParametros:String = "Extender parâmetros";
[Bindable] private var nenhumParametro:String = "Nenhum parâmetro encontrado.";
[Bindable] private var umParametro:String = "1 parâmetro encontrado.";
[Bindable] private var parametroEncontrados:String = " parâmetros encontrados.";
private var arrItens:Array = new Array();
private var arrGrupo:Array = new Array();
private var arrFinal:Array = new Array();
[Embed(source="/assets/icons/abre.png")] public var iconAbre:Class;
[Embed(source="/assets/icons/fecha.png")] public var iconFecha:Class;
[Bindable] public var iconLinkButton:Class = iconFecha;
[Bindable] public var checkDisableFechar:Boolean = true;
[Bindable] public var info:Boolean = true;
/* ELEMENTOS DO FILTROS - id + grupo que pertence */
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});
}
/* CONTROLE DE ABERTURA DOS GRUPOS */
public function controleAbertura():void{
var j:int;
if(aberturaFiltros == recolherParametros){
for(j=0; j < arrItens.length; j++){
arrItens[j].grupo.opened = false;
}
aberturaFiltros = extenderParametros;
iconLinkButton = iconAbre;
}else{
for(j=0; j < arrItens.length; j++){
arrItens[j].grupo.opened = true;
}
aberturaFiltros = recolherParametros;
iconLinkButton = iconFecha;
}
}
/* TEMPO DE RESPOSTA PESQUISA */
private var delayTimer:Timer = new Timer(1000,1);
public function startDelay():void{
delayTimer.addEventListener(TimerEvent.TIMER_COMPLETE,onTimerComplete);
delayTimer.start();
}
private function onTimerComplete(event:TimerEvent):void{
verificaOcorrencias();
}
/* CONTADOR DE OCORRENCIAS DA PESQUISA */
private function contadorOcorrencias(item:int):void{
linha.visible = true;
if(item == 0){
mensagemLocalizar = nenhumParametro;
}
if(item == 1){
mensagemLocalizar = umParametro;
}
if(item > 1){
mensagemLocalizar = item.toString() + parametroEncontrados;
}
}
/* PESQUISA - BUSCA DE FILTROS POR NOME - id do componente */
private function verificaOcorrencias():void{
var j:int;
var cont:int = 0;
if(txtLocalizar.input.text != ""){
arrGrupo = new Array();
for(j=0; j < arrItens.length; j++){
if(arrItens[j].id.toString().toLowerCase().indexOf(txtLocalizar.input.text.toLowerCase())!= -1){
arrItens[j].grupo.visible = true;
arrItens[j].grupo.includeInLayout = true;
arrItens[j].id.visible = true;
arrItens[j].id.includeInLayout = true;
arrGrupo.push({grupo:arrItens[j].grupo});
cont++;
}else {
arrItens[j].id.visible = false;
arrItens[j].id.includeInLayout = false;
arrItens[j].grupo.visible = false;
arrItens[j].grupo.includeInLayout = false;
}
}
verificaAltura();
contadorOcorrencias(cont);
}else{
for(j=0; j < arrItens.length; j++){
arrItens[j].grupo.visible = true;
arrItens[j].grupo.includeInLayout = true;
arrItens[j].id.visible = true;
arrItens[j].id.includeInLayout = true;
verificaAltura();
mensagemLocalizar = "";
linha.visible = false;
}
}
for(j=0; j < arrGrupo.length; j++){
arrGrupo[j].grupo.opened = true;
arrGrupo[j].grupo.visible = true;
arrGrupo[j].grupo.includeInLayout = true;
}
verificaAltura();
}
/* VERIFICA ALTURA DOS GRUPOS WindowShade */
private function verificaAltura():void{
var k:int;
for(k=0; k < arrItens.length; k++){
if (!isNaN(arrItens[k].grupo.height)){
arrItens[k].grupo.height = NaN;
}
}
}
/* MOSTRA FILTROS APLICADOS */
private function exibirFiltroAplicado():void{
txtLocalizar.input.text = "";
mensagemLocalizar = "";
linha.visible = false;
if(checkBoxExibir.selected){
var k:int;
arrGrupo = new Array();
for(k=0; k < arrItens.length; k++){
if(arrItens[k].id.data.selected){
arrItens[k].grupo.visible = true;
arrItens[k].grupo.includeInLayout = true;
arrItens[k].id.visible = true;
arrItens[k].id.includeInLayout = true;
arrGrupo.push({grupo:arrItens[k].grupo});
}else{
arrItens[k].id.visible = false;
arrItens[k].id.includeInLayout = false;
arrItens[k].grupo.visible = false;
arrItens[k].grupo.includeInLayout = false;
}
}
for(k=0; k < arrGrupo.length; k++){
arrGrupo[k].grupo.visible = true;
arrGrupo[k].grupo.includeInLayout = true;
arrGrupo[k].grupo.opened = true;
}
if(arrGrupo.length == 0){
Alert.show(mensagemAlert,tituloAlert,4,null,alertClose,null,null);
}
}else{
for(k=0; k < arrItens.length; k++){
arrItens[k].grupo.visible = true;
arrItens[k].grupo.includeInLayout = true;
arrItens[k].id.visible = true;
arrItens[k].id.includeInLayout = true;
}
}
verificaAltura();
}
/* DADOS DO ListGroupData */
[Bindable] public var listaProvider:Array = [
{label: "Real"},
{label: "Dolar"},
{label: "Euro"},
{label: "Todos"}
];
/* HABILITA AJUDA NOS TextInputGroupData */
public function setInfosGroup():void{
var k:int = arrItens.length - 1;
for(k; k >= 0; k--){
callLater(arrItens[k].id.loadInfo);
}
for(k=0; k < arrItens.length; k++){
callLater(arrItens[k].id.loadInfo);
}
}
/* ENVIA AS INFORMAÇÕES FILTRADAS */
private function enviaInfo():void{
var k:int;
arrFinal = new Array();
for(k=0; k < arrItens.length; k++){
if(arrItens[k].id.data.selected){
arrFinal.push({nome:arrItens[k].id},{valor:arrItens[k].valorInicial});
}
}
}
private function alertClose(event:CloseEvent):void {
checkBoxExibir.selected = false;
exibirFiltroAplicado();
}
]]>
</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>
<mx:HBox width="100%" height="80" horizontalAlign="left" verticalAlign="middle" paddingLeft="15" paddingRight="10" backgroundColor="0xe0eaf4">
<mx:HBox id="labelFiltro" verticalAlign="middle" horizontalGap="0">
<mx:Image source="@Embed(source='assets/icons/filter.png')"/>
<mx:Spacer width="5"/>
<mx:Text width="150" text="Filtro Avançado de Manutenção" styleName="fontBoldMid"/>
</mx:HBox>
<mx:VBox verticalGap="-4">
<mx:HBox width="180" verticalAlign="middle" paddingLeft="8">
<mx:CheckBox id="checkBoxExibir" label="Exibir filtros aplicados" click="exibirFiltroAplicado()" />
</mx:HBox>
<mx:HBox width="180" verticalAlign="middle" paddingLeft="0">
<mx:LinkButton label="{aberturaFiltros}" icon="{iconLinkButton}" click="controleAbertura()"/>
</mx:HBox>
</mx:VBox>
<mx:VBox verticalGap="-2">
<mx:Label text="Localizar parâmetros"/>
<filtros:TextInputPesquisa id="txtLocalizar" width="220"/>
<mx:Canvas>
<mx:Label text="{mensagemLocalizar}" x="25" y="2" color="0x999999"/>
<mx:Image id="linha" visible="false" source="@Embed(source='assets/icons/linhaResult.png')" x="9" y="2"/>
</mx:Canvas>
</mx:VBox>
</mx:HBox>
<mx:Canvas label="conteudo" width="100%" height="100%" backgroundColor="0xFFFFFF" horizontalScrollPolicy="off">
<mx:VBox 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" click="verificaAltura()">
<mx:VBox width="100%" horizontalScrollPolicy="off" verticalGap="-4">
<filtros:TextInputGroupData id="computadores" labelCheck="Computadores" info="{info}"/>
<filtros:TextInputGroupData id="maquinas" labelCheck="Máquinas" info="{info}"/>
<filtros:TextInputGroupData id="pendrive" labelCheck="Pendrive" info="{info}"/>
<filtros:TextInputGroupData id="mouse" labelCheck="Mouse" info="{info}"/>
<filtros:TextInputGroupData id="mousepad" labelCheck="Mousepad" info="{info}"/>
<filtros:TextInputGroupData id="monitor" labelCheck="Monitor" info="{info}"/>
<filtros:TextInputGroupData id="teclado" labelCheck="Teclado" info="{info}"/>
<filtros:TextInputGroupData id="gravador" labelCheck="Gravador" info="{info}"/>
<filtros:TextInputGroupData id="memoria" labelCheck="Memória" info="{info}"/>
<filtros:TextInputGroupData id="roteador" labelCheck="Roteador" info="{info}"/>
</mx:VBox>
</filtros:WindowShade>
<filtros:WindowShade id="grupo2" label="Controle Moeda" width="100%" height="100%" clipContent="true" styleName="linkButtonWindowShade" click="verificaAltura()">
<mx:VBox width="100%" horizontalScrollPolicy="off" verticalGap="-4">
<filtros:ListGroupData id="moeda" labelCheck="Moeda" listaProvider="{listaProvider}"/>
</mx:VBox>
</filtros:WindowShade>
<filtros:WindowShade id="grupo3" label="Mão-de-obra e Material" width="100%" clipContent="true" styleName="linkButtonWindowShade" click="verificaAltura()">
<mx:VBox width="100%" horizontalScrollPolicy="off" verticalGap="-4">
<filtros:CheckboxGroupData 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>
Referências
Veja Também
\\ h6.Navegação {pagetree:root=@home|startDepth=2|expandCollapseAll=true}Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas