HƯỚNG DẪN SỬ DỤNG BỘ CÔNG CỤ DEVEXPRESS CHO ASP.NET

1 HƯỚNG DẪN SỬ DỤNG BỘ CÔNG CỤ DEVEXPRESS CHO ASP.NET LƯU HÀNH NỘI BỘ 2010 BIÊN SOẠN : NGUYỄN MAI LĨNH PHÒNG CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC SƯ PHẠM TPHCM 30/7/2010 2 MỤC LỤC Phần 1: Cài đặt bộ công cụ DevExpress cho ASP.NET 4 1. Yêu cầu hệ thống 5 1.1. Framework 5 1.2. IDE 5 1.3. SQL Server 5 2. Các thư mục cần sử dụng 5 3. Cấu hình để sử dụng bộ công cụ này trong Microsoft Visual Studio 7 Phần 2: Hướng dẫn sử dụng một số Control của Component DevExpress ASP.NET 12 1. ASPxMenu 13 1.1. Tổng quan 13 1.1.1. Đặc điểm 13 1.1.2. Sub-Menus 13 1.1.3. Separators 13 1.1.4. Các thư viện liên kết động cần thiết để triển khai ứng dụng 13 1.2. Ví dụ minh hoạ 14 1.2.1. Tạo menu tu ỳ ý bằng tay 14 1.2.2. Tạo menu từ Data source xml 19 2. ASPxNavBar 25 2.1 Tổng quan 25 2.1.1 Đặc điểm 25 2.1.2 Tính năng của Group 26 2.1.3 Các thư viện liên kết động cần thiết để triển khai ứng dụng 27 2.2 Ví dụ minh hoạ 27 3. ASPxTabControl 33 3.1. Tổng quan 33 3.1.1 Đặc điểm 33 3.1.2 Tính năng của tab 33 3 3.1.3 Các thư viện liên kết động cần thiết để triển khai ứng dụng 33 3.2. Ví dụ minh hoạ 34 4. ASPxSchedule 38 4.1. Tổng quan 38 4.1.1. Đặc điểm 38 4.1.2. Các thư viện liên kết động cần thiết để triển khai ứng dụng 43 4.2. Ví dụ minh hoạ 44 5. ASPxGridView 58 5.1. Tổng quan 58 5.1.1. Đặc điểm 58 5.1.2. Các thư viện liên kết động cần thiết để triển khai ứng dụng 59 5.2. Ví dụ minh hoạ 59 5.2.1. T ạo một Control ASPxGridView với Data Source từ Database Access. 59 5.2.2. Tạo lưới trình bày dữ liệu theo dạng Master-Detail 65 6. XtraReport 84 6.1. Tổng quan 84 6.1.1. Đặc điểm 84 6.1.2. Các thư viện liên kết động cần thiết để triển khai ứng dụng 85 6.2. Ví dụ minh hoạ 86 6.2.1. Tạo Web Report đơn giản 86 6.2.2. Tạo Report dạng bảng và thống kê dữ liệu 93 7. ASPxEditors 101 7.1. Tổng quan 101 7.1.1. Đặc điểm 101 7.1.2. Một số component trong bộ ASPxEditors 101 7.1.3. Các thư viện liên kế t động cần thiết để triển khai ứng dụng 102 4 Phần1:CàiđặtbộcôngcụDevExpresschoASP.NET Trong phần này, chúng tôi sẽ trình bày về các yêu cầu cho việc cài đặt bộ công cụ DevExpress cho ASP.NET và cấu hình cần thiết để có thể sử dụng bộ công cụ này. Môi trường thử nghiệm của chúng tôi là Microsoft Visual Studio 2008, .NET Framework 3.5. Phiên bản cài đặt của DevExpress là v10.1 Nội dung: • Yêu cầu hệ thống • Các thư mục cần sử dụng • Cấu hình để sử dụng bộ công cụ này trong Microsoft Visual Studio 5 1. Yêu cầu hệ thống 1.1. Framework • Microsoft .NET Framework 2.0 (hoặc cao hơn). • Microsoft .NET Framework 3.5 Service Pack 1 (hoặc cao hơn). • Microsoft .NET Framework 4.0 1.2. IDE Ta có thể sử dụng các IDE sau để phát triển các ứng dụng ASP.NET, sử dụng các Component DevExpress ASP.NET • Microsoft Visual Studio 2005. • Microsoft Visual Web Developer 2005 Express Edition. • Microsoft Visual Studio 2008. • Microsoft Visual Web Developer 2008 Express Edition. • Microsoft Visual Studio 2010. • Microsoft Visual Web Developer 2010 Express Edition. 1.3. SQL Server Để chạy các demo của Components DevXpress ASP.NET trên máy local, cần phải cài đặt một trong các version sau của Microsoft SQL Express: • Microsoft SQL Server 2005 Express Edition (SP3); • Microsoft SQL Server 2008 Express Edition (SP1). 2. Các thư mục cần sử dụng - Khi cài đặt xong bộ công cụ DevX, các tập tin cần thiết để hoạt động chứa trong thư mục sau: C:\Program Files\DevExpress 2010.1\Components - Đường dẫn chứa các thư viện, các file DLL và XML để triển khai ứng dụng: C:\Program Files\DevExpress 2010.1\Components\Sources\ DevExpress.DLL - Các Sample mẫu chứa trong thư mục sau: C:\Users\Public\Documents\DevExpress 2010.1 Demos\Components - Để xem các demo mẫu, các tài liệu hướng dẫn chi tiết, các video hướ ng dẫn thao tác, ta vào trong DemoCenter như hình dưới: 6 Hình 1.1 Truy cập vào DemoCenter của DevX Đây là giao diện của DemoCenter: 7 Hình 1.2: Giao diện DemoCenter của DevX 3. Cấu hình để sử dụng bộ công cụ này trong Microsoft Visual Studio Khi cài đặt xong bộ Công cụ DevX, ứng dụng sẽ tự thêm các Components vào ô Toolbox của Microsoft Visual Studio. Trong trường hợp trong ô toolbox không xuất hiện các Components của DevX ta có thể chạy một tool kèm theo khi cài đặt DevX đó là tool Toolbox Creator. 8 Hình 1.3: Truy cập công cụ ToolboxCreator của DevX Lưu ý: - Các Control của Component DevExpress ASP.NET bắt đầu bằng cụm ASPx. Ví dụ như ASPxMenu, ASPxGridView, ASPxNavPanel…. - Từ phiên bản v10.1, khi một Web Control được đưa từ Toolbox vào trong màn hình Designer của trang web, một section sẽ được tự động tạo ra bên trong tập tin Web.config. Section này cho phép ta tuỳ chọn cấu hình 9 theo từng chức năng của mỗi control, nội dung section đó như sau: Đồng thời, khi control được kéo thả vào trong trang web thì assemply tương ứng sẽ được tự động đăng ký và thêm vào đầu của trang(xem kiểu Source View) bởi dòng sau, ở đây ta ví dụ thêm vào một control ASPxGridView : <%@ Register Assembly="DevExpress.Web.ASPxGridView.v10.1, Version=10.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %> Tương ứng lúc này, sẽ có một file license.licx được tự động thêm vào project, trong folder Properties và nội dung của file sẽ có dòng tương ứng sau: DevExpress.Web.ASPxGridView.ASPxGridView, DevExpress.Web.ASPxGridView.v10.1 , Version=10.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a t a Nội d a đã thao tá Hìn h d ung file li c c với nhiề u h 1.4: Vị trí c ense.licx c ó u control): 10 file licens e ó dạng như e .licx trong sau(Nội d u project. u ng bên dư ớ ớ i có được k k hi [...]... 1.5: Nội dung file license.licx 11 Phần 2: Hướng dẫn sử dụng một số Control của  Component DevExpress ASP.NET Trong phần này chúng tôi sẽ trình bày các thông tin về một số Control thường sử dụng trong việc thiết kế một website cũng như cách sử dụng các Control này Bên cạnh đó sẽ là những ví dụ minh hoạ cách thao tác với các control trên để tạo ra các ứng dụng đơn gian cũng và nâng cao Nội dung • •... thiết để triển khai ứng dụng • DevExpress. Web.vX.Y.dll: Chứa các lớp thực thi toàn bộ các chức năng của các Control trong bộ ASPxNavBar • DevExpress. Data.vX.Y.dll: Chứa các lớp thực thi các chức năng liên quan tới việc quản lý dữ liệu • DevExpress. Web.ASPxThemes.vX.Y.dll: Chứa toàn bộ các lớp để thực thi một tập các chức năng về tuỳ chỉnh giao diện và cách phối hợp • Đường dẫn nơi chứa các thư viện... đánh dấu từng Item 2.1.2 Tính năng của Group • Dễ dàng chỉnh sửa, thay đổi với trình chỉnh sửa thông minh • Có thể tuỳ chỉnh nút đóng/mở cho riêng từng group hay tất cả các group trong một NavBar • Có thể dùng hình ảnh thay cho nút đóng mở group • Có thể để link cho một Group Header • Group Header có thể vừa có Text và hình ảnh • Có thể không cho người dùng mở một group nào đó tuỳ vào hoàn cảnh • Có thể... quan 2.1.1 Đặc điểm ASPxNavBar cho phép ta tạo ra những thông tin ngắn gọn, đặt trong các ô điều hướng (Navigation bar), tạo nên một giao diện giống như của Microsoft Outlook Sidebar hay Window Explorer Control này cho phép ta thay đổi nhiều tuỳ chọn, và đặt ở bất kỳ nơi nào mong muốn trong trang web Giống như các Control khác của DevExpress ASP.NET, nó hỗ trợ mạnh mẽ công nghệ AJAX và CSS • Các thành... chèn hình ảnh đại diện cho từng tab 3.1.3 Các thư viện liên kết động cần thiết để triển khai ứng dụng • DevExpress. Web.vX.Y.dll: Chứa các lớp thực thi toàn bộ các chức năng của các Control trong bộ ASPxTabControl 33 • De evExpress.D Data.vX.Y Y.dll: Chứa các lớp thự thi các chức ực năng liên quan tới vi quản lý dữ liệu iệc • De evExpress.W Web.ASPx xThemes.vX X.Y.dll: Ch toàn bộ các hứa ộ lớp để thự... cho hiện các đoạn chia ở bất cứ nơi nào mình muốn 1.1.4 Các thư viện liên kết động cần thiết để triển khai ứng dụng 13 • De evExpress.W Web.vX.Y.dll: Chứa các lớp th thi toàn bộ hực các chức năng của cá Control t ác trong bộ AS SPxMenu • De evExpress.D Data.vX.Y Y.dll: Chứa các lớp thự thi các chức ực năng liên quan tới vi quản lý dữ liệu iệc • De evExpress.W Web.ASPx xThemes.vX X.Y.dll: Ch toàn bộ. .. thông qua việc tuỳ chỉnh các thuộc tính hay chỉnh sửa các file CSS o Có thể chèn các hình ảnh cần thiết trước phần Text của từng Item trong menu, có thể tuỳ chỉnh vị trí của Text so với hình ảnh Có thể tuỳ chỉnh việc xử lý sự kiện phía người dùng • Đặc điểm phía người dùng: o Người dùng có thể sử dụng những sự kiện phía người dùng để tuỳ chỉnh một tác vụ cho việc ẩn hoặc hiện Sub-Menu và khi người dùng... hiện chức năng thêm các Group mới Chọn Add an Item để thêm một Group mới, thay đổi thuộc tính Text để đặt tên cho từng Group theo cấu trúc sau Ta cũng lưu ý một số thuộc tính của Group như là NavigateURL: điều hướng, HeaderImage: Hình ảnh đại diện cho Group… 29 Hình 2.2.5 : Thêm các Group cho NavBar B3: Thêm các nội dung bên trong một Group: Chọn Group Wikipedia, trong phần Properties, nhóm Misc->... chức năn thêm mớ các Item cho Menu 15 Lúc này, hiện lên của sổ ASPxMenu MenuItem Editor Chọn Add an Item (Icon đầu tiên bên trái) để thêm một Item mới: Hình 2.1.4 : Thêm Item mới cho Menu Chọn Item vừa mới thêm, trong phần Properties bên phải, chọn Nhóm Misc, chọn mục Text và đổi tên Item thành Home 16 Hình 2.1.5 : Đặt tên cho Item Tương tự như thế, ta tạo ra thêm các Item cho Menu theo cấu trúc như... IsSeparator=”false”> B3: Chọn file menu_structure.xml làm data source cho Menu Từ màn hình Design chọn Menu, chọn thẻ thông minh bên phải của Menu để mở ASPxMenu Tasks Trong mục Choose Data Source tại ô combobox kế bên, nhấp vào và chọn Hình 2.1.11 : Chọn Data Source cho Menu Lúc này hiện lên cửa sổ Data Source Configuration Wizard, chọn XML File -> OK 21 Hình . 4 Phần1:Càiđặtbộcôngcụ DevExpress cho ASP. NET Trong phần này, chúng tôi sẽ trình bày về các yêu cầu cho việc cài đặt bộ công cụ DevExpress cho ASP. NET và cấu hình cần thiết để có. Toolbox Creator. 8 Hình 1.3: Truy cập công cụ ToolboxCreator của DevX Lưu ý: - Các Control của Component DevExpress ASP. NET bắt đầu bằng cụm ASPx. Ví dụ như ASPxMenu, ASPxGridView, ASPxNavPanel… Microsoft .NET Framework 4.0 1.2. IDE Ta có thể sử dụng các IDE sau để phát triển các ứng dụng ASP. NET, sử dụng các Component DevExpress ASP. NET • Microsoft Visual Studio 2005. • Microsoft Visual