Working with Visual Studio 2010 - Part 7

 In part 7 I create the user interface for the Book Store application. I show how to create a Windows Presentation Foundation (WPF) application that can take advantage of the Visual Studio Data Sources window and DataBinding. Finally I checkin the new project associating it with the developer task.

 

0:00

hi my name is Julio Casal and in this

0:02

video I will show you how to create user

0:05

interface for our bookstore sample

0:07

application using visual studio 2010

0:10

remember we are using beta 2 of both

0:12

Visual Studio 2010 and team Foundation

0:14

server 2010 so as you might remember H

0:17

we have this task at hand build the book

0:20

list screen and we have already created

0:23

the business s of this by creating the

0:25

book manager

0:27

class that would return a list of books

0:30

okay now for this H for this video we

0:33

are not only creating a a a window that

0:37

will show all the books but we'll also

0:39

be able be able to filter the books

0:41

using the book type so I I already

0:43

created another method get book list

0:46

using the book type parameter that will

0:47

filter the list using this uh word

0:50

syntax in the link query so let's close

0:53

this and this and let's

0:56

create right click at new project let's

1:00

create a WPF application that we will

1:03

just

1:05

call bookstore.

1:10

Windows okay

1:12

so right now the the project is been

1:16

created and we get this um Sul designer

1:21

here we will first work a little bit in

1:23

the layout so let's click over here so

1:26

we get two rows here in this grid layout

1:30

and what we want to do right now is to

1:32

add a stack panel in the top so we will

1:35

play some controls there let's open all

1:37

the blf

1:39

controls look for stack panel we will

1:41

place this here okay

1:44

let's make it take all the available

1:47

space

1:49

here

1:52

okay

1:54

nice okay so now that we have that let's

1:58

start by adding our our data Grid in

2:01

order to do that let's go to data show

2:03

data sources let's click add new data

2:06

source click

2:07

object let's add a reference because we

2:10

have not added a reference to the

2:11

business project click

2:13

okay we can see the list of entities

2:16

here let's select book click finish and

2:20

what we get in the left side in the data

2:22

sources is the layout of the book uh

2:25

entity that we created in the past

2:28

video okay let's wait a little

2:31

bit okay as you know all this is being

2:34

added to Source control which is right

2:36

now been done by the by this

2:43

wizard so being right

2:46

here what we can

2:49

do okay what we can do is to just drag

2:53

this book entity into the bottom side

2:56

okay let's drag it here and you can see

2:59

we already have our data grid so let's

3:02

just make it fit into the available

3:04

space in order to do that we will just

3:07

go here to the Su let's close

3:10

this

3:12

okay and let's modify a little bit of

3:14

this um properties like hate we don't

3:18

need this the alignment we don't need

3:20

that go for the

3:22

margin don't want

3:25

that right now let's remove the width

3:28

and the vertical alignment you can see

3:30

it fits the the bottom route right now

3:33

in the top side of this let's add some

3:37

controls okay let's add a

3:42

label let's add um text box and a

3:48

button okay we'll we will want to have

3:52

this stack panel use a different

3:54

orientation like an horizontal

3:56

orientation you can see for the label

3:59

let's

4:00

put type or maybe book type for the text

4:06

box let's change the name

4:08

to type text

4:11

box and for the button let's name it

4:15

search

4:17

Buton and the content will be the name

4:20

the what we see displayed here will be

4:23

search okay this might be too big that

4:28

will be good

4:30

okay

4:31

search and for the margin let's say uh

4:36

maybe five z0 Z should be

4:40

good okay now the hate of this uh top uh

4:45

grid

4:46

row let's go for row

4:50

definitions you can see we have two rows

4:53

in the top one let's do something like

4:56

maybe 40 and in the other one just

5:00

asterisk

5:03

okay you can see this is the layout we

5:05

just got

5:09

here

5:12

okay so now let's just fix a little bit

5:15

also the some properties of these

5:18

controls for example the label the

5:22

basically the height of this

5:24

controls

5:28

okay okay

5:34

now let's also modify some properties of

5:36

the stock panel like the hate the

5:38

horizontal

5:39

alignment and the vertical

5:42

alignment okay might also remove the

5:45

width and we have a nice interface right

5:49

now okay so in order to retrieve the

5:53

actual books to this interface let's

5:55

just uh double click in the search

5:58

button we get our Handler here and what

6:01

we're going to do you can see we we

6:03

already have let's just CLI this we

6:05

already have some template code here in

6:08

order to retrieve the information that

6:10

we want let's cut this paste here and

6:13

the click you can see that we're

6:15

creating um collection view Source

6:17

called book VI source that is actually

6:20

finding a resource that we already have

6:23

in the s that was done by the designer

6:26

that resource is right here collection

6:28

view Source book view source which is

6:30

actually creating creating a design

6:32

instance of the book class in this data

6:35

grid so we are just finding that

6:37

resource here and what we want to do is

6:39

to H give some source to the book view

6:42

Source okay so this book view source is

6:45

the source of the data grid so in order

6:47

to do that let's create a book manager

6:51

instance you remember we had that object

6:55

creting in the other project let's just

6:56

add a using statement manager equals new

7:01

book

7:02

manager and now what we can do is to say

7:06

manager that getbook list we will use

7:10

our new overload so we will just

7:15

say type text

7:18

box. text fold the filter and that's it

7:23

so now let's test this uh application

7:26

okay buug start without debugging oh I

7:29

think I missed something maybe we get an

7:31

exception

7:32

here yes I missed a couple of things

7:35

first and most important we need an

7:38

application configuration file that we

7:40

already have in our

7:42

tests this configuration file of course

7:45

has the connection string to our to our

7:48

uh database which is a SQL Server

7:50

Express database so what we're going to

7:52

do is just to import that file

7:55

into into this project so we will go to

7:57

bookstore bookstore. test

8:00

let's remove this filter and select ap.

8:04

config so we now have it

8:07

here right here and second we will just

8:11

right click the project and set and say

8:14

set as a start a project okay now let's

8:18

go debug start without

8:21

debugging let's type some filter like

8:24

for

8:27

example psychology

8:31

search and there you go you got all the

8:34

psychology books now you can see we

8:36

cannot really see too much of these

8:38

columns here so make a quick change

8:41

here let's go back to the

8:44

Sumo and we will find we will find some

8:49

interesting uh WID property in all the

8:52

columns we will just remove this size to

8:54

heater

8:56

stuff remove delete delete and delete

9:01

and delete let's run this

9:06

again and let's

9:09

say psychology search and there you go

9:14

we have our grid filtering by um by a

9:18

book title so that's it let's now just

9:22

finish this by doing our checkin right

9:25

click the solution check in select our

9:29

specific War item which is build the

9:31

book list screen click resolve to close

9:34

this check

9:39

in

9:41

okay and that's it