tai lieu huong dan su dung devx
TRANSCRIPT
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
taNội d
a đã thao tá
Hình
dung file licc với nhiều
h 1.4: Vị trí
cense.licx cóu control):
10
file license
ó dạng như
e.licx trong
sau(Nội du
project.
ung bên dướ
ới có được kkhi
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.Ta
B
To
• Decác chức • Denăng liên • Delớp để thựphối hợp.• ĐưDevExprVí dụ mi
2.1. Tạa cần tạo ra
1: Đưa ConTrong củ
oolbox vào
evExpress.Wnăng của cá
evExpress.Dquan tới vi
evExpress.Wực thi một t ường dẫn nress 2010.1\nh hoạ ạo menu tua Menu như
Hình 2.1
ntrol ASPxủa sổ Desithẻ div bên
14
Web.vX.Yác Control tData.vX.Yiệc quản lý Web.ASPxtập các chứ
nơi chứa cá\ Compone
uỳ ý bằng taư hình sau:
.1 : Menu n
xMenu vàoign view, n trong
.dll: Chứatrong bộ AS
Y.dll: Chứa dữ liệu .
xThemes.vXc năng về tu
ác thư việnents\Source
ay
ngang và dọ
o giao diệnkéo thả co
các lớp thSPxMenu. các lớp thự
X.Y.dll: Chuỳ chỉnh gi
n này: C:\Pes\ DevExp
ọc
omponent
hực thi toà
ực thi các
hứa toàn bộiao diện và
Program Fpress.DLL
ASPxMen
n bộ
chức
ộ các cách
Files\
u từ
B2
bê
Hình
2 : Thêm cChọn Me
ên phải của
Hìn
h 2.1.2 : Co
các Item chenu đang hi
Menu ở AS
nh 2.1.3 : Và
15
ontrol ASPx
ho Menu iển thị trên SPxMenu T
ào chức năn
xMenu trên
màn hình, Tasks -> C
ng thêm mớ
n màn hình D
nhấn thẻ thChọn mục It
ới các Item
Design
hông minh tem
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
HW…
1.
D
B
B2
Tạ>Etro
Height: ChiềWidth: chiều….
2.2. Tạ
Ta tạo mevExpress.
Hình
1: Đưa con
2: Thêm v
ại thư mụcExisting Iteong Sample
ều cao của Mu rộng của M
ạo menu từmenu từ dat
Menu sẽ có
h 2.1.9 : Me
ntrol ASPx
vào DataSo
c App_Datem…, thême Code của
19
Menu Menu
ừ Data sourta Source Xó dạng như
enu có Data
Menu vào
ource XML
ta của projm vào file m
DevExpres
rce xml XML có sẵư sau :
a Souce là fi
giao diện (
L
ject, ta nhấmenu-strucss)
ẵn trong sa
ile XML
(Tương tự n
ấn chuột phcture.xml (
ample code
như trên)
hải, chọn A(file này có
e của
Add-ó sẵn
Fi
<?<r Is Is Is Is Is Is Is Is Is
ile menu_st
?xml versiroot> <menuitem</menuite<menuitem
sSeparator</menuite<menuitem
sSeparator <menuit
sSeparator <menu
sSeparator </men <menu
sSeparator </men <menu </men <menu
sSeparator </men </menui</menuite<menuitem
sSeparator</menuite<menuitem
sSeparator <menuit
sSeparator
Hình 2.1.
tructure.xm
ion=”1.0”
m Text=”Mem> m Text=”Sr=”on”> em> m Text=”Mr=”false”tem Text=r=”false”uitem Texr=”false”nuitem> uitem Texr=”false”nuitem> uitem Texnuitem> uitem Texr=”false”nuitem> item> em> m Text=”Sr=”1”> em> m Text=”Mr=”false”tem Text=r=”false”
20
10 : Thêm m
ml này có n
” encoding
Menu item
Separator
Menu item ”> =”Menu ite”> xt=”Menu i”>
xt=”Menu i”>
xt=”” Valu
xt=”Menu i”>
Separator
Menu item ”> =”Menu ite”>
mới file .xm
nội dung nh
g=”utf-8”
1” Value=
on” Value
2” Value=
em” Value=
item 1” Va
item 2” Va
ue=”2” IsS
item 3” Va
1” Value=
3” Value=
em” Value=
ml vào menu
hư sau:
?>
=”1” IsSe
e=”Separa
=”2”
=”2”
alue=”1”
alue=”2”
Separator
alue=”3”
=”Separat
=”3”
=”1”
u.
eparator=”
atorOn”
r=”true”>
tor1”
”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
dTrong ph
dung từ thà
Lúc này
hần Xpath eành phần Me
H
ta có được
Hình
expressionenuItem củ
Hình 2.1.15
Menu từ vi
h 2.1.9 : Me
24
ta gõ vào “ủa file này là
5 : Nhập vào
iệc khai thá
enu có Data
“root/menuàm các item
o Xpath exp
c datasourc
a Souce là fi
uitem” để km cho Menu
pression
ce là file XM
ile XML
khai thác nộu ->OK
ML.
ộ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.
26
Item: là phần nội dung bên trong Group Content.
Item Image: Hình ảnh đại diện cho Item.
• Đặc điểm của Control
o Có thể tạo ASPxNavBar từ Datasource để tạo nên các group và các item bằng cách khai thác các cấu trúc tập tin XML. o Ta có thể dễ dàng thay đổi giao diện thể hiện bằng việc chỉnh sửa các lớp CSS. o Để có hỗ trợ AJAX ta set thuộc tính EnableCallbacks thành True, lúc này ASPxNavBar chỉ load nội dung của Group được mặc định mở chứ không load hết toàn bộ nội dung của các Group khi hiển thị ở phía người dùng. Khi người dùng nhấn chọn mở các Group, nội dung bên trong sẽ được load qua sự kiện callbacks. Một khi nội dung một group đã được load lên rồi, người dùng có thể mở hoặc đóng tới Group này mà không phải gọi sự kiện callbacks hay postback nữa. o Hình ảnh có thể đi chung với các Items. o Có thể tuỳ chỉnh vị trí người dùng click vào Item để thực thi chức năng của Item đó.(Text, hình ảnh hay cả hai). o Ta có thể tuỳ chỉnh vị trí của hình ảnh so với text của Item.(Trên, dưới, trái, phải). o Ta cũng có thể tô đậm, đá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ể chỉ cần rê chuột tới hoặc click để đóng hoặc mở group.
27
2.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ộ 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 này: C:\Program Files\ DevExpress 2010.1\ Components\Sources\ DevExpress.DLL
2.2 Ví dụ minh hoạ
Ta cần tạo ra NavBar như hình sau:
Hình 2.2.2 : APSxNavbar
B1: Đưa control ASPxNavBar vào giao diện
28
Trong của sổ Design view, kéo thả component ASPxNavBar từ Toolbox vào thẻ div bên trong
Hình 2.2.3 : Control ASPxNavBar trên màn hình Design
B2: Thêm các Group trên NavBar
Chọn ASPxNavBar1 trên màn hình Design, chọn thẻ thông minh bên phải ->chọn Groups , hiện lên cửa sổ ASPxNavBar Groups Editor
29
Hình 2.2.4 : màn hình thực 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…
30
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-> mục Items chọn vào nút browse bên cạnh (Collection). Hiện lên của sổ ASPxNavBar Items Editor. Ở đây là ta đang thực hiện việc tuỳ chỉnh các Item bên trong Group Wikipedia.
31
Hình 2.2.6 : Tuỳ chỉnh nội dung bên trong một Group
Chọn Add an Item để thêm một Item mới. Ở đây ta chú ý các thuộc tính Text:Để đặt tên Item, NavigateURL: Điều hướng, Image: hình ảnh đại diện cho Item. Tạo Các Item như sau:
32
Hình 2.2.7 : Các Items bên trong một Group
Làm tương tự đối với Group Search, Lưu ý thuộc tính ItemImagePosition để định vị trí của Text so với hình ảnh đại diện. Chọn OK để tắt cửa sổ ASPxNavBar Groups Editor. Hoàn tất việc tuỳ chỉnh nội dung của NavBar
33
3. ASPxTabControl 3.1. Tổng quan
3.1.1 Đặc điểm
Bộ ASPxTabControl bao gồm 2 thành phần nhỏ, giúp ta tạo nên các tab cho trang web của mình. Có thể dùng thành phần APSxTabControl chỉ để thể hiện các Tab hoặc dùng ASPxPageControl để tạo các tab cùng với nội dung bên trong của từng tab. Cả 2 thành phần này đều được hỗ trợ AJAX qua phương thức Callbacks.
• Đặc điểm của Control o Các templates có thể xác định cho từng tab trong cả trạng thái kích hoạt hay không kích hoạt. o Có thể thay đổi giao diện, sự thể hiện của từng thành phần một cách trực tiếp qua các thuộc tính hoặc qua CSS. o Nhiều định dạng phong phú, dễ dàng chọn và thay đổi. o Hỗ trợ hai cách để mở một tab: click chuột hoặc chi rê chuột lên trên tab. o Để có hỗ trợ AJAX ta set thuộc tính EnableCallbacks thành True, lúc này ASPxPageControl chỉ load nội dung của tab được mặc định mở chứ không load hết toàn bộ nội dung của các tab khi hiển thị ở phía người dùng. Khi người dùng nhấn chọn mở các tab, nội dung bên trong sẽ được load qua sự kiện callbacks. Một khi nội dung một tab đã được load lên rồi, người dùng có thể mở hoặc đóng tab này mà không phải gọi sự kiện callbacks hay postbacks nữa.
3.1.2 Tính năng của tab • 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 khoảng cách giữa các tab. • Dễ dàng tuỳ chỉnh vị trí của các tab. • Có thể 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.
3.2. Ta tạo r
• Denăng liên • Delớp để thựphối hợp.• ĐưDevExpr
Ví dụ mira Tab có h
evExpress.Dquan tới vi
evExpress.Wực thi một t ường dẫn nress 2010.1\
nh hoạ hình như sau
Hình
34
Data.vX.Yiệc quản lý Web.ASPxtập các chứ
nơi chứa cá\ Compone
u:
2.3.1 : ASP
Y.dll: Chứa dữ liệu .
xThemes.vXc năng về tu
ác thư việnents\Source
PxTabCont
các lớp thự
X.Y.dll: Chuỳ chỉnh gi
n này: C:\Pes\ DevExp
trol
ực thi các
hứa toàn bộiao diện và
Program Fpress.DLL
chức
ộ các cách
Files\
35
B1: Đưa control ASPxNavBar vào giao diện Trong của sổ Design view, kéo thả component ASPxPageControl từ
Toolbox vào thẻ div bên trong
Hình 2.3.2 : Control ASPxPageControl trên màn hình Design
B2: Thêm các tabpage
Chọn ASPxPageControl1 , Nhấn thẻ thông minh bên phải bên phải của Control để mở ASPxPageControl Tasks -> Chọn mục Tabpages để thêm các Tab mới
Hình 2.3.3: Chọn tabpages để thêm mới các tab
Lúc này Item để theo cấu để chèn h
Sau kTabPTa đưkích t
Hiện lên củthêm một Ttrúc sau. T
hình đại diệ
khi hoàn tPages Editoược màn hìnthước của c
Hình 2.3
ủa sổ ASPxTab mới: thTa cũng lưuện cho từng
Hình 2.3
ất, Chọn Oor nh như sau,các tab
.5 : Các tab
36
xPageConthay đổi thuu ý một số tg tab.
3.4 : Tạo m
OK để th
, thay đổi th
bpage đã tạo
trol TabPaộc tính Texthuộc tính c
ới các Tabp
hoát khỏi c
huộc tính W
o trên màn
ages Editorxt để đặt têncủa Tab nh
page
cửa sổ ASP
Width và He
hình Design
r. Chọn Adn cho từng
hư là TabIm
PxPageCon
eight để thay
n
dd an Tab
mage
ntrol
y đổi
37
B3: Tuỳ chỉnh nội dung bên trong từng tab
Bên trong từng tab, ta có thêm các nội dung tuỳ ý cũng bằng cách kéo thả, ở đây ta thử thêm vào các hình ảnh:
Hình 2.3.6 : Tuỳ chỉnh nội dung bên trong từng tabpage
Ta cũng có thể thêm các control như ASPxGridView vào nội dung bên trong tab. Thao tác với GridView bên trong này tương tự như ASPxGridView bình thường.(Xem thêm về control ASPxGridView)
Lưu ý: để mỗi lần load trang chỉ load nội dung của tab mặc định ta phải kích hoạt AJAX bằng cách chọn ASPxPageControl-> set thuộc tính EnableCallBacks=True.
38
4. ASPxScheduler 4.1. Tổng quan
4.1.1. Đặc điểm
ASPxScheduler giúp tạo ra ứng dụng web giống ứng dụng Calendar của Microsoft Outlook. Ta có thể tạo các sự kiện (Appointment), các tài nguyên(Resource) tương ứng theo ngày, theo tuần hay tháng, di chuyển qua lại giữa các ngày. Control này còn có hỗ trợ AJAX thông qua sự kiện callbacks.
Bộ ASPxScheduler có rất nhiều thành phần trong đó có Scheduler và Date Navigator, cho phép thực hiện nhiều tác vụ đến dữ liệu. Dưới đây là một sô tính năng chính của ASPxScheduler:
• Những tính năng của ASP.NET o Tương thích với nhiều trình duyệt: Internet Explorer 5.5 +, Mozilla Firefox, Netscape 7.2+, Opera 8+, Safari.. o Hỗ trợ AJAX: ta có thể cập nhật nội dung của Control thông qua phương thức callbacks, không cần thiết phải load lại toàn bộ trang. o Tương tác với người dùng rất đa dạng. o Hỗ trợ Cookies: cho phép người viếng thăm trang web và thiết lập các chính sách riêng tư về lập lịch.
• Những chế độ xem (5 trong 1) o Day View: xem chi tiết các Appointment trong một ngày cụ thể.
39
Hình 2.4.1 : Xem scheduler dạng Day View
o Work Week View: Thể hiện các Appointment trong các ngày làm việc một tuần cụ thể hoặc nhiều tuần.
Hình 2.4.2 : Xem Scheduler dạng Work Week View
o xá
o thôso dù
Week Vc định.
Hình 2.4.3Month
ông tin các với các ki
ùng có thể lê
40
View: Thể
3 : Xem Schh View: Th
Appointmeiểu hiển thên những kế
hiện các A
heduler dạnhể hiện cácent hiển thịị kia. Tuy ế hoạch dài
Appointment
ng Week Vi Appointmị theo thángnhiên nó c
i hạn.
t trong một
iew ment theo thg ít chi tiết cho phép n
tuần
háng, nhất
người
Ho gia
Hình 2.4.4: Timeli
an biểu.
41
Xem Scheine View: T
duler dạng Thể hiện cá
Month Vieác Appointm
ew. ments theo
thời
42
Hình 2.4.5 : xem Scheduler dạng Timeline
• Khai thác dữ liệu o Khai thác từ Database: Các công việc thực hiện có thể được truy xuất và lưu trong database. o Khai thác các trường tuỳ chọn cho vào Appointment: Ta có thể tuỳ chọn hiển thị thông tin của từng trường cụ thể lên Appointment.
• Vấn đề Việt hoá Scheduler: o Khi thực hiện kéo thả Control ASPxScheduler vào trang web, một loạt các Template dạng UserControl được tạo ra, mỗi control tương ứng với một form chức năng bên trong một ASPxScheduler. Mặc định hiển thị trên Scheduler là tiếng Anh, do đó để hiển thị tiếng việt toàn bộ Scheduler và những form chức năng thì ta vào từng control và đổi tên các thành phần hiển thị trong đó sang tiếng Việt bằng cách thay đổi thuộc tính Display Text của từng thành phần. Ta xem ví dụ dưới đây là form để thêm một Appointment mới trong Scheduler
43
Hình 2.4.6: Form thêm mới hay chỉnh sửa một Appoinment.
Ta dễ dàng thay đổi thuộc tính Text của các Label hay button thành tiếng Việt.
4.1.2. 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ộ ASPxScheduler. • 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 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. • DevExpress.Web.ASPxEditors.vX.Y.dll: Chứa các lớp để thực thi các chức năng để chỉnh sửa dữ liệu trên Scheduler. • DevExpress.Web.ASPxScheduler.vX.Y.dll: Chứa các Control ASPxScheduler, ASPxSchedulerStorage, ASPxDateNavigator, cùng nhiều Control khác nữa trong bộ ASPxScheduler. • DevExpress.XtraScheduler.vX.Y.Core.dll: chứa các lớp cơ bản để thực thi các chức năng chính của bộ ASPxXtraScheduler và ASPxScheduler • Đường dẫn nơi chứa các thư viện này: C:\Program Files\ DevExpress 2010.1\ Components\Sources\ DevExpress.DLL
44
4.2. Ví dụ minh hoạ Ta tạo ra Scheduler như hình sau:
Hình 2.4.7: ASPxScheduler
B1: Đưa control ASPxNavBar vào giao diện
Trong của sổ Design view, kéo thả component ASPxScheduler từ Toolbox vào thẻ div bên trong. Lúc này sẽ có một số Templates được tự động thêm vào project
45
Hình 2.4.8 : Các Template đi kèm với Control ASPxScheduler
Nhấn Close để thoát cửa sổ này.
Lúc này trong box Solution ta sẽ thấy sẽ có thêm một folder mới là DevExpress, bên trong là folder ASPxSchedulerForm, bên trong folder này là các Template vừa được thêm vào Project. Lưu ý là các Template này là để ta thao tác với Scheduler, nếu xoá đi bất kỳ một Template nào cũng gây ra lỗi cho ứng dụng.
46
Hình 2.4.9: ASPxScheduler trên màn hình Design View
Control ASPxScheduler này có các chể độ xem các ghi chú theo ngày(Day), theo tuần(Work Week), theo tháng(Month) và Timeline cho các công việc này. Khi muốn thêm một ghi chú mới hay thực hiện một tác vụ nào đó ta chỉ việc click chuột phải vào ngày, hoặc giờ trong ngày…
Ta cũng có thể cài đặt chi tiết thời gian của một ngày theo các mức 60 phút, 30 phút.. đến 5 phút.
47
Hình 2.4.10 : Scheduler khi chạy
Giả sử Khi chọn thêm mới một Appointment mới trong một ngày, sẽ hiện lên một form sau
Hình 2.4.11 : Màn hình thêm mới một Appointment
Điền vào các nội dung trong form rồi nhấn OK để thêm một Appointment mới.
Tuy nhiên để có thể thực hiện việc thêm một Appointment mới thành công, ta cần tạo ra datasource để lưu trữ những thông tin này.
B2: Thêm và cấu hình Data Source
Ta sửsẵn t
Thêm
TronDesinhấn
ử dụng Dattrong thư m
m database
Hìn
ng ô Toolboign view. Đn chọn thẻ th
tabase Carmục cài đặt c
CarsDB.m
nh 2.4.12: T
ox, nhóm DĐổi tên thhông minh
48
sDB.mdb đcủa DevX.
mdb vào fol
Thêm vào D
Data, kéo thành DataSvà chọn Co
để khai thác
der App_D
Data Source
thả AccessDSourceAppofigure Dat
c dữ liệu. D
Data của Pro
e CarsDB.m
DataSourcep. Chọn Dta Source.
Database nà
oject:
mdb
e vào màn ataSourceA
ày có
hình App,
49
Hình 2.4.13: Cấu hình Data Source
Ta lựa chọn DataSource là CarsDB.mdb tương ứng. Nhấn Next.
Trong ô Configure the Select Statement, Chọn bảng CarScheduling và nhấn chọn các trường cần hiển thị như sau:
50
Hình 2.4.14 : Cấu hình chọn table và các trường tương ứng
Click chọn nút Advance và nhấn vào tuỳ chọn: Generate Insert, Update, and Delete statements
51
Hình 2.4.14 : Tuỳ chọn nâng cao tạo ra các câu lệnh SQL
Nhấn chọn OK ->Next-> Finish để hoàn tất việc cấu hình DataSourceApp. Tạo thêm một AccessDataSource đặt tên là DataSourceRes, cũng cấu hình chọn Database CarsDB.mdb, phần chọn bảng ta chọn bảng Cars và chọn các trường hiển thị như sau:
Hình 2.4.15 : Cấu hình chọn table và các trường tương ứng
52
B3: Tham chiếu Data Source vào ASPxScheduler tương ứng.
Chọn ASPxScheduler1, nhấp chọn thẻ thông minh, trong phần Appointments Data Source chọn DataSourceApp, trong phần Resources Data Source chọn DataSourceRes.
Hình 2.4.16 :Tham chiếu các Data Source vào ASPxScheduler
Set thuộc tính Storage.Appointments.AutoReload = true.
Thuộc tính Storage.Appointments.Mappings ta điều chỉnh như sau:
53
Hình 2.4.17 : Mapping các trường của Appointment
Thuộc tính Storage.Resources.Mappings ta điều chỉnh như sau:
54
Hình 2.4.18 : Mapping các trường của Resource
Để có thể thêm được record mới trong cơ sở dữ liệu, cụ thể là để lưu một Appoinment mới, trường ID phải là duy nhất, vì trường này ta để chế độ tăng tự động(Auto Indentity), để thực hiện được điều này ta sử dụng câu lệnh SQL “SELECT @@IDENTITY”. Chọn DataSourceApp, trong thuộc tính InsertQuery ta thực hiện như sau:
55
Hình2.4.19 : Tuỳ chỉnh Insert Query
Nhấn OK để hoàn tất việc cấu hình và tham chiếu các Data Source vào ASPxScheduler.
B4: Xây dựng các phương thức để xử lý các sự kiện thêm và chỉnh sửa các Appointment.
Trong file source code, ta xử lý các sự kiện như sau:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data.Sql; using System.Data.OleDb; using DevExpress.Web.ASPxScheduler;
56
using DevExpress.Web.ASPxScheduler.Controls; using DevExpress.XtraScheduler; namespace Sample1 { public partial class ASPxSchedule : System.Web.UI.Page { private int lastInsertedAppointmentId; protected void Page_Load(object sender, EventArgs e) { } protected void ASPxScheduler1_AppointmentRowInserting(object sender, ASPxSchedulerDataInsertingEventArgs e) { e.NewValues.Remove("ID"); } protected void SqlDataSourceApp_Inserted(object sender, SqlDataSourceStatusEventArgs e) { OleDbConnection connection = (OleDbConnection)e.Command.Connection; using (OleDbCommand cmd = new OleDbCommand("SELECT @@IDENTITY", connection)) { this.lastInsertedAppointmentId = (int)cmd.ExecuteScalar(); } } protected void ASPxScheduler1_AppointmentRowInserted(object sender, ASPxSchedulerDataInsertedEventArgs e) { e.KeyFieldValue = this.lastInsertedAppointmentId; }
57
protected void ASPxScheduler1_AppointmentsInserted(object sender, PersistentObjectsEventArgs e) { int count = e.Objects.Count; System.Diagnostics.Debug.Assert(count == 1); Appointment apt = (Appointment)e.Objects[0]; ASPxSchedulerStorage storage = (ASPxSchedulerStorage)sender; storage.SetAppointmentId(apt, lastInsertedAppointmentId); } } }
Biên dịch và chạy chương trình, lúc này ta đã có thể thêm mới một Appointment mới cũng như chỉnh sửa thông tin của một Appointment nào đó.
58
5. ASPxGridView 5.1. Tổng quan
5.1.1. Đặc điểm ASPxGridView là một Control rất mạnh, hỗ trợ việc hiển thị dữ liệu
dạng lưới, cho phép ta tạo ra các trường hiển thị bằng tay hoặc thông qua Database.
• Đặc tính chung o Tương thích với nhiều trình duyệt: Internet Explorer 5.5 +, Mozilla Firefox, Netscape 7.2+, Opera 8+, Safari.. o Hỗ trợ AJAX: ta có thể cập nhật nội dung của Control thông qua phương thức callbacks, không cần thiết phải load lại toàn bộ trang. o Tương tác với người dùng rất đa dạng. o Xuất dữ liệu: hỗ trợ xuất dữ liệu ra định dạng PDF, XLS và RTF o Hỗ trợ SEO.(Search Engine Optimization): tối ưu hoá công cụ tìm kiếm.
• Khai thác dữ liệu: o Hỗ trợ khai thác dữ liệu từ nhiều hệ quản trị csdl khác nhau: Microsoft Access, SQL Server o Cho phép hiển thị dữ liệu dạng Master-Detail với cấu trúc đa dạng. o Có 2 chế độ chỉnh sửa: từ Form chỉnh sửa hay chỉnh ngay trên hàng. o Chức thực dòng dữ liệu và chỉ ra lỗi: ASPxGridView cho phép ta xác thực bằng tay các dòng đã chỉnh sửa, và hiển thị thông báo lỗi đối với trường không hợp lệ. o Tự động gom nhóm dữ liệu: Cho phép người dùng gom nhóm dữ liệu, không giới hạn số cột. o Tóm tắt dữ liệu đầy đủ: Cho phép hiển thị thông tin thống kê như MIN, MAX, AVG, SUM và COUNT trực tiếp trên lưới. o Cho phép lọc dữ liệu và hiển thị Text: Với mỗi cột ta có thể chỉ định cách dữ liệu được sắp xếp theo giá trị hiển thị của nó. Ngoài ra ta có thể cho phép lọc dữ liệu bất kỳ bằng cách gõ vào giá trị muốn lọc trực tiếp vào ô textbox. o Cho phép lựa chọn nhiều dòng cùng một lúc.
59
• Tuỳ biến giao diện hiển thị: o Giao diện: Ta có thể tuỳ chỉnh giao diện của lứoi bằng
cách chọn các định dạng hiển thị khác nhau, chỉ sau vài cái click chuột. o Hỗ trợ các Template: với mỗi thành phần bên trong
ASPxGridView, ta có thể hoàn toàn tuỳ biến việc hiển thị thông qua các control HTML hay bên phía máy chủ. o Hỗ trợ CSS đầy đủ.
5.1.2. Các thư viện liên kết động cần thiết để triển khai ứng dụng
• DevExpress.Web.ASPxGridView.vX.Y.dll: Chứa các lớp thực thi các chức năng của control ASPxGridView. • 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 liên quan tới bộ ASPxExperience(Menu, NavBar, TabControl) • 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 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. • DevExpress.Web.ASPxEditors.vX.Y.dll: Chứa các lớp để thực thi các chức năng để chỉnh sửa dữ liệu trên lưới. • Đường dẫn nơi chứa các thư viện này: C:\Program Files\ DevExpress 2010.1\ Components\Sources\ DevExpress.DLL
5.2. Ví dụ minh hoạ 5.2.1. Tạo một Control ASPxGridView với Data Source từ
Database Access. Ta tạo một GridView như hình sau:
B
TrTo
B2
Hình
1: Đưa con
rong của soolbox vào
Hình 2.5.2
2: Thêm và
h 2.5.1 : ví
ntrol ASPx
sổ Designthẻ div bên
: Control A
à Cấu hình
60
dụ Minh H
NavBar và
view, kéo n trong
ASPxGridVi
h Data Sour
oạ ASPxGr
ào giao diện
thả comp
iew trên mà
rce
ridView
n
ponent ASP
àn hình Des
PxGridView
sign
w từ
Thta D
Trtro
ND
hêm file datthêm file NevExpress)
rong Toolbong.
hấn vào thata Source
tabase của ANwind.mdb
Hình 2.5.
ox, nhóm D
hẻ thông mie
Hình 2.5.4
61
Access vào (file này có
.3 : Thêm D
Data, kéo th
inh của Ac
4 : Màn hìn
o Trong Appó sẵn trong
Data Source
hả AccessD
ccessDataSo
nh Cấu hình
p_Data của Sample Co
e vào projec
DataSource
ource1-> c
h Data Sourc
Project, ở đode của
ct
vào thẻ div
chọn Confi
ce
đây
v bên
igure
62
Nhấn Browse để chọn database, chọn database Nwind.mdb mà ta đã thêm:
Hình 2.5.5 : Màn hình chọn Database
Nhấn OK ->Next, xuất hiện màn hình để chọn table cần hiển thi, ở đây ta chọn tables Customers, chọn vào checkbox * để chọn toàn bộ các trường.
63
Hình 2.5.6 : Chọn table và các trường cần hiển thị
Nhấn next để tiếp tục, ở màn hình kế nhấn Test Query để kiểm tra truy vấn.
64
Hình 2.5.7 : Màn hình kiểm tra truy vấn
Nhấn Finish để kết thúc việc cấu hình AccessDataSource.
B3: Tham chiếu Data Source vào ASPxGridView
Tại màn hình Design View, chọn ASPxGridView1 mà ta thêm ở trên, nhấn chọn thẻ thông minh ở cạnh phải -> Phần Choose Data Source ta chọn AccessDataSource1.
NG
5.
H
hìn trong Arid như là:
• Show • Show
theo từ• Enabl• Enabl• Enabl
lưới • Enabl• Enabl
2.2. TạTa tạo lư
ình 2.5.8 : C
ASPxGridV
Pager: HiệGroup Paừng trường le Editing: le Insertingle Selection
le Delete: Cles filtering
ạo lưới trìnưới như hìn
65
Chọn Data
iew Tasks t
ện số trang anel: hiện P
bằng cách Cho phép c
g: Cho Phépn: Cho phé
Cho phép xog: Cho phép
nh bày dữ lnh sau:
Source cho
ta thấy có th
của lưới. Panel bên tr
kéo thả vàochỉnh sửa dp thêm mớiép chọn m
oá một hoặcp tạo bộ lọc
iệu theo dạ
o Grid
hêm một số
rên Grid để o Panel đó. dữ liệu ngayi record vào
một hoặc nh
c nhiều recoc theo từng
ạng Master
ố chức năng
sắp xếp dữ
y trên lưới o table trên hiều record
ord trên lướtrường.
r-Detail
g cho
ữ liệu
lưới. trên
ới
66
Hình 2.5.9 : Lưới dạng Master-Detail
Ta sử dụng Database Nwind.mdb để khai thác dữ liệu. B1: Thêm và cấu hình Data Source Tạo ra một AccessDataSoure đặt tên là dsCategories, ta cấu hình cho hiển thị toàn bộ các trường của bảng Categories trong Database Nwind.mdb. Tạo thêm một AccessDataSource đặt tên là dsProducts, trong phần cấu hình datasource này, ở bước chọn tables, ta chọn tables Products tương ứng. Tại bước này, ta nhấn vào nút WHERE để thêm mới một session
67
Hình 2.5.10 : Chọn table và các trường tương ứng.
Trong cửa sổ Add WHERE Clause, Mục Collumn chọn CategoryID, Mục Operator chọn “=”, mục Source chọn Session, trong textbox Session field ta nhập vào CategoryID, nhấn nút Add để thêm mới Session
68
Hình 2.5.11: Thêm mới một Session
Nhấn Ok ->Next-> Finish hoàn tất việc cấu hình datasoure dsProducts
B2: Tạo các ASPxGridView Master và Detail và cấu hình tham chiếu Data Source. Trong Design View, kéo thả 2 Component ASPxGridView vào trong thẻ div. Chọn DataSource của ASPxGridView1 là dsCategories, chọn DataSource cho ASPxGridView2 là dsProducts.
Mtiế
H
Mở thể thônếp thẻ thông
Hình 2.5.12
ng minh củg mình của
69
: GridView
ủa ASPxGrlưới này, tr
w và DataSo
ridView1 crong phần D
ource tương
chọn Edit TDisplay chọ
g ứng
Templates.ọn Detail R
. Mở Row
Kth
B3Chtađể
éo ASPxGrhấy kết quả
Hìn3: Cấu hìnhọn ASPxG
ab Events, ể xử lý sự k
Hình 2ridView2 như sau:
h 2.5.14 : Anh và xử lý GridView2Double clic
kiện này.
70
2.5.13 : Editthả vào Det
ASPxGridVsự kiện , gán thuộcck vào phư
t Templatetail Row củ
View2 trong
tính IsDetaơng thức B
ủa ASPxGr
g ASPxGrid
ailGrid là TeforePerfo
ridView1. T
dView1
True. TronormDataSe
Ta
ng elect
71
Hình 2.5.15 : Xử lý sự kiện BeforePerformDataSelect
Trong cửa sổ Code, ta xử lý phương thức BeforePerformDataSelect như sau:
protected void ASPxGridView2_BeforePerformDataSelect(object sender, EventArgs e)
{
72
Session["CategoryID"]=(sender as DevExpress.Web. ASPxGridView.ASPxGridView ). GetMasterRowKeyValue () ;
} Quay trở lại màn hình Design View, chọn thẻ thông minh của ASPxGridView1 , chọn End Template Editing
Hình 2.5.16 : Màn hình kết thúc việc lồng DetailRow
Gán thuộc tính ASPxGridView1.ShowDetailRow = True;
Hình 2.5.17 : Tuỳ chọn thuộc tính
Biên dịch và chạy chương trình, ta được giao diện như sau:
73
Hình 2.5.18 : GridView dạng Master
Nhấn chọn dấu “+” ở đầu mỗi dòng ta được giao diện như sau:
Hình 2.5.19 : GridView dạng Master-Detail
74
5.2.3. Tạo Contextmenu trong grid Trong ví dụ này, ta sẽ lồng menu popup vào gridview bằng cách mỗi lần nhấn chuột phải vào một dòng nhất định, sẽ xuất hiện một menu ngữ cảnh để thực hiện các thao tác chỉnh sửa dữ liệu trên dòng hoặc xoá dòng đó khỏi lưới. Bên cạnh đó, có thêm chức năng tạo mới một dòng dữ liệu khác, giống như hình dưới:
Hình 2.5.20 : Minh hoạ menu popup trong lưới.
Khi chọn New, sẽ xuất hiện những ô edit box cho ta thêm mới dữ liệu của một dòng:
Hình 2.5.21: thêm mới một dòng
(Lưu ý: trường EmployeeID là tăng tự động)
75
Khi chọn Edit, ta có thể chỉnh sửa dữ liệu của dòng đó:
Hình 2.5.22 : Trước khi chỉnh sửa dữ liệu của dòng có
EmployeeID=1
Ví dụ Ta thay đổi Last name thành Davolio1, nhấn chọn Update, dữ liệu sẽ được cập nhật như sau:
Hình 2.5.23 : Sau khi chỉnh sửa dữ liệu của dòng có EmployeeID=1
Khi chọn Delete, dữ liệu của dòng được chọn sẽ bị xoá.
76
Để thực hiện được , ta cần phải có sự hỗ trợ của JavaScript, bằng cách xử lý sự kiện ở phía người dùng. Ta thực hiện các bước như sau: B1: Thêm mới một Popup Menu Kéo thả control ASPxPopupMenu vào trong màn hình Design View, và thêm các Item: New, Edit, Delete. Ta thao tác giống như một menu bình thường. Lưu ý, ngoài trường Text là tên hiển thị các Item, ta cần thêm vào trường Name để có thể thao tác với các Item đó.
Hình 2.5.24 : Thuộc tính Name của item
Ta set thuộc tính ClientInstanceName cho PopupMenu, thuộc tính này dùng để gọi tới khi ta cần thao tác với PopupMenu trong JavaScript:
77
Hình 2.5.25: thuộc tính ClientInstanceName của PopupMenu
Nhấn chọn thẻ thông mình của PopupMenu, chọn vào Client-Side Events
78
Hình 2.5.26: Thẻ chức năng của Popup Menu
Trong Cửa sổ ASPxPopupMenu Client-Side Events Editor mở sau đó, chọn ItemClick ở cột bên trái và thêm vào sự kiện GridMenuItemClick(e);. Ta sẽ xử lý sự kiện này trong JavaScript.
79
Hình 2.5.27 : Thêm mới phương thức trong sự kiện ItemClick
B2: Thêm mới một DataSource Ta thêm mới mộ AccessDataSource, chọn database Nwind.mdb, chọn bảng hiển thị là Employees, các trường cần hiển thị là EmployeeID, Last Name, First Name.
80
Hình 2.5.28 : Chọn bảng và các trường hiển thị
Lưu ý, chọn tuỳ chọn Generate INSERT, UPDATE, and DELETE statements trong phần Advanced
Hình 2.5.29 : Tuỳ chọn nâng cao
81
B3: Thêm mới một lưới Ta thêm một control ASPxGridView vào màn hình DesignView, chọn DataSource là data source ta mới vừa tạo. Ta set thuộc tính ClientInstanceName cho GridView:
Hình 2.5.30: thuộc tính ClientInstanceName của PopupMenu
Nhấn chọn thẻ thông mình của lưới, chọn vào Client-Side Events
82
Hình 2.5.31 : chọn xử lý sự kiện ở phía ngừoi dùng
Trong Cửa sổ ASPxGridView Client-Side Events Editor mở sau đó, chọn Context Menu ở cột bên trái và thêm vào phương thức OnContextMenu(e);. Ta sẽ xử lý sự kiện này trong JavaScript.
83
Hình 2.5.32: thêm mới phương thức trong sự kiện ContextMenu
B4: Xử lý các sự kiện bằng JavaScript. Ta thêm một đoạn JavaScript sau để xử lý các sự kiện mở một Menu popup khi nhấn chuột phải vào một dòng và sự kiện click vào từng Item của Menu.
<script type="text/javascript"> var editingVisibleIndex; function OnContextMenu(e) { //if the object is not a row return //editingVisibleIndex = visibleIndex; //ASPxPopupMenu1.ShowAtElement(e); editingVisibleIndex = e.index; if (e.objectType == 'row') {
pmRowMenu.ShowAtPos(ASPxClientUtils.GetEventX(e.htmlEvent), ASPxClientUtils.GetEventY(e.htmlEvent));
} } function GridMenuItemClick(e) { if (e.item == null) return; var name = e.item.name;
84
if (name == "New") ASPxGridView1.AddNewRow(); if (name == "Edit") ASPxGridView1.StartEditRow(editingVisibleIndex); if (name == "Delete") ASPxGridView1.DeleteRow(editingVisibleIndex); } </script>
Như vậy ta đã hoàn thành các thao tác để xử lý sự kiện tạo Menu trong lưới, và xử lý các sự kiện thêm, xoá, sửa dữ liệu. Biên dịch và chạy, ta được lưới dữ liệu như hình dưới:
6. XtraReport 6.1. Tổng quan
6.1.1. Đặc điểm Phần report trên môi trường Web cũng sử dụng Component XtraReport như môi trường Window. Nó chứa công cụ để tạo Report từ dữ liệu phức hợp, chế độ xem trước, in và xuất report ra nhiều định dạng khác nhau. • Đặc tính chung:
o XtraReport hoạt động được trong cả ứng dụng Winform và Webform. Ta có thể chỉ cần tạo một Report và sử dụng ở 2 môi trường khác nhau. o Tích hợp đầy đủ Visual Studio .Net: Report Designer tích hợp. Hỗ trợ ch độ xem trước dạng HTML và dạng in, khi có thay đổi trong thiết kế report, ta không cần biên dịch lại toàn bộ ứng dụng mà vẫn có thể cập nhật được chế độ xem trước kịp thời. o XtraReports làm việc với toàn bộ đối tượng dữ liệu được hỗ trợ bởi Visual Studio .NET như : chuẩn .NET Data Objects, Ilist Interface, XML Data Objects. o Cho phép lọc dữ liệu dưới với nhiều cấp: Data adapter, Data set, Data views. o Cho phép gom nhóm dữ liệu: gom nhóm đa tầng và lồng nhau. o Hỗ trợ nhiều control chuẩn như: Label, Line, BarCode, CheckBox, PageInfo, Panel, PictureBox, PageBreak, Table, ZipCode, etc. o Hỗ trợ biểu đồ thông qua control XtraCharts.
85
o SubReports: Ta có thể dùng lại các lớp của XtraReport vào ứng dụng qua control Subreport. Chỉ cần thả vào control Subreport, set thuộc tính nguồn Report, ta có 2 report từ một nguồn. o Hỗ trợ tóm tắt: dễ dàng tạo tóm tắt cho một textbox hay một ô trong bảng. Chỉ cần set 2 thuộc tính Summary posiotion(group hay report) và Summary type(Avg, min, max, sum, count…) o Hỗ trợ phong phú các định dạng xuất ra: PDF, HTML, MHT, RTF, TXT, CSV và MS Exel. Có thể xuất report ra định dạng hình ảnh như: BMP, EMF, GIF, JPEG, PNG, TIFF, WMF. o Importing: có thể nạp lại report cũ của mình tử MS Access, Crystal Reports, Data Dynamics Active Reports vào XtraReport. o Tìm kiếm ở chế độ xem trước: giúp cho người dùng có thể tìm những đoạn text mong muốn. o Hỗ trợ thừa kế, Bookmark, Watermarks.
6.1.2. Các thư viện liên kết động cần thiết để triển khai ứng dụng
• DevExpress.Utils.v10.1.dll: Chứa các lớp tiện ích cơ bản. • DevExpress.Data.v10.1.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.Charts.v10.1.Core.dll : Chỉ cần nếu report có ít nhất một control XRChart. • DevExpress.XtraCharts.v10.1.dll: Chỉ cần nếu report có ít nhất một control XRChart. • DevExpress.RichEdit.v10.1.Core.dll: Thực thi các chức năng cơ bản của việc in ra các định dạng phong phú. • DevExpress.XtraRichEdit.v10.1.dll: Hỗ trợ việc xuất ra các định dạng khác nhau. • DevExpress.XtraReports.v10.1.dll: Chứa các lớp của bộ XtraReport. • 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 liên quan tới bộ ASPxExperience(Menu, NavBar, TabControl)
86
• DevExpress.Web.ASPxThemes.vX.Y.dll: Chứa 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. • DevExpress.XtraReports.v10.1.Web.dll: Chứa các lớp của control ReportViewer và ReportToolbar. • Đường dẫn nơi chứa các thư viện này: C:\Program Files\ DevExpress 2010.1\ Components\Sources\ DevExpress.DLL
6.2. Ví dụ minh hoạ 6.2.1. Tạo Web Report đơn giản
Ta sẽ tạo Report như hình sau :
B
Hì
1: Thêm m
nh 2.6.1 : V
mới một Rep
87
Ví dụ minh
port
h hoạ Web RReport
88
Nhấn chuột phải vào Project, Add New Item. Trong màn hình list các Item chọn XtraReport Class V10.1 như trong hình dưới
Hình 2.6.2 : Thêm mới một XtraReport Class
Lúc này, trong project có thêm class XtraReport1. Ta lưu ý add thêm Reference DevExpress.XtraReports và DevExpress.Utils.
B2: Thêm mới và cấu một DataSet Nhấn chuột phải vào Project, Add New Item. Trong màn hình list các Item chọn DataSet như trong hình dưới:
89
Hình 2.6.3 : Thêm mới một DataSet
Trong màn hình DataSet Designer mở sau đó, kéo thả bảng Categories của Database Nwind.mdb từ ô Server Explorer vào:
Hình 2.6.4 : Cấu hình DataSet
B3: Thiết kế Report
Giờ ta sang cửa sổ designer của Report, nhấn vào thẻ thông minh, trong phần DataSource , chọn DataSet1 vừa tạo:
90
Hình 2.6.5 : Chọn DataSet cho Report
Trên màn hình Designer của Report, nhấn chuột phải chọn Insert Band -> ReportHeader để thêm Header cho Report. Trong phần Detail ta kéo thả các trường CategoryName, Description và Picture từ fieldlist vào theo mẫu sau:
Hình 2.6.6 : Thiết kế Report
Preview trước report ta được kết quả sau:
91
Hình 2.6.7 : Chế độ Preview của Report
Ta đã hoàn thành việc thiết kế một report giờ cần phải cho nó hiển thị lên website
B4: Hiển thị Report trên Website và cấu hình report
Ta quay lại trang cần hiển thị Report, kéo thả Component ReportToolbar và ReportViewer từ ô Toolbox vào thẻ div bên trong:
Hình 2.6.8 : tạo ReportToolbar và ReportViewer
Để liên kết ReportToolbar1 và ReportViewer1 với nhau, gán giá trị cho thuộc tính ReportViewer của ReportToolbar1 là ReportViewer1
92
Hình 2.6.9 : tạo liên kết giữa ReportToolbar và ReportViewer
Để tham chiếu tới Report mà ta đã tạo ở trên, gán trị cho thuộc tính Report của ReportViewer1 là XtraReport1
Hình 2.6.10 : Tham chiếu ReportViewer tới Report đã tạo.
Biên dịch
6.
h và chạy ch
2.2. TạTa sẽ tạo
hương trình
Hình ạo Report dmột Report
93
h, ta được g
2.6.11 : Giadạng bảng t dạng bảng
giao diện sa
ao diện Wevà thống k
g và thống k
au:
b Report kê dữ liệu kê dữ liệu nnhư hình sauu:
Lưnhcá BB2Ở B3ThReRe
Hình 2
ưu ý rằng hững dạng ác thao tác c
1: Thêm m2: Thêm mđây ta chọn
3: Thiết kếhêm hai ceport. Để teports, chọn
2.6.12 : Rep
trong các không giốncòn lại đều
mới một Repmới và cấu m
n table Prodế Report control XRthực hiện vn item XRT
94
port dạng b
qui trình tạng nhau , ctương tự.
port (Như một DataSducts của d
RTable vàoviệc này, troTable, tiếp
bảng và thốn
ạo mới và hỉ khác nha
trên) et(Như trêatabase Nw
o phần Pagong ô Tool đó trong k
ng kê dữ liệ
cho hiển thau ở khâu t
ên) wind.mdb
geHeader lbox, phần khu vực Pa
ệu
hị những rethiết kế Re
và Detail các controlgeHeader
eport eport,
vào l của nhấn
vàdứ
Lúở raĐPrtrê
à giữ chuột ứoi:
Hình
úc này ta sẽphần PageH
a. ể khai thácroductID, ên các ô tươ
trái đồng th
h 2.6.13 : T
ẽ thấy có haHeader và
c dữ liệu từProductNaơng ứng đã
95
hời rê con t
hêm contro
ai control làXRTable2
ừ các trườngame, Unitsđược tạo ra
trỏ chuột xu
ol XRTable
à XRTable12 tương ứng
g, ta đơn gisOnOrdera sẵn
uống phần
vào Report
1 tương ứngg với phần
iản chỉ cần từ cửa sổ
Detail như
t
g với phần Detail đượ
kéo các trưField List
hình
table ợc tạo
ường t lên
B4Ở OTrR
V
Hình 2
4: Hiển thịđây ta sẽ
n Orders rong cửa seportFoote
à từ FieldL
2.6.14 : Kéo
ị thống kê ccho hiển th
sổ Designer như hình
Hình 2
List, kéo thả
96
o thả các trư
của một trưhị tính tổng
Report, nhh dưới
2.6.15 : Thê
ả trường Un
ường dữ liệ
ường bên dg giá trị các
hấn chuột
êm vào Rep
nitsOnOde
ệu vào Repo
dưới Reporc records củ
phải rồi t
portFooter
r vào phần
ort
rt ủa trường U
thêm vào
ReportFoo
Units
phần
oter.
Nta
Tatro
hấn chọn thclick chọn
a điều chỉnhong đó • Boun• Summ
phươn• Form
dạng
hẻ thông minút duyệt n
Hình
h các thông
nd Field: semary functng thức thố
mat Stringsố nguyên.
97
inh, và tronnằm bên ph
h 2.6.16: Tu
g số trong p
t trường dữtion: set là ng kê khác : ta gõ vào
ng danh sáchhải để hiển t
uỳ chỉnh Su
phàn Summ
ữ liệu là UniSum. Chúnhư Count
o Total Uni
h thao tác, pthị Summa
ummary
mary Editor
itsOnOrderú ý ta có tht, Min,Max,its: {0} để
phần Summary Editor
r như hình
r. hể thực hiện, Average…hiện thị gi
mary
trên,
n các …
iá trị
98
• Ignore null values: check vào ô này, để những record có giá trị null sẽ không ảnh hưởng tới kết quả thống kê.
• Phần Summary Running: Lựa chọn Report, để việc tính tổng sẽ tính toàn bộ report(trong trường hợp có nhiều trang).
Chọn OK để hoàn tất, rồi xem kết quả bằng cách chọn Preview
Hình 2.6.17: Report dạng bảng ở chế độ Preview
Để hiện thị Border ngăn cách giữa các ô, set thuộc tính XRTable.Border=All
B5trBi
DUR
5: Tạo Rerên) iên dịch ta s
o có nhiềunitsOnOrdeportToolB
eportToolb
sẽ được Re
Hình 2.6.
u Record nder ở traBar (Ở đây
99
bar và Rep
port có kết
18 : Report
nên ta sẽ khang đầu
y là trang 4)
portView
quả như sa
t ở trang đầu
hông thấy ptiên, ta
, ta sẽ được
để hiển th
au:
u tiên
phần tính tchọn tra
c kết qua nh
hị Report(
tổng của trưang cuối hư sau:
(Như
ường trên
Hìnhh 2.6.19 : R
100
Report ở tranng cuối với
thống kê tínnh tổng
101
7. ASPxEditors 7.1. Tổng quan
7.1.1. Đặc điểm • Đây là một bộ những control chuẩn của DevX dùng để thao tác, gắn với với các kiểu Control khác, gồm các controls như: Label, CompoBox, Listbox, Image, Memo… • Số lượng Control đa dạng: Hiện Có hơn 20 controls trong bộ ASPxEditors và sẽ mở rộng thêm nữa. Ta dễ dàng tìm được một Control để phục vụ nhu cầu của mình. • Gắn sẵn bộ máy xác thực(Validation mechanism): mặc dù các controls đều có hỗ trợ bộ máy xác thực chuẩn, tuy nhiên nhà sản xuất cũng đã gắn thêm chức năng xác thực. • Hỗ trợ SharePoint.
7.1.2. Một số component trong bộ ASPxEditors
Logo Control Mô tả ASPxImage Control hiển thị hình ảnh
ASPxButton Control để tạo các Button ASPxButtonEdit Một trình chỉnh sửa nội dung cho phép
hiển thị các nút bên trong một edit box ASPxCalendar Control để tạo lịch
ASPxCheckBox Control check box, cho phép chọn nhiều
ASPxRadioButton Control radio button, cho phép chọn một.
ASPxComboBox Control Chọn các item từ danh sách sổ xuống
ASPxLabel Control hiển thị label
ASPxHyperLink Control hiển thị và chỉnh sửa các siêu liên kết
ASPxListBox Control hiển thị list các item.
ASPxMemo Control hiển thị và chỉnh sửa nội dung nhiều dòng
ASPxTextBox Control hiển thị nội dung một dòng
ASPxTimeEdit Control hiển thị và chỉnh sửa giá trị thời gian.
102
7.1.3. Các thư viện liên kết động cần thiết để triển khai ứng dụng • DevExpress.Web.ASPxEditors.vX.Y.dll: Chứa các lớp thực thi các chức năng của các control trong bộ ASPxEditors. • 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 liên quan tới bộ ASPxExperience(Menu, NavBar, TabControl) • DevExpress.Data.v10.1.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 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.