Hands-On Lab. Lab Manual HOL057 Data Features in Windows Forms 2.0

Transcription

1 Hands-On Lab Lab Manual HOL057 Data Features in Windws Frms 2.0 Please d nt remve this manual frm the lab The lab manual will be available frm CmmNet

2 Infrmatin in this dcument is subject t change withut ntice. The example cmpanies, rganizatins, prducts, peple, and events depicted herein are fictitius. N assciatin with any real cmpany, rganizatin, prduct, persn r event is intended r shuld be inferred. Cmplying with all applicable cpyright laws is the respnsibility f the user. Withut limiting the rights under cpyright, n part f this dcument may be reprduced, stred in r intrduced int a retrieval system, r transmitted in any frm r by any means (electrnic, mechanical, phtcpying, recrding, r therwise), r fr any purpse, withut the express written permissin f Micrsft Crpratin. Micrsft may have patents, patent applicatins, trademarked, cpyrights, r ther intellectual prperty rights cvering subject matter in this dcument. Except as expressly prvided in any written license agreement frm Micrsft, the furnishing f this dcument des nt give yu any license t these patents, trademarks, cpyrights, r ther intellectual prperty Micrsft Crpratin. All rights reserved. Micrsft, Visual Basic, Visual Studi, and Windws are either registered trademarks r trademarks f Micrsft Crpratin in the U.S.A. and/r ther cuntries. Other prduct and cmpany names herein may be the trademarks f their respective wners. Page i

3 Cntents LAB 1: DATA FEATURES IN WINDOWS FORMS Lab Objective...1 Exercise 1 Create a datasurce and add it t DataSurces Windw...1 Task 1 Create Windws Applicatin...1 Task 2 Add a DataSurce t yur prject...2 Task 3 Explre the recently added datasurce...5 Exercise 2 Databinding a Datasurce t a frm...8 Task 1 Create a Master/Details View...8 Task 2 Custmize the Detail cntrls t readnly types...11 Exercise 3 Custmizing a DataGridView...12 Task 1 Adding UnBund clumns t the view...12 Task 2 Custmizing Cell frmats...13 Task 3 Ppulating the Unbund clumns...13 Task 4 Handling CellPainting t highlight cells...14 Task 5 Remving unneeded clumns & freezing clumns...15 Task 6 Preview all the changes...15 Exercise 4 Binding t business bjects...16 Task 1 Open startup prject...16 Task 2 Create a business bject datasurce...17 Task 3 - Create Master/Details frm using business bject datasurce...18 Task 4 Update business bject...20 Lab Summary...22 Page ii

4

5 Lab 1: Data Features in Windws Frms 2.0 Lab Objective 80 minutes The bjective f this lab is t intrduce a few f the new Micrsft Windws Frms data features in Micrsft Visual Studi The gal fr these new features is t increase develper prductivity and simplify data binding t business bjects. This lab will als intrduce the new Windws Frms DataGridView cntrl, a flexible, scalable and easier t use alternative t the DataGrid cntrl. Yu will cmplete the fllwing exercises in this lab: Addng DataSurces t the Datasurces Windw Binding a DataSurce t a frm Custmizing DataGridViews Binding t Business Objects Exercise 1 Create a datasurce and add it t DataSurces Windw In this exercise, yu will create a datasurce that cnnects t a SQL Server database. Task 1 Create Windws Applicatin Navigate t Start Prgrams Micrsft Visual Studi Beta2 Micrsft Visual Studi Beta2 Select File New Prject menu cmmand Select C# r Visual Basic Windws Applicatin Name = DataLab Lcatin = C:\labs\hl057 Click OK t create the prject Page 1

6 Task 2 Add a DataSurce t yur prject Select Data Add New DataSurce menu cmmand Data Surce Cnfiguratin Wizard appears ( see Figure 1.1) Figure 1.1. DataSurce Cnfiguratin Wizard Nte: The data surce cnfiguratin wizard supprts three different types f data surces: Web Services, Database ( any data that a.net Data Prvider) can attach t Business bjects Select Database t cnnect t a database Click Next Click New Cnnectin buttn Page 2

7 [Optinal step, might shw depending n machine s last cnfiguratinlcal] The Chse Data Surce dialg appears Select Micrsft SQL Server in the DataSurce windw Click Cntinue The Add Cnnectin dialg appears ( see Figure 1.2) Figure 1.2 Add Cnnectin dialg fr cnfiguring SQL Server cnnectins Enter lcalhst\sqlexpress as Server name Leave the Use Windws Authenticatin as the ptin t Lg n t the server Lcate (r type) Nrthwind in the Select r enter a database name drpdwn Click OK t clse the dialg and g back t DataSurce Cnfiguratin Wizard Page 3

