RichFaces-출력 구성 요소

이전 장에서 사용자가 브라우저를 통해 입력을 제공하는 데 도움이되는 다양한 입력 필드 또는 태그에 대해 배웠습니다. 이 장에서는 RichFaces에서 제공하는 다양한 출력 구성 요소에 대해 알아 봅니다.

<rich : 패널>

이전 예제 중 일부에서 이미 패널 태그를 발견했습니다. <rich : panel>은 웹 페이지 내부에 정보를 포함 할 수있는 직사각형 영역을 만듭니다. 하나의 패널 안에 다른 패널, 이미지 및 기타 다양한 구성 요소를 포함 할 수 있습니다.

다음 예에서는 선택 사항에 따라 사용자 정의 패널을 만들고 "header"속성을 사용하여 패널에 헤더를 제공합니다. xhtml 파일을 만들고 이름을 "richPanelExamlple.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>Panel Example</title> 
   </h:head> 
   
   <h:body> 
      <rich:panel header = "RichFace Tutorials " style = "font-size: 500px; 
         align-items:center; background-color: activecaption"> 
         
         RichFace Tutorials Presented by TutorialsPoint.com.      
      </rich:panel> 
   </h:body>
</html>

위의 코드는 브라우저에서 다음과 같은 출력을 생성합니다.

<rich : simpleTogglePanel>

simpleTogglePanel은 개발자에게 패널의 포함을 동적으로 변경할 수있는 기회를 제공합니다. 그러나 RichFaces 4에서는이 태그가 억제되었습니다. JBoss는 <rich : togglePanel>, <rich : tab> 및 <rich : tabPanel>과 같은 고급 태그를 도입했습니다. 더 많은 기능을 위해 업데이트 된 버전의 RichFaces 태그를 사용하는 것이 좋습니다. 여전히 RichFaces 3을 사용하는 경우 다음 태그를 사용할 수 있습니다.

<ui:composition xmlns = "http://www.w3.org/1999/xhtml" 
   xmlns:ui = "http://java.sun.com/jsf/facelets" 
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:f = "http://java.sun.com/jsf/core" 
   xmlns:a4j = "http://richfaces.org/a4j" 
   xmlns:rich = "http://richfaces.org/rich"> 
   
   <rich:simpleTogglePanel switchType = "client" label = "SimpleToggle"> 
      The simple example of SimpleToggle tag 
   </rich:simpleTogglePanel>    
</ui:composition>

<rich : tabPanel>

이 태그는 개발자가 패널 내에 다른 탭을 만드는 데 도움이됩니다. 우리는 스킨 챕터에서이 태그를 사용했습니다. 여기서 다른 패널 안에 두 개의 별도 태그를 만들었습니다. 다음 코드는 <rich : tabPanel>을 사용하는 방법을 설명합니다.

<?xml version = '1.0' encoding = 'UTF-8' ?>    
<ui:composition 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">   
   
   <f:view>   
      <h:head>   
         <title>Rich Faces Tab Example</title>   
      </h:head>   
      
      <h:body>   
         <h:form>   
            <rich:panel style = "width:60%"> 
               
               <rich:tabPanel switchType = "AJAX"> 
                  <rich:tab header = "Name"> 
                     Tutorials Point----This is Tab Number 1 
                  </rich:tab> 
                  
                  <rich:tab header = "Features"> 
                     Best Place to learn -------This is Tab Number 2 
                  </rich:tab> 
               </rich:tabPanel> 
            </rich:panel>  
            
         </h:form>   
      </h:body> 
      
   </f:view>   
</ui:composition>

이 예에서는 "이름"과 "기능"이라는 서로 다른 헤더가있는 두 개의 탭을 만들었습니다. 이 두 태그는 <rich : panel> 내에 생성됩니다. 위의 코드는 다음 출력을 생성합니다.

<rich : panelBar>

simpleToggleBar와 마찬가지로 개발자가 일부 JS 이벤트에 따라 수직 토글을 구현할 수 있습니다. 이 태그는 RichFaces 4에서도 표시되지 않습니다. 그러나 RichFaces 3.0을 사용하는 경우 아래와 같이 사용할 수 있습니다. .

<ui:composition xmlns = "http://www.w3.org/1999/xhtml" 
   xmlns:ui = "http://java.sun.com/jsf/facelets" 
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:f = "http://java.sun.com/jsf/core" 
   xmlns:a4j = "http://richfaces.org/a4j" 
   xmlns:rich = "http://richfaces.org/rich">  
   
   <rich:panelBar height = "400" width = "500"> 
      <rich:panelBarItem   label = "Toggle1”> 
         First vertical toggle 
      </rich:panelBarItem> 
      
      <rich:panelBarItem  label = ”Toggle2”> 
         Second Vertical Toggle 
      </rich:panelBarItem> 
   </rich:panelBar >
   
</ ui:composition >

RichFaces 4에서는 <rich : PanelMenu> 태그를 사용하여 동일한 기능이 구현되었습니다.

