SLE-DS 0025 CustomComponent

Doc: SLE_DS_0025 Type: DS Version: v2
SeaLiner Enterprise
Custom Component
(SLE_DS_0025)
Revision History
Date Version Description of Changes Prepared By
14-07-08 Draft Initial document Chang Ye

04-09-08 Draft Update new paging component Andy Ng
12-09-08 Draft Update new upload file component lklau
15-09-08 Draft Update tsiInputText, tsiNumber, Yip Wan
tsiSelectOneMenu, tsiSelectOneRadio
24-09-08 Draft -Update tsiNumber, added number type of long Yip Wan
-Update EditablePagingDataTable, added new
attribute, postAddRowListener
-Added tsiDateTime
25-09-08 Draft -Updated tsiDateTime on attribute timezoneField Yip Wan
17-10-08 Draft -Updated tsiDateTime added UserTimeZone type Yip Wan
21-10-08 Draft -Updated editablePagingDataTable, added Yip Wan
attribute, addButtonRendered
-Updated tsiDateTime limitation, added item 1.
24-10-08 V1d6 -Update new CountryStateCity (CSC) & Contact Nor Ashid
Person Detail (CPD) Components
29-10-08 V1d7 Add in new LOV component guideline Andy
12-11-08 V1d8 Modify tsiDateTime, modified class type to all Yip Wan
java.util.Date instead of com.tsi.common.util.Date
28-04-09 V1d9 Update tsi:lookupValue components new Andy
attributes
39-04-09 V1d10 Update tsi:dataTable and tsi:editableDataTable Andy
components new attributes and paging query
condition features.
08-05-09 V2 Reviewed Chang Ye
Definition
Acronym Definition
Page 2 from 67
Table of Content
1 Overview..................................................................................................................4
1.1 Objective.......................................................................................................................................................5
1.2 Scope.............................................................................................................................................................6
1.3 Reference Document.....................................................................................................................................7
2 CUSTOM TAG..........................................................................................................8
2.1 tsi:multiLang...............................................................................................................................................10
2.2 tsi:radioButton (deprecated).......................................................................................................................13
2.3 tsi:tabPanel.................................................................................................................................................15
2.4 tsi:header....................................................................................................................................................16
2.5 tsi:checkbox.................................................................................................................................................17
2.6 tsi: populateValueInput (deprecated)..........................................................................................................18
2.7 tsi:lov (deprecated).....................................................................................................................................21
2.8 tsi:populateEntityInput (deprecated)..........................................................................................................24
2.9 tsi:entityLov (deprecated)...........................................................................................................................25
2.10 tsi:dataTable...........................................................................................................................................26
2.11 tsi:editableDataTable.............................................................................................................................35
2.12 tsi:dataTableFooterBtn..........................................................................................................................38
2.13 tsi:uploadFile.........................................................................................................................................39
2.14 tsiInputText.............................................................................................................................................40
2.15 tsiNumber...............................................................................................................................................42
2.16 tsiSelectOneMenu...................................................................................................................................43
2.17 tsiSelectOneRadio..................................................................................................................................45
2.18 tsi:validateRegExpr................................................................................................................................47
2.19 tsi:validateBigDecimalRange................................................................................................................48
2.20 tsi:validateBigDecimalCompare............................................................................................................49
2.21 f:validator Sealiner.EmailAddressValidator...........................................................................................50
2.22 tsi:dateTime............................................................................................................................................51
2.23 tsi:csc (deprecated)................................................................................................................................57
2.24 tsi:cpd (deprecated)................................................................................................................................59
2.25 tsi:lookupValue.......................................................................................................................................62
3 Appendices...........................................................................................................67
Page 3 from 67
1 Overview
Page 4 from 67
1.1 Objective
This document describes the available custom components to be used in SLE

application. These reusable components are developed to simplify and speed
up the development process.
With this components, the application behavior will be standardized and easier
to manage and troubleshooting.
Therefore, developers are encouraged to use these components whenever

possible.
Page 5 from 67
1.2 Scope
Exceptions
try-catch-finally
Sample codes
Page 6 from 67
1.3 Reference Document
Page 7 from 67
2 CUSTOM TAG
1. tsi:multiLang
This is a button that will call a pop up window upon clicking. User can key in multiple local
values for Multilanguage in the pop up window, and the values will be saved to managed bean.
2. tsi:radioButton
This is a customized radio button which can use in the data table, and fall as one radio button
group instead different radio button group.
3. tsi:tabPanel
This is a component contains list of hyperlink which make the representation looks and feels
like a tab.
4. tsi:header
This component groups all the header information as one component, and renders them
together. This is created mainly for ease of usage and minimizes programmer code effort.
5. tsi:checkbox
6. tsi:populateValueInput
This is an input text component with extra behavior, such query ID, condition field, error
message etc, which is required when populate value through AJAX.
7. tsi:lov
This is a button component that will call a pop up window upon clicking, and showing list of
chose able values based on the search conditions passed.
This component will perform a query to database to find a list of matching records and display
as paging list. User is allowed to select a record, and the value will be populating to the
according fields based on the field mapping.
8. tsi:populateEntityInput
This is an input text component with extra behavior.
With the aid for A4J, upon the onBlur event, based on the user input text, this component will
perform a query to database to find a matching entity record. The matching entity will be
associated to the target entitys attribute.
9. tsi:entityLov
10. tsi:uploadFile
Page 8 from 67
This is a component to open up the windows and allow user to upload and download files
to/from DB.
11. tsi:validateRegExpr
Validate component using regular expression.
12. tsi:validateBigDecimalRange
Validate BigDecimal component within specific range
13. tsi:validateBigDecimalCompare
Validate BigDecimal component with other BigDecimal component
14. f:validator Sealiner.EmailAddressValidator

Provide email address validation feature for component
Page 9 from 67
2.1 tsi:multiLang
Author Lai Yip Wan
Description This is a component that helps putting Multilanguage attributes into managed bean, after that
developer is responsible for saving those attributes into database. A button labeled as Multi
Language will be rendered for this component. After clicking the button, a pop up window will
appear and user are required to key in local value for different language code.
Every Multilanguage attribute will be saved to CAP_MULTILANGUAGE, the primary key of the
table is TABLE_NAME, COLUMN_NAME, PRIMARY_KEY, LANGUAGE_CODE, meaning that
every column of a particular table can have a local value of every language code. Developer has to
provide TABLE_NAME, COLUMN_NAME, PRIMARY_KEY to this component properties.
Upon popup, the ever entered language local value will be listed. User can click add new language
code. Upon clicking ok, validation will be carried on. There should not be duplicated language
code, and every local value must not be empty.
Developer has to pass in a MultiLanguageBean that stored in session object, so that the values
keyed in popup window will be saved into the session object.
Limitation When user click close button instead of ok button, the last changes that user made will not be
saved.
Sample
Screen
The Multilanguage button.
Multilanguage pop up window.

Pre- None
requisite
Parameters
Parameter Name Description
value The label appeared at the button.
styleClass Style class of the button.
displayLabel1 The label of column 2 header. For example: Terminal code
at the above showed diagram.
saveObject The MultiLanguageBean that will be kept in session. It has
to be class of MultiLanguageBean
rendered To be rendered or not.
rowIndex The index of that row, this will only be used when the
Multilanguage button has to be placed inside a list.
Page 10 from 67
Example Steps:
1. Create a new property of class MultiLanguageBean at your program managed bean to
store Multilanguage values, for example, in program country, country name and country
description need to store Multilanguage, so inside CountryManagedBean will have
a. Private MultiLanguageBean countryNameMultilanguageBean
b. Private MultiLanguageBean countryDescMultilanguageBean
2. Create Multilanguage tag at your JSP, things need to pass in

a. saveObject The MultilanguageBean in your managed bean, the values that
keyed in at popup will be stored inside this object
b. displayLabel1 The display label that will show as column 2 header at the popup
c. Eg: For Multilanguage that be placed inside a list, the tag has to specify the
rowIndex of the row. After that, a placeholder (_rowIndex) has to be put at the
saveObject. For the example below, there is a list of terminal in managed bean,
named as terminal, and each of terminal entity has a MultiLanguageBean.
<tsi:multilang value="#{common_lbl['btn.multilanguage']}" styleClass="FormBtn"

displayLabel1="#{cap_lbl['lbl.terminal.code']}"
saveObject="#{equipTerminalManagedBean.terminal[_rowIndex].multiLang}"
rowIndex="#{rowIndex}/>
d. Eg:
<tsi:multilang value="#{common_lbl['btn.multilanguage']}" styleClass="FormBtn"
displayLabel1="#{cap_lbl['lbl.terminal.code']}"
saveObject="#{equipTerminalManagedBean.terminalNameMultiLang}"/>
3. When click new action at your program, create a new MultiLanguageBean and put to
managed bean
a. Eg: Inside your backing bean
MultiLanguageBean mlBean = new MultiLanguageBean();

