PrimeFaces 프로세스 / 업데이트 및 JSF f : ajax 실행 / 렌더러 속성 이해

정확히 무엇 process과 updatePrimeFaces의에서 p:commandXxx구성 요소와 execute과 render에 f:ajax태그?

유효성 검사시 어떤 것이 작동합니까? update백엔드에서 컴포넌트로 값을 업데이트하는 대신 속성이 무엇을 합니까? 수행 process모델에 속성 바인드 값을? 정확히 무엇을 @this, @parent, @all그리고 @form두 속성에?

아래 예제는 잘 작동하지만 기본 개념에 약간 혼란 스럽습니다.

<p:commandButton process="@parent"
                 update="@form"
                 action="#{bean.submit}" 
                 value="Submit" />

<p:commandXxx process> <p:ajax process> <f:ajax execute>

이 process속성은 서버 측이며 UIComponent구현 EditableValueHolder(입력 필드) 또는 ActionSource(명령 필드) 에만 영향을 줄 수 있습니다 . 이 process속성은 공백으로 구분 된 클라이언트 ID 목록을 사용하여 JSF에 (부분) 양식 제출시 전체 JSF 라이프 사이클을 통해 정확히 처리해야하는 구성 요소를 알려줍니다.

그런 다음 JSF는 요청 값을 적용합니다 (구성 요소 자체 클라이언트 ID를 기반으로 HTTP 요청 매개 변수 찾기 및 구성 요소의 경우 제출 된 값으로 설정 EditableValueHolder하거나 구성 요소의 ActionEvent경우 새 큐에 대기 ActionSource). 모델 값 변환, 유효성 검증 및 업데이트를 수행합니다 ( EditableValueHolder구성 요소 만) 마지막으로 큐에 넣습니다 ActionEvent( ActionSource구성 요소 만). JSF는 process속성이 적용되지 않는 다른 모든 구성 요소의 처리를 건너 뜁니다 . 또한 요청 값 적용 단계 동안 rendered속성이 평가되는 구성 요소 false도 변조 된 요청에 대한 보호의 일부로 건너 뜁니다.

이 경우의주의 ActionSource(예 : 구성 요소 <p:commandButton>당신은 또한에서 구성 요소 자체를 포함하는 것이 매우 중요합니다) process당신이 구성 요소와 관련된 동작을 호출하려는 경우 특히, 속성을. 따라서 특정 명령 구성 요소가 호출 될 때 특정 입력 구성 요소 만 처리하려는 아래 예제는 작동하지 않습니다.

<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="foo" action="#{bean.action}" />

그것은 단지 처리하는 것 #{bean.foo}과 하지 을 #{bean.action}. 명령 구성 요소 자체도 포함해야합니다.

<p:inputText id="foo" value="#{bean.foo}" />
<p:commandButton process="@this foo" action="#{bean.action}" />

또는 분명히 알 수 있듯이 @parent공통 부모를 갖는 유일한 구성 요소 인 경우 사용 하십시오.

<p:panel><!-- Type doesn't matter, as long as it's a common parent. -->
    <p:inputText id="foo" value="#{bean.foo}" />
    <p:commandButton process="@parent" action="#{bean.action}" />
</p:panel>

또는 둘 다 부모 UIForm구성 요소의 유일한 구성 요소 인 경우 다음을 사용할 수도 있습니다 @form.

<h:form>
    <p:inputText id="foo" value="#{bean.foo}" />
    <p:commandButton process="@form" action="#{bean.action}" />
</h:form>

양식에 현재 입력 구성 요소를 기반으로 다른 입력 구성 요소 또는 일부 UI 섹션을 업데이트하려는 경우보다 처리에서 건너 뛰려는 입력 구성 요소가 더 많은 경우에는 바람직하지 않습니다. 아약스 리스너 메소드 즉, 다른 입력 구성 요소의 유효성 검사 오류로 인해 ajax 리스너 메소드가 실행되는 것을 원하지 않습니다.

