Chức năng và thành phần của DHTMLX pptx

TRƯỜNG ĐẠI HỌC AN GIANG
KHOA KỸ THUẬT – CÔNG NGHỆ – MÔI TRƯỜNG

TIỂU LUẬN MÔN HỌC LẬP TRÌNH WEB
SV thực hiện:
Nguyễn Huỳnh Đông DTH082072
Lê Xuân Phi DTH082055
An Giang, 03/2011
Mục lục
I. Giới thiệu 3
II. Các Control trong DHTMLX 4
Thêm Control của DHTMLX vào trang Web 4
Các loại control trong DHTMLX 5
View 5
Calendar 6
Windows 8
Popup 9
Toolbar 10
Form 12
Chart 14
DataView 17
Iframe 18
Video View 19
Google Map 20
III. Các hàm (phương thức) và sự kiện 22
IV. Nhận xét và kết luận 23
2
I. Giới thiệu
DHTMLX là một thư viện giao diện JavaScript (GUI widget) được dùng để
xây dựng các ứng dụng web động (Dynamic Web) với Control giống như trong ứng
dụng Winform và tương tác với dữ liệu thông qua Ajax. Thư viện này được phát

hành dưới 2 dạng mã nguồn mở (GNU General Public License) và thương mại.
Kiến trúc các module của thư viện DHTMLX này cho phép sử dụng các thành phần
riêng biệt hoặc kết hợp chúng lại thành một giao diện hoàn chỉnh dựa trên Ajax.
Các Control đầu tiên của DHTMLX là dhtmlxTree và dhtmlxGrid, đã được
phát hành trong năm 2005-2006. Sau đó, DHTMLX đã được mở rộng với các thành
phần giao diện người dùng khác để trở thành một bộ công cụ hoàn chỉnh bao gồm
tất cả các control cần thiết nhất của ứng dụng web. Là một thư viện độc lập được
viết hoàn toàn bằng JavaScript và CSS, DHTMLX không xung đột với thư viện
khác của Ajax như: jQuery, YUI, Prototype, v v
Các đặc tính của DHTMLX:
 C ấu trúc Module : Các Control trong thư viện DHTMLX mỗi thành phần là
một thực thể riêng biệt và độc lập có thể được dùng riêng để phục vụ một số chức
năng của ứng dụng, Ví dụ: Menu, Treeview, Datagridview, DatePicker. Và có thể
dùng các control này chung với nhau để tạo nên một giao diện web đầy đủ và sinh
động
 Ứng dụng Desktop: Chó phép kéo thả, chỉnh sửa trực tiếp, thao tác với
Clipboard, ràng buột dữ liệu nhập liệu, tương tác thông qua Ajax. Bắt đầu từ phiên
bản 2.5 các thành phần giao diện người dùng đã có Skin và Theme tương tự như
giao diện người dùng Windows
 Client to Server: Thư viện DHTMLX hoạt động hoàn toàn ở phía Client và
có thể được sử dụng bởi ngôn ngữ khác hoặc thao tác trên cơ sở dữ liệu. Ngoài ra,
lớp truyền thông (dhtmlxConnector) có thể được sử dụng để quản lý thông tin liên
lạc giửa client-server bằng PHP,.Net hoặc Java.
 Các Them e : Các màu sắc của giao diện và các control có thể được tùy chỉnh
trực tuyến thông qua SkinBuilder, nó sẽ tạo ra các file CSS và hình ảnh cần thiết để
cung cấp cho các theme và màu sắc được chọn. Bắt đầu từ phiên bản 2.6 - có nhiều
Skin được cài đặt trước.
3
 Hỗ trợ cảm ứng : DHTMLX phát hành một phiên bản HTML5 JavaScript
nhằm tối ưu hóa cho các thiết bị màn hình cảm ứng và điện thoại di động (hiện đã

có trong phiên bản alpha, đã phát hành vào tháng 2 năm 2011).
 Tương thích: Hầu hết các trình duyệt hiện nay, điều hỗ trợ và hiển thị tốt các