mlBean.setTableName(MultiLanguageConstants.TABLENAME_TERMINAL_DEPOT);
mlBean.setColumnName(MultiLanguageConstants.COLUMNNAME_TERMINAL_DEPOT_NAME);
equipTerminalManagedBean.setTerminalNameMultiLang(mlBean);
4. When click edit action at your program, your backing bean need to call your service object
and your service object need to call MultilanguageSO to retrieve MultilanguageBean and
put to your managed bean, so that the popup can get the value and display on screen, the
retrieving is based on 3 criterias, tableName, columnName, primaryKey
a. Eg: Inside your service object
// retrieve multilanguage
MultiLanguageReqDTO mReqDTO = new MultiLanguageReqDTO();
mReqDTO.setTableName(MultiLanguageConstants.TABLENAME_TERMINAL_DEPOT);
mReqDTO.setColumnName(MultiLanguageConstants.COLUMNNAME_TERMINAL_DEPOT_NAME);
mReqDTO.setPrimaryKey(terminalDepot.getTerminalDepotCode());
MultiLanguageResDTO mResDTO = multiLanguageSO.getMultiLanguage(mReqDTO);
resDTO.setTerminalNameMultiLang(mResDTO.getMultiLanguageBean());
b. Eg: Inside your backing bean set the MultiLanguageBean from response object to
your managed
// retrieve multilanguage bean

equipTerminalManagedBean.setTerminalNameMultiLang(resDTO.getTerminalNameMultiLang
());
Page 11 from 67
5. When click save action at your program, your backing bean need to call your service
object, and your service object need to call MultiLanguageSO to save the
MultiLanguageBean, but before call save, need to make sure tableName, columnName,
primaryKey, languageCode is not null. The validation can be done by calling
MultiLanguageBackingBean static validation method.
a. Eg: Inside your backing bean
// call MultiLanguageBackingBean to do validation before save

MultiLanguageBackingBean.validateMultilanguage(equipTerminalManagedBean.getTermin
alNameMultiLang());
// put Multilanguage into request object and send to service object

reqDTO.setTerminalNameMultiLang(equipTerminalManagedBean.getTerminalNameMultiLang
());
b. Eg: Inside your service object, make sure save your record first then only save
Multilanguage, and then grab the primary key and put to MultiLanguageBean and
save
// to save multilanguage
reqDTO.getTerminalNameMultiLang().setPrimaryKey(terminalDepot.getTerminalDepotCod
e());
MultiLanguageReqDTO mReqDTO = new MultiLanguageReqDTO();
mReqDTO.setMultiLanguageBean(reqDTO.getTerminalNameMultiLang());
mResDTO = multiLanguageSO.saveMultiLanguage(mReqDTO);
// set all multilanguage to brandNew=false

for(CapMultiLanguage ml : multiLanguageBean.getMultiLanguageList()) {
ml.setBrandNew(false);
}
// put the Multilanguage back to response object

resDTO.setTerminalNameMultiLang(mlBean);
Page 12 from 67
2.2 tsi:radioButton (deprecated)

Author Chean Chean (Refer to http://www.javaworld.com/javaworld/jw-02-2007/jw-02-jsf.html?page=1)
Description This is a customized radio button which can use in the data table, and fall as one radio button
group instead different radio button group.
This customized radio button component is required because there is a limitation on the current
JSF <h: selectOneRadio> tag when it is applied inside the data table. The radio button is rendered
properly, but all radio buttons inside each cell (inside each <TR> and <TD> tag) are falling under
different radio button groups, because each radio buttons name attribute is generated uniquely in
JSF container.
In order to group all the radio buttons in a particular column, we need to set the overrideName
attribute as true. If overrideName is set to true, the value supplied in name will remain as is. If the
name is the same for all the columns, all the radio buttons inside that particular column will
automatically fall in the same group.
Limitation We need to take care while providing the custom radio button's name attribute. This is because the
name generated by the JSF container is discarded and use our name; the name may conflict
accidentally with some other radio button names on JSP.
In addition, it is required to make sure that the customized tag is used directly under the <h:
column> attribute. If the radio component nest within some other component (e.g. : <h: panelGrid>)
inside <h: column>, this solution will not work.
Sample
Screen
Figure 1: Radio Component
Pre- -
requisite
Parameters
name Name attribute of the radio button tag
overrideName If the value provided in this attribute is true then the name
supplied in the name attribute will be kept as it is supplied
and the name will not be overridden by the JSF container.
styleClass The class attribute of the radio button. The class attribute
will contain the value of a CSS style class.
style The style attribute of the radio button. The style attribute
will contain any inline style.
disabled Disabled property of the radio button.
itemLabel Any text association with the radio button.
itemValue The value attribute of radio button.
onClick Allow to add in any custom java script upon the ONCLICK
event.
Page 13 from 67
onMouseOver Allow to add in any custom java script upon the
ONMOUSEOVER event.
onMouseOut Allow to add in any custom java script upon the
ONMOUSEOUT event.
onFocus Allow to add in any custom java script upon the ONFOCUS
event.
onBlur Allow to add in any custom java script upon the ONBLUR
event.
Example <tsi:radioButton id="myRadioId1" name="myRadioCol" overrideName="true"
value="#{corpBsuBackingBean.searchModel.selectedKey}"
itemValue="#{row.primaryKey}">
</tsi:radioButton>
Page 14 from 67
2.3 tsi:tabPanel
Author Siew Mei
Description This is a component which makes the list of hyperlink looks and feels like a tab. The component is
created due to the tab component in open-source library has the limitation of data capturing in
data-table while switching tab.
For a normal tab, the text label is in white color, text label for selected tab is gold color, and text
label for disabled tab is grey color.
Limitation The component is doing a server submit while user switch tab.
Sample
Screen
Pre- -
requisite
Parameters
id The developer assigned ID of this component. The id must
be unique within the scope of the tags enclosing naming
container (e.g.: h:form or f:subview). This value must be a
static value.
name Unique Id for each hyperlink. Pipe-separated list of Id(s).
The number of id(s) must be tally with columns attribute.
Example: name= defined|advanced
columns Number of hyperlink. Example: column=2
tabAction Action for each hyperlink when invoke. Pipe-separated list
of action(s). The number of action(s) must be tally with
columns attribute.
Example: tabAction =
lineBackingBean.definedSearchTabAction|
lineBackingBean.advancedSearchTabAction
displayName Display text for each hyperlink. Pipe-separated list of
display text(s). The number of display text(s) must be tally
with columns attribute.
Example: displayName =
#{common_lbl[lbl.defined.search]|
#{common_lbl[lbl.advanced.search]}}
selectedTab Id of the hyperlink which is currently selected.
disabledTab When true, the link of the tabPanel cannot receive focus.
Default is false for all tabs. The element must be tally with
columns attribute.
Example: disabledTab= true|false
Example <tsi:tabPanel id="lineMaintTab"
tabAction="lineBackingBean.lineMaintTabAction|
lineBackingBean.lineMaintListTabAction"
columns="2" name="lineMaint|lineMaintList"
displayName="#{syc_lbl['lbl.line.setup']}|#{syc_lbl['lbl.line.hq.bsu']}"
selectedTab="#{lineBackingBean.selectedTab}"
disabledTab="#{lineBackingBean.disabledLineTab}" />
Page 15 from 67
2.4 tsi:header
Author Chean Chean
Description A header component, which group all the header information as a component, for ease of usage.
The header information includes user line brand information, user ID, user BSU level, and program
title.
Limitation -
Sample
Screen
Figure 2: Header Screen
Pre- -
requisite
Parameters
title Program title to be displayed.
close A flag to indicate whether the close button should be
rendered. If close=true the system will prompt the user
want to close the window or not.
back A flag to indicate whether the back button should be
rendered
backAction The back-end action that need to be invoked when the
back button is clicked.
backOnclick The java script method that need to be invoked when the
back button is clicked.
save A flag to indicate whether the save button should be
rendered
saveAction The back-end action that need to be invoked when the
save button is clicked.
saveOnclick The java script method that need to be invoked when the
save button is clicked.
help A flag to indicate whether the help button should be
rendered
helpAction The back-end action that need to be invoked when the help
button is clicked.
helpOnclick The java script method that need to be invoked when the
help button is clicked.
Example <tsi:header title="#{syc_lbl['lbl.corporate.bsu']}"
help="true" helpAction=""
back="true" backAction="corpBsuBackingBean.backAction"
save="true" saveAction="corpBsuBackingBean.saveAction" />
Page 16 from 67
2.5 tsi:checkbox
Author Chang Ye
Description This checkbox can accept converter. The regular checkbox component does not work with
converter and only accept true/false value.
In some cases, whereby the value is NOT true/false, but could be Y/N, 1/0, and etc. Therefore,
with this custom checkbox, developers may use any converter to manipulate the values.
Limitation
Sample
Screen
Pre- MyFaces API

requisite
Parameters
value The local value property or ValueExpression of this
component.
converter A converter to be registered with this component.
Example <tsi:checkBox
value="#{commentCatgManagedBean.commentCategoryEntityBean.systemNotifica
tionFlg}" />
Page 17 from 67
2.6 tsi: populateValueInput (deprecated)

