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

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.. Hình 2.1.5 : Đặt tên cho Item Tương tự như thế, ta tạo r

Trang 1

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

LƯU HÀNH NỘI BỘ

2010

Trang 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.2 Tính năng của Group 26

3 ASPxTabControl 33

3.1 Tổng quan 33

3.1.2 Tính năng của tab 33

Trang 3

4 ASPxSchedule 38

4.1 Tổng quan 38

5 ASPxGridView 58

5.1 Tổng quan 58

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

Trang 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

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

Trang 6

Hình 1.1 Truy cập vào DemoCenter của DevX Đây là giao diện của DemoCenter:

Trang 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

Trang 8

Hình 1.3: Truy cập công cụ ToolboxCreator của DevX

Trang 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,

DevExpress.Web.ASPxGridView.ASPxGridView, DevExpress.Web.ASPxGridView.v10.1 , Version=10.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a

Trang 10

Nội d

a đã thao tá

Hìnhdung file lic

c với nhiều

h 1.4: Vị trícense.licx có

u control):

file license

ó dạng như

e.licx trong sau(Nội du

project

ung bên dướới có được kkhi

Trang 11

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

Trang 12

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

Trang 13

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

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

Trang 14

• Đư

DevExpr

Ví dụ mi 2.1 Tạ

a cần tạo ra

1: Đưa Con

Trong củoolbox vào

Program F press.DLL

ASPxMen

n bộ chức

ộ các cách

Files\

u từ

Trang 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

Trang 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

Trang 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

Trang 19

H W

…

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 M

u rộng của M

ạo menu từ

menu từ datMenu sẽ có

h 2.1.9 : Me

ntrol ASPx vào DataSo

c App_Dat

em…, thêm

e Code của

Menu Menu

e của

Add-ó sẵn

Trang 20

<?

< r

Is

ile menu_st

? xml versi root >

< menuitem

</ menuite

< menuitem sSeparator

</ menuite

< menuit sSeparator

< menu sSeparator

</ men

< menu sSeparator

</ men

< menu

</ men

< menu sSeparator

</ men

</ menui

</ menuite

r = ” false ” uitem Tex

r = ” false ” nuitem >

uitem Tex

uitem Tex nuitem >

uitem Tex

Trang 21

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

Trang 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

Trang 24

ta gõ vào “

ủa file này là

5 : Nhập vàoiệc khai thá

Trang 25

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ể

Trang 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

Trang 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

Trang 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

Trang 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…

Trang 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

Trang 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:

Trang 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

Trang 33

• Đặ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

Trang 34

Program F press.DLL

chức

ộ các cách

Files\

Trang 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

Trang 36

Hiện lên củ

thêm một T

trúc sau Thình đại diệ

khi hoàn t

Pages Edito

ược màn hìnthước của c

trol TabPa

ộc tính Tex

thuộc tính c

ới các Tabphoát khỏi chuộc tính W

ntrol

y đổi

Trang 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

Trang 38

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