8 Click Next Leave the Yes, save the cnnectin as.. unchanged Click Next Nte: The designer might take a secnd r tw t perfrm this peratin. The Chse yur data bjects dialg displays (see Figure 1.3) Figure 1.3 Database bject selectin dialg Page 4

9 Click the fllwing bjects: Tables Orders Tables Order details Tables Custmers Click Finish Nte: The designer might take a secnd r tw t perfrm this peratin. Task 3 Explre the recently added datasurce Select Data Shw Data Surces menu cmmand The data surces windw shuld appear ( as in Fig 1.4) Figure 1.4 DataSurces Windw Page 5

10 Ntice that yur tables selected have been wrapped int a single, strng typed DataSet Right Click in NrthWindDataSet at the very tp, select Edit DataSet with designer The new DataSet designer appears ( see Figure 1.5) Figure 1.5 DataSet Designer Ntice hw the designer imprted the relatinships that existed in the database. In the DataSet designer yu can get rid f these, r even add new relatinships r Freign Key cnstraints. Duble click n the relatinship frm OrderDetails t Order Page 6

11 A Relatin dialg appears ( see Figure 1.6) Ntice the designer has ptins t specify: Parent/Child relatins Freign key cnstraints Figure 1.6 Relatin Dialg in the DataSet designer Custm rules fr accepting/rejecting the cnstraints, etc. Click Cancel t discard any changes yu made in the Relatin Dialg (and clse it) Nte: With the new DataSet designer yu have a lt f design-time flexibility ; yu d nt have t write any cde t represent cmplex relatinships. Clse the DataSet designer G back t DataSurce windw Click n the drp-dwn arrw fr the Orders table( see Figure 1.7) Page 7

12 Select Details in the ppup menu (see Figure 1.7) Figure 1.7 DataSurce Windw custmizatin fr details view Because yu selected Details view when yu drag this table int a Windws Frm, it will create a details view, by creating a cntrl fr every clumn in the table (refer t Task 3 in Exercise 2 in this same lab). Yu can custmize the type f the cntrl created (fr each clumn). Exercise 2 Databinding a Datasurce t a frm Task 1 Create a Master/Details View Drag the Orders table frm the DataSurces Windw t Frm1 in the Windws frms designer Nte: When dragging the table, a lt f wrk is dne by the designer: An instance f the NrthwindDataSet is created, s it can fetch the data An OrdersBindingSurce is created. A bindingsurce acts as a generic prxy t a datasurce. An OrdersBindingNavigatr is als assciated with the bind. The binding navigatr is a Tlstrip cntrl yu can use t get VCR-like navigatin f yur data. A lt f labels and textbx cntrls are added t the frm ne fr each clumn in the Orders table. The reasn cntrls were added instead f a datagridview is because we selected Details in the previus exercise. Page 8

13 See Figure 1.8 fr what the frm shuld lk like. Figure 1.8 Frm after dragging Orders table frm DS Windw In the DataSurces windw, click the Orders nde t expand it. Lcate the Order Details nde lcated inside the Orders table (represented as part f the table due t the parent/child between Orders and rder details) Drag the Order Details table lcated inside the Orders table t the bttm f Frm1 Nte: Because yu did nt select Details fr Order Details, this time a datagridview is created. Yur frm shuld lk like Figure 1.9 Page 9

14 Set the Dck Prperty f the rder_detailsdatagridview t Bttm Figure 1.9 Frm1, after dragging tw tables frm Datasurces windw (n cde written) Select Debug Start Debugging menu cmmand Frm1 appears. Ntice that: When yu change the psitin (r selected recrd) in the Orders this autmatically updates the rder details datagridview. Use the Binding Navigatr t change psitins in the rders table. The BindingNavigatr has the new, delete, gt last, g t first, etc. all f these buttns have been wired and have the functinality needed. Nte: We have accmplished a master/details view with navigatin and perfrmant strng-typed databinding withut writing a single line f cde. Clse the applicatin r stp debugging Page 10

15 Task 2 Custmize the Detail cntrls t readnly types In the previus task, we dragged the Details View and it defaulted t TextBx cntrls fr all the clumns. Let s nw custmize this. In DataSurces windw, Click n the drpdwn arrw next t OrderId, in the Orders table (see Figure 1.9) Figure 1.9 Custmizing the cntrl type fr details view Select Label in the cntext menu as the type fr OrderId Delete rderidlabel and rderidtextbx frm Frm1 Frm the datasurces windw, drag & drp OrderId frm the Orders Table int Frm1; psitining s it aligns with the ther details cntrls (and replacing the tw cntrls yu just deleted). Select Debug Start Debugging and preview the changes DataLab applicatin launches Ntice hw rderid is nw a label instead f a textbx; yu can use the same prcedure t custmize the ther clumns. Clse the applicatin ( r select Debug Stp Debugging menu cmmand ) Page 11

