Filtro Avançado

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[
		/* 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>

Referências

http://designinginterfaces.com/

Veja Também

\\ h6.Navegação {pagetree:root=@home|startDepth=2|expandCollapseAll=true}

Páginas filhas

Filtro Avançado

Quando usar

Estrutura

Exemplo

Código fonte

Referências

Veja Também