RichFaces - componentes de entrada
Até agora, aprendemos muito sobre os diferentes componentes AJAX do RichFaces junto com uma nova funcionalidade chamada “Skin”. Neste capítulo, aprenderemos diferentes componentes “ricos” que o RichFaces oferece para desenvolver uma aplicação web moderna. A seguir estão os diferentes componentes de entrada fornecidos por “RichFaces”.
<rich: inplaceInput>
Rich inplaceInput oferece a oportunidade de criar uma caixa de texto editável em vez de uma caixa de texto de entrada normal. No exemplo a seguir, criaremos uma caixa de texto editável usando este componente. Crie um arquivo xhtml e nomeie-o como “richinplaceInput.xhtml”. Escreva o código a seguir nesse arquivo.
<?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>
Salve este arquivo e execute-o. A seguir será a saída no navegador.
Vá em frente e digite qualquer coisa de sua escolha nessa caixa de texto e pressione Enter. Esta tag também oferece opção de edição embutida. O seguinte será produzido após a edição.
<rich: inplaceSelect>
Esta é outra marcação de entrada fornecida por RichFaces, onde o usuário pode selecionar um valor de entrada na lista suspensa, que também é embutida e editável por natureza. Precisamos preencher o menu suspenso da classe interna do bean. Crie um arquivo “xhtml” e nomeie-o como “richinplaceSelectExample.xhtml”. Coloque o seguinte trecho de código nesse arquivo.
<?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>
No exemplo acima, preencheremos as opções suspensas do back-end. Aqui está a classe de bean chamada ”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;
}
}
Todo o nome do assunto que estivermos passando na lista será mostrado dentro do menu suspenso. A seguir será o resultado após a execução deste aplicativo.
<rich: SuggestionBox>
<rich: SuggestionBox> é usado para fornecer sugestões ao usuário, dependendo da entrada fornecida na caixa de texto de entrada. Essa tag cria um evento JS internamente e invoca a classe istener necessária para fornecer a sugestão do back-end. Infelizmente, este SuggestionBox e ComboBox são combinados em uma tag separada chamada “<rich: autocomplete>” no RichFaces 4, entretanto, se você estiver usando RichFaces 3, você pode usar esta tag como mostrado abaixo.
<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>
Onde “capitalsBean” será uma classe Java com diferentes parâmetros e uma classe de ouvinte chamada “autocomplete” irá definir o valor da variável de instância “capital” no tempo de execução e fornecer a saída necessária de escolha. É altamente recomendável usar RichFaces 4 “autocomplete” em vez de usar essa tag, pois os designers não oferecem mais suporte para essa tag.
<rich: comboBox>
<rich: comboBox> funciona exatamente semelhante a <rich: suggestionBox>, no entanto, em vez de chamar a classe do listener, essa tag pré-renderiza algumas sugestões no navegador do cliente que interage entre si e fornece a saída desejada. Como o <rich: sugegstionBox>, este recurso também é depreciado na nova versão com outra tag chamada “<rich: autocomplete>” descrita no código a seguir.
Crie um arquivo separado e nomeie-o como “richAutoComplete.xhtml”. Coloque o código a seguir nesse arquivo.
<?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>
No exemplo acima, estamos preenchendo a lista de assuntos por meio do recurso de preenchimento automático do RichFaces. Crie outra classe Java e nomeie-a como “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;
}
}
O arquivo acima está atuando como a classe de bean e SubjectList () é o método que, na verdade, está renderizando a resposta ao navegador. Na tag <SuggestionBox>, <ComboBox> precisamos implementar a classe listener, porém, no caso da tag <autocomplete> esta criação da classe listener foi automatizada, o que é mais fácil para o desenvolvedor. O trecho de código acima produzirá a seguinte saída no navegador.
<rich: inputNumberSlider>
Esta é uma tag muito simples que ajuda o desenvolvedor a criar uma barra deslizante numérica dependendo do intervalo numérico. Crie o arquivo “inputNumberSlider.xhtml” e coloque o seguinte código dentro dele.
<?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>
No exemplo acima, os atributos são bastante descritivos. O trecho de código acima produzirá a seguinte saída no navegador.
<rico: Calendário>
Como o nome sugere, essa tag ajudará a criar um calendário no navegador. Crie um arquivo separado e nomeie-o como “richCalendar.xhtml”. Coloque o seguinte código dentro dele.
<?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>
Precisamos criar outra classe chamada “calendarBean.java” para armazenar todos os valores do calendário, como Data, Local, Padrão de data, etc. A seguir está o código para “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;
}
}
O trecho de código acima irá gerar a seguinte saída no navegador.
<rich: InputNumberSpinner>
Essa tag ajuda o desenvolvedor a criar um spinner para preencher uma instância de um bean. A seguir está um exemplo que o ajudará a entender a tag Spinner em detalhes. Crie um arquivo xhtml separado e nomeie-o como “InputNumberSpinner.xhtml” e coloque o seguinte código dentro dele.
<?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>
O trecho de código acima produzirá a seguinte saída no navegador.