16 Exercise 3 Custmizing a DataGridView Task 1 Adding UnBund clumns t the view RightClick n rder_detailsdatagridview Select Add Clumn frm the ppup menu The Add Clumn Dialg appears ( see Figure 1.10 ) Click Unbund Clumn Figure 1.10 Add Clumn dialg Nte: Unbund clumns are clumns nt bund t data. Their values are prvided dynamically via eventing in the Gridview. Enter SubTtal fr Name Select DataGridViewTextBxClumn fr Type Enter SubTtal fr Header Text Check Visible Check Read Only Click Add t save t add this clumn Click Clse t dismiss the Add Clumn Dialg Click OK t clse the Edit Clumns dialg Page 12

17 Select the rder_detailsdatagridview, set the fllwing prperties: VirtualMde = True Nte: VirtualMde has t be True when using Unbund clumns. If yu d nt set Virtual Mde = true, the CellValueNeeded (belw) will nt be called. Task 2 Custmizing Cell frmats RightClick n rder_detailsdatagridview Select Edit Clumns frm the ppup menu The Edit Clumns dialg appears Select UnitPrice t edit its prperties Lcate the DefaultCellStyle prperty Duble Click DefaultCellStyle CellStyle builder dialg appears Set Frmat = C2 Click OK t clse CellStyle builder dialg Nte: C2 Frmat will frmat the cntents f this cell as Currency. Click OK t clse the Edit Clumns dialg Task 3 Ppulating the Unbund clumns Click n the Events icn in the prperties fr rder_detailsdatagridview Lcate CellValueNeeded event Nte: CellValueNeeded will be call nce per each Unbund cell that needs a value. Inside this event, we can set the value that needs t be displayed. In this case SubTtal = UnitPrice * Quantity Duble-Click n CellValueNeeded t add a handler Page 13

18 Add the fllwing cde: // C# DataGridView grid = sender as DataGridView; try { // There are mre efficient ways t d this.. cded this way fr dem simplicity decimal subttal = (decimal)grid["unitprice", e.rwindex].value * (shrt )grid["quantity", e.rwindex].value ; e.value = subttal.tstring( C2 ); } finally { } VB: Dim grid As DataGridView = CType(sender, DataGridView) Try 'There are mre efficient ways t d this.. cded this way fr dem simplicity Dim subttal As Decimal = _ CType(grid("UnitPrice", e.rwindex).value, Decimal) * _ CType(grid("Quantity", e.rwindex).value, Integer) e.value = subttal.tstring("c2") Finally End Try Task 4 Handling CellPainting t highlight cells Nte: CellPainting is called befre the cell will be painted; handle this event t highlight any rder details with discunts greater than 10% Click n the Events icn in the prperties fr rder_detailsdatagridview Lcate CellPainting event Duble-Click n CellPainting t add a handler Add the fllwing cde in the handler: // C# DataGridView grid = (DataGridView)sender; // Make sure it is the Discunt clumn & it is nt the header if (grid.clumns["discunt"].index == e.clumnindex && e.value!= null && e.rwindex!= -1 ) { flat discunt = (flat) e.value; if ( 0.100f < discunt ) { e.cellstyle.backclr = Clr.Red; } } VB: Page 14

19 Task 5 Remving unneeded clumns & freezing clumns Right-Click n rder_detailsdatagridview Select Edit Clumns Select the OrderId clumn in the selected clumns List Click Remve Nte: Since yu are viewing the details fr an rder, this clumn is already shwing n the tp f ur frm. Select PrductId in the selected clumns List, set the fllwing prperties: Frzen = True AutSizeMde = DisplayedCells Nte: The frzen prperty is used t make sure this clumn always shws. When the grid is shrinked, all the ther clumns will be resized first, and this frzen clumn will be kept cnstant s it always shws. The AutSizeMde is set t Displayed Cells s the grid calculates the clumn width based n what is shwing. Displayed cells are all the cells in the screen, including the header Click OK t clse the Edit Clumns Dialg Task 6 Preview all the changes Select Debug Start Debugging menu cmmand DataLab applicatin launches Ntice the UnitPrice and SubTtal clumns are frmatted as currency. The frmatting fr UnitPrice was set in the designer ( n cding needed); the frmatting fr SubTtal was dne in the CellValueNeeded event where its value was prvided-. Shrink the frm (hrizntally) Ntice the frm stps shrinking at PrductId. This clumn is frzen and will nt shrink. Click n the Discunt clumn t enter a value. Enter 0.5 Ntice when yu Tab t the next clumn, the Discunt clumn changes its BackClr t Red. It is because it has a discunt > 0.10 Clse the applicatin Page 15

