使用JSF在Primefaces上进行模态编辑对话框

Question

我正在尝试创建一些CRUD JSF应用程序，并将其编辑/新屏幕实现为模式对话框。问题是我找不到一种方法来进行此操作，而该方法是通过用ajax执行的对话框进行的，并进行新的编辑操作。使用delete可以非常简单（只需使用ajax =“ true”选项即可。）

这是按钮的代码，用于显示对话框

<h:form id="dataForm">
        <div class="ui-g">    
            <div class="ui-g-12 ui-md-9">
                <p:dataGrid var="product" value="#{products.productList}" columns="3" layout="grid"
                            rows="12" paginator="true" id="products"
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            rowsPerPageTemplate="6,12,16">

                    <f:event type="preRenderView" listener="#{products.preloadProductList}" />

                    <f:facet name="header">
                        Products
                    </f:facet>

                    <p:panel header="#{product.name}" style="text-align:center">
                        <h:panelGrid columns="1" style="width:100%">

                            <h:outputText value="#{product.name}"/>

                            <h:outputText value="#{product.price}"/>

                            <%-- Here new/edit dialog window is opened --%>
                            <p:commandLink update=":dataForm:productDetail" oncomplete="PF('productDialog').show()">
                                Edit
                                <f:setPropertyActionListener value="#{product}" target="#{products.product}"/>
                            </p:commandLink>

                            <p:commandLink update=":dataForm" action="#{products.deleteAction(product)}" ajax="true">
                                Delete
                            </p:commandLink>
                        </h:panelGrid>
                    </p:panel>

                </p:dataGrid>

                <ui:include src="WEB-INF/dialogs/edit_product.xhtml"/>
            </div>
        </div>
    </h:form>

这里是对话框窗口，该窗口已移至单独的文件edit_product.xhtml

<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">

    <p:dialog header="Product Info" widgetVar="productDialog" modal="true" showEffect="fade"
              hideEffect="fade"
              resizable="false">
        <p:outputPanel id="productDetail" style="text-align:center;">
            <p:panelGrid columns="2" rendered="#{not empty products.product}"
                         columnClasses="label,value">

                <h:outputText value="Id:"/>
                <h:outputText value="#{products.id}"/>

                <h:outputText value="Name"/>
                <h:inputText value="#{products.name}"/>

                <h:outputText value="Price"/>
                <h:inputText value="#{products.price}"/>
            </p:panelGrid>

            <h:commandButton value="Save" action="#{products.saveProduct}"/>
        </p:outputPanel>
    </p:dialog>
</ui:composition>

这里是Managed bean，它由Product dataGrid和对话框窗口使用。

@ManagedBean(name = "products")
@SessionScoped
public class ProductsBean {

    private static final Logger logger = LoggerFactory.getLogger(ProductsBean.class);

    @Inject
    private ProductRepository productRepository;

    private Product product;

    private Collection<Product> productList;

    public void preloadProductList(ComponentSystemEvent event) throws AbortProcessingException {
        productList = productRepository.getAll();
    }

    public String getId() {
        return String.valueOf(product.getId());
    }

    public void setId(String id) {
        product.setId(Long.valueOf(id));
    }

    public String getName() {
        return product.getName();
    }

    public void setName(String name) {
        product.setName(name);
    }

    public int getPrice() {
        return product.getPrice();
    }

    public void setPrice(int price) {
        product.setPrice(price);
    }

    public Product getProduct() {
        return this.product;
    }

    public void setProduct(Product product) {
        this.product = product;
    }

    public Collection<Product> getProductList() {
        logger.info("Get product list");
        return productList;
    }

    public void newProductAction() {
        this.product = new Product();
    }

    public void deleteAction(Product product) {
        logger.info("Delete product");
        productRepository.remove(product);
    }

    public void saveProduct() {
        productRepository.merge(product);
    }
}

无论我是否添加了ajax选项，在按下“保存”按钮后是否重新加载整个窗口。您能告诉我实施的正确方向吗？

P.S。如果您需要更多代码来回答，可以在这里找到它：

• 带有产品表https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/index.xhtml的主页
• “编辑/新建”对话框https://github.com/usharik/GeekBrainsJavaEE/blob/master/lesson5-jpa/src/main/webapp/WEB-INF/dialogs/edit_product.xhtml