Модальный диалог редактирования на Primefaces с JSF - PullRequest
Новая
       28

Модальный диалог редактирования на Primefaces с JSF

0 голосов
/ 11 марта 2019

Я пытаюсь создать приложение CRUD JSF с редактированием / новым экраном, реализованным в виде модального диалога. Проблема в том, что я не могу найти способ, как сделать новую и редактировать операцию, выполненную этим диалогом, выполненным с помощью AJAX. С удалением все было очень просто (просто опция 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>

Здесь находится управляемый компонент, который используется в DataGrid и диалоговом окне Product. 

@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. Если вам нужно больше кода, чтобы ответить, вы можете найти его здесь:

...