primefaces提供的拖拽功能


 使用primefaces非常簡單,我們只需要將primefaces的jar文件包含到web模塊的庫里即可,這樣無論是試用jsp或xhtml,我們都能識別到primefaces的命名空間。據說richfaces 4 也將簡化其部署的方式,應該是和primefaces相似吧。

  下面,就是講解一下如何使用primefaces的拖拽功能。應該說使用起來還是非常簡單的,不過這也耗費了我很多時間來研究。使用拖拽功能時主要使用了primefaces的兩個控件,就是:

    <p:draggable for=”這里面指定哪個控件里的內容可以被拖拽” revert=”這里是boolean值,表明如果沒有拽到合適的位置,那么所拖拽的內容將回到其原來位置”/>
    <p:droppable for=”指定哪個控件是可以被drop進的” database=”數據源是非常重要的,其指定了能拽到該放置區域的內容是屬於哪個控件的” tolerance=”這里說明的是如何才能評判用戶進行了有效地拖拽,我們使用的是touch,被拖拽的內容只要與可放置區域接觸,拖拽就能充公” dropListener=”#{這里是一個具有以DragDropEvent為類型的變量的方法}”  onDropUpdate=”這里是列舉出所有需要更新的控件,當用戶進行了成功拖拽操作,列舉的是id並且用空格分開”/>

我這么解釋也許會難以理解,因此,如果有必要的話,請自己嘗試一下,可以依據demo的例子來進行。
由於我們的要求是允許在三個或三個以上的數據源之間進行拖拽,因此我嘗試了給同一個數據源注冊多個<p:droppable/>,但是不能實現,為了解決這個問題,我查閱了大量的資料,但是發現這個方法是不可行的,但是偶然間發現可以通過一些硬編碼的方式來實現多個數據源之間的拖拽,雖然不利於可擴展性,但是由於這個功能比較獨立,因此對未來的開發影響不是很大。

2.

 

圖片: 
描述:圖片一
圖片: 
描述:圖片二
圖片: 
描述:圖片三
圖片: 
描述:圖片四
圖片: 
為了解決以上問題,我將<p:droppable/>的datasource去掉了,這樣任何控件都可能是datasource。因此滿足了可以從任意數據源進行拖拽了。例如如下代碼片段:
【圖片一】
這樣,當我們從一個數據源將內容拖到可放置處時就會觸發dropListener里注冊的事件。代碼片段如下:
【圖片二】
這里primefaces已經為我們做的是DragDropEvent,每次拖拽成功都會初始化一個ddEvent的變量,該變量包含如下一些屬性,我用debug模式將其內容表示出來。
第一步是將一個內容從其數據源拖拽到另一個容器中去,如下所示:
【圖片三】
我嘗試將tec1拖拽到Utilisateurs組中去,此時,就會觸發dropListener方法,進入debug模式,從變量視圖中我們可以看到如下信息:
【圖片四】 
這里包含了dragId和dropId,我們所作的就是同個這兩個id來獲得被拽的內容和將被放置的組的信息。之后讓程序繼續運行,我們就會看到如下結果:
【圖片五】 
Tec1被放置到user1中去了。
具體的操作已經在代碼截圖中顯示了,應該比較清晰。
這樣我們就完成了多數據源之間的拖拽。
現版primefaces 3.2 略有不同,但很好用,有一個tree,如下:

Tree - ContextMenu

Tree has exclusive support for context menu. Different menus can be attached to particular tree nodes by matching nodeType option to treeNode type.

  • Node 0
  • Node 1
  • Node 2

Source

  1. <h:form>  
  2.               
  3.     <p:growl id="messages" showDetail="true" />  
  4.   
  5.     <p:contextMenu for="treeSingle">  
  6.         <p:menuitem value="View" update="messages" actionListener="#{treeBean.displaySelectedSingle}" icon="ui-icon-search" />  
  7.         <p:menuitem value="Delete" update="treeSingle" actionListener="#{treeBean.deleteNode}" icon="ui-icon-close"/>  
  8.     </p:contextMenu>  
  9.   
  10.     <p:tree id="treeSingle" value="#{treeBean.root}" var="node"  
  11.             selectionMode="single"  
  12.             selection="#{treeBean.selectedNode}">  
  13.   
  14.         <p:treeNode>  
  15.             <h:outputText value="#{node}" />  
  16.         </p:treeNode>  
  17.     </p:tree>  
  18.   
  19. </h:form>  
但是,唯一缺點是,里面的treenode節點不能拖動,不支持draggable屬性,具體的關於有拖拽功能的例子,見primefaces如下:
但是我想到了一個新方法,不用拖拽了,用功能菜單,結果圖如下:



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM