...
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[
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>
{code}
h2. Referências
* [http://designinginterfaces.com/]
h2. Veja Também
{dts_pagetree} |
|---|
|