如何在组件呈现

Question

我有拖动面板拖放面板，当组件在托板被丢弃我展现出新的面板和隐藏基于渲染布尔属性的旧面板如下申请Primefaces效果：

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执行效果。

请指教，谢谢。

新项目时droppped将适用效果

Answer 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); 
} 

• 打电话时，不要忘了给组件的确切客户端ID document.getElementById。您可以通过浏览器的开发人员设置来检测它。如果出现问题，您可以放弃update="newPanel"或者您可以尝试update="oldpanel newpanel"。

为了能够运用它的特定面板：

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);"称之为：

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

上的代码将添加一个参数来Ajax响应它可以被检索。我在这里直接编码，因此可以很容易地在IDE上看到很少的错误。