1

パネルの位置を設定して更新することはできますが、現在の位置を取得するときに問題があります。

例: 現在、私のパネルは (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"));

パネルをドラッグしてボタンを押した後、「スタイル」が更新されません。

では、ドラッグ後にパネルの現在の位置を取得するにはどうすればよいですか?

編集:ところで、私が使用しているスコープは @ViewScoped です

4

1 に答える 1

1

デフォルトでは、PrimeFacescommandButtonコンポーネントは Ajax 機能で動作します。つまり、id を持つコンポーネントをフォーム送信で処理するには、属性paneでそれを宣言する必要があります。process

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

もう 1 つのオプションは、フォーム全体を単純に処理して更新することです。

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

または、単純に Ajax 機能を Off に設定すると、典型的なフォーム送信コントロールのように動作します。

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

編集: Primefaces のドラッグ可能なコンポーネントは、コンポーネントの絶対位置をサーバーのビュー ステートに更新しないことがわかります。これは残念なことですが、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()" />

pane2 つの非表示の入力コンポーネントは、送信直前の現在の left および top プロパティで更新されます。次に、これらの値がマネージド Bean プロパティに更新され、そこで値を取得できるようになります。

面倒に思えるかもしれませんが、ビュー コントローラーのように機能し、プレゼンテーション ロジックを含むマネージド Bean が実際に適しているのは、これです。

于 2013-03-29T11:07:53.680 に答える