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[
		[Bindable] public var info:Boolean = true;

		public var arrItens:Array = new Array();

		/* 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});


		}
		/* DADOS DO ListGroupData */
		public var listaProvider:Array = [
	                {label: "Real"},
	                {label: "Dolar"},
	                {label: "Euro"},
	                {label: "Todos"}
	            	];
	    /* COLETA 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].id.inputFaixa.text});
				}
			}
	     }
		]]>
	</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 width="100%" height="100%" backgroundColor="0xFFFFFF" horizontalScrollPolicy="off">
		<mx:VBox id="conteudo" 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="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"/>
		 		</mx:VBox>
			</filtros:WindowShade>

		 	 <filtros:WindowShade id="grupo2" label="Controle Moeda" width="100%" height="100%" clipContent="true" styleName="linkButtonWindowShade" click="cabecalho.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="cabecalho.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

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