将<h：outputText>更改为PrimeFaces中的<h：inputText> ajax-Java 学习之路

在点击按钮或链接后，我正在尝试将 <h:outputText> 更改为 <h:inputText> . Somtehing类似于：How to build "edit" button in JSF and switch between h:outputText and h:inputText但我想使用PrimeFaces .

我认为这将是有用的：http://www.primefaces.org/showcase/ui/inplace.jsf但是我希望在点击编辑按钮或超链接之后激活该编辑模式，而不是在点击我想要更改的文本之后 .

当然点击编辑按钮后我想更改为“接受”按钮，这将允许我保存更改并将inputText更改为outputText

1 回答

看看这个SSCCE，它做你想要的 .

TestBean.java

package com.mycompany;

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

@ManagedBean
@ViewScoped
public class TestBean {

    /**
     * Controls if the input field is available or not
     */
    private boolean editable = false;

    /**
     * The String value you want to edit
     */
    private String value = "Default value";

    /**
     * Changes between the inputText and the outputText
     */
    public void changeEditable() {
        editable = !editable;
    }

    public String getValue() {
        return value;
    }

    public boolean isEditable() {
        return editable;
    }

    /**
     * Definitely saves the value
     */
    public void saveValue() {
        FacesMessage message = new FacesMessage("Value " + value + " saved!");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public void setEditable(boolean editable) {
        this.editable = editable;
    }

    public void setValue(String value) {
        this.value = value;
    }

}

index.xhtml

<!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:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>JSF Demo</title>
</h:head>
<h:body>
    <p:messages />
    <h:form>
        <h:panelGroup rendered="#{!testBean.editable}">
            <h:outputText value="#{testBean.value}" />
        </h:panelGroup>
        <h:panelGroup rendered="#{testBean.editable}">
            <p:inputText value="#{testBean.value}" />
        </h:panelGroup>

        <p:commandButton
            value="#{testBean.editable ? 'Confirm value' : 'Change value'}"
            update="@form" actionListener="#{testBean.changeEditable}" />

        <p:commandButton value="Save value" ajax="false"
            action="#{testBean.saveValue}" />
    </h:form>

</h:body>
</html>

回复于 2024-04-29T23:51:43+08:00

将<h：outputText>更改为PrimeFaces中的<h：inputText> ajax

1 回答

相关问题