Programing

JSF 리소스 라이브러리 란 무엇이며 어떻게 사용해야합니까?

lottogame 2020. 4. 22. 08:06
반응형

JSF 리소스 라이브러리 란 무엇이며 어떻게 사용해야합니까?


는 JSF <h:outputStylesheet>, <h:outputScript>그리고 <h:graphicImage>구성 요소는이 library속성을. 이것이 무엇이며 어떻게 사용해야합니까? 일반적인 내용 / 파일 형식으로 다음과 같이를 사용하는 웹에 많은 예제가 있습니다 css, jsimg(또는 image사용되는 태그에 따라 라이브러리 이름으로는)

<h:outputStylesheet library="css" name="style.css" />
<h:outputScript library="js" name="script.js" />
<h:graphicImage library="img" name="logo.png" />

어떻게 유용합니까? library예제 값은 이미 태그 이름으로 표시된 것을 반복하는 것 같습니다. 의 경우 <h:outputStylesheet>이미 "CSS 라이브러리"를 나타내는 태그 이름을 기반으로합니다. 동일한 방식으로 작동하는 다음과의 차이점은 무엇입니까?

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />

또한 생성 된 HTML 출력은 약간 다릅니다. 의 URL 패턴에 대한 컨텍스트 경로 /contextnameFacesServlet맵핑이 제공되는 *.xhtml경우 전자는 라이브러리 이름을 요청 매개 변수로 사용하여 다음 HTML을 생성합니다.

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/style.css.xhtml?ln=css" />
<script type="text/javascript" src="/contextname/javax.faces.resource/script.js.xhtml?ln=js"></script>
<img src="/contextname/javax.faces.resource/logo.png.xhtml?ln=img" alt="" />

후자는 URI 경로에 라이브러리 이름으로 다음 HTML을 생성합니다.

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml" alt="" />

후자의 접근법은 후자의 관점에서도 이전의 접근법보다 더 의미가 있습니다. 그러면 library속성 이 얼마나 유용합니까?


실제로 "js", "css", "img"등과 같은 공통 컨텐츠 / 파일 유형이 라이브러리 이름으로 사용 된 웹의 모든 예제는 오해의 소지가 있습니다.

실제 사례