Author Chean Chean
Description This is a customized input text component which consists of extra behavior than an input text, such
as query ID, condition field, error code etc.
The main purpose of this component is to reduce mistake or messy codes, such as to avoid using
a lot of <f: attribute>/ <f: param> tags in order to passed in a lot of parameters.
This component support up to 3 different queries, along with different update fields and condition
fields.
When user enters the value, either ONBLUR or ONCHANGE event will be invoked. It will send the
request to the back-end and retrieve the match record based on the query ID and condition fields
value sent.
Process Flow :
Attempt 1: queryId, conditionField, and updateField.
Attempt 2: optionalQueryId1, optionalConditionField1, and optionalUpdateField1.
Attempt 3: optionalQueryId2, optionalConditionField2, and optionalUpdateField2.
If the result is match, it will populate the value to the JSP elements based on the update fields.
Otherwise, it will continue others attempts. When all the attempts tried and still no result found, an
error message will be throws, indicate value entered by user is invalid.
Limitation It just limit to 3 different queries. When there is scenario which required more queries, changes is
requited in the current component.
Sample
Screen
Figure 3: Populate Value Input Component
Pre-
requisite
Parameters
queryId A unique ID to identify which LoV is requested.
The LoV component will grab the information from the
optionalQueryId1 database to generate the query statement.
optionalQueryId2 There are 3 queries ID, to support maximum 3 different

scenarios when the result is not match.
conditionField To specify system pre-defined conditions.
It support for multiple conditions by using "|" as
delimiter.
Format :
[Column Mapping*] ^ [Value*] ^ [Operator] ^ [And/or]
* mandatory field
Column Mapping
Column name, which use to map back the
exact property name
Value
The pre-defined value can be either hardcoded or
get from the form element.
Page 18 from 67
optionalConditionFiel
d1
optionalConditionFiel
d2
updateField
optionalUpdateField1
optionalUpdateField2
dataTableId The form table element ID, which is needed to retrieve the
element which binds in the data table.
This is requested when the component is bind inside data
table.
messageCode The error message code ID which used to display the error
message when the validation failed.
messageParams The parameters which required to be passed into the
message code to form the error message.
lineFiltering A flag to determine whether the LoV need to perform line
filtering.
This is mainly used for those transaction data.
brandFiltering A flag to determine whether the LoV need to perform brand
filtering.
reset A flag to indicate whether the updated fields should be
reset to empty when there is no match result found.
Example <tsi:populateValueInput id="countryCode"
queryId="#{lovQueryConstants.COUNTRYSPLIT_ZIP}"
updateField="countryName^corpBsuMaint:countryName|
countrySplitCode^corpBsuMaint:countrySplitCode|
countrySplitName^corpBsuMaint:countrySplitName|
stateCode^corpBsuMaint:stateCode|stateName^corpBsuMaint:stateName|
cityCode^corpBsuMaint:cityCode|cityName^corpBsuMaint:cityName"
conditionField="countryCode^corpBsuMaint:countryCode|
(zip1From,zip1To^corpBsuMaint:zipCode^#{searchConstants.OPERATOR_BETWEEN
}^#{searchConstants.CONDITION_AND}|
zip2From,zip2To^corpBsuMaint:zipCode^#{searchConstants.OPERATOR_BETWEEN}
^#{searchConstants.CONDITION_OR})|countryRecordStatusÂ"
optionalQueryId1="#{lovQueryConstants.COUNTRYSPLIT}"
optionalUpdateField1="countryName^corpBsuMaint:countryName|
countrySplitCode^corpBsuMaint:countrySplitCode|
countrySplitName^corpBsuMaint:countrySplitName"
optionalConditionField1="countryCode^corpBsuMaint:countryCode|
recordStatusÂ|countrySplitRecordStatusÂ"
messageCode="#{commonMessageCodeConstants.SL_MAJ_00022}"
messageParams="#{syc_lbl['lbl.country']}"
value="#{corpBsuManagedBean.bsuBean.addressBean.countryCode}"
Page 19 from 67
styleClass="FormTextBoxReq" size="2" maxlength="2"
valueChangeListener="#{populateValueBackingBean.populateValue}"
converter="Sealiner.UpperCaseConverter">
<a4j:support event="onblur".../>
</tsi:populateValueInput>
Page 20 from 67
2.7 tsi:lov (deprecated)

Author Chean Chean
Description A customized button component that will call a pop up window upon clicking, and showing list of
chose able values based on the search conditions passed.
This component will perform a query to database to find a list of matching records and display as
paging list. User is allowed to select a record, and the value will be populating to the according
fields based on the field mapping.
If there is any request which required performing in back-end process, the invokeField and
invokeEvent attributes can be used to invoke the AJAX action which bundles in the field
component.
Limitation This list to be displayed in LoV is highly dependent on the query Id and conditions which passed in.
If there is any mistake done, the LoV will not able to retrieve the correct values
Sample
Screen
Figure 4: LoV Button
Figure 5: LoV Result List Once upon the LoV button is clicked
Pre- Below steps area required before a new LoV can be used.
requisite 1. Create the query statement in the LOV_QUERY table. The query statement will be start
from FROM clause.
E.g.: FROM CapCountry aCapCountry
2. Insert all the display fields, or searchable fields in the LOV_DISPLAY table.
3. Insert all the condition fields into LOV_CONDITION table.
Parameters
Page 21 from 67
queryId A unique ID to identify which LoV is requested.
The LoV component will grab the information from the
database to generate the query statement.
lineFiltering A flag to determine whether the LoV need to perform line
filtering.
brandFiltering A flag to determine whether the LoV need to perform brand
filtering.
conditionField To specify system pre-defined conditions.
It support for multiple conditions by using "|" as
delimiter.
Format :
[Column Mapping*] ^ [Value*] ^ [Operator] ^ [And/or]
* mandatory field
Column Mapping
exact property name
Value
The pre-defined value can be either hardcoded or
get from the form element.
Operator
The operator to be used, such as
1 = Equals(=)
2 = Not Equals (! =),
3 = Greater (>) and etc.
And/or
And/or condition which use to join the query
condition.
Main symbols used in this attribute:

^
Separator between the Column Mapping Name,
value and operator.
()
To group the conditions together. This is useful
especially when there is combination of AND/OR
conditions, so that the result will be precise.
updateField To specify JSP field element name that required populating

value from selected LoV values.
It support multiple field elements, separate by "|" delimiter.
Format :
[Column Mapping*] ^ [Form Element ID*]
* mandatory field
Column Mapping
exact property name
Form Element ID
The parent form element ID that request to be
Page 22 from 67
updated.
Main symbol used in this attribute:

^
Separator between the Column Mapping Name,
value and operator.
titleKey The resource bundle key which will display as LoV title in
LoV result list screen.
titleKeyBundle The resource bundle file path.
invokeField The field element name which use to invoke the AJAX after
the value is populated back to the parent screen.
invokeEvent The java script event, which will invoke the AJAX that bind
to the component (either during ONBLUR event or
ONCHANGE event)
style The CSS style of the LoV button.
styleClass The CSS style class of the LoV button.
Example <tsi:loV queryId="#{lovQueryConstants.STATE}"

updateField="countryCode^corpBsuMaint:countryCode|
countryName^corpBsuMaint:countryName|stateCode^corpBsuMaint:stateCode|
stateName^corpBsuMaint:stateName"
conditionField="countryCode^corpBsuMaint:countryCode|recordStatusÂ"
titleKey="lbl.state"
titleKeyBundle="messageprovider-config.bundles.labels.syc.labels-syc"
styleClass="FormBtn"
invokeField="corpBsuMaint:stateCode"
invokeEvent="#{lovQueryConstants.ON_BLUR_EVENT}"/>
Page 23 from 67
2.8 tsi:populateEntityInput (deprecated)

Author Chang Ye
Description This is an input text component with extra behavior.
With the aid for A4J, upon the onBlur event, based on the user input text, this component will
perform a query to database to find a matching entity record. The matching entity will be
associated to the target entitys attribute.
For example, in a data table that contains a list of commodity restrictions. Each of the restriction
has an attribute of commodity. When user key in a commodity code (eg. FOOD), this component
will query the DB to find the matching entity and associate with the targeted restrictions commodity
object.
Limitation
Sample
Screen
Pre- A4J : to capture the onblur event and reRender on the input component.
requisite LOV_QUERY table : To define the query in the LOV_QUERY table. Specify the name of the entity
alias in the ENTITY_NAME column. This value is used to retrieve the entity object for association
with the target attribute.
Parameters
id
queryId
updateField
conditionField
dataTableId
mesageCode
value
styleClass
maxlength
size
valueChangeListener
Example <tsi:populateEntityInput id="commodityCode"

