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"));

拖拽面板并按下按钮后，"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功能设置为Off，它将像典型的表单提交控件一样运行。

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

EDIT:我看到，虽然Primefaces draggable不更新组件的绝对位置到服务器的视图状态。这是不幸的，但它可以通过使用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的当前左侧和顶部属性进行更新，然后这些值将更新为您将能够获取值的托管bean属性。

我知道这看起来很乱，但最终这确实是托管bean的好处，像视图控制器一样运行并包含表示逻辑。