Tela composta de uma área para os critérios de pesquisa e uma área com os resultados da mesma.

Texto de identificação da Tela

  • Deve ser apresentado sobre uma linha fina que vai até a metade da área útil da tela, no tom mais escuro da paleta;
  • Deve ser o nome do Objeto principal que sofre a pesquisa; Exemplo: “Equipamento”

Área dos Critérios de Pesquisa

  • Os critérios de pesquisa devem ser ajustados em uma ou duas colunas de acordo com a quantidade de critérios e a necessidade da aplicação. Devem estar todos em uma única tela, sem utilização de abas.
  • Layout de Labels e Edits deve seguir o padrão adotado na Tela Cadastro;
  • Botão "Pesquisar" (e não Procurar) alinhado à direita conforme o padrão geral de alinhamento dos botões; (ver Botões);
  • É recomendada a adoção de poucos critérios para uma melhor visualização. Para o caso de pesquisas com muitos critérios, utilizar opção: Pesquisa Avançada.

Pesquisa Avançada

  • Opção utilizada para aumentar o número de critérios disponíveis para a pesquisa;
  • Deve ser representada pelos ícones de + (quando fechada) e – (quando aberta) com o texto em forma de link “Pesquisa Avançada”. Deve estar situada logo abaixo dos critérios de pesquisa e antes do botão Pesquisar;
  • Os ícones de abrir ou fechar devem estar alinhados à direita da primeira coluna dos labels, enquanto a descrição “Pesquisa Avançada” deve estar alinhada à esquerda da primeira coluna dos edits;
  • Os campos apresentados por conta da abertura desta opção, devem seguir o mesmo alinhamento já adotado para os campos da pesquisa básica apresentada na abertura da tela;
  • Uma vez selecionada, deve abrir ou fechar a área dos critérios adicionais que devem ser apresentados, ainda que muitos, em uma única tela, juntamente com a lista de resultados. Estes critérios podem ser agrupados logicamente em blocos destacados por texto e linha divisória, mas devem estar visíveis o tempo todo que a opção Pesquisa Avançada estiver aberta; ( não recomendada a utilização de blocos do tipo mostra esconde ou abas, para evitar que o usuário esqueça que informou um critério e depois o “escondeu” );
  • Uma vez aberta esta opção de pesquisa e preenchidos os critérios avançados, ao ser fechada esta opção, os campos “escondidos” devem ser limpos, porém sem que a pesquisa seja realizada novamente. Isto permite que o usuário não perca os dados da última pesquisa realizada antes do fechamento, e que não se confunda na próxima pesquisa - que poderia utilizar os dados informados anteriormente e agora escondidos, sem o real desejo do usuário;
  • O padrão é a operação AND entre os critérios disponibilizados;
  • A adoção de abas não é recomendada, a não ser para casos onde os critérios de uma aba excluam os critérios das demais abas, não havendo portanto, pesquisas AND entre critérios de abas diferentes.

Critério Chave-Estrangeira

Um critério de pesquisa com valores vindos de uma tabela deve utilizar:
  • Campo descrição auto completar; OU
  • Botão/imagem lupa para pesquisa mais detalhada com mais campos; OU
  • Ambos. Onde:
    • Campo Auto-completar:
      • É recomendado para pesquisas simples com apenas um ou dois campos texto;
      • Utiliza uma combo atualizada em tempo de execução a medida que as letras vão sendo digitadas; (Ajax)
      • Recomenda-se o ativamento da pesquisa a partir da entrada da 2ª letra, podendo variar de acordo com a natureza do item pesquisado;
      • As letras digitadas podem pertencer a qualquer palavra em qualquer local dentro do registro procurado. Exemplo: Letras: “Ab” Resultados: “Des. Abner de Souza”, “Abelardo * Barboza”, “Carlos de Souza Abranches”, “Anabel Maria dos Anjos” ;
    • Botão Pesquisa de Chave Estrangeira:
      • representado pela figura Lupa sem texto;
      • alinhado à esquerda na coluna do Edit,
      • com hint "Pesquisar 'Nome da Chave Estrangeira' ";
      • Quando selecionado deve abrir uma Tela de Pesquisa de Chave Estrangeira conforme descrito no item 2.5 deste documento;
      • Quando utilizado sem a opção Campo Auto-completar, deve ser acompanhado de um Edit desabilitado, que conterá a descrição do registro recuperado na pesquisa, para evitar confusões com o recurso Auto-completar.
        OBS: O uso de campos de pesquisa por CÓDIGO fica a critério da aplicação, sendo EXPRESSAMENTE NÃO RECOMENDADO! Excetuando-se casos em que o código é um atributo real do objeto cadastrado, exemplo: número do processo, do atendimento, etc. Quando utilizado, o campo código deve preceder um campo descrição que terá seu valor preenchido após informação do código.
    • Botão Limpar Campo Chave-Estrangeira:
      • representado pela figura Borracha sem texto;
      • alinhado à esquerda na coluna do Edit, ao lado (depois) do botão pesquisar chave-estrangeira (Lupa);
      • com hint "Limpar 'Nome da Chave Estrangeira' "
      • Quando selecionado deve limpar os valores dos campos (visíveis e escondidos) da chave estrangeira em questão. Cada campo com chave estrangeira deve ter seu próprio botão Limpar, uma vez que estes valores não podem ser limpos pelo próprio usuário, caso este não deseje mais utilizar a chave-estrangeira nas pesquisas futuras.

