[RESOLVIDO] [Primefaces] Preencher inputText no evento onClick

2 de janeiro de 2013 15 respostas

linuxlive 2 de janeiro de 2013

Pessoal, o que preciso é relativamente simples, mas como estou iniciando agora com primefaces, estou tendo muitas dificuldades.
Já estou pesquisando e testando à vários dias, e nenhum tutorial resolveu meu problema.

Estou utilizando primefaces versão 2.2 RC2. Não posso atualizar, pois toda a aplicação está nesta versão, e não está portável.

Preciso preencher um p:inputText com um texto em especifico.
Estou fazendo um teclado virtual, e preciso capturar os inputs com foco na tela, e setar valores neles.

Montei o codigo abaixo, para tentar setar o texto no input, conforme evento do botão:

&lt;ui:define name="body"&gt;
	&lt;h:form id="form1"&gt;
	&lt;p:panel id="display" header="Teclado" style="margin-top:10px;"&gt;
		<br/>
		&lt;h:inputText id="output" value=""/&gt;
	&lt;/p:panel&gt;
	&lt;p:panel&gt;
		&lt;p:button id="sete" value="7" onclick="preencher(form1)" update=":display"/&gt;
		&lt;p:button value="8"/&gt;
		&lt;p:button value="9"/&gt;
		<br/>
		&lt;p:button value="4"/&gt;
		&lt;p:button value="5"/&gt;
		&lt;p:button value="6"/&gt;
		<br/>
		&lt;p:button value="1"/&gt;
		&lt;p:button value="2"/&gt;
		&lt;p:button value="3"/&gt;
		<br/>
		&lt;p:button value="Limpa"/&gt;
		&lt;p:button value="0"/&gt;
		&lt;p:button value=","/&gt;
		&lt;/p:panel&gt;
&lt;/h:form&gt;
	&lt;/ui:define&gt;
&lt;script type="text/javascript" language="javascript"&gt;
function preencher(form1) {
	document.form1.output.value="7"
}
&lt;/script&gt;

Tentei utilizar java script para preencher, mas sem sucesso.

E o próximo passo, seria capturar o input com foco na tela, e não consegui encontrar nada para capturar o foco de input do primefaces e setar valores no mesmo.

Agradeço se alguém tiver exemplos, ou idéias de como posso fazer funcionar.

15 Respostas

Valeio_Bezerra 2 de jan. de 2013

O primefaces, tem um componente de teclado virtual já, dê uma olhada no showcase.

linuxlive 2 de jan. de 2013

Já tentei utilizar o teclado do primefaces, mas o mesmo é muito engessado. Ele não tem a tecla com a função de Enter por exemplo.
Já baixei o keyboard.js para tentar manipular e substituir o do jar do prime, mas não deu certo por problemas de compatibilidade.

Eu quero montar um teclado fixo na tela, pois em testes com um outro, do próprio JQuery, que é chamado sempre que vai editar o input, como no próprio prime, o controle sobre ele é bem complexo, pois tenho que tratar as atualizações da pagina, não consegui tratar o foco com componentes do prime e do JSF, e por ai vai.

Algo que esqueci de mencionar, é que meu sistema irá rodar em monitores touch screen, e a maioria dos sistemas para touch, já possui o teclado na própria tela justamente para evitar problemas de foco, tratamentos, etc.

Valeio_Bezerra 2 de jan. de 2013

posta o seu bean.

linuxlive 2 de jan. de 2013

Neste teste que montei, não tenho nenhum bean.
Acredito que com javascript, não seja necessário, já que vou inserir no input um valor fixo.

Mesmo assim, já efetuei testes com bean, mas não deu certo. Não tenho mais ele aqui, mas se tiver sugestão de testar de algum modo diferente, posso montar.

Valeio_Bezerra 2 de jan. de 2013

Por ManageBean eu sei, acredito que dê certo.

linuxlive 2 de jan. de 2013

Com seto um valor no bean ao clicar no botão por exemplo?

Acredito que seja isto que você quis dizer, setar no bean, e depois preencher o input com o bean tambem.
Tentei fazer assim, mas nao acertei na hora de setar esse valor. Como faria isso ?

Valeio_Bezerra 2 de jan. de 2013

Posta a pagina e o bean como vc faria/fez e eu mostro como é.

linuxlive 2 de jan. de 2013

Eu faria assim:

Pagina (Não estou sabendo setar no onClick para mostrar no input):

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"&gt;
	
	
&lt;ui:composition template="/templates/template.xhtml"&gt;

	&lt;ui:define name="body"&gt;
	&lt;h:form id="form1"&gt;
	&lt;p:panel id="display" header="Teclado" style="margin-top:10px;"&gt;
		<br/>
		&lt;h:inputText id="campo" value="#{teclado.campo}"/&gt;
	&lt;/p:panel&gt;
	&lt;p:panel&gt;
		&lt;p:button id="sete" value="7" onclick="COMO SETAR?" update="display"/&gt;
		&lt;p:button value="8"/&gt;
		&lt;p:button value="9"/&gt;
		<br/>
		&lt;p:button value="4"/&gt;
		&lt;p:button value="5"/&gt;
		&lt;p:button value="6"/&gt;
		<br/>
		&lt;p:button value="1"/&gt;
		&lt;p:button value="2"/&gt;
		&lt;p:button value="3"/&gt;
		<br/>
		&lt;p:button value="Limpa"/&gt;
		&lt;p:button value="0"/&gt;
		&lt;p:button value=","/&gt;
		&lt;/p:panel&gt;
	&lt;/h:form&gt;
	&lt;/ui:define&gt;

&lt;/ui:composition&gt;

&lt;/html&gt;

Bean:

package br.com.socin.econect.restaurante.web.beans;

import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "teclado")
@SessionScoped
public class Teclado {

	@EJB
	private String campo;

	public String getCampo() {
		return campo;
	}

	public void setCampo(String campo) {
		this.campo = campo;
	}
	
}

Valeio_Bezerra 2 de jan. de 2013

Seu bean:

package br.com.socin.econect.restaurante.web.beans;  
  
import javax.ejb.EJB;  
import javax.faces.bean.ManagedBean;  
import javax.faces.bean.SessionScoped;  
  
@ManagedBean(name = "teclado")  
@SessionScoped  
public class Teclado {  
  
    @EJB  
    private String campo;  
  
    public String getCampo() {  
        return campo;  
    }  
  
    public void setCampo(String campo) {  
        this.campo = campo;  
    }  

    public void preenchar7() {
       this.campo = "7";
    }
      
}

Sua página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:ui="http://java.sun.com/jsf/facelets"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"  
    xmlns:p="http://primefaces.prime.com.tr/ui">  
      
      
<ui:composition template="/templates/template.xhtml">  
  
    <ui:define name="body">  
    <h:form id="form1">  
    <p:panel id="display" header="Teclado" style="margin-top:10px;">  
        <br/>  
        <h:inputText id="campo" value="#{teclado.campo}"/>  
    </p:panel>  
    <p:panel>  
        <p:button id="sete" value="7" onclick="#{teclado.preencher7()}" update="display"/>  
        <p:button value="8"/>  
        <p:button value="9"/>  
        <br/>  
        <p:button value="4"/>  
        <p:button value="5"/>  
        <p:button value="6"/>  
        <br/>  
        <p:button value="1"/>  
        <p:button value="2"/>  
        <p:button value="3"/>  
        <br/>  
        <p:button value="Limpa"/>  
        <p:button value="0"/>  
        <p:button value=","/>  
        </p:panel>  
    </h:form>  
    </ui:define>  
  
</ui:composition>  
  
</html>

caso não funcione troque o por

linuxlive 2 de jan. de 2013

Eu tinha feito algo parecido pra setar anteriormente e não tinha dados certo.

Fiz extamente isso que voce indicou e mesmo assim, não atualiza a tela com o valor informado, no caso o 7.
Ele executa alguma ação, pois o browser “pisca”, mas não preenche o inputText.

Deve ter algum detalhe que ainda está faltando.

Se não for pedir muito, você conseguiria executar esse código no seu ambiente? Pois é o modo correto que aprendi, mas acho que deve ter algum problema no atualizar do panel, pois para setar o valor parece que está correto.

Muito obrigado pela sua ajuda.

AmauriSpPoa 2 de jan. de 2013

package br.com.socin.econect.restaurante.web.beans;    
    
import javax.faces.bean.ManagedBean;    
import javax.faces.bean.SessionScoped;    
    
@ManagedBean(name = &quot;teclado&quot;)    
@SessionScoped    
public class Teclado {    
    
    
    private String campo;    
    
    public String getCampo() {    
        return campo;    
    }    
    
    public void setCampo(String campo) {    
        this.campo = campo;    
    }    
  
    public void preencher7() {  
       this.campo += &quot;7&quot;;  
    }  
        
}

