Purpose

This tutorial describes the first steps to build an application using wak platform.

What you need

  • About 15 minutes
  • JDK 1.8 or later.
  • A favorite editor or IDE. Eg: Sublime Text, NetBeans…

Step by step tutorial

Download WAK package

  • Open http://wak.vn in a web browser
  • Click on the Download button on top of the page.
Annotation%202020-01-09%20141517.png
  • Click on the "WAK bundle" link.
Downloadpage.png
  • Click on the "Download file" link, a zip file will be downloaded to your local drive.
downloadFile.png

Intallation

  • Extract downloaded zip file to a folder. In this tutorial we will extract to d:\Project\app.
  • Enter the extracted folder and execute file run.bat if your OS is Windows; otherwise, execute file run.sh. Caution: you need a properly installed JDK to execute these file. View java console output to identify if there is any issue occur.
run.png
  • If run.bat/run.sh executed properly, you can open web browser and type https://localhost to start installation process.
databaseToBeUse.png
  • Wak platform currently support Oracle database for production and H2 database for development. In this tutorial, we user H2 for it's simplicity. So click on the "Embeded database (H2)" button.
  • It may take some time to create base wak schema and insert default data. After that it will ask you to config parameter form database connection pooling. We may leave it intact by click the "Finish button"
app_config.png
  • A web page displayed, say that application has been installed and provide an username/password for logging in.
providedAccount.png
  • Click finish button. Congratulation, you've successfully created a wak application. Using the username/password provided in previous page to login.

Create your first CRUD app

Step 1: Database Preparation

  • In this step, you'd have to input SQL queries to create your Project Database in WAK.
  • In "Tiện ích CSDL" tab, choose "Thực hiện nhiều câu lệnh SQL" button, then input your SQL queries in box and submit. Next go to "Danh sách bảng dữ liệu" to check your Database.
  • You may use below SQL Query for example.
create sequence SEQ_CATEGORY;

create sequence SEQ_COMPOSER;

create sequence SEQ_SINGER;

create sequence SEQ_SONG;

/*==============================================================*/
/* Table: CATEGORY                                              */
/*==============================================================*/
create table CATEGORY (
   CATEGORY_ID          NUMBER(10)            not null,
   CODE                 VARCHAR2(50 CHAR)     not null,
   NAME                 VARCHAR2(1024 CHAR),
   DESCRIPTION          VARCHAR2(1024 CHAR),
   CREATED              TIMESTAMP            default SYSDATE  not null,
   CREATOR              VARCHAR2(50 CHAR)     not null,
   MODIFIED             TIMESTAMP,
   MODIFIER             VARCHAR2(50 CHAR),
   constraint PK_CATEGORY primary key (CATEGORY_ID)
)

comment on table CATEGORY is
'Thể loại ';

comment on column CATEGORY.CATEGORY_ID is
'ID';

comment on column CATEGORY.CODE is
'Mã';

comment on column CATEGORY.NAME is
'Tên ';

comment on column CATEGORY.DESCRIPTION is
'Mô tả';

comment on column CATEGORY.CREATED is
'Giờ tạo ';

comment on column CATEGORY.CREATOR is
'Người tạo ';

comment on column CATEGORY.MODIFIED is
'Giờ cập nhật';

comment on column CATEGORY.MODIFIER is
'Người cập nhật';

/*==============================================================*/
/* Table: COMPOSER                                              */
/*==============================================================*/
create table COMPOSER (
   COMPOSER_ID          NUMBER(10)            not null,
   NAME                 VARCHAR2(1024 CHAR),
   DESCRIPTION          VARCHAR2(1024 CHAR),
   CREATED              TIMESTAMP            default SYSDATE  not null,
   CREATOR              VARCHAR2(50 CHAR)     not null,
   MODIFIED             TIMESTAMP,
   MODIFIER             VARCHAR2(50 CHAR),
   constraint PK_COMPOSER primary key (COMPOSER_ID)
)

comment on table COMPOSER is
'Nhạc sĩ';

comment on column COMPOSER.COMPOSER_ID is
'ID';

comment on column COMPOSER.NAME is
'Tên ';

