Đăng ký Đăng nhập
Trang chủ Công nghệ thông tin Kỹ thuật lập trình Hướng dẫn sử dụng công cụ devexpress cho asp net...

Tài liệu Hướng dẫn sử dụng công cụ devexpress cho asp net

.PDF
102
794
78

Mô tả:

hướng dẫn sử dụng công cụ_devexpress_cho_asp_net
2010 HƯỚNG DẪN SỬ DỤNG BỘ CÔNG CỤ DEVEXPRESS CHO ASP.NET LƯU HÀNH NỘI BỘ BIÊN SOẠN : NGUYỄN MAI LĨNH 1 THÔNG TIN – ĐẠI HỌC SƯ PHẠM TPHCM PHÒNG CÔNG NGHỆ 30/7/2010 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 3. Ví dụ minh hoạ ................................................................................................. 27 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 2 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 3 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 4 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: • • 2. Microsoft SQL Server 2005 Express Edition (SP3); Microsoft SQL Server 2008 Express Edition (SP1). 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: 5 Hình 1.1 Truy cập vào DemoCenter của DevX Đây là giao diện của DemoCenter: 6 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. 7 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 8 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 9 Hìnhh 1.4: Vị trí file licensee.licx trong project. Nội dung d file liccense.licx cóó dạng như sau(Nội duung bên dướ ới có được khi taa đã thao tác với nhiềuu control): 10 Hình 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 • • • • • • • ASPxMenu : Giới thiệu và minh hoạ ASPxNavBar : Giới thiệu và minh hoạ ASPxTabControl : Giới thiệu và minh hoạ ASPxScheduler : Giới thiệu và minh hoạ ASPxGridView : Giới thiệu và minh hoạ XtraReport : Giới thiệu và minh hoạ ASPxEditors : Giới thiệu 12 1. ASPxMenu 1.1. Tổng quan 1.1.1. Đặc điểm Bộ ASPxMenu gồm hai control đơn lẻ là ASPxMenu và ASPxPopupMenu, bổ trợ cho việc tạo các Menu cố định và cả các Menu ngữ cảnh động. • Đặc điểm Control: o Có thể tạo menu từ Datasource bằng cách khai thác các cấu trúc tập tin XML hay các bảng của Database. o Có thể thiết lập một Menu thu hút một cách dễ dàng chỉ sau vài cái click chuột. o Có thể thay đổi thể hiện tuỳ thuộc vào từng trạng thái, 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 click vào Menu. 1.1.2. Sub-Menus • Control dạng Menu mặc định hiện bóng mờ dưới sub-Menu, ta có thể tắt chức năng đó bằng việc tuỳ chỉnh thuộc tính ASPxMenuBase.ShowSubMenuShadow. Tương như như cho PopupMenu. • Ta cũng có thể tuỳ chỉnh tốc độ mở và đóng các Sub-Menu. • Ta có thể tuỳ chỉnh cho hiện các ký hiệu ở các menu cấp lớn hơn cho biết là có các sub-menu ở đó, mặc định là có hiện. 1.1.3. Separators • Ta có thể thêm các đoạn chia giữa các Item với nhau trong Menu bằng, hoặc các Item cùng một Item cha. Các chức năng này có thể tuỳ chỉnh thông qua thuộc tính ASPxMenuBase.AutoSeparators . Bên cạnh đó, ta có thể tuỳ chỉnh 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 • DeevExpress.W Web.vX.Y.dll: Chứa các lớp thhực thi toàn bộ các chức năng của cáác Control trong t bộ AS SPxMenu. • DeevExpress.D Data.vX.Y Y.dll: Chứa các lớp thự ực thi các chức năng liên quan tới viiệc quản lý dữ liệu . • DeevExpress.W Web.ASPxxThemes.vX X.Y.dll: Chhứa toàn bộộ các lớp để thự ực thi một tập t các chức năng về tuuỳ chỉnh giiao diện và cách phối hợp. • Đư ường dẫn nơi n chứa cáác thư việnn này: C:\P Program Files\ F DevExprress 2010.1\\ Componeents\Sourcees\ DevExp press.DLL 1.2. Ví dụ minh hoạ uỳ ý bằng taay 1.2.1. Tạạo menu tu ư hình sau: Taa cần tạo raa Menu như Hình 2.1.1 : Menu ngang n và dọọc B1: Đưa Con ntrol ASPxxMenu vàoo giao diện Trong củủa sổ Desiign view, kéo thả coomponent ASPxMenu từ To oolbox vào thẻ div bênn trong 14 Hìnhh 2.1.2 : Coontrol ASPxxMenu trênn màn hình Design D B2 2 : Thêm các c Item ch ho Menu Chọn Meenu đang hiiển thị trên màn hình, nhấn thẻ thhông minh nằm bêên phải của Menu ở AS SPxMenu Tasks T -> Chọn C mục Ittem ới các Item cho Menu Hìnnh 2.1.3 : Vàào chức nănng thêm mớ 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ư sau, lưu ý Scanners và Printers là con của Products, nên ta cần chọn chức Năng Add a child Item.(Icon thứ 2 từ trái sang) Hình 2.1.6 : Thêm các Item cho Menu 17 Để thêm Icon trước mỗi Item, trong Properties ta chọn Nhóm Image-> Image->URL rồi chọn Icon cần đặt trước Item đó trong cửa sổ Dialog mở ra. Để điều hướng Menu, trong Properties ta chọn nhóm Misc>NavigateURL rồi chọn trang để điều hướng tới. Chọn OK để hoàn tất việc thêm các Item bằng tay Mặc định Menu mới tạo sẽ nằm ngang, muốn Menu nằm dọc ta chỉ cần set thuộc tính Orientation của Menu thành Vertical B3: Tuỳ chỉnh một số thuộc tính của Menu Tạo các ngăn cách giữa các Item: trong của sổ Design View, chọn Menu, trong cửa sổ Properties, chọn chức năng AutoSeparators -> chọn thuộc tính RootOnly để tạo ra các ngăn cách giữa các Menu. Hình 2.1.7 : tạo ngăn cách giữa các Menu Orientation: chiều của Menu, Horizontal tương ứng với nằm ngang, Vertical tương ứng với nằm dọc. Horizontal align, Vertical Align: canh chỉnh vị trí tương ứng với menu ngang hay dọc. ItemImagePosition: Vị trí của Image so với Item, xếp ngang hàng hoặc trên dưới Hình 2.1.8 : Image nằm trên Item 18 Height: H Chiềều cao của Menu M Width: W chiềuu rộng của Menu M …. … ừ Data sourrce xml 1.2.2. Tạạo menu từ Ta tạo menu m từ datta Source XML X có sẵẵn trong saample codee của DevExpress. Menu sẽ cóó dạng như ư sau : Hìnhh 2.1.9 : Meenu có Dataa Souce là fiile XML B1: Đưa con ntrol ASPxMenu vào giao diện (Tương ( tự như n trên) 2: Thêm vào v DataSoource XML L B2 Tạại thư mụcc App_Datta của projject, ta nhấấn chuột phhải, chọn AddA >E Existing Iteem…, thêm m vào file menu-struc m cture.xml (file ( này cóó sẵn tro ong Samplee Code của DevExpresss) 19 Hình 2.1.10 : Thêm mới m file .xm ml vào menuu. Fiile menu_sttructure.xm ml này có nội n dung nhhư sau: 20
- Xem thêm -

Tài liệu liên quan