control của DHTMLX như: Safari, Internet Explorer, Mozilla Firefox, Opera, và
Chrome.
II. Các Control trong DHTMLX:
 Các bước để đưa các control của DHTMLX vào trang Web:
Như đã đề cập ở trên DHTMLX là một thư viện JavaScript và để sử dụng
được thư viện này cần:
Cần phải có gói thư viện DHTMLX gói này có thể tải miễn phí từ địa chỉ:
/>7.zip
Gói giao diện này thực ra chỉ là file JavaScript touchui.js chứa toàn bộ các
control đã được định nghĩa và file CSS touchui.css để hiển thị nội dung của các
control được định nghĩa trong file JavaScript. Vậy trong trang web muốn dùng các
control của DHTMLX thì cần tham chiếu đúng đường dẫn đến 2 file này.
*. Trong phần head của file HTML thêm đoạn tham chiếu sau:
<link rel="stylesheet" href=" /touchui.css"
type="text/css" media="screen" charset="utf-8">
<script src=" /touchui.js" type="text/javascript"
charset="utf-8"></script>
Trong các đó thuộc tính href và src là đường dẫn tương đối đến 2 file trên.
Tùy theo vị trí của 2 file này mà ta có thể sửa đường dẫn này lại cho phù hợp.
*. Trong phần body của file HTML ta viết các khai báo sử dụng
các control của DHTMLX như sau:
<script type="text/javascript" charset="utf-8">
dhx.ui({
4
\\ Các thông số khởi tạo một control
});
dhx.ui({
\\ Các thông số khởi tạo một control

});
</script>
Các thuộc tính và cách tạo các control DHTMLX sẽ được giới thiệu cụ thể
dưới đây!
 Các loại control trong DHTMLX
Hệ thống các control trong DHTMLX được phân loại như sau:
 View
 Calendar
 Chart
 Dataview
 Iframe
 Form
 Map
 Popup
 Template
 Toolbar
 Video
 Window

1. View (Khung nhìn)
View là một lớp cơ sở cho tất cả các Control, là một Control đặc biệt chỉ để
chứa các control khác. Giống như Panel trong Windows Form. Mỗi Control được
tạo ra điều có một View kèm theo và Control điều nằm trong View này.
Khởi tạo:
5
dhx.ui({
id: "view1",
height:300,
width: 600
});

Các tham số:
Tên tham số Giải thích
container Nơi bố trí của View trong trang web.
css Định nghĩa lại CSS cho View này.
id Tên của View.
gravity Thiết lập tỉ lệ chiều rộng trang, nếu dùng cả thuộc tính
này và thuộc tính height, width thì thuộc tính này vô hiệu.
height Chiều cao, mặc định là -1 nếu thuộc tính này không khai
báo.
width Chiều rộng, mặc định là -1 nếu thuộc tính này không
khai báo.
Trong View có thể chứa một hoặc nhiều Control khác, những control này có
thể được định nghĩa cụ thể ngay trong phần khai báo của View.
2. Calendar (Lịch)
Đây là một Control được kế thừa từ Control View
6
Khởi tạo:
dhx.ui ({view:"calendar",
});
Các tham số:
Tên tham số Giải thích
startOnMonday Ngày đầu tuần là thứ 2, giá trị kiểu true/false.
navigation Nút lệnh điều hướng chọn tháng, giá trị kiểu
true/false.
weekHeader Tiêu đề tuần, giá trị kiểu true/false.
weekNumber Hiển thị số tuần, giá trị kiểu true/false.
skipEmptyWeeks Không hiển thị các ngày của tuần thuộc các
tháng trước và sau, giá trị kiểu true/false. Mặc
định là true.
calendarDateFormat Định dạng ngày, giá trị kiểu string.

