Intbox"

From Documentation
 
(17 intermediate revisions by 7 users not shown)
Line 3: Line 3:
 
= Intbox =
 
= Intbox =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f2 Intbox]
+
*Demonstration: [http://www.zkoss.org/zkdemo/input/form_sample Intbox ]
 
*Java API: <javadoc>org.zkoss.zul.Intbox</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Intbox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.inp.Intbox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.inp.Intbox</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Intbox | Intbox]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
A <tt>intbox</tt> is used to let users input integer data.
+
An <code>intbox</code> is used to let users input integer data.
  
 
= Example =
 
= Example =
Line 24: Line 25:
 
  </window>
 
  </window>
 
</source>
 
</source>
 +
=Properties=
  
=Supported events=
+
== Format ==
 +
You are able to format the field by providing specifying the attribute with a formatting string. The default value is <code>null</code>.
  
{| border="1" | width="100%"
+
<source lang="xml" >
! <center>Name</center>
+
<intbox format="#,##0"/>
! <center>Event Type</center>
+
</source>
|-
 
| <center><tt>onChange</tt></center>
 
| [#InputEvent org.zkoss.zk.ui.event.InputEvent]
 
  
'''Description:'''
+
{{versionSince| 8.5.2}}
 +
You can provide a locale to format the number by specify the String starts with "locale:"
  
Denotes the content of an input component has been modified by the user.
+
<source lang="xml" >
 +
<intbox format="locale:zh-TW"/>
 +
</source>
  
|-
+
== Constraint ==
| <center><tt>onChanging</tt></center>
+
You could specify what value to accept for input controls by use of the <code>constraint </code>property.
| [#InputEvent org.zkoss.zk.ui.event.InputEvent]
+
It could be a combination of <code>no positive</code>, <code>no negative</code>, <code>no zero</code>, <code>no empty</code>.
  
'''Description: '''
+
To specify two or more constraints, use comma to separate them as follows.
  
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.
+
<source lang="xml" >
 +
<intbox constraint="no negative,no empty"/>
 +
</source>
  
|-
+
If you prefer to display different message to the default one, you can append the error message to the constraint with a colon.
| <center><tt>onSelection</tt></center>
 
| [#SelectionEvent org.zkoss.zk.ui.event.SelectionEvent]
 
  
'''Description: '''
+
<source lang="xml" >
 +
<intbox constraint="no negative: it shall not be negative"/>
 +
</source>
  
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.''' '''
+
Notes:
 +
* The error message, if specified, must be the last element and start with colon.
 +
* To support multiple languages, you could use the 「l」 function as depicted in the '''Internationalization''' chapter.
  
|-
+
<source lang="xml" >
| <center><tt>onFocus</tt></center>
+
<intbox constraint="no negative: ${c:l('err.num.negative')}"/>
| [#Event org.zkoss.zk.ui.event.Event]
+
</source>
  
'''Description: '''
+
=Inherited Functions=
  
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.
+
Please refer to [[ZK_Component_Reference/Base_Components/NumberInputElement| NumberInputElement]] for inherited functions.
 
+
=Supported Events=
|-
 
| <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.
 
  
 +
{| class='wikitable' | width="100%"
 +
! <center>Name</center>
 +
! <center>Event Type</center>
 
|-
 
|-
| <center><tt>onDrop</tt></center>
+
| None
| [#DropEvent org.zkoss.ui.zk.ui.event.DropEvent]
+
| None
 
 
'''Description: '''
 
 
 
Denotes another component is dropped to the component that receives this event.
 
 
 
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/NumberInputElement#Supported_Events | NumberInputElement]]
  
 
=Supported Children=
 
=Supported Children=
Line 92: Line 83:
 
  *NONE
 
  *NONE
  
=Use cases=
+
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
| 5.0+
+
| 3.6
| &nbsp;
+
| Leading zero in Intbox
| &nbsp;
+
| [http://www.zkoss.org/forum/listComment/10271 http://www.zkoss.org/forum/listComment/10271]
 +
|-
 +
| 3.6
 +
| Constraint Intbox to accept only digits
 +
| [http://www.zkoss.org/forum/listComment/4603 http://www.zkoss.org/forum/listComment/4603]
 
|}
 
|}
  
=Version History=
 
  
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
|-
 
| 5.x.x
 
| x/x/20xx
 
| Initialization
 
|}
 
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 01:47, 29 May 2023

Intbox

Employment/Purpose

An intbox is used to let users input integer data.

Example

ZKComRef Intbox.png

While input invalid data:

ZKComRef Intbox2.png

 <window title="Intbox Demo" border="normal" width="200px">
     int box:<intbox/>
 </window>

Properties

Format

You are able to format the field by providing specifying the attribute with a formatting string. The default value is null.

<intbox format="#,##0"/>

Since 8.5.2 You can provide a locale to format the number by specify the String starts with "locale:"

<intbox format="locale:zh-TW"/>

Constraint

You could specify what value to accept for input controls by use of the constraint property. It could be a combination of no positive, no negative, no zero, no empty.

To specify two or more constraints, use comma to separate them as follows.

<intbox constraint="no negative,no empty"/>

If you prefer to display different message to the default one, you can append the error message to the constraint with a colon.

<intbox constraint="no negative: it shall not be negative"/>

Notes:

  • The error message, if specified, must be the last element and start with colon.
  • To support multiple languages, you could use the 「l」 function as depicted in the Internationalization chapter.
<intbox constraint="no negative: ${c:l('err.num.negative')}"/>

Inherited Functions

Please refer to NumberInputElement for inherited functions.

Supported Events

Name
Event Type
None None

Supported Children

*NONE

Use Cases

Version Description Example Location
3.6 Leading zero in Intbox http://www.zkoss.org/forum/listComment/10271
3.6 Constraint Intbox to accept only digits http://www.zkoss.org/forum/listComment/4603




Last Update : 2023/05/29

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