0

このページでは、チェックボックスをクリックしてユーザーがパスワードを表示できるようにします。実際には、2つの入力（password、conPassword）を非表示にし、別の入力（passwordV）を表示する必要があります。これら3つの入力はすべて同じ値であり、ユーザーがこれら2つの状態を切り替えるときに値を維持する必要があります:( 2つのシークレットフィールドが表示されているか、1つのプレーンテキストフィールドがある）

ここにページとBeanコードを配置します。

JSFページ：

<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./templates/main_template.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">

  <ui:define name="subTitle">
    :: #{lbls.newEntry}   </ui:define>

  <ui:define name="content">
    <p:panel rendered="#{current.loggedIn}" header="#{lbls.newEntry}" >
      <h:form id="frmEntry">
        <h:panelGrid columns="3">

          <h:panelGroup>
            <h:outputLabel for="title" value="#{lbls.title}:"/>
            <p:focus for="title"/>
          </h:panelGroup>
          <p:inputText id="title" value="#{entry.passwordEntry.title}" maxlength="100" label="#{lbls.title}" required="true"/>
          <p:message for="title"/>

          <h:outputLabel for="description" value="#{lbls.description}:"/>
          <p:inputTextarea id="description" value="#{entry.passwordEntry.description}" maxlength="500" rows="3" cols="40" label="#{lbls.description}"/>
          <p:message for="description"/>

          <p:spacer height="10"/>
          <p:spacer height="10"/>
          <p:spacer height="10"/>

          <h:outputLabel for="username" value="#{lbls.username}:"/>
          <p:inputText id="username" value="#{entry.passwordEntry.username}" maxlength="100" label="#{lbls.username}"/>
          <p:message for="username"/>          

          <h:outputLabel for="password" id="lblPassword" value="#{lbls.password}:"  styleClass="#{entry.showPasswords ? 'none' : ''}" />  
          <p:password id="password" feedback="true" value="#{entry.passwordEntry.password}" match="conPassword" maxlength="100" 
                      label="#{lbls.password}" promptLabel="#{lbls.strengthPromp}" weakLabel="#{lbls.weakPassword}"  
                      goodLabel="#{lbls.goodPassword}" strongLabel="#{lbls.strongPassword}" styleClass="#{entry.showPasswords ? 'none' : ''}"
                      />
          <p:message id="msgPassword" for="password" class="#{entry.showPasswords ? 'none' : ''}"/>

          <h:outputLabel id="lblConPassword" for="conPassword" value="#{lbls.conPassword}:"
                         styleClass="#{entry.showPasswords ? 'none' : ''}"/>  
          <p:password id="conPassword" value="#{entry.passwordEntry.password}" label="#{lbls.conPassword}" maxlength="100"
                      styleClass="#{entry.showPasswords ? 'none' : ''}"/>
          <p:message id="msgConPassword" for="conPassword" class="display: #{!entry.showPasswords ? 'none' : ''}"/>

          <h:outputLabel id="lblPasswordV" for="passwordV" value="#{lbls.password}:" 
                         styleClass="#{!entry.showPasswords ? 'none' : ''}"/>  
          <p:inputText id="passwordV" value="#{entry.passwordEntry.password}"  maxlength="100" 
                       label="#{lbls.password}" 
                       styleClass="#{!entry.showPasswords ? 'none' : ''}"/>
          <p:message id="msgPasswordV" for="passwordV" 
                     class="#{!entry.showPasswords ? 'none' : ''}"/>

          <h:outputLabel for="showPasswords" value="#{lbls.showPasswords}:"/>
          <p:selectBooleanCheckbox id="showPasswords" label="#{lbls.showPasswords}" value="#{entry.showPasswords}">  
            <p:ajax process="password passwordV conPassword" update="password passwordV conPassword lblPassword lblPasswordV lblConPassword msgPassword msgConPassword msgPasswordV"/>
          </p:selectBooleanCheckbox>
          <h:outputText/>

          <p:spacer height="10"/>
          <p:spacer height="10"/>
          <p:spacer height="10"/>

          <h:outputLabel for="url" value="#{lbls.url}:"/>
          <p:inputText id="url" value="#{entry.passwordEntry.url}" maxlength="255" label="#{lbls.url}"/>
          <p:message for="url"/>

          <h:outputLabel for="ip" value="#{lbls.ip}:"/>
          <p:inputText id="ip" value="#{entry.passwordEntry.ip}" maxlength="255" label="#{lbls.ip}"/>
          <p:message for="ip"/>

          <p:spacer height="10"/>
          <p:spacer height="10"/>
          <p:spacer height="10"/>

          <h:outputLabel for="tags" value="#{lbls.tags}:"/>
          <p:autoComplete id="tags" value="#{entry.selectedTags}" 
                          completeMethod="#{entry.selectTag}" converter="PasswordEntry" multiple="true"
                          var="tag" itemLabel="#{tag.title}" itemValue="#{tag}" />  
          <p:message for="tags"/>

          <p:spacer height="10"/>
          <p:spacer height="10"/>
          <p:spacer height="10"/>

          <h:outputText/>
          <h:panelGroup layout="block" styleClass="right-align">
            <p:commandButton value="#{lbls.save}" actionListener="#{entry.save(event)}" 
                             update=":growl messages"/>
          </h:panelGroup>


          <f:facet name="footer">
            <p:messages id="messages"/>
          </f:facet>
        </h:panelGrid>
      </h:form>
    </p:panel>

    <ui:include src="/templates/not_logged_in.xhtml" rendered="!#{current.loggedIn}"/>   </ui:define>

</ui:composition>

と豆：

package package;


@ManagedBean(name = "entry")
@ViewScoped
public class PasswordEntryBean implements Serializable {

  //<editor-fold defaultstate="collapsed" desc="FIELDS">   
  private static final Logger logger = LogUtil.getLogger(PasswordEntryBean.class);
  private PasswordEntry passwordEntry;
  @ManagedProperty(value = "#{current}")
  private CurrentSessionBean current;
  private Database database;
  private List<PasswordTag> selectedTags = new ArrayList<PasswordTag>();
  private Set<PasswordTag> tags;
  private boolean showPasswords;
  //</editor-fold>  

  //<editor-fold defaultstate="collapsed" desc="CONSTRUCTORS">    
  public PasswordEntryBean() {
    passwordEntry = new PasswordEntry();
  }

  @PostConstruct
  public void init() {
  }
  //</editor-fold>

  //<editor-fold defaultstate="collapsed" desc="PROPERTIES">    
  public PasswordEntry getPasswordEntry() {
    return passwordEntry;
  }

  public Database getDatabase() {
    return database;
  }

  public boolean getShowPasswords() {
    return showPasswords;
  }

  public void setShowPasswords(boolean showPasswords) {
    this.showPasswords = showPasswords;
  }

  public void setDatabase(Database database) {
    this.database = database;
  }

  public Set<PasswordTag> getTags() {
    return tags;
  }

  public void setTags(Set<PasswordTag> tags) {
    this.tags = tags;
  }

  public List<PasswordTag> getSelectedTags() {
    return selectedTags;
  }

  public void setSelectedTags(List<PasswordTag> selectedTags) {
    this.selectedTags = selectedTags;
  }

  public void setPasswordEntry(PasswordEntry passwordEntry) {
    this.passwordEntry = passwordEntry;
  }

  public CurrentSessionBean getCurrent() {
    return current;
  }

  public void setCurrent(CurrentSessionBean current) {
    this.current = current;
  }
  //</editor-fold>
}

更新されたコード

私の問題を理解しやすくするために、より単純なコードを記述しました。

JSF：

<?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"
      xmlns:f="http://java.sun.com/jsf/core">
  <h:head>
    <title>Facelet Title</title>
    <style type="text/css">
      .none {
        display: none;
      }
    </style>
  </h:head>
  <h:body>
    <h1>Register</h1>
    <h:form id="frmRegistration">
      <h:panelGrid columns="3">
        <h:outputLabel value="Username:" for="username"/>
        <p:inputText label="username" id="username" value="#{testBean.username}" required="true"/>
        <p:message for="username"/>

        <h:outputLabel value="Password:" id="lblPassword" for="password" styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
        <p:password label="password" id="password" value="#{testBean.password}" 
                        styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
        <p:message for="password" id="msgPassword" class="#{!testBean.visiblePassword ? '' : 'none'}"/>

        <h:outputLabel value="Confirm Password:" id="lblCpassword" for="cpassword" styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
        <p:password label="confirm password" id="cpassword" value="#{testBean.password}" 
                        styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
        <p:message for="cpassword" id="msgCpassword" class="#{!testBean.visiblePassword ? '' : 'none'}"/>

        <h:outputLabel value="Password:" id="lblVpassword" for="vpassword" styleClass="#{testBean.visiblePassword ? '' : 'none'}"/>
        <p:inputText label="password" id="vpassword" value="#{testBean.password}" 
                        styleClass="#{testBean.visiblePassword ? '' : 'none'}"/>
        <p:message for="vpassword" id="msgVpassword" class="#{testBean.visiblePassword ? '' : 'none'}"/>

        <h:outputLabel value="Show password"/>
        <p:selectBooleanButton value="#{testBean.visiblePassword}" 
                               onLabel="Yes" offLabel="No">
          <p:ajax update="messages password cpassword vpassword lblPassword lblCpassword lblVpassword msgPassword msgCpassword msgVpassword"
                   process="messages password cpassword vpassword" listener="#{testBean.addMessage}" />
        </p:selectBooleanButton>


        <f:facet name="footer">
          <p:commandButton actionListener="#{testBean.save(event)}" value="Save" update="messages"/>
          <p:messages id="messages"/>
        </f:facet>
      </h:panelGrid>
    </h:form>
  </h:body>
</html>

AND BEAN：

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

@ManagedBean
@ViewScoped
public class TestBean {

  private String username;
  private String password;
  private boolean visiblePassword;

  public void addMessage() {
    String summary = visiblePassword ? "Checked" : "Unchecked";

    FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(summary));
  }

  public TestBean() {
  }

  public void save(ActionEvent event) {
  }

  public String getUsername() {
    return username;
  }

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

  public String getPassword() {
    return password;
  }

  public void setPassword(String password) {
    this.password = password;
  }

  public boolean isVisiblePassword() {
    return visiblePassword;
  }

  public void setVisiblePassword(boolean visiblePassword) {
    this.visiblePassword = visiblePassword;
  }
}