queryId="#{lovQueryConstants.COMMODITY}"
updateField="commodityName^countryMaint:commodityTable:#{rowIndex}:commodityName"
conditionField="commodityCode^countryMaint:commodityTable:#{rowIndex}:commodityCode|
recordStatusÂ"
dataTableId="countryMaint:commodityTable"
messageCode="#{commonMessageCodeConstants.SL_MAJ_00022}"
messageParams="#{cap_lbl['lbl.cap.restriction.commo.restrict.commo']}|
#{rowIndex+1}"
value="#{row.capCommodity.commodityCode}"
styleClass="FormTextBox" maxlength="15" size="15"
valueChangeListener ="#{populateEntityBackingBean.populateValue}" >
<a4j:support event="onblur" reRender="commodityTable" />

</tsi:populateEntityInput>
Page 24 from 67
2.9 tsi:entityLov (deprecated)

Author
Description
Limitation
Sample
Screen
Pre-
requisite
Parameters
Example
Page 25 from 67
2.10 tsi:dataTable
Author Andy Ng
Description A customized html data table component that handle search, sort and pagination of data retrieve
from database. Inherited all features of tomahawk html data table component, this component
consist of additional UICommand components at the tables header and footer that handle page
navigation, rows per page change, sorting by table column and handle single click & double click
event of data table rows.
Specify a JPQL query & entitys attributes and data tables columns mapping in the respective xml
file, the component will handle the retrieval of data and populate them into the data model stored in
users session (normally stored in managed bean).
Limitation
Sample
Screen
Pre- 1. Create a JPQL query in Spring xml file and defined entitys attributes & data tables columns
requisite mapping for data filtering and sorting
XML file location is at SL11-Biz/src/META-INF/
If the xml for the respective module does not exist, create one and add the xml file into file
com.tsi.sealiner.biz.service.pagingcomponent.PagingDataTableSO.java
Page 26 from 67
i. Define a spring bean of class

com.tsi.sealiner.biz.service.pagingcomponent.QueryNColumnsMapping and give a
unique ID. E.g.
This beans ID will be used when defining queryId attribute of the component JSP tag.
E.g.
ii. Define countQuery as one of the properties; this is the JPQL that used to count the
number of records. (OPTIONAL as most of the COUNT query can be generated from
SELECT query). E.g.
iii. Define selectQuery as one of the properties; this is the JPQL that used to retrieve data.
P/S: Both countQuery and selectQuery WHERE clause conditions can consist of 3
types.
a) Static Condition
b) Dynamic Condition by specifying place holder {DYNAMIC_CONDITIONS} in JPQL.
c) Governance Entity Filter Condition by specifying place holder

{FILTER_GE_CONDITION} and define a web column mapping for
CommonSearchOptionConstants.FILTER_GE. E.g.:
Note: By specifying {FILTER_GE_CONDITION}, paging component will generate query where GE sequence
(mapped by CommonSearchOptionConstants.FILTER_GE) fall in the login users GE and sub-level GE.
iv. Define webColumnsMap as one of properties of type Map<String, EntityMapInfo>. This
Page 27 from 67
is the mapping between constant and entity attributes that used in searching and
filtering of data. E.g.
At the search page Defined Search, there is a drop down list for filtering data. Each
item of the drop down list has what have been defined in the xml file, a Java constant
and entitys fields mapping. E.g.
In the backing bean, prepare a drop down list items in a list that consist of the Java
constant and its label. E.g.
Use tomahawk <t:commandSortHeader/> for sorting where the columnName

attribute is also the Java constant that has been defined in xml. The immediate attribute
of sort header must be false. E.g.
v. Define defaultSortColumn as one of the properties; this is the default sort column when
the data is being retrieved. This property has to be specified so that page navigation will
work correctly. E.g.
Page 28 from 67
vi. Define defaultSortAscending as one of the properties, the default is true.
vii. Define nativeQuery if selectQuery and countQuery is normal SQL. The default is false.
2. In order for the Paging component to work properly, define 3 mandatory fields in either
managed bean or backing bean. There are a data model, a filter bean and the component
itself.
i. Data Model It must be of type
com.tsi.sealiner.web.common.datamodel.ObjectDataModel or
com.tsi.sealiner.web.common.datamodel.PagingDataModel.
Example of value expression at JSP:
ii. Filter Bean It must be of type com.tsi.sealiner.web.common.bean.EntitySearchBean.
Most of the time, the search page will consist of define search and advance search.
Thus, bind the filter bean to a get method in backing bean, inside the method always
return the right EntitySearchBean depending on the current search tab user is seeing.
E.g.
Always instantiate them:
iii. Component itself It must be of type

com.tsi.sealiner.web.common.component.datatable.PagingDataTable.
Parameters
Parameter Mandatory Type Description
Name / Optional
Id M String The developer-assigned ID of this component.
The ID must be unique within the scope of the
tag's enclosing naming container (e.g. h:form or
Page 29 from 67
f:subview). This value must be a static value.
queryId M Value The beans ID of pagingQueryContext.xml.
Expression PagingQueryContext are categorized by module.
var O String Variable defined for value expression to represent
each row of this paging data table.
rowIndexVar O String Variable defined for value expression to represent
each row's index of this paging data table.
rowId O String The id to use for elements that are generated by
this paging data table.
filterBean M Value A value expression that identifies the filter bean for
Expression this Paging data table. It must be of type
com.tsi.sealiner.web.common.bean.EntitySearchB
ean.
pagingDataMo M Value A value expression that identifies the data model
del Expression for this Paging data table. It must be of type
com.tsi.sealiner.web.common.datamodel.ObjectD
ataModel.
editAction O Method A method expression that identifies a method to
Expression be invoked when user double click on a row of
paging data table. This method accepts empty
parameters returns void.
theme O String Style class prefix for a series of paging data table
style classes defined in PagingDataTable.css
tableTitle O Value Title for TSI Paging Data Table.
Expression
childTableId O String The ID of TSI Paging data table which is a child
table of this data table. Can have multiple IDs with
comma delimited.
Rendered O Boolean A boolean value that indicates whether this
component should be rendered.Default value:
true.
parentRowCha O Method When this table's parent table selected row was
ngedListener Expression changed, create an action listener for this event.
binding O Value Identifies a backing bean property (of type
Expression UIComponent or appropriate subclass)
to bind to this component instance. This value
must be an EL expression.
ajaxRerender O String The components (other than child tables) that
need to be reRendered when this data table
selected index changed.
searchFieldCo O Value The search field conversion value map, this is
nversionValue Expression used to convert between database value and
Map display value. For example to convert Active to A
in searching.
preEditListene O Method Same as double clicked listener on a row.
r Expression
loadDefaultDat O Value To indicate whether to retrieve data during initial
a Expression request.(Please refer to JSF documentation for the
definition of initial request)
rowPerPageS O Value A value expression that identifies the List of
electItems Expression SelectItems for Paging Data Table row per page
UISelectItems.
selectedRowC O Method When the selected row changed, this listener will
hangedListene Expression be invoked. Single click, initial request, page
r navigation, row per page changed, page sorted,
add new row, navigate to new tab will invoke this
listener. Take note that if the list is empty,
event.getSelectedDate will be null.
Method signature:
Page 30 from 67
public void
myMethod(PagingSelectedRowChangedEvent)
rowSingleClick O Boolean A boolean value that indicates whether to submit
Submit and update selectedRowIndex on each single
click on row. If childTableId OR
selectedRowChangedListener is defined, this flag
is automatically set to true. Default is false.
totalRecordsV O String Variable to define the total number of records
ar selected from this query.
seqVar O String Variable to define the sequence number of the
item in total record list. If the query count is 100,
then the sequence is count from 0 100. Default
value of seqVar is seq, therefore, for displaying
sequence in JSP, use #{seq}
editButtonLab O Value The edit button label. If specified, the button
el Expression appear at right bottom corner of the data table will
be labeled as specified, if it is not specified, the
button will be labeled as Edit.
postQueryList O Method A method that will be invoked after query
ener Expression (JPQL/SQL) of this component was executed. The
query result will be passed in as an argument for
the method. Method syntax is void
myMethod(java.util.List).
Example 1. To use the paging component, create component tag <tsi:dataTable /> in JSP. Defining
table columns is just like defining columns in JSF HtmlDataTable component. See below
example:
2. The paging component contains a Edit button at the footer of data table and it allow user to
specify a method expression for the Edit action. Beside selecting a row and clicking on the
Edit button, user can choose to double click a row to trigger the Edit action. To enable this
button and its function, provide attribute editAction with a method expression. E.g.
Note that when invoking method editAction(),the selected row can be accessed by invoking
method getSelectedData() of com.tsi.sealiner.web.common.datamodel.ObjectDataModel. E.g.
Page 31 from 67
3. Another attribute which will facilitate searching is to map user input to a predefined value. For
example Record Status is always store into database as A, S, etc. To display meaningful
description to user, A was mapped to Active and so on. At the same time, SeaLiner User
can filter data with record status start with Act. In order to enable searching like this, provide
a value expression returning a field of type java.util.HashMap<String, HashMap<Object,
Object>>. E.g.
Method that return a type java.util.HashMap<String, HashMap<Object, Object>>.
4. For search action, invoke pagingDataTable.reloadData(), pagingDataTable is the component

