如何使用 JSF、Primefaces 和 Richfaces 生成矩阵
How to generate a matrix with JSF, Primefaces and Richfaces
我正在尝试使用 Primefaces 6.2 和 Richfaces 4.5 在 JSF 2.2 中制作一个 5x5 矩阵。16.Final。
非常类似于Generate Matrix Datatable with JSF Framework like Primefaces。
唯一的区别是,我想要编辑每个单元格的选项(带有下拉菜单)。
我设法用数据表制作了 5x5 矩阵,但这只让我可以选择编辑整个第一行。
这里的问题是 dataTable 管理每行的数据,而我想访问每个单元格的数据。
我目前的html是:
<rich:dataTable value="#{testBean.data}" var="line" id="matrixTable" rowKeyVar="index" columnClasses="cellWidth">
<f:facet name="header">
<rich:columnGroup>
<rich:column rowspan="2" style="width: 150px">
<h:outputText value="Ernst"/>
</rich:column>
<rich:column colspan="5">
<h:outputText value="Waarschijnlijkheid"/>
</rich:column>
<rich:column breakRowBefore="true" width="" style="width: 150px">
<h:outputText value="A: Onwaarschijnlijk"/>
</rich:column>
<rich:column style="width: 150px">
<h:outputText value="B: Mogelijk"/>
</rich:column>
<rich:column style="width: 150px">
<h:outputText value="C: Waarschijnlijk"/>
</rich:column>
<rich:column style="width: 150px">
<h:outputText value="D: Zeer waarschijnlijk"/>
</rich:column>
<rich:column style="width: 150px">
<h:outputText value="E: Zeker"/>
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column >
<h:outputText value="#{line.ROW_LABELS[index + 1]}"/>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[0].kleur}">
<div class="tooltip">
<c:choose>
<c:when test="#{testBean.readOnly}">
<h:outputText value="#{testBean.data[0].inzetmogelijkhedenList[0].code}"/>
</c:when>
<c:otherwise>
<h:selectOneMenu value="#{testBean.data[0].inzetmogelijkhedenList[0].code}" id="a1" label="a1" disabled="#{testBean.locked}">
<f:selectItems value="#{testBean.inzetmogelijkhedenList}" var="b" itemLabel="#{b.omschrijving}"/>
</h:selectOneMenu>
</c:otherwise>
</c:choose>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[0].omschrijving}</span>
</div>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[1].kleur}">
<div class="tooltip">
<h:outputText value="#{line.inzetmogelijkhedenList[1].code}"/>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[1].omschrijving}</span>
</div>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[2].kleur}">
<div class="tooltip">
<h:outputText value="#{line.inzetmogelijkhedenList[2].code}"/>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[2].omschrijving}</span>
</div>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[3].kleur}">
<div class="tooltip">
<h:outputText value="#{line.inzetmogelijkhedenList[3].code}"/>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[3].omschrijving}</span>
</div>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[4].kleur}">
<div class="tooltip">
<h:outputText value="#{line.inzetmogelijkhedenList[4].code}"/>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[4].omschrijving}</span>
</div>
</rich:column>
</rich:dataTable>
这是支持 bean:
@ViewScoped
@ManagedBean(name = "testBean")
public class testBean {
public List<Inzetmogelijkheden> getInzetmogelijkhedenList() {
return referentieService.findAllActueel(Inzetmogelijkheden.class, getUser());
}
public List<RisicomatrixRegel> getData() {
// actuele IZM uit DB halen
List<Inzetmogelijkheden> actueleInzetmogelijkheden = getInzetmogelijkhedenList();
RisicomatrixRegel line1 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line2 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line3 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line4 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line5 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1)));
return new ArrayList<>(Arrays.asList(line1, line2, line3, line4, line5));
}
}
阅读模式下的结果:
编辑模式下的结果:
有什么提示吗?
您在使用 Primefaces 时使用 rich
前缀有什么具体原因吗?
看来您是从迁移附加到 Richfaces 的遗留代码而来的,因此,作为遗留代码,您使用标签处理程序而不是 UI 组件,这就是为什么您得到 an unexpected behaviour(只有第一行正在处理)在你的数据表中。
用条件渲染替换 c:choose
块。
此外,您仅访问 outputText
和 selectOneMenu
组件中的第一行,将它们替换为 line
值。
此外,最后,永远不要使用 getter 方法在 JSF 托管 bean 中构建您的结构!它们可以在用 @PostConstruct
注释的方法中调用 more than once while the view renders. Instead, build up your data 或使用 f:viewAction
:
@ManagedBean
@ViewScoped
public class Bean {
private List<RisicomatrixRegel> data;
@PostConstruct
public void init() {
// actuele IZM uit DB halen
List<Inzetmogelijkheden> actueleInzetmogelijkheden = referentieService.findAllActueel(Inzetmogelijkheden.class, getUser());
RisicomatrixRegel line1 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(0),
actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line2 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(2),
actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line3 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(2),
actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line4 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(3),
actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line5 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(1),
actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1)));
data = Arrays.asList(line1, line2, line3, line4, line5);
}
public List<RisicomatrixRegel> getData() {
return data;
}
}
<h:outputText rendered="#{testBean.readOnly}"
value="#{line.inzetmogelijkhedenList[0].code}"/>
<h:selectOneMenu rendered="#{!testBean.readOnly}"
value="#{line.inzetmogelijkhedenList[0].code}" id="a1"
label="a1" disabled="#{testBean.locked}">
<f:selectItems value="#{testBean.inzetmogelijkhedenList}" var="b" itemLabel="#{b.omschrijving}"/>
</h:selectOneMenu>
另请参阅:
- <c:when> not working in PrimeFaces datatable?
我正在尝试使用 Primefaces 6.2 和 Richfaces 4.5 在 JSF 2.2 中制作一个 5x5 矩阵。16.Final。
非常类似于Generate Matrix Datatable with JSF Framework like Primefaces。 唯一的区别是,我想要编辑每个单元格的选项(带有下拉菜单)。 我设法用数据表制作了 5x5 矩阵,但这只让我可以选择编辑整个第一行。
这里的问题是 dataTable 管理每行的数据,而我想访问每个单元格的数据。
我目前的html是:
<rich:dataTable value="#{testBean.data}" var="line" id="matrixTable" rowKeyVar="index" columnClasses="cellWidth">
<f:facet name="header">
<rich:columnGroup>
<rich:column rowspan="2" style="width: 150px">
<h:outputText value="Ernst"/>
</rich:column>
<rich:column colspan="5">
<h:outputText value="Waarschijnlijkheid"/>
</rich:column>
<rich:column breakRowBefore="true" width="" style="width: 150px">
<h:outputText value="A: Onwaarschijnlijk"/>
</rich:column>
<rich:column style="width: 150px">
<h:outputText value="B: Mogelijk"/>
</rich:column>
<rich:column style="width: 150px">
<h:outputText value="C: Waarschijnlijk"/>
</rich:column>
<rich:column style="width: 150px">
<h:outputText value="D: Zeer waarschijnlijk"/>
</rich:column>
<rich:column style="width: 150px">
<h:outputText value="E: Zeker"/>
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column >
<h:outputText value="#{line.ROW_LABELS[index + 1]}"/>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[0].kleur}">
<div class="tooltip">
<c:choose>
<c:when test="#{testBean.readOnly}">
<h:outputText value="#{testBean.data[0].inzetmogelijkhedenList[0].code}"/>
</c:when>
<c:otherwise>
<h:selectOneMenu value="#{testBean.data[0].inzetmogelijkhedenList[0].code}" id="a1" label="a1" disabled="#{testBean.locked}">
<f:selectItems value="#{testBean.inzetmogelijkhedenList}" var="b" itemLabel="#{b.omschrijving}"/>
</h:selectOneMenu>
</c:otherwise>
</c:choose>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[0].omschrijving}</span>
</div>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[1].kleur}">
<div class="tooltip">
<h:outputText value="#{line.inzetmogelijkhedenList[1].code}"/>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[1].omschrijving}</span>
</div>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[2].kleur}">
<div class="tooltip">
<h:outputText value="#{line.inzetmogelijkhedenList[2].code}"/>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[2].omschrijving}</span>
</div>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[3].kleur}">
<div class="tooltip">
<h:outputText value="#{line.inzetmogelijkhedenList[3].code}"/>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[3].omschrijving}</span>
</div>
</rich:column>
<rich:column style="background-color: #{line.inzetmogelijkhedenList[4].kleur}">
<div class="tooltip">
<h:outputText value="#{line.inzetmogelijkhedenList[4].code}"/>
<span class="tooltiptext">#{line.inzetmogelijkhedenList[4].omschrijving}</span>
</div>
</rich:column>
</rich:dataTable>
这是支持 bean:
@ViewScoped
@ManagedBean(name = "testBean")
public class testBean {
public List<Inzetmogelijkheden> getInzetmogelijkhedenList() {
return referentieService.findAllActueel(Inzetmogelijkheden.class, getUser());
}
public List<RisicomatrixRegel> getData() {
// actuele IZM uit DB halen
List<Inzetmogelijkheden> actueleInzetmogelijkheden = getInzetmogelijkhedenList();
RisicomatrixRegel line1 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line2 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line3 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line4 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line5 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1)));
return new ArrayList<>(Arrays.asList(line1, line2, line3, line4, line5));
}
}
阅读模式下的结果:
编辑模式下的结果:
有什么提示吗?
您在使用 Primefaces 时使用 rich
前缀有什么具体原因吗?
看来您是从迁移附加到 Richfaces 的遗留代码而来的,因此,作为遗留代码,您使用标签处理程序而不是 UI 组件,这就是为什么您得到 an unexpected behaviour(只有第一行正在处理)在你的数据表中。
用条件渲染替换 c:choose
块。
此外,您仅访问 outputText
和 selectOneMenu
组件中的第一行,将它们替换为 line
值。
此外,最后,永远不要使用 getter 方法在 JSF 托管 bean 中构建您的结构!它们可以在用 @PostConstruct
注释的方法中调用 more than once while the view renders. Instead, build up your data 或使用 f:viewAction
:
@ManagedBean
@ViewScoped
public class Bean {
private List<RisicomatrixRegel> data;
@PostConstruct
public void init() {
// actuele IZM uit DB halen
List<Inzetmogelijkheden> actueleInzetmogelijkheden = referentieService.findAllActueel(Inzetmogelijkheden.class, getUser());
RisicomatrixRegel line1 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(0),
actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(0), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line2 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(2),
actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line3 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(2),
actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(2), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line4 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(3),
actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(3), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1)));
RisicomatrixRegel line5 = new RisicomatrixRegel(Arrays.asList(actueleInzetmogelijkheden.get(1),
actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1), actueleInzetmogelijkheden.get(1)));
data = Arrays.asList(line1, line2, line3, line4, line5);
}
public List<RisicomatrixRegel> getData() {
return data;
}
}
<h:outputText rendered="#{testBean.readOnly}"
value="#{line.inzetmogelijkhedenList[0].code}"/>
<h:selectOneMenu rendered="#{!testBean.readOnly}"
value="#{line.inzetmogelijkhedenList[0].code}" id="a1"
label="a1" disabled="#{testBean.locked}">
<f:selectItems value="#{testBean.inzetmogelijkhedenList}" var="b" itemLabel="#{b.omschrijving}"/>
</h:selectOneMenu>
另请参阅:
- <c:when> not working in PrimeFaces datatable?