Imagem dentro de um inputText [RESOLVIDO]?

This message was edited 1 time. Last update was at 18/02/2010 14:03:45

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

Entusiasta Java Membro desde: 03/12/2009 10:52:21 Mensagens: 18 Offline

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 ?

Entusiasta Java Membro desde: 03/12/2009 10:52:21 Mensagens: 18 Offline

Fiz um exemplo aqui rapidinho:

Mas é isso mesmo.

Classe CSS:

No HTML:

This message was edited 3 times. Last update was at 21/01/2010 20:47:24

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

Entusiasta Java Membro desde: 03/12/2009 10:52:21 Mensagens: 18 Offline

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>

<h:form>
                      

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

			 <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>

<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>

Entusiasta Java Membro desde: 03/12/2009 10:52:21 Mensagens: 18 Offline

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:

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:

Com o código completo...

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

Thread.start() Membro desde: 21/08/2008 22:24:13 Mensagens: 41 Offline

Me ajudou também!!! fico massa!

Notícias, artigos e o maior fórum brasileiro sobre Java