Hướng dẫn sử dụng Tabular Form trong Oracle APEX

Giới thiệu
Tạo Tabular Form sử dụng Wizard
Tạo Tabular Form bằng cách thủ công
Xử lý Tabular Form
Master-Details
Có thể bạn quan tâm

1. Giới thiệu

Bạn đang xem tài liệu hướng dẫn lập trình Oracle APEX 5.0. Đây là tài liệu thứ 2 tiếp theo sau tài liệu:

Hướng dẫn lập trình Oracle APEX cho người mới bắt đầu (APEX 5.0)

Trong tài liệu này tôi sẽ hướng dẫn bạn tiếp tục với Oracle APEX Database Desktop Application, sử dụng Tabular Form.

2. Tạo Tabular Form sử dụng Wizard

Đăng nhập vào Oracle APEX với tài khoản người lập trình.

http://localhost:8080/apex

Vào mục "Database Application".

Vào tiếp ứng dụng "Hello Database Desktop Application" mà bạn đã tạo trong tài liệu hướng dẫn trước.

Trong ứng dụng này đã có một vài trang được tạo trong bài hướng dẫn trước. Click "Create Page" để tạo mới một trang khác.

Tạo một Tabular Form:

Nhập vào:

Page: 7
Page Name: Emp Tabular Form (7)

Trang web của bạn đã được tạo ra, nhấn vào nút RUN để chạy thử trang vừa tạo.

Đây là hình ảnh trang 7 khi được chạy.

Ở đây, câu hỏi đặt ra là làm thế nào để thay đổi một số trường đầu vào (Input Fields) thành SELECT LIST hoặc POPUP LOV (List of values). Ví dụ: bạn muốn chọn Manager (MGR) thông qua POPUP LOV, và chọn Job thông qua SELECT LIST.

Trở lại màn hình thiết kế trang 7. Sét đặt các thuộc tính cho cột JOB để nó hiển thị như một danh sách lựa chọn (SELECT LIST).

Identification:

Type: Select List

List of Values

Type: Static Value
Static Value:

STATIC:
CLERK;CLERK,
SALESMAN;SALESMAN,
PRESIDENT;PRESIDENT,
MANAGER;MANAGER,
ANALYST;ANALYST

Cú pháp khai báo các giá trị tĩnh (Static Values):

STATIC:Display1;Return1,Display2;Return2

Tiếp theo bạn cần sét đặt các thuộc tính cho trường MGR để nó hiển thị dưới dạng POPUP LOV (List of values)

Identification:

Type: Popup LOV (shows display values)

List of Values:

Type: SQL Query
SQL Query: Select emp.ename, emp.empno from Emp

Tương tự sét đặt các thuộc tính cho DEPTNO, để nó hiển thị như là một POPUP LOV.

Identification:

Type: Popup LOV (shows display values)

List of Values

Type: SQL Query
SQL Query: Select d.dname, d.deptno from Dept d

Save và chạy lại trang 7:

3. Tạo Tabular Form bằng cách thủ công

Ở trên tôi đã hướng dẫn bạn cách tạo Tabular Form sử dụng wizard của Oracle Apex. Tiếp theo chúng ta sẽ tạo Tabular Form hoàn toàn từ đầu, không sử dụng Wizard, nó sẽ giúp bạn hiểu hơn về Tabular Form & Oracle APEX.

Nhập vào:

Page Number: 8
Name: Emp Tabular Form (8)

Một trang rỗng đã được tạo ra.

Tạo Tabular Form trong vùng "Content Body":

Title: Emp Tabular Form (8)
Type: Tabular Form
SQL Query:

select EMPNO,
       EMPNO EMPNO_DISPLAY,
       ENAME,
       JOB,
       MGR,
       HIREDATE,
       SAL,
       COMM,
       DEPTNO
  from EMP

Bạn có thể chạy thử trang 8, kết quả có được:

Thêm một cột chứa các CheckBox, sử dụng để lựa chọn các dòng.

Sét đặt thuộc tính cho EMPNO, ẩn cột này, và sét đặt thuộc tính primary key cho nó.

Identification

Column Name: EMPNO
Type: Hidden Column (saves state)

Primary Key Source

Type: Existing sequence
Name: EMP_SEQ

Cột ENAME:

Identification

Column Name: ENAME
Type: Text Field

Cột JOB:

Identification

Column Name: JOB
Type: Select List

List of Values

Type: Static Values
Static Values:

STATIC:
CLERK;CLERK,
SALESMAN;SALESMAN,
PRESIDENT;PRESIDENT,
MANAGER;MANAGER,
ANALYST;ANALYST

Cột MGR:

Identification

Column Name: MGR
Type: Popup LOV (shows display values)

List of Values

Type: SQL Query
Static Values: Select emp.ename, emp.empno from Emp

Cột HIREDATE:

Identification

Column Name: HIDEDATE
Type: Date Picker

Appearance

Format Mask: YYYY-MM-DD

Default

Type: PL/SQL Expression
PL/SQL Expression: sysdate

Cột SAL:

Identification

Column Name: SAL
Type: Text Field

Cột SAL (Salary) là kiểu dữ liệu số, vì vậy bạn cần thêm validation:

Identification

Name: SAL must be numeric

Validation:

Type: Column is numeric
Column: SAL

Error

