2010

HNG DN S DNG B CNG C DEVEXPRESS CHO ASP.NET

LU HNH NI B

BIN SON : NGUYN MAI LNH 1 THNG TIN I HC S PHM TPHCM PHNG CNG NGH 30/7/2010

MC LC
Phn 1: Ci t b cng c DevExpress cho ASP.NET ...................................................... 4 1. Yu cu h thng ...................................................................................................... 5 1.1. Framework .......................................................................................................... 5 1.2. IDE...................................................................................................................... 5 1.3. SQL Server ......................................................................................................... 5 2. 3. 1. Cc th mc cn s dng ......................................................................................... 5 Cu hnh s dng b cng c ny trong Microsoft Visual Studio ...................... 7 ASPxMenu ............................................................................................................. 13 1.1. Tng quan ......................................................................................................... 13 1.1.1. c im .................................................................................................... 13 1.1.2. Sub-Menus ................................................................................................. 13 1.1.3. Separators................................................................................................... 13 1.1.4. Cc th vin lin kt ng cn thit trin khai ng dng ..................... 13 1.2. V d minh ho ................................................................................................. 14 1.2.1. To menu tu bng tay............................................................................ 14 1.2.2. To menu t Data source xml .................................................................... 19 2. 2.1 ASPxNavBar .......................................................................................................... 25 Tng quan ............................................................................................................ 25 2.1.1 2.1.2 2.1.3 2.2 3. c im .................................................................................................... 25 Tnh nng ca Group ................................................................................. 26 Cc th vin lin kt ng cn thit trin khai ng dng ..................... 27

Phn 2: Hng dn s dng mt s Control ca Component DevExpress ASP.NET ..... 12

V d minh ho ................................................................................................. 27

ASPxTabControl .................................................................................................... 33 3.1. Tng quan ......................................................................................................... 33 3.1.1 3.1.2 c im .................................................................................................... 33 Tnh nng ca tab ....................................................................................... 33
2

3.1.3 4.

Cc th vin lin kt ng cn thit trin khai ng dng ..................... 33

3.2. V d minh ho ................................................................................................. 34 ASPxSchedule ........................................................................................................ 38 4.1. Tng quan ......................................................................................................... 38 4.1.1. c im .................................................................................................... 38 4.1.2. Cc th vin lin kt ng cn thit trin khai ng dng ..................... 43 4.2. V d minh ho ................................................................................................. 44 5. ASPxGridView ....................................................................................................... 58 5.1. Tng quan ......................................................................................................... 58 5.1.1. c im .................................................................................................... 58 5.1.2. Cc th vin lin kt ng cn thit trin khai ng dng ..................... 59 5.2. V d minh ho ................................................................................................. 59 5.2.1. To mt Control ASPxGridView vi Data Source t Database Access. .. 59 5.2.2. To li trnh by d liu theo dng Master-Detail .................................. 65 6. XtraReport .............................................................................................................. 84 6.1. Tng quan ......................................................................................................... 84 6.1.1. c im .................................................................................................... 84 6.1.2. Cc th vin lin kt ng cn thit trin khai ng dng ..................... 85 6.2. V d minh ho ................................................................................................. 86 6.2.1. To Web Report n gin .......................................................................... 86 6.2.2. To Report dng bng v thng k d liu ................................................ 93 7. ASPxEditors ......................................................................................................... 101 7.1. Tng quan ....................................................................................................... 101 7.1.1. c im .................................................................................................. 101 7.1.2. Mt s component trong b ASPxEditors ............................................... 101 7.1.3. Cc th vin lin kt ng cn thit trin khai ng dng ................... 102

Phn1:CitbcngcDevExpresschoASP.NET
Trong phn ny, chng ti s trnh by v cc yu cu cho vic ci t b cng c DevExpress cho ASP.NET v cu hnh cn thit c th s dng b cng c ny. Mi trng th nghim ca chng ti l Microsoft Visual Studio 2008, .NET Framework 3.5. Phin bn ci t ca DevExpress l v10.1

Ni dung: Yu cu h thng Cc th mc cn s dng Cu hnh s dng b cng c ny trong Microsoft Visual Studio

1.

Yu cu h thng 1.1. Framework Microsoft .NET Framework 2.0 (hoc cao hn). Microsoft .NET Framework 3.5 Service Pack 1 (hoc cao hn). Microsoft .NET Framework 4.0 1.2. IDE Ta c th s dng cc IDE sau pht trin cc ng dng ASP.NET, s dng cc 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

chy cc demo ca Components DevXpress ASP.NET trn my local, cn phi ci t mt trong cc version sau ca Microsoft SQL Express: 2. Microsoft SQL Server 2005 Express Edition (SP3); Microsoft SQL Server 2008 Express Edition (SP1).

Cc th mc cn s dng Khi ci t xong b cng c DevX, cc tp tin cn thit hot ng cha trong th mc sau: C:\Program Files\DevExpress 2010.1\Components ng dn cha cc th vin, cc file DLL v XML trin khai ng dng: C:\Program Files\DevExpress 2010.1\Components\Sources\ DevExpress.DLL Cc Sample mu cha trong th mc sau: C:\Users\Public\Documents\DevExpress 2010.1 Demos\Components xem cc demo mu, cc ti liu hng dn chi tit, cc video hng dn thao tc, ta vo trong DemoCenter nh hnh di:

Hnh 1.1 Truy cp vo DemoCenter ca DevX y l giao din ca DemoCenter:

Hnh 1.2: Giao din DemoCenter ca DevX 3. Cu hnh s dng b cng c ny trong Microsoft Visual Studio

Khi ci t xong b Cng c DevX, ng dng s t thm cc Components vo Toolbox ca Microsoft Visual Studio. Trong trng hp trong toolbox khng xut hin cc Components ca DevX ta c th chy mt tool km theo khi ci t DevX l tool Toolbox Creator.

Hnh 1.3: Truy cp cng c ToolboxCreator ca DevX Lu : Cc Control ca Component DevExpress ASP.NET bt u bng cm ASPx. V d nh ASPxMenu, ASPxGridView, ASPxNavPanel. T phin bn v10.1, khi mt Web Control c a t Toolbox vo trong mn hnh Designer ca trang web, mt section s c t ng to ra bn trong tp tin Web.config. Section ny cho php ta tu chn cu hnh

theo tng chc nng ca mi control, ni dung section nh sau:

ng thi, khi control c ko th vo trong trang web th assemply tng ng s c t ng ng k v thm vo u ca trang(xem kiu Source View) bi dng sau, y ta v d thm vo mt control ASPxGridView :
<%@ Register Assembly="DevExpress.Web.ASPxGridView.v10.1, Version=10.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>

Tng ng lc ny, s c mt file license.licx c t ng thm vo project, trong folder Properties v ni dung ca file s c dng tng ng sau:
DevExpress.Web.ASPxGridView.ASPxGridView, DevExpress.Web.ASPxGridView.v10.1 , Version=10.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a

h 1.4: V tr file license e.licx trong project. Hnh Ni dung d file lic cense.licx c dng nh sau(Ni du ung bn d i c c khi ta a thao tc vi nhiu control):

10

Hnh 1.5: Ni dung file license.licx

11

Phn2:HngdnsdngmtsControlca ComponentDevExpressASP.NET
Trong phn ny chng ti s trnh by cc thng tin v mt s Control thng s dng trong vic thit k mt website cng nh cch s dng cc Control ny. Bn cnh s l nhng v d minh ho cch thao tc vi cc control trn to ra cc ng dng n gian cng v nng cao.