comment on column COMPOSER.DESCRIPTION is
'Tiểu sử';

comment on column COMPOSER.CREATED is
'Giờ tạo ';

comment on column COMPOSER.CREATOR is
'Người tạo ';

comment on column COMPOSER.MODIFIED is
'Giờ cập nhật';

comment on column COMPOSER.MODIFIER is
'Người cập nhật ';

/*==============================================================*/
/* Table: SINGER                                                */
/*==============================================================*/
create table SINGER (
   SINGER_ID            NUMBER(10)            not null,
   NAME                 VARCHAR2(1024 CHAR),
   DESCRIPTION          VARCHAR2(1024 CHAR),
   CREATED              TIMESTAMP            default SYSDATE  not null,
   CREATOR              VARCHAR2(50 CHAR)     not null,
   MODIFIED             TIMESTAMP,
   MODIFIER             VARCHAR2(50 CHAR),
   constraint PK_SINGER primary key (SINGER_ID)
)

comment on table SINGER is
'Ca sĩ ';

comment on column SINGER.SINGER_ID is
'ID';

comment on column SINGER.NAME is
'Tên ca sỹ ';

comment on column SINGER.DESCRIPTION is
'Tiểu sử';

comment on column SINGER.CREATED is
'Giờ tạo';

comment on column SINGER.CREATOR is
'Người tạo ';

comment on column SINGER.MODIFIED is
'Giờ cập nhật';

comment on column SINGER.MODIFIER is
'Người cập nhật ';

/*==============================================================*/
/* Table: SONG                                                  */
/*==============================================================*/
create table SONG (
   NAME                 VARCHAR2(128 CHAR),
   SONG_ID              NUMBER(10)            not null,
   SINGER_ID            NUMBER(10),
   COMPOSER_ID          NUMBER(10),
   CATEGORY_ID          NUMBER(10),
   LYRIC                CLOB,
   constraint PK_SONG primary key (SONG_ID)
);

comment on table SONG is
'Bài hát ';

comment on column SONG.NAME is
'Tên bài hát ';

comment on column SONG.SONG_ID is
'ID';

comment on column SONG.SINGER_ID is
'Ca sĩ';

comment on column SONG.COMPOSER_ID is
'Nhạc sĩ';

comment on column SONG.CATEGORY_ID is
'Thể loại';

comment on column SONG.LYRIC is
'Lời bài hát';

alter table SONG
   add constraint FK_S_CP foreign key (COMPOSER_ID)
      references COMPOSER (COMPOSER_ID);

alter table SONG
   add constraint FK_S_CT foreign key (CATEGORY_ID)
      references CATEGORY (CATEGORY_ID);

alter table SONG
   add constraint FK_S_SG foreign key (SINGER_ID)
      references SINGER (SINGER_ID);
inputSQLQueries.png
danhsachbangdulieu.png

Step 2: Create Menu

  • Go to the Menu Bar, choose Hệ thống->Lập trình chức năng WAK.
wakFunctionConfig.pn
  • Now you are direct to a default page like below.
pageDetail.png
  • Click Button folder(1) to open Input direction to function Popup, and type in your direction.
functionDirec-1.png
  • If your function doesn't exist. A notification will be show in Result frame. Click Tạo chức năng button to create a new function.
devPage.png
newFunction.png
  • After you create a function, WAK will ask you for decentralization.
phanQuyen.png
phanQuyenPage.png
createNewAccessModifer.png

Step 3: Built list page

  • When you done decentralization, go back to the code alteration page. In the left frame, write your logic.
Logic
    HideDetailButton
    FirstFocus==KEYWORD
    KeyField==COMPOSER_ID
    NameField==NAME
    SearchField==KEYWORD
    SearchFieldCombination==COMPOSER_ID,CODE,NAME,DESCRIPTION