다음이 @all있습니다. 이것은 process속성에 특별한 영향을 미치지 않지만 update속성 에만 영향을 미칩니다 . A process="@all"는와 정확히 동일하게 작동합니다 process="@form". HTML은 어쨌든 여러 양식을 한 번에 제출하는 것을 지원하지 않습니다.

또한 @none아무것도 처리 할 필요가 없지만을 통해 특정 부분 , 특히 제출 된 값이나 액션 리스너에 의존하지 않는 섹션을 통해 특정 부분 만 업데이트하려는 경우 유용 할 수 있습니다 update.

이 process속성은 HTTP 요청 페이로드 (요청 매개 변수의 양)에 영향을 미치지 않습니다 . 즉, HTML 표현 내에 포함 된 "모든 것"을 전송하는 기본 HTML 동작에는 <h:form>영향을 미치지 않습니다. 큰 양식을 가지고 있고 HTTP 요청 페이로드를 처리에 절대적으로 필요한 것 (즉 process, 속성으로 포함 된 것) 으로 만 줄이려면 partialSubmitPrimeFaces Ajax 구성 요소에서 <p:commandXxx ... partialSubmit="true">또는 로와 같이 속성을 설정할 수 있습니다 <p:ajax ... partialSubmit="true">. 편집 web.xml하고 추가 하여 이것을 '전역 적으로'구성 할 수도 있습니다

<context-param>
    <param-name>primefaces.SUBMIT</param-name>
    <param-value>partial</param-value>
</context-param>

또는 <o:form>이 동작을 기본값으로하는 OmniFaces 3.0 이상을 사용할 수도 있습니다 .

PrimeFaces에 해당하는 표준 JSF process는 execute입니다 <f:ajax execute>. PrimeFaces는 쉼표로 구분 된 문자열을 지원하지 않는 반면 (공백으로 구분 된 규칙을 고수하는 것이 좋습니다) @parent키워드 는 제외하고는 정확히 동일하게 작동 합니다. 또한 <p:commandXxx process>기본값은 @formwhile <p:ajax process>이고 <f:ajax execute>기본값 은임을 아는 것이 @this좋습니다. 마지막으로 process소위 "PrimeFaces Selectors" 를 지원 한다는 것을 아는 것도 유용합니다 . update = "@ (. myClass)에서와 같이 PrimeFaces Selectors 는 어떻게 작동합니까?를 참조하십시오.

<p:commandXxx update> <p:ajax update> <f:ajax render>

update속성은 클라이언트 측과 모두의 HTML 표현에 영향을 줄 수 있습니다 UIComponent들. 이 update속성은 공백으로 구분 된 클라이언트 ID 목록을 사용하여 JavaScript (아약스 요청 / 응답 처리를 담당하는 JavaScript)에게 제출 양식에 대한 응답으로 HTML DOM 트리의 어떤 부분을 업데이트해야하는지 알려줍니다.

그런 다음 JSF는 업데이트 할 요청 된 부분 만 포함하여 올바른 아약스 응답을 준비합니다 . JSF는 updateajax 응답에서 속성으로 다루지 않는 다른 모든 구성 요소를 건너 뛰 므로 응답 페이로드를 작게 유지합니다. 또한 렌더링 응답 단계 중에 rendered속성이 평가되는 구성 요소는 false건너 뜁니다. 반환 될지라도 trueJavaScript는 HTML DOM 트리에서 처음 업데이트 된 경우이를 업데이트 할 수 없습니다 false. 대신 랩핑하거나 부모를 업데이트해야합니다. 속성을 렌더링 한 컴포넌트에서 Ajax 업데이트 / 렌더링이 작동하지 않음을 참조하십시오 .

일반적 으로 (부분) 양식 제출시 클라이언트 측에서 실제로 "새로 고쳐야" 하는 구성 요소 만 업데이트 하려고합니다. 아래 예제는 다음을 통해 전체 부모 양식을 업데이트합니다 .@form

