Primefaces如何使用ajax切換儀表板小部件/面板可見性？

Question

我有一個儀表板，其中有相當多的小部件/面板工作得很好。

我正在尋找一種方法來切換使用commandButton ction偵聽器而不必刷新頁面，即通過AJAX特定的可見性。

<p:dashboard id="board" model="#{dashboardBean.model}"> 
    <!-- iteration code begins --> 
    <p:panel id="#{wdgt.code}" header="#{wdgt.title}"> 
     <h:outputText value="One of the dozens of widgets" /> 
    </p:panel> 
    <!-- iteration code ends --> 
    <p:panel id="staticWdgtId" header="Static Widget Initially Invisible" visible="false"> 
     Some static content 
    </p:panel> 
</p:dashboard> 

在支持Bean

然後，在某種意義上說，這一行動需要通過一個命令或者一個ActionListener被解僱......

public void showTheWidget() { 
    DashboardColumn dbc = this.model.getColumn(1);  
    dbc.getWidget(2); // does not get a widget object with a visibility attribute :((
         // so that I could manipulate such as dbc.getWidget(2).setVisible(true); 
} 

任何想法？

Answer 1

靜態的方法

您可以用布爾面板相關聯。

面板

<p:panel id="staticWdgtId" header="Static Widget Initially Invisible" 
     visible="#{bean.panelShow}"> 
    Some static content 
</p:panel> 

按鈕

<p:commandButton actionListener="#{bean.actionListener()}" 
       value="Button" 
       update=":staticWdgtId" /> 

豆

public void actionListener() { 
    setShowPanel(true); 
} 

---

動態方法

渲染所有的面板與display: none

控制板

<p:dashboard id="board" model="#{dashboardBean.model}">  
    <p:panel id="#{wdgt.code}" header="#{wdgt.title}" style="display: none"> 
     <h:outputText value="One of the dozens of widgets" /> 
    </p:panel>   
</p:dashboard> 

remoteCommand

<p:remoteCommand name="panelsToShow" 
       actionListener="#{bean.panelsToShowAction()}" 
       oncomplete="handleComplete(xhr, status, args)" /> 

bean.panelsToShowAction（）你需要Gson

public void panelsToShowAction() { 
    List<String> panels = new ArrayList<String>(); 

    //iterate over the panels you want to show, and put #{wdgt.code} which is the id of the panel 
    panels.add("Code1");//id 
    panels.add("Code2");//id  

    RequestContext requestContext = RequestContext.getCurrentInstance(); 
    requestContext.addCallbackParam("panels", new Gson().toJson(panels)); 

} 

JS

$(document).ready(function() { 
    panelsToShow(); 
}) 

function handleComplete(xhr, status, args) { 
    var panels = eval('(' + args.panels + ')'); 
    for (var i = 0, len = panels.length; i < len; i++) { 
     $('#'+panels[i]).show(); 
    } 
}