Field
    Text==KEYWORD
        Trim
    Text==COMPOSER_ID
        Trim
        Type==number
    Text==CODE
        Trim
        MaxLength==50
    Text==NAME
        Trim
        MaxLength==1024
    Text==DESCRIPTION
        Trim
        MaxLength==1024
    DateRange==CREATED
        Trim
        TimePicker==true
    Text==CREATOR
        Trim
        MaxLength==50
    DateRange==MODIFIED
        Trim
        TimePicker==true
    Text==MODIFIER
        Trim
        MaxLength==50
    Submit==GEN_HTML
    Submit==GEN_EXCEL
    Button==ADD
        Extra==!"onclick=\\"create" + action.getId() + "(this);\\""
    Button==IMPORT
        Extra==!"onclick=\\"import" + action.getId() + "(this);\\""
    Button==REMOVE_SELECTED
        Extra==!"onclick=\\"removeSelected" + action.getId() + "(this);\\""
Popup
    Width==440
    Height==222
    DetailWidth==440
    DetailHeight==472
Layout==Simple
    Panel
        Layout==Simple
            Control==KEYWORD
            Panel
                Layout==DropDown
                    Control==COMPOSER_ID
                    Control==CODE
                    Control==NAME
                    Control==DESCRIPTION
                    Control==CREATED
                    Control==CREATOR
                    Control==MODIFIED
                    Control==MODIFIER
            Control==GEN_HTML
            Control==GEN_EXCEL
            Control==ADD
            Control==IMPORT
            Control==REMOVE_SELECTED
Query
    TableName==COMPOSER
    FieldList
        COMPOSER_ID==COMPOSER_ID
            Format==#
        CODE==CODE
            OpenHtml==<a href='detail.jsp?pk=$COMPOSER_ID$'>
            CloseHtml==</a> 
        NAME==NAME
            OpenHtml==<a href='detail.jsp?pk=$COMPOSER_ID$'>
            CloseHtml==</a> 
        DESCRIPTION==DESCRIPTION
            OpenHtml==<a href='detail.jsp?pk=$COMPOSER_ID$'>
            CloseHtml==</a> 
        CREATED==CREATED
        CREATOR==CREATOR
        MODIFIED==MODIFIED
        MODIFIER==MODIFIER
    Condition
        COMPOSER_ID==COMPOSER_ID
            Format==COMPOSER_ID=safe_to_number(?)
        CODE==CODE
            Format==UPPER(CODE) LIKE UPPER('%'||?||'%')
        NAME==NAME
            Format==UPPER(NAME) LIKE UPPER('%'||?||'%')
        DESCRIPTION==DESCRIPTION
            Format==UPPER(DESCRIPTION) LIKE UPPER('%'||?||'%')
        CREATED==CREATED_FROM
            Format==CREATED >= TO_DATE(?,'DD/MM/YYYY HH24:MI:SS')
        CREATED==CREATED_TO
            Format==CREATED <= TO_DATE(?,'DD/MM/YYYY HH24:MI:SS')
        CREATOR==CREATOR
            Format==UPPER(CREATOR) LIKE UPPER('%'||?||'%')
        MODIFIED==MODIFIED_FROM
            Format==MODIFIED >= TO_DATE(?,'DD/MM/YYYY HH24:MI:SS')
        MODIFIED==MODIFIED_TO
            Format==MODIFIED <= TO_DATE(?,'DD/MM/YYYY HH24:MI:SS')
        MODIFIER==MODIFIER
            Format==UPPER(MODIFIER) LIKE UPPER('%'||?||'%')
    DefaultOrderField==CREATED
    DefaultOrderType==DESC
  • And on the right frame, input your dictionary.
#reference /resource/com/ftl/wak/LiveValidationVN.dic
#reference /resource/com/ftl/wak/CommonVN.dic
Title==Danh mục nhạc sĩ
Caption==DANH MỤC NHẠC SĨ
COMPOSER_ID==ID
    Title==ID
CODE==Mã
    Title==Mã
NAME==Tên
    Title==Tên
DESCRIPTION==Ghi chú
    Title==Ghi chú
CREATED==Giờ tạo
    Title==Giờ tạo
CREATOR==Người tạo
    Title==Người tạo
MODIFIED==Giờ cập nhật
    Title==Giờ cập nhật
MODIFIER==Người cập nhật
    Title==Người cập nhật
Message
    Remove==Bạn có thực sự muốn xóa nhạc sĩ '<%p>' không?
    RemoveSelected==Bạn có thực sự muốn xóa những nhạc sĩ đã chọn không?
  • And here is your result, well done your created a web page.
