Start » 1. Getting started

Fold

Table of Contents

Purpose

What you need

Step by step tutorial

Download and extract WAK package

Running

Using NetBeans IDE (recommended)

Directly

Installation

Create your first CRUD app

Step 1: Database Preparation

Step 2: Create Menu

Step 3: Built list page

Step 4: Built create function

Step 5: Built detail function

Step 6: Built edit function

Step 7: Built remove function

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.
NetBeans or a favorite text editor (eg: Sublime Text)

Step by step tutorial

Download and extract WAK package

Open http://wak.vn in a web browser
Click on the Download button on top of the page.

Click on the "WAK bundle" link.

Click on the "Download file" link, a zip file will be downloaded to your local drive.

Extract downloaded zip file to a folder. In this tutorial we will extract to d:\Project\app.

Running

Using NetBeans IDE (recommended)

Open NetBeans IDE. In tap bar menu, open File/Open Project… then run d:\Project\app

Now you will see app structure like the following picture. Click Run symbol in Menu or right-click in project and choose Run button to run project.

Directly

Open project folder (in this tutorial is d:\Project\app)
Execute file run.bat if your OS is Windows; run.sh if your OS is linux/unix.
Caution
- You need a properly installed JDK (with java executable available in system path) to execute these file.
- You can edit run.bat/run.sh to specify the path to java executable
- View java console output to identify if there is any issue occur.

Installation

Open web browser, go to url https://localhost to start installation process.

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"

A web page displayed, say that application has been installed and provide an username/password for logging in.

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.

Example SQL Queries

Hide

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),
   CODE                 VARCHAR2(50 CHAR)     not null,
   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.CODE is
'Mã';

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);

Step 2: Create Menu

Go to the Menu Bar, choose Hệ thống->Lập trình chức năng WAK.

Now you are direct to a default page like below.

Click Button folder(1) to open Input direction to function Popup, and type in your direction.

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.

After you create a function, WAK will ask you for decentralization.

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.

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.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$'.