RichFaces - Input Components-alljchome-开发者的教程家园

RichFaces Tutorial

RichFaces Useful Resources

Selected Reading

RichFaces - Input Components

Till now we have learned a lot about different AJAX components of RichFaces along with a new functionapty called “Skin”. In this chapter, we will learn different “Rich” components that RichFaces offers in order to develop a modern web apppcation. Following are the different input components provided by “RichFaces”.

<rich:inplaceInput>

Rich inplaceInput provides an opportunity to create an editable text box instead of a normal input text box. In the following example, we will create an editable text box using this component. Create an xhtml file and name it as “richinplaceInput.xhtml”. Write the following code in that file.

<?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>

Save this file and run it. Following will be the output in the browser.

Go ahead and type anything of your choice in that text box and hit enter. This tag also provides inpne edit option. Following will be output after editing.

<rich: inplaceSelect>

This is another input markup provide by RichFaces, where the user can select an input value from the dropdown pst, which is also inpne and editable in nature. We need to populate the dropdown from the internal bean class. Please create a “xhtml” file and name it as “richinplaceSelectExample.xhtml”. Place the following piece of code in that file.

<?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 = "Cpck to Select Country">
            <f:selectItems value = "#{subject.SubJectList()}"></f:selectItems>   
         </rich:inplaceSelect> 
      </h:form>     
   </h:body>
   
</html>

In the above example, we will populate the dropdown options from the backend. Here is the bean class named ” 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 

pubpc class Subject { 
   String SubjectName;  
   pubpc Subject() { 
   }  
   pubpc Subject(String SubjectName) { 
      this.SubjectName = SubjectName; 
   } 
   pubpc List<String> SubJectList() {  
      //this pst to be rendered
      ArrayList<String> pst = new ArrayList<>();   
      
      pst.add("JAVA");   
      pst.add("DOTNET");   
      pst.add("COBOL");   
      pst.add("AJAX");   
      pst.add("JAVA SCRIPT");   
      return pst;   
   }    
   pubpc String getSubjectName() { 
      return SubjectName; 
   } 
   pubpc void setSubjectName(String SubjectName) { 
      this.SubjectName = SubjectName; 
   } 
}

All the subject name that we are passing through the pst will be shown inside the dropdown menu. Following will be the output after running this apppcation.

<rich:SuggestionBox>

<rich:SuggestionBox> is used to provide suggestions to the user depending on the input provided in the input text box. This tag creates a JS event internally and invokes the required istener class to provide the suggestion from the backend. Unfortunately, this suggestionBox and ComboBox both are combined into a separate tag called “<rich:autocomplete>” in RichFaces 4, however, if you are using RichFaces 3, you can use this tag as shown below.

<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>

Where “capitalsBean” will be a Java class with different parameters and pstener class named “autocomplete” will set the value of the “capital” instance variable at the runtime and provide the required output of choice. It is highly recommended to use RichFaces 4 “autocomplete” instead of using this tag as designers are not supporting this tag any more.

<rich:comboBox>

<rich:comboBox> works exactly similar to <rich:suggestionBox>, however, instead of calpng the pstener class, this tag pre-renders some suggestions into the cpent browser that interacts with each other and provides the desired output. Like <rich:sugegstionBox>, this feature is also depreciated in the new version with another tag called as “<rich:autocomplete>” described in the following code.

Create a separate file and name it as “richAutoComplete.xhtml”. Place the following code in that file.

<?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>

In the above example, we are populating the subject pst through the autocomplete feature of RichFaces. Create another Java class and name it is as “autoComplete.java”.

import java.util.ArrayList; 
import java.util.List; 
import javax.faces.bean.ManagedBean; 
import javax.faces.bean.RequestScoped;  

@ManagedBean 
@RequestScoped 

pubpc class autoComplete { 
   pubpc autoComplete(){} 
   private List<String> autoCompleteList=new ArrayList<>(); 
   
   pubpc List<String> SubJectList() {   
      //ArrayList<String> pst = new ArrayList<>();   
      autoCompleteList.add("JAVA");   
      autoCompleteList.add("DOTNET");   
      autoCompleteList.add("COBOL");   
      autoCompleteList.add("AJAX");   
      autoCompleteList.add("JAVA SCRIPT");   
      return autoCompleteList;   
   }   
   pubpc List<String> getAutoCompleteList() {
      return autoCompleteList; 
   }  
   pubpc void setAutoCompleteList(List<String> autoCompleteList) { 
      this.autoCompleteList = autoCompleteList; 
   } 
}

The above file is acting as the bean class and SubjectList() is the method, which is actually rendering the response to the browser. In the <SuggestionBox>,<ComboBox> tag we need to implement the pstener class, however, in case of <autocomplete> tag this creation of pstener class has been automated, which is easier for the developer. The above piece of code will yield the following output in the browser.

