(yenbao1340@gmail.com) Lập trình Odoo (OpenERP) Phần 2: xây dựng view (giao diện người dùng) trong Odoo

Lập trình Odoo/OpenERP Phần 2: xây dựng view (giao diện người dùng) trong Odoo OpenERP Tiếp tục nội dung phần 1 (Xây dựng đối tượng model) phần 2 sẽ hướng dẫn xây dựng giao diện trong Odoo (view) Đây là các loại giao diện chính ngoài ra còn có nhiều loại view và action khác sẽ được trình bày ở các phần tiếp theo

Trang 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:

Trang 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

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

Trang 3

5. Window Action

Trang 4

1 GIỚI THIỆU GIAO DIỆN NGƯỜI DÙNG ODOO

4

dựng giao diện; một số thành phần cơ bản của giao

access rights (quyền truy cập) …

Trang 5

1 GIỚI THIỆU

5

Trang 6

1 GIỚI THIỆU GIAO DIỆN NGƯỜI DÙNG ODOO

6

người dùng có cái nhìn trực quan và dễ dàng tương

Trang 7

NỘI DUNG

7

4. Xây dựng view

5. Window Action

Trang 8

2 CẤU TRÚC GIAO DIỆN TRONG ODOO

Trang 10

NỘI DUNG

10

4. Xây dựng view

5. Window Action

Trang 11

 Menu sẽ gồm 1 số thuộc tính sau:

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.

Trang 12

NỘI DUNG

12

Trang 13

4 XÂY DỰNG VIEW

13

 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

Trang 14

14

< 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

Trang 15

15

<record model="ir.ui.view" id=“id_cua_view">

< field name ="model"> Tên đối tượng </ field >

hệ thống

Trang 16

16

<field name="name">Tên của view </field>

Trang 17

17

<field name="model">Tên đối tượng</field>

Trang 18

18

<field name=“type">form</field> #tree, search, graph…

Trang 19

19

<field name="arch" type="xml">

view mà nội dung sẽ là 1 trong 3 dạng

Trang 20

NỘI DUNG

20

Trang 21

21

hoạt khi chúng ta bấm vào 1 menu đã được gán mộtaction

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

Trang 22

22

tượng

o Tương tự như 1 file excel: hiện thị tất cả các dòng dữ liệu

cột này chính là các thuộc tính của đối tượng

Trang 23

23

<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

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

Trang 24

24

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

Trang 25

NỘI DUNG

25

4. Xây dựng view

5. Window Action

Trang 26

26

 Trong OpenERP, form view là nơi hiển thị cụ thể từng dòng dữ liệu của một đối tượng.

 form view bao gồm một số thành phần quan trọng như: trường dữ liệu (field), nút bấm (button), các thanh trạng thái (status bar)

Phần trạng thái

Phần dữ

liệu

Bình luận và

Trang 27

27

nghĩa sẳn

< form versiton =“7“ string =“tên của form">

< header> ……… Nội dung phần trạng thái………… </header>

< sheet> ……… Nội dung phần dữ liệu………… </sheet>

……… Nội dung phần bình luận và lịch sử…………

</div>

</ record >

Trang 28

28

< form string ="Thông tin" version = "7.0" >

< header >

< button name ="act_choduyet" string = "Chờ hiệu đính"

type = "object" icon = "gtk-find-and-replace" colspan = "2" />

< button name ="act_huyn" string = "Hủy"

type = "object" icon = "gtk-cancel" colspan = "2" />

< field name ="state" widget = "statusbar" nolabel = "1" />

</ header >

< group col ="4" colspan = "4" >

< field name ="name" />

< field name ="duan" required = "1" />

</ group >

< field name ="is_write" invisible = "1" />

< field name ="hieudinh" attrs = "{'readonly': [('is_write','=',False)]}" />

< field name ="nguoidich" string = "Người biên soạn" />

</ group >

< field name ="loai_baiviet" />

< field name ="sequence" attrs = "{'readonly': [('is_write','=',False)]}" />

< field name ="soluongxem" readonly = "1" />

Trang 29

29

<header>

<button name="act_choduyet" string="Chờ hiệu đính"

type="object" icon="gtk-find-and-replace" colspan="2"/>

<button name="act_huyn" string="Hủy"

type="object" icon="gtk-cancel" colspan="2"/>

<field name="state" widget="statusbar" nolabel="1"/>

</header>

Trang 30

30

< header >

Trang 31

</ header >

</ group >

<group col="6" colspan="4">

<field name="is_write" invisible="1"/>

<field name="hieudinh" attrs="{'readonly': [('is_write','=',False)]}"/>

<field name="nguoidich" string="Người biên soạn"/>