Ni dung ASPxMenu : Gii thiu v minh ho ASPxNavBar : Gii thiu v minh ho ASPxTabControl : Gii thiu v minh ho ASPxScheduler : Gii thiu v minh ho ASPxGridView : Gii thiu v minh ho XtraReport : Gii thiu v minh ho ASPxEditors : Gii thiu

12

1.

ASPxMenu
1.1. Tng quan 1.1.1. c im B ASPxMenu gm hai control n l l ASPxMenu v ASPxPopupMenu, b tr cho vic to cc Menu c nh v c cc Menu ng cnh ng. c im Control: o C th to menu t Datasource bng cch khai thc cc cu trc tp tin XML hay cc bng ca Database. o C th thit lp mt Menu thu ht mt cch d dng ch sau vi ci click chut. o C th thay i th hin tu thuc vo tng trng thi, thng qua vic tu chnh cc thuc tnh hay chnh sa cc file CSS. o C th chn cc hnh nh cn thit trc phn Text ca tng Item trong menu, c th tu chnh v tr ca Text so vi hnh nh. C th tu chnh vic x l s kin pha ngi dng c im pha ngi dng: o Ngi dng c th s dng nhng s kin pha ngi dng tu chnh mt tc v cho vic n hoc hin Sub-Menu v khi ngi dng click vo Menu. 1.1.2. Sub-Menus Control dng Menu mc nh hin bng m di sub-Menu, ta c th tt chc nng bng vic tu chnh thuc tnh ASPxMenuBase.ShowSubMenuShadow. Tng nh nh cho PopupMenu. Ta cng c th tu chnh tc m v ng cc Sub-Menu. Ta c th tu chnh cho hin cc k hiu cc menu cp ln hn cho bit l c cc sub-menu , mc nh l c hin. 1.1.3. Separators Ta c th thm cc on chia gia cc Item vi nhau trong Menu bng, hoc cc Item cng mt Item cha. Cc chc nng ny c th tu chnh thng qua thuc tnh ASPxMenuBase.AutoSeparators . Bn cnh , ta c th tu chnh cho hin cc on chia bt c ni no mnh mun. 1.1.4. Cc th vin lin kt ng cn thit trin khai ng dng
13

 De evExpress.W Web.vX.Y.dll: Cha cc lp th hc thi ton b cc chc nng ca c c Control trong t b AS SPxMenu. De evExpress.D Data.vX.Y Y.dll: Cha cc lp thc thi cc chc nng lin quan ti vi ic qun l d liu . De evExpress.W Web.ASPx xThemes.vX X.Y.dll: Ch ha ton b cc lp thc thi mt tp cc chc nng v tu u chnh gi iao din v cch phi hp. ng dn ni cha c c th vin ny: C:\P Program Files\ F DevExpr ress 2010.1\ \ Compone ents\Source es\ DevExp press.DLL 1.2. V d minh ho u bng ta ay 1.2.1. To menu tu a cn to ra a Menu nh hnh sau: Ta

Hnh 2.1.1 : Menu ngang n v dc B1: a Con ntrol ASPx xMenu vo o giao din Trong ca s Desi ign view, ko th co omponent ASPxMenu t To oolbox vo th div bn n trong

14

Hnh h 2.1.2 : Co ontrol ASPx xMenu trn n mn hnh Design D B2 2 : Thm cc c Item ch ho Menu Chn Me enu ang hi in th trn mn hnh, nhn th th hng minh nm b n phi ca Menu AS SPxMenu Tasks T -> Ch C n mc It tem

nh 2.1.3 : V o chc nng n thm mi cc Item cho Menu Hn

15

Lc ny, hin ln ca s ASPxMenu MenuItem Editor. Chn Add an Item (Icon u tin bn tri) thm mt Item mi:

Hnh 2.1.4 : Thm Item mi cho Menu Chn Item va mi thm, trong phn Properties bn phi, chn Nhm Misc, chn mc Text v i tn Item thnh Home.

16

Hnh 2.1.5 : t tn cho Item Tng t nh th, ta to ra thm cc Item cho Menu theo cu trc nh sau, lu Scanners v Printers l con ca Products, nn ta cn chn chc Nng Add a child Item.(Icon th 2 t tri sang)

Hnh 2.1.6 : Thm cc Item cho Menu

17

 thm Icon trc mi Item, trong Properties ta chn Nhm Image-> Image->URL ri chn Icon cn t trc Item trong ca s Dialog m ra. iu hng Menu, trong Properties ta chn nhm Misc>NavigateURL ri chn trang iu hng ti. Chn OK hon tt vic thm cc Item bng tay Mc nh Menu mi to s nm ngang, mun Menu nm dc ta ch cn set thuc tnh Orientation ca Menu thnh Vertical B3: Tu chnh mt s thuc tnh ca Menu To cc ngn cch gia cc Item: trong ca s Design View, chn Menu, trong ca s Properties, chn chc nng AutoSeparators -> chn thuc tnh RootOnly to ra cc ngn cch gia cc Menu.

Hnh 2.1.7 : to ngn cch gia cc Menu Orientation: chiu ca Menu, Horizontal tng ng vi nm ngang, Vertical tng ng vi nm dc. Horizontal align, Vertical Align: canh chnh v tr tng ng vi menu ngang hay dc. ItemImagePosition: V tr ca Image so vi Item, xp ngang hng hoc trn di

Hnh 2.1.8 : Image nm trn Item

18

Height H : Chiu cao ca Menu M Width W : chiu rng ca Menu M .

rce xml 1.2.2. To menu t Data sour Ta to menu m t dat ta Source XML X c sn trong sa ample code e ca DevExpress. Menu s c dng nh sau :

