konkanguaru
New Member
Download miễn phí Tiểu luận Chức năng và thành phần của dhtmlx
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 (cách) và sự kiện 22
IV. Nhận xét và kết luận 23
Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí
Tóm tắt nội dung tài liệu:
TRƯỜNG ĐẠI HỌC AN GIANGKHOA KỸ THUẬT – CÔNG NGHỆ – MÔI TRƯỜNG
ef
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 (cách) và sự kiện 22
IV. Nhận xét và kết luận 23
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 hay 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 hay 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 hay Java.
Các Theme: 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.
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.
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 có gói thư viện DHTMLX gói này có thể tải miễn phí từ địa chỉ:
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:
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:
dhx.ui({
\\ 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
});
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
......
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:
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 hay 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.
Calendar (Lịch)
Đây là một Control được kế thừa từ Control View
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.
calendarMonthHeader
Đị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.
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.
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 hay không cho phép cửa sổ di 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:
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:
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ị...