Error Message: #COLUMN_HEADER# must have a value.
Display Location: Inline with Field and in Notification

Chú ý:

#COLUMN_HEADER# là một cái có tác dụng giữ chỗ (Place Holder), nó sẽ được thay thế bởi tiêu đề của cột tương ứng tại thời gian chạy.

Cột COMM:

Identification

Column Name: COMM
Type: Text Field

Tạo Validation cho COMM, COMM phải là dữ liệu số.

Identification

Name: COMM must be numeric

Validation:

Type: Column is numeric
Column: COMM

Error

Error Message: #COLUMN_HEADER# must have a value.
Display Location: Inline with Field and in Notification

Cột DEPTNO:

Identification:

Type: Popup LOV (shows display values)

List of Values

Type: SQL Query
SQL Query: Select d.dname, d.deptno from Dept d

4. Xử lý Tabular Form

Bước tiếp theo chúng ta cần thêm các xử lý bao gồm thêm mới, sửa, xóa các bản ghi.

Thay đổi tên cho các Button, như hình minh họa dưới đây:

Xử lý cho nút Cancel:

Khi người dùng nhấn vào nút Cancel, trang web sẽ refresh lại trang hiện tại (Ở đây là trang 8).

Xử lý thêm mới bản ghi

Khi người dùng nhấn vào nút ADD, table trên trang sẽ tự động thêm một dòng mới, cho phép người dùng nhập dữ liệu. Bạn cần gọi hàm javascript để thực hiện điều này.

Idetification

Button Name: ADD
Label: Add

Behavior

Action: Redirect to URL
Target: javascript:apex.widget.tabular.addRow();

Xử lý lưu nhiều dòng dữ liệu

Idetification

Button Name: SAVE
Label: Save

Behavior

Action: Submit Page

Nút SAVE cần phải thực hiện nhiệm vụ lưu thông tin của nhiều bản ghi cùng một lúc, bao gồm các bản ghi mới các các bản ghi có sửa đổi. Bạn cần phải khai báo một tiến trình (Process) sử lý việc này. Process này sẽ được chạy một lần ngay sau khi trang được gọi, nó sẽ update các bản ghi có thay đổi và insert các bản ghi mới.

Thêm mới Process:

Idetification

Name: ApplyMRU
Type: Tabular Form - Multi Row Update

Settings

Table Name: EMP
Primary Key Column: EMPNO

Execution Options

Tabular Form: Emp Tabular Form (8)
Run Process: Once Per Page Visit (default)

Success Messages

Success Message: #MRU_COUNT# row(s) updated, #MRI_COUNT# row(s) inserted.

Condition

When Button Pressed: SAVE (Name of button)
Execution Scope: For Created and Modified Rows

Xử lý xóa nhiều dòng ngay lập tức

Xử lý nút, để xóa ngay lập tức các bản ghi đã chọn, không cần hỏi:

Để xóa nhiều dòng bạn cần tạo một tiến trình (Process) sử lý việc này. Process này sẽ được thực thi một lần ngay khi trang web được gọi.

Tạo mới Process:

Idetification

Name: ApplyMRD_IMMEDIATELY
Type: Tabular Form - Multi Row Delete

Settings

Table Name: EMP
Primary Key Column: EMPNO

Execution Options

Tabular Form: Emp Tabular Form (8)
Run Process: Once Per Page Visit (default)

Success Messages

Success Message: #MRD_COUNT# row(s) deleted.

Condition

When Button Pressed: IMMEDIATELY_MULTY_ROW_DELETE (Name of button)
Execution Scope: For Created and Modified Rows

Xử lý xóa nhiều dòng - Hỏi trước khi xóa

Trước khi xóa các bản ghi, chương trình hỏi người dùng có đồng ý xóa hay không trước khi thực thi lệnh xóa.

Idetification

Button Name: MULTI_ROW_DELETE
Label: Multi Row Delete

Behavior

Action: Redirect URL
Target: javascript:apex.confirm('Are you sure to delete?','MULTI_ROW_DELETE');

apex.confirm(...) là hàm Javascript sử dụng để hỏi lại người dùng trước khi thực thi lệnh của button.

// Hàm bao gồm 2 tham số, message và Button Name.

apex.confirm('Message ...', 'Button Name');

// Ví dụ:

apex.confirm('Are you sure to delete?','MULTI_ROW_DELETE');

// Sử dụng biến
// htmldb_delete_message là một biến Javascript
// nó có giá trị 'Would you like to perform this delete action?'
// (Bạn cần khai báo biến này).
apex.confirm(htmldb_delete_message,'MULTI_ROW_DELETE');

// Khai báo một biến có tên htmldb_delete_message
var htmldb_delete_message='Would you like to perform this delete action?';

// Hoặc:
// "DELETE_CONFIRM_MSG" là một hằng số có sẵn trong APEX.
// Nó có giá trị là: Would you like to perform this delete action?

var htmldb_delete_message='"DELETE_CONFIRM_MSG"';


// Sau đó có thể sử dụng biến này trong toàn bộ trang.

apex.confirm(htmldb_delete_message,'MULTI_ROW_DELETE');

Để xóa nhiều dòng bạn cần tạo một tiến trình (Process) sử lý việc này. Process này sẽ được thực thi một lần ngay khi trang web được gọi.

Idetification