Hnh h 2.1.9 : Me enu c Data a Souce l fi ile XML B1: a con ntrol ASPxMenu vo giao din (T ( ng t nh n trn) 2: Thm vo v DataSo ource XML L B2 Ti th mc App_Dat ta ca proj ject, ta nhn chut ph hi, chn AddA >E Existing Ite em, thm m vo file menu-struc m cture.xml (file ( ny c sn tro ong Sample e Code ca DevExpres ss)

19

Hnh 2.1.10 : Thm mi file .xm ml vo menu u. Fi ile menu_st tructure.xm ml ny c ni dung nh h sau:
<? ?xml versi ion=1.0 encoding g=utf-8 ?> <r root> <menuitem m Text=M Menu item 1 Value= =1 IsSe eparator= 0> </menuite em> <menuitem m Text=S Separator on Value e=Separa atorOn Is sSeparator r=on> </menuite em> <menuitem m Text=M Menu item 2 Value= =2 Is sSeparator r=false > <menuit tem Text= =Menu ite em Value= =2 Is sSeparator r=false > <menu uitem Tex xt=Menu item i 1 Va alue=1 Is sSeparator r=false > </men nuitem> <menu uitem Tex xt=Menu item i 2 Va alue=2 Is sSeparator r=false > </men nuitem> <menu uitem Tex xt= Valu ue=2 IsS Separator r=true> </men nuitem> <menu uitem Tex xt=Menu item i 3 Va alue=3 Is sSeparator r=false > </men nuitem> </menui item> </menuite em> <menuitem m Text=S Separator 1 Value= =Separat tor1 Is sSeparator r=1> </menuite em> <menuitem m Text=M Menu item 3 Value= =3 Is sSeparator r=false > <menuit tem Text= =Menu ite em Value= =1 Is sSeparator r=false >

20

</menuitem> <menuitem Text=Menu item Value=3 IsSeparator=false> </menuitem> </menuitem> </root>

B3: Chn file menu_structure.xml lm data source cho Menu. T mn hnh Design chn Menu, chn th thng minh bn phi ca Menu m ASPxMenu Tasks. Trong mc Choose Data Source ti combobox k bn, nhp vo v chn <New Data Souce>

Hnh 2.1.11 : Chn Data Source cho Menu Lc ny hin ln ca s Data Source Configuration Wizard, chn XML File -> OK

21

Hnh 2.1.12 : Chn XML file lm Data Source Ti mn hnh k, trong mc Data file, ta nhp vo nt Browse chn file

22

Hnh 2.1.13 : Chn ng dn file Trong th mc App_Data mn hnh k, ta chn file menu_structure.xml -> OK

Hnh 2.1.14 : Chn file xml thm vo t u

23

Trong ph hn Xpath expression e ta g vo root/menu uitem khai k thc ni d dung t th nh phn Me enuItem ca file ny l m cc item m cho Menu u ->OK

H Hnh 2.1.15 5 : Nhp vo o Xpath exp pression Lc ny ta c c Menu t vi ic khai thc datasourc ce l file XM ML.

Hnh h 2.1.9 : Me enu c Data a Souce l fi ile XML

24

2.

ASPxNavBar
2.1 Tng quan 2.1.1 c im ASPxNavBar cho php ta to ra nhng thng tin ngn gn, t trong cc iu hng (Navigation bar), to nn mt giao din ging nh ca Microsoft Outlook Sidebar hay Window Explorer. Control ny cho php ta thay i nhiu tu chn, v t bt k ni no mong mun trong trang web. Ging nh cc Control khc ca DevExpress ASP.NET, n h tr mnh m cng ngh AJAX v CSS. Cc thnh phn trong mt NavBar

Hnh 2.2.1: Cu trc ca mt Navbar Group: Gm c Group Header v Group Content Group Header: lm header cho phn ni dung trong Group. C th dng m v ng group Group Header Image: hnh nh hin trong Group Header Group Content: C cha cc Item. Group Expand Button: nm bn trong Group Header, dng m v ng Group.
25

Item: l phn ni dung bn trong Group Content. Item Image: Hnh nh i din cho Item. c im ca Control o C th to ASPxNavBar t Datasource to nn cc group v cc item bng cch khai thc cc cu trc tp tin XML. o Ta c th d dng thay i giao din th hin bng vic chnh sa cc lp CSS. o c h tr AJAX ta set thuc tnh EnableCallbacks thnh True, lc ny ASPxNavBar ch load ni dung ca Group c mc nh m ch khng load ht ton b ni dung ca cc Group khi hin th pha ngi dng. Khi ngi dng nhn chn m cc Group, ni dung bn trong s c load qua s kin callbacks. Mt khi ni dung mt group c load ln ri, ngi dng c th m hoc ng ti Group ny m khng phi gi s kin callbacks hay postback na. o Hnh nh c th i chung vi cc Items. o C th tu chnh v tr ngi dng click vo Item thc thi chc nng ca Item .(Text, hnh nh hay c hai). o Ta c th tu chnh v tr ca hnh nh so vi text ca Item.(Trn, di, tri, phi). o Ta cng c th t m, nh du tng Item.

2.1.2 Tnh nng ca Group D dng chnh sa, thay i vi trnh chnh sa thng minh. C th tu chnh nt ng/m cho ring tng group hay tt c cc group trong mt NavBar. C th dng hnh nh thay cho nt ng m group. C th link cho mt Group Header. Group Header c th va c Text v hnh nh. C th khng cho ngi dng m mt group no tu vo hon cnh. C th ch cn r chut ti hoc click ng hoc m group.
26

2.1.3 Cc th vin lin kt ng cn thit trin khai ng dng DevExpress.Web.vX.Y.dll: Cha cc lp thc thi ton b cc chc nng ca cc Control trong b ASPxNavBar. DevExpress.Data.vX.Y.dll: Cha cc lp thc thi cc chc nng lin quan ti vic qun l d liu . DevExpress.Web.ASPxThemes.vX.Y.dll: Cha ton b cc lp thc thi mt tp cc chc nng v tu chnh giao din v cch phi hp. ng dn ni cha cc th vin ny: C:\Program Files\ DevExpress 2010.1\ Components\Sources\ DevExpress.DLL 2.2 V d minh ho

Ta cn to ra NavBar nh hnh sau:

Hnh 2.2.2 : APSxNavbar

B1: a control ASPxNavBar vo giao din

27

Trong ca s Design view, ko th component ASPxNavBar t Toolbox vo th div bn trong

Hnh 2.2.3 : Control ASPxNavBar trn mn hnh Design B2: Thm cc Group trn NavBar Chn ASPxNavBar1 trn mn hnh Design, chn th thng minh bn phi ->chn Groups , hin ln ca s ASPxNavBar Groups Editor

28

Hnh 2.2.4 : mn hnh thc hin chc nng thm cc Group mi Chn Add an Item thm mt Group mi, thay i thuc tnh Text t tn cho tng Group theo cu trc sau. Ta cng lu mt s thuc tnh ca Group nh l NavigateURL: iu hng, HeaderImage: Hnh nh i din cho Group

29

Hnh 2.2.5 : Thm cc Group cho NavBar B3: Thm cc ni dung bn trong mt Group: Chn Group Wikipedia, trong phn Properties, nhm Misc-> mc Items chn vo nt browse bn cnh (Collection). Hin ln ca s ASPxNavBar Items Editor. y l ta ang thc hin vic tu chnh cc Item bn trong Group Wikipedia.

30

Hnh 2.2.6 : Tu chnh ni dung bn trong mt Group Chn Add an Item thm mt Item mi. y ta ch cc thuc tnh Text: t tn Item, NavigateURL: iu hng, Image: hnh nh i din cho Item. To Cc Item nh sau:

31

Hnh 2.2.7 : Cc Items bn trong mt Group Lm tng t i vi Group Search, Lu thuc tnh ItemImagePosition nh v tr ca Text so vi hnh nh i din. Chn OK tt ca s ASPxNavBar Groups Editor. Hon tt vic tu chnh ni dung ca NavBar

32

3.

ASPxTabControl
3.1. Tng quan 3.1.1 c im B ASPxTabControl bao gm 2 thnh phn nh, gip ta to nn cc tab cho trang web ca mnh. C th dng thnh phn APSxTabControl ch th hin cc Tab hoc dng ASPxPageControl to cc tab cng vi ni dung bn trong ca tng tab. C 2 thnh phn ny u c h tr AJAX qua phng thc Callbacks. c im ca Control o Cc templates c th xc nh cho tng tab trong c trng thi kch hot hay khng kch hot. C th thay i giao din, s th hin ca tng thnh o phn mt cch trc tip qua cc thuc tnh hoc qua CSS. o Nhiu nh dng phong ph, d dng chn v thay i. o H tr hai cch m mt tab: click chut hoc chi r chut ln trn tab. o c h tr AJAX ta set thuc tnh EnableCallbacks thnh True, lc ny ASPxPageControl ch load ni dung ca tab c mc nh m ch khng load ht ton b ni dung ca cc tab khi hin th pha ngi dng. Khi ngi dng nhn chn m cc tab, ni dung bn trong s c load qua s kin callbacks. Mt khi ni dung mt tab c load ln ri, ngi dng c th m hoc ng tab ny m khng phi gi s kin callbacks hay postbacks na. Tnh nng ca tab D dng chnh sa, thay i vi trnh chnh sa thng minh. C th tu chnh khong cch gia cc tab. D dng tu chnh v tr ca cc tab. C th chn hnh nh i din cho tng tab.

3.1.2

3.1.3

Cc th vin lin kt ng cn thit trin khai ng dng DevExpress.Web.vX.Y.dll: Cha cc lp thc thi ton b cc chc nng ca cc Control trong b ASPxTabControl.
33

 De evExpress.D Data.vX.Y Y.dll: Cha cc lp thc thi cc chc nng lin quan ti vi ic qun l d liu . De evExpress.W Web.ASPx xThemes.vX X.Y.dll: Ch ha ton b cc lp thc thi mt tp cc chc nng v tu u chnh gi iao din v cch phi hp. ng dn ni cha c c th vin ny: C:\P Program Files\ F DevExpr ress 2010.1\ \ Compone ents\Source es\ DevExp press.DLL

V d minh ho 3.2. r Tab c hnh h nh sau u: Ta to ra

Hnh 2.3.1 : ASP PxTabCont trol

34

B1: a control ASPxNavBar vo giao din Trong ca s Design view, ko th component ASPxPageControl t Toolbox vo th div bn trong

Hnh 2.3.2 : Control ASPxPageControl trn mn hnh Design B2: Thm cc tabpage Chn ASPxPageControl1 , Nhn th thng minh bn phi bn phi ca Control m ASPxPageControl Tasks -> Chn mc Tabpages thm cc Tab mi

Hnh 2.3.3: Chn tabpages thm mi cc tab

35

Lc ny Hin ln ca s ASPx xPageCont trol TabPa ages Editor r. Chn Ad dd an T mi: th hay i thuc tnh Tex xt t tn n cho tng Tab Item thm mt Tab T cng lu mt s thu t c tnh ca Tab nh h l TabIm mage theo cu trc sau. Ta h i din cho tng g tab. chn hnh

Hnh 2.3 3.4 : To mi cc Tabp page Sau khi k hon tt, Chn OK O th hot khi ca s ASP PxPageCon ntrol TabP Pages Edito or Ta c mn hn nh nh sau, , thay i th huc tnh Width W v He eight thay y i kch th t c ca cc c tab

Hnh 2.3.5 : Cc tab bpage to trn mn hnh Design n

36

B3: Tu chnh ni dung bn trong tng tab Bn trong tng tab, ta c thm cc ni dung tu cng bng cch ko th, y ta th thm vo cc hnh nh:

Hnh 2.3.6 : Tu chnh ni dung bn trong tng tabpage Ta cng c th thm cc control nh ASPxGridView vo ni dung bn trong tab. Thao tc vi GridView bn trong ny tng t nh ASPxGridView bnh thng.(Xem thm v control ASPxGridView) Lu : mi ln load trang ch load ni dung ca tab mc nh ta phi kch hot AJAX bng cch chn ASPxPageControl-> set thuc tnh EnableCallBacks=True.

37

4.

ASPxScheduler
4.1. Tng quan 4.1.1. c im ASPxScheduler gip to ra ng dng web ging ng dng Calendar ca Microsoft Outlook. Ta c th to cc s kin (Appointment), cc ti nguyn(Resource) tng ng theo ngy, theo tun hay thng, di chuyn qua li gia cc ngy. Control ny cn c h tr AJAX thng qua s kin callbacks. B ASPxScheduler c rt nhiu thnh phn trong c Scheduler v Date Navigator, cho php thc hin nhiu tc v n d liu. Di y l mt s tnh nng chnh ca ASPxScheduler: Nhng tnh nng ca ASP.NET o Tng thch vi nhiu trnh duyt: Internet Explorer 5.5 +, Mozilla Firefox, Netscape 7.2+, Opera 8+, Safari.. o H tr AJAX: ta c th cp nht ni dung ca Control thng qua phng thc callbacks, khng cn thit phi load li ton b trang. o Tng tc vi ngi dng rt a dng. o H tr Cookies: cho php ngi ving thm trang web v thit lp cc chnh sch ring t v lp lch. Nhng ch xem (5 trong 1) o Day View: xem chi tit cc Appointment trong mt ngy c th.

38

Hnh 2.4.1 : Xem scheduler dng Day View o Work Week View: Th hin cc Appointment trong cc ngy lm vic mt tun c th hoc nhiu tun.

Hnh 2.4.2 : Xem Scheduler dng Work Week View

39

o Week View: V Th hin cc Appointment A t trong mt tun xc nh.

3 : Xem Sch heduler dng n Week Vi iew Hnh 2.4.3 o Month h View: Th h hin cc Appointm ment theo th hng, ng tin cc Appointme ent hin th theo thng g t chi tit nht th so vi cc ki iu hin th kia. Tuy nhin n cho c php ng n i ng c th l n nhng k hoch di i hn. d

40

Hnh 2.4.4: Xem Scheduler dng Month Vie H ew. o ine View: Th T hin c c Appointm ments theo thi Timeli an biu. gia

41

Hnh 2.4.5 : xem Scheduler dng Timeline Khai thc d liu o Khai thc t Database: Cc cng vic thc hin c th c truy xut v lu trong database. o Khai thc cc trng tu chn cho vo Appointment: Ta c th tu chn hin th thng tin ca tng trng c th ln Appointment. Vn Vit ho Scheduler: o Khi thc hin ko th Control ASPxScheduler vo trang web, mt lot cc Template dng UserControl c to ra, mi control tng ng vi mt form chc nng bn trong mt ASPxScheduler. Mc nh hin th trn Scheduler l ting Anh, do hin th ting vit ton b Scheduler v nhng form chc nng th ta vo tng control v i tn cc thnh phn hin th trong sang ting Vit bng cch thay i thuc tnh Display Text ca tng thnh phn. Ta xem v d di y l form thm mt Appointment mi trong Scheduler

42

Hnh 2.4.6: Form thm mi hay chnh sa mt Appoinment. Ta d dng thay i thuc tnh Text ca cc Label hay button thnh ting Vit. 4.1.2. Cc th vin lin kt ng cn thit trin khai ng dng DevExpress.Web.vX.Y.dll: Cha cc lp thc thi ton b cc chc nng ca cc Control trong b ASPxScheduler. DevExpress.Data.vX.Y.dll: Cha cc lp thc thi cc chc nng lin quan ti vic qun l d liu . DevExpress.Web.ASPxThemes.vX.Y.dll: Cha cc lp thc thi mt tp cc chc nng v tu chnh giao din v cch phi hp. DevExpress.Web.ASPxEditors.vX.Y.dll: Cha cc lp thc thi cc chc nng chnh sa d liu trn Scheduler. DevExpress.Web.ASPxScheduler.vX.Y.dll: Cha cc Control ASPxScheduler, ASPxSchedulerStorage, ASPxDateNavigator, cng nhiu Control khc na trong b ASPxScheduler. DevExpress.XtraScheduler.vX.Y.Core.dll: cha cc lp c bn thc thi cc chc nng chnh ca b ASPxXtraScheduler v ASPxScheduler ng dn ni cha cc th vin ny: C:\Program Files\ DevExpress 2010.1\ Components\Sources\ DevExpress.DLL

43

4.2. V d minh ho Ta to ra Scheduler nh hnh sau:

Hnh 2.4.7: ASPxScheduler B1: a control ASPxNavBar vo giao din Trong ca s Design view, ko th component ASPxScheduler t Toolbox vo th div bn trong. Lc ny s c mt s Templates c t ng thm vo project
44

Hnh 2.4.8 : Cc Template i km vi Control ASPxScheduler

Nhn Close thot ca s ny. Lc ny trong box Solution ta s thy s c thm mt folder mi l DevExpress, bn trong l folder ASPxSchedulerForm, bn trong folder ny l cc Template va c thm vo Project. Lu l cc Template ny l ta thao tc vi Scheduler, nu xo i bt k mt Template no cng gy ra li cho ng dng.

45

Hnh 2.4.9: ASPxScheduler trn mn hnh Design View Control ASPxScheduler ny c cc ch xem cc ghi ch theo ngy(Day), theo tun(Work Week), theo thng(Month) v Timeline cho cc cng vic ny. Khi mun thm mt ghi ch mi hay thc hin mt tc v no ta ch vic click chut phi vo ngy, hoc gi trong ngy Ta cng c th ci t chi tit thi gian ca mt ngy theo cc mc 60 pht, 30 pht.. n 5 pht.

46

Hnh 2.4.10 : Scheduler khi chy Gi s Khi chn thm mi mt Appointment mi trong mt ngy, s hin ln mt form sau

Hnh 2.4.11 : Mn hnh thm mi mt Appointment in vo cc ni dung trong form ri nhn OK thm mt Appointment mi. Tuy nhin c th thc hin vic thm mt Appointment mi thnh cng, ta cn to ra datasource lu tr nhng thng tin ny. B2: Thm v cu hnh Data Source

47

Ta s dng Dat tabase CarsDB.mdb khai thc c d liu. Database D n y c sn trong t th mc ci t ca DevX. Thm m database CarsDB.m mdb vo folder App_D Data ca Pro oject:

nh 2.4.12: Thm T vo Data D Source e CarsDB.m mdb Hn Tron ng Toolbo ox, nhm Data D , ko th t AccessD DataSource e vo mn hnh Desi ign view. i tn th hnh DataS SourceApp p. Chn DataSourceA App, nhn chn th th hng minh v chn Co ofigure Dat ta Source.

48

Hnh 2.4.13: Cu hnh Data Source Ta la chn DataSource l CarsDB.mdb tng ng. Nhn Next. Trong Configure the Select Statement, Chn bng CarScheduling v nhn chn cc trng cn hin th nh sau:

49

Hnh 2.4.14 : Cu hnh chn table v cc trng tng ng Click chn nt Advance v nhn vo tu chn: Generate Insert, Update, and Delete statements

50

Hnh 2.4.14 : Tu chn nng cao to ra cc cu lnh SQL Nhn chn OK ->Next-> Finish hon tt vic cu hnh DataSourceApp. To thm mt AccessDataSource t tn l DataSourceRes, cng cu hnh chn Database CarsDB.mdb, phn chn bng ta chn bng Cars v chn cc trng hin th nh sau:

Hnh 2.4.15 : Cu hnh chn table v cc trng tng ng

51

B3: Tham chiu Data Source vo ASPxScheduler tng ng. Chn ASPxScheduler1, nhp chn th thng minh, trong phn Appointments Data Source chn DataSourceApp, trong phn Resources Data Source chn DataSourceRes.

Hnh 2.4.16 :Tham chiu cc Data Source vo ASPxScheduler

Set thuc tnh Storage.Appointments.AutoReload = true. Thuc tnh Storage.Appointments.Mappings ta iu chnh nh sau:

52

Hnh 2.4.17 : Mapping cc trng ca Appointment Thuc tnh Storage.Resources.Mappings ta iu chnh nh sau:

53

Hnh 2.4.18 : Mapping cc trng ca Resource

c th thm c record mi trong c s d liu, c th l lu mt Appoinment mi, trng ID phi l duy nht, v trng ny ta ch tng t ng(Auto Indentity), thc hin c iu ny ta s dng cu lnh SQL SELECT @@IDENTITY. Chn DataSourceApp, trong thuc tnh InsertQuery ta thc hin nh sau:

54

Hnh2.4.19 : Tu chnh Insert Query Nhn OK hon tt vic cu hnh v tham chiu cc Data Source vo ASPxScheduler.

B4: Xy dng cc phng thc x l cc s kin thm v chnh sa cc Appointment. Trong file source code, ta x l cc s kin nh sau:
using using using using using using using using using using System; System.Collections.Generic; System.Linq; System.Web; System.Web.UI; System.Web.UI.WebControls; System.Data.SqlClient; System.Data.Sql; System.Data.OleDb; DevExpress.Web.ASPxScheduler; 55

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; }

56

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); }

} }

