RichFaces - komponenty wejściowe
Do tej pory dowiedzieliśmy się wiele o różnych komponentach AJAX RichFaces, a także o nowej funkcjonalności o nazwie „Skórka”. W tym rozdziale poznamy różne „bogate” komponenty, które oferuje RichFaces w celu stworzenia nowoczesnej aplikacji internetowej. Poniżej przedstawiono różne komponenty wejściowe dostarczane przez „RichFaces”.
<rich: inplaceInput>
Rich inplaceInput zapewnia możliwość stworzenia edytowalnego pola tekstowego zamiast zwykłego pola tekstowego. W poniższym przykładzie utworzymy edytowalne pole tekstowe za pomocą tego komponentu. Utwórz plik xhtml i nazwij go „richinplaceInput.xhtml”. Napisz następujący kod w tym pliku.
<?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>
Zapisz ten plik i uruchom go. Następujące będzie wyjście w przeglądarce.
Śmiało, wpisz cokolwiek do wyboru w tym polu tekstowym i naciśnij Enter. Ten tag zapewnia również opcję edycji bezpośredniej. Po edycji zostaną wyświetlone następujące informacje.
<rich: inplaceSelect>
Jest to kolejny znacznik wejściowy dostarczany przez RichFaces, w którym użytkownik może wybrać wartość wejściową z listy rozwijanej, która jest również wbudowana i edytowalna. Musimy wypełnić listę rozwijaną z wewnętrznej klasy bean. Utwórz plik „xhtml” i nazwij go „richinplaceSelectExample.xhtml”. Umieść następujący fragment kodu w tym pliku.
<?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>
W powyższym przykładzie wypełnimy opcje rozwijane z zaplecza. Oto klasa fasoli o nazwie „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;
}
}
Wszystkie nazwy przedmiotów, które przechodzimy przez listę, zostaną wyświetlone w menu rozwijanym. Poniżej zostaną wyświetlone dane wyjściowe po uruchomieniu tej aplikacji.
<rich: SuggestionBox>
<rich: SuggestionBox> służy do dostarczania sugestii użytkownikowi w zależności od danych wprowadzonych w polu tekstowym. Ten tag tworzy wewnętrznie zdarzenie JS i wywołuje wymaganą klasę istener, aby dostarczyć sugestię z zaplecza. Niestety, ten SuggestionBox i ComboBox są połączone w osobny tag o nazwie „<rich: autocomplete>” w RichFaces 4, jednak jeśli używasz RichFaces 3, możesz użyć tego tagu, jak pokazano poniżej.
<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>
Gdzie „capitalsBean” będzie klasą Java z różnymi parametrami, a klasa detektora o nazwie „autocomplete” ustawi wartość zmiennej instancji „capital” w czasie wykonywania i zapewni wymagane dane wyjściowe. Zdecydowanie zaleca się używanie „autouzupełniania” RichFaces 4 zamiast używania tego tagu, ponieważ projektanci nie obsługują już tego tagu.
<rich: comboBox>
<rich: comboBox> działa dokładnie podobnie do <rich: SuggestionBox>, jednak zamiast wywoływać klasę detektora, ten znacznik wstępnie renderuje niektóre sugestie w przeglądarce klienta, która współdziała ze sobą i dostarcza żądane dane wyjściowe. Podobnie jak <rich: sugegstionBox>, ta funkcja jest również przestarzała w nowej wersji z innym tagiem o nazwie „<rich: autocomplete>” opisanym w poniższym kodzie.
Utwórz oddzielny plik i nazwij go „richAutoComplete.xhtml”. Umieść następujący kod w tym pliku.
<?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>
W powyższym przykładzie wypełniamy listę tematów za pomocą funkcji autouzupełniania RichFaces. Utwórz kolejną klasę Java i nazwij ją „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;
}
}
Powyższy plik działa jako klasa bean, a SubjectList () jest metodą, która w rzeczywistości renderuje odpowiedź do przeglądarki. W tagu <SuggestionBox>, <ComboBox> musimy zaimplementować klasę listenera, jednak w przypadku tagu <autocomplete> to tworzenie klasy detektora zostało zautomatyzowane, co jest łatwiejsze dla dewelopera. Powyższy fragment kodu przyniesie następujące wyniki w przeglądarce.
<rich: inputNumberSlider>
Jest to bardzo prosty tag, który pomaga programiście utworzyć numeryczny pasek suwaka w zależności od przedziału liczbowego. Utwórz plik „inputNumberSlider.xhtml” i 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></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>
W powyższym przykładzie atrybuty mają charakter opisowy. Powyższy fragment kodu przyniesie następujące wyniki w przeglądarce.
<rich: Calendar>
Jak sama nazwa wskazuje, ten tag pomoże stworzyć kalendarz w przeglądarce. Utwórz osobny plik i nazwij go „richCalendar.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></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>
Musimy utworzyć kolejną klasę o nazwie „calendarBean.java”, aby przechowywać wszystkie wartości kalendarza, takie jak Date, Locale, Date Pattern itp. Poniżej znajduje się kod dla „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;
}
}
Powyższy fragment kodu wygeneruje następujące dane wyjściowe w przeglądarce.
<rich: InputNumberSpinner>
Ten tag pomaga deweloperowi utworzyć spinner do zapełnienia instancji fasoli. Poniżej znajduje się przykład, który pomoże ci szczegółowo zrozumieć tag Spinner. Utwórz osobny plik xhtml i nazwij go „InputNumberSpinner.xhtml” i 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>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>
Powyższy fragment kodu przyniesie następujące wyniki w przeglądarce.