calendarMonthHeade
r
Định dạng tiêu đề tháng, giá trị kiểu string.
calendarDayHeader Định dạng tiêu đề tháng, giá trị kiểu string.
cellHeight Chiều cao của 1 ô, giá trị kiểu integer.
width Chiều rộng của Calendar, giá trị kiểu integer.
height Chiều cao của Calendar, giá trị kiểu integer.
3. Windows (Cửa sổ)
Đây là một Control được kế thừa từ Control View, giống như một cửa sổ
trong Windows. Và mọi control khác điều có thể được đặt bên trong Windows.
7
Khởi tạo:
dhx.ui ({view:"window"
});
Các tham số:
Tên tham số Giải thích
head Định nghĩa hiển thị cho phần tiêu đề của cửa
sổ. Thường phần tiêu đề sẽ là một control
toolbar được định nghĩa bên trong tham số
head này.
body Nội dung bên trong cửa sổ (phần thân), ở đây
có thể chứa các loại control khác.
top Vị trí phía trên của cửa sổ, giá trị kiểu
integer.
left Vị trí bên trái của của sổ, giá trị kiểu integer.
move Cho phép hoặc không cho phép cửa sổ di
8
chuyễn được, giá trị kiểu true/false.
width Chiều rộng của cửa sổ, giá trị kiểu integer.
height Chiều cao của cửa sổ, giá trị kiểu integer.

Demo: Thêm control Calendar vào trong Windows:
4. Popup
Popup là một control giống như một Dialog trong Windows, được kế thừa từ
control View.
Khởi tạo:
9
dhx.ui ({view:"popup"
});
Các tham số:
Tên tham số Giải thích
body Định nghĩa hiển thị cho phần nội dung bên
trong Popup.
position Xác định vị trí của Popup so với cửa sổ trình
duyệt. Top/Center. Nếu có tham số top và left
thì tham số này vô hiệu
top Vị trí phía trên của Popup, giá trị kiểu
integer.
left Vị trí bên trái của Popup, giá trị kiểu integer.
5. Toolbar (Thanh công cụ)
Thanh công cụ là một Control có chứa các nút lệnh, nhãn, biểu tượng và
các điều khiển khác được sử dụng cho các lệnh thường dùng trong ứng dụng. Đây là
Control được thừa kế từ View.
Khởi tạo:
dhx.ui ({view:"toolbar"
});
Các tham số:
Tên tham số Giải thích
type Xác định kiểu hiển thị của ToolBar:
10
- MainBar: là thanh công cụ chính cho

Windows hoặc control khác
- SubBar: thanh công cụ con nếu có thanh
MainBar
- BigBar: Thanh công cụ lớn
- BigBarV: Thanh công cụ theo chiều đứng
- BigTabBar: Thanh công cụ dạng Tab
data Định nghĩa các thành phần xuất hiện trên
ToolBar, có thể là các button, label và tất
các control của Form.
height Chiều cao của ToolBar, giá trị kiểu integer.
Demo: Các kiểu ToolBar
Các control thường được định nghĩa trong thuộc tính data của ToolBar:
 Button:
 NextButton:
 PrevButton:
 RoundButton:
11
 Icon:
 ImageButton:
 Input:
 Label:
 Segmented:
 Select:
 TabBar:
6. Form
Là những control dùng tương tác với người dùng như là: Button, Label,
ComboBox, ListBox, RadioButton, CheckBox
Khởi tạo:
12
dhx.ui ({view:"form"

});
Các tham số:
Tên tham số Giải thích
data Định nghĩa hiển thị cho Form. Thường các
thành phần trong Form sẽ là các Button,
ComboBox, Input
scroll Cho phép cuộn Form, giá trị kiểu True/False
Các control thường được định nghĩa trong thuộc tính data của Form:
 FormButton
 Calendar
 CheckBox
 Combo
 Counter
 Radio
 List
 Text
 Toggle
Demo Đặt vé du lịch:
13
7. Chart (Biểu đồ)
Là một Control dùng để vẽ các dạng biểu đồ cơ bản biểu đồ hình tròn, hình
cột v.v. Đây là control kế thừa từ View.
14
Khởi tạo:
dhx.ui ({view:"chart"
});
Các tham số:
15
Tên tham số Giải thích
Thuộc tính bắt buột

container Tên của control chứa biểu đồ. Thường Chart
được đặt trong một control khác như:
Windows, Form, Container
type Loại biểu đồ có thể chọn các loại sau: Bar,
Pie, Area, Line, Pie3D
value Mảng giá trị làm nguồn dữ liệu cho biểu đồ.
Thường được định nghĩa bên ngoài biểu đồ
label Mảng giá trị tương ứng với dữ liệu làm nhãn
cho từng giá trị
Thuộc tính tùy chọn hiển thị
alpha Độ trong suốt của biểu đồ, giá trị nằm trong
khoảng 0-1.
border Ẩn/hiện đường viền cho biểu đồ
color Định nghĩa màu sắc thể hiện cho từng
phần/cột của biểu đồ
width Chiều rộng của từng cột (đối với dạng biều đồ
Bar)
radius Bán kính của các cung tròn (đối với biểu đồ
Pie)
legend Quy định định dạng của phần chú thích dữ
liệu
group Gom nhóm dữ liệu theo các thuộc tính dữ liệu
quy định
sort Sắp xếp dữ liệu theo một nhóm giá trị, tăng
dần/giảm dần
title Tiêu đề của biểu đồ
start Giá trị nhỏ nhất của trục giá trị (Bar)
end Giá trị lớn nhất của trục giá trị (Bar)
16
Ngoài ra Chart còn hỗ trợ các dạng dữ liệu khác như: XML, JSON,

JSARRAY, CSV (một định dạng trong Excel)
8. DataView
DataView là một Control trong đó cho phép hiển thị một bộ sưu tập của các
đối tượng theo một số mẫu người dùng định nghĩa. Giống như DataGridView trong
ứng dụng Windows Form.
Khởi tạo:
dhx.ui ({view:"dataview"
17
});
Các tham số:
Tên tham số Giải thích
url Đường dẫn đến file dữ liệu cần hiển thị lên
DataView
data Định nghĩa đưa dữ liệu hiển thị trên
DataView, thường là chuỗi hoặc đối tượng.
datatype Xác định kiểu dữ liệu nguồn.
template Xác định mẫu trình bài nội dung trong
DataView
scroll Ẩn/hiện thanh cuộn, giá trị True/False.
select Chọn một số cột dữ liệu cần hiển thị, mặc
định hiển thị tất cả.
sort Sắp xếp dữ liệu theo một nhóm giá trị, tăng
dần/giảm dần
type Định dạng hiển thị cho từng dòng dữ liệu
trong DataView
9. Iframe
Là một Control giống như iframe trong HTML cho phép cập nhật động các
thành phần mà không cần tải lại trang Web.
18
Khởi tạo:

dhx.ui ({view:"iframe"
});
Các tham số:
Tên tham số Giải thích
scr Đường dẫn đến file dữ liệu cần hiển thị lên
phần nội dung của Iframe
Ở đây Control Iframe được dùng kết hợp với Toolbar ở trên để làm các nút
điều hướng lựa chọn.
10. Video View
Là Control cho phép chèn file video vào trong trang web, Video View thường
được đặt trong Windows, định nghĩa trong phần body của Windows
19
Khởi tạo:
dhx.ui ({view:"video"
});
Các tham số:
Tên tham số Giải thích
src Đường dẫn đến file file video
autoplay Cho phép Video tự động phát khi mở trang
Web
control Cho phép tùy chọn phát video như: Ngừng,
tạm dừng, chỉnh âm lượng
11. Map View (Bản đồ Google)
Đây là một Control tích hợp để xem bản đồ từ nhà cung cấp Google.
20
Khởi tạo:
<script src=” />sensor=false” type=”text/javascript”></script>
<body>
dhx.ui ({view:"video"
});

</body>
Các tham số:
Tên tham số Giải thích
zoom Xác định độ phóng to của bản đồ
center Vị trí khởi tạo của bản đồ, gồm các tham số
x, y. Vị trí khởi tạo mặc định là: { x:48.724,y:
8.215}
mapType Chọn kiểu xem biểu đồ gồm các kiểu:
o ROADMAP
o SATELLITE
21
o HYBRID
o TERRAIN
Ngoài ra còn rất nhiều loại và dạng control khác cũng có chức năng và giao
diện giống như các control trong ứng dụng Windows Form, hổ trợ xây dựng một
ứng dụng Web hoàn chỉnh!
III. Các phương thức và sự kiện phổ biến cho các control DHTMLX
1 Các hàm phương thức:

attachEvent(type ,functor, id): Dùng sử lý sự kiện dựa vào kiểu sự kiện
(type), tên sự kiện (functor) và control nào (id).

blockEnvent(): Dùng để bắt một sự kiện bất kỳ không biết rỏ kiểu, hàm
này có thể có 1 vài đối số (id).

callEvent(type, params ): Gọi tới một hàm xử lý sự kiện khác với params
là tham số đối tượng, type là kiểu sự kiện.

define(property, value): Thiết lập giá trị cho các thuộc tính của một
control với tương ứng tên thuộc tính (property) bằng với giá trị (value).


destructor(): Hàm hủy đối tượng.

detachEvent(id): Loại bỏ các xử lý sự kiện trên control (id).

getNode(): Trả về tên thẻ HTML chứa control.

getParent(): Trả về id của control chứa control hiện tại.

hasEvent(): Kiểm tra xem một control đã được xử lý sự kiện nào chưa
(type).
2 Các sự kiện:

onitemclick - Khi chọn một item

onbeforecontextmenu - Trước khi hiện ra menu chuột phải.

onitemdblclick - Khi double click chuột.

onmousemove - Khi con trỏ chuột di chuyển đến đối tượng.

onmouseout - Khi con trỏ chuột di chuyển ra khỏi đối tượng.

onmousemoving - Khi con trỏ chuột di chuyển đến và đi trên đối tượng.
22

onkeypress - Khi nhấn phím.

onshow - Khi đối tượng được hiển thị.


onhide - Khi đối tượng ẩn đi.
3 Cách sử dụng các sự kiện và phương thức của DHTMLX
Bắt các sự kiện trên control:
$$(id).attachEvent(type, function(id, key))
{
//Xử lý
}
Dùng hàm thì chỉ việc gọi đến hàm và truyền các tham số.
IV. Nhận xét và kết luận
Nhìn chung framework mà DHTMLX cung cấp là tương đối đầy đủ các
control. Các control này gần giống như ứng dụng Windows Form nên tạo cho người
dùng một cảm giác thân thiện. Tuy nhiên, để có được một ứng dụng Web hoàn
chỉnh từ DHTMLX thì ta cần nắm vững tất cả các thuộc tính phương thức sự kiện
của các control. Bên cạnh đó cần kỹ năng và sử dụng thành thạo ngôn ngữ kịch bản
JavaScript theo cách thức hướng đối tượng.
Điểm đặt biệt của DHTMLX là chúng có thể sử dụng nó như một thành
phần nhỏ của trang Web phục vụ cho một chức năng cần thiết thì trang Web trở nên
sống động và đẹp mắt.
Hiện nay DHTMLX chưa thực sự được nhiều người biết đến bằng các gói
framework khác của JavaScript vì nó không có một trình IDE nào hổ trợ thiết kế
giao diện, việc thiết kế và xử lý hoàn toàn là viết code.
Tài liệu tham khảo
Bài tiểu luận dựa trên nghiên cứu thực tế từ SourceCode của DHTMLX
không sử dụng bất kỳ bài viết của tác giả nào.
(*) Ghi rõ nguồn khi trích dẫn những thông tin trong bài tiểu luận này.
23