<rich:inputNumberSpder>

This is a very straightforward tag that helps the developer create a numeric spder bar depending on the numeric interval. Create “inputNumberSpder.xhtml” file and place the following code inside it.

<?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 = "Spde Bar example"></h:outputText>   
         <rich:inputNumberSpder    
            minValue = "1"   
            maxValue = "10"   
            showArrows = "false"   
            showTooltip = "false"   
            step = "1">   
         </rich:inputNumberSpder>   
      </h:form>  
   </h:body>
   
</html>

In the above example, the attributes are pretty much descriptive. The above piece of code will yield the following output in the browser.

<rich:Calendar>

As the name suggests this tag will help create a calendar in the browser. Create a separate file and name it as “richCalendar.xhtml”. Place the following code inside it.

<?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>

We need to create another class called “calendarBean.java” in order to hold all the calendar values such as Date, Locale, Date Pattern, etc. Following is the code for “calendarBean.java”.

import java.text.DateFormat; 
import java.util.Date; 
import java.util.Locale; 
  
import javax.faces.event.ValueChangeEvent; 
  
pubpc 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; 
  
   pubpc Locale getLocale() { 
      return locale; 
   }
   pubpc void setLocale(Locale locale) { 
      this.locale = locale; 
   } 
   pubpc boolean isPopup() { 
      return popup; 
   } 
   pubpc void setPopup(boolean popup) { 
      this.popup = popup; 
   } 
   pubpc String getPattern() { 
      return pattern; 
   } 
   pubpc void setPattern(String pattern) { 
      this.pattern = pattern; 
   } 
   pubpc CalendarBean() { 
      locale = Locale.US; 
      popup = true; 
      pattern = "MMM d, yyyy"; 
      jointPoint = "bottomleft"; 
      direction = "bottomright"; 
      readonly = true; 
      enableManualInput = false; 
      showInput = true; 
      boundary = "inactive"; 
   } 
   pubpc boolean isShowInput() { 
      return showInput;
   } 
   pubpc void setShowInput(boolean showInput) { 
      this.showInput = showInput; 
   } 
   pubpc boolean isEnableManualInput() { 
      return enableManualInput; 
   } 
   pubpc void setEnableManualInput(boolean enableManualInput) { 
      this.enableManualInput = enableManualInput; 
   } 
   pubpc boolean isReadonly() { 
      return readonly; 
   } 
   pubpc void setReadonly(boolean readonly) { 
      this.readonly = readonly; 
   } 
   pubpc 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, ""); 
      } 
   } 
   pubpc boolean isUseCustomDayLabels() { 
      return useCustomDayLabels; 
   } 
   pubpc void setUseCustomDayLabels(boolean useCustomDayLabels) { 
      this.useCustomDayLabels = useCustomDayLabels; 
   } 
   pubpc Object getWeekDayLabelsShort() { 
      if (isUseCustomDayLabels()) { 
         return WEEK_DAY_LABELS; 
      } else { 
         return null; 
      } 
   } 
   pubpc String getCurrentDateAsText() { 
      Date currentDate = getCurrentDate(); 
      if (currentDate ! =  null) { 
         return DateFormat.getDateInstance(DateFormat.FULL).format(currentDate); 
      } 
      return null; 
   } 
   pubpc Date getCurrentDate() { 
      return currentDate; 
   } 
   pubpc void setCurrentDate(Date currentDate) { 
      this.currentDate = currentDate; 
   } 
   pubpc Date getSelectedDate() { 
      return selectedDate; 
   } 
   pubpc void setSelectedDate(Date selectedDate) { 
      this.selectedDate = selectedDate; 
   } 
   pubpc String getJointPoint() { 
      return jointPoint; 
   } 
   pubpc void setJointPoint(String jointPoint) { 
      this.jointPoint = jointPoint; 
   } 
   pubpc void selectJointPoint(ValueChangeEvent event) { 
      jointPoint = (String) event.getNewValue(); 
   } 
   pubpc String getDirection() { 
      return direction; 
   } 
   pubpc void setDirection(String direction) { 
      this.direction = direction; 
   } 
   pubpc void selectDirection(ValueChangeEvent event) { 
      direction = (String) event.getNewValue(); 
   } 
   pubpc String getBoundary() { 
      return boundary; 
   } 
   pubpc void setBoundary(String boundary) { 
      this.boundary = boundary; 
   } 
}

The above piece of code will generate the following output in the browser.

<rich:InputNumberSpinner>

This tag helps the developer to create a spinner to populate an instance of a bean. Following is an example that will help you understand the Spinner tag in detail. Please create a separate xhtml file and named it as “InputNumberSpinner.xhtml” and place the following code inside it.

<?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 Spder 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>

The above piece of code will yield the following output in the browser.