RichFaces-메뉴 구성 요소
RichFaces는 메뉴 유형 마크 업을 만드는 데 사용할 다양한 버전의 태그를 제공합니다. 이 장에서는 브라우저에서 메뉴를 쉽게 렌더링 할 수있는 이전 기능과 함께 몇 가지 새로운 기능을 배웁니다.
<rich : dropDownMenu>
이 태그를 사용하여 개발자는 드롭 다운 메뉴를 만들 수 있습니다. 이 태그는 웹 사이트의 헤더를 만드는 데 유용합니다. 다음 예에서는이 태그를 실제 생활에서 사용하는 방법을 배웁니다. 하나의 파일을 만들고 "DropDownList.xhtml"로 이름을 지정합니다. 그 안에 다음 코드를 넣으십시오.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head></h:head>
<h:body>
<h:form>
<rich:toolbar>
<rich:dropDownMenu>
<f:facet name = "label">
<h:outputText value = "File" />
</f:facet>
<rich:menuItem label = "New" />
<rich:menuItem label = "Open File..." />
<rich:menuItem label = "Close" />
<rich:menuItem label = "Close All" />
</rich:dropDownMenu>
</rich:toolbar>
</h:form>
</h:body>
</html>
위의 예에서는 하나의 도구 모음을 만들고 그 도구 모음 안에 하나의 드롭 다운 메뉴를 만들고 있습니다. 드롭 다운 메뉴를 원하는만큼 만들 수 있습니다. 액션 기반 JS 함수를 삽입하려면 속성이 "action"인 <menuItem> 태그 내부에 구현할 수 있습니다. 위의 코드는 브라우저에서 다음과 같은 출력을 생성합니다.
<rich : contextMenu>
이 태그는 클라이언트 측에서 이벤트 기반 드롭 다운을 생성하는 데 유용합니다. 자동으로 작동하지 않습니다. 사용자는 JS 이벤트를 생성해야하며 그에 따라 작동합니다. 다음 예제에서는 렌더 이미지를 생성 한 다음 사용자 응답을 기반으로 JS 이벤트를 생성합니다. 다음은 xhtml 파일입니다.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>ContextMenu Example</title>
</h:head>
<h:body>
<h:form id = "form">
<h:outputScript>
//<![CDATA[
function resize(pic, coeff) {
var w = Math.round(pic.width * coeff);
var h = Math.round(pic.height * coeff);
if (w > 1 && h > 1 && h<1000 && w<1000) {
pic.width = w;
pic.heigth = h;
}
}
function enlarge(element){
resize(element, 1.1);
}
function decrease(element){
resize(element, 0.9);
}
//]]>
</h:outputScript>
<h:graphicImage value = "http://www.tutorialspoint.com/images/jsf-minilogo.png"
id = "pic" style = "border : 5px solid #E4EAEF"/>
<rich:contextMenu target = "pic" mode = "client" showEvent = "click">
<rich:menuItem label = "Zoom In" onclick =
"enlarge(#{rich:element('pic')});" id = "zin"/>
<rich:menuItem label = "Zoom Out"
onclick = "decrease(#{rich:element('pic')});" id = "zout"/>
</rich:contextMenu>
</h:form>
</h:body>
</html>
위의 예를 실행하고 렌더링 된 이미지를 선택합니다. "확대"및 "축소"옵션이 표시됩니다. 적절한 옵션을 클릭하면 필요한 기능이 이미지에 적용됩니다. 위의 코드는 브라우저에서 다음과 같은 출력을 생성합니다.
<rich : 구성 요소 제어>
이 구성 요소는 RichFaces 환경에서 다른 함수를 호출 할 때마다 사용자 친화적입니다. 이 태그는 JavaScript 기반 작업 클래스를 호출하는 데 사용됩니다. 다음 예제는이 태그를 사용하는 방법을 보여줍니다. 파일을 만들고 "componentContent.xhtml"파일로 이름을 지정합니다. 그 안에 다음 코드를 넣으십시오.
<?xml version = "1.0" encoding = "UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>Component Control Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
</h:head>
<h:body>
<h:commandButton value = "Call the popup">
<rich:componentControl target = "popup" operation = "show" />
</h:commandButton>
<rich:popupPanel id = "popup" modal = "false" autosized = "true" resizeable = "false">
<f:facet name = "header">
<h:outputText value = "Welcome mesage" />
</f:facet>
<f:facet name = "controls">
<h:outputLink value = "#"
onclick = "#{rich:component('popup')}.hide(); return false;"
style = "color: inherit">
X
</h:outputLink>
</f:facet>
<p>Welcome to RICH FACE tutorial at tutorialspoint.com</p>
</rich:popupPanel>
</h:body>
</html>
위의 코드에서 우리는 id“popup”을 사용하여“onclick ()”함수를 호출하고 있습니다. 실행하면 "팝업 호출"버튼이 표시됩니다. 버튼을 클릭하면 RichFaces는 내부적으로 JS 함수를 호출하고 브라우저에 다음 출력을 제공합니다.