RichFaces - Các thành phần đầu ra
Trong chương trước, chúng ta đã tìm hiểu về các trường hoặc thẻ nhập khác nhau giúp người dùng cung cấp đầu vào thông qua trình duyệt. Trong chương này, chúng ta sẽ tìm hiểu về các thành phần đầu ra khác nhau được cung cấp bởi RichFaces.
<rich: Panel>
Trong một số ví dụ trước đây của chúng tôi, chúng tôi đã bắt gặp thẻ bảng điều khiển. <rich: panel> tạo một vùng hình chữ nhật bên trong trang web, vùng này có thể chứa bất kỳ thông tin nào. Bạn có thể bao gồm các bảng khác, hình ảnh và bất kỳ thành phần phong phú nào khác bên trong một bảng.
Trong ví dụ sau, chúng tôi sẽ tạo một bảng điều khiển tùy chỉnh theo sự lựa chọn và chúng tôi sẽ cung cấp tiêu đề cho bảng điều khiển của mình bằng cách sử dụng thuộc tính "header". Vui lòng tạo một tệp xhtml và đặt tên là “richPanelExamlple.xhtml”. Đặt mã sau vào bên trong nó.
<?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>Đoạn mã trên sẽ mang lại kết quả sau trong trình duyệt.
<rich: simpleTogglePanel>
SimpleTogglePanel tạo cơ hội cho các nhà phát triển thay đổi nội dung của bảng điều khiển theo cách năng động. Tuy nhiên, trong RichFaces 4, thẻ này đã bị chặn. JBoss đã giới thiệu các thẻ nâng cao như <rich: togglePanel>, <rich: tab> và <rich: tabPanel>. Bạn nên sử dụng phiên bản cập nhật của thẻ RichFaces để có thêm các tính năng và chức năng. Nếu bạn vẫn đang sử dụng RichFaces 3, thì bạn có thể sử dụng thẻ sau.
<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>
Thẻ này giúp các nhà phát triển tạo các tab khác nhau bên trong một bảng điều khiển. Chúng tôi đã sử dụng thẻ này trong chương da của mình, nơi chúng tôi đã tạo hai thẻ riêng biệt bên trong một bảng điều khiển khác. Đoạn mã sau sẽ mô tả cách chúng tôi sử dụng <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>Trong ví dụ này, chúng tôi đã tạo hai tab với các tiêu đề khác nhau được gọi là “Tên” và “Tính năng”. Hai thẻ này sẽ được tạo bên trong <rich: panel>. Đoạn mã trên sẽ mang lại kết quả sau.
<rich: panelBar>
Giống như simpleToggleBar, nó cho phép các nhà phát triển thực hiện chuyển đổi dọc tùy thuộc vào một số sự kiện JS. Thẻ này cũng bị loại bỏ trong RichFaces 4. Tuy nhiên, bạn có thể sử dụng nó như hình bên dưới nếu bạn đang sử dụng 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 >Trong RichFaces 4, chức năng tương tự đã được triển khai bằng thẻ <rich: PanelMenu>.
<rich: tab>
Chúng tôi đã quen thuộc với thẻ này. Trong ví dụ về <rich: tabPanel>, chúng tôi đã tạo các tab khác nhau với thẻ này. Trong ví dụ sau, chúng tôi đã tạo hai thẻ.
<?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>Đoạn mã trên sẽ tạo ra kết quả sau trong trình duyệt.
<rich: panelMenu>
Menu Panel giúp các nhà phát triển tạo một menu thả xuống dọc bên trong một vùng bảng điều khiển. Ví dụ sau sẽ giúp chúng ta hiểu rõ hơn về thẻ này. Tạo tệp “richPanelMenu.xhtml” và đặt đoạn mã sau vào bên trong nó.
<?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>Như đã thấy trong ví dụ trên, panelMenu đi kèm với một số thẻ liên kết khác giúp hỗ trợ theo một cách khác. <panelGrid> giúp tạo lưới bên trong bảng điều khiển. <panelMenuGroup> giúp nhóm các thành phần khác nhau mà chúng ta sẽ điền. <panelMenuItem> là mục thực tế sẽ được hiển thị cho trình duyệt. Sử dụng thuộc tính "action", bạn có thể gọi các phương thức hành động khác nhau tùy thuộc vào mục đã chọn. Thuộc tính "label" được sử dụng để điền giá trị vào giao diện người dùng và giá trị được hiển thị sẽ được xử lý ở giao diện người dùng sau khi lớp hành động được chỉ định được gọi.
Đoạn mã trên sẽ mang lại kết quả sau trong trình duyệt.
<rich: TogglePanel>
Thẻ này được sử dụng để hiển thị các đầu ra khác nhau có thể được chuyển đổi hoặc chuyển đổi bằng cách sử dụng phương pháp điều khiển Toggle. Phương pháp điều khiển bật tắt này có thể được thực hiện hoặc tùy chỉnh. Trong ví dụ sau, chúng tôi sẽ thực hiện phương pháp này.
Tạo tệp xhtml và đặt tên là “richTogglePanel.xhtml”. Đặt mã sau vào bên trong nó.
<?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>Chúng ta cũng cần tạo một lớp bean để kiểm soát quá trình chuyển đổi của trang web. Tạo lớp “MenuBean.java” như sau.
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());
}
}Đoạn mã trên sẽ mang lại kết quả sau trong trình duyệt.
Trong ví dụ trên, nội dung của trang web sẽ được thay đổi tùy thuộc vào nút mà người dùng nhấp vào. “UpdateCurrent ()” là phương thức xử lý nội dung sự kiện JS và thiết lập nội dung trang web khi di chuyển.
<rich: toolBar>
toolBar được sử dụng để tạo một thanh ngang trong bảng điều khiển. Nó được sử dụng để tạo menu cấp cao nhất trong trang web. Trong ví dụ sau, chúng ta sẽ tìm hiểu cách sử dụng thẻ này trong trang web. Tạo tệp “xhtml” và đặt tên là “toolbar.xhml”. Đặt mã sau vào đó.
<?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>Đoạn mã trên sẽ mang lại kết quả sau trong trình duyệt.
Trong ví dụ trên, thẻ <toolbarGroup> được sử dụng để nhóm các loại công cụ giống nhau khác nhau. Có thể tạo bất kỳ số lượng nhóm nào. Vị trí cung cấp vị trí của trang web, nơi nút sẽ được đặt.
<rich: partition>
Như tên cho thấy, nó được sử dụng để tách các thành phần khác nhau trên trang web. Thẻ này đã bị chặn trong RichFaces 4, tuy nhiên, nếu bạn vẫn đang sử dụng RichFaces 3, thì bạn có thể sử dụng thẻ sau.
<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/>Trong ví dụ trên, LineType là thuộc tính giúp chúng ta xác định loại dấu phân cách mà chúng ta muốn sử dụng. Tất cả các tên phân cách này đều có bản chất tự mô tả khá nhiều.
<rich: Spacer>
Spacer là một thẻ tự mô tả giúp nhà phát triển cung cấp khoảng trống giữa hai thành phần. Thẻ này cũng bị loại bỏ trong RichFaces4 cùng với các thẻ khác, tuy nhiên, bạn có thể sử dụng mã sau nếu bạn đang sử dụng RichFaces 3.
<rich:spacer width = "1" height = "5" title = "Here is a spacer..."/><rich: modalPanel>
Modal Panel được sử dụng để hiển thị cửa sổ bật lên khi đang di chuyển. Trong RichFaces 4, thẻ bảng điều khiển phương thức đã được thay đổi thànhpopupPanel. Trong ví dụ sau, chúng ta sẽ xem nó hoạt động như thế nào. Tạo tệp xhtml và đặt tên là “PopingUp.xhtml”. Đặt mã sau vào đó.
<?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>Ví dụ trên sẽ tạo ra kết quả sau khi nhấp vào nút “ClickMe”.