Bin dch v chy chng trnh, lc ny ta c th thm mi mt Appointment mi cng nh chnh sa thng tin ca mt Appointment no .

57

5.

ASPxGridView
5.1. Tng quan 5.1.1. c im ASPxGridView l mt Control rt mnh, h tr vic hin th d liu dng li, cho php ta to ra cc trng hin th bng tay hoc thng qua Database. c tnh chung o Tng thch vi nhiu trnh duyt: Internet Explorer 5.5 +, Mozilla Firefox, Netscape 7.2+, Opera 8+, Safari.. o H tr AJAX: ta c th cp nht ni dung ca Control thng qua phng thc callbacks, khng cn thit phi load li ton b trang. Tng tc vi ngi dng rt a dng. o o Xut d liu: h tr xut d liu ra nh dng PDF, XLS v RTF o H tr SEO.(Search Engine Optimization): ti u ho cng c tm kim. Khai thc d liu: o H tr khai thc d liu t nhiu h qun tr csdl khc nhau: Microsoft Access, SQL Server o Cho php hin th d liu dng Master-Detail vi cu trc a dng. o C 2 ch chnh sa: t Form chnh sa hay chnh ngay trn hng. o Chc thc dng d liu v ch ra li: ASPxGridView cho php ta xc thc bng tay cc dng chnh sa, v hin th thng bo li i vi trng khng hp l. o T ng gom nhm d liu: Cho php ngi dng gom nhm d liu, khng gii hn s ct. o Tm tt d liu y : Cho php hin th thng tin thng k nh MIN, MAX, AVG, SUM v COUNT trc tip trn li. o Cho php lc d liu v hin th Text: Vi mi ct ta c th ch nh cch d liu c sp xp theo gi tr hin th ca n. Ngoi ra ta c th cho php lc d liu bt k bng cch g vo gi tr mun lc trc tip vo textbox. o Cho php la chn nhiu dng cng mt lc.
58