<rich : tab>

우리는 이미이 태그에 익숙합니다. <rich : tabPanel> 예제에서는이 태그를 사용하여 다른 탭을 만들었습니다. 다음 예에서는 두 개의 태그를 생성했습니다.

<?xml version = '1.0' encoding = 'UTF-8' ?>    
<ui:composition 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">   
   
   <f:view>   
      <h:head>   
         <title>Rich Faces Tab Example</title>   
      </h:head>   
      
      <h:body>   
         <h:form>   
            
            <rich:panel style = "width:60%"> 
               <rich:tabPanel switchType = "AJAX"> 
                  <rich:tab header = "Name"> 
                     Tutorials Point----This is Tab Number 1 
                  </rich:tab> 
                  
                  <rich:tab header = "Features"> 
                     Best Place to learn -------This is Tab Number 2 
                  </rich:tab> 
               </rich:tabPanel> 
            </rich:panel> 
            
         </h:form>   
      </h:body> 
      
   </f:view>   
</ui:composition>

위의 코드는 브라우저에서 다음과 같은 출력을 생성합니다.

<rich : panelMenu>

패널 메뉴는 개발자가 패널 영역 내부에 수직 드롭 다운 토글을 만드는 데 도움이됩니다. 다음 예는이 태그를 더 잘 이해하는 데 도움이됩니다. "richPanelMenu.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>Panel Menu example</title> 
   </h:head> 
    
   <h:body> 
      <h:form id = "form"> 
         <h:panelGrid columns = "2" columnClasses = "cols,cols" width = "400"> 
            <rich:panelMenu style = "width:200px"> 
               
               <rich:panelMenuGroup label = "Group 1"> 
                  <rich:panelMenuItem label = "Database" action = "#{managedBean.subjectList}"> 
                     <f:param name = "current" value = "DB"/> 
                  </rich:panelMenuItem> 
                  
                  <rich:panelMenuItem label = "Oracle" action = "#{managedBean.subjectList}"> 
                     <f:param name = "current" value = "Oracle"/>  
                  </rich:panelMenuItem> 
                  
                  <rich:panelMenuItem label = "JAVA" action = "#{managedBean.subjectList}"> 
                     <f:param name = "current" value = "JAVA"/> 
                  </rich:panelMenuItem> 
               </rich:panelMenuGroup>
               
            </rich:panelMenu> 
         </h:panelGrid> 
      </h:form> 
   </h:body>
   
</html>

위의 예에서 볼 수 있듯이 panelMenu는 다른 방식으로 도움이되는 다른 관련 태그와 함께 제공됩니다. <panelGrid>는 패널 내부에 그리드를 만드는 데 도움이됩니다. <panelMenuGroup>은 채울 다양한 구성 요소를 그룹화하는 데 도움이됩니다. <panelMenuItem>은 브라우저에 렌더링 될 실제 항목입니다. "action"속성을 사용하면 선택한 항목에 따라 다른 작업 메소드를 호출 할 수 있습니다. "label"속성은 프런트 엔드의 값을 채우는 데 사용되며 지정된 액션 클래스가 호출되면 렌더링 된 값이 백 엔드로 처리됩니다.

위의 코드는 브라우저에서 다음과 같은 출력을 생성합니다.

<rich : TogglePanel>

이 태그는 Toggle 컨트롤 메서드를 사용하여 전환하거나 전환 할 수있는 다양한 출력을 렌더링하는 데 사용됩니다. 이 토글 제어 방법은 구현하거나 사용자 정의 할 수 있습니다. 다음 예에서는이 메서드를 구현합니다.

xhtml 파일을 만들고 이름을 "richTogglePanel.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>Rich Toggle Panel Example</title> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/> 
   </h:head> 
   
   <h:body> 
      <h:form id = "form"> 
         <rich:togglePanel id = "panel1" activeItem = "item1" 
            itemChangeListener = "#{panelMenuBean.updateCurrent}"> 
            
            <rich:togglePanelItem name = "item1"> 
               <p>Content of the toggle 1</p> 
            </rich0:togglePanelItem> 
            
            <rich:togglePanelItem name = "item2"> 
                <p>Content of the toggle 2</p> 
            </rich:togglePanelItem> 
         </rich:togglePanel> 
            
         <a4j:outputPanel id = "tabs" layout = "block"> 
            <a4j:outputPanel layout = "block" styleClass = "tabDiv"> 
               <rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item1" /> 
               <a4j:commandButton value = "Toggle1"/> 
            </a4j:outputPanel> 
            
            <a4j:outputPanel layout = "block" styleClass = "tabDiv"> 
               <rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item2" /> 
               <a4j:commandButton value = "Toggle2"/> 
            </a4j:outputPanel> 
         </a4j:outputPanel>
         
      </h:form> 
   </h:body>
   
</html>

또한 웹 사이트의 전환을 제어하기 위해 빈 클래스를 만들어야합니다. 다음과 같이“MenuBean.java”클래스를 생성합니다.

