Question

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

外部容器

    <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>

标题

    <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>

然后我有一个在External Component中显示表格的网格组件。我没有报告网格组件代码，因为它不适合讨论。

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

    <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视图模式的想法是点击＆＃34; idFullScreen＆＃34;组件链接，idListPanel被反转为OverlayPanel（idlistaFullScreen）。受到BalusC的Composite component with multiple input fields的启发，我为 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

感谢您的帮助

提前致谢。

Answer 1

我找到了解决方案：

我更改外部容器，我从覆盖面板中删除了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>

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

1 个答案: