RichFaces - ส่วนประกอบอินพุต
จนถึงตอนนี้เราได้เรียนรู้มากมายเกี่ยวกับส่วนประกอบ AJAX ต่างๆของ RichFaces พร้อมกับฟังก์ชันใหม่ที่เรียกว่า“ Skin” ในบทนี้เราจะเรียนรู้ส่วนประกอบ“ Rich” ต่างๆที่ RichFaces นำเสนอเพื่อพัฒนาเว็บแอปพลิเคชันที่ทันสมัย ต่อไปนี้เป็นส่วนประกอบอินพุตต่างๆที่มีให้โดย“ RichFaces”
<rich: inplaceInput>
Rich inplaceInput ให้โอกาสในการสร้างกล่องข้อความที่แก้ไขได้แทนที่จะเป็นกล่องข้อความป้อนข้อมูลปกติ ในตัวอย่างต่อไปนี้เราจะสร้างกล่องข้อความที่แก้ไขได้โดยใช้ส่วนประกอบนี้ สร้างไฟล์ xhtml และตั้งชื่อเป็น“ richinplaceInput.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>TODO supply a title</title>
</h:head>
<h:body>
<f:view></f:view>
<h:form>
<rich:inplaceInput value = "#{managedBean.message}"
defaultLabel = "Enter Your Name"/>
</h:form>
</h:body>
</html>
บันทึกไฟล์นี้และเรียกใช้ ต่อไปนี้จะเป็นผลลัพธ์ในเบราว์เซอร์
พิมพ์อะไรก็ได้ตามต้องการในกล่องข้อความนั้นแล้วกด Enter แท็กนี้ยังมีตัวเลือกการแก้ไขแบบอินไลน์ สิ่งต่อไปนี้จะถูกส่งออกหลังจากแก้ไข
<rich: inplaceSelect>
นี่คือมาร์กอัปอินพุตอื่นที่ RichFaces จัดให้ซึ่งผู้ใช้สามารถเลือกค่าอินพุตจากรายการแบบเลื่อนลงซึ่งเป็นแบบอินไลน์และแก้ไขได้ในลักษณะเดียวกัน เราจำเป็นต้องเติมข้อมูลแบบเลื่อนลงจากคลาส bean ภายใน โปรดสร้างไฟล์“ xhtml” และตั้งชื่อว่า“ richinplaceSelectExample.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>TODO supply a title</title>
</h:head>
<h:body>
<h:form>
<rich:inplaceSelect value = "#{subject.subjectName}" defaultLabel = "Click to Select Country">
<f:selectItems value = "#{subject.SubJectList()}"></f:selectItems>
</rich:inplaceSelect>
</h:form>
</h:body>
</html>
ในตัวอย่างข้างต้นเราจะเติมตัวเลือกแบบเลื่อนลงจากแบ็กเอนด์ นี่คือคลาส bean ชื่อ "subject.java"
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Subject {
String SubjectName;
public Subject() {
}
public Subject(String SubjectName) {
this.SubjectName = SubjectName;
}
public List<String> SubJectList() {
//this list to be rendered
ArrayList<String> list = new ArrayList<>();
list.add("JAVA");
list.add("DOTNET");
list.add("COBOL");
list.add("AJAX");
list.add("JAVA SCRIPT");
return list;
}
public String getSubjectName() {
return SubjectName;
}
public void setSubjectName(String SubjectName) {
this.SubjectName = SubjectName;
}
}
ชื่อเรื่องทั้งหมดที่เราส่งผ่านรายการจะแสดงในเมนูแบบเลื่อนลง ต่อไปนี้จะเป็นผลลัพธ์หลังจากเรียกใช้แอปพลิเคชันนี้
<rich: SuggestionBox>
<rich: SuggestionBox> ใช้เพื่อให้คำแนะนำแก่ผู้ใช้โดยขึ้นอยู่กับอินพุตที่ระบุในกล่องข้อความอินพุต แท็กนี้สร้างเหตุการณ์ JS ภายในและเรียกใช้คลาส istener ที่จำเป็นเพื่อให้คำแนะนำจากแบ็กเอนด์ ขออภัยทั้งสองข้อเสนอแนะนี้และ ComboBox รวมกันเป็นแท็กแยกต่างหากชื่อ“ <rich: autocomplete>” ใน RichFaces 4 อย่างไรก็ตามหากคุณใช้ RichFaces 3 คุณสามารถใช้แท็กนี้ได้ตามที่แสดงด้านล่าง
<h:inputText id = "city" value = "#{capitalsBean.capital}" />
<rich:suggestionbox for = "city" var = "result"
suggestionAction = "#{capitalsBean.autocomplete}">
<h:column>
<h:outputText value = "#{result.name}" />
</h:column>
</rich:suggestionbox>
โดยที่“ capitalsBean” จะเป็นคลาส Java ที่มีพารามิเตอร์ต่างกันและคลาส Listener ที่ชื่อ“ เติมข้อความอัตโนมัติ” จะกำหนดค่าของตัวแปรอินสแตนซ์“ capital” ที่รันไทม์และระบุเอาต์พุตที่ต้องการ ขอแนะนำอย่างยิ่งให้ใช้ RichFaces 4 "เติมข้อความอัตโนมัติ" แทนการใช้แท็กนี้เนื่องจากนักออกแบบไม่สนับสนุนแท็กนี้อีกต่อไป
<rich: comboBox>
<rich: comboBox> ทำงานคล้ายกับ <rich: SuggestionBox> ทุกประการอย่างไรก็ตามแทนที่จะเรียกคลาส Listener แท็กนี้แสดงคำแนะนำล่วงหน้าในเบราว์เซอร์ไคลเอนต์ที่โต้ตอบกันและให้ผลลัพธ์ที่ต้องการ เช่นเดียวกับ <rich: sugegstionBox> คุณลักษณะนี้ยังมีการหักค่าเสื่อมราคาในเวอร์ชันใหม่ด้วยแท็กอื่นที่เรียกว่า "<rich: autocomplete>" ที่อธิบายไว้ในโค้ดต่อไปนี้
สร้างไฟล์แยกต่างหากและตั้งชื่อเป็น“ richAutoComplete.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 id = "form">
<h:form id = "form">
<rich:autocomplete mode = "cachedAJAX" minChars = "2"
autocompleteMethod = "#{autoComplete.SubJectList()}" />
</h:form>
</h:form>
</h:body>
</html>
ในตัวอย่างข้างต้นเรากำลังเติมข้อมูลรายการเรื่องผ่านคุณสมบัติการเติมข้อความอัตโนมัติของ RichFaces สร้างคลาส Java อื่นและตั้งชื่อเป็น“ autoComplete.java”
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class autoComplete {
public autoComplete(){}
private List<String> autoCompleteList=new ArrayList<>();
public List<String> SubJectList() {
//ArrayList<String> list = new ArrayList<>();
autoCompleteList.add("JAVA");
autoCompleteList.add("DOTNET");
autoCompleteList.add("COBOL");
autoCompleteList.add("AJAX");
autoCompleteList.add("JAVA SCRIPT");
return autoCompleteList;
}
public List<String> getAutoCompleteList() {
return autoCompleteList;
}
public void setAutoCompleteList(List<String> autoCompleteList) {
this.autoCompleteList = autoCompleteList;
}
}
ไฟล์ด้านบนทำหน้าที่เป็นคลาส bean และ SubjectList () คือเมธอดซึ่งเป็นการแสดงผลการตอบสนองต่อเบราว์เซอร์ ในแท็ก <SuggestionBox> <ComboBox> เราจำเป็นต้องติดตั้งคลาส Listener อย่างไรก็ตามในกรณีของแท็ก <autocomplete> การสร้างคลาส Listener นี้เป็นแบบอัตโนมัติซึ่งง่ายกว่าสำหรับนักพัฒนา โค้ดด้านบนจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์
<rich: inputNumberSlider>
นี่เป็นแท็กที่ตรงไปตรงมามากซึ่งช่วยให้นักพัฒนาสร้างแถบเลื่อนตัวเลขขึ้นอยู่กับช่วงเวลาที่เป็นตัวเลข สร้างไฟล์“ inputNumberSlider.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>
<h:outputText value = "Slide Bar example"></h:outputText>
<rich:inputNumberSlider
minValue = "1"
maxValue = "10"
showArrows = "false"
showTooltip = "false"
step = "1">
</rich:inputNumberSlider>
</h:form>
</h:body>
</html>
ในตัวอย่างข้างต้นแอตทริบิวต์สามารถอธิบายได้ค่อนข้างมาก โค้ดด้านบนจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์
<rich: ปฏิทิน>
ตามชื่อที่แนะนำแท็กนี้จะช่วยสร้างปฏิทินในเบราว์เซอร์ สร้างไฟล์แยกต่างหากและตั้งชื่อเป็น“ richCalendar.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>
<h1>Calendar</h1>
<rich:calendar value = "#{calendarBean.selectedDate}"
locale = "#{calendarBean.locale}"
popup = "#{calendarBean.popup}"
datePattern = "#{calendar.pattern}"
style = "width:200px">
</rich:calendar>
</h:form>
</h:body>
</html>
เราจำเป็นต้องสร้างคลาสอื่นที่เรียกว่า "calendarBean.java" เพื่อเก็บค่าปฏิทินทั้งหมดเช่น Date, Locale, Date Pattern เป็นต้นต่อไปนี้เป็นรหัสสำหรับ "calendarBean.java"
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
import javax.faces.event.ValueChangeEvent;
public class CalendarBean {
private static final String[] WEEK_DAY_LABELS = new String[] {
"Sun *", "Mon +", "Tue +", "Wed +", "Thu +", "Fri +", "Sat *" };
private Locale locale;
private boolean popup;
private boolean readonly;
private boolean showInput;
private boolean enableManualInput;
private String pattern;
private Date currentDate;
private Date selectedDate;
private String jointPoint;
private String direction;
private String boundary;
private boolean useCustomDayLabels;
public Locale getLocale() {
return locale;
}
public void setLocale(Locale locale) {
this.locale = locale;
}
public boolean isPopup() {
return popup;
}
public void setPopup(boolean popup) {
this.popup = popup;
}
public String getPattern() {
return pattern;
}
public void setPattern(String pattern) {
this.pattern = pattern;
}
public CalendarBean() {
locale = Locale.US;
popup = true;
pattern = "MMM d, yyyy";
jointPoint = "bottomleft";
direction = "bottomright";
readonly = true;
enableManualInput = false;
showInput = true;
boundary = "inactive";
}
public boolean isShowInput() {
return showInput;
}
public void setShowInput(boolean showInput) {
this.showInput = showInput;
}
public boolean isEnableManualInput() {
return enableManualInput;
}
public void setEnableManualInput(boolean enableManualInput) {
this.enableManualInput = enableManualInput;
}
public boolean isReadonly() {
return readonly;
}
public void setReadonly(boolean readonly) {
this.readonly = readonly;
}
public void selectLocale(ValueChangeEvent event) {
String tLocale = (String) event.getNewValue();
if (tLocale != null) {
String lang = tLocale.substring(0, 2);
String country = tLocale.substring(3);
locale = new Locale(lang, country, "");
}
}
public boolean isUseCustomDayLabels() {
return useCustomDayLabels;
}
public void setUseCustomDayLabels(boolean useCustomDayLabels) {
this.useCustomDayLabels = useCustomDayLabels;
}
public Object getWeekDayLabelsShort() {
if (isUseCustomDayLabels()) {
return WEEK_DAY_LABELS;
} else {
return null;
}
}
public String getCurrentDateAsText() {
Date currentDate = getCurrentDate();
if (currentDate ! = null) {
return DateFormat.getDateInstance(DateFormat.FULL).format(currentDate);
}
return null;
}
public Date getCurrentDate() {
return currentDate;
}
public void setCurrentDate(Date currentDate) {
this.currentDate = currentDate;
}
public Date getSelectedDate() {
return selectedDate;
}
public void setSelectedDate(Date selectedDate) {
this.selectedDate = selectedDate;
}
public String getJointPoint() {
return jointPoint;
}
public void setJointPoint(String jointPoint) {
this.jointPoint = jointPoint;
}
public void selectJointPoint(ValueChangeEvent event) {
jointPoint = (String) event.getNewValue();
}
public String getDirection() {
return direction;
}
public void setDirection(String direction) {
this.direction = direction;
}
public void selectDirection(ValueChangeEvent event) {
direction = (String) event.getNewValue();
}
public String getBoundary() {
return boundary;
}
public void setBoundary(String boundary) {
this.boundary = boundary;
}
}
โค้ดด้านบนจะสร้างผลลัพธ์ต่อไปนี้ในเบราว์เซอร์
<rich: InputNumberSpinner>
แท็กนี้ช่วยให้นักพัฒนาสร้างสปินเนอร์เพื่อเติมอินสแตนซ์ของถั่ว ต่อไปนี้เป็นตัวอย่างที่จะช่วยให้คุณเข้าใจแท็ก Spinner โดยละเอียด โปรดสร้างไฟล์ xhtml แยกต่างหากและตั้งชื่อว่า "InputNumberSpinner.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>Number Slider Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value = "Select a Date"></h:outputText>
<br/>
<br/>
<rich:inputNumberSpinner
minValue = "1"
maxValue = "31"
step = "1">
</rich:inputNumberSpinner>
</h:form>
</h:body>
</html>
โค้ดด้านบนจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์