JSF Components
Version: 1.2 | Release Date: 07/02/2024
# inputText
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | String | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
trim | boolean | false | Indicate if space needs to be removed from the beginning and the end of the value. |
upperCase | boolean | false | Indicate if the value should change to capital letters. |
mask | String | Formatting of the value. | |
password | boolean | false | Indicate if type of value is password. |
regex | String | Regular Expression of the mask. | |
maxlength | int | Value's maximnum length. |
# Events
Name | Description |
---|---|
change | Triggered by changing the value |
blur | Triggered by removing the focus from the component |
focus | Triggered by focusing on the component |
click | Triggered by clicking the component |
dblclick | Triggered by double clicking the component |
keydown | Triggered by pressing any keys |
keypresss | Triggered by pressing and releasing any character's keys. Non-character's key like Ctrl, Shift will not trigger this event. |
keyup | Triggered by releasing over any keys |
mousedown | Triggered by pointing device button pressing on the component |
mouseup | Triggered by pointing device button releasing over the component |
mousemove | Triggered by pointing device button moving over the component |
mouseout | Triggered by pointing device button moving off the component |
# inputNum
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | Number | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value:start ,prefix ,suffix ,end . |
groupUsed | boolean | true | Indicate if the integer part should be grouped. |
groupSize | int | 3 | Define how large is the size of the group of integer part. |
length | int | Total length of the number. | |
decimal | int | Size of the fractional part. | |
decimalSeparator | String | . | Define the fractional part separator. |
thousandSeparator | String | , | Define the thousand separator. |
max | double | Define the maximum value of the number. | |
min | double | Define the minimum value of the number. |
# Events
Same as inputText's events.
# inputDate
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | Date | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
clearBtn | boolean | false | Indicate if clear button should be shown in the panel. |
daysOfWeekDisabled | int[] | Define the disabled days. Ranged from 0 to 6 in which 0 represent Sunday. Format like #[0, 1, 3] can be used in xhtml . | |
datesDisabled | Date[] | Define the disabled dates. | |
defaultViewDate | Date | Define the initial date picked. Default: today. | |
endDate | Date | Define the lastest day user can pick. | |
startDate | Date | Define the earliest day user can pick. | |
format | String | yyyy-mm-dd | Format of the date. |
minView | String | days | The smallest unit that can be picked. Options: days , months , year , decades , centuries . |
startView | String | days | The initial view of the selected date. Options: days , months , year , decades , centuries . |
orientation | String | auto | Position of the panel. Combination of horizontal and vertical position. Horizontal options: left , right , auto . Vertical options: top , bottom , auto . |
weekStart | int | 0 | Define the start days of the week. Ranged from 0 to 6 in which 0 represent Sunday. |
todayBtn | boolean | true | Indicate if "Today" button should be shown in the panel. |
todayHighlight | boolean | true | Indicate if "Today" should be highlighted. |
showOnFocus | boolean | false | Indicate if the panel should open automatically when this component is in focused. |
# Events
Same as inputText's events.
# inputTime
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | String | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start ,prefix ,suffix ,end . |
maxHours | int | 24 | Define the maximum hour. |
showSeconds | boolean | true | Indicate if value of second should be shown. |
defaultTime | String | Default time. |
# Events
Name | Description |
---|---|
changeTime | Triggered by changing the value |
show | Triggered when time panel is shown |
hide | Triggered when time panel is hidden |
# inputCombo
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | Number , String | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component is rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component should be disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component should be read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
multiple | boolean | false | Indicate if the value can be multi-selected. |
liveSearch | boolean | false | Indicate if searching is enabled. |
keepInvalid | boolean | false | Indicate if the invalid value should be kept. |
emptyValue | Object | "" | Define the empty value. |
# Events
Name | Description |
---|---|
change | Triggered by changing the value |
blur | Triggered by removing the focus from the component |
focus | Triggered by focusing on the component |
click | Triggered by clicking the component |
dblclick | Triggered by double clicking the component |
# Optional Child-Tags
- selectItem, a single option. Attributes:
Name | Type | Default Value | Description |
---|---|---|---|
itemLabel | String | Option's label. | |
itemValue | Number , String | Option's value. | |
description | String | Options's description. | |
style | String | Inline CSS . | |
styleClass | String | CSS class name. | |
disabled | boolean | false | Indicate if the component should be disabled. |
rendered | boolean | true | Indicate if the component should be rendered. |
- selectItems, a group of options. Attributes:
Name | Type | Default Value | Description |
---|---|---|---|
value | Object | A group of options. |
- selectItemGroup, a combination of
selectItem
,selectItems
,selectItemGroup
. Attributes:
Name | Type | Default Value | Description |
---|---|---|---|
itemLabel | String | Group's label |
# inputColor
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | String | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
withInput | boolean | true | Indicate if input should be shown. |
format | String | rgba | Format of the color. Options: hex , rgb , rgba . |
horizontal | boolean | false | Indicate if the setting bar of transparency and color should be horizontal. |
defaultColors | String[] | Define the default colors. |
# Events
Same as inputText's events.
# inputCheck
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | boolean | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
textPos | String | right | Position of the component's label. Options: left , right . |
# Events
Name | Description |
---|---|
change | Triggered by changing the value |
# inputRadio
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | String , Number , boolean | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
textPos | String | right | Position of the component's label. Options: left , right . |
# Events
Name | Description |
---|---|
change | Triggered by changing the value |
# inputSpinner
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | Number | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
min | doube | 0 | Define the minimum value. |
max | double | 100 | Define the maximum value. |
step | double | 100 | Define the legal number intervals. |
decimal | int | 0 | Define the number of fractional part. |
verticalButton | boolean | false | Indicate if Add/Subtract button should be aligned vertically. |
# Events
Same as inputText's events.
# inputSwitch
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | boolean | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
onColor | String | primary | Define the color when the switch is on . Options: primary , success , danger , warning , info . |
offColor | String | primary | Define the color when the switch is off . Options: primary , success , danger , warning , info . |
onText | String | ON | Indicate the text when the switch is on . |
offText | String | OFF | Indicate the text when the switch is off . |
handleWidth | int | Define the width of the switch. | |
labelWidth | int | Define the width of the switch's label. |
# Events
Name | Description |
---|---|
change | Triggered by changing the value |
# inputSlider
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | Number | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
min | double | 0 | Define the minimum value. |
max | double | 10 | Define the maximum value. |
step | double | 1 | Define the legal number intervals. |
# Events
Name | Description |
---|---|
change | Triggered by changing the value |
# inputTexearea
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | String | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
rows | int | Define the number of component's rows. | |
cols | int | Define the number of component's columns. | |
maxlength | int | Value's maximnum length. | |
trim | boolean | false | Indicate if space need to be removed from the beginning and the end of the value. |
upperCase | boolean | false | Indicate if the value should change to capital letters. |
# Events
Same as inputText's events.
# inputFile
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
multiple | boolean | false | Indicate if multiple files can be uploaded at once. |
briefStyle | boolean | false | Indicate if brief style is enabled. Brief Style: Show all buttons, images but no content. |
download | boolean | true | Indicate if the uploaded files can be downloaded. |
reloadable | boolean | false | Indicate if the file can be reloaded. |
styleClass | String | Component's CSS class name. Space separated. | |
style | String | Component's inline CSS . | |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readonly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
instantUpload | boolean | false | Indicate if the file should be transfer to server once it has uploaded. |
dropZone | boolean | false | Indicate if the drop zone should be shown. |
caption | boolean | true | Indicate if caption should be shown. |
keepData | boolean | false | Indicate if the information of keeping the data will be shown in the component. |
uploadListener | EL expression | Define the listener used to handle the event after uploaded the files. State the method using EL expression . | |
maxCount | int | Define the maximum number of files that can be selected. | |
maxFileSize | long | Define the maximum file's size. | |
removeable | boolean | true | Indicate if selected files can be removed. |
fileType | string | Define the file's type. Options: image , html , text , video , audio , flash , pdf , object , other . Comma(, ) Separated. | |
fileExtension | string | Define the file's extension. Comma(, ) Separated. |
# lookup
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | String | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in the UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Define the Position of the component's information. Possible value:start , prefix , suffix , end . |
lookupType | String | searchType , defined in stSearch.xml , of the current lookup component. | |
checkAccess | boolean | true | Indicate if the data should be filtered based on user's access right. |
lookupDto | StLookupDto | Define the data transfer object of the lookup. |
# treeCombo
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | Number , String | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
items | Object | Define the tree node, it can be TreeComboData or a group of TreeComboNode . | |
liveSearch | boolean | false | Indicated if searching should be supported. |
emptyValue | Object | null | Define the empty's value. |
# Events
Name | Description |
---|---|
change | Triggered by changing the value |
# fluidPanel
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. |
column | int | 2 | Define the maximum columns divided inside the panel. Value should be factor of 12, i.e. 1, 2, 3, 4, 6, 12. 1, 2, 3, 4 are recommended. |
wide | boolean | true | Indicate if the width of the panel should be same as the width of the parent component. |
title | String | Define the title. | |
bordered | boolean | false | Indicate if border should be existed and title will be inside the container. |
groupBorder | boolean | false | Indicate if border should be existed and title will be in line with the border. |
collapsible | boolean | false | Indicate if the panel can be collapsed. |
status | String | normal | Define the initial state. Options: normal , collapsed . |
titleAlign | String | left | Define the alignment of title. Options: left , center , right . |
actionAlign | String | left | Define the alignment of expand/collapse buttons Options: left , center , right . |
collapseText | String | Define the label of the collapse button. | |
expandText | String | Define the label of the expand button. |
# codeEditor
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | String | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
tableName | String | Table related to the component's value. | |
columnName | String | Column related to the component's value. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value: start , prefix , suffix , end . |
lineNumbers | boolean | true | Indicate if line numbers should be shown. |
language | String | javascript | Define the programming language. Options: javascript , formula , plaintplt , html , htmltplt , sql , sqltplt . |
lineWrapping | boolean | true | Indicate if line wrapping should be enabled. |
# Events
Name | Description |
---|---|
change | Triggered by changing the value |
# jqGrid
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. |
visible | boolean | true | Indicate if the component should be visible. |
searchable | boolean | true | Indicate if searching should be supported. |
columns | List<JqGridCol> | Define the columns. | |
sortable | boolean | true | Indicate if sorting should be supported. |
supportPage | boolean | true | Indicate if pagination should be supported. |
multiselect | boolean | false | Indicate if multiple selection should be supported. |
height | int | 250 | Define the height of the container. |
rowNum | int | Define the number of rows per page. | |
rownumbers | boolean | false | Indicate if row number should be shown. |
rowList | int[] | Define the selection of the number of rows per page. | |
sortname | String | Define the initital sorting column. | |
sortorder | String | asc | Define the initital sorting order. Options: asc , desc , |
treeGrid | boolean | false | Indicate if the container should be presented like a tree. |
ExpandColumn | String | Define the column used for expansion of the tree. | |
autoencode | boolean | true | Indicate if html tag should be encoded. |
rownumWidth | int | 35 | Define the width of the column of row number. |
# Events
Name | Description |
---|---|
onClickRow | Triggered by clicking any rows |
onDblClickRow | Triggered by double clicking any rows |
# Optional Child-Tags
- tableColumn, columns of the table. Attributes:
Name | Type | Default Value | Description |
---|---|---|---|
name | String | Define the name. Unique key. | |
label | String | Define the label. | |
align | String | left | Define the alignment. Options: left , center , right . |
formatter | String | Define the type presented in the UI. Value should be javascript 's function,Built-in formatter: checkbox , image . | |
classes | String | Define the CSS style class. | |
width | int | 150 | Define the width. |
sortable | boolean | true | Indicate if sorting is supported. |
hidden | boolean | false | Indicate if this column should be hidden. |
resizable | boolean | true | Indicate if this column can be resized in the UI. |
sorttype | String | text | Define the type of sorting. Value can be pre-defined type or javascript function. Pre-defined types: int , float , date , text . |
cellattr | String | Define a javascript function to add additional attribute to the component. |
# checkGroup & radioGroup
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
value | String | Component's value. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
readOnly | boolean | false | Indicate if the component is read-only. Read-only components will trigger events. |
required | boolean | false | Indicate if the component must be filled. |
label | String | Component's prefix label. | |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
suffixLabel | String | Component's suffix label. | |
info | String | Component's information. | |
infoPos | String | end | Position of the component's information. Possible value:start ,prefix ,suffix ,end . |
column | int | 2 | Define the maximum columns divided inside the panel. Value should be factor of 12, i.e. 1, 2, 3, 4, 6, 12. 1, 2, 3, 4 are recommended. |
groupTitle | String | Define the group title. | |
type | String | If type="border" , border will be added. | |
nativeCheck | boolean | false | Indicate if native stype checkbox will be used. If false , Bootstrap style checkbox will be used. |
textPos | String | left | Define the position of the checkbox's text. Options: left , right . |
dataOption | Collection<OptionItem> | Define the items in the checkbox/ radio group. | |
onchange | Define the function to handle the change of value. |
# Optional Child-Tags
- selectItem, single item. Attributes:
Name | Type | Default Value | Description |
---|---|---|---|
itemLabel | String | Define the label. | |
itemValue | Number , String | Define the value. | |
description | String | Define the description. | |
style | String | Define the inline css . | |
styleClass | String | Define the css class name. | |
disabled | boolean | false | Indicate if the component is disabled. |
rendered | boolean | true | Indicate if the component should be rendered. |
- selectItems, a group of items. Attributes:
Name | Type | Default Value | Description |
---|---|---|---|
value | Object | Define a group of items. |
# toolbar
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in UI but the component will still be generated in HTML . |
disabled | boolean | false | Indicate if the component is disabled. Disabled components will not trigger events. |
labelVisible | boolean | true | Indicate if the component's label is rendered. |
iconStyle | String | small | Define the style of the icon. Options:small , large , hide . |
toolStyle | String | Define the style between the tools' icon. Options: noborder , nospace . | |
moreStyle | String | secondary | Define the style of more button,only works with autoFit="true" . Options: primary , secondary , success , warning , danger |
autoFit | boolean | false | Indicate if the size of toolbar should be calibrated base on the with of the container. |
# Optional Child-Tags
- actionItem, toolbar base action. Attributes:
Name | Type | Default Value | Description |
---|---|---|---|
action | String | Define the name of the action. Unique Key. | |
onstart | String | Define the Javascript to handle the event triggered before the action start. | |
oncomplete | String | Define the Javascript to handle the event triggered when the action is completed. | |
onsuccess | String | Define the Javascript to handle the event triggered when the action's request return success. | |
onerror | String | Define the Javascript to handle the event triggered when the action's request return errors. | |
async | boolean | false | Indicate if the action should be synchronized. |
partialSubmit | boolean | true | Indicate if the action only submit partial data. |
process | String | Define the component in which the value is needed. | |
actionListener | EL expression | Define the listener used to handel the action. | |
update | String | Define the id of the components that need to be updated after the action finished. | |
style | String | Define the inline CSS . | |
styleClass | String | Define the CSS class name. Space separated. | |
colorStyle | String | Define the button's color style. Options: primary , secondary , success , warning , danger . |
Use <caw:icon>
to define the image of the actionItem
actionGroup
Put a group of
actionItem
together (Side by side).actionStack
Present a group of
actionItem
as a drop down menu. The firstactionItem
's icon will be shown in the toolbar, others will become items inside the drop down menu.actionMenu
Present a group of
actionItem
as a drop down menu. Uselabel
to define the text shown in the toolbar.actionFacet
Put other components into toolbar.
<caw:toolbar id="toolbar">
<caw:actionItem action="action1" onstart="" oncomplete=""
process="@this" update="#{caw:webIDs('id1 id2')}"
actionListener="#{xxxBean.action1}"
disabled="false" rendered="true"
mess-label="actionMess" title="#{caw:mess('actionMess')}">
<caw:icon name="cicon-panel" library="font/cawIcon"></caw:icon
</caw:actionItem>
<caw:actionGroup>
<caw:actionItem ...></caw:actionItem>
<caw:actionItem ...></caw:actionItem>
</caw:actionGroup>
<caw:actionStack>
<caw:actionItem ...></caw:actionItem>
<caw:actionItem ...></caw:actionItem>
</caw:actionStack>
<caw:actionMenu label="Dropdown">
<caw:actionItem ...></caw:actionItem>
<caw:actionItem ...></caw:actionItem>
</caw:actionMenu>
<caw:actionFacet name="udfaction">
<caw:inputText></caw:inputText>
</caw:actionFacet>
</caw:toolbar>
# tabView
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in UI but the component will still be generated in HTML . |
tabStyle | String | card | Defined the tab's style. Options: tab , pill , card . |
colorStyle | boolea | Defined the tab's label's color. Options:primary , info , success , warning , danger . | |
colorful | boolean | Indicated if the tab's label should use different color. | |
tabPosition | String | above | Defined the tab's position. Options: above , right , below , left . |
tabAlign | String | left | Defined the tab's alignment. Options: left , center , right . |
bordered | boolean | false | Indicate if bordered should be shown. |
activeTab | String | Defined the activated tab using the id of <caw:tab> . | |
syncActive | boolean | false | Indicated if the tab's state should be synchronized to Back-end Java bean. |
# Optional Child-Tags
- tab, define the content of the tab. Attributes:
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. ID assigned to every component is recommended. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
disabled | boolean | false | Indicate if the current tab should be disabled. |
ajaxLoad | boolean | false | Indicate if the content of the tab should be loaded only when the tab have been activated once. |
onAjaxLoad | ELExpression | Define the method to handle the event before the content loaded. | |
onActive | ELExpression | Define the method to handle the event when the tab is activated. |
# Events
Name | Description |
---|---|
shown | Triggered when tab view is shown |
hidden | Triggered when tab view is hidden |
beforeShow | Triggered before the tab view is shown |
beforeHide | Triggered before the tab view is hidden |
# waterMark
# Attributes
Name | Type | Default Value | Description |
---|---|---|---|
id | String | Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended. | |
style | String | Component's inline CSS . | |
styleClass | String | Component's CSS class name. Space separated. | |
rendered | boolean | true | Indicate if the component should be rendered. If false , the component will not be generated in HTML . |
visible | boolean | true | Indicate if the component should be visible. If false , the component will not be visible in UI but the component will still be generated in HTML . |
name | String | Define the Name. | |
library | String | Define the library used. | |
opacity | float | 1 | Define the opacity. Ranged from 0 to 1. 0 represent invisible. |
zIndex | int | 0 | Define the level. The larger the value, the highest the water mark will be placed. |
position | String | Define the position of the water mark. Options:topleft , topright , bottomleft , bottomright , bottom , top , left , right , center | |
positionX | String | Define the horizontal position. Options: left , center , right , other format like 10px . Mutually exclusive with position . | |
positionY | String | Define the vertical position. Options: top ,center ,bottom ,other format like 10% . Mutually exclusive with position . | |
size | String | Define the size of the water mark. Options: cover , contain . cover means resizing the water mark to cover the background. contain means resizing the water mark to its largest size. Exact value can also be input like size: 100px 200px . | |
width | String | auto | Define the width of the water mark, like 100px , 50% . Mutually exclusive with size . |
height | String | auto | Define the height of the water mark, like 100px , 50% . Mutually exclusive with size . |
# EditTable
# Attributes
Name | Type | Required | Default Value | Description |
---|---|---|---|---|
model | String | Define an interface which is default implemented by EditTableModel . TableData (model of SqlTable ) extends EditTableModel | ||
tableName | String | Y | Define the name of EditTable | |
primarykey | String | Define the primary field(s) of EditTable, ; separated. If all primary fields of a row are empty, system will consider it as an empty row. | ||
caption | String | Define the title of EditTable. If set, expand/collapse EditTable function will be enabled. | ||
style | String | Define the CSS type of EditTable. | ||
styleClass | String | Define the style class name of EidtTable. Use blank space to separate the classes. | ||
expandColumn | String | Y in Tree mode | Define the column to expand the Tree | |
height | int | 200 | Define the height of EditTable | |
rownumWidth | int | 40 | Define the width of row number | |
readonly | boolean | false | Indicate if this EditTable is read-only | |
editable | boolean | true | Indicate if this EditTable is editable | |
sortable | boolean | true | Indicate if this EditTable supports sorting | |
paging | boolean | false | Indicate if this EditTable supports page turning. If not set, it will opposite the editable attribute. | |
changeOrder | boolean | false | Indicate if this EditTable will show the "Move Up" and "Move Down" buttons in "Action" column (row operation) | |
showDefAction | boolean | true | Indicate if this EditTable will show the "Add Row Above", "Add Row Below" and "Delete Row" buttons in "Action" column (row operation). Only effective when editable = true. | |
showAddDeforeIcon | boolean | true | Indicate if this EditTable will show "Add Row Above" button in "Action" column (row operation). Only effective when editable = true. | |
dupRowAction | boolean | true | Indicate if this EditTable will show "Copy Row" button in "Action" column (row operation). Only effective when editable = true. | |
rownumbers | boolean | true | Indicate if this EidtTable will show row numbers | |
treeGrid | boolean | false | Indicate if this EditTable will present Tree mode | |
batchUpdate | boolean | false | Indicate if this EditTable supports Batch Update function. If enabled, a column of checkbox will be inserted into the EditTable. Only rows withcheckbox being ticked will be updated. | |
showFooterRow | boolean | false | Indicate if this EditTable will show the summary row (place at the bottom of EditTable by default) | |
showTopSummary | boolean | false | Indicate if the summary row is placed on the top of EditTable | |
showYScrollBar | boolean | true | Indicate if this EditTable will show the scroll bar of Y-axis | |
supportFormat | boolean | true | Indicate if this EditTable supports Table Format Setup | |
supportModifyChange | boolean | true | Indicate if “*” should be marked before the title of current page when value changes in the cell of this EditTable | |
supportUDFValid | boolean | true | Indicate if this EditTable supports validation of compulsory field that defined in UDF Layout | |
supportArrowKeyPageTurning | boolean | false | Indicate if this EditTable supports turning page through the arrow keys when page turning is enabled | |
supportSrollPageTurning | boolean | false | Indicate if this EditTable supports turning page through scrolling the mouse when page turning is enabled | |
needDefRow | boolean | true | Indicate if an empty row is needed in this EditTable | |
copyExcelData | boolean | false | Indicate if this EditTable supports copying data from Excel | |
addRowWhenChanged | boolean | true | Indicate if an empty row should be added to the bottom after value changed in the last row | |
needRowSelectEvent | boolean | false | Indicate if the rowSelectEvent in function ActionPerformed of JSF Bean should be triggered when the row in EditTable is on focus | |
showLeftIcon | boolean | true | Indicate if the icon of "Shift Column Left" in the function area of column title should be shown | |
showRightIcon | boolean | true | Indicate if the icon of "Shift Column Right" in the function area of column title should be shown | |
showDeleteIcon | boolean | true | Indicate if the icon of "Delete Column" in the function area of column title should be shown (only available in non-compulsory column) | |
showFrozenIcon | boolean | true | Indicate if the icon of "Freeze" in the function area of column title should be shown | |
showDupColIcon | boolean | false | Indicate if the icon of "Copy Column" in the function area of column title should be shown. If enabled, a column of checkbox will be inserted into the EditTable. The value of selected cell will be updated to other cells of current column, only rows with thischeckbox being ticked will be updated. | |
showAddRowIcon | boolean | true | Indicate if the icon of "Add Row" in the function area of this EditTable should be shown (add to be the last row) |
# Element
tableColumn : column of the EditTable, common attribute
Name | Type | Default Value | Description |
---|---|---|---|
columnName | String | Define the name of column. It's compulsory and unique. | |
width | int | 150 | Define the width of column |
editType | String | cawText | Define the type of column |
label | String | Define the title of column | |
pattern | String | Define the constraint rule of column value input and presentation, corresponds to pattern.xml | |
required | boolean | false | Indicate if this column is a compulsory field |
editable | boolean | Indicate if this column is editable. The value is as same as that in EditTable by default. | |
sortable | boolean | true | Indicate if this column supports sorting |
frozen | boolean | false | Indicate if this column is frozen |
hidden | boolean | false | Indicate if this column is hidden by default |
resizable | boolean | true | Indicate if this column supports adjusting its width through mouse |
Available options for attribute
editType
:cawText :
trim : Indicate if the blank space ahead or behind the words input should be removed. Default as
false
.upperCase : Indicate if the words input should be turned into uppercase. Default as
false
.maxLength : Define the max length of words input.
mask : Define the validation rule of words input. (e.g. mask="alias(email)")
<caw:tableColumn columnName="email" edittype="cawText" mask="alias(email)"/>
cawLookup:
- multiSelect : Indicate if multiple select is supported in
Lookup Dialog
. Default asfalse
. - lookupType : Define the
Lookup Type
of this column. Corresponds tostsearch.xml
. - allowAnyValue : Indicate if the input value will NOT be validated in this column. Default as
false
.(Define the column ascawText
withLookup
function if set astrue
) - showCode : Indicate if to show the
code
ofLookup
when the cell is not on focus. Default astrue
. (description
ofLookup
will be shown if it's set asfalse
)
- multiSelect : Indicate if multiple select is supported in
cawMemo :
- readonly|editable : Indicate if the content in the
memo
is read-only / editable.
- readonly|editable : Indicate if the content in the
cawNum :
- length : Define the width of numeric (including decimal)
- decimal : Define the decimal places of numeric
- max : Define the maximum value allowed to input
- min : Define the minimum value allowed to input
cawButton :
- showValueAsTitle : Indicate if showing the title of this button as the value of column. This column should be a real column in
SqlTable
. Default asfalse
. - useBtnClass : Indicate if "Sharp Corner" should be shown in the button when it is clicked. Default as
true
.
- showValueAsTitle : Indicate if showing the title of this button as the value of column. This column should be a real column in
cawCheckbox :
- allowSelectAll : Indicate if the
checkbox
which controls the whole column ofcheckbox
should be shown in the column title. Default asfalse
.
- allowSelectAll : Indicate if the
cawLabel:
cawHtml:
cawDate:
cawTime:
- showSeconds : Indicate if "seconds" should be shown. Default as
true
.
- showSeconds : Indicate if "seconds" should be shown. Default as
cawMess:
cawSelect :
- selectType :
- input\mess\lookup;
- If
selectType = "input"
,InputSelectInfo
should be provided. - If
selectType = "mess"
, it will searchmesscode
automatically. - If
selectType = "lookup"
, it will searchPattern
automatically.
- selectType :
cawTreeCombo :
- treeOption : Corresponds to the
combo
data inTreeComboData
type.
- treeOption : Corresponds to the
cawCombo :
- comboOption : Corresponds to the
List
data inOptionItem
type (or usepattern
attribute). - showBlankOption : Indicate if blank option “--” should shown. Default as
false
. - keepInvalid : Indicate if this
combo
keeps the option of component value while this value is not available in predefined options. Default asfalse
.
- comboOption : Corresponds to the
cawFile:
cawPhoto:
cawColor:
# Interfaces
- TableActionListener
- Unlimited
Listener
are supported. The execution order is in the order of adding theListener
.
- Unlimited
- beforeAction(TableAction action)
- Function executed before Table Action
- afterAction(TableAction action)
- Function executed after Table Action
- afterDupCol(String tableName, int orgIndex, int tarIndex, String columnName)
- Function executed after copying column
beforeBatchUpdate(String tableName, int rowIndex, List<UpdateColumn> columnList)
- Function executed before batch update columns
afterBatchUpdate(String tableName, int rowIndex, List<UpdateColumn> columnList)
- Function executed after batch update columns
- isCellEditable(String tableName, int rowIndex, String columnName)
- Indicate if specific cell is editable or not
- isShowLookupIcon(String tableName, int rowIndex, String columnName)
- Indicate if the icon of
Lookup
should be shown
- Indicate if the icon of
- isActionEnable(String tableName, int rowIndex, String columnName, String action)
- Indicate if column "Action" should be shown in the EditTable
- isCellVisible(String tableName, String columnName)
- Indicate if specific column should be shown
- isCellRequired(String tableName, String columnName)
- Indicate if specific column is compulsory
- getCellStyle(String tableName, int rowIndex, String columnName)
- Return the UDF
html
style of specific cell
- Return the UDF
- getCellStyleClass(String tableName, int rowIndex, String columnName)
- Return the UDF
css
style of specific cell
- Return the UDF
- getRowStyleClass(String tableName, int rowIndex)
- Return the UDF
css
style of specific row
- Return the UDF
- getRowStyle(String tableName, int rowIndex)
- Return the UDF
html
style of specific row
- Return the UDF
- getLookupSearchType(String tableName, int rowIndex, String columnName)
- Used to search the UDF
Lookup
configuration inLookup
Dialog
- Used to search the UDF
- getLookupType(String tableName, int rowIndex, String columnName)
- Used to set the UDF
Lookup
Type forLookup
field
- Used to set the UDF
- getComboOption(String tableName, int rowIndex, String columnName)
- Used to set the UDF options for
Combo
field
- Used to set the UDF options for
- getNumberDecimal(String tableName, int rowIndex, String columnName)
- Used to set the UDF decimal places for numeric field
- getTreeOption(String tableName, int rowIndex, String columnName)
- Used to set the UDF options for
Tree
field
- Used to set the UDF options for
- getInputSelectInfo(String tableName, int rowIndex, String columnName)
- Used to set the UDF
InputSelectInfo
for thecawSelect
field which set selectType="input"
- Used to set the UDF
- assignedLookupData(String tableName, int tarIndex, SqlTable lookupResult, int rowIndex)
- Used to assign the selected data in
Lookup
dialog
- Used to assign the selected data in
# Hot Key
- Ctrl + I : add row
- Ctrl + K : delete row
- Ctrl + ↑ : last EditTable
- Ctrl + ↓ : next EditTable
- Ctrl + Shift + E : export Excel
- Ctrl + Shift + F : auto fit
- Ctrl + Shift + S : Table format Setting
- Page Up : turn previous page (available in paging mode)
- Page Down : turn next page (available in paging mode)