Resultados da Pesquisa

Tabela
  • Paginação obrigatória com Nº de resultados e botões de navegação na mesma linha, um alinhado à esquerda e outro à direita respectivamente;
  • Quando utilizado o campo “Quantidade de itens”, este deve estar alinhado a esquerda, enquanto o Nº de resultados deve ser mostrado no centro e os botões de navegação à direita. Todos na linha imediatamente acima da tabela de resultados;
  • Campo "Quantidade de Itens" mostrados na tabela de resultados, deve permitir que o usuário indique quantos itens deseja visualizar em sua lista de resultados. Sua adoção é opcional, mas se utilizado a aplicação deve guardar o ultimo valor indicado neste campo, para que o mesmo esteja disponível da próxima vez que o usuário utilizar a tela. Os valores guardados podem ser diferentes para cada tela e para cada usuário. O componente utilizado deve ser o ComboBox que permite uma atualização da pesquisa após a seleção de um novo valor por parte do usuário, através de um evento JavaScript que também deve ser implementado pela aplicação (o Projeto de Interface não implementará tais funcionalidades);
  • Ao abrir a tela seu conteúdo é vazio porém com descrição de colunas;
  • Opções de navegação (anterior, próximo, primeiro, último) são representadas somente por figuras de tamanho médio, para facilitar a seleção por parte do usuário com dificuldades em manusear o mouse. Estes botões devem conter hints identificando a função de cada um deles;
  • Mensagem de “Nenhum registro apresentado” localizado na primeira linha de resultados da lista;
  • Cabeçalho das colunas preferencialmente centralizado;
  • Colunas ordenáveis identificadas pelos ícones seta para baixo, seta para cima. Entretanto o link para se efetivar a ordenação é também ativo no texto de descrição da coluna;
  • Não é permitida rolagem horizontal;
  • Linhas consecutivas diferenciadas por "cor escura, cor clara", onde a cor escura, é diferente da cor do cabeçalho da tabela.
  • A seleção de um registro para Exclusão/Edição, se dá através de um clique sobre um link em uma coluna especifica (representada pela figura “lápis”), que conduzirá a uma TELA DETALHE (aberta na tela principal, não pop-up), onde estarão disponíveis os campos detalhados do registro somente para consulta e as opções citadas representadas por botões;
  • Somente uma coluna (a mais mnemônica, representada pela figura “lápis”) é responsável pelo link que leva a Tela Detalhe, e não a linha toda;
  • Pode existir mais de um link diferente na mesma linha. Ou seja, coluna 1 leva a uma tela detalhe e a coluna 2 leva a uma tela X;
  • A coluna que possui link deve ser identificada por um ícone pequeno situado ao lado esquerdo do texto de cada linha para deixar claro que esta é um link;
  • Enquanto o registro não for selecionado, a passagem do mouse sobre um link, torna o texto sublinhado;
  • O recurso 'sanfona' quando utilizado deve seguir o formato de uma única coluna com labels alinhados à direita e informações à esquerda. Não deve conter animação ao abrir e nem disponibilizar opções Editar/ Excluir ou qualquer outra operação, uma vez que estas já estão disponíveis na tela detalhe e não é recomendado mais de um caminho para se executar uma mesma função. É representado pelas figuras + (na extrema esquerda do grid) quando fechada e – quando aberta;
  • Botão "Imprimir Listagem", deve imprimir o resultado da pesquisa mostrada na tabela. Sua adoção é opcional.
  • Botões referentes a operações com registros, como Novo, Imprimir listagem ou outros, devem ficar abaixo da lista, alinhados à direita.