<h:form>
    <p:inputText id="foo" value="#{bean.foo}" required="true" />
    <p:message id="foo_m" for="foo" />
    <p:inputText id="bar" value="#{bean.bar}" required="true" />
    <p:message id="bar_m" for="bar" />
    <p:commandButton action="#{bean.action}" update="@form" />
</h:form>

( process기본적으로 @form이미 속성이므로 속성이 생략 됨 )

제대로 작동 할 수 있지만이 특정 예에서는 입력 및 명령 구성 요소를 업데이트 할 필요가 없습니다. 모델 값 foo과 bar내부 action메소드 를 변경하지 않는 한 (UX 관점에서는 직관적이지 않음) 업데이트 할 필요가 없습니다. 메시지 구성 요소는 유일하게하는 정말 업데이트해야 :

<h:form>
    <p:inputText id="foo" value="#{bean.foo}" required="true" />
    <p:message id="foo_m" for="foo" />
    <p:inputText id="bar" value="#{bean.bar}" required="true" />
    <p:message id="bar_m" for="bar" />
    <p:commandButton action="#{bean.action}" update="foo_m bar_m" />
</h:form>

그러나 많은 것들이 있으면 지루합니다. 그것이 PrimeFaces Selectors가 존재하는 이유 중 하나입니다. 이러한 메시지 구성 요소는 생성 된 HTML 출력에서 ​​공통 스타일 클래스 인를 가지 ui-message므로 다음도 수행해야합니다.

<h:form>
    <p:inputText id="foo" value="#{bean.foo}" required="true" />
    <p:message id="foo_m" for="foo" />
    <p:inputText id="bar" value="#{bean.bar}" required="true" />
    <p:message id="bar_m" for="bar" />
    <p:commandButton action="#{bean.action}" update="@(.ui-message)" />
</h:form>

(메시지 구성 요소의 ID를 유지해야합니다. 그렇지 @(...)않으면 작동하지 않습니다! 다시 한 번, update = "@ (. myClass)"에서 PrimeFaces 선택기는 어떻게 작동합니까? 를 참조하십시오)

는 @parent따라서 현재 구성 요소와 모든 형제와 자녀를 커버 만 부모 구성 요소를 업데이트합니다. 이것은 각자의 책임을 가지고 제정신 그룹으로 양식을 분리 한 경우에 더 유용합니다. @this업데이트, 분명히, 단지 현재의 구성 요소입니다. 일반적으로 이는 조치 메소드에서 컴포넌트의 고유 HTML 속성 중 하나를 변경해야하는 경우에만 필요합니다. 예 :

<p:commandButton action="#{bean.action}" update="@this" 
    oncomplete="doSomething('#{bean.value}')" />

에서 변경 된 oncomplete작업을 수행해야 한다고 생각하면 구성 요소가 업데이트되지 않으면이 구성이 작동하지 않았을 것입니다. 단순한 이유로 생성 된 HTML 출력의 일부이기 때문에 모든 EL 표현식이 평가됩니다. 렌더링 응답 중).valueactiononcomplete

는 @all주의해서 사용해야합니다 전체 문서를 업데이트합니다. 일반적으로, 당신은 대신 일반 링크 (중 하나가 이것에 대한 진정한 GET 요청을 사용하고 싶습니다 <a>나 <h:link>) 또는하여 리디렉션 - 후 POST ?faces-redirect=true나 ExternalContext#redirect(). 효과에있어서, process="@form" update="@all"정확히 비 AJAX (비 부분)에 제출하는 것과 같은 효과를 갖는다. 내 JSF 경력 전체에서 내가 만난 유일한 유스 케이스 @all는 아약스 요청 중에 예외가 발생하는 경우 오류 페이지를 전체적으로 표시하는 것입니다. AJAXified 구성 요소에 대한 JSF 2.0 예외를 처리하는 올바른 방법은 무엇입니까?를 참조하십시오 .