&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"&gt;
    &lt;h:head&gt;
        &lt;title&gt;Facelet Title&lt;/title&gt;
    &lt;/h:head&gt;
    &lt;h:body&gt;
        &lt;h:form id="form1"&gt;    
            &lt;p:panel id="display" header="Teclado" style="margin-top:10px;"&gt;    
                <br/>    
                &lt;h:inputText id="campo" value="#{teclado.campo}"/&gt;    
            &lt;/p:panel&gt;    
            &lt;p:panel&gt;    
                &lt;p:commandButton id="sete" value="7" action="#{teclado.preencher7}" update="form1:display"/&gt;    
                &lt;p:button value="8"/&gt;    
                &lt;p:button value="9"/&gt;    
                <br/>    
                &lt;p:button value="4"/&gt;    
                &lt;p:button value="5"/&gt;    
                &lt;p:button value="6"/&gt;    
                <br/>    
                &lt;p:button value="1"/&gt;    
                &lt;p:button value="2"/&gt;    
                &lt;p:button value="3"/&gt;    
                <br/>    
                &lt;p:button value="Limpa"/&gt;    
                &lt;p:button value="0"/&gt;    
                &lt;p:button value=","/&gt;    
            &lt;/p:panel&gt;    
        &lt;/h:form&gt;  
    &lt;/h:body&gt;
&lt;/html&gt;

linuxlive 2 de jan. de 2013

AmauriSpPoa, esse código que você postou funcionou !

Eu estava tentando executar de dentro da minha aplicação, onde tenho o template:

&lt;ui:composition template="/templates/template.xhtml"&gt;

Depois o corpo:

&lt;ui:define name="body"&gt;

Se eu utilizar o seu codigo, colocando meu template, com esse body, ele fica somente escrito “Corpo Padrão” na tela.

Sabe me dizer se tem alguma restrição ou melhor maneira de utilizaçao ?

Meu Head e body do template:

&lt;h:head &gt;
&lt;title&gt;&lt;ui:insert name="pageTitle"&gt;Titulo Padrão&lt;/ui:insert&gt;&lt;/title&gt;
        &lt;link type="text/css" rel="stylesheet"	href="#{request.contextPath}/resources/css/default.css" /&gt;
        &lt;link type="text/css" rel="stylesheet"	href="#{request.contextPath}/resources/css/padrao.css" /&gt;
		&lt;link type="text/css" rel="stylesheet"	href="#{request.contextPath}/resources/css/skin.css" /&gt;
		&lt;link type="text/css" rel="stylesheet"	href="#{request.contextPath}/resources/css/stylesheet.css" /&gt;
		&lt;link type="text/css" rel="stylesheet"	href="#{request.contextPath}/resources/js/jquery-1.6.js" /&gt;
&lt;/h:head&gt;

&lt;h:body &gt;
    	&lt;f:view contentType="text/html"&gt;  
		    &lt;div id="top" class="top" &gt;
		    	&lt;h:form id="menuForm"&gt;
		    		&lt;p:hotkey bind="F5" action="/pages/pedido/pedido.jsf" /&gt;
		    		&lt;h:graphicImage url="/resources/img/logo.png" styleClass="center_image" alt="Econect"/&gt;
		    		&lt;p:menubar &gt;
		    			&lt;p:submenu label="Cadastros" rendered="#{controleUsuarioBean.isInRole('RESTAURANTEWEB_CADASTRO')}"&gt;

O restante é a montagem dos Menus em volta.

linuxlive 2 de jan. de 2013

Se eu utilizar o meu template com o body que funciona na minha aplicação, ele monta o teclado certinho, mas não preencher o inputText, simplesmenta “pisca” a tela.

AmauriSpPoa 2 de jan. de 2013

De um modo geral deveria funcionar desde que você substituísse o conteúdo a partir do form1 pelo conteúdo que eu postei, mas analisando seu template, vi que tem um formulário sendo aberto nele, se você não fecha antes do <ui:define name="body"> vai ficar com um form dentro do outro, ai não funciona.

linuxlive 2 de jan. de 2013

Muito obrigado mesmo pela ajuda, agora funcionou 100%.

Para quem tiver o mesmo problema, ao invés de criar um novo form, trabalhei com o do template, sendo assim, para atualizar a tela, coloquei update=“bodyForm:display”, e da minha tela retirei o form1.

Criado 2 de janeiro de 2013

Ultima resposta 2 de jan. de 2013

Respostas 15

Participantes 3

15 Respostas

Topicos relacionados