5.1.2. dng DevExpress.Web.ASPxGridView.vX.Y.dll: Cha cc lp thc thi cc chc nng ca control ASPxGridView. DevExpress.Web.vX.Y.dll: Cha cc lp thc thi ton b cc chc nng ca cc Control lin quan ti b ASPxExperience(Menu, NavBar, TabControl) DevExpress.Data.vX.Y.dll: Cha cc lp thc thi cc chc nng lin quan ti vic qun l d liu . DevExpress.Web.ASPxThemes.vX.Y.dll: Cha cc lp thc thi mt tp cc chc nng v tu chnh giao din v cch phi hp. DevExpress.Web.ASPxEditors.vX.Y.dll: Cha cc lp thc thi cc chc nng chnh sa d liu trn li. ng dn ni cha cc th vin ny: C:\Program Files\ DevExpress 2010.1\ Components\Sources\ DevExpress.DLL 5.2. V d minh ho 5.2.1. To mt Control ASPxGridView vi Data Source t Database Access. Ta to mt GridView nh hnh sau:

Tu bin giao din hin th: o Giao din: Ta c th tu chnh giao din ca loi bng cch chn cc nh dng hin th khc nhau, ch sau vi ci click chut. o H tr cc Template: vi mi thnh phn bn trong ASPxGridView, ta c th hon ton tu bin vic hin th thng qua cc control HTML hay bn pha my ch. o H tr CSS y . Cc th vin lin kt ng cn thit trin khai ng