result.png

Step 4: Built create function

Logic
    FirstFocus==CODE
Field
    File==DATA_FILE
        Extra==required
    Text==CODE
        ApplyCodeFormat
        Trim
        MaxLength==50
        Extra==required
    Text==NAME
        Trim
        MaxLength==1024
    Text==DESCRIPTION
        Trim
        MaxLength==1024
    Submit==SAVE
    Submit==APPLY
    Button==CLOSE
Import
    StartRowIndex==0
    RowExtractionScript=:
    :{
        var params = action.getParameters();
        params.put("CODE",row.get(0));
        params.put("NAME",row.get(1));
        params.put("DESCRIPTION",row.get(2));
    :}
    Screen
        Layout==Table
            Label==DATA_FILE
            Control==DATA_FILE
                BREAK
            Panel
                w==2
                Extra==align="center"
                Layout==Table
                    Control==SAVE
                    Control==CLOSE
Layout==Table
    Label==CODE
    Control==CODE
        LayoutExtra==width="260px"
        BREAK
    Label==NAME
    Control==NAME
        BREAK
    Label==DESCRIPTION
    Control==DESCRIPTION
        BREAK
    Panel
        w==4
        Extra==align="center"
        Layout==Table
            Control==APPLY
            Control==SAVE
            Control==CLOSE
FetchProcess
    Fetch
        TableName==COMPOSER
        PrimaryKey
            COMPOSER_ID==pk
        Column
            CODE==CODE
            NAME==NAME
            DESCRIPTION==DESCRIPTION
SaveProcess
    Validation
        Parameter
            CODE
                Mandatory
    Insert
        TableName==COMPOSER
        PrimaryKey
            COMPOSER_ID==pk
                Automatic==SEQ_COMPOSER.nextval
                Retrieve
        Column
            CODE==CODE
            NAME==NAME
            DESCRIPTION==DESCRIPTION
            CREATED
                Automatic==current_timestamp
            CREATOR
                Automatic==!"'" + action.getParameters().get("session.userName") + "'"
            MODIFIED
                Automatic==current_timestamp
            MODIFIER
                Automatic==!"'" + action.getParameters().get("session.userName") + "'"
#reference /resource/com/ftl/wak/LiveValidationVN.dic
#reference /resource/com/ftl/wak/CommonVN.dic
Title==Tạo mới nhạc sĩ
Caption==TẠO MỚI NHẠC SĨ
CODE==Mã
    Title==Mã
NAME==Tên
    Title==Tên
DESCRIPTION==Ghi chú
    Title==Ghi chú
SaveCompletedSuccessfully==Thông tin nhạc sĩ '$NAME$' đã được thêm vào CSDL.

Step 5: Built detail function

View==/include/master_detail.jsp
Logic
    AttmType==COMPOSER
    NoteType==COMPOSER
Field
    Label==COMPOSER_ID
    Label==CODE
    Label==NAME
    Label==DESCRIPTION
    Label==CREATED
    Label==CREATOR
    Label==MODIFIED
    Label==MODIFIER
Child
Popup
    Width==440
    Height==222
CssClass==data_table
Layout==Table
    Label==COMPOSER_ID
    Control==COMPOSER_ID
        BREAK
    Label==CODE
    Control==CODE
        BREAK
    Label==NAME
    Control==NAME
        BREAK
    Label==DESCRIPTION
    Control==DESCRIPTION
        BREAK
    Label==CREATED
    Control==CREATED
        BREAK
    Label==CREATOR
    Control==CREATOR
        BREAK
    Label==MODIFIED
    Control==MODIFIED
        BREAK
    Label==MODIFIER
    Control==MODIFIER
        BREAK
FetchProcess
    Fetch
        TableName==COMPOSER
        PrimaryKey
            COMPOSER_ID==pk
        Column
            COMPOSER_ID==COMPOSER_ID
            CODE==CODE
            NAME==NAME
            DESCRIPTION==DESCRIPTION
            CREATED==TO_CHAR(CREATED,'DD/MM/YYYY HH24:MI:SS')
            CREATOR==CREATOR
            MODIFIED==TO_CHAR(MODIFIED,'DD/MM/YYYY HH24:MI:SS')
            MODIFIER==MODIFIER
