7
respostas

placeholder em um h:inputText

Referente ao curso Java e JSF 2 - II: Componentes ricos com Primefaces

por Rafael Augusto Pacheco Baião Reis
| 269.9k xp | 385 posts

Pessoal, eu não encontrei nada sobre isso no curso e nem no show case do PrimeFaces.

Como eu posso colocar um placeholder em um h:inputText ?

<h:inputText value="#{noticiaMB.noticia.conteudo}"
                                                class="form-control" id="conteudoNoticia" />

O meu formulário inteiro e o seguinte:

<h:form class="form-label" id="cadastroNoticia">

                                    <div class="form-group row">
                                        <label for="thread" class="col-md-12">Titulo da Noticia:</label>
                                        <div class="col-md-10">
                                            <h:inputText value="#{noticiaMB.noticia.tituloNoticia}"
                                                class="form-control" id="tituloNoticia" />
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="thread" class="col-md-12">Mensagem:</label>
                                        <div class="col-md-10">
                                            <h:inputText value="#{noticiaMB.noticia.conteudo}"
                                                class="form-control" id="conteudoNoticia" />
                                        </div>
                                    </div>

                                    <div class="text-center">
                                        <h:commandButton action="#{noticiaMB.cadastrar()}"
                                            value="Cadastrar"
                                            class="btn btn-primary btn-lg btn-rounded btn-shadow" />
                                    </div>
                                </h:form>
7 respostas
por Nico Steppat
| 966.5k xp | 1744 posts
Instrutor Instrutor e Desenvolvedor da Alura

Oi Rafael,

tente usar o componente f:passThroughAttribute, por exemplo:

<h:inputText value="#{noticiaMB.noticia.conteudo}" class="form-control" id="conteudoNoticia" >
      <f:passThroughAttribute name="placeholder" value="seu texto" />
</h:inputText>

abs

por Rafael Augusto Pacheco Baião Reis
| 269.9k xp | 385 posts

Recebi a seguinte exception:

HTTP Status 500 - /adicionarNoticia.xhtml @57,70 <f:passThroughAttribute> Tag Library supports namespace: http://java.sun.com/jsf/core, but no tag was defined for name: passThroughAttribute

Minha tag html esta assim:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
por Rafael Augusto Pacheco Baião Reis
| 269.9k xp | 385 posts

Adicione a seguinte TAG:

xmlns:a="http://xmlns.jcp.org/jsf/passthrough"

mas não tive sucesso.

por Nico Steppat
| 966.5k xp | 1744 posts
Instrutor Instrutor e Desenvolvedor da Alura

Oi Rafael, vc está ainda usando o namespace antigo do JSF.

Execute os passos nesse exercício para atualizar o JSF :

https://cursos.alura.com.br/course/jsf/section/10/exercise/2

abs

por Rafael Augusto Pacheco Baião Reis
| 269.9k xp | 385 posts

Opa, dei uma atualizada.

Recebi a seguinte exceção:

HTTP Status 500 - Cannot find component for expression "keyword" referenced from "watermark".

Meu form esta assim:

<h:form class="form-label" id="cadastroNoticia">

                            <div class="form-group row">
                                <label for="thread" class="col-md-12">Titulo da Noticia:</label>
                                <div class="col-md-10">
                                    <h:inputText value="#{noticiaMB.noticia.conteudo}"
                                        class="form-control" id="conteudoNoticia">
                                         <p:watermark for="keyword" value="Search with a keyword" id="watermark" />
                                    </h:inputText>
                                </div>
                            </div>


                            <p:editor id="editor" widgetVar="editorWidget"
                                value="#{editorView.text}" width="600" />

                            <h:panelGrid columns="2" style="margin-top: 10px">
                                <p:commandButton value="Submit" update="display"
                                    oncomplete="PF('dlg').show()" icon="ui-icon-disk" />

                                <p:commandButton value="Clear" type="button"
                                    onclick="PF('editorWidget').clear();" icon="ui-icon-close" />
                            </h:panelGrid>

                            <p:dialog header="Content" widgetVar="dlg" showEffect="fade"
                                hideEffect="fade">
                                <h:outputText id="display" value="#{editorView.text}"
                                    escape="false" />
                            </p:dialog>


                        </h:form>
por Rafael Augusto Pacheco Baião Reis
| 269.9k xp | 385 posts

Encontrei esse exemplo:

<h:form>
    <p:messages id="messages" showDetail="true"/>

    <h:panelGrid columns="3" cellpadding="5" style="margin-bottom:10px">
        <h:outputLabel value="Search: "/>
        <p:inputText id="keyword" value="#{watermarkView.keyword}" required="true" label="Keyword"/>
        <p:watermark for="keyword" value="Search with a keyword" id="watermark" />
    </h:panelGrid>

    <p:commandButton id="regular" actionListener="#{watermarkView.search}" value="Regular" ajax="false" /> 
    <p:commandButton id="ajax" actionListener="#{watermarkView.search}" value="Ajax"
                        onclick="PrimeFaces.cleanWatermarks();" oncomplete="PrimeFaces.showWatermarks();" update="messages" />
</h:form>

Pode me ajudar a daptar para esse input?

por Nico Steppat
| 966.5k xp | 1744 posts
Instrutor Instrutor e Desenvolvedor da Alura

Oi Rafael,

Tente:

<h:inputText value="#{noticiaMB.noticia.conteudo}" class="form-control" id="conteudoNoticia" />
 <p:watermark for="conteudoNoticia" value="Search with a keyword" id="watermark" />

Usei o componente p:watermark fora do input e no atributo for coloquei a id do inputText.

abs

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software