TOC

PrimeFaces - Filigrane sur la saisie de texte

Dans PrimeFaces, vous pouvez utiliser <p: watermark> pour afficher l’effet de filigrane sur le champ de saisie. Ce composant en filigrane utilise l’attribut placeholder de HTML5 dans les navigateurs pris en charge tels que Safari, Chrome et Firefox, et fait appel à la solution JavaScript pour les navigateurs non pris en charge, tels que IE.

Afficher le texte en filigrane dans le champ de saisie 

  <p:inputText id="username" required="true"
    label="username" size="40" value="#{userBean.username}"/>
  <p:watermark for="username" value="Username ** "/>

Dans ce didacticiel, nous allons vous montrer comment utiliser le composant de filigrane de PrimeFaces pour créer un effet de filigrane et styliser la couleur du texte.

Les outils utilisés :

  1. PrimeFaces 3.3

  2. JSF 2.2.11

  3. Eclipse 4.2

  4. Maven 3

  5. Tomcat 7

1. Exemple de filigrane

Ajoutez le texte « nom d’utilisateur ** » en haut du texte saisi (effet de filigrane).

index.xhtml 

<!DOCTYPE html>
<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">

<h:head>

</h:head>
<h:body>
    <f:facet name="last">
        <h:outputStylesheet library="mytheme" name="css/style.css"/>
    </f:facet>

    <h1>PrimeFaces watermark example</h1>

    <div style="width: 500px">
     <h:form>
        <p:inputText id="username" required="true" label="username" size="40"
        requiredMessage="Please enter your username."
        value="#{userBean.username}">
            <f:validateLength minimum="3" maximum="20"/>
        </p:inputText>
        <p:watermark for="username" value="Username ** "/>

        <p:message for="username"/>

        <p:commandButton value="test" style="margin:20px"
        action="#{userBean.register}" ajax="false"/>

      </h:form>
    </div>

</h:body>
</html>

UserBean.java - Ne rien faire 

package com.mkyong;

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

@ManagedBean(name = "userBean")
@SessionScoped
public class UserBean {

    String username;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String register(){
        return "thanks";
    }

}

2. Démo

http://localhost : 8080/primefaces/index.jsf

Exemple de filigrane de primefaces

Validation échouée.

Erreur exemple de filigrane de primefaces

3. Changer la couleur du texte

Une demande courante consiste à modifier le texte de couleur grise par défaut. Pour le styler, vous aurez besoin des propriétés CSS des espaces réservés du préfixe du vendeur:

…​./ chorme and safari /::-webkit-input-placeholder { color: blue !important; font-weight: normal !important; } / firefox /:-moz-placeholder { color: blue !important; font-weight: normal !important; } / IE /.ui-watermark { color: blue !important; font-weight: normal !important; } 

Pour IE, non pris en charge pour l'espace réservé HTML5, PrimeFaces ajoutera un `.ui-watermark` supplémentaire.

Voir démo, la couleur du texte du filigrane est changée en «bleu».

image://wp-content/uploads/2012/10/primefaces-watermark-style.png[Couleur du texte du filigrane des primefaces, title = "primefaces-watermark-style", width = 592, height = 362]

__P.S testé sur IE9, Chrome et Safari.__

===  Télécharger le code source

Téléchargez-le - lien://wp-content/uploads/2012/10/primefaces-watermark-example.zip[primefaces-watermark-example.zip](11 KB)

===  Références

. http://www.primefaces.org/showcase/ui/watermark.jsf[PrimeFaces

vitrine des composants en filigrane]. http://forum.primefaces.org/viewtopic.php?f=3&t=17420[Comment changer

couleur du texte de <p: ​​filigrane>]. http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-cssewise

Couleur de l'espace réservé HTML5 d'une entrée avec CSS]. http://www.splashnology.com/article/html5-placeholder-stylization-with-the-help-of-css/[HTML5

Stylisation des espaces réservés à l'aide de CSS]. http://css-tricks.com/snippets/css/style-placeholder-text/[Style

Texte fictif]

lien://tag/primefaces/[primefaces]lien://tag/filigrane/[filigrane]
Related