渲染组件时如何应用 Primefaces 效果答案

【问题标题】：How to apply Primefaces effect when component is rendered渲染组件时如何应用 Primefaces 效果
【发布时间】：2013-04-24 20:08:45
【问题描述】：

我有拖动面板和拖放面板，当组件被拖放到拖放面板中时，我会显示一个新面板并根据渲染布尔属性隐藏旧面板，如下所示：

1-xhtml：

<p:outputPanel id="oldPanel" rendered=#{myBean.old_panel_rendered}> .... </p:outputPanel>
<p:outputPanel id="newPanel" rendered=#{myBean.new_panel_rendered}> .... </p:outputPanel>

2-豆：

old_panel_rendered=true;
new_panel_rendered=false;

public void onComponentDrop(DragDropEvent ddEvent) { 

        old_panel_rendered=false;
        new_panel_rendered=true;

    }

newPanel 被渲染时如何执行效果，oldPanel 未渲染时如何执行效果。

请指教，谢谢。

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

调用 js 函数，该函数将在新项目丢弃时应用效果：

<p:ajax listener="#{bean.onDrop}" onstart="applyEffects();" update="newPanel" />

功能是：

function applyEffects() {
    var oldPanel = $(document.getElementById('oldPanel'));
    var newPanel = $(document.getElementById('newPanel'));
    oldPanel.css({"display":"none"});//or oldPanel.fadeOut(500) which looks fancy
    newPanel.css({"display":"inline"});
    newPanel.effect("highlight",
            {color:"#87FF7A"}, 1500);
}

在调用document.getElementById 时不要忘记提供组件的确切客户端ID。您可以通过浏览器的开发人员设置来检测它。如果有问题，你可以放弃update="newPanel"或者你可以试试update="oldpanel newpanel"。

为了能够将其应用于特定面板：

public void onComponentDrop(DragDropEvent ddEvent) { 
    int id = event.getData();//or sth.similar to getId
    RequestContext.getCurrentInstance().addCallbackParam("index", id);
}

上面的代码向 ajax 响应添加了一个参数，可以通过以下方式检索它：

function applyEffects(xhr,status,args) {
    var oldPanel = $(document.getElementById('oldPanel'));
    var newPanel = $(document.getElementById('newPanel'));
    if(args.id=='oldPanel') {//oldPanel or whatever which equals to eventID
        oldPanel.css({"display":"none"});//or oldPanel.fadeOut(500) which looks fancy
    }
    newPanel.css({"display":"inline"});
    newPanel.effect("highlight",
            {color:"#87FF7A"}, 1500);
}

您应该通过p:ajax oncomplete="applyEffects(xhr,status,args);" 拨打此电话。我这里是直接编码，所以在IDE上可以很容易地看到一些错误。

【讨论】：

我只想在 oldPanel 不是每次执行函数时都显示的情况下应用淡出效果，如何添加条件来做到这一点。
@MahmoudSaleh 你确定要通过oncomplete 调用它吗？并且不要将其放入document.ready 函数中。还要通过 firebug 发出警报或调试，并确保它被调用。
面板的 id 类似于 notebook_form:blank_panel 所以我尝试转义如下 notebook_form\\:blank_panel 但它也不起作用
所以放了一个alert(1); 并看到它被警告了对吧？如果是，则意味着函数调用正确，并且 id 等于 notebook_form:blank $(document.getElementById('notebook_form:blank')); 应该得到正确的元素。
@MahmoudSaleh 因为它必须等到服务器的放置参数作业结束，这就是 oncomplete 工作的原因。