</group>

< field name ="loai_baiviet" />

< field name ="sequence" attrs = "{'readonly': [('is_write','=',False)]}" />

< field name ="soluongxem" readonly = "1" />

</ group >

</ form >

Trang 32

32

< header >

</ header >

</ group >

< field name ="is_write" invisible = "1" />

< field name ="hieudinh" attrs = "{'readonly': [('is_write','=',False)]}" />

< field name ="nguoidich" string = "Người biên soạn" />

</ group >

<group col="6" colspan="4">

<field name="loai_baiviet"/>

<field name="sequence" attrs="{'readonly': [('is_write','=',False)]}"/>

<field name="soluongxem" readonly="1"/>

Trang 33

33

Một số thẻ thường dùng để xây dựng form view

notebook Định nghĩa các tab trong giao diện - String: tên của thẻ

- Attrs: các thuộc tính phụ thuộc

group Xác định vị trí các cột trong khung dữ liệu

newline Kết thúc 1 dòng Các fied sau thẻ này sẽ được

đưa xuống dòng tiếp theo

separator Tạo khoảng cách giữa các vùng theo chiều

ngang

- string: tên của vùng.

Trang 34

34

Button Tạo ra một nút bấm Thông

qua nút bấm có thể kết nối trực tiếp với hệ thống để xử

lý dữ liệu

- icon: hình ảnh hiển thị của nút bấm

- string: tên được hiển thị của nút bấm

- type: kiểu của nút bấm Gồm 3 dạng: workflow,

object, action

- name: tùy thuộc vào kiểu của nút bấm mà giá trị

của name có thể là: dấu hiệu nhận biết trạng thái, tên 1 phương thức hoặc id của một action

- attrs: các thuộc tính phụ thuộc

- context: truyền các bối cảnh cụ thể để, hệ thống

xử lý (khi cần)

Trang 35

35

Field Xác định 1 cột, là

nơi hiển thị giá trị thuộc tính của đối tượng nghiệp vụ Có thể thông qua field

để thêm/cập nhật dữ liệu tương ứng của

hệ thống

- name: tên của trường dữ liệu Tương ứng với tên thuộc tính

của đối tượng nghiệp vụ trong hệ thống.

- string: tiêu đề của trường dữ liệu hiển thị trên biểu mẫu.

- invisible: ẩn/hiện trường dữ liệu trên biểu mẫu Thông tin

vẫn sẽ được lấy về nhưng sẽ ẩn đi.

- widget: thay đổi cách hiển thị mặc định của trường dữ liệu

- attrs: các thuộc tính phụ thuộc

- on_change: sẽ gọi các phương thức đặc biệt khi giá trị của

trường dữ liệu bị thay đổi (có thể thay đổi các trường dữ liệu khác hoặc hiện các thông báo đến người sử dụng)

- domain: lọc dữ liệu theo các các tiêu chí đã được định sẵn.

Trang 36

36

Field Xác định 1 cột, là

nơi hiển thị giá trị thuộc tính của đối tượng nghiệp vụ

Có thể thông qua field để thêm/cập nhật dữ liệu tương ứng của hệ thống

- readonly: quy định trường dữ liệu chỉ được phép xem mà

không được phép chỉnh sửa.

- required: quy dịnh trường dữ liệu này là bắt buộc phải nhập.

- nolabel: không tự động hiển thị tiêu đề của trường dữ liệu

(Khi không sử dụng thuộc tính string)

- filename: được dành cho các trường dữ liệu thuộc kiểu dữ liệu

nhị phân (binary) Giá trị của trường sẽ là tên của tập tin được đính kèm vào.

- password: để xác định đây là trường dữ liệu mật khẩu, giá trị

của trường sẽ được che giấu.

Trang 37

NỘI DUNG

37

4. Xây dựng view

5. Window Action

Trang 38

38

 Search View được dùng để tùy chỉnh các bảng điều

khiển tìm kiếm ở trên đầu trang của màn hình Tree View

dung mặc dù được truy vấn tới một đối tượng cụ thể

 Search View được khai báo có kiểu là search, có phần

tử gốc là <search>

Trang 39

39

Search view trên OpenERP (v6)

Trang 40

40

Trang 41

41

< record id ="sinhvien_search_view" model ="ir.ui.view" >

< field name ="name" > Tìm sinh viên </field>

< field name ="model" > x_sinhvien </field>

< field name ="type" > search </field>

< field name ="arch" type ="xml" >

< search string ="Tìm sinh viên" >

/*Nội dung search view*/

</ search >

</ field >

</ record >

Định dạng
Số trang	67
Dung lượng	1,7 MB