首页 文章

具有自定义行为的复合组件 - PrimeFaces全屏模式下的DataTable

提问于
浏览
0

我正在开发一个自定义复合组件,它将Primeface数据表与我的要求中的其他一些功能重用 . 此功能之一是以全屏模式显示Table . 为了获得这一点,我开发了三个自定义组件:

External Container

<composite:interface componentType="m3DataTable">
    <composite:attribute name="rendered" targets="idListPanel idListPanelFullScreen"/>
    <composite:attribute name="for" targets="idListPanelFullScreen" required="true"/>
    <composite:attribute name="my" targets="idListPanelFullScreen" default="left topo"/>
    <composite:attribute name="at" targets="idListPanelFullScreen" default="left topo"/>
</composite:interface>

<composite:implementation>
    <span id="#{cc.clientId}">
        <p:overlayPanel id="idListPanelFullScreen" for="#{cc.attrs.for}" appendToBody="true" dynamic="true" styleClass="m3PanelListaDatiOverlay" binding="#{cc.m3DataTableOverlayPanel}" widgetVar="#{cc.id}widgetVarOverlay" > 
        </p:overlayPanel>
        <p:panel id="idListPanel" styleClass="m3PanelListaDati" binding="#{cc.m3DataTablePanel}">
            <composite:insertChildren></composite:insertChildren>
        </p:panel>
    </span>

</composite:implementation>

Header

<composite:interface componentType="m3DataTableHeader">

</composite:interface>

<composite:implementation>
    <span id="#{cc.clientId}">
                        <p:commandLink id="idFullScreen" ajax="true" actionListener="#{cc.actionListener}">
                            <p:graphicImage id="fullScreen" value="../images/empty.png" styleClass="ico_full_screen"/>
                        </p:commandLink>    
    </span>
</composite:implementation>

然后我有一个网格组件,显示外部组件内的表 . 我没有报告网格组件代码,因为它没有用于讨论 .

最后我在测试页面中使用了组件:

<m3:m3DataTable id="idListCar" my="left top" at="left top" for=":ancora" rendered="#{lazyTableComponentBean.datasource.size()>0}">

        <m3:m3DataTableHeader id="listaHeader"  title="Test Table" rendered="#{lazyTableComponentBean.datasource.size()>0}">


        </m3:m3DataTableHeader>
        <m3:m3DataTableGrid id="idListaAttivitaGrid" var="car" selection="#{lazyTableComponentBean.selectedCar}"  value="#{lazyTableComponentBean.listaCars}" rowkey="#{car.name}">
         <p:column headerText="Progressivo">
                <h:outputText value="#{car.num}" />
            </p:column>

            <p:column headerText="Name">

实现完全scren视图模式的想法是单击"idFullScreen"组件链接,idListPanel被反转为OverlayPanel(idlistaFullScreen) . 受到BalusC的启发,我开发了两个用于m3DataTable的后备组件,另一个用于m3DataTableHeader .

M3DataTableHeader类,为idFullScreen实现actionListener:

@FacesComponent("m3DataTableHeader")
public class M3DataTableHeader extends UINamingContainer{
public void actionListener(ActionEvent e){

    M3DataTable ccParent = (M3DataTable) getCompositeComponentParent(this);
    Collection<String> componentToUpdate = new ArrayList<String>();

    if(ccParent!=null){
        if(getStateHelper().get("isFullScreen")!=null && (Boolean)getStateHelper().get("isFullScreen")==true){
            ccParent.setIsFullScrenn(false);
        }
        else
            ccParent.setIsFullScrenn(true);

    }
    if(e.getComponent().getChildCount()>0 && e.getComponent().getChildren().get(0) instanceof GraphicImage){
        GraphicImage child = (GraphicImage)e.getComponent().getChildren().get(0);
        child.setStyleClass("ico_exit_full_screen");
        componentToUpdate.add(child.getId());
        componentToUpdate.add(e.getComponent().getId());
        componentToUpdate.add(ccParent.getClientId());

    }
    RequestContext.getCurrentInstance().update(componentToUpdate);
}

在渲染阶段比在m3DataTable支持组件中我将面板子项复制到Overlay:

@Override
public void encodeChildren(FacesContext context) throws IOException {
    if(getIsFullScrenn()!=null && getIsFullScrenn()){
        List<UIComponent> panelChildren = getM3DataTablePanel().getChildren();
        getM3DataTableOverlayPanel().getChildren().addAll(panelChildren);
        RequestContext.getCurrentInstance().update(getClientId());
        RequestContext.getCurrentInstance().execute(getId()+"widgetVarOverlay.show()");
    }
    super.encodeChildren(context);
}

另外我需要用户可以单击idFullScreen命令链接以在正常模式下恢复视图,因此在该操作期间我可以将覆盖面板子项复制回面板 . 一切正常,但在查看upadte并显示叠加后,CommandLink不再触发actionListener方法 .

我不确定这是否是推动这种行为的最佳解决方案,可能我会错过一些东西,任何帮助都应该是有用的 .

我正在使用PirmeFaces 3.5.23,mojarra 2.1.21,我正在Liferay 6.1.3ga3和网桥3.1.3ga4中开发一个portlet

感谢您的任何帮助

提前致谢 .

1 回答

  • 0

    我找到了解决方案:

    我更改外部容器,我从覆盖面板中删除了dynamic =“true”和appendToBody =“true”,一切正常

    <composite:implementation>
    <span id="#{cc.clientId}">
        <p:overlayPanel id="idListPanelFullScreen" for="#{cc.attrs.for}" styleClass="m3PanelListaDatiOverlay" binding="#{cc.m3DataTableOverlayPanel}" widgetVar="#{cc.id}widgetVarOverlay" > 
        </p:overlayPanel>
        <p:panel id="idListPanel" styleClass="m3PanelListaDati" binding="#{cc.m3DataTablePanel}">
            <composite:insertChildren></composite:insertChildren>
        </p:panel>
    </span>
    

相关问题