RichFaces - Componente de Iteração
Nos capítulos anteriores, aprendemos sobre os diferentes componentes de entrada e saída. Neste capítulo, aprenderemos como iterar por meio de diferentes estruturas de dados no site.
<rich: dataTable>
Esta tag é usada para renderizar uma tabela como resultado no site. No exemplo a seguir, renderizaremos uma tabela de assuntos junto com o nível de pró-eficiência.
<?xml version = '1.0' encoding = 'UTF-8' ?>
<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>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:dataTable value = "#{subject.subjectListObj}" var = "record" >
<f:facet name = "header">
<h:outputText value = "My Profile" />
</f:facet>
<rich:column>
<f:facet name = "header">Subject Name</f:facet>
<h:outputText value = "#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name = "header">efficiency Level</f:facet>
<h:outputText value = "#{record.efficiency}"/>
</rich:column>
</rich:dataTable>
</h:form>
</h:body>
</html>
Precisamos alterar nosso subject.java de acordo para renderizar a lista. A seguir está um exemplo de 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;
private String efficiency;
private List<Subject> subjectListObj=new ArrayList<>();
public Subject() {
}
public Subject(String SubjectName,String efficiency ) {
this.SubjectName = SubjectName;
this.efficiency= efficiency;
}
public String getSubjectName() {
return SubjectName;
}
public void setSubjectName(String SubjectName) {
this.SubjectName = SubjectName;
}
public List<Subject> getSubjectListObj() {
subjectListObj.add(new Subject("JAVA","Expert"));
subjectListObj.add(new Subject("DOTNET","NA"));
subjectListObj.add(new Subject("JAVA Script","Expert"));
subjectListObj.add(new Subject("Web Service","Expert"));
subjectListObj.add(new Subject("Consulting","Expert"));
return subjectListObj;
}
public void setSubjectListObj(List<Subject> subjectListObj) {
this.subjectListObj = subjectListObj;
}
public String getEfficiency() {
return efficiency;
}
public void setEfficiency(String efficiency) {
this.efficiency = efficiency;
}
}
O exemplo acima irá gerar a seguinte saída no navegador.
<rich: dataDefinitionList>
Esta é a tag usada para gerar a definição de dados de um modelo. Esta tag não é suportada pelo JBoss desde a invenção do RichFaces 4. Se você ainda estiver usando RichFaces 3, poderá usar essa tag da seguinte maneira.
<rich:dataDefinitionList var = "car" value = "#{dataTableScrollerBean.allCars}"
rows = "5" first = "4" title = "Cars">
<f:facet name = "term">
<h:outputText value = "#{car.make} #{car.model}"></h:outputText>
</f:facet>
<h:outputText value = "Price:" styleClass = "label"></h:outputText>
<h:outputText value = "#{car.price}" /><br/>
<h:outputText value = "Mileage:" styleClass = "label"></h:outputText>
<h:outputText value = "#{car.mileage}" /><br/>
</rich:dataDefinitionList>
No exemplo acima, “dataTableScrollerBean” é uma classe Java que é usada para gerar diferentes valores do carro. Isso é semelhante à tag anterior, em que populamos um monte de valores de objeto usando a tag <datatable>.
<rich: dataOrderedList>
RichFaces 4 surgiu com uma ampla moderação de RichFaces 3. <dataOrderedList> é uma tag usada para renderizar uma lista de maneira ordenada. Isso também é suprimido no RichFaces 4 porque a ordenação de um objeto ou lista é muito mais fácil e menos demorada, se feita em Java. Se seu aplicativo usa RichFaces 3, você pode usar essa tag da seguinte maneira.
<rich:panel style = "width:500px">
<f:facet name = "header">
Using rich:dataOrderedList
</f:facet>
<rich:dataOrderedList value = "#{airlinesBean.airlines}" var = "air">
#{air.name}, #{air.code}
</rich:dataOrderedList>
</rich:panel>
No exemplo acima, “AirlinesBean” é uma classe Java bean com um método denominado “AirlinesBean ()”. Este método retorna um objeto do tipo “ar”. Posteriormente, podemos usar este objeto aéreo para preencher diferentes propriedades em um formato de tabela.
<rich: dataList>
Como o nome da tag sugere, esta tag será usada para renderizar uma lista não ordenada no navegador. No entanto, como <orderedList>, essa tag também foi suprimida na versão mais recente do RichFaces. Podemos renderizar facilmente uma lista no navegador usando as tags <a4j: Repeat> e <rich: dataTable> da seguinte maneira.
<a4j:repeat value = "#{managedBean.subjectList}" var = "sub">
<h:outputText value = "#{sub}"/>
</a4j:repeat>
No exemplo acima, estamos renderizando uma lista que é uma saída do método chamado “subjectList ()”. Se o seu aplicativo for construído em RichFaces 3, você poderá usar esta tag da seguinte maneira.
<rich:panel style = "width:500px">
<f:facet name = "header">
Using rich:dataList
</f:facet>
<rich:dataList value = "#{airlinesBean.airlines}" var = "air">
#{air.name}, #{air.code}
</rich:dataList>
</rich:panel>
<rich: dataGrid>
Usando a tag <datatable> você poderá renderizar uma lista como uma tabela, entretanto, <dataGrid> o ajudará a renderizar um objeto ou uma lista. No exemplo anterior de <rich: datatable>, basta alterar a página xhtml da seguinte maneira e ver qual é a saída da mesma.
<?xml version = '1.0' encoding = 'UTF-8' ?>
<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>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:panel>
<rich:dataGrid value = "#{subject.subjectListObj}" var = "record"
columns = "2" elements = "4" first = "1" >
<f:facet name = "header">
<h:outputText value = "My Profile" />
</f:facet>
<rich:panel>
<rich:column>
<f:facet name = "header">Subject Name</f:facet>
<h:outputText value = "#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name = "header">efficiency Level</f:facet>
<h:outputText value = "#{record.efficiency}"/>
</rich:column>
</rich:panel>
</rich:dataGrid>
</rich:panel>
</h:form>
</h:body>
</html>
O trecho de código acima produzirá a seguinte saída no navegador.
<rich: datascroller>
Esta tag ajuda a criar uma barra de rolagem ao preencher os dados da tabela. É muito semelhante à funcionalidade de paginação do JSF. Modifique o exemplo dataTable anterior da seguinte maneira.
<?xml version = '1.0' encoding = 'UTF-8' ?>
<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>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:dataTable value = "#{subject.subjectListObj}" var = "record"
rows = "3" id = "MyTable">
<f:facet name = "header">
<h:outputText value = "My Profile"/>
</f:facet>
<rich:column>
<f:facet name = "header">Subject Name</f:facet>
<h:outputText value = "#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name = "header">efficiency Level</f:facet>
<h:outputText value = "#{record.efficiency}"/>
</rich:column>
</rich:dataTable>
<rich:dataScroller for = "MyTable" maxPages = "3">
<f:facet name = "first">
<h:outputText value = "1" />
</f:facet>
<f:facet name = "last">
<h:outputText value = "eof" />
</f:facet>
</rich:dataScroller>
</h:form>
</h:body>
</html>
No exemplo acima, você pode adicionar seu estilo para uma boa aparência. Implementamos tags <dataScroller> separadas com diferentes valores de faceta. A seguir será a saída do arquivo acima. Atualize o atributo style sheer para sincronizar a tabela e o scroller de dados.