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

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

  1. Khai báo node field
  2. Dưới node field khai báo DANH SÁCH các Field theo cú pháp [Loại field]==[Tên field].
  3. Dưới mỗi field khai báo các cấu hình chi tiết của Field.
  4. 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

Hidden

Text

TextArea

Password

Date

DateRange

MonthRange

Location

Combo

Check

ExternalList

Button

Submit

Reset

File

CheckList

HiddenList

Table

FormalTable

AttrSet

Custom

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