このコードは、タグにプロセス属性を追加しない場合、2つのフィールドを非表示にし、3番目のフィールドを正しく表示することができます。<p:ajaxただし、ユーザーが2つのモード（2つのシークレットフィールド/ 1つのプレーンテキストフィールド）を切り替えたときにこれらのフィールドの値を保持するには、この属性が必要です。

しかし、失敗します！

================================================== ========

2回目の更新

再表示を使用して空の値の問題を解決しましたが、updateとprocessを設定しない限り、入力が非表示/表示され@formません。これは私の場合には適していません。

<?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"
      xmlns:f="http://java.sun.com/jsf/core">
  <h:head>
    <title>Facelet Title</title>
    <style type="text/css">
      .none {
        display: none;
      }
    </style>
  </h:head>
  <h:body>
    <h1>Register</h1>
    <h:form id="frmRegistration">
      <h:panelGrid columns="3">
        <h:outputLabel value="Username:" for="username"/>
        <p:inputText label="username" id="username" value="#{testBean.username}" required="true"/>
        <p:message for="username"/>

        <h:outputLabel value="Password:" id="lblPassword" for="password" rendered="#{!testBean.visiblePassword}"/>
        <p:password redisplay="true" label="password" id="password" value="#{testBean.password}" 
                        rendered="#{!testBean.visiblePassword}"/>
        <p:message for="password" id="msgPassword" rendered="#{!testBean.visiblePassword}"/>

        <h:outputLabel value="Confirm Password:" id="lblCpassword" for="cpassword" rendered="#{!testBean.visiblePassword}"/>
        <p:password redisplay="true" label="confirm password" id="cpassword" value="#{testBean.password}" 
                        rendered="#{!testBean.visiblePassword}"/>
        <p:message for="cpassword" id="msgCpassword" rendered="#{!testBean.visiblePassword}"/>

        <h:outputLabel value="Password:" id="lblVpassword" for="vpassword" rendered="#{testBean.visiblePassword}"/>
        <p:inputText label="password" id="vpassword" value="#{testBean.password}" 
                        rendered="#{testBean.visiblePassword}"/>
        <p:message for="vpassword" id="msgVpassword" rendered="#{testBean.visiblePassword}"/>

        <h:outputLabel value="Show password"/>
        <p:selectBooleanButton value="#{testBean.visiblePassword}" 
                               onLabel="Yes" offLabel="No">
          <p:ajax update="messages password cpassword vpassword lblPassword lblCpassword lblVpassword msgPassword msgCpassword msgVpassword"
                   process="password cpassword vpassword" listener="#{testBean.addMessage}" />
        </p:selectBooleanButton>


        <f:facet name="footer">
          <p:commandButton actionListener="#{testBean.save(event)}" value="Save" update="messages"/>
          <p:messages id="messages"/>
        </f:facet>
      </h:panelGrid>
    </h:form>
  </h:body>