binding to backing bean. Please refer to pre-requisite 2.iii.
5. For parent and children table relationship, specify the children data table component ID in
parent table childTableId attribute, if the parent has more than one child, delimit the children by
comma.
Page 32 from 67
Specify account level 3 as childTableId of account level 2.
Specify account level 4 as childTableId of account level 3.
6. If the tables in the page resemble more than two level of parent-children relationship, specify
the grandchildren in parent table ajaxRerender attribute, so that when the parent selected
index is changed, grandchildren will be refreshed as well. Besides that, if there are other
components (other than child and grandchild) in the page need to be refreshed when the table
selected index is changed, the component ID can be put in ajaxRerender attribute of that data
table. All components are delimited by comma.
Specify account level 4 table in ajaxRerender attribute of account level 2 table:
Page 33 from 67
Page 34 from 67
2.11 tsi:editableDataTable
Author Andy Ng
Description Inherited all features from data table component <tsi:dataTable/>, Editable Data table is a data
table contains
Limitation Native query and Sorting of editable field not supported

Sample
Screen
Pre- Please refer to tsi:dataTable

requisite
Parameters
All attributes inherited from tsi:dataTable

Name / Optional
newable O Value To indicate whether this table allow add new row.
Expression Default value is true.
validateRowsA O Method The validation method that to be invoked when
ction Expression page is submitted. Only the current shown list of
data will be passed in to this method for validation.
postAddRowLi O Method The method that to be invoked when a new row is
stener Expression added. The newly added entity will be pass in as
argument.
Method Signature:
Void myMethod(BaseEntity newEntity)
addButtonRen O Value To indicate whether to render the add button in
dered Expression footer. If newable=true,addButtonRendered=false,
the footer will show new tab but with the add
button hidden.
captureModifie O Boolean A boolean value that indicates whether this
dRowsOnly component will capture only modified rows during
UPDATE MODEL phase. Default is true.
Example Please refer to tsi:dataTable for development steps.
1. Whenever the page is submitted, validateRowsAction method will be invoked (if specified)
after update model values phase. This is to perform validation on the list that shown on
screen, for example checking for mandatory field and so on.
JSP:
Page 35 from 67
Backing Bean:
2. During save action, get all modified, new, marked as deleted records from the data model.
Example shown below:
3. After save action, invoke pagingDataTable.reloadData() to refresh data for the data table. If the
Page 36 from 67
tables of the page resemble a tree structure, only the peak of the tree, that is the grandparent
of the tree need to be reloaded because parent will trigger children reload data.
Page 37 from 67
2.12 tsi:dataTableFooterBtn
Author Lai Yip Wan
Description This button inherits all features of HtmlCommandButton. Only that, this button can only be defined
within tsi:dataTable because it is meant to be served as footer button of tsi:dataTable.
Limitation The first button will always be edit button (if editAction is specified), and the last button will be add
button (if newable is true). The sequence of the customize button follow the sequence of JSP
definition.
Sample
Screen
Pre-
requisite
Parameters
All attributes inherited from HtmlCommandButton

Name / Optional
id M String The unique ID of this component. Do not allow
btnEdit, btnAdd as ID.
action O Method The action when this button is clicked.
Expression
actionListener O Method The action listener that will be invoked when this
Expression button is clicked.
rendered O Value To indicate whether or not to render this button. By
Expression default if is not specified, this button will be
rendered when the navigate buttons are rendered,
will not be rendered when the navigate buttons are
not rendered.
Example
Page 38 from 67
2.13 tsi:uploadFile
Author Lau Lay Khung

Description This button inherits all features of HtmlCommandButton. This component has 2 extra attributes:
businessObject and refNo. When click on the button, a pop up screen will be opened which allow
user to upload/download/delete files and view all previously uploaded files records.
Limitation -
Sample
Screen
Pre-
requisite
Parameters
All attributes inherited from HtmlCommandButton, except 2 extra
attributes:
Parameter Mandator Type Description

Name y/
Optional
businessObject M String Business Object. List of possible values defined
under
UploadFileOptions.getBusinessObjectOptions().
refNo M String Reference No. Any value with char(9).
Example
<tsi:uploadFile
id="uploadFileBtn"
value="#{esl_lbl['btn.contract']}"
styleClass="FormBtn"
businessObject="#{ESL_CNTRCT.businessObject}"
refNo="#{ESL_CNTRCT.eslContractEntity.agreementNo}"
rendered="#{!ESL_CNTRCT.eslContractEntity.brandNew}"/>
Page 39 from 67
2.14 tsiInputText
Author Lai Yip Wan
Description This component inherits all features and attributes of HtmlInputText. Other than that, this
component provides extra features which suit Sealiner business requirement. When this
component required is set to true, that means this field value must not be empty, further than that,
this component provides conditional validation checking, in which, the validation is processed only
if certain conditions are fitted. Conditional validation checking can be achieved with 2 attributes,
processValidationIf and validationPivotComponents. If the validation failed, this input field would be
highlighted with error style and the error message is set to the tooltip of this component.
Default style class will be set to this component according to Sealiner.css. If required is true,
FormTextBoxReq is set, if required is false, FormTextBox is set. However, user can overwrite the
styleClass by providing styleClass and errorStyleClass attributes.
Limitation -
Sample
Screen Required style class:
Non-required style class:
Validation failed style class:
Pre-
requisite
Parameters
All attributes inherited from HtmlInputText:

Name y/
Optional
errorStyleClass O String The error style class that display on this
component when validation failed.
processValidati O Method The method which determines if validation should
onIf Expression be carried on. The values of pivot component will
be passed to this method as arguments in string.
This method does conditional checking and return
true if validation should be carried on, false if
validation should be omitted. If this method is not
provided, the validation will be carried on by
default. The signature of this method is
public boolean myMethod (String[]

args).
validationPivot O String The client ID of the pivot components, delimited by
Components pipe (|). The values of component will be passed
to processValidationIf method as arguments in
string array, in which all values regardless of the
type will all be converted to string and pass in to
processValidationIf method.
Page 40 from 67
requiredMessa O Value The message that will be displayed in tooltip if
ge Expression mandatory checking failed. By default, if the
mandatory checking failed, This field is required
will be displayed.
required O Value This indicates that if this field is mandatory.
Expression
Example JSP:
Backing Bean:
Page 41 from 67
2.15 tsiNumber
Author Lai Yip Wan
Description This component inherits all features and attributes of TSIInputText. Other than that, number type
need to be specified so that validation against number type would be processed to prevent user
key in invalid value. Optionally, value range validation can be specified.
Limitation If minimum value is specified, maximum value must be co-exist, and vice-versa.
Sample All style class is same with TSIInputText.
Screen
Pre-
requisite
Parameters
All attributes inherited from HtmlInputText:

Name y/
Optional
type M String This specified the object type of the number. It is
case-insensitive. The value will be converted to
this type. If the entered value is not in this type,
validation fails.
BigDecimal = Big Decimal

Integer = Integer
Long = Long
minimum O String The minimum value of this field. Must be co-exist
with maximum attribute.
maximum O String The maximum value of this field. Must be co-exist
with minimum attribute.
pattern O Value The pattern that apply on the number. If database
Expression field is Number(4,2), the pattern of big decimal
would be ##.00
Example Integer type JSP:
Big Decimal type JSP:
Page 42 from 67
2.16 tsiSelectOneMenu
Author Lai Yip Wan
Description This component inherits all attributes and features from HtmlSelectOneMenu. Other than that, this
component provides same features as TSIInputText which are mandatory checking, conditional
validation checking, and default style class.
Limitation -
Sample Required style class:
Screen
Error style class:
Pre-
requisite
Parameters
All attributes inherited from HtmlSelectOneMenu:

Name y/
Optional

args).
Page 43 from 67
will be displayed.
Expression
Example JSP:
Backing Bean:
Page 44 from 67
2.17 tsiSelectOneRadio
Author Lai Yip Wan
Description This component inherits all attributes and features from HtmlSelectOneRadio. Other than that, this
component provides same features as TSIInputText which are mandatory checking, conditional
validation checking, and default style class.
Limitation Limited style class leads to unfriendly appearance.
Sample Required style class:

