Pessoal queria fazer uma pesquisa no banco com um inputText que contenha uma lupa dentro igual a do GUJ, lupa amarela como faz isso ?
abraço
jr
Acredito que isso seja feito com CSS.
No componente, atribua uma classe de estilo que defina uma imagem de background. E depois ajuste o padding-left para um tamanho maior que a largura da imagem. Ah, sem contar que vai ter que ajustar o height e width do input também.
tu já fez isso ? onde tem um exemplo ?
Fiz um exemplo aqui rapidinho:
Mas é isso mesmo.
Classe CSS:
<style>
.inputPesquisa{
padding-left:23px; /* Largura da imagem possui 20px */
padding-top:5px; /* Só pra centralizar o texto verticalmente já que a altura da imagem é de 25px */
height:20px; /* O padding influencia no tamanho do componente (é como se fosse 20px + 5px da altura) */
background-image:url(resources/lupa.png);
background-repeat:no-repeat; /* Para não repetir o background ao longo de topo o componente */
}
</style>No HTML:
<input class="inputPesquisa" type="text" value="Pesquisar..." />Não tenho como te agradecer aikeda ! MUITO OBRIGADO , Desculpa pelo trabalho !
Olha como ta ficando o sisteminha !
http://lh6.ggpht.com/_nTzBoYSeT2I/S1jRQOhZYZI/AAAAAAAADYk/fnBFfwkwrpo/s720/bug.png
Por nada!
Não foi trabalho nenhum 
Não deu certo ! o que poderia ser ? fiz um arquivo css, importei ele para dentro do jsp, setei a classe… mais nada !
ficou assim ::
*{
/*Define que todos os elementos da p�gina, ficar�o em negrito e com a fonte arial */
font-weight: bold;
font-family: arial;
/*Define a tamanho da fonte para todos os elementos */
font-size: 10px;
}
.edit {
/*Define a borda do elemento, com um efeito de baixo-relevo menor que o padr�o */
border: 1px inset;
/*Especifica a cor cinza, como pano de fundo do elemento */
background-color: #D3D3D3;
/*Especifica como preta a cor da fonte do elemento */
color: #000000;
}
.botoes {
/*Especifica a cor chocolate, como pano de fundo do elemento */
background-color: #D2691E;
/*Especifica como preta a cor da fonte do elemento */
color: #FFFFFF;
/*Define a borda do elemento, com um efeito de alto-relevo menor que o padr�o */
border: 1px outset;
}
.rotulos {
/*Especifica preta a cor da fonte do elemento */
color: #000000;
}
legend{
/*Define a tamanho da fonte para a legenda do FieldSet */
font-size: 12px
}
.inputPesquisa{
padding-left:23px; /* Largura da imagem possui 20px */
padding-top:5px; /* Só pra centralizar o texto verticalmente já que a altura da imagem é de 25px */
height:20px; /* O padding influencia no tamanho do componente (é como se fosse 20px + 5px da altura) */
background-image:url(images/zoom.gif);
background-repeat:no-repeat; /* Para não repetir o background ao longo de topo o componente */
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rich" uri="http://richfaces.ajax4jsf.org/rich"%>
<%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="StyleSheet" type="text/css" href="/jsf/style/estilos.css" media="screen" />
</head>
<body>
<f:view>
<h:form>
<!-- AJAX -->
<rich:messages/>
<a4j:region id="regiaoAjax">
<a4j:status id="sts">
<f:facet name="start">
<h:graphicImage value="/images/ajax-loader.gif" />
</f:facet>
</a4j:status>
</a4j:region>
<a4j:keepAlive beanName="pessoaMB" />
<h:messages/>
<fieldset>
<legend>Pesquisa de Pessoas</legend>
<h:panelGrid columns="2">
/******************************************************************************************************************************
<h:outputLabel for="nomeLabel" value="Digite o nome: " />
<h:inputText id="nomeInput" value="#{pessoaMB.pessoa.nome}" style=" width : 250px;" styleClass="inputPesquisa">
<h:commandButton value="Pesquisar" action="#{pessoaMB.pesquisaByNome}" styleClass="botoes">
</h:commandButton>
</h:inputText>
</h:panelGrid>
/******************************************************************************************************************************
<!-- GRID -->
<legend>Listagem:..</legend>
<rich:dataTable value="#{pessoaMB.pessoas}" var="fisica" rows="10" id="fisicas" width="100%" cellspacing="0" cellpadding="0" border="1">
<h:column>
<f:facet name="header">
<h:outputText value="NOME" />
</f:facet>
<h:outputText value="#{fisica.nome}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="E-MAIL" />
</f:facet>
<h:outputText value="#{fisica.email}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="CPF" />
</f:facet>
<h:outputText value="#{fisica.cpf}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="DATA NASC." />
</f:facet>
<h:outputText value="#{fisica.dataNascimento}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="CELULAR" />
</f:facet>
<h:outputText value="#{fisica.telefoneCelular}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Selecionar"/>
</f:facet>
<a4j:commandLink reRender="panelGridInputs">
<h:outputText value="Selecionar"/>
<f:setPropertyActionListener value="#{fisica}" target="#{pessoaMB.pessoa}"/>
</a4j:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Exclusão"/>
</f:facet>
<a4j:commandButton action="#{pessoaMB.delete}" status="sts" reRender="fisicas" image="/images/delete_1.gif" styleClass="botoesImgs" style="text-align:center" size="5">
<f:setPropertyActionListener value="#{fisica.id}" target="#{pessoaMB.id}" />
</a4j:commandButton>
</h:column>
<f:facet name="footer">
<rich:datascroller />
</f:facet>
<a4j:region id="regiaoAjax">
<a4j:status id="sts">
<f:facet name="start">
<h:graphicImage value="/images/ajax-loader.gif" />
</f:facet>
</a4j:status>
</a4j:region>
</rich:dataTable>
<!-- FORM -->
<h:panelGrid columns="2" id="panelGridInputs">
<h:outputLabel for="nome" value="Nome " />
<h:inputText id="nome" readonly="true" value="#{pessoaMB.pessoa.nome}" style=" width : 254px;"/>
<h:outputLabel for="email" value="E-mail " />
<h:inputText id="email" readonly="true" value="#{pessoaMB.pessoa.email}" style=" width : 249px;"/>
<h:outputLabel for="cpf" value="CPF " />
<h:inputText id="cpf" readonly="true" validatorMessage="CPF inválido!" value="#{pessoaMB.pessoa.cpf}" size="60" style=" width : 106px;"/>
<h:outputLabel for="dataNasc" value="Data Nascimento: " />
<h:inputText id="dataNasc" readonly="true" validatorMessage="Data de nascimento com formato inválido!" value="#{pessoaMB.pessoa.dataNascimento}" size="60" style=" width : 75px;">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:inputText>
<h:outputLabel for="telCel" value="Tel. Celular " />
<h:inputText id="telCel" readonly="true" value="#{pessoaMB.pessoa.telefoneCelular}" />
<a4j:commandButton value="Salvar" action="#{pessoaMB.save}" status="sts" reRender="inputs" styleClass="botoes"/>
<a4j:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>
<rich:modalPanel id="panel" width="500" height="200">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="- AVISO SISTEMA NUTEC - "></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="../images/close.png" styleClass="hidelink" id="hidelink"/>
<rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
</h:panelGroup>
</f:facet>
<h:outputText value="NUTEC"></h:outputText>
<br/>
<h:outputText value="NUTEC DITI"></h:outputText>
</rich:modalPanel>
<h:outputLink value="#" id="link">
Ajuda
<rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
</h:outputLink>
</h:panelGrid>
</fieldset>
</h:form>
</f:view>
</body>
</html>
O que tá acontecendo é que o estilo definidos pelo Richfaces para um input está conflitando com o estilo que foi definido por você.
Se você reparar, o espaçamento (padding-left) está funcionando (23px), mas a imagem não.
Isso acontece pois o Richfaces também define um atributo background-image com esse fundo azul gradiente nos inputs. Para o padding ele não o faz. Ora, mas por que a definição do Richfaces prevalece e não a minha? Aí já entram as regras de especificidade (cascata) do CSS. O Richfaces está sendo mais específico que você e por isso ele ganha.
O Majour escreve muito bem sobre CSS
Veja:
http://maujor.com/tutorial/intrtut.php#fec
http://maujor.com/tutorial/especificidade.php
Existem algumas alternativas, uma delas é, manter as definições do Richfaces não-conflitantes e, as conflitantes, as suas.
Pra isso adicione um !important no atributo que você quer que prevaleça:
...
background-image: url(lupa.png) !important; /* uso do !important */
...Pronto, isso vai resolver o caso do background.
Resultado:
Mas se você quiser suplantar todas as definições CONFLITANTES do Richfaces pra esse componente, essa não é a melhor estratégia. Nesse caso, isto vai funcionar:
...
input.inputPesquisa { /* tag.classe */
...Com o código completo…
<style>
input.inputPesquisa {
font-size: 16px; /* CONFLITO: Só pra mostrar uma outra propriedade conflitante */
padding-left: 23px;
padding-top: 5px;
height: 20px;
background-image: url(lupa.png); /* CONFLITO */
background-repeat: no-repeat;
}
</style>
Resultado…
Akeda Amigão bom dia !
O Resultado final graças a você :
add msn : kafkapvh@hotmail.com
email : web2ajax@gmail.com
Grande Abraço.
jr
Me ajudou também!!! fico massa!