59

Hnh h 2.5.1 : v d Minh Ho ASPxGr ridView B1: a con ntrol ASPxNavBar v o giao din Tr rong ca s Design view, ko th comp ponent ASP PxGridView w t To oolbox vo th div bn n trong

Hnh 2.5.2: Control ASPxGridVi A iew trn m n hnh Des sign B2 2: Thm v Cu hnh h Data Sour rce

60

Th hm file dat tabase ca Access A vo o Trong App p_Data ca Project, y ta thm file Nwind.mdb N (file ny c sn trong Sample Co ode ca DevExpress)

.3 : Thm Data D Source e vo projec ct Hnh 2.5. rong Toolbox, nhm Data, D ko th h AccessD DataSource vo th div v bn Tr tro ong. Nhn vo th h thng mi inh ca Ac ccessDataSo ource1-> ch c n Confi igure e Data Source

4 : Mn hn nh Cu hnh h Data Sourc ce Hnh 2.5.4

61

Nhn Browse chn database, chn database Nwind.mdb m ta thm:

Hnh 2.5.5 : Mn hnh chn Database Nhn OK ->Next, xut hin mn hnh chn table cn hin thi, y ta chn tables Customers, chn vo checkbox * chn ton b cc trng.

62

Hnh 2.5.6 : Chn table v cc trng cn hin th Nhn next tip tc, mn hnh k nhn Test Query kim tra truy vn.

63

Hnh 2.5.7 : Mn hnh kim tra truy vn Nhn Finish kt thc vic cu hnh AccessDataSource. B3: Tham chiu Data Source vo ASPxGridView Ti mn hnh Design View, chn ASPxGridView1 m ta thm trn, nhn chn th thng minh cnh phi -> Phn Choose Data Source ta chn AccessDataSource1.

64

Hnh 2.5.8 : Ch C n Data Source cho o Grid Nhn trong ASPxGridV A t thy c th hm mt s chc nng g cho iew Tasks ta Grid nh l: Show Pager: Hin s trang ca li. anel: hin Panel P bn tr rn Grid sp xp d liu Show Group Pa o Panel . theo tng trng bng cch ko th vo Enabl le Editing: Cho php ch c nh sa d liu ngay y trn li Enabl le Inserting g: Cho Php p thm mi record vo o table trn li. Enabl le Selection n: Cho ph p chn mt hoc nh hiu record trn li le Delete: Cho C php xo o mt hoc nhiu reco ord trn l i Enabl Enabl les filtering g: Cho php p to b lc theo tng trng. 5.2.2. To li trn nh by d liu theo dng Master r-Detail Ta to l i nh hn nh sau:
65

Hnh 2.5.9 : Li dng Master-Detail Ta s dng Database Nwind.mdb khai thc d liu. B1: Thm v cu hnh Data Source To ra mt AccessDataSoure t tn l dsCategories, ta cu hnh cho hin th ton b cc trng ca bng Categories trong Database Nwind.mdb. To thm mt AccessDataSource t tn l dsProducts, trong phn cu hnh datasource ny, bc chn tables, ta chn tables Products tng ng. Ti bc ny, ta nhn vo nt WHERE thm mi mt session

66

Hnh 2.5.10 : Chn table v cc trng tng ng. Trong ca s Add WHERE Clause, Mc Collumn chn CategoryID, Mc Operator chn =, mc Source chn Session, trong textbox Session field ta nhp vo CategoryID, nhn nt Add thm mi Session

67

Hnh 2.5.11: Thm mi mt Session Nhn Ok ->Next-> Finish hon tt vic cu hnh datasoure dsProducts B2: To cc ASPxGridView Master v Detail v cu hnh tham chiu Data Source. Trong Design View, ko th 2 Component ASPxGridView vo trong th div. Chn DataSource ca ASPxGridView1 l dsCategories, chn DataSource cho ASPxGridView2 l dsProducts.

68

H Hnh 2.5.12 : GridView w v DataSo ource tng g ng M th thn ng minh ca ASPxGr ridView1 ch c n Edit Templates T . M tip th thng g mnh ca li ny, tr rong phn Display D chn Detail Row R

69

Hnh 2.5.13 2 : Edit t Template Ko ASPxGr ridView2 th vo Det tail Row ca ASPxGr ridView1. Ta T th hy kt qu nh sau:

A View2 trong g ASPxGrid dView1 Hnh 2.5.14 : ASPxGridV B3 3: Cu hn nh v x l s kin Ch hn ASPxG GridView2, gn thuc tnh IsDeta ailGrid l True. T Tron ng ta ab Events, Double clic ck vo phng thc BeforePerfo ormDataSe elect x l s ki k n ny.

70

Hnh 2.5.15 : X l s kin BeforePerformDataSelect Trong ca s Code, ta x l phng thc BeforePerformDataSelect nh sau: protected void ASPxGridView2_BeforePerformDataSelect(object sender, EventArgs e) {

71

Session["CategoryID"]=(sender as DevExpress.Web. ASPxGridView.ASPxGridView ). GetMasterRowKeyValue () ; } Quay tr li mn hnh Design View, chn th thng minh ca ASPxGridView1 , chn End Template Editing

Hnh 2.5.16 : Mn hnh kt thc vic lng DetailRow Gn thuc tnh ASPxGridView1.ShowDetailRow = True;

Hnh 2.5.17 : Tu chn thuc tnh

Bin dch v chy chng trnh, ta c giao din nh sau:

72

Hnh 2.5.18 : GridView dng Master Nhn chn du + u mi dng ta c giao din nh sau:

Hnh 2.5.19 : GridView dng Master-Detail

73

5.2.3. To Contextmenu trong grid Trong v d ny, ta s lng menu popup vo gridview bng cch mi ln nhn chut phi vo mt dng nht nh, s xut hin mt menu ng cnh thc hin cc thao tc chnh sa d liu trn dng hoc xo dng khi li. Bn cnh , c thm chc nng to mi mt dng d liu khc, ging nh hnh di:

Hnh 2.5.20 : Minh ho menu popup trong li. Khi chn New, s xut hin nhng edit box cho ta thm mi d liu ca mt dng:

Hnh 2.5.21: thm mi mt dng (Lu : trng EmployeeID l tng t ng)

74

Khi chn Edit, ta c th chnh sa d liu ca dng :

Hnh 2.5.22 : Trc khi chnh sa d liu ca dng c EmployeeID=1 V d Ta thay i Last name thnh Davolio1, nhn chn Update, d liu s c cp nht nh sau:

Hnh 2.5.23 : Sau khi chnh sa d liu ca dng c EmployeeID=1 Khi chn Delete, d liu ca dng c chn s b xo.

