(yenbao1340@gmail.com) Lập trình Odoo (OpenERP) Phần 2: xây dựng view (giao diện người dùng) trong Odoo

1
LAB_2
XÂY DỰNG GIAO DIỆN
MÃ NGUỒN MỞ
TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH
KHOA CÔNG NGHỆ THÔNG TIN
Hướng dẫn: Nguyễn Yên Bảo
Điện thoại:
Email:
2
NỘI DUNG
2
1. Giới thiệu giao diện người dùng trong Odoo
2. Cấu trúc giao diện
3. Xây dựng menu
4. Xây dựng view
a) Cấu trúc chung của view
b) Xây dựng Tree view
c) Xây dựng Form view
d) Xây dựng Search view
5. Window Action
3
NỘI DUNG
3
1. Giới thiệu giao diện người dùng
trong Odoo
2. Cấu trúc giao diện
3. Xây dựng menu
4. Xây dựng view
a) Cấu trúc chung của view
b) Xây dựng Tree view

c) Xây dựng Form view
d) Xây dựng Search view
5. Window Action
4
1. GIỚI THIỆU GIAO DIỆN NGƯỜI DÙNG ODOO
4
 Một phần trong việc xây dựng module là ta phải xây
dựng giao diện; một số thành phần cơ bản của giao
diện là: menus (trình đơn), views (màn hình giao
diện), actions (hành động, tác vụ), roles (vai trò),
access rights (quyền truy cập) …
 Tất cả đều được viết bằng ngôn ngữ XML
5
1. GIỚI THIỆU
5
 Cấu trúc XML phổ biến
6
1. GIỚI THIỆU GIAO DIỆN NGƯỜI DÙNG ODOO
6
 Giao diện người dùng trong Odoo rất đa dạng, giúp
người dùng có cái nhìn trực quan và dễ dàng tương
tác với hệ thống
7
NỘI DUNG
7
1. Giới thiệu giao diện người dùng trong Odoo
2. Cấu trúc giao diện
3. Xây dựng menu
4. Xây dựng view
a) Cấu trúc chung của view

b) Xây dựng Tree view
c) Xây dựng Form view
d) Xây dựng Search view
5. Window Action
8
2. CẤU TRÚC GIAO DIỆN TRONG ODOO
8
Menu gốc
Danh sách
menu con
Tree view
Search view
Chuyển đổi
giữa tree
view và form
view
9
2. CẤU TRÚC GIAO DIỆN TRONG ODOO
9
Menu Tree view
Form view 1
Form view 2
Graph view
Window Action
W.Action view
Object
10
NỘI DUNG
10
1. Giới thiệu giao diện người dùng trong Odoo

2. Cấu trúc giao diện
3. Xây dựng menu
4. Xây dựng view
a) Cấu trúc chung của view
b) Xây dựng Tree view
c) Xây dựng Form view
d) Xây dựng Search view
5. Window Action
11
3. XÂY DỰNG MENU
11
 Menu sẽ được viết trong file *.xml (thường là menu.xml) và phải
được khai báo trong file __openerp__.py
 Menu sẽ gồm 1 số thuộc tính sau:
o Id: id của menu; phải là duy nhất
o Parent: id của menu cha trong hệ thống phân cấp
o Name: Nhãn của menu (mặc định hệ thống sẽ lấy name của action)
o Action: id của action mà menu này liên kết tới (nếu có)Tạo Action
o Icon: biểu tượng của menu (có thể có hoặc không)
o Groups: danh sách các nhóm người dùng có thể thấy menu này
o Sequence: con số để sắp thứ tự của các menu; menu nào có số thứ
tự nhỏ hơn sẽ được sắp trước.
12
NỘI DUNG
12
1. Giới thiệu giao diện người dùng trong Odoo
2. Cấu trúc giao diện
3. Xây dựng menu
4. Xây dựng view
a) Cấu trúc chung của view

b) Xây dựng Tree view
c) Xây dựng Form view
d) Xây dựng Search view
5. Window Action
13
4. XÂY DỰNG VIEW
13
4.1. Cấu trúc chung của view
 Giao diện người dùng trong OpenERP được chia ra làm 3 loại
view chính bao gồm
o Biểu mẫu (form view)
o Danh sách (tree view)
o Tìm kiếm (search view)
 Tất cả đều được viết bằng ngôn ngữ XML
 Ngoài ra còn có một số loại view khác như: calendar, gantt,
graph…
Tùy thuộc vào dạng của view mà ta
sẽ khai báo tương ứng
Cấu trúc chuẩn để khai báo 1 view
14
4. XÂY DỰNG VIEW
14
4.1. Cấu trúc chung của view
<record model="ir.ui.view" id="ntt_news_wk_tree_view_dlich">
<field name="name">Tên của view</field>
<field name="model">tên đối tượng</field>
<field name=“type">form</field> #tree, search, graph…
<field name="arch" type="xml">
Nội dung của view (tùy thuộc vào type) sẽ là 1
trong 3 dạng sau

<tree>…………</tree>
<form>…………</form>
<search>…………</search>
</field>
</record>
15
4. XÂY DỰNG VIEW
15
4.1. Cấu trúc chung của view
<record model="ir.ui.view" id=“id_cua_view">
<field name="name">Tên của view</field>
<field name="model">Tên đối tượng</field>
<field name=“type">form</field> #tree, search, graph…
<field name="arch" type="xml">
Nội dung của view (tùy thuộc vào type) sẽ là 1
trong 3 dạng sau
<tree>…………</tree>
<form>…………</form>
<search>…………</search>
</field>
</record>
 Khởi tạo 1 view:
o model="ir.ui.view” : View này sẽ được lưu vào đối tượng ir.ui.view trong
hệ thống
o Id: id của view, phải là duy nhất
16
4. XÂY DỰNG VIEW
16
4.1. Cấu trúc chung của view
<record model="ir.ui.view" id="ntt_news_wk_tree_view_dlich">

<field name="name">Tên của view </field>
<field name="model">Tên đối tượng </field>
<field name=“type">form</field> #tree, search, graph…
<field name="arch" type="xml">
Nội dung của view (tùy thuộc vào type) sẽ là 1
trong 3 dạng sau
<tree>…………</tree>
<form>…………</form>
<search>…………</search>
</field>
</record>
 Tên của view: sẽ được hiển thị lên giao diện
17
4. XÂY DỰNG VIEW
17
4.1. Cấu trúc chung của view
<record model="ir.ui.view" id="ntt_news_wk_tree_view_dlich">
<field name="name">Tên của view</field>
<field name="model">Tên đối tượng</field>
<field name=“type">form</field> #tree, search, graph…
<field name="arch" type="xml">
Nội dung của view (tùy thuộc vào type) sẽ là 1
trong 3 dạng sau
<tree>…………</tree>
<form>…………</form>
<search>…………</search>
</field>
</record>
 Tên của đối tượng mà ta muốn tạo view
18

4. XÂY DỰNG VIEW
18
4.1. Cấu trúc chung của view
<record model="ir.ui.view" id="ntt_news_wk_tree_view_dlich">
<field name="name">Tên của view</field>
<field name="model">Tên đối tượng</field>
<field name=“type">form</field> #tree, search, graph…
<field name="arch" type="xml">
Nội dung của view (tùy thuộc vào type) sẽ là 1
trong 3 dạng sau
<tree>…………</tree>
<form>…………</form>
<search>…………</search>
</field>
</record>
 Loại của view: có thể là form (biểu mẫu), tree (danh sách), search (tìm
kiếm)…
19
4. XÂY DỰNG VIEW
19
4.1. Cấu trúc chung của view
<record model="ir.ui.view" id="ntt_news_wk_tree_view_dlich">
<field name="name">Tên của view</field>
<field name="model">Tên đối tượng</field>
<field name=“type">form</field> #tree, search, graph…
<field name="arch" type="xml">
Nội dung của view (tùy thuộc vào type) sẽ là 1
trong 3 dạng sau
<tree>…………</tree>
<form>…………</form>

<search>…………</search>
</field>
</record>
 Nội dung của view sẽ được khai báo trong thẻ này. Tùy thuộc vào dạng của
view mà nội dung sẽ là 1 trong 3 dạng
o <tree>…………</tree>
o <form>…………</form>
o <search>…………</search>
20
NỘI DUNG
20
1. Giới thiệu giao diện người dùng trong Odoo
2. Cấu trúc giao diện
3. Xây dựng menu
4. Xây dựng view
a) Cấu trúc chung của view
b) Xây dựng Tree view
c) Xây dựng Form view
d) Xây dựng Search view
5. Window Action
21
4. XÂY DỰNG VIEW
21
4.2. Xây dựng Tree view
 Tree view (giao diện dạng danh sách): sẽ được kích
hoạt khi chúng ta bấm vào 1 menu đã được gán một
action
Các nút bấm
(thêm/xóa/sửa)
Danh sách các trường

dữ liệu mà ta muốn
hiển thị
Dữ liệu tương ứng
22
4. XÂY DỰNG VIEW
22
4.2. Xây dựng Tree view
 Tree view sẽ hiện thị tất cả các dữ liệu của một đối
tượng
o Tương tự như 1 file excel: hiện thị tất cả các dòng dữ liệu
 Các cột của danh sách sẽ do chúng ta quyết định. Các
cột này chính là các thuộc tính của đối tượng
23
4. XÂY DỰNG VIEW
23
4.2. Xây dựng Tree view
<tree string="tên view" colors="red:gioitinh==male" editable="1">
<field name="name" string="Tên sinh viên"/>
<field name="gioitinh" string="Giới tính"/>
</tree>
Tree view bao gồm một số thuộc tính sau:
 String: tên của tree
 Colors: màu sắc của các dòng dữ liệu bên dưới, khi 1 dòng dữ
liệu thỏa mãn điều kiện thì màu sắc sẽ thay đổi tương ứng
VD: colors="red:gioitinh==male“: những sinh viên có giới tính là
nam sẽ hiện màu đỏ
 Editable: có giá trị 1/0 (mặc định là 0): cho phép chỉnh sửa dữ
liệu trực tiếp trên tree mà không cần vào form
24
4. XÂY DỰNG VIEW

24
4.2. Xây dựng Tree view
<tree string="tên view" colors="red:gioitinh==male" editable="1" >
<field name="name" string="Tên sinh viên"/>
<field name="gioitinh" string="Giới tính"/>
</tree>
 Các trường dữ liệu mà chúng ta muốn hiện ra.
 Các trường này phải nằm trong thẻ <tree>…</tree>
 Bao gồm 1 số thuộc tính:
o Name: tên của trường muốn hiển thị thông tin. Phải tương
ứng với tên thuộc của đối tượng
o String: Nhãn của field (Có thể có hoặc không)
o Ngoài ra còn có các thuộc tính khác (Tham khảo thêm ở
phần Form view)
25
NỘI DUNG
25
1. Giới thiệu giao diện người dùng trong Odoo
2. Cấu trúc giao diện
3. Xây dựng menu
4. Xây dựng view
a) Cấu trúc chung của view
b) Xây dựng Tree view
c) Xây dựng Form view
d) Xây dựng Search view
5. Window Action