RichFaces - komponenty wyjściowe
W poprzednim rozdziale dowiedzieliśmy się o różnych polach wejściowych lub tagach, które pomagają użytkownikowi wprowadzić dane wejściowe za pośrednictwem przeglądarki. W tym rozdziale poznamy różne komponenty wyjściowe dostarczane przez RichFaces.
<rich: Panel>
W niektórych z naszych poprzednich przykładów już natrafiliśmy na tag panelu. <rich: panel> tworzy prostokątny obszar wewnątrz strony internetowej, który może zawierać dowolne informacje. W jednym panelu można umieścić inne panele, obrazy i inne bogate komponenty.
W poniższym przykładzie utworzymy niestandardowy panel zgodnie z wyborem i dostarczymy nagłówek do naszego panelu za pomocą atrybutu „header”. Utwórz plik xhtml i nazwij go „richPanelExamlple.xhtml”. Umieść w nim następujący kod.
<?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>
Powyższy fragment kodu przyniesie następujące wyniki w przeglądarce.
<rich: simpleTogglePanel>
SimpleTogglePanel daje programistom możliwość dynamicznej zmiany zawartości panelu. Jednak w RichFaces 4 ten tag został pominięty. JBoss wprowadził zaawansowane tagi, takie jak <rich: togglePanel>, <rich: tab> i <rich: tabPanel>. Zaleca się używanie zaktualizowanej wersji tagów RichFaces, aby uzyskać więcej funkcji i funkcji. Jeśli nadal używasz RichFaces 3, możesz użyć następującego tagu.
<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>
Ten tag pomaga programistom tworzyć różne zakładki w panelu. Użyliśmy tego tagu w naszym rozdziale o skórze, w którym utworzyliśmy dwa oddzielne tagi w innym panelu. Poniższy kod opisuje, jak używamy <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>
W tym przykładzie utworzyliśmy dwie zakładki z różnymi nagłówkami o nazwach „Nazwa” i „Funkcje”. Te dwa tagi zostaną utworzone wewnątrz <rich: panel>. Powyższy kod da następujący wynik.
<rich: panelBar>
Podobnie jak simpleToggleBar, pozwala programistom na zaimplementowanie przełączania pionowego w zależności od jakiegoś zdarzenia JS. Ten tag jest również pomijany w RichFaces 4. Jednak możesz go użyć, jak pokazano poniżej, jeśli używasz 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 >
W RichFaces 4 ta sama funkcjonalność została zaimplementowana za pomocą tagu <rich: PanelMenu>.
<rich: tab>
Znamy już ten tag. W przykładzie <rich: tabPanel> utworzyliśmy różne karty z tym tagiem. W poniższym przykładzie utworzyliśmy dwa tagi.
<?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>
Powyższy fragment kodu wygeneruje następujące dane wyjściowe w przeglądarce.
<rich: panelMenu>
Menu panelu pomaga programistom w tworzeniu pionowego przełącznika rozwijanego w obszarze panelu. Poniższy przykład pomoże nam lepiej zrozumieć ten tag. Utwórz plik „richPanelMenu.xhtml” i umieść w nim następujący fragment kodu.
<?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>
Jak widać na powyższym przykładzie, panelMenu zawiera kilka innych powiązanych tagów, które pomagają w inny sposób. <panelGrid> pomaga utworzyć siatkę wewnątrz panelu. <panelMenuGroup> pomaga grupować różne komponenty, które zamierzamy zapełnić. <panelMenuItem> to rzeczywisty element, który będzie renderowany w przeglądarce. Korzystając z atrybutu „action”, możesz wywołać różne metody działania w zależności od wybranego elementu. Atrybut „label” służy do wypełniania wartości w interfejsie użytkownika, a wyrenderowana wartość zostanie przetworzona na zaplecze po wywołaniu określonej klasy akcji.
Powyższy fragment kodu przyniesie następujące wyniki w przeglądarce.
<rich: TogglePanel>
Ten znacznik służy do renderowania różnych wyjść, które można przełączać lub przełączać za pomocą metody sterowania Toggle. Ta metoda przełączania sterowania może zostać wdrożona lub dostosowana. W poniższym przykładzie zaimplementujemy tę metodę.
Utwórz plik xhtml i nazwij go „richTogglePanel.xhtml”. Umieść w nim następujący kod.
<?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>
Musimy również utworzyć klasę bean, aby kontrolować przenoszenie witryny. Utwórz klasę „MenuBean.java” podobną do poniższej.
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());
}
}
Powyższy kod przyniesie następujące wyniki w przeglądarce.
W powyższym przykładzie zawartość strony zmieni się w zależności od przycisku klikniętego przez użytkownika. „UpdateCurrent ()” to metoda, która obsługuje zawartość zdarzenia JS i ustawia zawartość witryny w ruchu.
<rich: toolBar>
ToolBar służy do tworzenia poziomego paska w panelu. Służy do tworzenia menu najwyższego poziomu na stronie internetowej. W poniższym przykładzie nauczymy się, jak używać tego tagu na stronie internetowej. Utwórz plik „xhtml” i nazwij go „toolbar.xhml”. Umieść w nim następujący kod.
<?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>
Powyższy kod przyniesie następujące wyniki w przeglądarce.
W powyższym przykładzie tag <toolbarGroup> służy do grupowania różnych typów narzędzi. Można utworzyć dowolną liczbę grup. Lokalizacja określa położenie strony internetowej, na której zostanie umieszczony przycisk.
<rich: separator>
Jak sama nazwa wskazuje, służy do oddzielania różnych komponentów na stronie. Ten tag został pominięty w RichFaces 4, jednak jeśli nadal używasz RichFaces 3, możesz użyć następującego tagu.
<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/>
W powyższym przykładzie LineType jest atrybutem, który pomaga nam określić typ separatora, którego chcemy użyć. Wszystkie te nazwy separatorów mają charakter samoopisowy.
<rich: Spacer>
Spacer to opisywany przez siebie tag, który pomaga deweloperowi zapewnić odstęp między dwoma komponentami. Ten tag jest również pomijany w RichFaces4 wraz z innymi tagami, jednak możesz użyć następującego kodu, jeśli używasz RichFaces 3.
<rich:spacer width = "1" height = "5" title = "Here is a spacer..."/>
<rich: modalPanel>
Panel modalny służy do wyświetlania wyskakujących okienek w podróży. W RichFaces 4 tag panelu modalnego został zmieniony napopupPanel. W poniższym przykładzie zobaczymy, jak to działa. Utwórz plik xhtml i nazwij go „PopingUp.xhtml”. Umieść w nim następujący kod.
<?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>
Powyższy przykład wygeneruje następujący wynik po kliknięciu przycisku „ClickMe”.