75

 thc hin c , ta cn phi c s h tr ca JavaScript, bng cch x l s kin pha ngi dng. Ta thc hin cc bc nh sau: B1: Thm mi mt Popup Menu Ko th control ASPxPopupMenu vo trong mn hnh Design View, v thm cc Item: New, Edit, Delete. Ta thao tc ging nh mt menu bnh thng. Lu , ngoi trng Text l tn hin th cc Item, ta cn thm vo trng Name c th thao tc vi cc Item .

Hnh 2.5.24 : Thuc tnh Name ca item Ta set thuc tnh ClientInstanceName cho PopupMenu, thuc tnh ny dng gi ti khi ta cn thao tc vi PopupMenu trong JavaScript:

76

Hnh 2.5.25: thuc tnh ClientInstanceName ca PopupMenu Nhn chn th thng mnh ca PopupMenu, chn vo Client-Side Events

77

Hnh 2.5.26: Th chc nng ca Popup Menu Trong Ca s ASPxPopupMenu Client-Side Events Editor m sau , chn ItemClick ct bn tri v thm vo s kin GridMenuItemClick(e);. Ta s x l s kin ny trong JavaScript.

78

Hnh 2.5.27 : Thm mi phng thc trong s kin ItemClick B2: Thm mi mt DataSource Ta thm mi m AccessDataSource, chn database Nwind.mdb, chn bng hin th l Employees, cc trng cn hin th l EmployeeID, Last Name, First Name.

79

Hnh 2.5.28 : Chn bng v cc trng hin th Lu , chn tu chn Generate INSERT, UPDATE, and DELETE statements trong phn Advanced

Hnh 2.5.29 : Tu chn nng cao

80

B3: Thm mi mt li Ta thm mt control ASPxGridView vo mn hnh DesignView, chn DataSource l data source ta mi va to. Ta set thuc tnh ClientInstanceName cho GridView:

Hnh 2.5.30: thuc tnh ClientInstanceName ca PopupMenu Nhn chn th thng mnh ca li, chn vo Client-Side Events

81

Hnh 2.5.31 : chn x l s kin pha ngoi dng Trong Ca s ASPxGridView Client-Side Events Editor m sau , chn Context Menu ct bn tri v thm vo phng thc OnContextMenu(e);. Ta s x l s kin ny trong JavaScript.

82

Hnh 2.5.32: thm mi phng thc trong s kin ContextMenu B4: X l cc s kin bng JavaScript. Ta thm mt on JavaScript sau x l cc s kin m mt Menu popup khi nhn chut phi vo mt dng v s kin click vo tng Item ca 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.htmlE vent), ASPxClientUtils.GetEventY(e.htmlEvent)); } } function GridMenuItemClick(e) { if (e.item == null) return; var name = e.item.name;

83

if (name == "New") ASPxGridView1.AddNewRow(); if (name == "Edit") ASPxGridView1.StartEditRow(editingVisibleIndex); if (name == "Delete") ASPxGridView1.DeleteRow(editingVisibleIndex); } </script>

Nh vy ta hon thnh cc thao tc x l s kin to Menu trong li, v x l cc s kin thm, xo, sa d liu. Bin dch v chy, ta c li d liu nh hnh di:

6.

XtraReport
6.1. Tng quan 6.1.1. c im Phn report trn mi trng Web cng s dng Component XtraReport nh mi trng Window. N cha cng c to Report t d liu phc hp, ch xem trc, in v xut report ra nhiu nh dng khc nhau. c tnh chung: o XtraReport hot ng c trong c ng dng Winform v Webform. Ta c th ch cn to mt Report v s dng 2 mi trng khc nhau. Tch hp y Visual Studio .Net: Report Designer o tch hp. H tr ch xem trc dng HTML v dng in, khi c thay i trong thit k report, ta khng cn bin dch li ton b ng dng m vn c th cp nht c ch xem trc kp thi. o XtraReports lm vic vi ton b i tng d liu c h tr bi Visual Studio .NET nh : chun .NET Data Objects, Ilist Interface, XML Data Objects. o Cho php lc d liu di vi nhiu cp: Data adapter, Data set, Data views. o Cho php gom nhm d liu: gom nhm a tng v lng nhau. o H tr nhiu control chun nh: Label, Line, BarCode, CheckBox, PageInfo, Panel, PictureBox, PageBreak, Table, ZipCode, etc. o H tr biu thng qua control XtraCharts.
84

6.1.2. dng DevExpress.Utils.v10.1.dll: Cha cc lp tin ch c bn. DevExpress.Data.v10.1.dll: Cha cc lp thc thi cc chc nng lin quan ti vic qun l d liu . DevExpress.Charts.v10.1.Core.dll : Ch cn nu report c t nht mt control XRChart. DevExpress.XtraCharts.v10.1.dll: Ch cn nu report c t nht mt control XRChart. DevExpress.RichEdit.v10.1.Core.dll: Thc thi cc chc nng c bn ca vic in ra cc nh dng phong ph. DevExpress.XtraRichEdit.v10.1.dll: H tr vic xut ra cc nh dng khc nhau. DevExpress.XtraReports.v10.1.dll: Cha cc lp ca b XtraReport. DevExpress.Web.vX.Y.dll: Cha cc lp thc thi ton b cc chc nng ca cc Control lin quan ti b ASPxExperience(Menu, NavBar, TabControl)

o SubReports: Ta c th dng li cc lp ca XtraReport vo ng dng qua control Subreport. Ch cn th vo control Subreport, set thuc tnh ngun Report, ta c 2 report t mt ngun. o H tr tm tt: d dng to tm tt cho mt textbox hay mt trong bng. Ch cn set 2 thuc tnh Summary posiotion(group hay report) v Summary type(Avg, min, max, sum, count) o H tr phong ph cc nh dng xut ra: PDF, HTML, MHT, RTF, TXT, CSV v MS Exel. C th xut report ra nh dng hnh nh nh: BMP, EMF, GIF, JPEG, PNG, TIFF, WMF. o Importing: c th np li report c ca mnh t MS Access, Crystal Reports, Data Dynamics Active Reports vo XtraReport. o Tm kim ch xem trc: gip cho ngi dng c th tm nhng on text mong mun. o H tr tha k, Bookmark, Watermarks. Cc th vin lin kt ng cn thit trin khai ng

85

 DevExpress.Web.ASPxThemes.vX.Y.dll: Cha cc lp thc thi mt tp cc chc nng v tu chnh giao din v cch phi hp. DevExpress.XtraReports.v10.1.Web.dll: Cha cc lp ca control ReportViewer v ReportToolbar. ng dn ni cha cc th vin ny: C:\Program Files\ DevExpress 2010.1\ Components\Sources\ DevExpress.DLL 6.2. V d minh ho 6.2.1. To Web Report n gin Ta s to Report nh hnh sau :

86

Hnh 2.6.1 : V V d minh h ho Web Report

port B1: Thm mi mt Rep

87

Nhn chut phi vo Project, Add New Item. Trong mn hnh list cc Item chn XtraReport Class V10.1 nh trong hnh di

Hnh 2.6.2 : Thm mi mt XtraReport Class Lc ny, trong project c thm class XtraReport1. Ta lu add thm Reference DevExpress.XtraReports v DevExpress.Utils. B2: Thm mi v cu mt DataSet Nhn chut phi vo Project, Add New Item. Trong mn hnh list cc Item chn DataSet nh trong hnh di:

