실제 클라이언트 ID에 대한 HTML 출력을 찾습니다
올바른 클라이언트 ID를 찾으려면 생성 된 HTML 출력을 조사해야합니다. 브라우저에서 페이지를 열고 마우스 오른쪽 단추를 클릭하고 소스보기를 수행하십시오 . 관심있는 JSF 구성 요소의 HTML 표시를 찾아 id
클라이언트 ID로 사용하십시오. 현재 이름 지정 컨테이너에 따라 절대적 또는 상대적 방식으로 사용할 수 있습니다. 다음 장을 참조하십시오.
참고 :이 같은 반복 인덱스 포함 발생할 경우 :0:
, :1:
(그것이 반복하는 구성 요소 내부에 있기 때문에), 등, 당신은 특정의 반복 라운드를 업데이트하는 것은 항상 지원되지 않는다는 것을 인식 할 필요가있다. 이에 대한 자세한 내용은 답변 하단을 참조하십시오.
NamingContainer
구성 요소를 외우고 항상 고정 ID를 부여하십시오
ajax process / execute / update / render에서 참조하려는 구성 요소가 동일한 NamingContainer
상위 내에 있으면 자체 ID를 참조하십시오.
<h:form id="form">
<p:commandLink update="result"> <!-- OK! -->
<h:panelGroup id="result" />
</h:form>
그것이 있다면 하지 같은 내부 NamingContainer
, 당신은 절대 클라이언트 ID를 사용하여 참조 할 필요가있다. 절대 클라이언트 ID는 NamingContainer
구분 기호 문자 (기본적으로)로 시작 :
합니다.
<h:form id="form">
<p:commandLink update="result"> <!-- FAIL! -->
</h:form>
<h:panelGroup id="result" />
<h:form id="form">
<p:commandLink update=":result"> <!-- OK! -->
</h:form>
<h:panelGroup id="result" />
<h:form id="form">
<p:commandLink update=":result"> <!-- FAIL! -->
</h:form>
<h:form id="otherform">
<h:panelGroup id="result" />
</h:form>
<h:form id="form">
<p:commandLink update=":otherform:result"> <!-- OK! -->
</h:form>
<h:form id="otherform">
<h:panelGroup id="result" />
</h:form>
NamingContainer
구성 요소, 예를 들어 있습니다 <h:form>
, <h:dataTable>
, <p:tabView>
, <cc:implementation>
(따라서, 모든 복합 구성 요소) 등, 당신은 생성 된 HTML 출력을 보면 쉽게 인식하고, 자신의 ID는 모든 하위 구성 요소의 생성 된 클라이언트 ID 앞에 추가됩니다. 고정 ID가 없으면 JSF는 자동 생성 ID를 j_idXXX
형식으로 사용 합니다. 당신은 그들에게 고정 ID를 부여함으로써 그것을 피해야합니다. OmniFaces는NoAutoGeneratedIdViewHandler
개발 과정이 도움이 될 수 있습니다.
UIComponent
문제 의 javadoc을 찾으면 NamingContainer
인터페이스를 구현하는지 여부를 확인할 수도 있습니다 . 예를 들어 HtmlForm
( UIComponent
뒤 <h:form>
태그)는 구현 NamingContainer
을 표시하지만 HtmlPanelGroup
( UIComponent
뒤 <h:panelGroup>
태그)는이를 표시하지 않으므로 구현하지 않습니다 NamingContainer
. 여기에 모든 표준 구성 요소의 자바 독입니다 및 여기 PrimeFaces의 자바 독이다 .
문제 해결
따라서 귀하의 경우 :
<p:tabView id="tabs"><!-- This is a NamingContainer -->
<p:tab id="search"><!-- This is NOT a NamingContainer -->
<h:form id="insTable"><!-- This is a NamingContainer -->
<p:dialog id="dlg"><!-- This is NOT a NamingContainer -->
<h:panelGrid id="display">
생성 된 HTML 출력은 <h:panelGrid id="display">
다음과 같습니다.
<table id="tabs:insTable:display">
정확히 id
클라이언트 ID로 사용하고 다음 :
에서 사용하기 위해 접두사를 사용해야합니다 update
.
<p:commandLink update=":tabs:insTable:display">
include / tagfile / composite 외부 참조
이 명령 링크가 include / tagfile 내부에 있고 대상이 외부에 있으므로 현재 이름 지정 컨테이너의 이름 지정 컨테이너 상위 ID를 반드시 알 필요는없는 경우 다음 UIComponent#getNamingContainer()
과 같이 동적으로 참조 할 수 있습니다 .
<p:commandLink update=":#{component.namingContainer.parent.namingContainer.clientId}:display">
또는이 명령 링크가 복합 컴포넌트 내부에 있고 대상이 외부에있는 경우 :
<p:commandLink update=":#{cc.parent.namingContainer.clientId}:display">
또는 명령 링크와 대상이 모두 동일한 복합 구성 요소 내에있는 경우 :
<p:commandLink update=":#{cc.clientId}:display">
렌더링 / 업데이트 속성에 대한 템플리트에서 상위 이름 지정 컨테이너의 ID 가져 오기도 참조하십시오.
덮개 아래에서 어떻게 작동합니까
이 모두로 지정됩니다 "표현 검색" 에 의 javadoc :UIComponent#findComponent()
검색 식 (A)의 ID 속성에 대해 정확히 일치하는 식별자 (어느 구성 UIComponent
이나 의해 연결된 같은 식별자의 일련의 UINamingContainer#getSeparatorChar
문자 값. 대체 alogrithms는만큼 사용될 수 있지만 검색 알고리즘 으로서는, 다음하여 동작한다 최종 결과는 같습니다 :
UIComponent
다음 조건 중 하나가 충족되는 즉시 중지하여 검색의 기초가 되는 것을 식별하십시오 .
- 검색 표현식이 분리 자 문자 ( "절대"검색 표현식이라고 함)로 시작하면 밑이
UIComponent
컴포넌트 트리 의 루트 가됩니다. 선행 분리 문자가 제거되고 나머지 검색 표현식은 아래 설명 된대로 "상대적"검색 표현식으로 취급됩니다.
- 이 경우 그렇지
UIComponent
않은 NamingContainer
그것은 기반이 될 것입니다.
- 그렇지 않으면이 구성 요소의 상위를 검색하십시오. a
NamingContainer
가 있으면 기본이됩니다.
- 그렇지 않으면 (아니오
NamingContainer
가 있을 경우 ) 루트 UIComponent
가 기본이됩니다.
- 검색 표현식 (이전 단계에서 수정되었을 수 있음)은 이제 기본 컴포넌트의 범위 내에서 일치하는 ID를 가진 컴포넌트 (있는 경우)를 찾는 데 사용되는 "상대적"검색 표현식입니다. 일치는 다음과 같이 수행됩니다.
- 검색 표현식이 단순 식별자 인 경우이 값은 id 특성과 비교 된 후 기본의 패싯 및 하위를 통해 재귀 적으로 검색됩니다
UIComponent
(자손 NamingContainer
이 발견되면 자체 패싯 및 하위는 검색되지 않음).
- 검색 표현식에 구분 문자로 구분 된 둘 이상의 식별자가 포함 된 경우 첫 번째 식별자는
NamingContainer
이전 글 머리 기호의 규칙 으로 위치를 찾는 데 사용됩니다 . 그런 다음 나머지 검색 식을 전달 findComponent()
하여이 메서드를 NamingContainer
호출합니다.
PrimeFaces도 JSF 사양을 준수하지만 RichFaces는 "일부 추가 예외"를 사용 합니다.
"reRender" 는 UIComponent.findComponent()
알고리즘 (일부 추가 예외 포함)을 사용하여 컴포넌트 트리에서 컴포넌트를 찾습니다.
이러한 추가 예외는 자세히 설명되어 있지 않지만 상대 구성 요소 ID (예 :로 시작하지 않는 :
)는 가장 가까운 상위 컨텍스트 NamingContainer
뿐만 아니라 NamingContainer
동일한보기의 다른 모든 구성 요소 에서도 검색되는 것으로 알려져 있습니다. 그건 그렇고 비싼 일).
절대 사용하지 마십시오 prependId="false"
그래도 문제가 해결되지 않으면를 사용하지 않는지 확인하십시오 <h:form prependId="false">
. 이것은 ajax 제출 및 렌더링 처리 중에 실패합니다. 이 관련 질문을 참조하십시오 : prependId = "false"인 UIForm은 <f : ajax render>를 중단 합니다.
반복 구성 요소의 특정 반복 라운드 참조
반복 구성 요소에서 특정 반복 항목을 다음 <ui:repeat>
과 <h:dataTable>
같이 참조하는 것은 오랫동안 불가능했습니다 .
<h:form id="form">
<ui:repeat id="list" value="#{['one','two','three']}" var="item">
<h:outputText id="item" value="#{item}" /><br/>
</ui:repeat>
<h:commandButton value="Update second item">
<f:ajax render=":form:list:1:item" />
</h:commandButton>
</h:form>
그러나 Mojarra 2.2.5부터는 <f:ajax>
그것을 지원하기 시작했습니다 (단순히 유효성 검사를 중지했습니다. 따라서 더 이상 언급 된 예외에 직면하지 않을 것입니다. 나중에 다른 개선 픽스는 계획되어 있습니다).
현재 MyFaces 2.2.7 및 PrimeFaces 5.2 버전에서는 아직 작동하지 않습니다. 향후 버전에서는 지원이 제공 될 수 있습니다. 한편, 가장 좋은 방법은 반복 구성 요소 자체 또는 HTML과 같이 HTML을 렌더링하지 않는 경우 부모를 업데이트하는 것 <ui:repeat>
입니다.
PrimeFaces를 사용할 때 검색 표현식 또는 선택자를 고려하십시오
PrimeFaces 검색 표현식을 사용하면 JSF 컴포넌트 트리 검색 표현식을 통해 컴포넌트를 참조 할 수 있습니다. JSF에는 몇 가지 내장 기능이 있습니다.
@this
: 현재 구성 요소
@form
: 부모의 UIForm
@all
: 전체 문서
@none
: 아무것도
PrimeFaces는 새로운 키워드 및 복합 표현식 지원을 통해이를 개선했습니다.
@parent
: 상위 구성 요소
@namingcontainer
: 부모의 UINamingContainer
@widgetVar(name)
: 주어진 것으로 식별 된 구성 요소 widgetVar
당신은 또한 다음과 같은 복합 표현식에서 해당 키워드를 혼합 할 수 있습니다 @form:@parent
, @this:@parent:@parent
등
PFS (PrimeFaces Selectors) 를 @(.someclass)
사용하면 jQuery CSS 선택기 구문을 통해 구성 요소를 참조 할 수 있습니다. 예를 들어 HTML 출력에서 모든 공통 스타일 클래스를 가진 컴포넌트를 참조합니다. "많은"구성 요소를 참조해야하는 경우에 특히 유용합니다. 이것은 대상 구성 요소가 HTML 출력의 모든 클라이언트 ID를 갖도록 요구합니다 (고정 또는 자동 생성, 중요하지 않음). update = "@ (. myClass)"에서와 같이 PrimeFaces 선택기 는 어떻게 작동합니까?를 참조하십시오.