PrimeFaces에 해당하는 표준 JSF update는 render입니다 <f:ajax render>. PrimeFaces는 쉼표로 구분 된 문자열을 지원하지 않는 반면 (공백으로 구분 된 규칙을 고수하는 것이 좋습니다) @parent키워드 는 제외하고는 정확히 동일하게 작동 합니다. 모두 update와 render기본값 @none( "아무것도"입니다합니다).

또한보십시오:

• ajax 업데이트 / 렌더링을위한 컴포넌트의 클라이언트 ID를 찾는 방법은 무엇입니까? "bar"에서 "foo"표현식을 가진 구성 요소를 찾을 수 없습니다
• PrimeFaces p : commandButton을 눌렀을 때 이벤트 실행 순서
• p : dataTable 페이지 매김 동안 p : ajax의 요청 페이로드를 줄이는 방법
• p : dataTable에서 현재 행의 세부 정보를 ap : dialog에 표시하고 저장 후 업데이트하는 방법
• JSF 페이지에서 <h : form>을 사용하는 방법? 단일 양식? 여러 형태? 중첩 된 양식?

기본값을 기억하는 데 어려움이 있다면 BalusC의 답변에서 짧은 추출 내용을 소개합니다.

구성 요소 | 제출 | 새롭게 하다
------------ | --------------- | --------------
f : ajax | execute = "@ this"| render = "@ none"
p : ajax | process = "@ this"| update = "@ none"
p : commandXXX | process = "@ form"| update = "@ none"

프로세스에 의해 (JSF 스펙에서이를 실행이라고 함) JSF에 처리를 다른 모든 것으로 지정된 컴포넌트로 제한하도록 지시하면 다른 모든 것은 무시됩니다.

update는 서버가 요청에 응답 할 때 업데이트 될 요소를 나타냅니다.

@all : 모든 구성 요소가 처리 / 렌더링됩니다.

@this : execute 속성을 가진 요청 컴포넌트가 처리 / 렌더링됩니다.

@form : 요청하는 구성 요소를 포함하는 양식이 처리 / 렌더링됩니다.

@parent : 요청하는 구성 요소가 포함 된 부모가 처리 / 렌더링됩니다.

Primefaces를 사용하면 JQuery 선택기를 사용할 수도 있습니다. http://blog.primefaces.org/?p=1867

PrimeFaces는 표준 JSF 2.0+ 키워드를 지원합니다.

• @this 현재 구성 요소.
• @all 전체보기.
• @form 현재 구성 요소의 가장 가까운 조상 형태.
• @none 구성 요소가 없습니다.

표준 JSF 2.3+ 키워드 :

• @child(n) n 번째 아이.
• @composite 가장 가까운 복합 부품 조상.
• @id(id) 구성 요소 트리 구조를 무시하고 컨테이너 이름을 지정하여 ID로 구성 요소를 검색하는 데 사용됩니다.
• @namingcontainer 현재 구성 요소의 가장 가까운 조상 명명 컨테이너입니다.
• @parent 현재 컴포넌트의 부모
• @previous 이전 형제.
• @next 다음 형제.
• @root 뷰의 UIViewRoot 인스턴스는 현재 컴포넌트 대신 루트에서 검색을 시작하는 데 사용할 수 있습니다.

그러나 PrimeFaces 관련 키워드도 제공됩니다.

• @row(n) n 번째 행.
• @widgetVar(name) 지정된 widgetVar가있는 구성 요소

"PrimeFaces Selectors"라는 것을 사용하여 jQuery Selector API를 사용할 수도 있습니다. 예를 들어 CSS 클래스를 사용하여 요소의 모든 입력을 처리하려면 다음을 수행하십시오 myClass.

process="@(.myClass :input)"

보다:

• https://primefaces.github.io/primefaces/8_0/#/core/searchexpression