20 Exercise 4 Binding t business bjects Task 1 Open startup prject Open Visual Studi 2005 Select File Open Prject/Slutin menu cmmand Enter the File Name Fr VB, C:\Micrsft Hands-On-Lab\HOL-CLI03\Surce\Exercises\Starter\VB\BuildingMaintenance Fr C#, C:\Micrsft Hands-On-Lab\HOL-CLI03\Surce\Exercises\Starter\CS\BuildingMaintenance Select BuildingMaintenance.sln Click Open Nte: The slutin has tw prjects: BuildingMaintenance is an empty Windws applicatin. Facilities is a class library with a few business bjects. With the exceptin f the campus class implementing INtifyPrpertyChanged, the classes are very basic. It is just a few prperties per class t describe an bject (such as a Building, a Campus, r a Cmpany). Page 16

21 Task 2 Create a business bject datasurce Select Data Add New DataSurce menu cmmand Select Object as the datasurce type Click Next Expand the Facilities Namespace ( see Figure 1.13 ) Figure DataSurce Cnfiguratin Wizard fr business bjects Select Campus Click Next Click Finish Page 17

22 Task 3 - Create Master/Details frm using business bject datasurce Open BuildingMaintenance.Frm1 in the frms designer Select Data Shw DataSurces menu cmmand The datasurces windw appears ( see Figure 1.14) Figure DataSurces windw shwing bject Datasurce Click n the Dwn arrw next t Campus Select Details frm the ppup-menu ( see Figure 1.15) Figure 1.15 Selecting Detailed View fr Campus bject Drag Campus frm DataSurces Windw t Frm1 Ntice that a BindingSurce and BindingNavigatr were added t the frm; alng with Details Cntrls fr the Campus bject. Exact same behavir than earlier exercises when binding t databases. Drag the Buildings prperty frm the DataSurces windw t the bttm f Frm1 Ntice a DataGridview was created, with ne clumn fr each public prperty in the Building Class. Page 18

23 Frm1 shuld lk like Figure 1.16 Figure Frm1 after tw drag & drps frm the datasurces windw Duble-Click n Frm1 t add a Lad event handler The fllwing cde in the handler will bind ur frm t an instance f a Cmpany s facilities: // C# VB this.campusbindingsurce.datasurce = Facilities.Cmpany.Micrsft ; CampusBindingSurce.DataSurce = Facilities.Cmpany.Micrsft Select Debug Start Debugging menu cmmand BuildingMaintenance launches Ntice the details and the datagrid are ppulated. The BindingNavigatr wrks t. Yu can mve frward and back, and can delete a recrd. Nte: The new buttn in the binding navigatr is disabled because the Campus class des nt have a default cnstructr. Clse the applicatin ( r select Debug Stp Debugging) Page 19

24 Task 4 Update business bject Add a buttn t the campusbindingnavigatrtlstrip ( see Figure 1.17) Figure 1.17 Custmizing a BindingNavigatr with an extra buttn Set the fllwing prperties in the just added tlstripbuttn1 (Name) = tlstripbuttn1 BackClr = Desktp DisplayStyle = Text FreClr = ActiveCaptinText Text = UpdateCampusName Duble-Click n tlstripbuttn1 t add a click handler Nte: In the clickhandler, we will update the name f ne f the campuses. The gal is t shw that an update t a business bject will be reflected in the User Interface because the UI is databund. Enter the fllwing cde in tlstripbuttn1_click: // C# : Facilities.Cmpany.Micrsft[0].Name = "Updated"; VB: Facilities.Cmpany.Micrsft(0).Name = "Updated" Select Debug Start Debugging menu cmmand t preview the changes The app launches Click the Update Campus Name buttn Page 20

25 Ntice the user interface immediately changes the name t Updated (Figure 1.18) Figure 1.18 A databund business bject triggered the UI t update Nte: The Campus class ntifies the UI cntrls that a prperty has changed via the INtifyPrpertyChanged interface expsing the PrpertyChanged event-. Fr any business bject that will be wired fr a simple (1 t 1) binding, the interface needs t be implemented. Page 21

26 Lab Summary In this lab yu perfrmed the fllwing exercises. Create a datasurce and add it t the Datasurces windw Databinding a DataSurce t a frm Custmizing a DataGridView Binding t business bject In this lab, yu explred sme f the new databinding features in windws frms 2.0. Yu used the prductivity enhancements f the datasurces windws t generate master/details fr data cming frm bth a database and a business bject. Yu accmplished bth f these with ut having t write any cde. We als explred a few f the ptins in the new DataGridView cntrl. The datagridview allws yu t add Unbund clumns and prvide the value t be displayed via the CellValueNeeded event. It als allws eventing t frmat, cell paint, and handle events. Yu explred these features in this lab. Page 22