</html>
4

2 に答える 2

1

あなたの主な間違いは、サーバー側で JSF を使用するのではなく、クライアント側で CSS を使用して入力フィールドの可視性を切り替えていることです。したがって、JSF は基本的に、どちらが表示されているか非表示になっているかを認識しません。わかっているのは、両方のフィールドが表示されているということだけです。したがって、両方のフィールドを処理します。両方のフィールドの値を 1 つの同じプロパティにバインドしたため、常に最後に処理されたフィールドの値を取得することになります。

代わりに、サーバー側で JSF を使用して入力フィールドを表示/非表示にする必要があります。そのために提供されたrendered属性を使用できます。

rendered="#{testBean.visiblePassword}"
于 2012-11-26T12:39:14.637 に答える
1

問題は、同じ変数entry.passwordEntry.passwordを 2 つ以上のフィールドにバインドしているため<h:form>、これらのフィールドの値の 1 つだけを送信すると、 に設定されentry.passwordEntry.password、他の値が破棄されることです。

これを解決する最善の方法は、フォームにある/必要なすべてのフィールドに異なる変数を設定することです。PasswordEntryコードを見ると、Bean に3 つの属性を設定することで実現できるように見えます。

@ManagedBean(name = "entry")
@ViewScoped
public class PasswordEntryBean implements Serializable {
    //other attributes...
    private PasswordEntry passwordEntry;
    private PasswordEntry passwordEntryV;
    private PasswordEntry conPasswordEntry;

