【问题标题】:UI Layout Initialization Error-The center-pane element does not exist, the center pane is required elementUI 布局初始化错误-center-pane 元素不存在,center-pane 是必需元素
【发布时间】:2018-12-13 06:37:07
【问题描述】:

这个错误是关于带有 Spring Boot 的 JSF(Primefaces) 应用程序。 在uploadimages.xhtml之后出现了这个错误,我尝试了很多前面提到的关于stack-overflow的解决方案,包括基于web.xml配置的解决方案,但没有为我工作。

1)UI 布局初始化错误-center-pane 元素不存在 UI Layout Initialization Error-The center-pane element does not exist

2)Error message

上传图片.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="maintmplt.xhtml">
    <head>
    </head>
    <ui:define name="content">
        <div style="text-align: center;">

            <h:form id="search" enctype="multipart/form-data">


                <div style="width: 80%; margin-left: 20px; margin-right: auto;">

                    <p:panel id="searchFields2" header="Banner Images Upload"
                             style="font-weight:bold; font-size:11px;text-align:left;background-color:#F3F1F6">

                        <p:fieldset legend="Sinhala" toggleable="true" collapsed="true" toggleSpeed="500" style="margin-top: 20px;">
                            <p:ajax event="toggle" listener="#{BannerUpload.file}" update="search" />
                            <h:panelGrid columns="2" cellpadding="5">
                                <p:growl id="messages1" showDetail="true" />


                                <h:form enctype="multipart/form-data">
                                    <p:growl id="messages" showDetail="true"/>
                                    <p:fileUpload value="#{BannerUpload.file}" mode="simple" skinSimple="true"/>
                                    <br/>

                                    <ui:fragment rendered="#{not empty BannerUpload.file}">
                                        <img src="data:image/png;base64,#{BannerUpload.imageContentsAsBase64}" />
                                    </ui:fragment>
                                    <br/>

                                    <p:commandButton action="#{BannerUpload.preview}" ajax="false" value="Preview" />

                                    <br/>

                                    <p:commandButton value="Submit" ajax="false" action="#{BannerUpload.upload}" disabled="false"/>
                                </h:form>

                            </h:panelGrid>

                        </p:fieldset>
                        <p:fieldset legend="English" toggleable="true" collapsed="true" toggleSpeed="500" style="margin-top: 20px;">

                            <h:panelGrid columns="2" cellpadding="5">
                                <p:growl id="messages2" showDetail="true" />

                                <h:form enctype="multipart/form-data">
                                    <p:growl id="engMessages" showDetail="true"/>
                                    <p:fileUpload value="#{BannerUpload.file}" mode="simple" skinSimple="true"/>
                                    <br/>

                                    <ui:fragment rendered="#{not empty BannerUpload.file}">
                                        <img src="data:image/png;base64,#{BannerUpload.imageContentsAsBase64}" />
                                    </ui:fragment>
                                    <br/>
                                    <p:commandButton action="#{BannerUpload.preview}" ajax="false" value="Preview" />
                                    <br/>

                                    <p:commandButton value="Submit" ajax="false" action="#{BannerUpload.upload}" disabled="false"/>
                                </h:form>
                            </h:panelGrid>
                        </p:fieldset>
                        <p:fieldset legend="Tamil" toggleable="true" collapsed="true" toggleSpeed="500" style="margin-top: 20px;">

                            <h:panelGrid columns="2" cellpadding="5">
                                <p:growl id="messages3" showDetail="true" />

                                <h:form enctype="multipart/form-data">
                                    <p:growl id="tamMessages" showDetail="true"/>
                                    <p:fileUpload value="#{BannerUpload.file}" mode="simple" skinSimple="true"/>
                                    <br/>

                                    <ui:fragment rendered="#{not empty BannerUpload.file}">
                                        <img src="data:image/png;base64,#{BannerUpload.imageContentsAsBase64}" />
                                    </ui:fragment>
                                    <br/>
                                    <p:commandButton action="#{BannerUpload.preview}" ajax="false" value="Preview" />
                                    <br/>

                                    <p:commandButton value="Submit" ajax="false" action="#{BannerUpload.upload}" disabled="false"/>
                                </h:form>
                            </h:panelGrid>
                        </p:fieldset>
                    </p:panel>



                </div>
            </h:form>

        </div>
    </ui:define>

</ui:composition>

【问题讨论】:

标签: jquery spring-boot jsf xhtml


【解决方案1】:

在我的示例中出现上述错误是因为使用了不受支持的命令按钮。

   &lt;p:commandButton action="#{BannerUpload.preview}" ajax="false" value="Preview" /&gt;

将其替换为以下代码并使用 Advanced primefaces fileuploader 而不是简单模式,并根据新实现更改您的 java 控制器。

<p:fileUpload fileUploadListener="#{BannerUpload.uploadEnglishImg}" mode="advanced" 
 dragDropSupport="false" update="messages2" sizeLimit="100000" fileLimit="1" 
 allowTypes="/(\.|\/)(png)$/" />

更改的代码示例......

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" template="maintmplt.xhtml">

  <ui:define name="content">
    <div style="text-align: center;">
      <h:form id="search" enctype="multipart/form-data">
        <p:growl id="messages" showDetail="true" />
        <div style="width: 80%; margin-left: 20px; margin-right: auto;">
          <p:panel id="searchFields2" header="Upload Banner Images" style="font-weight:bold; font-size:11px;text-align:left;background-color:#F3F1F6">
            <p:fieldset legend="English" toggleable="true" collapsed="true" toggleSpeed="500" style="margin-top: 20px;">

              <h:panelGrid columns="2" cellpadding="5">
                <p:fileUpload fileUploadListener="#{BannerUpload.uploadEnglishImg}" mode="advanced" dragDropSupport="false" update="messages" sizeLimit="100000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
              </h:panelGrid>
            </p:fieldset>

         </p:panel>
        </div>
      </h:form>
    </div>
  </ui:define>

</ui:composition>

【讨论】:

  • 为什么您发布的 commandButton 用法“不受支持”?发布的这个答案对于这个问题来说是不合逻辑的。需要详细说明吗?
  • JSF primefaces 组件在我的情况下不支持命令按钮属性操作,并且使用名为 actionListener 的命令按钮属性可以正常工作。
  • 那么你的 bean 导航很可能有问题,因为在 90% 的情况下,这不能通过操作属性的存在/使用来确定
猜你喜欢
  • 1970-01-01
  • 2023-03-17
  • 2019-07-27
  • 2012-04-10
  • 1970-01-01
  • 1970-01-01
  • 2016-06-06
  • 1970-01-01
相关资源
最近更新 更多