Khai báo giao diện đồ họa trên nền tảng WAK
Wiki » Khai báo giao diện đồ họa trên nền tảng WAK
|
Table of Contents
|
Nguyên tắc
Để hiển thị giao diện đồ họa, các chức năng cần khai báo hai mục
- Field: danh sách các Input Control sẽ dùng (Text, Combo, Check, Date, …)
- Layout: cách bố trí các Input Control
Ví dụ minh họa
File create.dic
Field
Text==CODE
Trim
MaxLength==50
Extra==required
Text==NAME
Trim
MaxLength==1024
Combo==CALL_TYPE
Item==Dictionary
AddNullValue
Value==CALL_TYPE_TABLE
Text==CALL_DESC
Trim
MaxLength==50
Text==CAUSE_INDICATOR
Trim
MaxLength==50
Submit==SAVE
Button==CLOSE
Layout==Table
Label==CODE
Control==CODE
LayoutExtra==width="260px"
BREAK
Label==NAME
Control==NAME
BREAK
Label==CALL_TYPE
Control==CALL_TYPE
BREAK
Label==CALL_DESC
Control==CALL_DESC
BREAK
Label==CAUSE_INDICATOR
Control==CAUSE_INDICATOR
BREAK
Label
Control==SAVE
File createVN.dic
#reference /resource/com/ftl/wak/CommonVN.dic
CODE==Mã
NAME==Tên
CALL_TYPE==Loại cuộc gọi
CALL_TYPE_TABLE
CALL==CALL
SMS==SMS
USSD==USSD
CALL_DESC==Tham số
CAUSE_INDICATOR==Mã kết quả
Khai báo này sẽ có giao diện như sau
Khai báo các InputControl sử dụng trên giao diện (Field)
Field
[Loại field]==[Tên field]
[Khai báo chi tiết field]
Cách khai báo
- Khai báo node field
- Dưới node field khai báo DANH SÁCH các Field theo cú pháp [Loại field]==[Tên field].
- Dưới mỗi field khai báo các cấu hình chi tiết của Field.
- Ví dụ combobox LY_MODULE_TYPE_ID được khai như sau
Field
Combo==LY_MODULE_TYPE_ID
Item==SQL
AddNullValue
Value==SELECT LY_MODULE_TYPE_ID,NAME FROM LY_MODULE_TYPE ORDER BY NAME
Các loại Field có thể khai
Label
Sinh ra thẻ <div> với nội dung là giá trị của field.
Các cấu hình có thể khai báo:
- EscapeHtml
- Kiểu: boolean
- Tác dụng: các ký tự đặc biệt của html có được mã hóa khi đưa vào nội dung thẻ div không
- Mặc định: true
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
Hidden
Sinh ra thẻ <input type='hidden'> để lưu tham số.
Các cấu hình có thể khai báo:
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
Text
Sinh ra thẻ <input> hỗ trợ nhập dữ liệu text, number.
Các cấu hình có thể khai báo:
- Type
- Kiểu: string
- Tác dụng: giá trị thuộc tính type khi sinh tag input. Ví dụ Type==number sẽ sịnh ra tag <input type='number' />
- Mặc định: text
- MaxLength
- Kiểu: string
- Tác dụng: giá trị thuộc tính maxlength khi sinh tag input. Ví dụ MaxLength==50 sẽ sịnh ra tag <input maxlength=50 />
- ApplyCurrencyFormat
- Kiểu: boolean
- Tác dụng: tự động bổ sung ký tự ',' ngăn cách hàng nghìn, triệu khi nhập giá trị số
- ApplyCodeFormat
- Kiểu: boolean
- Tác dụng: tự động chuyển nội dung nhập sang chữ hoa; không cho phép nhập dấu cách, ký tự đặc biệt
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
TextArea
Sinh ra thẻ <textarea> hỗ trợ nhập nội dung text nhiều dòng.
Các cấu hình có thể khai báo:
- MaxLength
- Kiểu: string
- Tác dụng: giá trị thuộc tính maxlength khi sinh tag textarea. Ví dụ MaxLength==50 sẽ sịnh ra tag <textarea maxlength=50 />
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
Password
Sinh ra thẻ <input type='password'> hỗ trợ nhập nội dung text cần giữ bí mật (các ký tự nhập vào sẽ biết thành ký tự *).
Các cấu hình có thể khai báo:
- MaxLength
- Kiểu: string
- Tác dụng: giá trị thuộc tính maxlength khi sinh tag input. Ví dụ MaxLength==50 sẽ sịnh ra tag <input maxlength=50 />
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
Date
Sinh ra input control cho phép nhập thời gian (ngày, giờ).
Chú ý
- Field DateRange chấp nhận giá trị theo định dạng (l|n)([0-9]+)(d|w|m|q|y) trong đó
- Tham số thứ nhất (l|n): last/next; trước/sau thời điểm hiện tại
- Tham số thứ ba (d|w|m|q|y): ngày, tuần, tháng, quý, năm
- Tham số thứ hai ([0-9]+) số ngày, tuần, tháng, quý, năm trước/sau thời điểm hiện tại
- Ví dụ
- l0d: hôm nay
- l1d: hôm qua
- l2m: 2 tháng trước
- n0d: hôm nay
- n1d: ngày mai
- n2m: 2 tháng sau
Các cấu hình có thể khai báo:
- Format
- Kiểu: string
- Tác dụng: định dạng hiển thị. Các thành phần hiển thị gồm
- %d: ngày
- %m: tháng
- %Y: năm
- %H: giờ
- %M: phút
- %S: giây
- Mặc định: %d/%m/%Y
- TimePicker
- Kiểu: boolean
- Tác dụng: cho phép nhập giờ/phút/giây hay không
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
DateRange
Sinh ra input control cho phép nhập khoảng thời gian (ngày, giờ).
Chú ý
- Do giá trị nhập là khoảng thời gian nên đối tượng này sẽ tạo ra 2 giá trị riêng biệt là [tên field]_FROM và [tên field]_TO khi submit form.
- Field DateRange chấp nhận giá trị theo định dạng (l|n)([0-9]+)(d|w|m|q|y) trong đó
- Tham số thứ nhất (l|n): last/next; trước/sau thời điểm hiện tại
- Tham số thứ ba (d|w|m|q|y): ngày, tuần, tháng, quý, năm
- Tham số thứ hai ([0-9]+) số ngày, tuần, tháng, quý, năm trước/sau thời điểm hiện tại
- Ví dụ
- l0d-l0d: hôm nay
- l1d-l0d: hôm qua
- l2m-l1m: 2 tháng trước
- n0d-n0d: hôm nay
- n0d-n1d: ngày mai
- n1m-n2m: 2 tháng sau
- Bổ sung khai báo kiểu như sau ở file ngôn ngữ để định nghĩa các khoảng thời gian cố định
DateRange
l0d-l0d==Hôm nay
Start==moment().startOf('day')
End==moment().endOf('day')
l1d-l1d==Hôm qua
Start==moment().subtract(1, 'day').startOf('day')
End==moment().subtract(1, 'day').endOf('day')
l2d-l2d==Hôm kia
Start==moment().subtract(2, 'day').startOf('day')
End==moment().subtract(2, 'day').endOf('day')
Các cấu hình có thể khai báo:
- Format
- Kiểu: string
- Tác dụng: định dạng hiển thị. Các thành phần hiển thị gồm
- %d: ngày
- %m: tháng
- %Y: năm
- %H: giờ
- %M: phút
- %S: giây
- Mặc định: %d/%m/%Y
- TimePicker
- Kiểu: boolean
- Tác dụng: cho phép nhập giờ/phút/giây hay không
- MinDate
- Kiểu: string
- Tác dụng: Giá trị thời gian nhỏ nhất mà đối tượng được phép nhập
- MaxDate
- Kiểu: string
- Tác dụng: Giá trị thời gian lớn nhất mà đối tượng được phép nhập
- DateLimit
- Kiểu: number
- Tác dụng: khoảng thời gian dài nhất mà đối tượng được phép nhập
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
MonthRange
Sinh ra input control cho phép nhập khoảng thời gian theo tháng.
Chú ý
- Do giá trị nhập là khoảng thời gian nên đối tượng này sẽ tạo ra 2 giá trị riêng biệt là [tên field]_FROM và [tên field]_TO khi submit form.
- Field DateRange chấp nhận giá trị theo định dạng (l|n)([0-9]+)(d|w|m|q|y) trong đó
- Tham số thứ nhất (l|n): last/next; trước/sau thời điểm hiện tại
- Tham số thứ ba (d|w|m|q|y): ngày, tuần, tháng, quý, năm
- Tham số thứ hai ([0-9]+) số ngày, tuần, tháng, quý, năm trước/sau thời điểm hiện tại
- Ví dụ
- l0m-l0m: tháng này
- l2m-l1m: 2 tháng trước
- l1y-l1m: năm ngoái
- n0m-n0m: 2 tháng sau
- n1m-n2m: 2 tháng sau
- n1y-n1m: năm sau
- Bổ sung khai báo kiểu như sau ở file ngôn ngữ để định nghĩa các khoảng thời gian cố định
MonthRange
l0m-l0m==Tháng này
Start==moment().startOf('month')
End==moment().endOf('month')
l1m-l1m==Tháng trước
Start==moment().subtract(1, 'month').startOf('month')
End==moment().subtract(1, 'month').endOf('month')
l0q-l0q==Quý này
Start==moment().startOf('quarter')
End==moment().endOf('quarter')
Các cấu hình có thể khai báo:
- Format
- Kiểu: string
- Tác dụng: định dạng hiển thị. Các thành phần hiển thị gồm
- %d: ngày
- %m: tháng
- %Y: năm
- %H: giờ
- %M: phút
- %S: giây
- Mặc định: %m/%Y
- MinDate
- Kiểu: string
- Tác dụng: Giá trị thời gian nhỏ nhất mà đối tượng được phép nhập
- MaxDate
- Kiểu: string
- Tác dụng: Giá trị thời gian lớn nhất mà đối tượng được phép nhập
- DateLimit
- Kiểu: number
- Tác dụng: khoảng thời gian dài nhất mà đối tượng được phép nhập
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
Location
Sinh giao diện nhập địa điểm trên bản đồ thế giới (sử dụng google map).
Chú ý
- Đối tượng này sẽ tạo ra 2 giá trị riêng biệt là [tên field]_LAT và [tên field]_LNG tương ứng với giá trị kinh độ & vỹ độ khi submit form.
- Giá trị mặc định được khai theo cách sau
Value
Longitude==9.833478
Latitude==105.5835423
Các cấu hình có thể khai báo:
- Zoom
- Kiểu: number
- Tác dụng: tỷ lệ phóng bản đồ
- Mặc định: 15
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
Combo
Sinh ra giao diện cho phép chọn một hay nhiều giá trị có sẵn.
Chú ý
- Trường hợp nhập một giá trị (Multiple==false), giá trị khi submit form sẽ là một String.
- Trường hợp nhập nhiều giá trị (Multiple==true)
- Giá trị khi submit form sẽ là một mảng String.
- Giá trị khởi tạo có thể khai báo nhiều giá trị cách nhau bởi dấu ','. Ví dụ Value==VALUE1,VALUE2
Các cấu hình có thể khai báo:
- Multiple
- Kiểu: boolean
- Tác dụng: cho phép chọn nhiều giá trị cùng lúc hay không
- Mặc định: false
- Item
- Kiểu: list
- Tác dụng: loại dữ liệu để hiển thị lên danh sách chọn. Các giá trị có thể nhập gồm:
- SQL: danh sách lấy từ CSDL, bằng câu lệnh select
- Dictionary: danh sách lấy từ file khai báo ngôn ngữ
- Plain: danh sách khai báo trực tiếp
- Script: danh sách được tạo từ code javascript
- Mặc định: SQL
- Item.AddNullValue
- Kiểu: boolean
- Tác dụng: có điền giá trị trống vào đầu danh sách hay không
- Mặc định: false
- Item.Value
- Kiểu: string
- Tác dụng: nội dung câu lệnh sql, script, đường dẫn dic để lấy danh sách dữ liệu
- Nếu loại là SQL: nội dung câu lệnh sql lấy tra 2 trường giá trị và nội dung hiển thị
- Nếu loại là Dictionary: đường dẫn đến node khai báo danh sách giá trị của list
- Nếu loại là Plain: khai báo giá trị và nội dung hiển thị trực tiếp
- Nếu loại là Script: script sinh ra danh sách giá trị
- Ví dụ
SQL
Item==SQL
Value==SELECT LY_LAYOUT_ID,NAME FROM LY_LAYOUT ORDER BY NAME
Dictionary
Item==Dictionary
AddNullValue
Value==TYPE_TABLE
STATUS_TABLE
1==Hiệu lực
0==Hết hiệu lực
Plain
Item==Plain
AddNullValue
Value
1==Hiệu lực
0==Hết hiệu lực
Script
Item==Script
Value=:
:{
data = new java.util.ArrayList();
row = new java.util.ArrayList();
row.add("1");
row.add("Hiệu lực");
data.add(row);
row = new java.util.ArrayList();
row.add("0");
row.add("Hết hiệu lực");
data.add(row);
data;
:}
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
Check
Sinh ra thẻ <input type='check'>, với giá trị truyền nhận là true/false.
Các cấu hình có thể khai báo:
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
ExternalList
Sinh ra giao diện cho phép chọn một hay nhiều giá trị từ chức năng tìm kiếm đã có.
Chú ý
- Trường hợp nhập một giá trị (Multiple==false), giá trị khi submit form sẽ là một String.
- Trường hợp nhập nhiều giá trị (Multiple==true), giá trị khi submit form sẽ là một mảng String.
Ví dụ
ExternalList==ASSOCIATED_GROUP
Multiple
ModuleUrl==/com/ftl/wakadm/adm_group/list.jsp
ExternalList==PARENT_GROUP
ModuleUrl==/com/ftl/wakadm/adm_group/list.jsp
Các cấu hình có thể khai báo:
- ModuleUrl
- Kiểu: string
- Tác dụng: Khai đường dẫn đến chức năng tìm kiếm
- Multiple
- Kiểu: boolean
- Tác dụng: cho phép chọn nhiều giá trị cùng lúc hay không
- Mặc định: false
- ListAllItem
- Kiểu: boolean
- Tác dụng: thực hiện tìm kiếm ngay khi ấn mở popup hay không
- Mặc định: true
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
Button
Sinh ra nút bấm (thẻ <input type='button'>).
Các cấu hình có thể khai báo:
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
Submit
Sinh ra nút submit (thẻ <input type='submit'>) thực hiện submit form lên server.
Các cấu hình có thể khai báo:
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
Reset
Sinh ra nút Reset (thẻ <input type='reset'>) hỗ trợ xóa nội dung form để nhập lại.
Các cấu hình có thể khai báo:
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
File
Sinh ra giao diện cho phép chọn file để upload lên server.
Chú ý:
- Bạn cần khai báo FormContentType==multipart/form-data trước node Layout để server có thể đọc nội dung file.
Ví dụ
Field
File==FILE
Submit==SAVE
CssClass==field_submit
FormContentType==multipart/form-data
Layout==Table
Label==FILE
Control==FILE
BREAK
Label
Control==SAVE
Các cấu hình có thể khai báo:
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
CheckList
Sinh ra giao diện cho phép chọn nhiều giá trị có sẵn (dạng check list).
Chú ý
- Giá trị khi submit form sẽ là một mảng String.
Ví dụ
CheckList==FK_AGS_AS
ColumnCount==2
Item==SQL
Value==SELECT GROUP_ID,GROUP_NAME FROM ADM_GROUP
Sẽ sinh ra giao diện như sau
Các cấu hình có thể khai báo:
- ColumnCount
- Kiểu: number
- Tác dụng: số lượng checkbox hiển thị cùng dòng
- Mặc định: 1
- Item
- Kiểu: list
- Tác dụng: loại dữ liệu để hiển thị lên danh sách chọn. Các giá trị có thể nhập gồm:
- SQL: danh sách lấy từ CSDL, bằng câu lệnh select
- Dictionary: danh sách lấy từ file khai báo ngôn ngữ
- Plain: danh sách khai báo trực tiếp
- Script: danh sách được tạo từ code javascript
- Mặc định: SQL
- Item.AddNullValue
- Kiểu: boolean
- Tác dụng: có điền giá trị trống vào đầu danh sách hay không
- Mặc định: false
- Item.Value
- Kiểu: string
- Tác dụng: nội dung câu lệnh sql, script, đường dẫn dic để lấy danh sách dữ liệu
- Nếu loại là SQL: nội dung câu lệnh sql lấy tra 2 trường giá trị và nội dung hiển thị
- Nếu loại là Dictionary: đường dẫn đến node khai báo danh sách giá trị của list
- Nếu loại là Plain: khai báo giá trị và nội dung hiển thị trực tiếp
- Nếu loại là Script: script sinh ra danh sách giá trị
- Ví dụ
SQL
Item==SQL
Value==SELECT LY_LAYOUT_ID,NAME FROM LY_LAYOUT ORDER BY NAME
Dictionary
Item==Dictionary
AddNullValue
Value==TYPE_TABLE
STATUS_TABLE
1==Hiệu lực
0==Hết hiệu lực
Plain
Item==Plain
AddNullValue
Value
1==Hiệu lực
0==Hết hiệu lực
Script
Item==Script
Value=:
:{
data = new java.util.ArrayList();
row = new java.util.ArrayList();
row.add("1");
row.add("Hiệu lực");
data.add(row);
row = new java.util.ArrayList();
row.add("0");
row.add("Hết hiệu lực");
data.add(row);
data;
:}
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
- Trim
- Kiểu: boolean
- Tác dụng: cắt khoảng trắng trước & sau giá trị nhập khi submit form
- Mặc định: false
- UnescapeJava
- Kiểu: boolean
- Tác dụng: chuyển các mã hóa ký tự như \n, \t, \u0000, \\ thành ký tự gốc khi submit form
- Mặc định: false
- ReadOnly
- Kiểu: boolean
- Tác dụng: có cho phép NSD sửa giá trị của Field hay không
- PrepareJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện trước khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- CompleteJs
- Kiểu: string
- Tác dụng: đoạn code javascript thực hiện sau khi tạo đối tượng. Các đoạn text $fieldId$ sẽ được thay thế bằng id thực tế của Field.
- LiveValidation
HiddenList
Sinh ra các thẻ <input type='hidden'> để lưu tham số, mỗi thẻ có value một giá trị bạn muốn lưu.
Chú ý
- Giá trị khi submit form sẽ là một mảng String.
Các cấu hình có thể khai báo:
- Value
- Kiểu: string
- Tác dụng: giá trị khởi tạo của Field
Table
Table
Field
Combo
Multiple
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
HideHeaderControl
cssClass
Extra
Value
Item
AddNullValue
Value
LiveValidation
Presence
FailureMessage
PrepareJs
CompleteJs
Text
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
cssClass
Extra
MaxLength
Type
Value
ApplyCodeFormat
LiveValidation
Numericality
Is
Minimum
Maximum
NotANumberMessage
NotAnIntegerMessage
WrongNumberMessage
TooLowMessage
TooHighMessage
OnlyInteger
Presence
FailureMessage
PrepareJs
CompleteJs
TEXT
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
cssClass
Extra
MaxLength
Type
Value
ApplyCodeFormat
LiveValidation
PrepareJs
CompleteJs
TEXT
Text
Hidden
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
Value
Check
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
HideHeaderControl
Value
cssClass
Extra
LiveValidation
PrepareJs
CompleteJs
ExternalList
Multiple
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
cssClass
Extra
ModuleUrl
ListAllItem
PopupWidth
PopupHeight
OnChangeScript
Value
LiveValidation
Presence
FailureMessage
PrepareJs
CompleteJs
Order
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
Value
LiveValidation
Presence
ReadOnly
cssClass
Extra
HideAddButton
HideRemoveButton
FormalTable
FormalTable
SelectionField
SubmissionField
RecognitionField
Field
Hidden
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
HiddenValue
Label
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
HiddenValue
cssClass
Extra
EscapeHtml
Combo
Multiple
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
HiddenValue
HideHeaderControl
cssClass
Item
AddNullValue
Value
Extra
LiveValidation
PrepareJs
CompleteJs
LiveValidation
Presence
ReadOnly
cssClass
Extra
Item
Value
AttrSet
AttrSet
Code
Layout
RowSize
Position
Custom
Hỗ trợ tạo một đối tượng nhập liệu hoàn toàn mới mà wak chưa có sẵn.
Ví dụ HTML5 hỗ trợ nhập số dạng range, bạn có thể tạo ra như sau
Tạo file source/com/ftl/wak/FieldNumberRangeGenerator.java với nội dung
package com.ftl.wak;
import com.ftl.wak.html.*;
public class FieldNumberRangeGenerator extends ElementGeneratorBase
{
@Override
public void generate(Context ctx) throws Exception
{
ctx.append("<input type='range' ").appendId().appendName()
.appendCssClass().appendReadOnly().appendPlaceHolder()
.appendTitle().appendExtra().appendConfig("MaxLength","maxlength")
.appendInitialValue().append(" />");
}
}
Khai báo trong field
Field
Custom==NUMBER_OF_DAY
GeneratorClass==com.ftl.wak.FieldNumberRangeGenerator
Trim
Các cấu hình có thể khai báo:
- GeneratorClass
- Kiểu: string
- Tác dụng: tên class implement ElementGenerator dùng để sinh ra code html tạo nên đối tượng. Class cũng có thể implement cả ParameterParserFactory để xử lý giá trị đối tượng submit lên.
Khai báo cách bố trí các input control lên giao diện (Layout)
WAK hỗ trợ sẵn các cách bố trí sau
- Dạng đơn giản (<div>…</div>)
- Dạng table (<table>…</table>)
- Dạng dropdown
- Dạng tab
Một số ví dụ
web/com/ftl/dbutil/detail_table.dic
CssClass==data_table
Layout==Table
Label==TABLE_CAT
Control==TABLE_CAT
BREAK
Label==TABLE_SCHEM
Control==TABLE_SCHEM
BREAK
Label==TABLE_NAME
Control==TABLE_NAME
BREAK
Label==TABLE_TYPE
Control==TABLE_TYPE
BREAK
Label==REMARKS
Control==REMARKS
web/com/ftl/dbutil/execute_sql_script.dic
Extra==style="padding:0px;width:100%;"
Layout==Table
Control==SQL_STATEMENT
LayoutExtra==style="padding:0px;"
BREAK
Panel
Extra==align="center"
Layout==Table
Label==SEPARATOR
Control==SEPARATOR
Control==SAVE
web/com/ftl/wakadm/adm_data_type/list.dic
Layout==Simple
Panel
Layout==Simple
Control==KEYWORD
Panel
Layout==DropDown
Control==DATA_TYPE_ID
Control==NAME
Control==DESCRIPTION
Control==SQL_COMMAND
Control==GEN_HTML
Control==GEN_EXCEL
Control==ADD
Control==REMOVE_SELECTED
Các cấu hình có thể khai báo:
- CssClass
- Kiểu: string
- Tác dụng: tên css class cho thẻ sinh ra
- Ví dụ với CssClass==caption-label, nội dung thẻ sinh sẽ có đoạn class='caption-label'
- Extra
- Kiểu: string
- Tác dụng: nội dung các attribute cần bổ sung tạo thẻ <table>, <div>
- Ví dụ với Extra==style='width:120px;', nội dung thẻ sinh sẽ có đoạn style='width:120px;'
- Layout
- Kiểu: list
- Tác dụng: kiểu bố trí, các giá trị được chấp nhận gồm
- Simple: bố trí các đối tượng trong thẻ <div></div>
- Table: bố trí các đối tượng trong thẻ <table></table>
- Dropdown: bố trí các đối tượng vào một <div> xổ ra khi ấn nút
- Tab: bố trí các đối tượng vào các tab
- Mặc định: Table
Dưới node Layout bạn sẽ cần liệt kê danh sách các đối tượng cần bố trí. Với mỗi kiểu bố trí, cách khai báo sẽ có chút khác biệt
Bố trí dạng Simple
Bố trí dạng Table
Bố trí dạng Dropdown
Bố trí dạng Tab
Nội dung có thể khai báo
Field
Text
Trim
UnescapeJava
ApplyCurrencyFormat
LiveValidation
Presence
FailureMessage
Numericality
Is
Minimum
Maximum
NotANumberMessage
NotAnIntegerMessage
WrongNumberMessage
TooLowMessage
TooHighMessage
OnlyInteger
ReadOnly
cssClass
Extra
MaxLength
Type
ApplyCodeFormat
PrepareJs
CompleteJs
Value
Combo
Multiple
Trim
UnescapeJava
ApplyCurrencyFormat
LiveValidation
Presence
FailureMessage
ReadOnly
cssClass
Extra
Item
AddNullValue
Value
PrepareJs
CompleteJs
Value
Check
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
cssClass
Extra
LiveValidation
PrepareJs
CompleteJs
Value
Date
Format
TimePicker
LiveValidation
Presence
FailureMessage
DateFormat
Pattern
FailureMessage
DateCompare
Target
Format
ExpectedResult
FailureMessage
ReadOnly
cssClass
Extra
PrepareJs
CompleteJs
Trim
ExternalList
Multiple
Trim
UnescapeJava
ApplyCurrencyFormat
LiveValidation
Presence
FailureMessage
ReadOnly
cssClass
Extra
ModuleUrl
ListAllItem
PopupWidth
PopupHeight
OnChangeScript
PrepareJs
CompleteJs
Value
Table
Field
Combo
Multiple
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
HideHeaderControl
cssClass
Extra
Value
Item
AddNullValue
Value
LiveValidation
PrepareJs
CompleteJs
Text
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
cssClass
Extra
MaxLength
Type
Value
ApplyCodeFormat
LiveValidation
PrepareJs
CompleteJs
TEXT
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
cssClass
Extra
MaxLength
Type
Value
ApplyCodeFormat
LiveValidation
PrepareJs
CompleteJs
TEXT
LiveValidation
Presence
ReadOnly
cssClass
Extra
HideAddButton
HideRemoveButton
Submit
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
cssClass
Extra
Button
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
cssClass
Extra
TextArea
Trim
UnescapeJava
ApplyCurrencyFormat
LiveValidation
Presence
FailureMessage
ReadOnly
cssClass
Extra
MaxLength
PrepareJs
CompleteJs
Value
Password
Trim
UnescapeJava
ApplyCurrencyFormat
LiveValidation
Presence
ReadOnly
cssClass
Extra
MaxLength
PrepareJs
CompleteJs
FormalTable
SelectionField
SubmissionField
RecognitionField
Field
Hidden
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
HiddenValue
Label
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
HiddenValue
cssClass
Extra
EscapeHtml
Combo
Multiple
Trim
UnescapeJava
ApplyCurrencyFormat
ReadOnly
Visible
HiddenValue
HideHeaderControl
cssClass
Item
AddNullValue
Value
Extra
LiveValidation
PrepareJs
CompleteJs
LiveValidation
Presence
ReadOnly
cssClass
Extra
Item
Value
Layout
Label
DisplayCondition
ReadOnly
cssClass
LayoutExtra
w
h
header
Extra
EscapeHtml
footer
Break
Control
DisplayCondition
ReadOnly
cssClass
LayoutExtra
w
h
header
footer
Break
BREAK
Panel
DisplayCondition
ReadOnly
cssClass
LayoutExtra
w
h
header
Layout
