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:
<ui:define name="body">
<h:form id="form1">
<p:panel id="display" header="Teclado" style="margin-top:10px;">
<br/>
<h:inputText id="output" value=""/>
</p:panel>
<p:panel>
<p:button id="sete" value="7" onclick="preencher(form1)" 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>
<script type="text/javascript" language="javascript">
function preencher(form1) {
document.form1.output.value="7"
}
</script>
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.
O primefaces, tem um componente de teclado virtual já, dê uma olhada no showcase.
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.
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.
Por ManageBean eu sei, acredito que dê certo.
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 ?
Posta a pagina e o bean como vc faria/fez e eu mostro como é.
Eu faria assim:
Pagina (Não estou sabendo setar no onClick para mostrar no input):
<!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="COMO SETAR?" 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>
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;
}
}
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:
[code]
<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>
[/code]
caso não funcione troque o <p:button id=“sete” value=“7” onclick="#{teclado.preencher7()}" update=“display”/> por <p:commandButton id=“sete” value=“7” actionListener="#{teclado.preencher7()}" update=“display”/>
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.
[code]package br.com.socin.econect.restaurante.web.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "teclado")
@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 += "7";
}
} [/code]
[code]<?xml version=‘1.0’ encoding=‘UTF-8’ ?>
<!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:h=“http://java.sun.com/jsf/html”
xmlns:p=“http://primefaces.org/ui”>
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form id=“form1”>
<p:panel id=“display” header=“Teclado” style=“margin-top:10px;”>
<h:inputText id=“campo” value="#{teclado.campo}"/>
</p:panel>
<p:panel>
<p:commandButton id=“sete” value=“7” action="#{teclado.preencher7}" update=“form1:display”/>
<p:button value=“8”/>
<p:button value=“9”/>
<p:button value=“4”/>
<p:button value=“5”/>
<p:button value=“6”/>
<p:button value=“1”/>
<p:button value=“2”/>
<p:button value=“3”/>
<p:button value=“Limpa”/>
<p:button value=“0”/>
<p:button value=","/>
</p:panel>
</h:form>
</h:body>
</html>
[/code]
AmauriSpPoa, esse código que você postou funcionou !
Eu estava tentando executar de dentro da minha aplicação, onde tenho o template:
<ui:composition template="/templates/template.xhtml">
Depois o corpo:
<ui:define name="body">
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:
<h:head >
<title><ui:insert name="pageTitle">Titulo Padrão</ui:insert></title>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/default.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/padrao.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/skin.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/stylesheet.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/js/jquery-1.6.js" />
</h:head>
<h:body >
<f:view contentType="text/html">
<div id="top" class="top" >
<h:form id="menuForm">
<p:hotkey bind="F5" action="/pages/pedido/pedido.jsf" />
<h:graphicImage url="/resources/img/logo.png" styleClass="center_image" alt="Econect"/>
<p:menubar >
<p:submenu label="Cadastros" rendered="#{controleUsuarioBean.isInRole('RESTAURANTEWEB_CADASTRO')}">
O restante é a montagem dos Menus em volta.
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.
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.
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.