    //<editor-fold defaultstate="collapsed" desc="CONSTRUCTORS">    
    public PasswordEntryBean() {
        passwordEntry = new PasswordEntry();
        passwordEntryV = new PasswordEntry();
        conPasswordEntry = new PasswordEntry();
    }

    //getters and setters...
}

JSF コード:

<p:password id="password" feedback="true" value="#{entry.passwordEntry.password}"
    match="conPassword" maxlength="100" label="#{lbls.password}"
    promptLabel="#{lbls.strengthPromp}" weakLabel="#{lbls.weakPassword}"
    goodLabel="#{lbls.goodPassword}" strongLabel="#{lbls.strongPassword}"
    styleClass="#{entry.showPasswords ? 'none' : ''}" />

<p:password id="conPassword" value="#{entry.conPasswordEntry.password}"
    label="#{lbls.conPassword}" maxlength="100"
    styleClass="#{entry.showPasswords ? 'none' : ''}"/>

<p:inputText id="passwordV" value="#{entry.passwordEntryV.password}"
    maxlength="100" label="#{lbls.password}"
    styleClass="#{!entry.showPasswords ? 'none' : ''}"/>

2 つまたは 3 つの場所で同じ値が必要な場合は、バインディングが同じであってはならないことを考慮する必要があります<h:form>。そうしないと、同じ問題が発生します。単純な JavaScript (結局、will beとwill be ) を使用して、またはアクションを実行するときにサーバー側で変数値を同期できます。つまり、 で値を選択するときに実行する必要があるリスナーです。<p:password><input type="password"><p:input><input type="text"><p:selectBooleanCheckbox>

于 2012-11-25T15:11:09.387 に答える