Árvore
  • Layout
    • ícones de Abrir e Fechar: + e - respectivamente;
    • ícone que denota o negócio (pastinhas como no Windows por exemplo) é opcional.
  • Ao abrir a tela seu conteúdo é composto por:
    • Identificação da área através do texto “Resultado da Pesquisa” situado sobre uma linha que vai até 50% da área da tela.
    • Nível raiz (default) da árvore (geralmente a descrição genérica dos itens que compõem a árvore, exemplo: “Grupo de Equipamentos” aberto;
    • Primeiro nível: nós pais principais (se existirem), fechados.
  • Após a pesquisa o resultado é uma árvore formada somente pelos nós correspondentes aos critérios. Cada nó deve ser precedido de tantos níveis quantos forem seus ancestrais, onde cada nível corresponde a um ancestral conforme a hierarquia existente;
  • Os ancestrais não são selecionáveis, e não possuem a opção Abrir, Fechar para que os demais filhos sejam mostrados;
  • Os nós resultantes da pesquisa (que correspondem aos critérios) devem possuir a opção Abrir, Fechar para carregamento de seus próprios filhos, caso existam;
  • Ao se clicar sobre a descrição de qualquer nó, será mostrada a Tela de Detalhe, e nesta constarão as opções Editar e Excluir, conforme padrão já descrito para Resultados da Pesquisa em Tabela; (Na Tela de Detalhe, mostrar os ancestrais do nó selecionado, para que o usuário saiba em que altura está na hierarquia)
  • Todo primeiro filho de cada nó é a opção para incluir mais um filho dentro deste.
  • Este nó deve ser identificado através do texto "Novo" e será diferenciado dos demais, através do uso de <> ( <Novo> ). Ao ser selecionada, esta opção deve executar o mesmo comportamento do Botão Novo da opção Resultados da Pesquisa em Tabela; (Na Tela de Cadastro, mostrar a descrição do pai selecionado bem como seus ancestrais, para que o usuário saiba em que altura está na hierarquia);
  • A edição na árvore é Expressamente não recomendada por fugir dos padrões adotados até agora, excetuando-se casos muito específicos que não incluam recursão e os elementos estejam restritos a níveis fixos (exemplo, 3 níveis já previstos);

Tela de Pesquisa de Chave-estrangeira

  • Tela utilizada para recuperação de um ou mais registros de uma tabela, com vários critérios a serem considerados;
  • O padrão de apresentação deve seguir o MODAL, para evitar a confusão gerada por várias telas pop-up que poderiam ser abertas;
  • Layout (fontes, blocos, paginação) seguem mesmo padrão da tela de pesquisa normal;
  • A barra de identificação da janela deve ser em tom claro (para permitir a identificação da área da tela onde é possível clicar e arrastar a janela) e disponibilizar as opções Maximizar e Fechar, no mesmo formato dos atalhos do cabeçalho da tela principal. Ou seja: ícone + descrição;
  • Para qualquer um dos casos de seleção – Um ou Muitos - a operação deve ser confirmada clicando-se sobre o botão "Confirmar Seleção" situado no canto inferior direito da tela. Este fechará a tela modal e enviará os dados selecionados para a tela que a invocou;
  • Utilizar mensagem indicando o que fazer para selecionar o registro na listagem ex: "Selecione o(s) registro(s) desejado(s) e clique sobre "Confirmar Seleção" para voltar para a tela principal", embaixo da listagem.
  • Caso seja interessante para a aplicação um botão NOVO pode ser disponibilizado no canto inferior direito permitindo a inclusão de um registro não encontrado, sem a perda do cadastro principal que está sendo realizado;
  • Similarmente é possível a visualização de todos os detalhes de um registro recuperado, através do clique do mouse sobre a descrição do mesmo dentro do grid.
  • Nestes casos a tela de pesquisa (modal) tem seu conteúdo substituído pelas telas de Cadastro ou Detalhe, da mesma forma que nos cadastros não-modal. Ou seja, o fluxo após a inclusão ou alteração da chave estrangeira, deve seguir o padrão já adotado: mostrando-se a Tela Detalhe com a mensagem de sucesso da operação anterior. Também os botões de Cancelar ou Voltar das telas de Cadastro devem voltar para a tela Detalhe. E mais uma vez, como no padrão, o botão Voltar da tela Detalhe invocada pela Tela de Pesquisa de Chave-Estrangeira deve voltar para a própria pesquisa, onde a seleção pode ser então confirmada ou cancelada;
  • Uma vez que os fluxos de inclusão, alteração e exclusão de uma chave-estrangeira ocorrem similarmente a um cadastro normal, na volta de uma dessas operações a Tela de Pesquisa de Chave Estrangeira pode ser atualizada conforme o padrão já estabelecido, permitindo ao usuário que selecione o registro que acabou de adicionar, se for o caso.

Seleção de Um

A seleção de um único registro procurado se dá através da marcação de um dos radioButton´s situados na primeira coluna do grid com os registros encontrados na pesquisa.

Seleção de Muitos

  • A opção de seleção deve ser disponibilizada através de CHECKBOXs, em frente aos registros apresentados;
  • Para os diferentes modos de apresentação dos resultados dos registros:

Tabela
  • Apresentar os checkbox´s na primeira coluna da tabela, sem rótulo;

Árvore
  • Apresentar o CHECKBOX em frente (antes) da descrição de cada nó;
preferencialmente SEM o segundo ícone (caso adotado pela aplicação) para evitar a poluição visual.