📄 combobox.jsp
字号:
<%-- tpl:insert page="/template/jsfTemplate.jtpl" --%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM Software Development Platform">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="../theme/Master.css" rel="stylesheet" type="text/css">
<LINK href="../theme/new.css" rel="stylesheet">
<LINK rel="stylesheet" type="text/css" href="../theme/stylesheet.css" title="Style">
<%-- tpl:put name="headarea" --%>
<title>comboBox.jsp</title>
<SCRIPT type="text/javascript">
function func_1(thisObj, thisEvent) {
//use 'thisObj' to refer directly to this component instead of keyword 'this'
//use 'thisEvent' to refer to the event generated instead of keyword 'event'
document.forms['form1'].submit();
}
</SCRIPT>
<%-- /tpl:put --%>
<LINK rel="stylesheet" type="text/css" href="/JSFandSDO/theme/stylesheet.css" title="Style">
</HEAD>
<f:view>
<BODY>
<TABLE class="title" cellpadding="0">
<TBODY>
<TR>
<TD class="noBorder" background="../images/gradient.jpg"
align="CENTER"><IMG border="0" src="../images/title.jpg"></TD>
</TR>
<TR>
<TD class="noBorder" align="RIGHT"><A href="/JSFandSDO">Return to Main Menu</A></TD>
</TR>
</TBODY>
</TABLE>
<%-- tpl:put name="bodyarea" --%>
<hx:scriptCollector id="scriptCollector1">
<h:form styleClass="form" id="form1">
<H2>Using Value Changed Event Handling</H2>
<P>This sample demonstrates how to use a value changed event, a
JavaScript auto-submit, and the immediate attribute.<BR>
</P>
<TABLE>
<TBODY>
<TR>
<TD class="td25">Select a Continent: </TD>
<TD class="border"><h:selectOneMenu styleClass="selectOneMenu" id="continentMenu" value="#{pc_ComboBox.continent.continent}" onchange="return func_1(this, event);" valueChangeListener="#{pc_ComboBox.handleMenu1ValueChange}" immediate="true">
<f:selectItem itemValue="blank" itemLabel="Select Continent..." />
<f:selectItem itemValue="Africa" itemLabel="Africa" />
<f:selectItem itemValue="Asia" itemLabel="Asia" />
<f:selectItem itemValue="Europe" itemLabel="Europe" />
<f:selectItem itemValue="North America" itemLabel="North America" />
<f:selectItem itemValue="Oceania" itemLabel="Oceania" />
<f:selectItem itemValue="South America" itemLabel="South America" />
</h:selectOneMenu></TD>
</TR>
<TR>
<TD class="td25">Select a Country: </TD>
<TD class="border"><h:selectOneMenu styleClass="selectOneMenu" id="countryMenu" rendered="false" value="#{pc_ComboBox.continent.country}" immediate="true">
<f:selectItems value="#{selectitems.pc_ComboBox.continent.countryValues.countryValues.toArray}" />
</h:selectOneMenu></TD>
</TR>
<TR>
<TD class="td25"><BR></TD>
<TD class="border"><hx:commandExButton type="submit" value="Submit" styleClass="commandExButton" id="button1"></hx:commandExButton></TD>
</TR>
</TBODY>
</TABLE>
<P><B>You
selected:</B> <h:outputText styleClass="outputText" id="continentOutput" value="#{pc_ComboBox.continent.continent}"></h:outputText> - <h:outputText styleClass="outputText" id="countryOutput" value="#{pc_ComboBox.continent.country}"></h:outputText></P>When a users selects a continent from the first menu two events take place. A value changed event updates the values stored in the backing JavaBean and a JavaScript event submits the form resulting in a list of countries displaying in the second menu.<H4>How
It works:
</H4>
When a selection is made in the first combo box(Continent), a value changed event populates values in the second combo box and an onChange JavaScript event submits the page so that the updated values are displayed.<BLOCKQUOTE><P class="code">Example:<BR><h:selectOneMenu styleClass="selectOneMenu" id="continentMenu" value="#{pc_ComboBox.continent.continent}" onchange="return func_1(this, event);" valueChangeListener="#{pc_ComboBox.handleMenu1ValueChange}" immediate="true"></P></BLOCKQUOTE>To add a Value Changed Listener to an input component: <BR>1. Open the Quick Edit view of the input component.<BR>2. Select the "Value Changed" method and enter the event code. <BR>
<BR>The value changed listener in this example determines the new value of the component and stores that value into a backing JavaBean. Unlike command-button actions a value changed event does not automatically store the user-selected values and you must manually store them into the backing bean.<BR>
<BR>To add an onChange JavaScript event to an input component:<BR>1. Open the Quick Edit view of the input component, select "onChange".<BR>2. Enter the JavaScript code. The syntax of component ID's are in the following format: "formID:componentID" <BR>
<BR>To add an immediate tag to an input component:<BR>1. Open the All Properties view - To open the All Properties View for a component, click the All Properties icon in the top, right corner of the Properties View.<BR> 2. Set Immediate to true. <BR>
<BR>When a component has its immediate attribute set to true, any event it fires is run before the other components on a page are validated. This can help prevent validation errors if other components are dependent on the one firing an event.<H4>Files of Interest:</H4>
<UL>
<LI><B>WebContent/eventHandling/comboBox.jsp</B>
- (This Page) Where the JSF tags and
JavaScript method are located.</LI>
<LI><B>src/pagecode.eventHandling.ComboBox.java </B>- Where
the Value Changed event code is located.</LI>
<LI><B>src/com.ibm.samples.eventHandling.Countries.java</B> -A bean to hold Continent and Countries.</LI>
<LI><B>src/com.ibm.samples.eventHandling.CountiresValues.java</B> -A bean<B>
</B>to hold the current values for the combo box and user selections.</LI>
</UL>
</h:form>
</hx:scriptCollector>
<%-- /tpl:put --%>
<TABLE class="title" cellpadding="0">
<TBODY>
<TR>
<TD class="noBorder" align="RIGHT"><A href="/JSFandSDO">Return to Main Menu</A></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</f:view>
</HTML><%-- /tpl:insert --%>
<%-- jsf:pagecode language="java" location="/src/pagecode/eventHandling/ComboBox.java" --%><%-- /jsf:pagecode --%>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -