Longbox"

From Documentation
m ((via JWB))
 
(10 intermediate revisions by 5 users not shown)
Line 3: Line 3:
 
= Longbox =
 
= Longbox =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f2 Longbox]
+
*Demonstration: [http://www.zkoss.org/zkdemo/input/form_sample Longbox]
 
*Java API: <javadoc>org.zkoss.zul.Longbox</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Longbox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.inp.Longbox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.inp.Longbox</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Longbox | Longbox]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
A long<tt>box</tt> is used to let users input long data.
+
A long<code>box</code> is used to let users input long data.
  
 
= Example =
 
= Example =
Line 16: Line 17:
  
 
<source lang="xml" >
 
<source lang="xml" >
  <window title="Longbox Demo" border="normal" width="200px">
+
  <window title="Longbox Demo" border="normal" width="400px">
     long box:<longbox/>
+
     long box:<longbox width="250px"/>
 
  </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>
+
<longbox format="#,##0"/>
! <center>Event Type</center>
+
</source>
|-
 
| <center><tt>onChange</tt></center>
 
| <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>
 
  
'''Description:'''
+
  Since 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" >
 +
<longbox 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.
| <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>
+
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" >
 +
<longbox 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>
 
| <javadoc>org.zkoss.zk.ui.event.SelectionEvent</javadoc>
 
  
'''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>
+
<longbox constraint="no negative: ${c:l('err.num.negative')}"/>
| <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
+
</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>
 
| <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
 
 
'''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>
 
| <javadoc>org.zkoss.ui.zk.ui.event.CreateEvent</javadoc>
 
 
 
'''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
| <javadoc>org.zkoss.ui.zk.ui.event.DropEvent</javadoc>
+
| 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 88: Line 80:
 
  *NONE
 
  *NONE
  
=Use cases=
+
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
| 5.0+
+
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
Line 99: Line 91:
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.0.1
+
| &nbsp;
| 4/27/2010
+
| &nbsp;
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 10:42, 12 January 2022

Longbox

Employment/Purpose

A longbox is used to let users input long data.

Example

ZKComRef longbox.jpg

 <window title="Longbox Demo" border="normal" width="400px">
     long box:<longbox width="250px"/>
 </window>

Properties

Format

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

<longbox format="#,##0"/>
 Since 8.5.2

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

<longbox 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.

<longbox 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.
<longbox 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
     

Version History

Last Update : 2022/01/12


Version Date Content
     



Last Update : 2022/01/12

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