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:
?xml versi
ion=”1.0”
” encoding
g=”utf-8” ?>
- Xem thêm -