将droppable和ajax行为添加到outputPanel JSF [英] Adding droppable and ajax behavior to outputPanel JSF

问题描述

我正在创建一个可以放下物体并想要动态地放置它的板.

I'm creating a board where I can drop object and want to do it dynamically.

我想要的是这样的东西:

What I want to have is something like this:

<p:outputPanel id="ASlot1" styleClass="slot">  
    <p:droppable tolerance="fit" activeStyleClass="slotActive" scope="PC1" datasource="availableComputers">  
        <p:ajax listener="#{sampleUI.onDrop}" update="selectedComputers" />  
    </p:droppable>  
</p:outputPanel> 

Backing Bean:

Backing Bean:

HtmlPanelGroup panel;
OutputPanel table [][] = new OutputPanel[x][y];
Panel p = new Panel();

for (int i = 0; i < x; i++) {
    for (int j = 0; j < y; j++) {
        table[i][j] = new OutputPanel();
        table[i][j].setId(tableConcat+i+j);
        table[i][j].setStyle(" background:#444444; width:100px; height:100px; display:block; boarder-style: solid;");
        grid.getChildren().add(table[i][j]);
    }
}

panel.getChildren().add(grid);

p.setId("pnel");
panel.getChildren().add(p);

RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("panelForm");

JSF页面:

<h:form id="panelForm">
    <h:panelGroup id="panelIt" binding="#{pane.panel}"/>
</h:form>

我将在后备豆中添加什么?

What will I add to my backing bean?

所以我添加了这个

 Droppable d = new Droppable();

 d.setScope("PCName");
 d.setDatasource("availableComputers");
 d.setActiveStyleClass("slotActive");
 d.setOnDrop("handleDrop");
 d.setTolerance("fit");

然后将每一个都放置在动态创建的输出面板中

Then put each one in the dynamically created outputpanel

d.getChildren().add(table[i][j]);

它似乎不起作用.

推荐答案

首先，您需要拖动某物.以便将其删除，因此我将按照展示示例:

First you need to drag sth. to be able to drop it so I am going to follow the showcase example:

<p:panel header="Squad">  
            <p:dataGrid id="availablePlayers" value="#{barcelona.players}" var="player" columns="4">  
                <p:column>  
                    <p:graphicImage id="player" value="/images/barca/#{player.photo}" styleClass="playerImage"/>  

                    <p:draggable for="player" revert="true" scope="#{player.position}" stack=".playerImage"/>  
                </p:column>  
            </p:dataGrid>  
        </p:panel> 

这里有一个dataGrid，充满了播放器模态类(pojo)，并且p:draggable使这些图像可拖动.当您在其中实现p:droppable和p:ajax时，可以通过以下方式获取删除的玩家ID来调用支持Bean方法:

Here it has a dataGrid that is full with player modal class(pojo) and p:draggable makes those images draggable. As you implemented p:droppable and p:ajax inside of it enables to call a backing bean method with taking dropped player id by:

<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />

实现onDrop方法所需的全部:

public void onDrop(DragDropEvent event) {  
    Player player = (Player) event.getData();  
    selectedPlayers.add(player);  
    FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(player.getName() + " added", "Position:" + event.getDropId()));  
}  

在这里，我们得到了我们丢弃的特定玩家，并添加了FacesMessage，它将显示在咆哮声中.您可以使用该特定播放器进入DB并将其保存等来做任何您想做的事情.

Here it gets the specific player that we have dropped and adds a FacesMessage which will be shown on the growl. You can do whatever you want with that specific player going to DB and save it or etc.

如果您想获得多个输出面板的可投放技能，则应通过以下方式将此信息告知客户端:

If you want to gain droppable skill for multiple outputpanels you should inform the client side about that via:

RequestContext.getCurrentInstance().addCallbackParam("x", x);
RequestContext.getCurrentInstance().addCallbackParam("y", y);

然后使用sth.类似于下面的js函数，在构造outputpanels时调用它:

Then use sth. similar to below js function call it when you are constructing outputpanels:

function gainDroppable() {
    var x = '#{sampleUI.x}';
    var y = '#{sampleUI.x}';
    for (int i = 0; i < x; i++) {
        for (int j = 0; j < y; j++) {
        $(element) = $(document.getElementById('table:'+x+'outputPanel'+'y');
        element.append('<p:droppable tolerance=&quot;fit&quot; activeStyleClass=&quot;slotActive&quot; scope=&quot;PC1&quot; datasource=&quot;availableComputers&quot;>  
        <p:ajax listener=&quot;#{sampleUI.onDrop}&quot; update=&quot;selectedComputers&quot; />  
    </p:droppable> ');
        }
    }
}

您应该确定更改上位功能的某些内容，因为我不知道您的确切客户端代码是什么，因此document.getElementById的客户端ID生成应该有所不同.

You should alter a few things about upper function surely, because of I don't know what is your exact client code, the client ID generation should be different for document.getElementById.

但这是您应该遵循的方式.实际上在服务器端生成输出面板可能是有害的，并且将来会出现很多问题，因此我建议您摆脱Java上的客户端代码，并尝试通过javascript实现类似的功能.

But this is the way you should follow. Actually generating outputpanels on server side can be harmful and occur lot's of issues in the future so I suggest get rid of that client side codes on Java and try to implement similar via javascript.

这篇关于将droppable和ajax行为添加到outputPanel JSF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！