#reference /resource/com/ftl/wak/LiveValidationVN.dic
#reference /resource/com/ftl/wak/CommonVN.dic
Title==Thông tin nhạc sĩ
BREADCRUMB=:
:{
    !"<li><a href='list.jsp'>Quản lý nhạc sĩ</a></li>" +
    "<li><a>" + com.ftl.util.StringEscapeUtil.escapeHtml(action.getParameters().get("NAME")) + "</a></li>"
:}
COMPOSER_ID==ID
    Title==ID
CODE==Mã
    Title==Mã
NAME==Tên
    Title==Tên
DESCRIPTION==Ghi chú
    Title==Ghi chú
CREATED==Giờ tạo
    Title==Giờ tạo
CREATOR==Người tạo
    Title==Người tạo
MODIFIED==Giờ cập nhật
    Title==Giờ cập nhật
MODIFIER==Người cập nhật
    Title==Người cập nhật

Step 6: Built edit function

Logic
    FirstFocus==CODE
Field
    File==DATA_FILE
        Extra==required
    Text==CODE
        ApplyCodeFormat
        Trim
        MaxLength==50
        Extra==required
    Text==NAME
        Trim
        MaxLength==1024
    Text==DESCRIPTION
        Trim
        MaxLength==1024
    Submit==SAVE
    Button==CLOSE
Import
    StartRowIndex==0
    RowExtractionScript=:
    :{
        var params = action.getParameters();
        params.put("CODE",row.get(0));
        params.put("NAME",row.get(1));
        params.put("DESCRIPTION",row.get(2));
    :}
    Screen
        Layout==Table
            Label==DATA_FILE
            Control==DATA_FILE
                BREAK
            Panel
                w==2
                Extra==align="center"
                Layout==Table
                    Control==SAVE
                    Control==CLOSE
Layout==Table
    Label==CODE
    Control==CODE
        LayoutExtra==width="260px"
        BREAK
    Label==NAME
    Control==NAME
        BREAK
    Label==DESCRIPTION
    Control==DESCRIPTION
        BREAK
    Panel
        w==4
        Extra==align="center"
        Layout==Table
            Control==SAVE
            Control==CLOSE
FetchProcess
    Fetch
        TableName==COMPOSER
        PrimaryKey
            COMPOSER_ID==pk
        Column
            CODE==CODE
            NAME==NAME
            DESCRIPTION==DESCRIPTION
SaveProcess
    Validation
        Parameter
            CODE
                Mandatory
    Update
        TableName==COMPOSER
        PrimaryKey
            COMPOSER_ID==pk
        Column
            CODE==CODE
            NAME==NAME
            DESCRIPTION==DESCRIPTION
            MODIFIED
                Automatic==current_timestamp
            MODIFIER
                Automatic==!"'" + action.getParameters().get("session.userName") + "'"
#reference /resource/com/ftl/wak/LiveValidationVN.dic
#reference /resource/com/ftl/wak/CommonVN.dic
Title==Sửa thông tin nhạc sĩ
Caption==SỬA THÔNG TIN NHẠC SĨ
CODE==Mã
    Title==Mã
NAME==Tên
    Title==Tên
DESCRIPTION==Ghi chú
    Title==Ghi chú
SaveCompletedSuccessfully==Thông tin nhạc sĩ '$NAME$' đã được cập nhật và

Step 7: Built remove function

  • In this step, you have to create 2 file remove.dic and removeVN.dic in folder web/test/composer. You can use Sublime text to write your file.
remove.png
  • remove.dic
SaveProcess
    Fetch
        TableName==COMPOSER
        PrimaryKey
            COMPOSER_ID==pk
        Column
            NAME==NAME
    Delete
        TableName==COMPOSER
        PrimaryKey
            COMPOSER_ID==pk
  • removeVN.dic
#reference /resource/com/ftl/wak/LiveValidationVN.dic
#reference /resource/com/ftl/wak/CommonVN.dic
SaveCompletedSuccessfully==Đã xóa thông tin nhạc sĩ '$NAME$'.