In this video we'll be setting up a C sharp wind Forum's application already have visual studio open
and to get started what we will do is go ahead create a new project and from the templates we're looking
for wind farms.
I can just search quickly and look for wind farms and then I want to wind farms or Windows farms up
in that framework.
So that's the one we're working with today.
So I select that template next then I give my project a name and this one is going to be my first wind
farms are you know I'm not going to do.
That's simply what I'm going to do is similarly it's a real world application.
So let's say we wanted to build our farms to support a car rental business some went to see car rental
up
so that is our project name.
And then that will be our solution.
Also let me just start by spelling here.
Car rental up and we can leave it at the dominant framework so you can see that you have a few versions
of them not Net framework if you have installed Visual Studio auto the box you probably have up to four
point seventy two or maybe you have four point eight.
Any of those work.
What's that leave buying that four point seven point two when you can put your SO that version also
so that we're on the same page.
And then I can go ahead and click Create when this project is created then you'll see something looking
like this and I call this the canvas it's is the farm up on which we will be putting visual elements
but before we get into all of that let's take some time to appreciate the interface and look at the
more important parts.
So if we look at our solution explorer and minus to the left here is might be to the right by default.
Once I have my visual studio set up that minus to the left if you look in there you see your solution
you'll see your project but then your project files really comprise the form one that see us and program
that see us know form one but see this represents this visual representation that you're seeing here.
So this is actually the farm one.
So if I close this by any accident to myself goes a tab if you don't click form one that says that is
what is going to get long.
So this is your farm.
Each farm that you're going to add is going to look like this until you start putting things on that
farm next in ports on file is programmed out.
Yes I can just click it so he can see inside and then you see that it looks just like a console program
the console programs come with a static class programmed by default the namespace which is the folder
that it's in and then the static void main except this one doesn't take an arguments but if you're not
familiar with console programming then that's a problem.
The most important thing to note is that you don't want to be editing this file.
All right.
So the program notes yes later on when you know what you're doing you can edit it and usually you be
editing this file this line and beyond.
But the things that are here these functions are initialize us and I'm not going to spend time telling
exactly what they're initializing this mode Please don't comment or delete them.
And then this one is what actually sees what should be launched when the program launches.
So we have form one that's yes you do seeing launch a new instance of farm one.
And when it does that it will launch our farm that we are designing.
All right.
So we're going to perform a quick activity where we're just going to start this application and we haven't
made any changes we just have it here and we're just going to click start and we will see this window
a lot.
So you see this window launch.
And if I hold it up side by side that can of us you see that.
Well the canvas is empty.
My new window is empty.
So that is what wind farms looks like at least out of the box.
No I just want to point out it's a mistake that's I've seen people make over the years and then they
get all they spend time debugging something or trying to solve a problem that they didn't really have.
So it's a common mistake to minimize this window inadvertently and then you're trying to do an operation
and trying to change quality trying to operate some way somehow.
And didn't you think Visual Studio is not working because it's still in debug mode.
So a new trick starts it goes into B book mode you're seeing all these diagnostics and OK maybe I need
to visit a studio.
Those didn't stand out too but then you're trying to you know change the code and it's not changing
I think that music studio is in an error state.
What happens is that as long as you're in Bebo mode you can't make code changes.
So if you're a visual studio looks like this even though the window is not up on the screen then you're
still in debug mode so you need to make sure you press stop or when you close the window.
So I minimize that just though.
But if I close it as an X then it exits debug mode.
So a common mistake is that people forget you know the launch of the tests and then they forget to close
it and then they go back to business today and try to make whatever adjustments they need to make and
they can't and they think that it's an error but they're really still in debug mode.
I'm just pointing that out in case you know when you're going along you.
So that you can be aware of that come on mistake.
Now the next most important part of this wind farms Development sets of features would be the tool box.
So I have my tool box being kind of underpinned or well docked to the side here.
If you don't see a tool box pane then you can always go to view and then you just look for tool box.
All right there's tool box or you can memorize that keyboard shortcuts if you want but the fact is it's
there if you don't see it readily just go to view and click tool box and launch it.
If you close it by accident you go to view click tool box and launch it's art.
So at any point if I have a pin that you don't have you simply need to go to view find that pain and
open it.
So let's start looking at tool box so in tool box you see that there are some categories of controls.
And for our activity today I want us to focus on the common controls.
If you just you know expand come on controls and take a while and look you can pause this video and
just take a while and look through the different controls you can posit right here and do that.
But I'm going to continue.
And the first thing that I would want to do when somebody launches my application is let them know what
application they have launched.
I mean I'm sure they went and click double click the application to launch it but then you still want
a bizarre presentation right.
So I would bring over a label.
All right.
So windfarms development leads to below the interfaces drag and drop.
So I can drag over the label placed it somewhere and for some reason I get this error you might not
see if you do then you just like okay.
But it was still I love it to proceed.
I'm not entirely sure where I get that error but I'll be getting it.
I mean need to check the installation of Visual Studio but pushing pushing on we look at the label here
and then we want to you know we see the label.
It's not ideal.
It says label one that takes this tiny and so on and then your first instinct might be okay.
I need to edit this text make it bigger or change the text that's in it.
And then your second instincts might have you double click and then you double clicked and then you
ended up in the C sharp code file.
So this is what you call the code behind.
So now I want to explain two things to you and I know this is just to help you be careful when you're
doing these activities.
So I'm going to go back to the design and then what I'm going to show you is that when you double click
control a visual element what's what is happening is that it is going to generate a method stub and
it is going to generate in this case a click event.
So a click event means that when I click this label this code is going to fire.
No I don't need any click event on my label really and truly I don't need anything up in when this label
is clicked.
But I'm just pointing that out because when you double click these visual elements all you're doing
is generating method stubs.
So and once again the reason for you having double clicked it's would be to change its properties.
So we want to change the properties we want to change a text that's in there.
I want to change you know that the whatever it is up to we want to change.
So to do that we have to right click it and go to properties because once again when we double click
it will just generate a method.
It will generate some events.
And that's not necessarily what we want.
All right.
So when you right click the element in this case the label and then I go to properties then it will
launch another pin that might be and was there already.
But for you it may not have been visible but it will launch a pin and then this being allows us to change
the properties of this visual element.
Now let me take this time to explain to you that everything in C sharp is across the very visual elements
that you're dragging over in from the tool box they're listed here.
The button is a class but when you drag it over you've instantiated an object of this class.
So in the context of the label labeled as a C sharp class you drag it over you know have an object called
label 1 and this object has properties that can be changed and these properties are all up sedated inside
of the object and by extension the class type art.
So I have this object here on my own forms called label 1 and it's of the type the class type label
and then I'm going to change the properties so I can change the funds.
So I hope you pause the video and look through all the possible properties that could be changed there
are quite a few.
I'm not one to go through every single one.
I just want to focus on the one that is important which is fund.
So I want to change the funds so I expand the funds property.
I see name that will be the type of funds I can change that to maybe.
Well you may have other funds or funds that you don't have but then want to make some changes so you
can style it's how you see fit.
I'm just changing insults so I change a name I change the size and as you can see the changes are being
revealed real time and then I'm going to change the text that's being displayed because I want not to
see a label one but to see something like a car or into a system.
All right.
And then Karen does this thing goes off so I can just pull it back in.
I wanted to be since I like that you can see it's more.
Well it feels on the label container so I'm going to drag it to the center of the forum itself and there
I have my own label Kyra intel system.
All right.
So I took the label and I changed the properties that I wanted.
I know I can see the manifestation of those changes.
All right.
So let's start dragging over some actual form elements and if you have any experience building forms
you know in web applications then it's the same concept you will have a form you have controls that
allow the user to enter information and of course based on the visual element to use you are controlling
the type of information that you're expecting from the user.
And then ultimately we have a submit.
But so far a car rental system will be collecting the customer name the date that the rental is being
made the date it is suppose the car is supposed to be returned and the type of car that is being or
entered and then we'll have a submit but nice and simple but we are using a few form elements and that
along the way we'll see exactly how each one works.
So let's start with the customer names.
So I don't want to drag over the text box for that.
So ICF takes walks and that I think is the most ideal control and there's a little error again but I
think that the text box is the most ideal control to you know collect the customer name the name of
the customer who is in the car.
All right.
No I just drag it over the text box.
I have it on the form but I don't know if if if I come back tomorrow I have my I mean forget why I have
the text box there is somebody else's obligation and I see a random text box they don't know what information
they're expecting from them.
So it is prudent of us to make sure that we have a label above each control.
Right.
So I have that label and I'm going to change the properties so this label is going to see customer name
right.
And then it is led to you know that will you.
This is a visual cue as to what this text box is for right.
So for each control we have a label that is going to kind of signal to the user hey this is information
I'm requiring from you for this country.
All right.
So we have customer name and if you want to change other properties maybe I want the fund to be a bit
bigger.
So I want this to be twelve.
All right.
And then you can see that what of is kind of hedging over the Facebook itself or is it just re positioning
so that everything looks good and uniformed.
All right.
So our customer name and then we have data in these old satchels data nine days old or the dates the
cars being rented and the data is to be returned because I want us to look at the daytime picture.
So I dragged that over and then I put it where I wanted to go.
And this one now will actually give us a call and say I'm just going to expand to so you can see the
full data in there and copy and paste is a beautiful thing.
So I want to call and control is one for the date.
It's bigger entered into one for the data it's being returned so I can just copy and paste I just use
controls so you control V after selecting it.
And there we go.
So we have two and then the label already have this label.
It has the fun size I want instead of dragging a little of a brand new label and going through the properties
every time I'm just going to copy this new book twice.
All right.
So copy and paste and position.
So that's that.
On this one.
And then I can just click the label and change the text.
All right so I'm just helping you along to be efficient in this because it can be time consuming when
you're go into the tool box and dragging over every time changed the properties over time so if you
can just you know get comfortable or realize copying and pasting is not such a bad thing and you just
know what to change.
Then eventually you become a monster.
All right.
So we're changing this to date oriented and I'm changing this one too.
Dates returned so the texts is returned.
All right.
The next thing that we're doing is the list off the type of cars and the one that is being rented so
far that I'm going to use a combo box so that dropdown list is probably what you would use in each GMO.
And that's fine.
In wind farms it's called a combo box.
They don't call it a jump start.
But then you may see other lists because you have the list box.
You also have the list view so well the list box is probably the the more power level until the combo
box does.
This is a drop note and this is just that area with at least in it.
So I'm going to choose the combo box since that's what you're probably more familiar with both as a
programmer or a web programmer and ready to be a user of any application.
So this one looks similar to a text box except you see that this was done I there which suggests that
it can be dropped.
Don't this I'm just going to expand this and I'm going to make sure that all my controls kind of have
the same with so everything looks uniform.
All right.
I'm going to copy one of my existing labels will fit Doan and then change the text.
So this one is type of car all right.
No I skipped this step earlier and just so you know.
So we need to click on the text box here again to see this that the black up here at the top.
So let's say this is a text box it's mode it's single line and you are probably wondering okay how do
I make it longer or how do I make it taller.
Because you know it is going to only adjust the width on the left or right.
So if you click that little black arrow you can make it multi line which then makes it you know if you
wanted to put in a paragraph or a facility at the intra inter off a paragraph amount of text then you
can do one or two lines.
So this will be perfect for like comments or something like that but focused on the AM I don't need
a tall or I don't need a paragraph looking structure I just need a text box from left or right.
So in the same way when we clicked the combo box you see that little black arrow and when we click it
it will it will allow us to see edit items.
So I'm going to click edit items and then I'm going to fill it with the types of cars that I expect
to show up when we select the dropdown box.
So the types of cars could be Honda Toyota and Honda and a very popular car back here my cool was LADA
And we also had the buggy.
All right.
So Honda Toyota Lada and buggy those are the cars that we have in our rental system.
And then to complete this exercise we are going to have a submit button so I go back to my tool box
get my button drag it over whether my error puts it on the screen I can meet this button as big and
bold as I want.
I mean I can resize it.
I can go back to properties and change the funds so I going to change this fund to look just like the
funds at the top.
That's the mature empty scripts capitals and the size of the text is going to be some of that twenty
five.
All right.
And then I don't want to say but the one that's OK.
So I wanted to see submit so this is going to be the submit button.
So let's just take a look at the farm.
We have the customer name with the data into that the dates return and the type of guy.
So let's just click Start which is going to see all the changes compile everything and then load up.
All right.
And here we are.
So we have our current system and I can test it out.
All right.
So I can enter the customer name.
I can use my date picker and select the date that looks really cool I guess I did go with very little
effort.
If you do a program you know that it's not that easy and the type of car the drop zone and I can select
but then you know it is that type of car that's combo box that allows me to type.
It's not time on autocomplete it's just the behavior off it.
It allows me to actually type in a value that might not have been in the list which is not necessarily
ideal because the point of a drop down list is that you don't want.
You want to control the person see selection.
Let's allow them to enter and then anything and then we put the submit button and we see that well even
though it looked good in the design the rendering doesn't look that way right.
Someone's off to modify it maybe the width so that the T doesn't get chopped off.
So I can disclose that and then we go back just the submit.
All right.
And then what I'm going to do with type of car know the combo box and we go back to our property.
So if you lost the properties you can always just right the control freak properties and then what we're
going to do is change the behavior.
So the drop down style has three modes.
It's as simple as when I click simply you notice that it no longer looks like a job.
No no it looks just like that text box.
That's not what we want.
So I'm going to go back and change that all changed to the other style as soon as I can find it right.
And I'm not finding it because I don't have this I have the farms selected.
So you have to make sure you're selecting the correct control when you're looking over by the properties
are it so simple dropdown and then dropdown list no actually looks more like what I'm expecting a looks
or not it looks on editable from the design and I'm sure that when we run again it will be just that
dropdown list that doesn't allow me to type anything in there.
All right.
So let's just click start again and take a look.
All right.
So this looks a bit better and also submitted showing properly and type of is giving me the list without
allowing me to type anything in there.
All right.
So if I fill out this form and I split my type of car.
And then I click submit my expectations that something is going to happen.
It's going to give me some feedback letting me know that I submitted something.
So that is where events programming comes in.
Right.
So we did discuss earlier that when we inadvertently double clicked the label and by extension do a
double double click any other control it will actually generate a method.
And that's that's not the way I want you to do it.
I wanted to be very are far more deliberate when generating events so that you don't run into problems
later on.
So I want to show you one arrow that might that you can you know prepare for when you have an event
that you didn't necessarily plan for and then you tried to do a cleanup.
You're going to get this arrow and then I want to cut the video here and in the next video we're going
to start looking at how to deliberately create events that actually do stuff.
So when you're in the code behind I call it the code behind.
So let's say we didn't have it.
And I wanted to get to the code file for the form one but yes I can right click on the form right click
pretty much anywhere in the interface here in the design and I will see that option that's his view
quotes if I actually curious if you could do it over there or if I do it on the farm view code is going
to appear.
So when I click view code it brings up that code file nonetheless.
No you don't want to edit much in this file just yet.
As it stands the only thing that's really really important or rather everything here is important.
But this method.
Because once again this is the method stuff that was generated as a click event on the label one.
So that means when I click this this method is going to fire it's empty so clicking it won't have any
effect but then obviously doesn't make sense to have these empty methods.
It makes the code messy and harder to maintain as you go along.
And so I would clean it up so I made it I made the mistake I'm going to clean it up so I delete it.
All right.
Now here is the problem that you might run into when deleting that and if you delete anything make sure
that's all you delete everything else here should stay the same way the public partial class form one
that's the name of the farm on the code file and it is inheriting from a base class called farm.
And then we have a constructor and that is just running this initialized component.
If you don't don't remove this if you remove anything else please don't remove these lines that are
there already.
All right.
So I removed the click event and then I click start and then we're going to get an arrow.
All right.
So it said it was there were build arrows.
Do you want to go to the last successful build to me that doesn't make sense to do.
Because I want to see there I don't want to continue using the program in its previous date someone
to click no and then the error list is going to tell me that it does not contain a definition for something
something something.
So that's a multiple but when I double click it is going to bring me to the era line and what it is
seeing to me now this is the design of dot.
Yes.
So this era line is in a file that we did not write.
We haven't been authoring any code.
All we did was drag and drop what's the engine.
The whole development studio is generating this code for us.
So each control that we've dragged over is represented here in code.
All right.
And then what did it's what you see is that we had created a click event and associated it with label
1.
And so it's looking for that to give in that function.
That's the function I just deleted.
So we all should know by and know that or if you don't that's fine.
Whenever you have a function and you're calling that function if the function does not exist then you're
going to get an error.
So you have to define a function and then you can call a set function.
So we had the function definition it was there we deleted it but we still have the phone song Call into
auto generated code.
So what we can do then is just remove this line because really we don't need to call the function because
we just deleted it.
And then by making that adjustment I can click start again and then I'm in business.
So that's just another thing I wanted to help you through because maybe you would have generated some
click events or some events that you didn't necessarily want to do.
Bad accident and that's fine that's understandable.
But then you remove them and the narrative to arrows.
I'm not sure how to go through the arrows.
That's his whole.
So this is us designing form one in the next video we'll be looking at renaming or controls and the
importance of doing so and how we will actually collect the information that was input into the form.