Screen
Error style class:
Pre-
requisite
Parameters
All attributes inherited from HtmlSelectOneRadio:

Name y/
Optional

args).
will be displayed.
Expression
Example JSP:
Page 45 from 67
Backing Bean:
Page 46 from 67
2.18 tsi:validateRegExpr
Author John Lee
Description Regular Expression validator
Limitation
Sample
Screen
Pre-
requisite
Parameters
Name y/
Optional
expression M String Regular Expression Syntax
Example <h:inputText value=#{bean.value}

<tsi:validateRegExpr expression=[3-6].*/>
<a4j:support event=onblur/>
</h:inputText>
Page 47 from 67
2.19 tsi:validateBigDecimalRange
Author John Lee
Description Validate the bean attribute value is between from and to value
Limitation Only for BigDecimal type
Sample
Screen
Pre-
requisite
Parameters
Name y/
Optional
from M String The minimum value the bean attribute need to
meet
to M String The maximum value the bean attribute need to
meet.

<tsi:validateBigDecimalRange from=0 to=100/>
</h:inputText>
Page 48 from 67
2.20 tsi:validateBigDecimalCompare
Author John Lee

Description Validation feature to compare two components.
Limitation
Sample
Screen
Pre-
requisite
Parameters
Name y/
Optional
componentToC M String Component to compare to. The value for this
ompare parameter is composition of form id and
component id.
Example: form:component1
componentToC M Value Label that will show in the error message.
ompareLabel Expression
componentLab M Value Label that will show in the error message
el Expression
op M String Comparison operator. Valid value are
eq, ne, lt, le,gt and ge

<tsi:validateBigDecimalCompare
componentToCompare=form:componentToCompare
componentToCompareLabel=#{cap_lbl['lbl.componentToCompare']}
componentLabel=#{cap_lbl['lbl.component']} op=eq/>
</h:inputText>
Page 49 from 67
2.21 f:validator Sealiner.EmailAddressValidator

Author John Lee
Description Email validator
Limitation It will not validate the existing of the email address.
Sample
Screen
Pre-
requisite
Parameters
Name y/
Optional
validatorId M String Validator ID for email validator.

<f:validator validatorId="Sealiner.EmailAddressValidator"/>
</h:inputText>
Page 50 from 67
2.22 tsi:dateTime
Author Lai Yip Wan
Description A component that facilitate user on entering date time value. User can choose the date and time
from a calendar menu. If this component type is timezone or userTimezone, the date time created
from this component will take time zone into consideration. If the date time selected is invalid, error
will be shown at tooltip.
When the selected date time is bound to time zone, the date time will be displayed as the particular
zone date time. When page is submitted, the value will be converted to UTC and then stored to
database.
Date Time
No Timezone Timezone
dependency
Depends on Depends on user

location timezone timezone
(type:timezone) (type:usertimezone)
Display location Display record creator Display record viewer

timezone timezone(future) timezone
Below is the sample error message for timezone and usertimezone type.
Situation A:
If the selected date time falls in normal slot(without day light saving)
If choose auto = Date time that will be updated to model is dd/mm/yyyy HH:mm <Normal zone>
If choose DST = Error shown: DST is not applicable to normal slot.
If choose normal = Date time that will be updated to model is dd/mm/yyyy HH:mm < Normal
zone >
Situation B:
If the selected date time falls in day light saving slot
If choose auto = Date time that will be updated to model is dd/mm/yyyy HH:mm <DST zone>
If choose DST = Date time that will be updated to model is dd/mm/yyyy HH:mm <DST zone>
If choose normal = Error shown: Normal is not applicable to DST slot.
Situation C:
If the selected date time falls in the start of day light saving
Error shown: Invalid date time, this is the missing slot in DST
Situation D:
If the selected date time falls in the overlapped slot
If choose auto = Date time that will be updated to model is dd/mm/yyyy HH:mm < Normal zone
Page 51 from 67
>
If choose DST = Date time that will be updated to model is dd/mm/yyyy HH:mm <DST zone>
If choose normal = Date time that will be updated to model is dd/mm/yyyy HH:mm < Normal
zone >
Below is the value shown in the drop down menu for timezone and usertimezone type:
Situation A:
If the selected date time falls in normal slot(without day light saving)
If the date time is dd/mm/yyyy HH:mm < Normal zone > = drop down show auto/normal(user
input)
Situation B:
If the selected date time falls in day light saving slot
Drop down shows DST
Situation C:
If the selected date time falls in overlapped slot
If the date time is dd/mm/yyyy HH:mm < Normal zone > = drop down show normal
If the date time is dd/mm/yyyy HH:mm <DST zone> = drop down show DST
Limitation 1. When invalid date format or invalid date value is entered, the component will erase the
value.
2. When other need this component to be validationPivotComponents, the value to be put
inside validationPivotComponents should be
<dateTimes client ID>:inputCalendarInputDate.
Eg:
<tsi:inputText id=testValue
value=#{managedBean.testValue}
required=true
validationPivotComponents=formA:customDate:inputCalendarInputDate
processValidationIf=#{backingBean.processTestValueValidationIf}/>
<tsi:dateTime id=customDate
value=#{managedBean.customDate}
type=date
required=true/>
Sample Type Date:
Screen
Type Date - Readonly:
Calendar Popup For Type Date:
Page 52 from 67
Type DateTime:
Type DateTime - Readonly:
Calendar Popup For Type DateTime:
When click at bottom left corner time:
Type Timezone or UserTimeZone:
Type Timezone or UserTimeZone - Readonly:
Calendar Popup For Type Timezone or UserTimeZone:
Page 53 from 67
When click at bottom left corner time:
Pre-
requisite
Parameters
Name y/
Optional
id O String The ID of this component, must be unique within
enclosing naming container.
value M Value The value of this component. It has to be
Expression java.util.Date
timezone C Value The ID of the timezone. This ID has to match with
Expression java.util.Timezone ID. Needed only if the type is
timezone and timezoneField is not specified. If
type is UserTimeZone, the timezone for
conversion will be taken from
SCR_USER.SYC_BSU.CAP_CITY.TIME_ZONE, if not
specified, timezone will be defaulted to current
system timezone.
timezoneField C Value The component client ID that has the timezone ID.
Expression This attribute is used when the timezone ID can be
modified within the same page, so when page is
submitted, the latest(modified) timezone ID will be
retrieved from this field. Needed only if the type is
timezone and timezone is not specified.
type M String The type of the date time.
DateTime = java.util.Date (date and time)
Date = java.util.Date (with date only)
Page 54 from 67
Timezone = java.util.Date (date and time)
UserTimezone = java.util.Date (date and time)
pattern O String The pattern of the date value. If this pattern is not
specified, the pattern will be taken from
UserSessionBean. If userSessionBean
dateFormat is null, the default pattern is
dd/mm/yyyy HH:mm
required O String To indicate this component value is mandatory
styleClass O String The style class of this component
errorStyleClass O String The style class to be displayed when the value is
invalid.
validationPivot O String Please refer to tsi:inputText
Components
processValidati O Method Please refer to tsi:inputText.
onIf Expression
readonly O Value If is true, the date will be rendered as label, if
Expression false, the date will be rendered as input text.
Example Type Date:

<tsi:dateTime id="date"
value="#{dateTimeManagedBean.dateTime}"
type="date"
required="true"/>
Type DateTime:
value="#{dateTimeManagedBean.dateTime}"
type="datetime"/>
Type Timezone:
value="#{dateTimeManagedBean.customDate}"
type="timezone"
timezone="#{dateTimeManagedBean.timeZone}"
required="true"/>
Type UserTimezone:
value="#{dateTimeManagedBean.customDate}"
type="usertimezone"
required="true"/>
Usage of timezoneField.
Given a situation, in route maintenance page, user can key in vessel set off time, and the set off
time has dependency on port timezone. Besides that, user can change port at the same screen as
well. Therefore, the set off time has to take timezone into consideration. Below illustrate the
implementation of the maintenance page.
1. Create maintenance page JSP.
2. Create a field name as portCode
3. Create a hidden field name as portTimezone
4. Create a lov for portCode. The update field has to include portTimezone, that means
whenever user select a port, the timezone of the port has to be updated to portTimezone.
5. Create a date time field name as setoffTime
6. Put timezoneField attribute of setoffTime as <formName>:portTimezone.
In this example, the setoffTime will always has the latest timezone according to the port user has
selected.
Page 55 from 67
Page 56 from 67
2.23 tsi:csc (deprecated)

Author Nor Ashid
Description This is a component for inputs for these following fields.
Country Code
Country Split Code (Optional)
Postal/Zip Code
State code
City Code
All the validations, conversions and validations will follow SLE standards. Please refer to document
SLE_DS_0024_ScreenDesign_v1d4.doc, section 4.2.14. (Country/State/City Section)
In the CscBean, the component allows the state of each fields (inputs only) to be determined as
flowing the standard in the Screen Design document.
private boolean countryEditFlg = true;// Country Code editable if true

