如何将大页面拆分成小块并保留页面布局？

Question

大家！我正在编写一个由 tabview 和面板组成的页面。 A中有一些面板，如xhtmls。

   Tabview.xhtml:
       <p:tabView>
            <p:tab title="1">
               <ui:include src="/Apanel.xhtml"/>
            </p:tab>
            <p:tab title="2">
               <ui:include src="/Bpanel.xhtml"/>
            </p:tab>
            <p:tab title="3">
               <ui:include src="/Cpanel.xhtml"/>
            </p:tab>
            <p:tab title="4">
               <ui:include src="/Dpanel.xhtml"/>
            </p:tab>
            <p:tab title="5">
               <ui:include src="/Epanel.xhtml"/>
            </p:tab>
        </p:tabView>

    Apanel.xhtml:
      <p:panel>
         <ui:include src="/A1.xhtml"/>
      </p:panel>
      <p:panel>
         <ui:include src="/A2.xhtml"/>
      </p:panel>

所以这个页面有很多html和js代码。页面的性能很糟糕，即使单击复选框的响应也很慢！但布局方便系统用户。有什么办法可以实现用户在A1页面上工作，其他页面不加载，或者其他标签页不加载的效果。提前致谢！

Answer 1

我可以确认 Primefaces 的面板（例如 Yahoo UI 面板）的性能很糟糕。

因此，您可以改为使用经典的 HTML + CSS，并为每个选项卡设置一个单独的页面。这比简单地将p:panel 放到您的页面上需要更多的手动工作，但最终确实得到了回报。

我知道这听起来不像“好的设计”，但是 JSF 应用程序更像是一个网页而不是富客户端 GUI——所以设计原则是不同的。至少这是我的经验 - 一旦我戴上网页设计师的帽子，JSF + Primefaces 就变成了一个闪电般快速的解决方案，效果非常好，符合我的期望。