import javax.faces.bean.ManagedBean; 
import javax.faces.bean.ViewScoped; 
import org.richfaces.event.ItemChangeEvent; 
  
@ManagedBean 
@ViewScoped 

public class MenuBean { 
   private String current; 
   private boolean singleMode; 
  
   public boolean isSingleMode() { 
      return singleMode; 
   } 
   public void setSingleMode(boolean singleMode) { 
      this.singleMode = singleMode; 
   } 
   public String getCurrent() { 
      return this.current; 
   } 
   public void setCurrent(String current) { 
      this.current = current; 
   } 
   public void updateCurrent(ItemChangeEvent event) { 
      setCurrent(event.getNewItemName()); 
   }
}

위의 코드는 브라우저에서 다음 출력을 생성합니다.

위의 예에서는 사용자가 클릭 한 버튼에 따라 웹 페이지의 내용이 변경됩니다. "updateCurrent ()"는 JS 이벤트 컨텐츠를 처리하고 이동 중에 웹 사이트 컨텐츠를 설정하는 메소드입니다.

<rich : toolBar>

toolBar는 패널에 가로 막대를 만드는 데 사용됩니다. 웹 페이지에서 최상위 메뉴를 만드는 데 사용됩니다. 다음 예에서는 웹 페이지에서이 태그를 사용하는 방법을 배웁니다. "xhtml"파일을 만들고 이름을 "toolbar.xhml"로 지정합니다. 그 안에 다음 코드를 넣으십시오.

<?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>ToolBar Example</title> 
   </h:head> 
   
   <h:body> 
      <rich:panel> 
         <rich:toolbar height = "26" itemSeparator = "grid"> 
            <rich:toolbarGroup location = "left"> 
               <h:commandButton styleClass = "barsearchbutton" 
                  onclick = "return false;" value = "TAB" /> 
            </rich:toolbarGroup> 
            
            <rich:toolbarGroup location = "left"> 
               <h:commandButton styleClass = "barsearchbutton" 
                  onclick = "return false;" value = "TAB2" /> 
            </rich:toolbarGroup> 
            
            <rich:toolbarGroup location = "left"> 
               <h:commandButton styleClass = "barsearchbutton" 
                  onclick = "return false;" value = "TAB3" /> 
            </rich:toolbarGroup> 
         </rich:toolbar>
 
      </rich:panel> 
   </h:body>
   
</html>

위의 코드는 브라우저에서 다음 출력을 생성합니다.

위의 예에서 <toolbarGroup> 태그는 서로 다른 동일한 유형의 도구를 그룹화하는 데 사용됩니다. 원하는 수의 그룹을 만들 수 있습니다. 위치는 버튼이 배치 될 웹 페이지의 위치를 ​​제공합니다.

<rich : separator>

이름에서 알 수 있듯이 웹 페이지에서 서로 다른 구성 요소를 구분하는 데 사용됩니다. 이 태그는 RichFaces 4에서 표시되지 않았지만 여전히 RichFaces 3을 사용하는 경우 다음 태그를 사용할 수 있습니다.

<rich:separator lineType = "beveled" height = "8" width = "75%" align = "center"/>
<p>Here is more examples of different line types:</p> 

<rich:separator height = "2" lineType = "dotted"/><br/> 
<rich:separator height = "2" lineType = "dashed"/><br/> 
<rich:separator height = "4" lineType = "double"/><br/>
<rich:separator height = "2" lineType = "solid"/><br/>

위의 예에서 LineType은 사용할 구분 기호 유형을 결정하는 데 도움이되는 속성입니다. 이러한 모든 구분자 이름은 본질적으로 거의 자체 설명 적입니다.

<rich : 스페이서>

Spacer는 개발자가 두 구성 요소 사이에 공간을 제공하는 데 도움이되는 자체 설명 태그입니다. 이 태그는 다른 태그와 함께 RichFaces4에서도 표시되지 않지만 RichFaces 3을 사용하는 경우 다음 코드를 사용할 수 있습니다.

<rich:spacer width = "1" height = "5" title = "Here is a spacer..."/>

<rich : modalPanel>

모달 패널은 이동 중에 팝업을 표시하는 데 사용됩니다. RichFaces 4에서 모달 패널 태그가 다음과 같이 변경되었습니다.popupPanel. 다음 예에서 어떻게 작동하는지 살펴 보겠습니다. xhtml 파일을 만들고 이름을 "PopingUp.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>ModalPanel and popupPanel</title> 
   </h:head> 
    
   <h:body> 
      <h:form> 
         <h:commandButton value = "Click ME">  
            <rich:componentControl target = "popup" operation = "show" /> 
         </h:commandButton> 
         
         <rich:popupPanel id = "popup" modal = "true" autosized = "false" 
            resizeable = "false"> 
            
            Hey !!!
            How are you? 
         </rich:popupPanel> 
      </h:form>   
   </h:body>
   
</html>

위의 예제는“ClickMe”버튼을 클릭하면 다음과 같은 출력을 생성합니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved