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
11



Hình 1.5: Nội dung file license.licx












12

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











13

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

1.2.
1.
T
a
B
T
o
• D
e
các chức
• D
e
năng liên
• D
e
lớp để th
ự
phối hợ
p
.
• Đ
ư
DevExp
r

Ví dụ mi
2.1. T
ạ
a
cần tạo r
a
1: Đưa Co
n
Trong c
ủ
o
olbox vào
e
vExpress.
W
năng của c
á
e
vExpress.
D
quan
t
ới v
i
e
vExpress.
W
ự
c thi một
t

ư
ờng dẫn
n
r
ess 2010.1
\
nh hoạ
ạ
o menu t
u
a
Menu nh
ư
Hình 2.1
n
trol ASP
x
ủ
a sổ Des
i
thẻ div bê
n
14
W
eb.vX.Y
á
c Control
t
D

ata.vX.
Y
i
ệc quản lý
W
eb.ASP
x
t
ập các chứ
n
ơi chứa c
á
\
Compon
e
u
ỳ ý bằng t
a
ư
hình sau:
.1 : Menu
n

x
Menu và
o
i
gn view,
n
trong

.dll: Chứa
t
rong bộ A
S
Y
.dll: Chứa
dữ liệu .
x
Themes.v
X
c năng về t
u
á
c thư việ
n
e
nts\Sourc
e
a
y
n
gang và d
ọ
o
giao diện
kéo thả c
o
các lớ
p
t

h
S
PxMenu.
các lớp th
ự
X
.Y.dll: C
h
u
ỳ chỉnh g
i
n
này: C:\
P
e
s\ DevEx
p
ọ
c
o
mponent
h
ực thi toà
ự
c thi các
h
ứa toàn b
ộ
i
ao diện và

P
rogram
F
p
ress.DLL
ASPxMen
n bộ
chức
ộ
các
cách
F
iles\
u từ


B
2
bê
Hìn
h
2
: Thêm
c
Chọn M
e
ê
n phải của
Hì
n

h
2.1.2 : C
o
c
ác Item c
h
e
nu đang h
i
Menu ở A
S
n
h 2.1.3 : V
à
15
o
ntrol ASP
x
h
o Menu
i
ển thị trên
S
PxMenu
T
à
o chức nă
n
x
Menu trê

n

màn hình,
T
asks ->
C
n
g thêm m
ớ
n
màn hình
D
nhấn thẻ t
h
C
họn mục I
t
ớ
i các Item
D
esign
h
ông minh
t
em
cho Menu
nằm


16

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.
17


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
18

- Để 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


H
W
…

1.
D
B
B
2
T
ạ
>
E
tr

o
H
eight: Chi
ề
W
idth: chiề
u
…
.

2.2. T
ạ
Ta tạo
m
evExpress.
Hìn
h
1: Đưa co
n
2
: Thêm
v
ạ
i thư mụ
c
E
xisting It
e
o
ng Sampl

e
ề
u cao của
M
u

r
ộng của
M
ạ
o menu t
ừ
m
enu
t
ừ da
t
Menu sẽ c
ó
h
2.1.9 : M
e
n
trol ASPx
v
ào DataS
o
c
App_Da
t

e
m…, thê
m
e
Code của
19
M
enu
M
enu
ừ
Data sou
r
t
a Source
X
ó
dạng nh
ư
e
nu có Dat
a
Menu vào
o
urce XM
L
t
a của pro
j
m

vào file
m
DevExpre
s

r
ce xml
X
ML có s
ẵ
ư
sau :
a
Souce là f
i
giao diện
(
L

j
ect, ta nh
ấ
m
enu-stru
c
s
s)
ẵ
n trong s
a

i
le XML
(
Tương
t
ự
n
ấ
n chuột p
h
c
ture.xml
(
a
mple cod
e
n
hư trên)
h
ải, chọn
A
(
file này c
ó
e
của
A
dd-
ó
sẵn

F
i
<
?
<
r



I
s


I
s

I
s

I
s


I
s

I
s




I
s


I
s

I
s
i
le menu_s
t
?
xml vers
i
r
oot>
<menuite
m
</menuit
e
<menuite
m
s

Separato
r
</menuit
e
<menuite
m
s
Separato
r
<menui
t
s
Separato
r
<men
u
s
Separato
r
</me
n
<men
u
s
Separato
r
</me
n
<men
u

</me
n
<men
u
s
Separato
r
</me
n
</menu
i
</menuit
e
<menuite
m
s
Separato
r
</menuit
e
<menuite
m
s
Separato
r
<menui
t
s
Separato
r

Hình 2.1.
t
ructure.x
m
i
on=”1.0
”
m
Text=”
M
e
m>
m
Text=”
S
r
=”on”>
e
m>
m
Text=”
M
r
=”false
”
t
em Text
=
r
=”false

”
u
item
T
e
x
r
=”false
”
n
uitem>
u
item
T
e
x
r
=”false
”
n
uitem>
u
item
T
e
x
n
uitem
>

u
item
T
e
x
r
=”false
”
n
uitem>
i
tem>
e
m>
m
Text=”
S
r
=”1”>
e
m>
m
Text=”
M
r
=”false
”
t
em Text
=

r
=”false
”
20
10 : Thêm
m
m
l này có
n
”

e
ncodin
g
M
enu item
S
eparator
M
enu item
”
>
=
”
M
enu it
e
”
>
x

t=”
M
enu
i
”
>
x
t=”
M
enu
i
”
>
x
t=””
V
al
u

x
t=”
M
enu
i
”
>
S
eparator
M
enu item

”
>
=
”
M
enu it
e
”
>
m
ới file .x
m
n
ội dung n
h
g
=”utf-8”
1” Value
=
on”
V
alu
e
2” Value
=
e
m” Value
=
i
tem 1”

Va
i
tem 2”
Va
u
e=”2”
I
s
S
i
tem 3”
Va
1” Value
=
3” Value
=
e
m” Value
=

m
l vào men
u
h
ư sau:
?>
=
”1” IsS
e
e

=”
S
epar
a
=
”2”
=
”2”
a
lue=”1”
a
lue=”2”
S
eparato
r
a
lue=”3”
=
”
S
epara
t
=
”3”
=
”1”
u
.
e
parator=

”
a
torOn”
r
=”true”>
t
or1”
”
0”>
21

</menuitem>
<menuitem Text=”Menu item” Value=”3”
IsSeparator=”false”>
</menuitem>
</menuitem>
</root>
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 <New Data Souce>

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
22


Hình 2.1.12 : Chọn XML file làm Data Source
Tại màn hình kế, trong mục Data file, ta nhấp vào nút Browse để chọn file

23


Hình 2.1.13 : Chọn đường dẫn file
Trong thư mục App_Data ở màn hình kế, ta chọn file menu_structure.xml ->
OK

Hình 2.1.14 : Chọn file xml đã thêm vào từ đầu

d
Trong p
h
d
ung
t
ừ th
à
Lúc này
h
ần Xpath
e
à
nh phần M
e
H
ta có được
Hìn
h
e
xpression

e
nuItem c
ủ
H
ình 2.1.1
5
Menu
t
ừ v
i
h
2.1.9 : M
e
24
ta gõ vào
“
ủ
a file này l
à

5
: Nhậ
p
và
o
i
ệc khai thá
e
nu có Dat
a

“
root/men
u
à
m các ite
m
o
Xpath ex
p
c datasour
c
a
Souce là f
i
u
item” để
k
m
cho Men
u
p
ression
c
e là file X
M
i
le XML
k
hai thác n
ộ

u
->OK
M
L.
ộ
i

25

2. ASPxNavBar
2.1 Tổng 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 phần trong một NavBar

Hình 2.2.1: Cấu trúc của một Navbar
Group: Gồm có Group Header và Group Content
Group Header
: làm header cho phần nội dung trong Group. Có thể
dùng để mở và đóng group
Group Header Image: hình ảnh hiển trong Group Header
Group Content: Có chứa các Item.
Group Expand Button: nằm bên trong Group Header, dùng để mở
và đóng Group.