88

Hnh 2.6.3 : Thm mi mt DataSet Trong mn hnh DataSet Designer m sau , ko th bng Categories ca Database Nwind.mdb t Server Explorer vo:

Hnh 2.6.4 : Cu hnh DataSet B3: Thit k Report Gi ta sang ca s designer ca Report, nhn vo th thng minh, trong phn DataSource , chn DataSet1 va to:

89

Hnh 2.6.5 : Chn DataSet cho Report Trn mn hnh Designer ca Report, nhn chut phi chn Insert Band -> ReportHeader thm Header cho Report. Trong phn Detail ta ko th cc trng CategoryName, Description v Picture t fieldlist vo theo mu sau:

Hnh 2.6.6 : Thit k Report Preview trc report ta c kt qu sau:

90

Hnh 2.6.7 : Ch Preview ca Report Ta hon thnh vic thit k mt report gi cn phi cho n hin th ln website B4: Hin th Report trn Website v cu hnh report Ta quay li trang cn hin th Report, ko th Component ReportToolbar v ReportViewer t Toolbox vo th div bn trong:

Hnh 2.6.8 : to ReportToolbar v ReportViewer lin kt ReportToolbar1 v ReportViewer1 vi nhau, gn gi tr cho thuc tnh ReportViewer ca ReportToolbar1 l ReportViewer1

91

Hnh 2.6.9 : to lin kt gia ReportToolbar v ReportViewer tham chiu ti Report m ta to trn, gn tr cho thuc tnh Report ca ReportViewer1 l XtraReport1

Hnh 2.6.10 : Tham chiu ReportViewer ti Report to.

92

Bin dch h v chy ch hng trnh h, ta c giao g din sa au:

Hnh 2.6.11 : Gia ao din Web Report 6.2.2. To Report dng bng v thng k k d liu Ta s to mt Report t dng bng g v thng k k d liu nh hnh sau u:
93

Hnh 2.6.12 2 : Rep port dng bng v thng n k d liu Lu rng trong cc qui trnh to mi v cho hin th h nhng re eport nh hng dng khng ging n nhau , ch khc nha au khu thi t t k Re eport, c c thao tc cn c li u tng t. port (Nh trn) B1: Thm mi mt Rep 2: Thm mi v cu mt DataSet(Nh tr n) B2 y ta chn table Prod ducts ca database Nw wind.mdb 3: Thit k Report B3 Th hm hai control c XR RTable vo o phn Pag geHeader v Detail vo Re eport. th t c hin vi v c ny, tro ong Tool lbox, phn cc control l ca Re eports, chn item XRT Table, tip trong khu k vc PageHeader nhn

94

v gi chut tri ng th hi r con tr t chut xu ung phn Detail nh hnh doi:

h 2.6.13 : Thm contro ol XRTable vo Report t Hnh L c ny ta s thy c ha ai control l XRTable1 1 tng ng g vi phn table phn PageH Header v XRTable2 2 tng ng g vi phn Detail c to a. ra khai thc c d liu t cc trng g, ta n gi in ch cn ko cc tr ng roductID, ProductNa ame, Units sOnOrder t ca s Field List t ln Pr tr n cc t ng ng c to ra a sn

95

Hnh 2.6.14 2 : Ko o th cc tr ng d liu vo Repo ort B4 4: Hin th thng k ca mt tr ng bn di Repor rt y ta s cho hin th h tnh tng g gi tr cc c records ca trng Units U On Orders rong ca s Design Report, nh hn chut phi ri thm t vo phn Tr ReportFoote er nh hnh h di

Hnh 2.6.15 2 : Th m vo Rep portFooter V t FieldL List, ko th trng Un nitsOnOder vo phn ReportFoo oter.
96

Nhn chn th h thng mi inh, v tron ng danh sch h thao tc, ph p n Summ mary hi hin th t Summa ary Editor ta click chn nt duyt nm bn ph

Hnh h 2.6.16: Tu u chnh Su ummary a iu chnh h cc thng g s trong phn p Summ mary Editor r nh hnh trn, Ta tro ong Boun nd Field: set trng d liu l Uni itsOnOrder r. Summ mary funct tion: set l Sum. Ch ta c th h thc hin cc phng n thc thng k khc nh Count t, Min,Max, , Average Form mat String : ta g vo o Total Uni its: {0} hin th gi i tr dng s nguyn.
97

 Ignore null values: check vo ny, nhng record c gi tr null s khng nh hng ti kt qu thng k. Phn Summary Running: La chn Report, vic tnh tng s tnh ton b report(trong trng hp c nhiu trang). Chn OK hon tt, ri xem kt qu bng cch chn Preview

Hnh 2.6.17: Report dng bng ch Preview hin th Border ngn cch gia cc , set thuc tnh XRTable.Border=All
98

B5 5: To Re eportToolb bar v Rep portView hin th h Report( (Nh tr rn) Bi in dch ta s c Report c kt qu nh sa au:

t trang u tin Hnh 2.6.18 : Report Do c nhiu Record nn n ta s kh hng thy ph p n tnh tng ca tr ng der tra ang u tin, ta chn tra ang cui trn UnitsOnOrd ReportToolB Bar ( y y l trang 4), ta s c kt qua nh h sau:
99

Hnh h 2.6.19 : Report R tran ng cui vi thng k tn nh tng

100

7.

ASPxEditors
7.1. Tng quan 7.1.1. c im y l mt b nhng control chun ca DevX dng thao tc, gn vi vi cc kiu Control khc, gm cc controls nh: Label, CompoBox, Listbox, Image, Memo S lng Control a dng: Hin C hn 20 controls trong b ASPxEditors v s m rng thm na. Ta d dng tm c mt Control phc v nhu cu ca mnh. Gn sn b my xc thc(Validation mechanism): mc d cc controls u c h tr b my xc thc chun, tuy nhin nh sn xut cng gn thm chc nng xc thc. H tr SharePoint. 7.1.2. Mt s component trong b ASPxEditors Logo Control ASPxImage ASPxButton ASPxButtonEdit ASPxCalendar ASPxCheckBox ASPxRadioButton ASPxComboBox ASPxLabel ASPxHyperLink ASPxListBox ASPxMemo ASPxTextBox ASPxTimeEdit M t Control hin th hnh nh Control to cc Button Mt trnh chnh sa ni dung cho php hin th cc nt bn trong mt edit box Control to lch Control check box, cho php chn nhiu Control radio button, cho php chn mt. Control Chn cc item t danh sch s xung Control hin th label Control hin th v chnh sa cc siu lin kt Control hin th list cc item. Control hin th v chnh sa ni dung nhiu dng Control hin th ni dung mt dng Control hin th v chnh sa gi tr thi gian.

101

7.1.3. Cc th vin lin kt ng cn thit trin khai ng dng DevExpress.Web.ASPxEditors.vX.Y.dll: Cha cc lp thc thi cc chc nng ca cc control trong b ASPxEditors. DevExpress.Web.vX.Y.dll: Cha cc lp thc thi ton b cc chc nng ca cc Control lin quan ti b ASPxExperience(Menu, NavBar, TabControl) DevExpress.Data.v10.1.dll: Cha cc lp thc thi cc chc nng lin quan ti vic qun l d liu . DevExpress.Web.ASPxThemes.vX.Y.dll: Cha cc lp thc thi mt tp cc chc nng v tu chnh giao din v cch phi hp.

102