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>

โค้ดด้านบนจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์