个性化阅读
专注于IT技术分析

PrimeFaces SelectOneButton例子

本文概述

它用于使用按钮从列表中选择一个项目。它创建项目列表作为按钮列表。因此, 我们可以通过单击按钮来选择项目。 <p:selectOneButton>组件用于在JSF应用程序中创建按钮列表。它具有下表列出的各种属性。

SelectOneButton属性

Attribute 默认值 Type Description
id null String 它是组件的唯一标识符
rendered true Boolean 它用于指定组件的呈现。
required false Boolean 用于根据需要标记组件。
converterMessage null String 用于设置转换失败时显示的消息。
disabled false Boolean 用于禁用组件。
label null String 用于设置组件的标签。
onchange null String 它用于在值更改时调用脚本。
style null String 它用于设置组件的内联CSS。
tabindex 0 String 用于按跳位顺序设置元素的位置。
unselectable true Boolean 用于取消选择组件。

结构样式类

以下是结构样式类的列表;

样式类 Applies
.ui-selectonebutton 它适用于主容器元素。

例子

在下面的示例中, 我们正在实现<p:selectOneButton>组件。本示例包含以下文件。

JSF文件

// oneButton.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>One Button</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<h:outputText value="Select Smartphone: " />
<p:selectOneButton value="#{oneButton.option}">
<f:selectItem itemLabel="Samsung Galaxy" itemValue="Samsung Galaxy" />
<f:selectItem itemLabel="iPhone 7 Plus" itemValue="iPhone 7 Plus" />
<f:selectItem itemLabel="One Plus" itemValue="One Plus" />
</p:selectOneButton>
<p:commandButton value="Submit" update="display" icon="ui-icon-check" />
<p:spacer />
<h:outputText value="Selected:" />
<h:outputText id="display" value="#{oneButton.option}" style="font-weight: bold" />
</h:panelGrid>
</h:form>
</h:body>
</html>

ManagedBean

// OneButton.java

package com.srcmini;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class OneButton {
private String option;
public String getOption() {
return option;
}
public void setOption(String option) {
this.option = option;
}
}

输出

PrimeFaces SelectOneButton 1
PrimeFaces SelectOneButton 2
赞(0)
未经允许不得转载:srcmini » PrimeFaces SelectOneButton例子

评论 抢沙发

评论前必须登录!