📄 inputkeybindassist.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>inputKeyBindAssist.jsp</title>
<%-- /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 Input and Keyboard Assistance</H2>
This page demonstrates the use of input and keyboard assistance. Input assist allows you to add controls to input fields which help users enter correct information. For example , adding a calendar to a date field so that a user may view and select a date. Spinners and sliders can be added to input fields to help a user enter a number. Prompt characters can be added to fields to give the user a better idea of what data the field will accept.<BR>
<BR>
Keyboard assist allows you to add an action to a specific keystroke. In this example we have assigned actions to help you jump to input fields in the form. Press the F1, F2, and F3 keys to jump to different fields.<BR>
<BR>
<CENTER>
<TABLE border="1" cellpadding="10" width="80%">
<TBODY>
<TR>
<TH class="thColor25">Illustration</TH>
<TH class="th75">Description</TH>
</TR>
<TR>
<TD class="tdColor25">String Field - Type four characters to
auto-advance to the next field.<BR>
<h:inputText styleClass="inputText" id="text1" maxlength="4">
<hx:inputHelperAssist autoTab="true" errorClass="inputText_Error" />
</h:inputText></TD>
<TD class="td75"><BLOCKQUOTE>Example:<BR>
<h:inputText maxlength="4"><BR>
<hx:inputHelperAssist autoTab="true" /><BR>
</h:inputText></BLOCKQUOTE></TD>
</TR>
<TR>
<TD class="tdColor25">Integer Number Field - Input Assist Spinner<BR>
<h:inputText styleClass="inputText" id="text8">
<f:convertNumber integerOnly="true" />
<hx:inputHelperSpinner delta="1" />
<hx:inputHelperAssist errorClass="inputText_Error" />
</h:inputText></TD>
<TD class="td75"><BLOCKQUOTE>Example:<BR>
<h:inputText><BR>
<f:convertNumber integerOnly="true" /><BR>
<hx:inputHelperSpinner delta="1" /><BR>
<hx:inputHelperAssist /><BR>
</h:inputText></BLOCKQUOTE></TD>
</TR>
<TR>
<TD class="tdColor25">Integer Number Field - Input Assist Slider - Press
"F2" to select this field.<BR>
<h:inputText styleClass="inputText" id="text2">
<f:convertNumber integerOnly="true" />
<hx:inputHelperSlider />
</h:inputText></TD>
<TD class="td75"><BLOCKQUOTE>Example:<BR>
<h:inputText><BR>
<f:convertNumber integerOnly="true"/><BR>
<hx:inputHelperSlider /><BR>
</h:inputText></BLOCKQUOTE></TD>
</TR>
<TR>
<TD class="tdColor25">Currency Number Field - Prompt Character - Press
"F3" to select this field.<BR>
<h:inputText styleClass="inputText" id="text3">
<hx:inputHelperAssist errorClass="inputText_Error" promptCharacter="*" />
<f:convertNumber type="currency" currencySymbol="$" />
</h:inputText></TD>
<TD class="td75"><BLOCKQUOTE>Example:<BR>
<h:inputText><BR>
<hx:inputHelperAssist promptCharacter="*"/><BR>
<f:convertNumber type="currency"
currencySymbol="$"/><BR>
</h:inputText></BLOCKQUOTE></TD>
</TR>
<TR>
<TD class="tdColor25">Date Field - Input Assist Calendar - Press "F4" to
select this field.<BR>
<h:inputText styleClass="inputText" id="text4">
<f:convertDateTime />
<hx:inputHelperDatePicker />
</h:inputText></TD>
<TD class="td75"><BLOCKQUOTE>Example:<BR>
<h:inputText><BR>
<f:convertDateTime /><BR>
<hx:inputHelperDatePicker /><BR>
</h:inputText></BLOCKQUOTE></TD>
</TR>
<TR>
<TD class="tdColor25">Date Field - Prompt Character<BR>
<h:inputText styleClass="inputText" id="text5">
<f:convertDateTime dateStyle="short" />
<hx:inputHelperAssist errorClass="inputText_Error" promptCharacter="X" />
</h:inputText></TD>
<TD class="td75"><BLOCKQUOTE>Example:<BR>
<h:inputText><BR>
<f:convertDateTime dateStyle="short"/><BR>
<hx:inputHelperAssist promptCharacter="X" /><BR>
</h:inputText></BLOCKQUOTE></TD>
</TR>
<TR>
<TD class="tdColor25">Time Field - Input Assist Spinner<BR>
<h:inputText styleClass="inputText" id="text6">
<f:convertDateTime type="time" />
<hx:inputHelperDatePicker delta="300" />
</h:inputText></TD>
<TD class="td75"><BLOCKQUOTE>Example:<BR>
<h:inputText><BR>
<f:convertDateTime type="time"/><BR>
<hx:inputHelperDatePicker delta="300" /><BR>
</h:inputText></BLOCKQUOTE></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<H4>How It works:</H4>
To add input assistance to an input field:<BR>1. Select the input field.<BR>2. Open the Properties view.<BR>3. Under the Input Assist heading click "Show Helper Button".<BR>4. To include prompt characters in the input field, select "Show prompt character".<BR>
5. To auto-advance to the next input field after a user enters information, on the Behaviors tab, select "Auto-advance to next field." and enter the number of characters the user must enter before the field auto-advances.<BR>
<BR>To turn on keyboard assistance:<BR> 1. Open the Properties view for the <h:form> component.<BR>2. On the Keyboard Assist tab, add and assign new action.<BLOCKQUOTE>Example:<BR><hx:inputHelperSetFocus></hx:inputHelperSetFocus><BR> <hx:inputHelperKeybind key="F2" id="inputHelperKeybind1" targetAction="selected" target="text2" /><BR> <hx:inputHelperKeybind key="F3" id="inputHelperKeybind2" targetAction="selected" target="text3" /><BR> <hx:inputHelperKeybind key="F4" id="inputHelperKeybind3" targetAction="selected" target="text4" /></BLOCKQUOTE><H4>Files of interest:</H4>
<UL>
<LI><B>WebContent/inputKeyBindAssist/inputKeyBindAssist.jsp</B> - (This Page)In this file you will find where the input and keyboard assist tags have been added to the JSF page.</LI>
<LI><B>src/pagecode.inputKeyBindAssist/InputKeyBindAssist.java</B> - The Page Code file.</LI>
</UL>
<hx:inputHelperSetFocus></hx:inputHelperSetFocus>
<hx:inputHelperKeybind key="F2" id="inputHelperKeybind1" targetAction="selected" target="text2" />
<hx:inputHelperKeybind key="F3" id="inputHelperKeybind2" targetAction="selected" target="text3" />
<hx:inputHelperKeybind key="F4" id="inputHelperKeybind3" targetAction="selected" target="text4" />
</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/inputKeyBindAssist/InputKeyBindAssist.java" --%><%-- /jsf:pagecode --%>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -