提问人:DalusC 提问时间:12/13/2018 更新时间:12/18/2018 访问量:365
UI 布局初始化错误 - center-pane 元素不存在,center pane 是必需元素
UI Layout Initialization Error-The center-pane element does not exist, the center pane is required element
问:
此错误与Spring Boot的JSF(Primefaces)应用程序有关。 上传图像.xhtml后出现此错误,我尝试了许多前面提到的堆栈溢出解决方案,包括基于web.xml配置的解决方案,但对我不起作用。
1)UI布局初始化错误-center-pane元素不存在 UI布局初始化错误-center-pane元素不存在
2)错误信息
上传图像.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>
答:
1赞
DalusC
12/18/2018
#1
由于不支持的命令按钮使用,我的示例中发生了上述错误。
<p:commandButton action="#{BannerUpload.preview}" ajax="false" value="Preview" />
将其替换为以下代码,并使用高级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>
评论
0赞
Kukeltje
12/19/2018
为什么您发布的用法“不受支持”?这个发布的答案对于这个问题来说是不合逻辑的。想详细说明吗?commandButton
0赞
DalusC
12/19/2018
在我的情况下,JSF primefaces <p:commandButton>组件不支持命令按钮属性操作,并且使用名为 actionListener 的命令按钮属性可以正常工作。
0赞
Kukeltje
12/19/2018
那么你很可能在你的 Bean 导航方面有问题,因为这不能有 90% 的把握,通过操作属性的存在/使用来实现
评论