맞춤 구성 요소 만들기

Question

저는 JSF를 처음 사용합니다. 우리는 JSF를 사용하여 웹 애플리케이션을 구축하고 있습니다. 우리는 테이블을 보여줄 필요가있는 곳이 많습니다. 테이블에는 페이징, 열 크기 조정이 가능해야하며, 마우스 오른쪽 버튼을 클릭 할 때 상황에 맞는 메뉴가 필요합니다.

primefaces에서 제공하는 dataTable 구성 요소로 구현할 수 있습니다. 하지만 더 사용자 정의 할 수있는 구성 요소로 만들고 싶습니다. 재사용 가능한 javascript/jquery (Jqgrid) 플러그인과 같은 몇 가지 사항은 우리가 충분해야만하는 몇 가지 속성 값을 설정합니다.

또한 모든 장소에서 재사용 할 수있는 구성 요소가 만들어지고 매개 변수를 설정할 수있는 경우 (예 : columnResizable = 'true', columnSortable = 'true'), 모든 기능에 대한 전체 코드를 작성하는 대신, 'true') 개발 시간을 절약합니다.

나는 그것을 성취하는 방법에 대한 어떠한 그림도 얻지 못하고있다. 어떤 사람이 그것을 안내 할 수 있다면 그것은 위대 할 것입니다. 나는 전체 코드를 기대하지는 않는다. JSF를 사용하여 이것을 구현하는 아이디어는 정말 감사 할 것이다.

Answer 1

복합 구성 요소를 사용해야하며 원하는만큼 매개 변수를 전달하고 #{cc.attrs.param1} 구문을 사용하여 적절하게 사용자 지정할 수 있습니다. 다음은 샘플 XHTML입니다. 당신이 더 구성 요소

보기를 사용자 정의 할 수 있습니다 속성 <c:if test="#{not empty cc.attrs.param4}"> 또는 rendered를 사용

복합 구성 요소

<ui:component xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:u="http://java.sun.com/jsf/composite/ui" xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/seam/faces" xmlns:p="http://primefaces.org/ui" xmlns:cc="http://java.sun.com/jsf/composite"> 
    <cc:interface> 
     <cc:attribute name="tableId" /> 
     <cc:attribute name="param1" /> 
     <cc:attribute name="param2" default="false" /> 
     <cc:attribute name="param3" required="true" /> 
    </cc:interface> 
    <cc:implementation> 
     <p:dataTable id="#{cc.attrs.tableId}" rendered="#{cc.attrs.param2}" value="#{cc.attrs.param1}" var="result" emptyMessage="#{messages['global.noItemsFound']}"> 
          <ui:include src="#{cc.attrs.param3}" /> 
     </p:dataTable> 
    </cc:implementation> 
</ui:component> 

는 이제 당신이 그것을 부를 수있는, 당신의 복합 myList.xhtml 부르 자 :

,363,210

<u:myList param1="#{backingbean.results}" param2="true" id="list1" param3="/items/columns.xhtml" /> 

및보기에 헤더를 넣어하는 것을 잊지 마세요 :

xmlns:u="http://java.sun.com/jsf/composite/ui" 

columns.xhtml 컬럼에 대해 별도의 뷰를 포함하는 또 다른 방법은 <p:columns>을 사용하는 것입니다

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.org/seam/faces" xmlns:u="http://java.sun.com/jsf/composite/ui" 
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:p="http://primefaces.org/ui"> 
    <p:column headerText="Name"> 
     <h:outputText value="#{result.name}" /> 
    </p:column> 
    <p:column headerText="Salary"> 
     <h:outputText value="#{result.salary}" /> 
    </p:column> 
    <p:column headerText="Age"> 
     <h:outputText value="#{result.age}" /> 
    </p:column> 
</ui:composition> 

복합 컴포넌트에서 열 데이터를 포함하는 다른 목록을 매개 변수로 전달합니다. Dynamic Columns