java - JSF 面板定位

Question

我可以设置面板的位置然后更新它，但是在获取其当前位置时遇到问题。

例如:目前，我的面板位于 (50, 50)。

 <h:form id="testForm">
        <p:panel id="pane" style="position: absolute; left:50px; top:50px;">
            <p:panelGrid columns=4>
                <p:outputPanel id="ASlot3" styleClass="slot"/>  
                <p:outputPanel id="ASlot4" styleClass="slot"/>  
                <p:outputPanel id="ASlot5" styleClass="slot"/>  
                <p:outputPanel id="ASlot6" styleClass="slot"/>  
            </p:panelGrid>
        </p:panel>
        <p:draggable id="drg" for="pane"/>

        <p:commandButton id="press" action="#{sbean.press}"/>

    </h:form>

我通过拖动面板来更新其位置。拖动它后，我按下一个按钮，按住此方法打印“style”的内容。

    //press() method
    UIViewRoot viewRoot = FacesContext.getCurrentInstance().getViewRoot();
    UIComponent component = viewRoot.findComponent("testForm").findComponent("pane");

    Panel p = (Panel) component;

    System.out.println(p.getAttributes().get("style"));

拖动面板并按下按钮后，“样式”不会更新。

那么如何在拖动后获取面板的当前位置？

编辑:顺便说一句，我使用的范围是@ViewScoped

Answer 1

默认情况下，PrimeFaces commandButton 组件使用 Ajax 功能运行，这意味着要让表单提交处理具有 id pane 的组件，您需要在 process 属性中进行声明。

<p:commandButton id="press" action="#{sbean.press}" process="@this pane"
  update="@this pane" />

另一种选择是简单地处理和更新整个表单。

<p:commandButton id="press" action="#{sbean.press}" process="@form"
  update="@form" />

或者您可以简单地将 Ajax 功能设置为“关闭”，它将像典型的表单提交控件一样运行。

<p:commandButton id="press" action="#{sbean.press}" ajax="false" />

编辑:我发现 Primefaces 可拖动不会将组件的绝对位置更新为服务器的 View 状态。这很不幸，但可以使用hiddenInputs 和Javascript 来解决。

<script type="text/javascript">
  function updatePanelPosition() {
    var panel = jQuery('#testForm\\:pane');
    var hiddenLeftInput = jQuery('#testForm\\:hiddenLeft');
    var hiddenTopInput = jQuery('#testForm\\:hiddenTop');
    var left = panel.css('left');
    var top = panel.css('top');
    hiddenLeftInput.val(left);
    hiddenTopInput.val(top);
  }
</script>

<h:inputHidden id="hiddenLeft" value="#{viewScopedBean.leftProperty}" />
<h:inputHidden id="hiddenTop" value="#{viewScopedBean.topProperty}" />

<p:commandButton id="press" action="#{sbean.press}" process="@form"
   update="@form" onstart="updatePanelPosition()" />

两个隐藏的输入组件将在提交之前使用 pane 当前的 le​​ft 和 top 属性进行更新，然后这些值将更新为托管 bean 属性，您可以在其中获取这些值。

我知道这看起来很困惑，但最终这确实是托管 bean 的优点，它的作用就像 View Controller 并包含表示逻辑。