Desenvolvimento de componentes JSF Personalizados

Front-end
#1

Alguém já desenvolveu compontes JSF personalizados?
Estou utilizando IceFaces e preciso que, para a pesquisa eu tenha um único componente, formado da seguinte maneira:

<ice:panelPopup autoCentre="true" draggable="false" id="popPesquisa" modal="true"
                        rendered="#{ORCA$ORCP1034.popPesquisaBean.showDraggablePanel}"
                        style="display: block; height: 525px; left: 432px; top: 0px; position: absolute; visibility: hidden; width: 381px" visible="#{ORCA$ORCP1034.popPesquisaBean.showModalPanel}">
                        <f:facet name="header">
                            <ice:panelGrid id="panelGrid1" style="display:block;width:180px;height:20px;">
                                <ice:outputText id="outputText7" value="Lista Bancos" style="size: 20px;"/>
                                <ice:commandLink id="commandLink1" style="left: 350px; top: 3px; position: absolute;" action="#{ORCA$ORCP1034.closePopup}">
                                    <ice:graphicImage id="graphicImage2" style="border-style:inherit;" url="/resources/Close.png" value="/resources/Close.png" width="24"/>
                                </ice:commandLink>
                            </ice:panelGrid>
                        </f:facet>
                        <f:facet name="body">
                            <ice:panelGrid id="panelGrid2" style="display: block; height: 158px" width="254">
                                <ice:outputLabel id="outputLabel1" value="Chave de pesquisa:"/>
                                <ice:inputText id="txtChavePesquisa" value="#{ORCA$ORCP1034.txtContaBancaria}">
                                    <f:selectItems value="#{ORCA$ORCP1034.conta}"/>
                                </ice:inputText>
                                <ice:commandButton action="#{ORCA$ORCP1034.buttonPesquisaConta_action}" id="buttonPesquisaConta" value="Pesquisar"/>
                                <!-- Tabela de Pesquisa: Conta -->
                                <ice:dataTable id="dataTableConta" rows="10" value="#{ORCA$ORCP1034.conta}" var="item">
                                    <ice:column id="columnCodigo">
                                        <f:facet name="header">
                                            <ice:outputText id="outputTextCodigo" value="Código"/>
                                        </f:facet>
                                        <ice:outputText id="outputTextCodido" styleClass="colTabelaCodigo" value="#{item.codigo}"/>
                                    </ice:column>
                                    <ice:column id="columnDescricao">
                                        <ice:rowSelector immediate="false" mouseOverClass="tableRowMouseOver" multiple="false" selectionListener="#{ORCA$ORCP1034.rowSelectionListener}"/>
                                        <f:facet name="header">
                                            <ice:outputText id="outputTextDescricao" value="Descrição da Conta"/>
                                        </f:facet>
                                        <ice:outputText id="outputText11" styleClass="colTabelaDescricao" value="#{item.descricao}"/>
                                    </ice:column>
                                </ice:dataTable>
                                <!-- Paginator -->
                                <ice:dataPaginator fastStep="3" for="dataTableConta" id="dataScroll_3" paginator="true" paginatorMaxPages="4">
                                    <f:facet name="first">
                                        <ice:graphicImage style="border:none;" title="First Page" url="../xmlhttp/css/xp/css-images/arrow-first.gif"/>
                                    </f:facet>
                                    <f:facet name="last">
                                        <ice:graphicImage style="border:none;" title="Last Page" url="../xmlhttp/css/xp/css-images/arrow-last.gif"/>
                                    </f:facet>
                                    <f:facet name="previous">
                                        <ice:graphicImage style="border:none;" title="Previous Page" url="../xmlhttp/css/xp/css-images/arrow-previous.gif"/>
                                    </f:facet>
                                    <f:facet name="next">
                                        <ice:graphicImage style="border:none;" title="Next Page" url="../xmlhttp/css/xp/css-images/arrow-next.gif"/>
                                    </f:facet>
                                </ice:dataPaginator>
                                <!-- Dados navegação -->
                                <ice:dataPaginator displayedRowsCountVar="displayedRowsCount" firstRowIndexVar="firstRowIndex" for="dataTableConta"
                                    id="dataScroll_2" lastRowIndexVar="lastRowIndex" pageCountVar="pageCount" pageIndexVar="pageIndex" rowsCountVar="rowsCount">
                                    <ice:outputFormat value="{0} conts found, displaying {1} cont(s), from {2} to {3}. Page {4} / {5}.">
                                        <f:param value="#{rowsCount}"/>
                                        <f:param value="#{displayedRowsCount}"/>
                                        <f:param value="#{firstRowIndex}"/>
                                        <f:param value="#{lastRowIndex}"/>
                                        <f:param value="#{pageIndex}"/>
                                        <f:param value="#{pageCount}"/>
                                    </ice:outputFormat>
                                </ice:dataPaginator>
                            </ice:panelGrid>
                        </f:facet>
                    </ice:panelPopup>

É muita coisa, não posso nem pensar em colocar isso em todas as páginas e depois ter que manter página por página, é inconcebível!
Na internet tá cheio de exemplo “Hello World”, mas não tem nada realmente funcional…
Não consegui nem encontrar as classes que implementam a DataTable…
Alguém tem sugestões?

#2