private boolean countrySplitEditFlg = true;// State Code editable if
true
private boolean countrySplitEnabledFlg = false; // Country Split Code is
visible if true
private boolean countryMandatoryFlag = true; // StyleClass =

"FormTextBoxReq" if true else "FormTextBox"
private boolean stateMandatoryFlag = true; // StyleClass =
private boolean cityMandatoryFlag = true; // StyleClass =
private String countryReRenderFields; // TODO
Limitation At the time of writing, the LOV and PopulateEntityInput being used is not of the the latest
version. Hence some compatibility issues will crop up in the future.
This CSC component was not intended to be used within any DataTable or Table. Due to
the nature of the generated IDs by JSF, there are some problem with the reRendering and
Javascripts being implemented in the component.
The component can reRender each inputs (within the component) during start up of the
JSP page. If any internal fields/inputs need to be reRendered dynamically after toexhibit
different properties, this component is still unable to cater for that.
Currently, new feature to reRender external component by ID whenever any field/input
lose focus (onblur) is being developed.
Sample
Screen
Pre- CscBean need to be included in the managedBean. The data has to be transferred from Entities to
requisite the CscBean to display data from database or vice versa when saving into database.
Parameters
id Unique Id in the JSP page
cscBean The CscBean instance to be binded. This will store all the
information for the Country , State , City and Zip
readonly Makes the component non editable when set to true
Example
In the JSP Page
<tr>
<td colspan="6">
Page 57 from 67
<tsi:csc
id="countryStateCity"
cpdBean="#{CRM_NEWACC.cscBean}"
readonly="#{CRM_NEWACC.allFieldsReadOnly}"/>
</td>
</tr>
Loading values from CscBean into entity before saving

public void transformCscBean() {
if(log.isDebugEnabled())
log.debug("NewAcctManagedBean.transformCscBean
started");
getCrmCustomer().setCityCode(cscBean.getCityCode());
getCrmCustomer().setCountryCode(cscBean.getCountryCode());
getCrmCustomer().setStateCode(cscBean.getStateCode());
getCrmCustomer().setZipCode(cscBean.getZipCode());
}
Loading values from entity to CscBean after fetching from database

public void transformFrmCscBean() {
log.debug("NewAcctManagedBean.transformFrmCpdBean
started");
cscBean.setCityCode(getCrmCustomer().getCityCode());
cscBean.setCountryCode(getCrmCustomer().getCountryCode());
cscBean.setStateCode(getCrmCustomer().getStateCode());
cscBean.setZipCode(getCrmCustomer().getZipCode());
}
Set individual characteristics for each fields within the CSC component
contactCscBean.setCountryMandatoryFlag(false); (Make the field non yellow)
contactCscBean.setStateMandatoryFlag(false); (Make the field non yellow)
contactCscBean.setCityMandatoryFlag(false); (Make the field non yellow)
contactCscBean.setCountrySplitEnabledFlg(false); (Hide Country Split)
Page 58 from 67
2.24 tsi:cpd (deprecated)

Author Nor Ashid
Description This is a component for inputs for these following fields.
Salutation
First Name
Middle Name
Last Name
Residential Address
Country Code
Country Split Code (Optional)
Postal/Zip Code
State code
City Code
Telephone (Residential)
Telephone (Office)
Fax No
Mobile No. 1
Mobile No. 2
Email
All the validations, conversions and validations will follow SLE standards. Please refer to document
SLE_DS_0024_ScreenDesign_v1d4.doc, section 4.2.16. (Contact Person Section)
In the CpdBean, the component allows the state of each fields (inputs only) to be determined as
following the standard in the Screen Design document. Some of the attributes are deprecated to
allow backward compatibility. It is strongly recommended to set the styleclass. Pls refer to example
below.
Note: Currently you can only set once during startup, not dynamically.
// @Deprecated - use style class instead

private boolean firstNameEditFlg = true; //@Deprecated
private boolean middleNameEditFlg = true; //@Deprecated
private boolean lastNameEditFlg = true; //@Deprecated
private boolean firstNameMandatoryFlag = false; //@Deprecated

private boolean lastNameMandatoryFlag = false; //@Deprecated
private String salutationStyleClass = "FormDropDown"; (Set the salutation

styleclass)
private String firstNameStyleClass = "FormTextBox"; (Set the first name
styleclass)
private String middleNameStyleClass = "FormTextBox";(Set the middle name
styleclass)
private String lastNameStyleClass = "FormTextBox";(Set the last name
styleclass)
private String emailStyleClass = "FormTextBox";(Set the email styleclass)
Limitation As the CSC component is embedded in this CPD component, all its inherent limitation are
inherited. Please refer to section 2:23
Sample
Screen
Page 59 from 67
Pre- CpdBean need to be included in the managedBean. The data has to be transferred from Entities to
requisite the CscBean to display data from database or vice versa when saving into database.
Parameters
id Unique Id in the JSP page
cpdBean The CpdBean instance to be binded.
readonly Makes the component non editable when set to true
Example
In the JSP Page
<tr>
<td colspan="6">
<tsi:cpd
id="contactDetails"
cpdBean="#{CRM_NEWACC.cpdBean}"
readonly="#{CRM_NEWACC.allFieldsReadOnly}"/>
</td>
</tr>
Loading values from CpdBean into entity before saving

public void transformCpdBean() {
log.debug("NewAcctManagedBean.transformCpdBean
started");
getCrmCustomer().setAddr1(cpdBean.getAddr1Value());
getCrmCustomer().setCityCode(cpdBean.getCityCode());
getCrmCustomer().setCountryCode(cpdBean.getCountryCode());
getCrmCustomer().setStateCode(cpdBean.getStateCode());
getCrmCustomer().setEmail(cpdBean.getEmailValue());
getCrmCustomer().setFax(cpdBean.getFaxValue());
getCrmCustomer().setHousePhone(cpdBean.getHousePhoneValue());
getCrmCustomer().setOfficePhone(cpdBean.getOfficePhoneValue());
getCrmCustomer().setMobile1(cpdBean.getMobile1Value());
getCrmCustomer().setMobile2(cpdBean.getMobile2Value());
getCrmCustomer().setFirstName(cpdBean.getFirstNameValue());
getCrmCustomer().setMiddleName(cpdBean.getMiddleNameValue());
getCrmCustomer().setLastName(cpdBean.getLastNameValue());
getCrmCustomer().setZipCode(cpdBean.getZipCode());
if(StringUtils.isNotBlank(cpdBean.getSalutationValue()))
getCrmCustomer().setSalutation(Integer.parseInt(cpdBean.getSalutationVal
ue()));
log.debug("NewAcctManagedBean.transformCpdBean ended");
Page 60 from 67
Loading values from entity to CpdBean after fetching from database

public void transformFrmCpdBean() {
started");
cpdBean.setAddr1Value(getCrmCustomer().getAddr1());
cpdBean.setCityCode(getCrmCustomer().getCityCode());
cpdBean.setCountryCode(getCrmCustomer().getCountryCode());
cpdBean.setStateCode(getCrmCustomer().getStateCode());
cpdBean.setEmailValue(getCrmCustomer().getEmail());
cpdBean.setFaxValue(getCrmCustomer().getFax());
cpdBean.setHousePhoneValue(getCrmCustomer().getHousePhone());
cpdBean.setOfficePhoneValue(getCrmCustomer().getOfficePhone());
cpdBean.setMobile1Value(getCrmCustomer().getMobile1());
cpdBean.setMobile2Value(getCrmCustomer().getMobile2());
cpdBean.setFirstNameValue(getCrmCustomer().getFirstName());
cpdBean.setMiddleNameValue(getCrmCustomer().getMiddleName());
cpdBean.setLastNameValue(getCrmCustomer().getLastName());
cpdBean.setZipCode(getCrmCustomer().getZipCode());
if(getCrmCustomer().getSalutation()!=null)
cpdBean.setSalutationValue(Integer.toString(getCrmCustomer().getSalutati
on()));
else
cpdBean.setSalutationValue(StringUtils.EMPTY);
ended");
Set individual characteristics for each fields within the CPD component
contactCpdBean.setFirstNameStyleClass("FormTextBoxDisplay");
contactCpdBean.setMiddleNameStyleClass("FormTextBoxDisplay");
contactCpdBean.setLastNameStyleClass("FormTextBoxDisplay");
contactCpdBean.setSalutationStyleClass("FormDropDownReq");
Page 61 from 67
2.25 tsi:lookupValue
Author Andy
Description A new lookup value component that consolidate features from <tsi:populateEntityInput />
component and <tsi:lov /> component to create a simplified component yet easy to implement,
more flexible and with additional new validation features. In brief, this component consist of a text
box component <tsi:inputText /> and a command button component <h:commandButton />. Thus,
the textbox will inherit all attributes defined in 2.14 <tsi:inputText />.
This component is simplified because it has bundled ajax function in the component itself which is
<a4j:support /> that fire onchange event when user modify the value in the textbox and
reRender other external components. <a4j:jsFunction /> was included to reRender other external
components when pop-up window was close. Other converter & validators like
Sealiner.UppercaseConverter and LookupValueValidator was bundled as well.
Limitation
Sample
Screen
Figure 2.25.1: Lookup Value Screen design which consist of a textbox and a button with
label.
Figure 2.25.2: Whenever mandatory field error occur, <tsi:lookupValue /> will be highlighted
in red and mouse over the textbox will display tooltip - This field is required.
Figure 2.25.3: When User key-in an invalid lookup value, <tsi:lookupValue /> will be
highlighted in red and mouse over the textbox will display tooltip Value is an invalid
reference.
Page 62 from 67
Figure 2.25.4: Clicking on <tsi:lookupValue /> button will pop-up a helper window to
assist user in lookup a valid reference value.
Pre- LOV_QUERY Table: To define the query in the LOV_QUERY table. Refer to 2.8
requisite <tsi:populateEntityInput />
Parameters Parameter Name Description
Id Specify id for this component. The generated input texts id
will be suffixed with :Input while the generated buttons id
will be suffixed with :Lov.
queryId Specify the LoV query id defined in table
LOV_QUERY.QUERY_ID.
lineFiltering Specify whether line filtering is needed. Either true or false.
brandFiltering Specify whether brand filtering is needed. Either true or
false.
conditionField Specifies all the pre-defined conditions for Input Text.
Sample value: [Column Mapping Name^valueôperator].
Support for multiple conditions by using | as delimiter. If
value required an external components value. Please
specify components id/client id prefixed with [ and suffixed
with ]. E.g.
xxxCode^[formId:dataTableId:#{rowIndex}:codeField]
helperConditionField Specifies all the pre-defined conditions for LOV Button.
Sample value: [Column Mapping Name^valueôperator].
Support for multiple conditions by using | as delimiter. If
value required an external components value. Please
specify components id/client id prefixed with [ and suffixed
with ]. E.g.
xxxCode^[formId:dataTableId:#{rowIndex}:codeField]
helperTitle The title of the LoV.
saveObject Specifies object to be assigned with the search result.
Page 63 from 67
reRender Additional component to be re-Rendered besides this
component input text itself.
ajaxSingle If true, submit only one field/link instead of all forms control.
The default value is true.
ajaxImmediate A boolean value that identifies the phase during which
action events should fire. During normal event processing,
action methods and action listener methods are fired during
the "invoke application" phase of request processing. If this
attribute is set to "true", these methods are fired instead at
the end of the "apply request values" phase. (This is
indication is for a4j:ajaxSupport bundled in this
component). The default value is false.
permittedInput Specified input value (in regular expression) that is
acceptable by this component. When there is no valid
record found in database, component will check if user's
input value matched the regular expression. If matched, no
validation error will be shown and JSF life-cycle continues
as usual. The validation is part of
'Sealiner.LookupValueValidator' feature. Thus, validation
will be executed only if LookupValidator is not off
(offLookupValidator = false).
postUpdateListener Post Update method to be invoked when 'saveObject'
object has been updated. The object will be passed in as
the argument of the listener's method. Method signature is
void
myMethod(com.tsi.sealiner.persistence.entity.BaseEnti
ty)
offLookupValidator If true, 'Sealiner.LookupValueValidator' will be turned off.
Default value is false.
offInputTextOnchang If true, valueChangeListener and a4j:support for
eListener tsi:inputText will be turned off. Default value is false.
offUpperCaseConver If true, Sealiner.UpperCaseConverter will not be bundled
ter into the component. Default value is false.
oncomplete Javascript code for call after request completed on client
side.
inputTextConverter Converter when specified will replace the default
'Sealiner.UpperCaseConverter'.
lookupValidatorMess When 'Sealiner.LookupValueValidator' is enabled, use the
age validator message specified by this value expression. If
value expression evaluated to an empty String. Default
lookup validator message will be used.
regularExpressionVal Specify expression attribute for 'Sealiner.RegExprValidator'.
idation If this attribute is leave blank, 'Sealiner.RegExprValidator'
validator will not be created.
processValidationIf Refer to 2.14 <tsi:inputText />.
validationPivotComp Refer to 2.14 <tsi:inputText />.
onents
Page 64 from 67
Example
Figure 2.25.5: Code example for <tsi:lookupValue />. Developer can specify additional
component to be reRender when textbox value changed. To reRender other lookup value
component, specify its id e.g. otherLookupValueId. If only input text is to be reRender,
specify like otherLookupValueId:Input. If only button is to be reRender, specify like
otherLookupValue:Lov.
Figure 2.25.6: Code example for attribute SaveObject in a paging data table. Note that to
define attribute value with a ValueExpression, developer can initiate with
#{dataTableRowVar.entity.attribute}; however attribute saveObject was defined as
manageBean.dataModel.list[#{dataTableRowIndexVar}].entity
Figure 2.25.7: Example of attribute postUpdateListener. Method

defaultRepairShopCurrency() in surveyorContractBackingBean will be invoked once object
evaluated from attribute saveObject was updated.
Page 65 from 67
Figure 2.25.8: Example of attribute permittedInput. Developer can also specify permitted
input value for <tsi:lookupValue /> where the component will not cause validation failure
when user input value matched the given regular expression. Multiple values are allowed
with comma as delimiter.
Figure 2.25.9: If attribute conditionField required a value from JSP form, developer must
specified the full clientId of the component in and prefixed the id with [ and suffix the id
with ]. This is to differentiate the form components value with literal value for injecting
component id into a4j:support process attribute.
Figure 2.25.10: If attribute conditionField required a value from managed bean, developer
can specify using a ValueExpression.
Page 66 from 67
3 Appendices
Page 67 from 67

SLE-DS 0025 CustomComponent

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SLE-DS 0025 CustomComponent

Uploaded by

Copyright:

Available Formats

Doc: SLE_DS_0025 Type: DS Version: v2

14-07-08 Draft Initial document Chang Ye

This document describes the available custom components to be used in SLE

Therefore, developers are encouraged to use these components whenever

1.3 Reference Document

14. f:validator Sealiner.EmailAddressValidator

The Multilanguage button.

Multilanguage pop up window.

2. Create Multilanguage tag at your JSP, things need to pass in

<tsi:multilang value="#{common_lbl['btn.multilanguage']}" styleClass="FormBtn"

MultiLanguageBean mlBean = new MultiLanguageBean();

a. Eg: Inside your service object

// retrieve multilanguage bean

a. Eg: Inside your backing bean

// call MultiLanguageBackingBean to do validation before save

// put Multilanguage into request object and send to service object

// set all multilanguage to brandNew=false

// put the Multilanguage back to response object

2.2 tsi:radioButton (deprecated)

Figure 1: Radio Component

Pre- MyFaces API

2.6 tsi: populateValueInput (deprecated)

optionalQueryId2 There are 3 queries ID, to support maximum 3 different

2.7 tsi:lov (deprecated)

Main symbols used in this attribute:

updateField To specify JSP field element name that required populating

Main symbol used in this attribute:

Example <tsi:loV queryId="#{lovQueryConstants.STATE}"

2.8 tsi:populateEntityInput (deprecated)

Example <tsi:populateEntityInput id="commodityCode"

<a4j:support event="onblur" reRender="commodityTable" />

2.9 tsi:entityLov (deprecated)

XML file location is at SL11-Biz/src/META-INF/

i. Define a spring bean of class

b) Dynamic Condition by specifying place holder {DYNAMIC_CONDITIONS} in JPQL.

c) Governance Entity Filter Condition by specifying place holder

Use tomahawk <t:commandSortHeader/> for sorting where the columnName

Example of value expression at JSP:

ii. Filter Bean It must be of type com.tsi.sealiner.web.common.bean.EntitySearchBean.

Example of value expression at JSP:

Always instantiate them:

iii. Component itself It must be of type

Example of value expression at JSP:

Method that return a type java.util.HashMap<String, HashMap<Object, Object>>.

4. For search action, invoke pagingDataTable.reloadData(), pagingDataTable is the component

Specify account level 3 as childTableId of account level 2.

Specify account level 4 as childTableId of account level 3.

Specify account level 4 table in ajaxRerender attribute of account level 2 table:

Limitation Native query and Sorting of editable field not supported

Pre- Please refer to tsi:dataTable

Parameter Mandatory Type Description

Example Please refer to tsi:dataTable for development steps.

Parameter Mandatory Type Description

Author Lau Lay Khung

Parameter Mandator Type Description

Non-required style class:

Validation failed style class:

Parameter Mandator Type Description

public boolean myMethod (String[]

Parameter Mandator Type Description

BigDecimal = Big Decimal

Example Integer type JSP: