Tiểu luận Môn học lập trình web - Chức năng và thành phần của dhtmlx

TRƯỜNG ĐẠI HỌC AN GIANG KHOA KỸ THUẬT – CÔNG NGHỆ – MÔI TRƯỜNG e“f 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 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 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 phải 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 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. 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 hoặc 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ị kiểu integer. left Vị trí bên trái của Popup, giá trị kiểu integer. 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: - 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: Icon: ImageButton: Input: Label: Segmented: Select: TabBar: 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: 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: 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. Khởi tạo: dhx.ui ({view:"chart" }); Các tham số: 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) 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)... 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" }); 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 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. 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. 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 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 Map View (Bản đồ Google) Đây là một Control tích hợp để xem bản đồ từ nhà cung cấp Google. Khởi tạo: dhx.ui ({view:"video" }); 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: ROADMAP SATELLITE HYBRID 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! Các phương thức và sự kiện phổ biến cho các control DHTMLX 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). 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. ü onkeypress - Khi nhấn phím. ü onshow - Khi đối tượng được hiển thị. ü onhide - Khi đối tượng ẩn đi. 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ố. 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.