우선 MojarraMyFaces같은 기존 JSF 구현 PrimeFacesOmniFaces같은 JSF 구성 요소 라이브러리 에서이를 사용하는 방법을 살펴 보겠습니다 . 그들 중 누구도 이런 식으로 리소스 라이브러리를 사용하지 않습니다. 그들은 다음과 같은 방식으로 ( 표지 아래 @ResourceDependency또는 UIViewRoot#addComponentResource()) 사용합니다.

<h:outputScript library="javax.faces" name="jsf.js" />
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript library="omnifaces" name="omnifaces.js" />
<h:outputScript library="omnifaces" name="fixviewstate.js" />
<h:outputScript library="omnifaces.combined" name="[dynamicname].js" />
<h:outputStylesheet library="primefaces" name="primefaces.css" />
<h:outputStylesheet library="primefaces-aristo" name="theme.css" />
<h:outputStylesheet library="primefaces-vader" name="theme.css" />

기본적으로 모든 리소스가 공통적으로 속하는 공통 라이브러리 / 모듈 / 테마 이름을 나타냅니다 .

보다 쉬운 식별

이런 식으로 해당 자원이 속하는 곳 및 / 또는 어디에서 왔는지 쉽게 지정하고 구별 할 수 있습니다. primefaces.css자신의 웹앱에 PrimeFaces의 기본 CSS를 재정의 / 정의 하는 리소스 가 있다고 상상해보십시오 . PrimeFaces가 자체 라이브러리 이름을 사용하지 않으면 PrimeFaces 자체 라이브러리 primefaces.css가로드되지 않고 웹 애플리케이션이 제공 하는 라이브러리 이름 이로드되지 않습니다.

Also, when you're using a custom ResourceHandler, you can also apply more finer grained control over resources coming from a specific library when library is used the right way. If all component libraries would have used "js" for all their JS files, how would the ResourceHandler ever distinguish if it's coming from a specific component library? Examples are OmniFaces CombinedResourceHandler and GraphicResourceHandler; check the createResource() method wherein the library is checked before delegating to next resource handler in chain. This way they know when to create CombinedResource or GraphicResource for the purpose.

RichFaces가 잘못했음을 주목해야합니다. 전혀 사용하지 않고 library다른 리소스 처리 계층을 자체적으로 만들었 으므로 RichFaces 리소스를 프로그래밍 방식으로 식별하는 것은 불가능합니다. 이것이 바로 OmniFaces CombinedResourceHanderRichFaces 리소스를 사용하기 위해 반사 기반 핵 을 도입 해야하는 이유 입니다.

나만의 webapp

자신의 웹앱에 반드시 리소스 라이브러리가 필요하지는 않습니다. 그냥 생략하는 것이 가장 좋습니다.

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />

또는 실제로 필요한 경우 "기본"또는 회사 이름과 같이보다 일반적인 이름을 지정할 수 있습니다.

<h:outputStylesheet library="default" name="css/style.css" />
<h:outputScript library="default" name="js/script.js" />
<h:graphicImage library="default" name="img/logo.png" />

또는 리소스가 일부 마스터 Facelets 템플릿에 고유 한 경우 템플릿 이름을 지정하여 서로 쉽게 연관시킬 수 있습니다. 다시 말해서, 그것은 자기 문서 목적을위한 것입니다. 예를 들어 /WEB-INF/templates/layout.xhtml템플릿 파일에서 :

<h:outputStylesheet library="layout" name="css/style.css" />
<h:outputScript library="layout" name="js/script.js" />

그리고 /WEB-INF/templates/admin.xhtml템플릿 파일 :

<h:outputStylesheet library="admin" name="css/style.css" />
<h:outputScript library="admin" name="js/script.js" />

실제 예를 보려면 OmniFaces 쇼케이스 소스 코드를 확인하십시오 .

또는 여러 webapps에서 동일한 리소스를 공유하고 webapp 's의 JAR로 포함 된 이 답변 과 동일한 예제를 기반으로하는 "공통"프로젝트를 만들려면 /WEB-INF/lib라이브러리로 참조하십시오. (이름은 자유롭게 선택할 수 있습니다. OmniFaces 및 PrimeFaces와 같은 구성 요소 라이브러리도 이런 방식으로 작동합니다) :

<h:outputStylesheet library="common" name="css/style.css" />
<h:outputScript library="common" name="js/script.js" />
<h:graphicImage library="common" name="img/logo.png" />

라이브러리 버전 관리

또 다른 주요 장점은 자체 웹 응용 프로그램에서 제공하는 리소스에 리소스 라이브러리 버전 관리를 올바르게 적용 할 수 있다는 것입니다 (JAR에 포함 된 리소스에는 작동하지 않음). 라이브러리 폴더에 직접 하위 폴더를 만들어 \d+(_\d+)*패턴에 이름 을 사용하여 리소스 라이브러리 버전을 나타낼 수 있습니다.

WebContent
 |-- resources
 |    `-- default
 |         `-- 1_0
 |              |-- css
 |              |    `-- style.css
 |              |-- img
 |              |    `-- logo.png
 |              `-- js
 |                   `-- script.js
 :

이 마크 업을 사용하는 경우 :

<h:outputStylesheet library="default" name="css/style.css" />
<h:outputScript library="default" name="js/script.js" />
<h:graphicImage library="default" name="img/logo.png" />

라이브러리 버전을 v매개 변수 로 사용하여 다음 HTML을 생성합니다 .

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml?ln=default&amp;v=1_0" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml?ln=default&amp;v=1_0"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml?ln=default&amp;v=1_0" alt="" />

따라서 일부 리소스를 편집 / 업데이트 한 경우 버전 폴더를 새 값으로 복사하거나 이름을 바꾸면됩니다. 여러 버전 폴더가있는 경우 JSF ResourceHandler는 숫자 순서 규칙에 따라 가장 높은 버전 번호의 리소스를 자동으로 제공합니다.

따라서 resources/default/1_0/*폴더를 복사 / 이름 바꾸기 할 때 resources/default/1_1/*다음과 같이하십시오.

WebContent
 |-- resources
 |    `-- default
 |         |-- 1_0
 |         |    :
 |         |
 |         `-- 1_1
 |              |-- css
 |              |    `-- style.css
 |              |-- img
 |              |    `-- logo.png
 |              `-- js
 |                   `-- script.js
 :

그런 다음 마지막 마크 업 예제는 다음 HTML을 생성합니다.

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml?ln=default&amp;v=1_1" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml?ln=default&amp;v=1_1"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml?ln=default&amp;v=1_1" alt="" />

이렇게하면 변경된 매개 변수가있는 URL이 처음 요청 될 때 웹 브라우저가 캐시에서 동일한 이름을 가진 자원을 표시하는 대신 서버에서 직접 자원을 요청하게됩니다. 이 방법으로 최종 사용자는 업데이트 된 CSS / JS 리소스를 검색해야 할 때 강제 새로 고침 (Ctrl + F5 등)을 수행 할 필요가 없습니다.

JAR 파일에 포함 된 리소스의 경우 라이브러리 버전 관리가 불가능합니다. custom이 필요합니다 ResourceHandler. jar의 자원에 JSF 버전 관리를 사용하는 방법 도 참조하십시오 .

또한보십시오:

참고 URL : https://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-eded

반응형