Textbox"

From Documentation
m (Created page with 'init')
 
m
Line 1: Line 1:
−
init
+
{{ZKComponentReferencePageHeader}}
 +
 
 +
= Textbox =
 +
 
 +
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f2 Various Form]
 +
*Java API: <javadoc>org.zkoss.zul.Textbox</javadoc>
 +
*JavaScript API: <javadoc directory="jsdoc">zul.inp.Textbox</javadoc>
 +
 
 +
= Employment/Purpose =
 +
 
 +
A <tt>textbox</tt> is used to let users input text data.
 +
 
 +
You colud assign <tt>value, type, constraint, rows, cols </tt>to a textbox by the corresponding properties. When you assigns the property <tt>type </tt>to a string value 「password」 when <tt>multiline </tt>is false( <tt>multiline</tt> will be <tt>true </tt>if You set rows large then 1 or sets <tt>multiline </tt>to true directly) then any character in this component will replace by '*'.
 +
 
 +
You colud also assign a constraint value with a regular expression string or a default constraint expression(available value is 「no empty」). When user change the value of textbox, will cause a validating preocess to valdate the value. If valdation fail, then a notification will poped up.
 +
 
 +
 
 +
= Example =
 +
 
 +
 
 +
 
 +
[[Image:textbox.png]]
 +
 
 +
<source lang="xml" >
 +
<textbox value="text..." />
 +
<textbox value="secret" type="password" />
 +
<textbox constraint="/.+@.+\.[a-z]+/: Please enter an e-mail address" />
 +
<textbox rows="5" cols="40">
 +
<attribute name="value">
 +
text line1...
 +
text line2...
 +
</attribute>
 +
</textbox>
 +
</source>
 +
 
 +
 
 +
=Supported events=
 +
 
 +
{| border="1" | width="100%"
 +
! <center>Name</center>
 +
! <center>Event Type</center>
 +
|-
 +
| <center><tt>onChange</tt></center>
 +
| [#InputEvent org.zkoss.zk.ui.event.InputEvent]
 +
 
 +
'''Description:'''
 +
 
 +
Denotes the content of an input component has been modified by the user.
 +
 
 +
|-
 +
| <center><tt>onChanging</tt></center>
 +
| [#InputEvent org.zkoss.zk.ui.event.InputEvent]
 +
 
 +
'''Description: '''
 +
 
 +
Denotes that user is changing the content of an input component. Notice that the component's content (at the server) won't be changed until <tt>onChange</tt> is received. Thus, you have to invoke the <tt>getValue </tt>method in the <tt>InputEvent </tt>class to retrieve the temporary value.
 +
 
 +
|-
 +
| <center><tt>onSelection</tt></center>
 +
| [#SelectionEvent org.zkoss.zk.ui.event.SelectionEvent]
 +
 
 +
'''Description: '''
 +
 
 +
Denotes that user is selecting a portion of the text of an input component. You can retrieve the start and end position of the selected text by use of the <tt>getStart</tt> and <tt>getEnd</tt> methods.''' '''
 +
 
 +
|-
 +
| <center><tt>onFocus</tt></center>
 +
| [#Event org.zkoss.zk.ui.event.Event]
 +
 
 +
'''Description: '''
 +
 
 +
Denotes when a component gets the focus. Remember event listeners execute at the server, so the focus at the client might be changed when the event listener for <tt>onFocus</tt> got executed.
 +
 
 +
|-
 +
| <center><tt>onBlur</tt></center>
 +
| [#Event org.zkoss.zk.ui.event.Event]
 +
 
 +
'''Description: '''
 +
 
 +
Denotes when a component loses the focus. Remember event listeners execute at the server, so the focus at the client might be changed when the event listener for <tt>onBlur </tt>got executed.
 +
 
 +
|-
 +
| <center><tt>onCreate</tt></center>
 +
| [#CreateEvent org.zkoss.ui.zk.ui.event.CreateEvent]
 +
 
 +
'''Description: '''
 +
 
 +
Denotes a component is created when rendering a ZUML page.
 +
 
 +
|-
 +
| <center><tt>onDrop</tt></center>
 +
| [#DropEvent org.zkoss.ui.zk.ui.event.DropEvent]
 +
 
 +
'''Description: '''
 +
 
 +
Denotes another component is dropped to the component that receives this event.
 +
 
 +
|}
 +
 
 +
=Supported Children=
 +
 
 +
*NONE
 +
 
 +
=Use cases=
 +
 
 +
{| border='1px' | width="100%"
 +
! Version !! Description !! Example Location
 +
|-
 +
| 5.0+
 +
| &nbsp;
 +
| &nbsp;
 +
|}
 +
 
 +
=Version History=
 +
 
 +
{| border='1px' | width="100%"
 +
! Version !! Date !! Content
 +
|-
 +
| 5.0.1
 +
| 05/11/2010
 +
| Initialization
 +
|}
 +
 
 +
{{ZKComponentReferencePageFooter}}

Revision as of 07:14, 11 May 2010


DocumentationZK Component ReferenceInputTextbox
Textbox

Textbox

Employment/Purpose

A textbox is used to let users input text data.

You colud assign value, type, constraint, rows, cols to a textbox by the corresponding properties. When you assigns the property type to a string value 「password」 when multiline is false( multiline will be true if You set rows large then 1 or sets multiline to true directly) then any character in this component will replace by '*'.

You colud also assign a constraint value with a regular expression string or a default constraint expression(available value is 「no empty」). When user change the value of textbox, will cause a validating preocess to valdate the value. If valdation fail, then a notification will poped up.


Example

File:Textbox.png 

<textbox value="text..." />
<textbox value="secret" type="password" />
<textbox constraint="/.+@.+\.[a-z]+/: Please enter an e-mail address" />
<textbox rows="5" cols="40">
	<attribute name="value">
		text line1... 
		text line2...
	</attribute>
</textbox>


Supported events

Name
Event Type
onChange
 [#InputEvent org.zkoss.zk.ui.event.InputEvent]

Description:

Denotes the content of an input component has been modified by the user.

onChanging
 [#InputEvent org.zkoss.zk.ui.event.InputEvent]

Description:

Denotes that user is changing the content of an input component. Notice that the component's content (at the server) won't be changed until onChange is received. Thus, you have to invoke the getValue method in the InputEvent class to retrieve the temporary value.

onSelection
 [#SelectionEvent org.zkoss.zk.ui.event.SelectionEvent]

Description:

Denotes that user is selecting a portion of the text of an input component. You can retrieve the start and end position of the selected text by use of the getStart and getEnd methods.

onFocus
 [#Event org.zkoss.zk.ui.event.Event]

Description:

Denotes when a component gets the focus. Remember event listeners execute at the server, so the focus at the client might be changed when the event listener for onFocus got executed.

onBlur
 [#Event org.zkoss.zk.ui.event.Event]

Description:

Denotes when a component loses the focus. Remember event listeners execute at the server, so the focus at the client might be changed when the event listener for onBlur got executed.

onCreate
 [#CreateEvent org.zkoss.ui.zk.ui.event.CreateEvent]

Description:

Denotes a component is created when rendering a ZUML page.

onDrop
 [#DropEvent org.zkoss.ui.zk.ui.event.DropEvent]

Description:

Denotes another component is dropped to the component that receives this event.

Supported Children

*NONE

Use cases

Version Description Example Location
5.0+    

Version History

Version Date Content
5.0.1 05/11/2010 Initialization



Last Update : 2010/05/11

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Input/Textbox&oldid=1202"