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>

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

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

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

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

编辑：BTW，我使用的范围是@ViewScoped

Answer 1

默认情况下，PrimeFaces commandButton组件使用Ajax功能运行，这意味着对于表单提交以处理标识为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" />

编辑：我看到Primefaces draggable不会将组件的绝对位置更新为服务器的View State。这很不幸，但可以使用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的当前left和top属性进行更新，然后这些值将更新到托管bean属性，您可以在其中获取值。

我知道这看起来很乱，但最后这实际上是托管bean的好处，就像一个视图控制器并且包含表示逻辑。

JSF面板定位

1 个答案: