IntroductionWelcome| 00:00 |
(music playing)
| | 00:04 |
I'm Walt Ritscher, and I want to welcome
you to my Visual Studio 2012, Essential
| | 00:09 |
Training series.
If you write code for a Microsoft
| | 00:12 |
platform like ASP.net, Windows phone or
Windows desktop, you should be using
| | 00:18 |
Visual Studio.
This amazing product contains every
| | 00:21 |
conceivable tool you need to be a
productive developer.
| | 00:25 |
In this course, I'll start by exploring
the giant list of project types in visual studio.
| | 00:30 |
And show the editors for C Sharp, Visual
Basic, and other programming and markup languages.
| | 00:37 |
Next, I'll look at the code editors and
how to customize them to make you more productive.
| | 00:42 |
You'll see how to break point your code
for debugging purposes, and explore
| | 00:45 |
important status windows like the watch,
threads and call stack windows.
| | 00:50 |
Finally, we'll take a tour of the various
designer windows which help build UI
| | 00:54 |
front ends for your application.
So let's exploring Visual Studio 2012.
| | 01:01 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
If you are a member of lynda.com, you
have access to the exercise files used
| | 00:05 |
throughout this title.
I've copied the exercise files to my
| | 00:08 |
Desktop, but you can put them anywhere
you want.
| | 00:11 |
Let's take a look at what's available.
I'm going to open my Exercise Files folder.
| | 00:15 |
The Exercise Files are arranged by
chapter.
| | 00:19 |
I'll open chapter four.
Inside each chapter are the individual
| | 00:23 |
exercise files.
I'll look at video number four.
| | 00:27 |
Many of the chapters have two projects.
One starting project and one that's completed.
| | 00:31 |
You can open these chapter folders
directly from your hard drive by
| | 00:34 |
double-clicking on the solution file.
I'll open this Final folder, and then
| | 00:38 |
double-click on this SLN file.
You may not see this extension on your
| | 00:43 |
computer, depending on how you have your
options set.
| | 00:47 |
You can also open a project by going to
File > Open Project.
| | 00:54 |
I'll open chapter five.
Final version.
| | 00:58 |
Not all projects will work in the free
editions of Visual Studio.
| | 01:02 |
For example, trying to open a web project
in the Express For Windows Phone Edition,
| | 01:06 |
is not supported.
Now that we've seen how to open the
| | 01:08 |
exercise files, let's get started.
| | 01:11 |
| | Collapse this transcript |
|
|
1. Getting StartedWhat is Visual Studio 2012?| 00:00 |
Visual Studio has been around a long
time.
| | 00:02 |
If you work with Microsoft Programming
platforms, then I'll wager that you have
| | 00:07 |
installed it in your computer at some
point.
| | 00:10 |
But many of you are encountering Visual
Studio for the first time.
| | 00:13 |
A natural question to ask if you are a
new user is what is Visual Studio.
| | 00:18 |
Visual Studio is a tool for developers
available in paid and free versions.
| | 00:23 |
It is also a family of related tools
labeled with the Visual Studio branding.
| | 00:29 |
Microsoft has a term they use for the
Visual Studio work environment.
| | 00:33 |
It is known as the Integrated Development
Environment or the IDE.
| | 00:37 |
Here is a screenshot of the IDE.
It has multiple tabs, lots of tools in
| | 00:43 |
the toolbar across the edges of the
screen.
| | 00:47 |
Learn to love this interface as you will
spend a good portion of your work day
| | 00:51 |
within its walls.
Ask most people what they think a
| | 00:54 |
programmer does while at work and they'll
probably say writing code.
| | 00:57 |
One of the features that makes Visual
Studio successful is its detailed support
| | 01:03 |
for code editors.
These editing tools attempt to ease the
| | 01:06 |
burden of writing and editing code and
markup.
| | 01:09 |
Visual Studio contains studios for all
the major languages like C++, Visual
| | 01:14 |
basic and C#.
The number of project types available in
| | 01:19 |
Visual Studio is astounding.
If you can think of a project that
| | 01:23 |
targets Microsoft technology, there's
probably a template for it available
| | 01:26 |
inside Visual Studio.
Out of the box, Visual Studio contains
| | 01:31 |
dozens of project templates.
Visual Studio 2012 also fully
| | 01:35 |
incorporates the internet into the
project tools.
| | 01:37 |
You can easily download new templates and
sample projects from the new project dialogue.
| | 01:43 |
When you write software, you will also
create bugs.
| | 01:46 |
Visual Studio has a full suite of
debugging tools integrated within the IDE.
| | 01:51 |
You can quickly troubleshoot an emerging
problem minutes after writing the new code.
| | 01:56 |
Many developers create unit tests for
their classes at the same time that they
| | 02:00 |
write the code.
This is a common practice nowadays.
| | 02:03 |
If you like this test-based approach to
coding, you'll find a set of testing
| | 02:08 |
tools inside of Visual Studio.
There are many other helpers included in
| | 02:12 |
Visual Studio.
There are tools for researching the
| | 02:15 |
underlying tool constructs and the .NET
framework.
| | 02:18 |
The integrated help is superb.
No, really.
| | 02:21 |
It's the best help system yet, for Visual
Studio.
| | 02:24 |
You get tools for monitoring servers and
other network resources.
| | 02:27 |
It comes with a set of code generation
tools.
| | 02:31 |
You write some boilerplate templates, and
let Visual Studio automatically produce
| | 02:35 |
the code.
If you build user interfaces, then you'll
| | 02:38 |
appreciate the visual designers in the
IDE.
| | 02:40 |
They have drag and drop UI creation and
are indispensable for visualizing and
| | 02:45 |
constructing your beautiful interfaces.
Naturally, Visual Studio includes
| | 02:50 |
compilers for compiling your source code
into the finished executables.
| | 02:54 |
If you have more complex needs, extra
steps that must be performed before or
| | 02:58 |
after the code compile, try the
sophisticated build engine available in
| | 03:02 |
visual studio.
Once the app is ready, you have to get it
| | 03:06 |
onto the user's computer, or deploy onto
the production server.
| | 03:09 |
That is where the deployment tools come
into the picture.
| | 03:13 |
Data is the core of many business
applications.
| | 03:15 |
Visual Studio includes tools for
creating, testing, and managing database schemas.
| | 03:21 |
You can create dummy test data from
within Visual Studio and add it to your database.
| | 03:26 |
For the code and UI side, you might
want to check out the data binding tools.
| | 03:31 |
You'll find most of the data binding
tools in the UI designers.
| | 03:34 |
You can drag a data source onto a form
and have Visual Studio generate all the
| | 03:38 |
code to work with that data.
Visual Studio includes tools for creating
| | 03:43 |
object relational mappers or ORMs.
Entity Framework is the most mature of
| | 03:48 |
the included ORM tools.
With Entity Framework, you can create an
| | 03:52 |
ORM from the database schema, from your
existing code base, or from architectural documentation.
| | 03:58 |
There is also a project and team
management system available inside Visual Studio.
| | 04:03 |
With it, you can track software bugs and
work items.
| | 04:06 |
It provides a source control system for
the team.
| | 04:10 |
It provides a project specific online
team portal.
| | 04:13 |
And you get detailed reports for team
leads and managers.
| | 04:17 |
As you can see, Visual Studio is a big
complex tool and ecosystem.
| | 04:21 |
I'll show you the different versions
available in the next video.
| | 04:24 |
| | Collapse this transcript |
| Understanding the Visual Studio 2012 versions| 00:00 |
Microsoft produces a number of versions
of their popular Visual Studio product.
| | 00:06 |
I break their offerings into three
categories.
| | 00:09 |
The Pay for license versions, targeted at
developers.
| | 00:12 |
The Free editions targeted at developers.
And the pay for license versions targeted
| | 00:17 |
at other disciplines.
Visual Studio is first and foremost a
| | 00:21 |
developer tool.
If you want the paid version, you have
| | 00:24 |
three editions to choose from.
The Professional edition is the
| | 00:27 |
entry-level offering.
Every feature in this offering is also
| | 00:31 |
available in the higher-priced editions.
The Premium edition adds some features to
| | 00:36 |
the IDE.
It is at this level that you start
| | 00:39 |
getting licenses to Microsoft products
through the attached MSDN subscription.
| | 00:44 |
Finally, comes the Ultimate edition, it's
packed with every possible feature.
| | 00:49 |
A huge list of additional software
licenses, and a price tag to match.
| | 00:53 |
You'll spend some serious cash for this
edition, which costs up to $12,000 per seat.
| | 00:59 |
I created a list of features that are
available in all paid additions.
| | 01:03 |
The IDE, which generally means the
overall work environment, has a ton of
| | 01:07 |
new features.
I love the multiple monitor support which
| | 01:11 |
you can see there are many deluxe items
on this list, like refactoring and
| | 01:15 |
support for JavaScript.
The debugger is first rate, there's also
| | 01:19 |
special tools for profiling your code and
analyzing code metrics.
| | 01:23 |
If you write Windows 8 store apps, you
can test them on the built in simulator.
| | 01:28 |
This is handy, you don't have to buy a
tablet just to test your application.
| | 01:32 |
You can check out my Building Windows
Store Application course here at
| | 01:35 |
Lynda.com to see it in action.
There is also a phone emulator included
| | 01:40 |
in the tool set.
It simulates the Windows RT run time
| | 01:43 |
environment with the matching small
screens.
| | 01:45 |
Plus, it includes tools for simulating
multiple touch points, tilt, and phone location.
| | 01:51 |
On the right side of the table, you can
see a list of all the project types
| | 01:55 |
supported in the paid editions.
You can create apps for the web, the
| | 01:59 |
desktop, for Microsoft Office and
SharePoint and even the Cloud.
| | 02:03 |
If you move up to the premium edition you
get a set of tools for managing the
| | 02:07 |
testing virtual machines and a number of
new testing tools.
| | 02:11 |
At the ultimate level you get a set of
architectural tools.
| | 02:15 |
Also, my favorite debugging tool is
included in this edition.
| | 02:18 |
The IntelliTrace feature is awesome.
There's no better word to describe this tool.
| | 02:22 |
It lets you record each step of a
debugging session and store the trace
| | 02:26 |
data in a file.
Later, a developer can reopen the trace
| | 02:30 |
file and play back the debugging session
that was recorded on the other machine.
| | 02:34 |
The trace file includes everything.
Including thread state, machine state,
| | 02:39 |
and variable content of the recorded
session.
| | 02:42 |
I don't show IntelliTrace in this course
because it is in the Ultimate edition.
| | 02:45 |
If you want to see it in action, you can
watch it in my Visual Studio 2010 course.
| | 02:51 |
Team Foundation Server is a project and
team management tool.
| | 02:54 |
TFS, as it is known, contains the bug
tracking tools and source control server.
| | 02:59 |
TFS is not included with your regular
Visual Studio IDE purchase.
| | 03:04 |
You need to buy a copy for your software
team.
| | 03:06 |
There is also a dedicated test version of
Visual Studio.
| | 03:09 |
It is optimized for team members that
test code instead of writing code.
| | 03:13 |
MSDN is an abbreviation for the Microsoft
Developer Network.
| | 03:19 |
MSDN is also a subscription service that
grants you access to additional software
| | 03:23 |
and resources.
If you buy a paid for license edition,
| | 03:27 |
then an MSDN subscription is part of the
package.
| | 03:30 |
If you want, you can also buy this
subscription without getting Visual Studio.
| | 03:35 |
I have the ultimate edition installed on
my developer computer.
| | 03:38 |
The attached MSDS subscription gives me
access to every known Microsoft operating system.
| | 03:44 |
I also get licenses for SQL Server and
other databases like Microsoft Access.
| | 03:49 |
Office licences are part of the bargain.
I recently had to get a copy of Excel
| | 03:54 |
2000 for testing purposes.
I found what I needed on the MSDN website.
| | 03:59 |
There are licenses for every other server
technology available, like Exchange Server.
| | 04:03 |
And you also get the business and
accounting tools that are part of the
| | 04:06 |
Dynamics family.
I need to say this, you get testing
| | 04:10 |
licenses for all these tools not
deployment licenses.
| | 04:14 |
That means when you deploy a SQL Server
database to a production server, you will
| | 04:17 |
need to pony up the cash for a real
license.
| | 04:20 |
Speaking of cash, what about the free
versions I mentioned earlier?
| | 04:25 |
Yes, there are free versions.
They match most of the features found in
| | 04:28 |
the entry level professional edition.
They support multiple programming
| | 04:32 |
languages, and each free edition is
designed for one category of project type.
| | 04:37 |
For example, web developer or desktop
developer.
| | 04:40 |
Here is a list of the free editions.
I'll bet you see one on this list that
| | 04:47 |
appeals to you.
you can install Express and pay for
| | 04:49 |
licensed versions on the same computer
without a problem.
| | 04:52 |
Note, not all the examples included in
this course will work on the free editions.
| | 04:57 |
To start your journey with Visual Studio,
go to the Microsoft Download sites listed here.
| | 05:03 |
The first link takes you to the main
visual studio page.
| | 05:06 |
There you can find the links to download
a trial version.
| | 05:09 |
The second link takes you to a product
comparison page.
| | 05:12 |
Imagine the happiness you will find
reading about the product differences.
| | 05:15 |
| | Collapse this transcript |
| Exploring the new features of Visual Studio 2012| 00:00 |
If you are a veteran Visual Studio 2010
user, then this is the movie for you.
| | 00:05 |
In the next few minutes, I will show the
improvements and changes added to the
| | 00:09 |
latest version.
Usually, a release of Visual Studio is
| | 00:13 |
tied to a dot net framework release.
That is true for version 2012 and Visual
| | 00:19 |
Studio supports the latest release of
.NET which is version 4.5.
| | 00:23 |
With this new version you can build
Windows Store apps and test them on an
| | 00:27 |
emulate or on a tablet or on your
desktop.
| | 00:30 |
Note, you need to run Visual Studio on
Windows 8 in order to create these types
| | 00:34 |
of applicaitons.
There's also support for Windows Phone 8 apps.
| | 00:38 |
Visual Studio (UNKNOWN) with several
phone simulators for testing purposes.
| | 00:42 |
A Cloud is also integrated into Visual
Studio.
| | 00:45 |
Let's talk more about that.
In the Microsoft world, Azure is the
| | 00:49 |
cloud solution, and Azure roles are the
basic unit.
| | 00:53 |
With Visual Studio, you can create,
administer, and deploy roles.
| | 00:57 |
The Web Role is similar to a web app.
It is how you deploy websites onto Azure servers.
| | 01:03 |
The Worker Role is similar to a Windows
service.
| | 01:07 |
Another role is the vVirtual Machine
Role.
| | 01:10 |
This is just what it sounds like, a way
to create Windows or Linux virtual servers.
| | 01:15 |
Visual Studio adds search functionality
throughout the environment, the Quick
| | 01:19 |
Launch helps locate the commands
available in the Visual Studio IDE.
| | 01:22 |
The Toolbox is searchable to provide fast
access to controls during development.
| | 01:28 |
The Add Reference dialog contains a
search box to quickly search all assemblies.
| | 01:33 |
Finally, the solution explorer has an
awesome search tool for filtering the
| | 01:37 |
list of available projects and files down
to a few.
| | 01:40 |
That you need to finish your coding
tasks.
| | 01:43 |
With search tools like these it is easy
to find what you are looking for in the IDE.
| | 01:48 |
True multi monitored support is now
available.
| | 01:50 |
Tear off any window or tab in the Ide and
drag it to another monitor.
| | 01:55 |
It's hard to demonstrate multiple
monitors in a video.
| | 01:58 |
To compensate I took a screenshot of my
three monitors.
| | 02:02 |
In the center screen is the main IDE.
On the left is an editor that I dragged
| | 02:07 |
to my left monitor.
And on my right side monitor, I have my
| | 02:13 |
XAML editor.
There are some designer enhancements in
| | 02:16 |
the new version.
The biggest change is in the
| | 02:18 |
consolidation of the Expression Blend and
the Visual Studio designers.
| | 02:23 |
Both tools use the same designer
components, so switching between these
| | 02:27 |
two companion tools is even more seamless
than in prior versions.
| | 02:30 |
.Net four adds the new Async and await
features to C Sharp and Visual Basic.
| | 02:37 |
Visual Studio provides support for these
new features, and makes them easy to use
| | 02:41 |
and debug in your code.
In the Wind RT world, there's a concept
| | 02:45 |
of portable libraries.
These are code libraries that are usable
| | 02:49 |
from C++, C Sharp, JavaScript and Visual
Basic ONRT apps.
| | 02:55 |
Visual Studio provides a new project type
to create portable libraries.
| | 02:58 |
The web developer gets a lot of love in
this release.
| | 03:02 |
There is great support for jQuery and the
new HTML 5 specifications.
| | 03:06 |
The HTML editor in Telesense is imrpoved
to work with HTML 5.
| | 03:11 |
Plus the editor comes with a ton of new
code snippets for generating Boilerplate HTML.
| | 03:17 |
The JavaScript editor gets collapsible
code sections, better tool tips, and a
| | 03:21 |
heap of new code management tools.
The CSS editor is much improved.
| | 03:26 |
It's gotten to the stage where I almost
like using it now.
| | 03:29 |
Better color visualization is one fix.
Improved in Telesense, code snippets and
| | 03:34 |
support for browser prefixes are some of
the new items, look for details later in
| | 03:38 |
this course.
A big ticket item for the web developer
| | 03:42 |
is the page inspector.
Web developers frequently need to check
| | 03:45 |
the runtime HTML source being generated
by their ASP.net web forms and views.
| | 03:50 |
Visual Studio page inspector is a
diagnostic tool that helps you dissect
| | 03:54 |
and observe the HTML source, and styling
information of your web page.
| | 03:58 |
With the page inspector, you can get a
live view of the browser DOM from within
| | 04:02 |
Visual Studio.
You can inspect the CSS for any element
| | 04:06 |
on the page.
And trace the information back to the
| | 04:08 |
matching CSS file.
You can also change the values of
| | 04:12 |
elements while the page is live, and
persist the changes back to the
| | 04:15 |
underlined files.
Okay, I think you get the idea, there are
| | 04:19 |
many more features available.
Go to this URL to learn more about all
| | 04:23 |
the new enhancements, you'll be glad you
did.
| | 04:26 |
| | Collapse this transcript |
| Setting up your developer computer| 00:00 |
There are a number of versions of Visual
Studio available for you to download.
| | 00:04 |
In earlier movie in this chapter provides
more details about the Visual Studio editions.
| | 00:09 |
Regardless of which one you choose, you
need to download the installer to your
| | 00:13 |
local computer.
Here is the link, if you haven't
| | 00:16 |
downloaded your copy yet.
You can get a 30-day trial version of all
| | 00:20 |
the paid for licenses editions,
Professional, Premium and Ultimate.
| | 00:25 |
There is also the Free Express editions.
This is important, if you use the Express
| | 00:30 |
editions while following my examples, the
screens on your computer, will not match
| | 00:34 |
the ones on my copy of Visual Studio.
Also, you will not see the same manuals
| | 00:38 |
or Visual Studio features either.
You can have many copies of Visual Studio
| | 00:43 |
on your computer.
If you already have Visual Studio 2010 or
| | 00:48 |
Visual Studio 2008 installed, you don't
need to uninstall them first.
| | 00:52 |
Visual Studio 2012 happily coexists with
them on the same computer.
| | 00:57 |
Also, you can have the Express editions
installed on the same computer.
| | 01:01 |
They will not interfere with the paid for
license editions.
| | 01:05 |
Since it takes up to an hour to install
Visual Studio, I won't take the time to
| | 01:09 |
do the setup in this video.
Instead, let me walk you through some of
| | 01:13 |
the screen shots of the installation
process.
| | 01:16 |
This is the initial setup screen that you
will see.
| | 01:18 |
It's asking you where to place the files,
how much room they'll take on the hard
| | 01:23 |
drive, and you need to agree to the
licensing terms.
| | 01:26 |
Next, you get to choose which optional
features to install.
| | 01:30 |
This is much more streamlined than
earlier versions of Visual Studio.
| | 01:33 |
I'm choosing all of the optional
features.
| | 01:36 |
And then, you would click on the Install
button.
| | 01:38 |
Then, you wait and watch the progress
bars move slowly across the screen.
| | 01:44 |
Then, you'll see this screen.
And then, right after this screen, you'll
| | 01:48 |
see the setup successful screen.
At this point, you can click the Restart
| | 01:52 |
Now button.
Once you finish the install, you can run
| | 01:56 |
Visual Studio.
The first time you run, you'll be greeted
| | 01:59 |
with the license screen.
If you have a paid version, enter your
| | 02:02 |
license key here.
If you have the trial version, you'll be
| | 02:06 |
able to skip the screen.
The next screen you see in Visual Studio
| | 02:10 |
is the Default Environment Settings page.
Your decision in this dialogue affects
| | 02:14 |
some of the layout and keyboard shortcuts
used inside the Visual Studio editors.
| | 02:19 |
For this course, I am using the general
development settings.
| | 02:23 |
Don't worry if you have already picked
one of the other choices.
| | 02:26 |
I'll show you how to change these
settings later.
| | 02:29 |
After the install is over, you should
also check for updates.
| | 02:32 |
Microsoft releases an update every 3 to 6
months.
| | 02:35 |
To see if there's an update, go to the
Visual Studio website.
| | 02:39 |
This is a screen shot of the current
release.
| | 02:42 |
Visual Studio 2012 Update 2.
You've got some work ahead of you to get
| | 02:47 |
your copy of Visual Studio installed.
But once you are over that hurdle, you
| | 02:51 |
will be able to create some remarkable
applications.
| | 02:53 |
I've already got the tools installed, so
let's move onto the next video.
| | 02:57 |
| | Collapse this transcript |
| Setting the Visual Studio 2012 options for this course| 00:00 |
Most developers I know have a strong
opinion on how they want their developer
| | 00:04 |
tools to look and behave.
Visual Studio 2012 is a powerful code tool.
| | 00:09 |
I have a few settings that I use during
this course that are different from the defaults.
| | 00:13 |
Follow the steps in this video to make
your copy of Visual Studio look the same
| | 00:18 |
as my copy.
I'll start Visual Studio from the start screen.
| | 00:22 |
I'm using Window 8, so to do that, I'm
going to press the Windows key on my keyboard.
| | 00:26 |
And then, I'm going to type in the word
visual.
| | 00:30 |
And then, I'll select Visual Studio 2012
from this list.
| | 00:35 |
There are two user interface features in
Visual Studio that I dislike.
| | 00:39 |
I'm not alone in my feelings.
Both these issues are frequently
| | 00:43 |
lambasted in the Microsoft community.
The first UI blender is the all cap top
| | 00:48 |
level menu.
Using all caps in a UI is a recognized
| | 00:53 |
readability killer, and Microsoft should
know better.
| | 00:56 |
The second UI annoyance is the washed out
color scheme.
| | 01:00 |
Visual Studio is configured with several
colorless UI themes.
| | 01:04 |
These themes are supposed to make the
environment designer friendly, but I need
| | 01:08 |
a bit more color in my UI.
Both of these issues are fixable by
| | 01:12 |
installing some Visual Studio extensions
that modify the default settings.
| | 01:15 |
Let me start by showing you the three
default colors.
| | 01:19 |
I'll open up the Tools menu, then I'll
choose Options.
| | 01:23 |
Next, open the Environment node and
choose General.
| | 01:27 |
At the top of my screen is a drop down
that lists the three themes, Blue, Dark,
| | 01:33 |
and Light.
You'll only get the Blue option if you've
| | 01:36 |
installed the Update 2 Visual Studio.
This is what the Dark version looks like.
| | 01:46 |
And this is what the Blue version looks
like.
| | 01:50 |
I do like this blue color theme.
I still will show you how to customize
| | 01:54 |
the colors even further.
Visual Studio extensions are applications
| | 01:58 |
to alter the behavior of Visual Studio.
To add these extensions open the Tools
| | 02:02 |
menu and choose Extensions and Updates.
Then, click on the Online node on the
| | 02:09 |
left side of the screen.
I'm now looking at a Microsoft website
| | 02:13 |
that lists all of the extensions
available for installation on my computer.
| | 02:18 |
I'm looking for one that will remove the
caps menu, so I will Type in Caps and see
| | 02:22 |
what I get.
This is the one I'm looking for.
| | 02:25 |
It's called RemoveCAPS.
Click here, and then I click on the
| | 02:29 |
Download button.
Next, I click on the Install button.
| | 02:33 |
And after a few seconds, I see a message
at the bottom of the screen that says you
| | 02:37 |
must restart Visual Studio in order for
the changes to take effect.
| | 02:41 |
I'm not quite ready to restart yet
because I want to install one more extension.
| | 02:46 |
For this extension I'll type in color.
And this is the tool that I'm looking
| | 02:52 |
for, the Visual Studio 2012 Color Theme
Editor.
| | 02:56 |
Again, I'll click on Download, then I'll
click on Install.
| | 03:01 |
And this time I will let Visual Studio
restart.
| | 03:06 |
Visual Studio doesn't look any different,
but I'm going to fix that.
| | 03:09 |
I'm going to go to my Tools menu and I'm
going to choose this RemoveCAPS.
| | 03:16 |
Now, I'll restart Visual Studio.
And the all cap menu has been changed to
| | 03:23 |
a proper cased menu.
And now, let's go look at the new Theme Editor.
| | 03:30 |
If I open up this Tools menu, and scroll
down here to this area, you can see
| | 03:34 |
something called the Change Color Theme
menu.
| | 03:37 |
This didn't exist before.
You can see I'm using the blue theme, but
| | 03:41 |
there are a number of other themes
available, like the Green theme, or the
| | 03:46 |
Red theme.
You can have a lot of fun customizing
| | 03:51 |
your user interface to the way that you
like.
| | 03:53 |
I have lots of developer friends who
prefer a dark background for the code editor.
| | 03:58 |
They like these versions light with dark
editor.
| | 04:00 |
I'm going to switch back to Blue and I'm
ready to continue.
| | 04:04 |
Now, I have my Visual Studio UI
configured to make me happy.
| | 04:08 |
There are a ton of options you can set
for your work environment.
| | 04:11 |
I'll show more of them as we work through
this course.
| | 04:14 |
| | Collapse this transcript |
| Getting a developer license for Windows Store app and Windows Phone projects| 00:00 |
There are certain project types that
require you to purchase a paid developer license.
| | 00:05 |
This is an additional cost to the Visual
Studio price.
| | 00:09 |
Here's an example of me trying to open up
a Windows 8 project inside Visual Studio,
| | 00:16 |
and it's asking me for my developer
license.
| | 00:19 |
The cost for this developer license is
$99 US.
| | 00:22 |
You'll need this license type if you're
doing Windows store app development or
| | 00:28 |
Windows 8 phone development.
To learn more about how to set up your
| | 00:32 |
developer computer with this license,
check out the building Windows store apps
| | 00:36 |
essential training here on lynda.com.
Watch the setting up your developer
| | 00:41 |
computer video.
| | 00:42 |
| | Collapse this transcript |
|
|
2. Exploring the Visual Studio WorkspaceCreating a Visual Studio project| 00:00 |
In this movie, I'll spend a few minutes
looking at how to create a basic Visual
| | 00:04 |
Studio project.
Elsewhere in this series, I have details
| | 00:08 |
on creating the different kinds of
project templates, and how to use the
| | 00:11 |
various tools in the application.
My goal in this movie is to show what
| | 00:16 |
happens the first time you run Visual
Studio, and how to create a basic project.
| | 00:20 |
Let's start Visual Studio.
On my machine I'm using Windows 8.
| | 00:21 |
So, to start Visual Studio, I will go to
the start menu by pressing the Window key
| | 00:30 |
on my keyboard.
This is the Start menu.
| | 00:32 |
In the Start menu, you can just start
typing the item you're looking for.
| | 00:37 |
I'm looking for visual, so I'll type in
visu.
| | 00:41 |
And then, I'll choose from this list.
You can see there are a number of items
| | 00:44 |
that have the word visual in there.
I'll choose this first one.
| | 00:49 |
Now, before I run this application, let
me right-click on it and show you another
| | 00:53 |
thing you can do in Windows.
At least in Windows 8.
| | 00:56 |
You can choose to pin this item to the
task bar.
| | 00:59 |
I've already pinned it in an earlier
rehearsal.
| | 01:02 |
So, I can unpin it here, and then repin
it.
| | 01:06 |
You can see, I can also do things like
uninstall the application, open it in a
| | 01:12 |
new window and run as administrator.
There are certain tasks that you can only
| | 01:17 |
do as an administrator.
So, what you can do is you'd click on this.
| | 01:22 |
You'll have to enter your name and
password here, and then click on Yes.
| | 01:25 |
Now, I'm running Visual Studio as a
second user on this machine.
| | 01:31 |
You can see at the top of the screen, it
says Microsoft Visual Studio, and then
| | 01:35 |
inside the parenthesis, Administrator.
Notice that it doesn't my settings that I
| | 01:39 |
set up in the earlier video, my color
scheme, and my no caps menu.
| | 01:43 |
Let's close Visual Studio and try this
again.
| | 01:46 |
I'll go to my Start screen, pressing the
Window key, typing vis, clicking here.
| | 01:53 |
This time I did not run it as an
administrator, so I'm using my normal account.
| | 01:57 |
Now, I'm ready to create a project, but
before I do that I want to show you one
| | 02:01 |
other item that's installed with Visual
Studio.
| | 02:03 |
There are a number of tools that are
installed as part of the process and one
| | 02:07 |
of them is a special command prompt.
So, I'm going to press the Window key on
| | 02:10 |
my keyboard, type in cmd for command.
And then, I'm going to chose this one
| | 02:15 |
here, the Developer Command Prompt.
What this gives me is a programmatic
| | 02:20 |
access to all of the tools like the
compilers and the build engines and the
| | 02:24 |
disassembling tools that ship with Visual
Studio 2012.
| | 02:28 |
So, I can type on this command line, a
name of one of these executables, like
| | 02:32 |
here's the C# compiler.
And if I had the correct arguments passed
| | 02:37 |
into this command line tool, I could
compile some source code into a finished executable.
| | 02:42 |
There are certain tasks which I use it
for that you just can't do inside Visual Studio.
| | 02:47 |
Okay, enough of this, let's go back to
Visual Studio.
| | 02:50 |
This is the starting screen in Visual
Studio.
| | 02:53 |
On the left side of the screen are a
number of hyperlinks for some standard actions.
| | 02:57 |
On this one, you can create a new
project.
| | 02:59 |
Here, you can open an existing project.
You can connect to your Team Foundation Server.
| | 03:04 |
And then, at the bottom, you've got links
to all the projects you've opened recently.
| | 03:07 |
These are some of the projects I created
during my Windows Store app title a few
| | 03:11 |
months back.
I'm going to choose new project.
| | 03:15 |
Now, I get to pick my language and my
project type.
| | 03:19 |
Here's the visual basic language, here's
the C# language.
| | 03:22 |
Within the C# language there are
different project types.
| | 03:25 |
I'm going to create a simple console
application by choosing Windows, and then
| | 03:30 |
Console Application.
Down here in the bottom part of the
| | 03:33 |
screen, you pick the name of your
project, the location of where you're
| | 03:37 |
going to place those files, and a
solution name.
| | 03:40 |
More discussion about solutions coming up
soon.
| | 03:43 |
I'll allow it to create a directory for
my solution, and then I'll click OK.
| | 03:47 |
At this point, I have a project open
inside Visual Studio.
| | 03:52 |
Here is my code editor.
And on the right side of the screen is an
| | 03:56 |
area called the Solution Explorer.
Here, you can see, I have a number of
| | 03:59 |
project files, program.cs, app.config,
and so on.
| | 04:04 |
Each project type adds a set of files and
settings that make sense for that type of application.
| | 04:08 |
To make an interesting application, I
would need to open the C# file, and write
| | 04:14 |
some code in this area.
Those topics are detailed in other movies.
| | 04:18 |
What I'd like to show you now is how to
create a project in one of the Express
| | 04:23 |
editions of Visual Studio.
To do that, I'm going to press the Window
| | 04:26 |
key on my keyboard, type in express, and
choose this shortcut.
| | 04:32 |
VS Express for desktop.
This is one of the free editions of
| | 04:37 |
Visual Studio.
It's optimized for building desktop type applications.
| | 04:41 |
So, you notice I have the same hyperlinks
over here, New Project.
| | 04:46 |
I have a reduced subset of the project
types.
| | 04:49 |
I still have Visual Basic, and C# and
some of the other languages.
| | 04:52 |
And I have a subset of the kinds of
projects that I can create.
| | 04:56 |
Here, I can create only in Windows Form
App, a WPF App, a Console App and two others.
| | 05:02 |
For variety, I'll choose this top one,
Windows Forms Application.
| | 05:05 |
And then, click OK.
Once again, you'll see an editor on the
| | 05:09 |
side of the screen.
A Solution Explorer on the right side of
| | 05:14 |
the screen.
A number of files from this project
| | 05:17 |
template including Form.cs,
Form1.Designer.cs, Program.cs, and many more.
| | 05:24 |
In summary, running Visual Studio is no
different than running any other
| | 05:27 |
full-featured desktop application.
It works in Windows 7 or Windows 8.
| | 05:33 |
Coming up in the next movie is the
thrilling story on how to use the
| | 05:35 |
Solution Explorer which lives over here
on the right edge of the screen.
| | 05:39 |
| | Collapse this transcript |
| Working with the Solution Explorer| 00:00 |
A complex business application might
consist of dozens of projects, thousands
| | 00:05 |
of code files, and hundreds of additional
items.
| | 00:08 |
With so many files loaded into Visual
Studio, you need a way to understand the
| | 00:12 |
chaos and navigate through your assets.
Solution Explorer is the tool that tames
| | 00:18 |
this potential mess.
I've opened Visual Studio, Solution
| | 00:22 |
Explorer is the star of this movie.
It's usually docked to the right edge of
| | 00:27 |
the IDE.
If you do not see it, you can enable it
| | 00:30 |
by going to the View menu, and choosing
Solution Explorer.
| | 00:34 |
Currently, solution explorer is empty.
I can fill it by creating a new project,
| | 00:40 |
creating a new solution, or opening an
existing solution or project.
| | 00:44 |
I'm going to open an existing solution.
I will go to the File menu and choose
| | 00:49 |
Open > Project/Solution.
Then I'll go to my Exercise File folder,
| | 00:56 |
chapter 02, movie 02, and open this Start
folder.
| | 01:00 |
Down at the bottom of my screen is a file
called MySolution.sln.
| | 01:07 |
You may not see the dot sln on your
computer depending on how you have your
| | 01:12 |
Windows Explorer or File Explorer
configured.
| | 01:15 |
To open this solution file I will click
on the Open button.
| | 01:21 |
Now, on the right side of my screen I can
see my solution and a number of children nodes.
| | 01:27 |
Before I talk more about the solution
explorer, let me talk about the
| | 01:30 |
difference between a solution and a
project.
| | 01:33 |
A solution into visual studio terms is a
container that contains 0 or more projects.
| | 01:39 |
When you load a solution into visual
studio, it loads all the tile projects.
| | 01:43 |
The solution I have open is shown at the
top of the solution explorer, it's called
| | 01:48 |
my solution.
And you can see over here it says I have
| | 01:51 |
nine projects, nine child projects.
You're probably asking yourself what is a project.
| | 01:58 |
A project contains all of the assets,
files, references and build instructions
| | 02:02 |
needed to construct a single dot net
assembly.
| | 02:05 |
Therefore, since this solution contains
nine projects, building the solution
| | 02:10 |
results in the creation of nine separate
exe or dll files on the hard drive.
| | 02:15 |
I will look at this ConsoleApp project,
it contains a number of files.
| | 02:21 |
It contains a file called
Assemblyinfo.cs.
| | 02:25 |
It contains a reference folder with
assemblies that I need to use during my
| | 02:30 |
build process.
And it contains a Program.cs file.
| | 02:35 |
If you look at different kinds of
projects you'll see there are different
| | 02:38 |
kinds of files.
Let's look at this MVC app.
| | 02:42 |
Now it has an app underscore data folder
and an App_Data folder which contains a
| | 02:48 |
number of VB extension files.
The extension tells Visual Studio what
| | 02:53 |
code editor to load, so this is telling
the code editor to load a VB, or Visual
| | 02:59 |
Basic file.
This is visual basic code, earlier, when
| | 03:02 |
I clicked on the program.cs file, it was
loading a C Sharp file.
| | 03:06 |
Back to my NBC app, you can see I have a
number of VB files in here.
| | 03:11 |
And then I have a views folder which
contains a Web.config file.
| | 03:17 |
I also have a Global.asax and a number of
config files.
| | 03:21 |
As you explore these different projects
you'll see that each one of them has a
| | 03:25 |
different layout.
This is a ClassLibrary, this is a Windows
| | 03:28 |
PhoneApp, this is a WindowsFormApp and so
on.
| | 03:34 |
Let's look at this Windows PhoneApp and
we'll look at this MainPage.xaml.
| | 03:39 |
So in this example you can see that I not
only get a set of the XML on this side of
| | 03:44 |
the screen, but in this portion of the
window, I will get a designer.
| | 03:49 |
Very interesting, each project loads its
own set of assets that are necessary for
| | 03:54 |
that project.
Let's compile this application and go see
| | 03:57 |
what's on the hard drive.
I'm going to go to this Build menu, and
| | 04:00 |
I'm going to choose to Build the
Solution.
| | 04:02 |
That will compile all nine projects, you
can see the status of the build down here
| | 04:07 |
in the bottom screen.
I have a build succeeded message.
| | 04:10 |
Now I'm going to go out to my hard drive
and look at the files that were created.
| | 04:13 |
So I'm going to go to my console app up
here, I'm going to right-click and I'm
| | 04:17 |
going to choose open folder in file
explorer.
| | 04:20 |
Again, depending on which version of
Windows Operating System you're running
| | 04:24 |
the wording on this menu might be
different.
| | 04:27 |
Here I am inside of the Console
Application.
| | 04:29 |
And if I look in this bin folder, you'll
see that there are two folders in their.
| | 04:33 |
When I build a debug version of my
application, all of my assemblies go in here.
| | 04:38 |
There's my console app.exe, okay?
If I go look at my home application,
| | 04:44 |
there's a bin folder there too, there's a
bug folder, and there is a DLL file in
| | 04:49 |
this one.
That's because the window parts are
| | 04:51 |
loaded through a DLL, not in the exe.
You do not see these physical files
| | 04:56 |
inside Visual Studio unless you make some
changes.
| | 04:59 |
Some of these files are hidden like the
bin folders are usually hidden.
| | 05:02 |
The obj folder is usually hidden too.
But I can turn those on by going back
| | 05:07 |
over here and picking my project from the
Solution Explorer And then choosing this
| | 05:13 |
icon, Show All Files.
Now do you see what happened?
| | 05:17 |
I now have a ghost folder here, I call it
the ghost folder because it's white, that
| | 05:21 |
says bin on it, and it's got a dotted
outline around the edge.
| | 05:24 |
And if I open that up, I can see the
ghost folder for the bug, and underneath
| | 05:29 |
that, I can see my physical files.
Microsoft chooses not to show these to
| | 05:33 |
you by default, because they figure
they're generated every time you do a compile.
| | 05:37 |
There's no need to show them to you, in
your sampling.
| | 05:39 |
But the way you can think of my solution
is it's a mirror image of all the folders
| | 05:44 |
and files that are on your hard drive.
Let me add a project.
| | 05:48 |
I'm going to go to my solution, I'm
going to right-click here, and say Add >
| | 05:53 |
a New Project.
I'll pick from my list of languages and
| | 05:59 |
project types.
Pick Windows, I'll pick this one called
| | 06:04 |
WPF Application, I'll accept the default
names, click OK.
| | 06:08 |
Now there's my new project.
WPF application and here's the files that
| | 06:12 |
were loaded as part of its template
system.
| | 06:14 |
You can also add what's called a solution
folder.
| | 06:18 |
I can go to My Solution, I can right
click up here and choose Add this item
| | 06:22 |
here, New Solution Folder.
You typically use this for assets that
| | 06:27 |
are used across multiple projects and are
not actually compiled.
| | 06:31 |
So things like documentation, XML files,
and things like that they use across all
| | 06:36 |
of your projects with good go in here.
So I'm going to call this one WorkDocs,
| | 06:44 |
and then, I can right-click on this and
choose Add Existing Items on my hard drive.
| | 06:48 |
Let's go take a look at those SLN files.
And we'll see what kind of files are used
| | 06:54 |
by projects.
Again, I'm going to return back to my
| | 06:57 |
hard drive I choose to Open Folder in
File Explorer.
| | 07:01 |
Here's My Solution file, and here are all
these folders that can hit each of my projects.
| | 07:05 |
If you take a look at the Solution file,
this sln file, and you open it up, in my
| | 07:12 |
case I'm going to open this with Notepad,
so we can see what's inside here.
| | 07:18 |
You can see that it's a text file that
has instructions on which project to
| | 07:22 |
load, I'm supposed to load a project
called, ConsoleApp.
| | 07:25 |
And one called WindowsFormsApp and you
will see that at the end of this line
| | 07:29 |
there is something called csproj and
vbproj is another one here.
| | 07:33 |
These are also text files that contains
the instructions to Visual Studio what to
| | 07:37 |
load inside Visual Studio.
So if I go to my Mvc application then I
| | 07:42 |
have earlier and here it is and I find
this MvcApp.vbproj file, and I choose to
| | 07:50 |
Open this with Notepad.
This is the Windows 8 way of selecting an
| | 07:59 |
alternative program to open a file.
(SOUND).
| | 08:02 |
You'll see that it's an XML file and it
has a number of instructions of what to
| | 08:08 |
tell Visual Studio to do.
It's got build instructions, it's got
| | 08:11 |
loading instructions, it has reference
instructions.
| | 08:15 |
So every single reference that's inside
my reference folder is listed here in
| | 08:19 |
this section with the word reference.
And then include, and many more steps,
| | 08:24 |
more than I have time to show you.
What I want you to take away from this
| | 08:27 |
movie is that the solution contains
projects.
| | 08:29 |
Projects are instructions to the compiler
in the build engine on what to do.
| | 08:32 |
And if you ever want to look at that
information, you can open these files up
| | 08:36 |
and inspect what's inside them.
So what do you think of Solution Explorer?
| | 08:40 |
For me, its one of the key windows in
Visuals Studio, I use it everyday.
| | 08:44 |
| | Collapse this transcript |
| Organizing your workspace, windows, and tabs| 00:00 |
I can't tell you how many hours each day
I spend inside Visual Studio.
| | 00:04 |
When I'm working on a project, it could
be all day and part of the night.
| | 00:09 |
I need to be able to control the layout
of my windows and get the screens
| | 00:12 |
arranged the way I prefer.
During this video, I'll show you how to
| | 00:16 |
work with the windows in Visual Studio.
And, I'll share some layout tips I've
| | 00:20 |
learned over the years.
Im inside Visual Studio and I've opened
| | 00:24 |
this solution called TourIDE.
As you can see this solution contains two
| | 00:29 |
projects, ConsoleApp and WindowsFormApp.
One is a C sharp program and one is a
| | 00:35 |
Visual Basic program.
When you open a code file, let's say that
| | 00:40 |
I open this book.cs file, I can
double-click on it, in the Solution
| | 00:45 |
Explorer, or I can just select it.
By default Visual Studio has what's
| | 00:50 |
called the temporary tab over here on the
right edge of the screen.
| | 00:54 |
This shows you a preview of what you've
currently selected without actually
| | 00:58 |
opening it for editing.
At least it does in the C Sharp project.
| | 01:04 |
Now, if I double-click on book.cs, it
moves it from this temporary location
| | 01:10 |
over to the left side of the screen where
it becomes a permanent tab.
| | 01:13 |
Let me show you again, now move to
Books.cs, so now you can see Books.cs is
| | 01:18 |
over here on the right side, in the
temporary tab position.
| | 01:21 |
And book remains over here.
When I click on Program.cs it gets put in
| | 01:26 |
the temp location.
Once you have a number of tabs open, let
| | 01:30 |
me open Books.cs and Program.cs.
Now I have three tabs open, I can close
| | 01:36 |
these tabs by right-clicking and choosing
Close.
| | 01:41 |
Or what I usually do is I click on this x
that's on the right edge of the tab, like this.
| | 01:48 |
If you open a lot of tabs, let me open up
Program.cs, and I'll open some of these
| | 01:54 |
files from the the Windows Form
Application.
| | 02:00 |
Now I've got lots of tabs open across the
screen.
| | 02:02 |
If you can't see all of the tabs, you can
always go to this dropdown on the right
| | 02:08 |
edge of the screen and click and use this
to navigate between your tabs.
| | 02:12 |
This is the overflow area, one of my
favorite new features of Visual Studio is
| | 02:19 |
the pinnable tab, so once I have a tab
that I'm working with on a regular basis.
| | 02:24 |
Let's say I'm working on this Bookscs
file for a couple of hours.
| | 02:28 |
And I want to keep this books tab open
while I work on other files.
| | 02:32 |
I will click on this Toggle pin status
button.
| | 02:37 |
That moves the tab over to the left edge
of the screen.
| | 02:40 |
Let me do the same thing with this
Program.cs file.
| | 02:45 |
And the location of this toggled tab is
configurable in my Tools Options settings.
| | 02:51 |
Let me show you.
Tools and then Options, here, I'll click
| | 02:56 |
on the Environment node and now click on
Tabs and Windows.
| | 03:01 |
It's here that you can turn on and off
that preview tab or that temporary tab I
| | 03:07 |
was showing you.
And I can also in my pin tabs, I can say
| | 03:12 |
Show my pin tabs on a separate row.
I like this feature.
| | 03:17 |
So, I will check that item and then click
OK.
| | 03:20 |
Do you see the difference?
Yes.
| | 03:21 |
Up here at the top Books.cs and
Program.cs are on a separate row.
| | 03:27 |
They'll stay on this row irregardless of
what happens to the rest of these tabs.
| | 03:32 |
I can split my tabs into groups.
To make this more clear, I'm going to
| | 03:38 |
auto-hide this output window at the
bottom of my screen by clicking on this pin.
| | 03:43 |
And then I'm going to take this Form1
design,and I'm going to right-click on it
| | 03:50 |
and choose to make a new horizontal tab
group.
| | 03:53 |
Now I've split my screen in half, and I
have some tabs on the top half of the
| | 03:57 |
screen and other tabs on the bottom.
And you can Drag between these two.
| | 04:02 |
I'm going to take this About box and drag
it down here.
| | 04:06 |
I'll take this form1.vb And drag it back
to the top.
| | 04:10 |
Notice there's a rectangle in the
background that indicates where I'm
| | 04:14 |
positioning that item.
I can also right-click here and say move
| | 04:19 |
to previous tab group, that'll move it
back to the top tab group.
| | 04:22 |
I can also split my screen in a vertical
fashion right-click and choose New
| | 04:28 |
Vertical Tab Group.
So now I've got two split screens next to
| | 04:32 |
each other.
And of course you can change the size of
| | 04:35 |
the windows by dragging this split bar
here.
| | 04:38 |
And again, that dragging items back and
forth between the tab groups.
| | 04:42 |
Let me Right Click on this and say Move
to Previous Tab Group.
| | 04:46 |
You can tear off a tab, let's say I want
to take this Books tab and move it into
| | 04:51 |
the center of the screen like this.
I grab the top of my tab, and I drag it
| | 04:56 |
out towards the center of the screen.
Now when I let go, I have an independent
| | 05:01 |
window, and this is awesome when you have
multiple monitors.
| | 05:04 |
Because what you can do is take this
window and drag it over to the side of
| | 05:08 |
the window.
See what I'm doing right now?
| | 05:10 |
I'm on Windows 8, so as I drag it to the
edge, I'm actually going to be able to
| | 05:13 |
stick this to the edges of Window.
But if I had a second monitor, it will
| | 05:18 |
move off the screen onto my second
monitor.
| | 05:20 |
So I can have full size tabs on each one
of my monitors, I love that feature.
| | 05:23 |
And now I'm going to pull this back down
into the center.
| | 05:26 |
You know there's a trick for getting it
to go back to where it was originally, right?
| | 05:30 |
Now if I double click on this header bar
inside this separate window, see what happens.
| | 05:35 |
I'll double-click here.
It maximizes my tabs so it fills up the
| | 05:39 |
entire screen.
That's nice, it's a useful feature but
| | 05:42 |
what I want to do is put it back where it
originally lived.
| | 05:45 |
Let me click here, the trick to doing
this is a shortcut I learned a couple
| | 05:49 |
years ago.
Hold down the Ctrl key, then double-click
| | 05:54 |
on the Header bar.
Now it's back over here, nested among the
| | 05:58 |
other tabs.
Now you can do this same kind of movement
| | 06:02 |
in Windows it doesn't have to be a tab.
Now you if you look on my solution
| | 06:05 |
explorer you'll see I've got a Solution
Explorer.
| | 06:07 |
I've got something called Team Explorer.
I've got Class View, so you can see I've
| | 06:11 |
got some multiple tabs over here too.
I've also got on this side of the window
| | 06:16 |
these pop out windows, so I can click on
Toolbox and data sources and they fly out
| | 06:21 |
from the side.
And I can then pin these to the side of
| | 06:25 |
the windows by clicking on this Auto Hide
button.
| | 06:27 |
So now you see I've got multiple tabs
here and across the top here and over on
| | 06:32 |
the right side of my screen.
So any of these tabs can also be pulled
| | 06:35 |
out and made independent windows.
Let's say I want to take this Class View
| | 06:38 |
and make it an independent window.
So I'd pick it up and Drag it out, Drop
| | 06:41 |
it now at the second window.
Put it back I can use the trick I just
| | 06:44 |
showed you to double click by holding the
Ctrl key.
| | 06:47 |
Or you can this thing called the
Visualizer.
| | 06:50 |
You see this icon in the center of this
screen?
| | 06:52 |
It looks like a plus sign, that's the
visualizer.
| | 06:55 |
As I move the very tip of my mouse over
this area, you'll see a blue rectangle
| | 07:01 |
show up on screen.
That's a visualization of where this is
| | 07:04 |
going to get placed on the screen if I
were to let go of my mouse button at this
| | 07:08 |
moment in time.
So that's my horizontal groups.
| | 07:12 |
There's my vertical groups.
And you see, there's some of these
| | 07:16 |
floating icons up at the top.
There's one up here, and there's some
| | 07:19 |
over here on the side.
So you see, if I move over to this area,
| | 07:22 |
I can do the same kind of docking here.
I can split the screen in this subsection
| | 07:26 |
of the screen, or over on this side, I
can do the same thing.
| | 07:30 |
So really you can do all sorts of fancy
splitting.
| | 07:33 |
I'm going to put this here and split it,
so that it's taking up the bottom half of
| | 07:38 |
the screen.
So now I've got my Solution Explorer and
| | 07:40 |
my Team explorer here and my Class window
down at the bottom.
| | 07:43 |
At some point you're going to mess up the
layout of your windows, and not to be
| | 07:48 |
able to get it back the way it was.
Luckily for you and me there's a reset
| | 07:52 |
switch right here in the Windows menu.
You go in here, you say Reset Windows
| | 07:57 |
Layout (SOUND) and it puts them all back
in the default locations of where they belong.
| | 08:03 |
You automatically hide these windows.
You see this stick pin up here, Auto Hide
| | 08:07 |
if I click on that it slams it into the
side of the window over here.
| | 08:11 |
Just like we had over here on the side of
the window, so I can move them out of the
| | 08:14 |
way to make more room for my code.
I'll do the same thing with this property window.
| | 08:18 |
Put it back in I'll click on it once and
then click on the Auto Hide.
| | 08:21 |
Do the same thing here.
There's also a Full Screen mode, you go
| | 08:26 |
to View > Full Screen.
That turns off all the toolbars and all
| | 08:30 |
of the side windows, so you're just
looking at whatever you're editing at the
| | 08:37 |
moment, very nice.
Then to go back to the windowed mode,
| | 08:41 |
click on this Full Screen button up here
at the top.
| | 08:44 |
When I click on that icon it returns me
to windowed mode.
| | 08:47 |
The last thing I want to show you in this
video is to Ctrl+Tab movements.
| | 08:51 |
I'm going to touch the Ctrl key on my
keyboard, then I'm going to tap the Tab key.
| | 08:56 |
I haven't let go of the Ctrl key, I'm
just going to tap the Tab key.
| | 09:00 |
Now you see a list of all the active tool
windows that are locked the sides of my windows.
| | 09:05 |
You see the Solution Explorer, the Team
Explorer, and the Class Window.
| | 09:09 |
And then over on this side of the window
I can see all of the active code windows
| | 09:13 |
that I’ve got open in tabs in the center
of the screen.
| | 09:16 |
So I can use this for navigation
purposes.
| | 09:18 |
You see, every time I tap the Tab key,
without letting go of the Ctrl key, it’s
| | 09:22 |
moving me to the next item.
So I want to go to the LoginForm.
| | 09:26 |
Now I let go of the Ctrl key and it
switches me over to that section.
| | 09:31 |
Now I've been using Visual Studio for a
long time.
| | 09:33 |
Each version gives me some new IDE
feature that I can't live without.
| | 09:37 |
I think my favorite new feature in this
release is the Multi-monitor support.
| | 09:41 |
I had three monitors on my desktop and
this feature is invaluable.
| | 09:45 |
But there are a lot of other good
features for you to find.
| | 09:48 |
Have fun exploring and let me know which
one is your favorite.
| | 09:51 |
| | Collapse this transcript |
| Using visual designers and the Toolbox window| 00:00 |
Do you ever wonder why the word Visual is
in the name of certain Microsoft products
| | 00:04 |
like Visual Basic or Visual Studio?
The reason goes back to the early days of
| | 00:10 |
Visual Basic.
One of its major innovations was the
| | 00:13 |
ability to use a visual designer to
create the UI for the application.
| | 00:17 |
It was magical to be able to drag a
control to the Designer Surface and have
| | 00:21 |
the tool generate the code.
The excitement from that era seems so
| | 00:25 |
quaint nowadays.
We live in an age where every tools is graphical.
| | 00:29 |
It's a given that our tools will average
drag and drop designers.
| | 00:33 |
Visual Studio is full of these designers,
let's look at how they work.
| | 00:37 |
The designer component contains an area
for working in a visual fashion with elements.
| | 00:42 |
The designer works in conjunction with
other Visual Studio windows.
| | 00:46 |
In this image, we see two of these
collaborators, the Toolbox and the Code File.
| | 00:51 |
When you drag an item from the Toolbox to
the Designer, the Designer creates an
| | 00:56 |
instance of the object and shoes a
graphical representation of the object on
| | 01:00 |
the Designer Surface.
At the same time, the designer generates
| | 01:04 |
some text and places it in the file.
Usually, this generated text is code, but
| | 01:09 |
sometimes it is XML or other text
formats.
| | 01:13 |
When you modify the item in the Designer,
for example, moving the item to a new
| | 01:17 |
location, the designer modifies the code
in the text file.
| | 01:21 |
There is another Visual Studio window
that collaborates with the Designer.
| | 01:25 |
That is called the Property Window.
When you select an item in the Designer
| | 01:29 |
the Property Window displays the
properties for that element.
| | 01:33 |
When you modify the values in the
Property Window, the changes are sent
| | 01:37 |
back to the Designer, and it updates the
UI and the code file accordingly.
| | 01:42 |
There are lots of designers in Visual
Studio.
| | 01:44 |
Let's go look at a few.
I'm inside Visual Studio.
| | 01:48 |
I've opened a solution called Designers
and Toolbox, and I've included three
| | 01:53 |
separate projects, a Web Forms
Application, a Windows Form Application,
| | 01:58 |
and a WPF Application.
WPF stands for Windows Presentation Foundation.
| | 02:02 |
I picked these three project types,
because they all have Visual Designers.
| | 02:07 |
I also need to have the Toolbox open.
If you do not see the Toolbox on your
| | 02:10 |
application, it's going to be over on the
left side, usually.
| | 02:14 |
If you do not see it, choose View >
Toolbox, and if it still doesn't look
| | 02:20 |
like this, it might be pinned to the side
by clicking Auto-Hide.
| | 02:25 |
It might look like this on your computer.
If it does, just click once on the
| | 02:29 |
Toolbox section, and then click on
Auto-Hide.
| | 02:33 |
So now, I'm ready, I'm going to open four
files that have Designers.
| | 02:36 |
I'm going to open my Web Forms App, and
open Default.espx.
| | 02:40 |
I'm going to open my Windows Form App,
and open Form1.vb, which is a Visual
| | 02:45 |
Basic file.
I'm going to open up the WPF Application,
| | 02:49 |
and open up this classdiagram.cd.
And then, I'm going to open this mainwindow.zaml.
| | 02:55 |
All of these are examples of files that
work with the Designer.
| | 02:59 |
Let's start by looking at the Class
Diagram.
| | 03:02 |
This represents one of the classes that I
have inside my project.
| | 03:07 |
I'll talk more about this later movie.
But this has a designer, and if I make
| | 03:12 |
changes to the designer, let's say, add a
method to this class, it will update my
| | 03:17 |
code file from this interface.
It also has a Toolbox over here, so I can
| | 03:22 |
click on this and choose a new class,
like that.
| | 03:25 |
Then I will create a brand new file
called Author.cs.
| | 03:29 |
There it is.
Close this window.
| | 03:32 |
Here is the default.aspx page.
This is basically HTML.
| | 03:38 |
If I click on this design section down
here at the bottom, that opens up the Designer.
| | 03:42 |
And now, the toolbox knows that I'm
working on an HTML or ASPX page and
| | 03:48 |
changes the number of items here to
reflect the Designer I have open.
| | 03:52 |
So, this button is going to be an asp.net
button.
| | 03:55 |
If I click on the Split button, I can see
both the HTML that was generated, and the
| | 04:01 |
button that was created.
A visual representation.
| | 04:03 |
If I drag the size of this button, it
changes the text here in this Text window.
| | 04:08 |
This also works for Windows Forms.
Here is Form1.vb.
| | 04:13 |
Same idea, drag that button over here.
Now, this doesn't have a Split view
| | 04:19 |
because it's an older technology.
Windows forms has been around for 12
| | 04:23 |
years and it predates things like WPF and
silverlight.
| | 04:26 |
So, let me show you the WPF Application
instead.
| | 04:29 |
We'll go over here to main window.
And open this up.
| | 04:33 |
The top half of the window represents the
Designer.
| | 04:35 |
The bottom half is my XML Editor.
And again if I drag an item over from
| | 04:39 |
here, you'll see that it generates the
control and outputs the correct button
| | 04:45 |
down here.
Very nice.
| | 04:47 |
Very handy.
Resize the button.
| | 04:50 |
It does the right thing.
Let me drag another button over here.
| | 04:53 |
Look at this.
I get some lines that represent the
| | 04:58 |
alignment of these buttons.
I'll talk more about this in the last
| | 05:02 |
chapter of this title.
So, I said I'd talk about the Toolbox in
| | 05:06 |
this movie.
I've showed you a little bit of how the
| | 05:08 |
designers work, but let's concentrate on
the Toolbox.
| | 05:10 |
The Toolbox is completely customizable.
I can go over here to this section for
| | 05:15 |
common WPF controls and I right-click on
it and choose to uncheck this List View.
| | 05:21 |
Do you see the difference?
Now it just has this little icon here.
| | 05:25 |
It no longer has the text in the icon.
The benefit of using this approach is I
| | 05:29 |
can see a lot more controls in my work
space.
| | 05:33 |
I can pick this text box and drag it
over, works just the same but I have more
| | 05:38 |
room in my Toolbox.
To switch it back, right-click and choose
| | 05:42 |
List View.
You can add your own custom controls.
| | 05:46 |
If you have a third party set of controls
and you want to add them to the Toolbox,
| | 05:50 |
you right-click and you choose Choose
Items.
| | 05:54 |
Then in this dialogue, you'll tell it
where to look on your hard drive for the
| | 05:59 |
components you want.
Since I'm in a WPF Application, it's
| | 06:02 |
looking at my hard drive trying to find
DLLs that contain WPF specific controls,
| | 06:07 |
and it's found a number of them on here.
When I find one that I like, I check it
| | 06:11 |
off, and then click on OK.
And that item will get added to my Toolbox.
| | 06:17 |
And now, I can drag that over to my
Designer Surface.
| | 06:20 |
And see if it will generate the UI for
that.
| | 06:22 |
Very nice.
This also works with your own controls.
| | 06:25 |
I created a control inside of this WPF
Application called the tour bus control.
| | 06:30 |
This is what it looks like.
Now, I want to add this Tour Bus control
| | 06:34 |
to my main form, so what I do is I
double-click on MainWindow.xaml.
| | 06:39 |
And then, Visual Studio is monitoring my
projects and sees that I have a special
| | 06:43 |
kind of class in there, called a User
Controlled Class.
| | 06:45 |
And it updates my Toolbox to reflect
that.
| | 06:49 |
Here's my Tour Bus control.
So, without me having to do anything
| | 06:52 |
special, Visual Studio figured out I have
this user control, added it to my Toolbox.
| | 06:56 |
And now, I can drag that over and drop it
on my Designer Surface.
| | 07:00 |
I arrange it just like any other control.
Move it around.
| | 07:03 |
Resize it.
Set properties in the properties window, whatever.
| | 07:07 |
And you'll notice that down here, it did
the right thing and wrote the correct XML
| | 07:12 |
out for me.
You can sort the items in this list.
| | 07:14 |
Right-click and choose to sort them
alphabetically.
| | 07:16 |
You can reset the Toolbox if you ever
make mistakes.
| | 07:20 |
Or, delete controls accidentally.
You want to send it back to the factory defaults.
| | 07:24 |
You can add your own tabs.
So, in that case I created a tab, and I
| | 07:27 |
would name it here, Walt's tab.
And then I can take my controls, like
| | 07:33 |
this Bus control, and I can drag that
down and put it on my tab.
| | 07:39 |
You can see, I can drag these around and
put them anywhere I want.
| | 07:42 |
Now, there's a Companion window that is
often used when working with the Toolbox
| | 07:46 |
and the Designer.
I'm talking about the Properties window,
| | 07:48 |
which lives over there on the right.
It's such a interesting tool that they
| | 07:52 |
made and entire movie about it, and it's
the next one in this chapter.
| | 07:55 |
| | Collapse this transcript |
| Working with the Properties window| 00:00 |
I'd like to take a look at the Property
window in more details.
| | 00:03 |
To do that, I'm going to use this
solution called Working With The Property
| | 00:07 |
Window, which contains two projects.
I'll spend most of my time in this WPF
| | 00:12 |
App project, but I also have this Phone
App project available too.
| | 00:16 |
I'll start by opening this HtmlPage .Html
file.
| | 00:21 |
And then, switching to my Design View.
Where I can see, I've got several input controls.
| | 00:25 |
When I click on one of these, the
Property window interrogates the selected
| | 00:30 |
object and loads the properties into the
Property window.
| | 00:33 |
Let me pull the Property window out where
we can see it.
| | 00:37 |
There it is.
Make it nice and big.
| | 00:40 |
This is a simple name value pair.
This side represents the property that
| | 00:43 |
it's setting, or the add that you would
say.
| | 00:45 |
And this is the value that is assigned to
it.
| | 00:47 |
You don't get much information in the
HTML Editor, but if you start working
| | 00:52 |
with ASP.net controls, or Phone controls,
or WPFF controls, you get a lot more information.
| | 00:58 |
Let me show you what I mean.
I'm going to open this MainWindow.sample file.
| | 01:03 |
And then, I'm going to, slide this over a
little bit.
| | 01:06 |
And then, I'm going to select these
different items.
| | 01:09 |
Let's select a the button.
Do you see the difference?
| | 01:12 |
That's a lot more information.
And it's a lot more sophisticated.
| | 01:17 |
This Property window knows how to
interrogate the properties.
| | 01:20 |
But it shows the information in a rich,
interactive design.
| | 01:23 |
For instance, if I want to change the
horizontal alignment of this button, I
| | 01:27 |
can click on these little buttons that
represent the different alignments.
| | 01:31 |
They are centered, and there's
right-aligned.
| | 01:34 |
And there's a left-aligned.
It knows how to work with nested items.
| | 01:39 |
So, if I go to this List Box.
Right now I'm selecting the List Box.
| | 01:42 |
So, you can tell right here.
It says List Box as the type.
| | 01:45 |
But within that List Box, if you'll
scroll down here, you'll see that inside
| | 01:50 |
my list box I've got some children items
called List Box items.
| | 01:54 |
So, if I select them, either here in the
XAML Editor or here in the Designer
| | 02:00 |
Surface, now I'm selecting the individual
List Box items and the Property window
| | 02:04 |
knows that and shows me the type is now
List Box item.
| | 02:07 |
Very nice.
Let's try with the ellipse.
| | 02:10 |
That works perfectly.
This also works with the phone application.
| | 02:15 |
I'll slide this down, I'll open this
MainPage.xaml, which is a phone page.
| | 02:19 |
And then I'll click on my check box and
I'll come over here and look and see what
| | 02:26 |
I've got.
There is a property over here called isChecked.
| | 02:28 |
Well, I don't see it.
I have to scroll up and down this list,
| | 02:32 |
there's a lot to look through.
So, to make it more convenient, you can
| | 02:35 |
choose to either sort the names by name
which is my current setting, but it's not
| | 02:40 |
the usual default.
Now, I can find the isChecked property by
| | 02:43 |
looking down this list.
Or, I can change to arrange them by the
| | 02:49 |
category of properties.
Now I'm seeing the Appearance Properties
| | 02:53 |
and the Brush Properties and so on.
Or, so just set back the name, I can do a search.
| | 03:00 |
So, if I type in WID, I get properties
that contain those 3 letters, max width,
| | 03:07 |
min width, and width.
I'm looking for a checked property, so
| | 03:10 |
I'll type in c, h, e, k and it finds this
one called isChecked.
| | 03:15 |
Now, when I check the isChecked in the
Property window, it gets checked on my
| | 03:19 |
Designer surface and in my XAML.
That's a little bit hard to see, I'll
| | 03:24 |
scroll this down.
And scroll this over.
| | 03:27 |
Now, it says isChecked equal True right
here.
| | 03:29 |
So, my point is that the Property window
isn't working in conjunction with the
| | 03:35 |
Designer and the Editor, the Text Editor.
Let's go back to Main Window and show you
| | 03:39 |
some other features.
There is a rich set of property types.
| | 03:44 |
If you want to change like, say, the
color of this ellipse, you can click on
| | 03:49 |
this stroke and what'll happen is it'll
pop up a color dialogue.
| | 03:53 |
If you want to change the orientation of
this button, you can click on it.
| | 03:57 |
And let's say I want to change something
called the Layout Transform or the Render
| | 04:00 |
Transform, I can click on this Edit
button.
| | 04:03 |
And again, it will drop down a customized
Designer Surface for this Render Transform.
| | 04:09 |
And this is how I can do things like
scale the button, skew the button or my favorite.
| | 04:16 |
Lets rotate the button.
So, I click here.
| | 04:18 |
And then, I can move my mouse over this
circle and just drag and change the angle
| | 04:24 |
of the rotation on this object.
This is kind of fun, to animate items
| | 04:28 |
this way.
And I'll set it back to 0 by typing in a number.
| | 04:32 |
And then, I'll click on anywhere in my
property window close that window.
| | 04:36 |
I'm going to show you how to work with
the brush.
| | 04:38 |
I'm going to click on the ellipse.
And then, I'm going to find my Fill Property.
| | 04:43 |
Let me do that by doing a search, fill.
Then, I'll click here.
| | 04:47 |
And it shows me these are the different
color choices or what I call brush choices.
| | 04:52 |
This is no brush, this the solid color
brush, this represent the gradient brush,
| | 04:58 |
and this represent what's called the tile
brush.
| | 05:00 |
So, usually you'll use this tile brush
for things like images.
| | 05:03 |
I'm going to choose a solid color brush.
And then, once I have my solid color
| | 05:07 |
brush picked, I come down here and I move
my mouse up and down this color bar to
| | 05:13 |
pick the color range I want.
Let's say, orange.
| | 05:15 |
And then, I move over here to pick the
actual value of orange that I want to use.
| | 05:21 |
Once I'm happy, I click anywhere to close
this.
| | 05:25 |
That's fine.
Look at some of the other things you can
| | 05:26 |
do here.
Set the red, green, blue colors, the
| | 05:29 |
alpha channel colors.
And if you like to work with saturation,
| | 05:32 |
and lightness, and hue, you can click
once on this red item and choose the
| | 05:36 |
different color space.
Now, I'm working with hue saturation and lightness.
| | 05:40 |
Very nice.
You can also work with events.
| | 05:43 |
Events are messages that are passed from
one class to another class in .NET.
| | 05:48 |
And when you pass the information over,
the other class can listen for that, and
| | 05:51 |
you can actually pass extra information
over through the event.
| | 05:55 |
So in my case, the ellipse can raise an
event, and my window can use the event, okay?
| | 06:01 |
So what I'm going to to do is select my
ellipse.
| | 06:03 |
Then, I'm going to click on this electric
bolt here, to switch over to what are
| | 06:07 |
called the event handlers.
And this lists all of the events that are
| | 06:11 |
raisable from this ellipse.
I'm interested in one of the mouse events.
| | 06:16 |
So, I'm going to find the mouse section.
Here they are.
| | 06:21 |
MouseDown, and MouseEnter, and
MouseLeave, MouseMove.
| | 06:25 |
This one fires every time the mouse moves
a pixel over top of the ellipse.
| | 06:29 |
It'll fire this event.
So, I'm going to write my method name
| | 06:32 |
right here, MouseMoveDemo.
And then, I'm going to press the enter key.
| | 06:38 |
And the property grid's going to work in
conjunction with the Visual Studio code
| | 06:42 |
editor to write some code.
Visual Studio switches me over to the MainWindow.xaml.cs.
| | 06:49 |
It writes in a function, marked as
private void.
| | 06:52 |
It uses the name that I provided, which
was MouseMoveDemo.
| | 06:55 |
And then looked at the signature of the
event and stubbed in the two parameters
| | 07:00 |
that are necessary, the sender, in this
case the ellipse that raised the event,
| | 07:04 |
and the extra mouse specific event
arguments that are passed in this e object.
| | 07:09 |
So here, I can get things like the
position of the mouse, which buttons are
| | 07:14 |
being pressed, the left button or the
middle button.
| | 07:17 |
The original source of the event.
And lots of details are available here.
| | 07:21 |
I'm going to do something simple like
change the color.
| | 07:26 |
Now, in order to do this, I have to name
my element, and I haven't done that yet.
| | 07:29 |
So I'm going to switch back to my
Designer, MainWindow.xaml.
| | 07:32 |
Select my ellipse, switch back to the
Properties section, go up to the top.
| | 07:38 |
Right here where it says No Name for my
ellipse and I'll type in my new name,
| | 07:42 |
which is Ellipse1.
Then I'll press Enter.
| | 07:46 |
See how it renamed it down here.
And then I'll switch over to my code
| | 07:50 |
behind window by clicking here.
And now it say Ellipse1.Fill = new.
| | 07:58 |
I'm going to create a solid color brush.
I'm in C#.
| | 08:05 |
If I need to put a semicolon at the end
of the line.
| | 08:07 |
And then here, I'm going to say
colors.red.
| | 08:12 |
C# is a case sensitive language.
So, if you're following along, make sure
| | 08:16 |
you use the capital C and a capital S and
so on.
| | 08:19 |
Otherwise, it won't work.
Now, I'm ready to test this.
| | 08:22 |
So I'll go up to the Debug>Start
Debugging.
| | 08:27 |
And when I move my mouse over this
ellipse, you will see the magic moment
| | 08:32 |
happen, there it is.
Let me show you how to remove an event
| | 08:35 |
using the same technique.
If I delete this method, that's not good enough.
| | 08:42 |
I still have an event handler specified
somewhere else in my application.
| | 08:47 |
So what I need to do is come back over
here, select my ellipse, go back and look
| | 08:51 |
at my event section, find this event
handler, and delete the text that's in there.
| | 08:58 |
Now, there's no trace of that event left
in my application.
| | 09:02 |
Let me put this window back in its
default location.
| | 09:04 |
I'll hold down the Ctrl key and
double-click on the header.
| | 09:06 |
So, let me review.
If you are a visual person, you are going
| | 09:10 |
to love using the Property window to edit
your UI items.
| | 09:13 |
If not, you can always handle it at the
HTML, XAML, or the C# code instead.
| | 09:19 |
| | Collapse this transcript |
| Working with servers in Server Explorer| 00:00 |
The Server Explorer Window provides a way
to explore databases and system-level
| | 00:04 |
resources on your local computer.
If you're on a network, it also permits
| | 00:09 |
access to computers and services on
remote computers.
| | 00:12 |
To demonstrate this, I will use this
solution called working with the Sever Explorer.
| | 00:19 |
And I'm using this Visual Basic project
called Windows Forms App.
| | 00:22 |
I pick Windows Forms because they work
really well with this Server Explorer components.
| | 00:27 |
To see the Server Explorer, you need to
go to View, and then choose Server Explorer.
| | 00:33 |
If you still don't see it, you might need
to unhide the page.
| | 00:36 |
You do that by clicking on the Auto Hide
button.
| | 00:39 |
So, it'll look like this if it's docked
to the side, and I click here and pin it
| | 00:44 |
out, so I get the full sized window.
I have a servers note here that shows all
| | 00:48 |
the servers on my network.
Currently, I'm only looking at one, my
| | 00:51 |
local computer.
If I want to add other servers, I would
| | 00:55 |
right-click and choose Add Server.
In this dialogue, I would specify the
| | 01:00 |
name of my network computer, and then
click OK.
| | 01:03 |
For my demonstration, I do not want to do
that, so I will click Cancel.
| | 01:07 |
Inside my computer are a list of possible
items I can look at.
| | 01:12 |
Your computer may not look the same as
mine, because it depends on what
| | 01:14 |
operating system you have installed and
what services are currently running on
| | 01:18 |
your computer.
On my computer, I can see the event logs.
| | 01:21 |
Here is all the event logs on my
computer.
| | 01:26 |
These match the regular event logs you
see in the log viewer.
| | 01:29 |
I also can see my management classes and
things like performance counters and the
| | 01:35 |
local services that are running are
stopped on my computer.
| | 01:39 |
At first glance, it looks like this is
merely a tool for exploring and viewing
| | 01:43 |
resource information.
But it's more than that.
| | 01:45 |
Not only can you view the server
information in this window but you can
| | 01:49 |
also use these child items in your
application.
| | 01:52 |
Let me show you how to do that.
I'm going to switch to my Form1.vb by
| | 01:56 |
double-clicking on it and looking at this
designer.
| | 02:00 |
I have one button and several labels.
What I want to do is when you click on
| | 02:04 |
this button, I want to read information
about the size of the disc space on my C drive.
| | 02:09 |
I'll put that information here on this
label.
| | 02:11 |
And then, later I'll monitor the
processors on my computer and see how
| | 02:16 |
much work they're doing by putting
information in this this label.
| | 02:18 |
So, to start my process, I'm going to
open something called the Management
| | 02:22 |
Classes, and look for the section called
Disk Volumes.
| | 02:27 |
I'll open this up and click on each of
the drives.
| | 02:31 |
There is my C drive, and there is my D
drive, and there is my E drive.
| | 02:35 |
When I click on one of these items, I can
see the information about it over here in
| | 02:38 |
my properties window.
This shows information about this Logical Disk.
| | 02:42 |
I can also read information about the
directories on this computer, the files
| | 02:48 |
that are in this directory, disk volumes
that are a part of this, file security.
| | 02:52 |
You name it.
I can read this information.
| | 02:54 |
What I'm going to do for my demo is work
with this disk here, The C.
| | 02:57 |
What I do is I come up here and I drag
this over to the Windows form.
| | 03:03 |
When I let go of my mouse, Visual Studio
adds what's called the Component Tray to
| | 03:08 |
the bottom of the screen.
And it's added an instance of this
| | 03:12 |
Logical Disk to the tray.
This is a programmable object that I can
| | 03:16 |
use in my code.
Let me show you how to do that.
| | 03:19 |
I will double-click on this button which
stubs in some code.
| | 03:23 |
Slide this window over for a little bit
more room.
| | 03:26 |
And then, I'm going to take that label,
Label3.Text.
| | 03:28 |
And now, I'm going to read the
information from that Logical Disk.
| | 03:37 |
And I'll use this free space.
I'll turn that into a string.
| | 03:41 |
And then, this allows me to format that
string.
| | 03:44 |
And say I want to have some decimal
places in here.
| | 03:48 |
I will type in 0,0.
Let's review what I've done.
| | 03:51 |
I'm interrogating this object, examining
the free space, formatting the string,
| | 03:56 |
and then assigning it to this text
property.
| | 03:58 |
To run this application, I'm going to
choose Debug, Start Debugging.
| | 04:02 |
And then, when I click on this button,
I'm interrogating that object.
| | 04:06 |
there's more.
Let's look at the processor on my computer.
| | 04:12 |
Do the same thing.
We'll go back to the Form Designer.
| | 04:14 |
Look at the performance counters down
here.
| | 04:18 |
There is hundreds, if not thousands of
performance counters installed on your
| | 04:23 |
computers and your users computers.
What I'm going to look for is the
| | 04:27 |
processor node.
Here it is.
| | 04:30 |
And then, I'm going to look for the
percentage of processor time.
| | 04:35 |
How much of my processor is being used.
The total amount.
| | 04:39 |
Again, I'll drag this over to my designer
surface.
| | 04:41 |
And it creates my component down here.
What I'd like to have happen is a timer
| | 04:46 |
fire every half a second to update this
information.
| | 04:50 |
To make that work, I'm going to go to my
Toolbox.
| | 04:52 |
I'm going to open this section in my
Toolbox called the All Windows Forms.
| | 04:58 |
And then, look for something called the
Timer.
| | 05:01 |
There it is.
I'll drag this over to my form.
| | 05:04 |
And again, I get an item in my component
tray.
| | 05:08 |
Now, I'll go over and set the interval to
500 milliseconds.
| | 05:14 |
I will enable the timer by choosing from
this drop down and setting it to True.
| | 05:18 |
And then, I'll write some code by
clicking on the lightening bolt which is
| | 05:23 |
my event section, and typing in a
function name here for my tick event.
| | 05:27 |
TimerTick, then I'll press Enter.
Visual Studio stubs in this sub procedure.
| | 05:35 |
Now, I just need to write just one line
of code.
| | 05:38 |
Label4.Text equal, I'll get my
Performance Counter.
| | 05:44 |
And I'll interrogate the operating
system.
| | 05:47 |
Say, get me the current reading from that
performance counter.
| | 05:56 |
And that's ready to go.
Again, I'll run the application by
| | 05:59 |
choosing Debug>Start Debugging.
And as you see, every time the timer
| | 06:04 |
fires, it's interrogating the operating
system and getting the processor information.
| | 06:10 |
The Server Explorer exists to let me
easily add system monitors to my applications.
| | 06:15 |
Read the Help file to learn more about
how this works.
| | 06:17 |
| | Collapse this transcript |
| Working with databases in Server Explorer| 00:00 |
In this video I want to talk about the
Server Explorer and working with
| | 00:04 |
databases and data connections.
In an earlier movie in this chapter, I
| | 00:08 |
talked about Server Explorer let's you
work with servers and performance
| | 00:12 |
counters and things like that.
I'm not going to open a project in this
| | 00:16 |
example, because I'm not writing any
code.
| | 00:18 |
Server Explorer is over here.
If you do not see it, remember you go to
| | 00:21 |
View and then choose Server Explorer.
At the top Server Explorer is a data
| | 00:27 |
connection node.
What I'm going to do is add a connection
| | 00:30 |
to a sequel server compact database.
Sequel server compact enables you to
| | 00:34 |
create compact databases that can be
deployed on desktop computers and smart devices.
| | 00:39 |
To add the connection, I'm going to click
on this button, the Connect to Database button.
| | 00:44 |
It's in this dialogue, that I specify
what kind of data at least I want to
| | 00:48 |
connect to.
As you can see, there are number of
| | 00:52 |
database formats.
I'm going to choose this one here, SQL
| | 00:55 |
Server Compact 4.0.
You should have this available on your
| | 00:59 |
computer because it's installed as part
of the Visual Studio 2012.
| | 01:04 |
You may not see some of these other
items.
| | 01:06 |
I'll click on okay and then down here I'm
going to connect to a data source on my
| | 01:11 |
computer, and I'm going to specify the
location of the SQL Server Compact file.
| | 01:16 |
To do that I click on Browse and then I
go out to my Exercise folders, so I'll go
| | 01:23 |
to my Desktop, go to the Exercise Files.
There's an assets folder included in this
| | 01:29 |
location and inside there, is a database
folder.
| | 01:32 |
I'm looking for this file
Northwind40.sdf.
| | 01:37 |
So I'll click on this one and then click
on OK.
| | 01:39 |
Next I'm going verify that my connection
is valid.
| | 01:44 |
Good deal, and then I'm going to click on
OK to make my data connection.
| | 01:48 |
Now I can use this data connection to
examine that database.
| | 01:53 |
I can come over here and look at the
tables that are inside that database.
| | 01:57 |
I can pick one of these tables and learn
more about its columns, or this table's columns.
| | 02:07 |
I can find out if there's any indexes
applied to this Shippers table.
| | 02:10 |
And I can also do things like add new
fields to this database table, by
| | 02:16 |
right-clicking and choosing Edit Table
Schema.
| | 02:19 |
So it's here that I can add a new column
to this table and specify the data type
| | 02:25 |
and length and so on, hit Cancel.
And I can also right click on this and
| | 02:31 |
choose Show Table Data.
This will query the database and return a
| | 02:35 |
list of information that's stored inside
that table.
| | 02:38 |
Let me show you one more time.
I'll go to Customers, right-click, Show
| | 02:42 |
Table Data and there's all the
information about my customers in that database.
| | 02:48 |
So here's what I like to do with Server
Explorer.
| | 02:50 |
I like to use it to discover information
about the databases I plan on using in my project.
| | 02:56 |
And here's some good news.
If you like to Drag and Drop interfaces,
| | 03:00 |
you can use these tables inside the Data
Connections with certain project types.
| | 03:05 |
And actually Drag the table over to your
designer surface, and the designer
| | 03:09 |
surface will create the data connections,
and the data entities.
| | 03:13 |
And make it easy for you to do data bound
applications with these database tables.
| | 03:18 |
| | Collapse this transcript |
| Optimizing Visual Studio configurations with the Settings dialog| 00:00 |
Visual Studio is a tool that I use almost
every day.
| | 00:03 |
I have strong opinions about the best way
to configure Visual Studio for the way
| | 00:07 |
that I work.
The Settings Option Dialogue is the place
| | 00:10 |
to tweak the IDE so that it works the way
that you want.
| | 00:13 |
I'm inside Visual Studio, but I do not
have a solution or project open because
| | 00:18 |
I'm not writing any code.
Before I make any changes to my settings,
| | 00:21 |
let's talk about how you export your
settings, so you can save your current set.
| | 00:26 |
To do that, you go to the Tools menu.
This is the item I'm looking for, Import
| | 00:31 |
and Export Settings.
There are three buttons to choose from.
| | 00:35 |
This first one allows me to export my
selected environmental settings.
| | 00:39 |
If I click on next, you'll see that I get
a choice of all the settings that I want
| | 00:43 |
to save.
My default, everything is checked in here.
| | 00:47 |
But I can turn off certain sections, if I
don't want to save those.
| | 00:50 |
I'm going to use All Settings, and then
click Next.
| | 00:54 |
In this portion of the wizard, I specify
the name of my file.
| | 00:58 |
By default, uses today's date and the
extension vssettings.
| | 01:03 |
And the location where I want to store
those files.
| | 01:06 |
I'll click on Finish.
And I have successfully exported my files.
| | 01:10 |
To import their settings at a later date,
I go to Tools>Import and Export Settings.
| | 01:17 |
This time, of course, I choose Import
selected environment settings.
| | 01:21 |
Now, here I'm going to select, No just
import my new settings.
| | 01:24 |
And then, I click on Next.
And then, here I can go out and browse on
| | 01:29 |
my hard drive to find my saved settings
files.
| | 01:32 |
Did you notice something on the previous
screen?
| | 01:34 |
Let's go back and look.
Here is the default settings.
| | 01:37 |
This is the screen that you see when you
first start Visual Studio for the very
| | 01:41 |
first time.
This configures it, so that you're using,
| | 01:44 |
let's say, the JavaScript key strokes in
the JavaScript menus.
| | 01:48 |
If you ever want to configure your Visual
Studio to use a different set of
| | 01:51 |
settings, just come in here and choose
from this list.
| | 01:54 |
For my example, I set my computer to
General Development Settings.
| | 01:58 |
I'm going to cancel out this dialogue,
because I really don't want to import any settings.
| | 02:05 |
Now, let's look at the Tools options.
There are hundreds of settings in here, literally.
| | 02:09 |
There's settings for environment, and
projects and solutions, and many more.
| | 02:15 |
We're going to look at the ones in the
debugging section later in the course.
| | 02:19 |
We'll also look at the ones in the Text
Editor.
| | 02:22 |
And a couple other notes in here.
For today, I want to look at just a few
| | 02:26 |
settings that I use as general settings
inside Visual Studio.
| | 02:29 |
I'll start by going to Environment, and
looking at General.
| | 02:32 |
It's here that you can pick color theme.
Now, I've installed an add-in.
| | 02:36 |
Remember, in the first chapter I added
some extra tools to Visual Studio to
| | 02:41 |
enable color theming and to remove the
All Caps menu.
| | 02:44 |
That's why I have more choices in here
than you might have on your computer.
| | 02:48 |
I would encourage you, if you have a good
GPU card in your computer, to turn on
| | 02:52 |
this check box.
Use Hardware Graphics Acceleration.
| | 02:55 |
That means that you'll get a faster
rendering of the pixels inside Visual
| | 02:59 |
Studio, if that check box is checked.
You probably want to have this enabled.
| | 03:03 |
AutoRecover, Save AutoRecover information
every 5 minutes.
| | 03:08 |
That way, if Visual Studio crashes, you
can recover your files.
| | 03:12 |
Let's look at the keyboard shortcuts.
Here they are.
| | 03:16 |
In this section of the option dialog, I
can pick the keystrokes that are assigned
| | 03:20 |
to each command inside Visual Studio.
For instance, I want to remap the
| | 03:24 |
keystroke that's applied to full screen.
Here it is, View.FullScreen.
| | 03:30 |
Currently, that's tied to
Shift+Alt+Enter.
| | 03:35 |
For some reason, that keystroke is hard
for me to remember.
| | 03:38 |
So I'm going to map that to the F2 key.
So, what I do is I move down here and
| | 03:43 |
click in this text box.
Then I go to my keyboard, and I press the
| | 03:46 |
F2 key.
Down at the bottom, it tells me that this
| | 03:49 |
shortcut is currently in use by the
View.EditLabel.
| | 03:53 |
I'm going to override that by clicking on
the assign button.
| | 03:58 |
And then, click OK.
Now, when I return back to Visual Studio
| | 04:01 |
and press F2, it puts me in Full Screen
mode.
| | 04:05 |
And when I press F2, a second time, it
puts me back in Menu view.
| | 04:09 |
One more setting I want to look at, I'll
go back to Tools.
| | 04:13 |
And then, Options.
And then, I'm going to go to Projects and
| | 04:16 |
Solutions and look in the General mode.
It's in this section that you define your
| | 04:22 |
default location for your projects.
And a place where it loads your templates
| | 04:26 |
and other items.
This is also where you specify whether it
| | 04:28 |
shows an error list when a build has
errors.
| | 04:31 |
You can also choose to track your active
item in solution explorer.
| | 04:35 |
That means, as you click on your tabs
inside Visuals Studio, it will go over to
| | 04:40 |
your Solution Explorer and find that
items in Solution Explorer and select it.
| | 04:45 |
I always like to have the Always Show
Solution turned on.
| | 04:49 |
That means that no matter how many
projects I have inside Solution Explorer,
| | 04:53 |
it always going to make sure there is a
top node that contains the solution information.
| | 04:57 |
And the last thing I'd like to do is turn
off this Save new projects when created.
| | 05:02 |
Let me show you what that does.
I'll unselect this and then choose OK.
| | 05:06 |
Now, I'm going to create a new project.
I'm going to make this a Windows App, a
| | 05:11 |
WPF App, click on OK, go to my Toolbox,
add this button.
| | 05:21 |
Now, I worked in this project for 15
minutes and I decide that it's really not
| | 05:25 |
doing what I want and I don't want to
keep it on my hard drive.
| | 05:28 |
By changing that setting to say, don't
save the project when it's first created.
| | 05:33 |
I can now choose to close the solution
and Visual Studio says, would you like to
| | 05:38 |
Save your project or Discard it?
So, what Visual Studio's doing is saving
| | 05:42 |
this file in a temporary location.
And it's not until I click the Save
| | 05:47 |
button that it get's stored in a
permanent location.
| | 05:50 |
So I'm going to click on Discard, and
it's gone.
| | 05:52 |
This is a perfect solution for trying out
little samples without cluttering your
| | 05:57 |
project list with a bunch of fake project
names.
| | 06:00 |
As I mentioned, the configuration
settings in the dialogue are endless.
| | 06:04 |
You are bound to find a few that enhance
the way that you work with inside the
| | 06:07 |
Visual Studio.
I'll show more settings and other movies
| | 06:10 |
in this course.
Remember to use export settings once you
| | 06:12 |
have Visual Studio configured the way you
want.
| | 06:15 |
That way you won't have to spend a lot of
time re configuring your environment if
| | 06:19 |
your hard drive crashes or you get a new
computer.
| | 06:22 |
| | Collapse this transcript |
| Exploring the help system| 00:00 |
It seems that with every release of
Visual Studio, comes a new Help System.
| | 00:04 |
I've used them all and I think that the
system included in Visuals Studio 2012 is
| | 00:09 |
a winner.
All the pages are HTML based.
| | 00:13 |
That means you can always read the latest
version on the Microsoft websites.
| | 00:18 |
If you know you've been working in a
situation were you won't have internet
| | 00:21 |
access then you could also install the
help pages locally.
| | 00:24 |
During a typical install of Visual Studio
you are offered the opportunity to
| | 00:29 |
install help.
Whether you chose this option or not, you
| | 00:32 |
can still configure and update help from
within Visual Studio.
| | 00:35 |
I'm going to show you how to configure
these settings.
| | 00:38 |
I'm inside Visual Studio, and I have this
solution called Exploring The Help Engine open.
| | 00:43 |
I will double-click on this Program.cs
file, which as a couple of lines of code
| | 00:49 |
that I want to find help for.
I want to know about this console
| | 00:52 |
WriteLine method, and I want to know
about this FileStream class.
| | 00:57 |
Before activating help let's look at the
settings.
| | 01:00 |
I'll go to the Help menu and choose to
Set Help Preference.
| | 01:04 |
You can see that I'm currently set to
launch the help in the browser.
| | 01:08 |
Alright let's see how that works.
I'll select the file stream and then I'll
| | 01:13 |
press the F1 key.
Visual Studio launches the default
| | 01:17 |
browser and loads the help page in the
browser.
| | 01:19 |
Here, I can read more about the
FileStream class.
| | 01:23 |
Here's the class itself, and I can see
that I'm working with the .NET 4.5
| | 01:28 |
version of the FileStream class.
If you want to look at older versions of
| | 01:32 |
the FileStream, or newer versions, you
can click here to see other .NET frameworks.
| | 01:37 |
And by clicking on this, it switches me
to the Help page for that .NET version.
| | 01:44 |
Once I have the FileStream class
selected, then I can read about the
| | 01:48 |
object here, what its base class objects
are.
| | 01:51 |
What name space it's included in, what
DLL it's included in and I can see C
| | 01:58 |
Sharp, C++, F Sharp and VB specific help
pages.
| | 02:03 |
Showing the syntax and how to use this.
For example here is the VB version.
| | 02:09 |
Next, on the bottom on the screen you can
see all of hte different members of this
| | 02:13 |
type here, my constructors.
Here are the properties of the FileStream
| | 02:19 |
class, here are the methods.
And when I find a method that I like, I
| | 02:23 |
can then click on it to read more about
this FileStream.BeginRead Method.
| | 02:27 |
Let me Close the browser and return back
to visual studio.
| | 02:32 |
Next, I want to show you how to work with
local help.
| | 02:34 |
I'll go up here and set my help
preference to launch in the Help Viewer.
| | 02:40 |
And it tells me that when I installed
Visual Studio, I didn't download any
| | 02:44 |
content from their servers.
So I'm going to select Yes for this dialog.
| | 02:50 |
In this window I get to see all of the
recommended documentation.
| | 02:53 |
Here it says I should have Visual Studio
2012 fundamentals, and the .NET Framework
| | 02:58 |
4.5, and a few other items here.
And you can add and remove documentation
| | 03:03 |
at any time, let's say that I want to to
do some windows store app development.
| | 03:06 |
So I click here to add it to my list and
then I would come down here and click on
| | 03:11 |
the Update button.
(SOUND).
| | 03:14 |
On your machine you should an update
progress the estimated download size and
| | 03:19 |
the time it will take to download this
file.
| | 03:21 |
On my machine because I'm not an
administrator, I can't do this.
| | 03:25 |
So I'm getting an error message that
says, The following the errors occured
| | 03:29 |
while performing the requested task.
What that means is that I can't use the
| | 03:33 |
local help.
But as you can see there's a huge list of
| | 03:36 |
local help topics here for you can chose
from.
| | 03:39 |
Let me Close this dialogue and return to
Visual Studio.
| | 03:43 |
Now let me switch back to my margin
browser.
| | 03:47 |
Now if I want to look at a method call, I
just click on the method name in my code
| | 03:52 |
and then I press F1.
And the help system's is smart enough
| | 03:56 |
usually to drill down into that method on
this type.
| | 04:01 |
In this case the Console.WriteLine Method
has what's called an overload there are
| | 04:05 |
more than one version of the WriteLine
method.
| | 04:08 |
One that takes a Boolean, one that takes
a decimal and many more.
| | 04:12 |
So what I can do now is click on this to
read information about this overload of
| | 04:17 |
the method.
The one that takes the double value past
| | 04:21 |
in as a parameter.
The help gets better with every release.
| | 04:25 |
I'm very happy with the Help Engine
included in Visual Studio 2012.
| | 04:30 |
Sometimes the help files themselves are
lacking in details but that is a
| | 04:34 |
different issue.
| | 04:34 |
| | Collapse this transcript |
|
|
3. Understanding the Project TypesSurveying the list of project types| 00:00 |
Visual Studio is a multi-faceted tool
that allows you to create, test, and
| | 00:04 |
debug applications of many types.
Since it is the primary Microsoft
| | 00:09 |
development tool, every technology team
at the Microsoft campus wants this
| | 00:13 |
project type to be part of Visual Studio.
That means you'll find dozens of project
| | 00:18 |
types available for any scenario you can
think of.
| | 00:20 |
I've said this before in other videos,
but it bares repeating.
| | 00:24 |
The Free Express editions are great for
making projects for one explicit technology.
| | 00:29 |
Express for Web is an excellent choice
for making HTML pages and ASP.net sites.
| | 00:35 |
Express for Desktop is your choice if you
want to build Windows Forms or WPF Applications.
| | 00:40 |
Express for Windows 8 is the dedicated
version for building Windows 8 store apps.
| | 00:45 |
And if you want to tackle the Windows
Phone Marketplace, get yourself a copy of
| | 00:48 |
the Express for Windows Phone.
Here is an example of Express for Desktop.
| | 00:53 |
Note the different language choices.
I can use C# or Visual Basic or Visual C++.
| | 00:59 |
Also note the different kinds of desktop
application I can build, Windows Forms,
| | 01:04 |
WPF Applications, Console Applications,
and Class Libraries.
| | 01:08 |
If you have the Visual Studio 2012
Professional, Premium, or Ultimate
| | 01:13 |
editions installed, you have access to
over 80 different project types.
| | 01:17 |
Just like the Express editions, you get
lots of language support, including the
| | 01:20 |
newer F# language.
Cast your eyes on this screenshot.
| | 01:25 |
Look at this giant list of project types
available, just for the C# language.
| | 01:30 |
Let's look at some sample screenshots
taken from different UI technologies in .NET.
| | 01:34 |
This is a financial dashboard written in
Windows Presentation Foundation or WPF.
| | 01:39 |
This earthquake observer is also built on
WPF.
| | 01:43 |
WPFis a technology for building robust,
full featured desktop apps.
| | 01:48 |
This is a beautiful example of what you
can do with asp.netnvc and third party
| | 01:53 |
jQuery widgets.
Sushi is another example from the same
| | 01:57 |
control vendor.
Silveright was Microsoft's entry into the
| | 02:01 |
rich browser plug-in world.
Silverlight is an awesome technology that
| | 02:05 |
has been slowly bypassed by HTML5 and
mobile web apps.
| | 02:09 |
Look at all the information packed into
this dynamic interactive app.
| | 02:13 |
This is a flight tracking application
written in Silverlight.
| | 02:17 |
Windows Store Apps are programs which run
on the user's desktop.
| | 02:21 |
The key differentiator with these type of
apps is that they only run in Windows 8
| | 02:26 |
or Windows RT, and they are only
distributed through the Microsoft store.
| | 02:31 |
This is a program called Fresh Paint, a
fantastic painting program available in
| | 02:35 |
the store.
And this is the popular Cut the Rope game.
| | 02:39 |
Tons of fun with a cute little froglet.
On the more mundane side, here is a
| | 02:44 |
Windows 8 weather app.
practical and pretty to look at.
| | 02:47 |
yes, let's not forget the phone.
Microsoft got inspired with their new
| | 02:53 |
phone UI.
It's a real winner in my eyes, though not
| | 02:56 |
as popular with the rest of the world.
Here are three examples of apps written
| | 03:00 |
in the Visual Studio for the phone.
Let's look at some more categories before
| | 03:04 |
I close the video.
This is a list of the available web projects.
| | 03:07 |
I've been writing office automation
applications for years.
| | 03:10 |
The list of office project types keeps
growing in Visual Studio.
| | 03:14 |
Here, you can see you can create an add
in for all the major office tools.
| | 03:18 |
You can also build office documents that
contain customized .NET code.
| | 03:22 |
Cloud based infrastructure looks to be a
multi-gazillion dollar industry.
| | 03:27 |
Microsoft has teams intensely working on
making Azure a big part of the future.
| | 03:30 |
You can build Azure services and deploy
them from Visual Studio.
| | 03:34 |
SharePoint is one of Microsoft's billion
dollar profit centers.
| | 03:38 |
That means companies all across the globe
are investing in building SharePoint apps.
| | 03:43 |
If you want to join the SharePoint crowd,
this is where you'll find the projects.
| | 03:47 |
Visual Studio is not just for developers.
It's also for testers.
| | 03:50 |
Here are a few of the testing projects
available.
| | 03:54 |
What's that you say?
You want to build a service that can be
| | 03:56 |
accessed remotely?
Microsoft has you covered with Windows
| | 03:59 |
Communication Foundation or WCF project
types.
| | 04:03 |
I'll bet you didn't know that you can
create a sequel server in Visual Studio.
| | 04:08 |
Now, I'm not talking about using sequel
server, or accessing a sequel server
| | 04:11 |
database from your code.
Sequel server projects allow you to
| | 04:14 |
create a project that defines the schema
and sample data for your database.
| | 04:19 |
When you compile the project, it makes
the database.
| | 04:22 |
You get all the goodies available in
Visual Studio for this project.
| | 04:25 |
For example, storing the project in
Source Control is one benefit.
| | 04:29 |
So, if you have an idea for a new feature
in Visual Studio, look at the add-in
| | 04:33 |
product type.
Lightswitch is the newest edition to the
| | 04:37 |
Visual Studio family.
With Lightswitch, you can build custom
| | 04:40 |
applications at rival off the shelf
solutions.
| | 04:42 |
Get ahead start by using the
pre-configured screen templates that give
| | 04:46 |
you application a familiar look and feel.
Now you have seen the immense list of
| | 04:50 |
project types that are included in Visual
Studio.
| | 04:53 |
What are you going to make?
| | 04:54 |
| | Collapse this transcript |
| Using project and item templates| 00:00 |
When you create a project in Visual
Studio, it creates a lot of files for you.
| | 00:04 |
The number of these files and the file
types are determined by a project template.
| | 00:09 |
Simply stated, a project template
instructs visual studio which files to
| | 00:14 |
generate and load into the IDE.
I'll start this movie by looking at some
| | 00:18 |
existing templates.
In Visual Studio you can open a template
| | 00:22 |
by clicking on this New Project link or
by choosing File > New Project.
| | 00:28 |
In the New Project dialogue, Visual
Studio looks up a list of the available
| | 00:35 |
Templates and shows them in this tree
view.
| | 00:37 |
Here you can see the Visual Basic
templates and the C Sharp templates and
| | 00:43 |
the other language templates.
Within the C Sharp templates, I can pick
| | 00:46 |
by category.
So I'm going to go to this Windows node
| | 00:49 |
and choose Console Application.
I'll leave the name at the default and
| | 00:53 |
click on OK.
You've seen console applications in
| | 00:56 |
previous videos, it has a program.cs
file.
| | 01:00 |
It has an app.config, it has a folder
full of references.
| | 01:04 |
These references are used by the Compiler
during the build process.
| | 01:08 |
And if you look inside this properties
node, you'll see there's a file in here
| | 01:12 |
called assemblyinfo.cs.
Let me double-click on this Program.cs
| | 01:16 |
file, and you can see the C Sharp code.
Now I'm going to add another template to
| | 01:22 |
this solution.
I'm going to do that by right-clicking on
| | 01:24 |
My Solution and choosing Add New Project.
It's prompting me to Save my project, so
| | 01:32 |
I'll do that.
And I'll Save it here in my Exercise
| | 01:36 |
Files folder in the Correct folder, in
this case, I'm saving it in a final
| | 01:41 |
folder inside chapter 03, movie number
02.
| | 01:44 |
And you'll leave the names at the default
and click on Save.
| | 01:47 |
Next I want to create a web application.
So I'm going to go here and I'm going to
| | 01:51 |
choose this MVC Web Application.
I'll click on OK, and then I'll choose
| | 01:57 |
from one of these eight template types.
I'm going to pick this Internet
| | 02:01 |
Application and leave everything else at
the defaults.
| | 02:04 |
(SOUND).
I have a brand new installation of Visual
| | 02:07 |
Studio and in some cases what can happen
on a brand new installation is that the
| | 02:11 |
NuGet package management system is not up
to date.
| | 02:16 |
That's what's happening here.
NuGet is a system for loading helper
| | 02:20 |
components into any Visual Studio
project.
| | 02:23 |
So, I'm going to have to update NuGet.
So I am going to click on okay here then
| | 02:28 |
when you go up to the Tools menu then
I'll click on Extensions and Updates.
| | 02:33 |
Next I will click on this Online node and
then choose download the NuGet Package Manager.
| | 02:44 |
Next I will click on the Install button,
and I am ready to go, click Close and
| | 02:51 |
then restart Visual Studio.
That was a quick side adventure, let's
| | 02:57 |
try adding that project again,
right-click on my solution choose Add >
| | 03:02 |
New Project.
Go to the same steps as before.
| | 03:11 |
On this computer we went out to internet
and downloaded a lot of new git packages
| | 03:15 |
which, which took about 30 seconds to go
through the first time.
| | 03:17 |
It will be faster in subsequent installs.
Here's what I want you to see.
| | 03:21 |
This Mvc Application is loaded with
files.
| | 03:25 |
Unlike the ConsoleApplication, this one
has dozens of files.
| | 03:28 |
Here's the AccountController, there is
stuff in this content folder and stuff in
| | 03:33 |
this app start folder.
So what this shows is that each template
| | 03:38 |
has different instructions to Visual
Studio.
| | 03:40 |
Now where does Visual Studio get these
instructions?
| | 03:43 |
I'm glad you asked that question.
I've opened file explorer on my Windows 8
| | 03:47 |
machine and I've navigated to this
location here.
| | 03:51 |
This is where Visual Studio installs its
project templates.
| | 03:54 |
Since I'm working with C Sharp I'm going
to look in this folder.
| | 03:56 |
And then I'm going to open up the Windows
folder.
| | 04:00 |
Then I'll drill into this 1033 folder.
That is the numeric value for an English
| | 04:04 |
cultured machine.
So we'll open this up and look in this folder.
| | 04:09 |
This is the ConsoleApplication.
See these files, those match what I had
| | 04:13 |
inside the Visual Studio project.
Here's my Program.cs file.
| | 04:20 |
This matches what I have in Visual
Studio, well it sort of matches what I have.
| | 04:24 |
Let's go look again, I'll switch back to
Visual Studio and Open this Program.cs.
| | 04:31 |
Here you see I've got a namespace,
console application one, a Program, and
| | 04:35 |
then a static void main method and a
number of using statements at the top of
| | 04:39 |
this window.
Here's what I have inside the template,
| | 04:42 |
using system.
Using collection.generic and then here an
| | 04:45 |
if statement.
These dollars signs are symbols or tokens
| | 04:48 |
that are used by visual studio.
In this case it says if the version of
| | 04:51 |
the framework I'm targeting is greater
than 3.5 then add a using statement for system.link.
| | 04:57 |
And if it's greater than 4.5 then add a
system.treading.task.
| | 05:02 |
Back to Visual Studio you see since I
targeted .NET 4.5 I got those extra using statements.
| | 05:07 |
And then here you see that it says write
a name space with the safe project names.
| | 05:12 |
What this means is it picks up the name I
gave my project.
| | 05:16 |
Modify the strings slightly if it's
necessary and injects that here as the namespace.
| | 05:20 |
And then the rest of the code matches
what I have.
| | 05:22 |
Let's go up one level, and we'll look at
the web section this time, and here are
| | 05:33 |
the Intranet Mvc Applications.
Here's the different project templates
| | 05:37 |
for those types of projects.
Again these are full of files that are
| | 05:40 |
loaded by Visual Studio.
We'll go back to that Windows folder one
| | 05:46 |
more time, I want to show you there is
several other files there's App.config,
| | 05:51 |
there is the assemblyinfo.
And then here is the CS project file this
| | 05:55 |
is what Visual Studio uses later in life
to load the files once they've been
| | 06:00 |
created by the template.
And then this is the instructions to the
| | 06:03 |
template engine what to do.
So, here you can see instructions like,
| | 06:08 |
add a Project File
ConsoleApplication.csproject.
| | 06:10 |
Replace the Parameter, so those items
with the dollar signs, and replace those
| | 06:14 |
dollar sign values inside that file.
Let's summarize, there are many different
| | 06:20 |
project types available in visual studio.
There's sure to be one that matches your
| | 06:23 |
application model.
If you want to create your own custom
| | 06:26 |
templates, then check out the custom
template videos in this chapter.
| | 06:29 |
| | Collapse this transcript |
| Creating custom project templates| 00:00 |
Let me tell you about some friends of
mine.
| | 00:02 |
They have a consulting firm in Seattle
that sells custom database-driven desktop
| | 00:07 |
applications to small businesses.
Over the years, they have standardized on
| | 00:10 |
software pieces that they use on nearly
every project.
| | 00:13 |
To make it easy to start a new project
with all these assets in place, they
| | 00:17 |
create custom visuals to do a project
templates.
| | 00:20 |
In this video, I'll show you how to do
the same for your projects.
| | 00:23 |
On the screen I have two copies of
Windows Explorer, or as it's called in
| | 00:29 |
Windows 8, the File Explorer.
On the right side of the screen is the
| | 00:32 |
folder that Visual Studio monitors for
custom templates.
| | 00:35 |
Let me show you where that is.
That's inside My Documents > Visual
| | 00:40 |
Studio 2012 > Templates, and then the
Project Templates folder.
| | 00:45 |
I'm going to put a zip file in here that
contains all the assets for the custom template.
| | 00:50 |
I have that zip file over here in this
folder.
| | 00:53 |
This is in my exercise files folder.
Assets, and then Project Templates.
| | 00:58 |
Let me use the zip file here.
Let me copy this and place it inside the
| | 01:02 |
monitored folder.
Now, I can start Visual Studio.
| | 01:05 |
And create a brand new project.
I'll go to this search installed
| | 01:15 |
templates and type in lynda.
There is my custom template.
| | 01:20 |
I select it and then I choose a new name
down here.
| | 01:26 |
Then, I click OK.
Look at that.
| | 01:29 |
All of these files were inside that ZIP
file, and they were loaded automatically
| | 01:33 |
by Visual Studio.
This is a template I used when I created
| | 01:36 |
my Windows Store App, Essential Training,
here on lynda.com.
| | 01:39 |
Every time I created a new demo, I would
use this template to get me the starting assets.
| | 01:44 |
You probably want to know how to create
your own templates.
| | 01:47 |
I'll show you.
I'll open an existing project.
| | 01:50 |
I'll go ahead and Discard this existing
project.
| | 01:56 |
And then, I'm going to go to the same
assets folder and I'm going to open this
| | 02:00 |
project here called
ExploreCaliforniaShell.
| | 02:03 |
This is a WPF Application that I'd like
to use.
| | 02:07 |
This application has a pages folder, an
images folder, a common folder, and a
| | 02:12 |
number of XAML files.
I'm going to turn this into a custom template.
| | 02:17 |
It couldn't be easier.
I'll click on File > Export Template.
| | 02:22 |
In this first dialogue I tell visual
studio what kind of template I want to make.
| | 02:26 |
I have a choice of Project Template or
Item Template.
| | 02:29 |
I'll talk about item templates in another
video.
| | 02:32 |
I'll choose project template.
If I had more than one project in my
| | 02:37 |
solution, I would choose it from this
drop down.
| | 02:40 |
Then, I would click Next.
Type in the name that shows up inside the
| | 02:45 |
new project dialogue and the description.
Down here, I can pick some images and
| | 02:53 |
icons that will show up in the new
project dialogue.
| | 02:56 |
I'll click on Browse, go to my Desktop,
open my Exercise Files, and then go to my
| | 03:04 |
Assets Folder.
Then into my Project Templates and I'll
| | 03:08 |
pick this first one, this icon from my
image icon.
| | 03:13 |
And for my Preview image, I'll pick this
PNG file here.
| | 03:19 |
Done.
Next, I'm going to choose to
| | 03:22 |
automatically import the template into
Visual Studio, and then this check box
| | 03:26 |
allows me to see the output when I'm done
exporting.
| | 03:29 |
I'll click Finish.
There comes my Explorer window.
| | 03:33 |
And you can see that Visual Studio
created this ZIP file.
| | 03:36 |
I put it in My Exported Templates.
And it also, let's look inside this
| | 03:42 |
folder, created a copy inside here.
So now, you see I've got these two ZIP
| | 03:45 |
files in there.
Now, let's see how to use this new
| | 03:48 |
project template.
File > New > Project.
| | 03:56 |
Type in the word explore.
There it is.
| | 04:01 |
There is my custom icon.
Over here, you can see the custom preview screen.
| | 04:04 |
You can see the name that I selected,
ExploreCaliforniaShell.
| | 04:09 |
Here is the new name of my new project
when I create it and I'll click OK.
| | 04:13 |
And it is an exact match from my previous
project.
| | 04:16 |
There's my images folder, there's my
pages folder, the comment folder and so on.
| | 04:21 |
As you can see, the Export feature makes
it dead simple to create your own project templates.
| | 04:27 |
| | Collapse this transcript |
| Creating a custom item template| 00:00 |
I have this project opened called Create
Custom Item Templates.
| | 00:04 |
Let's imagine for a minute that your a
company that has a page that you would
| | 00:07 |
use in lots of different projects.
This one here, TourPageTemplate.
| | 00:12 |
It's a WPF page that has the word Tour
Page.
| | 00:15 |
It's a really simple user interface just
for demonstration purposes.
| | 00:18 |
But I'd like to use this in multiple
projects.
| | 00:20 |
So, what I'm going to do is create an
item template out of this page.
| | 00:24 |
To do that, you go to File, and then
Export Template.
| | 00:28 |
And then, you would pick this Item
Template, and then click on Next.
| | 00:32 |
Before I do that though, I'd like to put
some place holders inside the file that
| | 00:37 |
will get replaced when I make the new
item.
| | 00:39 |
Let me show you how to do that.
This is the page from the MSDN help system.
| | 00:45 |
It's about template parameters.
These are the different parameters that I
| | 00:49 |
can put inside my template.
They have a dollar sign at the front and
| | 00:54 |
a dollar sign at the end.
That's how they differentiate template
| | 00:56 |
parameters from the other parts of the
template.
| | 00:59 |
The ones I'm going to use in this example
are the root namespace, the safe item
| | 01:03 |
name, and time.
Safe item name picks up what the user
| | 01:07 |
specifies for the name of the item.
Let's say it's called sales page.
| | 01:12 |
And then, strips out any unsafe
characters and any spaces.
| | 01:18 |
I'm going to use these three.
So, let me copy this root namespace.
| | 01:21 |
And then, switch back to Visual Studio.
And then, I'll switch over to my Code
| | 01:24 |
Behind page.
Currently, my file has this namespace, ExploreCaliforniaShell.Pages.
| | 01:31 |
If I use this template in multiple
projects, the name of the names bases is
| | 01:36 |
likely to be different.
So I'm going to replace this with the placeholder.
| | 01:43 |
Remember, it has a dollar sign at the
front and end of the placeholder.
| | 01:46 |
I'm also going to change the name of the
class.
| | 01:49 |
Switch back to this page, and I'm
going to use this item.
| | 01:54 |
Safe item name.
I'll also add a comment.
| | 02:05 |
And then, I want to make one more change.
I'm going to do that over in my XAML section.
| | 02:10 |
Currently, this says the word Tour Page
at the top.
| | 02:13 |
What I'd like to have happen is this
first word be replaced with the name of
| | 02:17 |
the item that the user picked when
they're creating their new item.
| | 02:21 |
So I'm going to go down here and find
this word Tour and replace that with this
| | 02:25 |
safe item name.
So, we'll copy this.
| | 02:28 |
I'll press Ctrl+Tab to switch back to my
XAML page, double-click on Tour, and put
| | 02:35 |
in a placeholder.
Now I'm ready to export.
| | 02:40 |
I'll choose File > Export Template,
choose the Item Template.
| | 02:47 |
And then, click Next.
Visual Studio asks me which item I want
| | 02:52 |
to export.
I'll choose my pages,
| | 02:54 |
TourPageTemplate.xaml file, and then
click Next.
| | 02:58 |
In this section of the Export Template
Wizard, I'm asked what references I need
| | 03:04 |
to have inside my project.
What Visual Studio will do is detect
| | 03:08 |
whether or not these references are
there, if it's not already in the
| | 03:12 |
project, it will add it to the references
folder.
| | 03:15 |
I'll pick a few of these at random for
today.
| | 03:17 |
And then, click on Next.
In this location, I specify the name of
| | 03:22 |
my template.
I'll call it TourPage.
| | 03:28 |
I'll also choose an icon.
I will not pick a preview image though, I
| | 03:33 |
don't have one.
I will choose an icon, Browse.
| | 03:36 |
Go to my Desktop.
And then, into my Exercise Files.
| | 03:40 |
Then into my Assets Folder.
And then, into Project Template.
| | 03:44 |
I'll pick this file here
ExploreAppIcon.png.
| | 03:48 |
And then click Open.
And then, click Finish.
| | 03:52 |
Visual Studio exports the file to this my
Exported Templates.
| | 03:56 |
It also makes a copy over here in
templates, item templates.
| | 04:01 |
There it is, TourPage.zip.
And now, we're ready to see what this
| | 04:06 |
looks like when you add it to a project.
I'll create a brand new project.
| | 04:12 |
I'll choose a WPF Application, and leave
the names at default.
| | 04:16 |
Then, I'll right-click on my project, and
say Add > New Item.
| | 04:24 |
There it is, right at the top.
There's my Tour Page.
| | 04:26 |
Got the My Custom icon.
I'm going to name this one Sales.
| | 04:30 |
And then, click Add.
So now, it says Sales Page here.
| | 04:37 |
You see that it correctly change the text
inside my XAML portion of the page.
| | 04:42 |
Lets look at the code behind for the
Sales Page.
| | 04:44 |
I'll press F7 to switch to the code
behind view.
| | 04:47 |
It did the right thing.
It changed the namespace.
| | 04:51 |
It also changed the name of the class and
it put this comment in with the correct
| | 04:56 |
date timestamp.
Let me tell you about another cool
| | 04:58 |
template feature.
Microsoft has a bunch of full featured
| | 05:01 |
template and demos that you can browse
and add to your template list.
| | 05:05 |
Look for the sample projects video
elsewhere in this chapter to learn more.
| | 05:08 |
| | Collapse this transcript |
| Investigating the sample projects ecosystem| 00:00 |
Visual Studio has a number of ways of
extending its functionality through
| | 00:04 |
internet downloads.
In this video, I'll look at how to
| | 00:07 |
install third party project templates and
sample applications.
| | 00:10 |
There are several ways to get to the
samples and template downloads.
| | 00:15 |
One way to do it is to go to the Help
page and choose this section samples.
| | 00:24 |
This dialog should look familiar to you.
It's the new project dialog.
| | 00:27 |
But notice what happened when I opened it
from the Help menu, it opened the section
| | 00:31 |
called Online.
Let me show you another way to get here.
| | 00:35 |
I'll cancel out this dialog.
And this time I'll click on New Project.
| | 00:40 |
Another way do that would be File > New
Project.
| | 00:44 |
You'll notice that at the bottom of this
list is an online node.
| | 00:49 |
When I click here, I see the same screen
I saw a few minutes ago.
| | 00:52 |
There's a template section and a sample
section.
| | 00:56 |
One more way to get here, if you're
interested, is by going on this getting
| | 01:01 |
started on the Start page and clicking
Discover extensions add ons and samples.
| | 01:07 |
This one takes you to a slightly
different dialog, this is the Extensions
| | 01:15 |
and Updates.
Let me go back to the previous way of
| | 01:18 |
doing it.
I'll go to New Project, then down to
| | 01:21 |
Online, then I'll click on Templates, C#,
and then ASP.net.
| | 01:26 |
These are some of the available templates
for applications that are targeting ASP.net.
| | 01:32 |
Here's one, for instance, DotNetNuke
Module Generator DotNetNuke is a third
| | 01:37 |
party tool that works on the top of
ASP.net.
| | 01:41 |
I'm not going to add any of these
templates.
| | 01:44 |
What I'm going to spend the time looking
at is the sample applications.
| | 01:47 |
But I did want to show you that these
templates are available if you're
| | 01:50 |
interested in downloading them.
These will be placed inside your custom
| | 01:54 |
project template folders on your hard
drive.
| | 01:56 |
See the earlier movies in this chapter to
learn how that works.
| | 01:59 |
Let's go look at samples.
There's a ton of samples in here.
| | 02:04 |
I'm going to go look in the Visual C#
section.
| | 02:06 |
Then in the Desktop Section.
Look at all these different sample areas,
| | 02:12 |
.NET Frameworks, C#.
Here's one linked to bit maps as a visual
| | 02:18 |
C# project.
The one I want to work with is in this
| | 02:22 |
WPF section.
Then in animation, this is the one I
| | 02:28 |
want to try.
The particle effects demo.
| | 02:31 |
I'll click on this.
And then, I'll click over here on the
| | 02:33 |
more information to learn more about this
sample.
| | 02:37 |
That takes me to the Microsoft website
where I read about the Particle Effects Demonstration.
| | 02:42 |
I can see the ratings, how many times
people have downloaded it, when it was
| | 02:46 |
updated last.
A read me about what the application does.
| | 02:51 |
I can look at the source code from the
Microsoft website.
| | 02:57 |
When I've decided that I really want to
use this project sample, I switch back to
| | 03:01 |
Visual Studio.
I'm ready to add the product sample.
| | 03:04 |
I have to give my project a name, then I
click on OK.
| | 03:11 |
Next, I click on Install.
What just happened?
| | 03:16 |
Microsoft downloaded some files from
their web server.
| | 03:18 |
They made a new section in my project
section now.
| | 03:23 |
If I look on samples at the bottom,
there's now a new section here that
| | 03:28 |
didn't exist before.
So, I can recreate this at any future
| | 03:33 |
point when I want to.
And then, it copied the files to my
| | 03:36 |
computer, used the template to build my
new project, and then added all the new
| | 03:41 |
items from the template to my project.
Let's see what this looks like.
| | 03:45 |
I'll press F5 to debug my application.
And this is my Particle Effect Demonstration.
| | 03:52 |
Nice.
Now you know what to do if you have a few
| | 03:54 |
extra hours to spare on Friday night.
That's right, you should download some
| | 03:58 |
samples and learn more about .NET.
| | 04:01 |
| | Collapse this transcript |
|
|
4. Exploring the Project TypesCreating a website with ASP.NET| 00:00 |
ASP.NET is the primary website technology
available in Visual Studio.
| | 00:04 |
ASP.NET has been around for years, it
debuted in the first version of .NET back
| | 00:09 |
in 2002.
Web technologies are seeing a period of
| | 00:12 |
phenomenal growth in tools, frameworks,
and philosophy.
| | 00:16 |
Microsoft is adopting its ASP.NET tools
to fit into this new era of web
| | 00:20 |
application development.
In this movie, I'll show you how to
| | 00:23 |
create basic ASP.NET applications.
To learn more about this fascinating web
| | 00:28 |
framer, check out the other ASP.NET
courses here on lynda.com.
| | 00:32 |
For this demonstration, I will switch to
Visual Studio, and create a new web project.
| | 00:37 |
To create my new project, I will open the
File menu and choose New Project.
| | 00:42 |
The language for this project will be
Visual C Sharp, so I'll chose that node
| | 00:47 |
and then the Web node.
Look at all these project types.
| | 00:51 |
In this movie, I'm going to look at the
Empty Web Application and the Web Forms application.
| | 00:56 |
In later movies, I'll look at the MVC 4
Web Apps and the Dynamic Data Entities
| | 01:01 |
Web Applications.
For this demo, I will put my files in the
| | 01:05 |
Exercise folder and leave the names at
the default.
| | 01:08 |
Make sure I choose the empty web
application and then click OK.
| | 01:12 |
Because I picked the empty web
application, I didn't get very many files
| | 01:17 |
inside my project.
I have a web config and a reference
| | 01:21 |
folder and a few other items.
I need to add a web form to this application.
| | 01:25 |
To do that, I will right click, and
choose Add > Web Form.
| | 01:31 |
Now there are a lot of other types of
items you can add to this project.
| | 01:34 |
Let me show those to you, right-click,
Add > New Item.
| | 01:40 |
And if you click on this web node over
here you'll see about 30 items listed as
| | 01:46 |
the items that I can add to a ASP.web
application.
| | 01:50 |
I'm going to choose this first one Web
Form.
| | 01:52 |
I'll call it Default (SOUND) and then
click Add.
| | 01:57 |
Visual Studio creates a file called
Default.aspx.
| | 02:01 |
And adds a child file called
Default.aspx.cs and another one called
| | 02:07 |
.designer.cs We're going to work in these
first two files mostly in this example.
| | 02:11 |
When I select the Default.aspx file, I
can see the source, this is my HTML.
| | 02:17 |
Since this is also a server site
technology, I can inject or add server
| | 02:21 |
site components that get created when the
page is posted back to the server.
| | 02:25 |
I can do that by adding (SOUND) asp colon
and then the type name here.
| | 02:31 |
If I want a button, I can choose from
this list.
| | 02:34 |
Now this is not ready to use yet.
I need to add some other attributes to this.
| | 02:38 |
So you might find it easier to work with
the drag and drop designer.
| | 02:41 |
To do that, I'm going to click on the
Split button on the bottom of the screen.
| | 02:45 |
And then I'm going to open my toolbox and
find the Button control, and drag that
| | 02:51 |
over, either to the HTML section or to
the Designer surface.
| | 02:57 |
There's my button, and then there's the
extra attributes that were added by
| | 03:00 |
Visual Studio.
It has an ID=Button1 that gives me a
| | 03:03 |
programmatic handle to this item,
runat=server to turn this into a server
| | 03:08 |
side control, and the text to show.
I'll change this to Hello.
| | 03:14 |
I'd also like to add a hyperlink, to do
that I'm going to drag over this server
| | 03:18 |
side hyperlink.
Like that.
| | 03:21 |
And we start by having this link to a
page within this project.
| | 03:24 |
I don't have any more pages yet, so let's
add another one.
| | 03:27 |
I'll right click on my project and choose
Add > Web Form, and call it AboutUs.
| | 03:37 |
Type a little bit of HTML here and I'm
ready.
| | 03:44 |
So I'll go back to my default aspx page,
click on this hyperlink, change the text
| | 03:50 |
to say AboutUs, and then I'll click on
this Navigate Url property.
| | 03:56 |
If you don't see them in this order, you
might have to click on the alphabetical
| | 04:00 |
button as opposed to the categorize
button in the property grid.
| | 04:04 |
Then here in the navigate URL property,
I'll click on this Build button, the one
| | 04:07 |
with the three dots on it and choose from
some of my items inside my project.
| | 04:11 |
I'll choose Aboutus.aspx.
Now I'm ready to test this application.
| | 04:17 |
To do that I can debug it like any other
.NET application.
| | 04:20 |
I can press F5, which will start the
application, load it into the default
| | 04:26 |
browser, attach a debugger to the
browser, and then show me the UI.
| | 04:31 |
Look at that, I can click on this About
Us hyperlink, and it takes us over to the
| | 04:35 |
Aboutus.aspx page.
Next, I want to write some code to change
| | 04:40 |
the text on the about us, and I want to
also change the location where it's
| | 04:45 |
going to go, when I click on the
hyperlink.
| | 04:47 |
I'll do that in the C Sharp code.
So let me shut down the browser, return
| | 04:51 |
back to Visual Studio.
And then I am going to press F7 on this
| | 04:56 |
page to switch to the code behind file.
That is the default.aspx.cs file.
| | 05:03 |
In the page load event I'm going to
modify that control.
| | 05:09 |
Name of my control is Hyperlink1.
(SOUND).
| | 05:35 |
Now when I load the page we're going to
programmatically change the text and the
| | 05:39 |
location at where the hyperlink navigates
to.
| | 05:43 |
I'll press f5 to debug the application.
The new text is there.
| | 05:48 |
And when I click on it, instead of going
to the About Us page, it takes me to the
| | 05:52 |
lynda.com website.
Now, the code that I wrote is server site code.
| | 05:56 |
And that means that I can debug it, just
like any other .NET code.
| | 05:59 |
We haven't seen the debugging chapter
yet, it's later in this course.
| | 06:02 |
But let me show you briefly, how that
works.
| | 06:04 |
I'll switch to Visual Studio.
Move to this line of code where it says
| | 06:07 |
Hyperlink.txt and then click over here in
the margin or press the F9 to turn on a
| | 06:12 |
break point.
Now, let's hit back to browser, click the
| | 06:16 |
back button and Refresh this page.
I pressed F5 inside the browser which
| | 06:23 |
caused the page to refresh which caused
the page load event to fire and now you
| | 06:27 |
see that I'm in my code.
And I can hover over this text and see
| | 06:33 |
what's currently assigned to it.
I can change the value while I'm sitting
| | 06:37 |
at this break point like that.
And then press F5 to continue running the application.
| | 06:45 |
And you see that it's modified the text
on the fly while I was debugging the application.
| | 06:52 |
You can do a lot more sophisticated UI
with ASP.NET.
| | 06:55 |
For instance you can work with the
Calendar control.
| | 06:59 |
Drag that down here and Drop it on the
page and then choose Auto format to make
| | 07:03 |
it look nicer, or a different color at
least.
| | 07:05 |
Click on OK, and then I'm going to put
what's called a label control on here.
| | 07:10 |
There it is, I'll drag that over.
And then I'm going to write a little bit
| | 07:14 |
of code on this calendar event.
I'm going to look for the lightning bolt
| | 07:18 |
and then go to the SelectionChange then
double-click here.
| | 07:21 |
Now what will happen is when somebody
picks a new date on the calender, I want
| | 07:24 |
to update the Label, (SOUND), there we
go.
| | 07:37 |
I'm going to take the current selected
date, turn it into a long date string,
| | 07:40 |
and show that on the page.
Remove this break point by clicking on
| | 07:43 |
the red dot and then press F5 to Run the
application.
| | 07:47 |
Choose a new date, and just like that,
I've got a working calendar.
| | 07:51 |
Of course, Microsoft is generating the
HTML on the page.
| | 07:55 |
If you right click on this and choose to
view source, you can actually see the
| | 07:59 |
HTML that was created by Microsoft.
Wow, that's a lot of HTML.
| | 08:05 |
Let me do one more example.
I'll show you a more fancy type of web
| | 08:13 |
application, one that Microsoft has a lot
of prebuilt files for you.
| | 08:17 |
Alright, click here and choose to Add >
New Project, and this time I'm going to
| | 08:23 |
choose the ASP.NET Web Forms Application.
I'll leave this at the defaults and click OK.
| | 08:31 |
Then lets look at my Solution Explorer,
look at how many files were created for
| | 08:35 |
that site.
There's App Data folder, an App Start
| | 08:38 |
folder, a Content folder.
There is a series of jquery scripts.
| | 08:43 |
I'll talk more about this later in the
course.
| | 08:46 |
I mean, a ton of stuff including a
Default page.
| | 08:49 |
Something called a SiteMaster and many
other pieces.
| | 08:52 |
The site looks great when you run it.
Let me show you what it looks like, I'm
| | 08:55 |
going to right-click here and make this
my StartUp Project in Visual Studio.
| | 08:59 |
that tells Visual Studio to compile this
one and make it start one when I press
| | 09:02 |
the debug keep.
Now when I press F5, it will open my new
| | 09:06 |
site and here I can click on the Home
link, the About link or the Contact link.
| | 09:12 |
Very nice, right one more thing I want to
show you and that is how Microsoft split
| | 09:16 |
all these features into the application.
Lets say that I want to log in to this
| | 09:20 |
website currently when I click on this
Log In it has be type in a name and a Password.
| | 09:26 |
But a lot of us today are using other
services like Twitter, or Facebook, or
| | 09:30 |
Google, or a Microsoft accounts to log
into our sites.
| | 09:33 |
Let me show you how easy these are to set
up in ASP.NET Web Forms.
| | 09:37 |
Close down my browser.
Switch back to Visual Studio.
| | 09:40 |
Open this folder here, the App Start
folder and find this authconfig.cs file.
| | 09:48 |
Then I'll scroll down to this one line of
code and uncomment it.
| | 09:52 |
Take out these two slashes at the
beginning of the line and run the
| | 09:56 |
application by pressing F5.
Now, I've done nothing else, but watch
| | 09:59 |
what happens.
Click on Log In.
| | 10:03 |
I click on use Google Service to log in.
It will redirect me to Google.
| | 10:15 |
Now I've logged into Google.
It's asking me if I want to allow that
| | 10:18 |
site to have access to the name and
password, or the token I should say.
| | 10:22 |
I'll say yes, Allow, which redirects me
back to my website and now is asking me
| | 10:27 |
to create a user name for this current
web application.
| | 10:32 |
I click on login and there I am logged in
to Gmail.
| | 10:36 |
And later, I can log off and then choose
to log in click on Google and instead of
| | 10:42 |
having to go back to the Google website.
I'm automatically validated by their server.
| | 10:46 |
Very nice.
As you can see there's a lot of ways of
| | 10:49 |
working with Web Apps in Visual Studio.
The key point today is that visual studio
| | 10:54 |
provides all the tools you need to edit,
build, debug and deploy websites.
| | 10:59 |
| | Collapse this transcript |
| Creating an ASP.NET MVC application| 00:00 |
The model view controller pattern or Mvc
has been a stead fast pattern used by
| | 00:05 |
developers for the last 20 years.
This popularity stands for many factors,
| | 00:09 |
separation of concerns being one such
factor and testability being another.
| | 00:14 |
In the web programming world there has
been a strong shift towards Mvc for
| | 00:18 |
server side programming frameworks
Asp.net has a nice implementation of Mvc.
| | 00:24 |
Let's take a look.
For this demonstration, I'm using a
| | 00:27 |
solution called MvcApplication that
contains one project.
| | 00:32 |
Before I show you the code in this
project, let's talk about how you create
| | 00:35 |
a new project.
Go to File, and choose either New Project
| | 00:40 |
or Add > New Project.
I'll choose this latter option.
| | 00:44 |
Then I'll choose my language of choice C
Sharp, the Web node, and then I'll click
| | 00:51 |
on ASP.NET MVC 4 web application.
And then click on OK.
| | 00:56 |
In this next screen you're given a choice
of 8 templates to choose from.
| | 01:00 |
The one I'm going to be showing you today
is the basic template.
| | 01:03 |
I encourage you to look at the Internet
application and Intranet Application
| | 01:07 |
templates as well.
They contain sample models, sample views,
| | 01:12 |
and sample controllers.
Also, we're going to be using the raise
| | 01:16 |
your view engine.
This is the code engine that you use
| | 01:18 |
inside your views.
More about that in a few minutes.
| | 01:22 |
I'm going to click on Cancel, and then on
Cancel again.
| | 01:25 |
I'll open my project, and look at the
major folders that are in here.
| | 01:29 |
There is a Controllers folder, a Models
folder, a Scripts folder, which contains
| | 01:34 |
some jquery files and a Views folder.
We'll start by looking in the
| | 01:39 |
Controller's folder.
MVC controllers are a key component of
| | 01:44 |
ASP.NET MVC.
Each controller contains methods that are
| | 01:48 |
activated by users browsing to the
website.
| | 01:51 |
I'll add a controller to my project.
Right-click on the Controllers folder,
| | 01:55 |
and choose Add Controller.
In this dialog, I give my controller a name.
| | 02:03 |
I also choose what Scaffolding options to
use.
| | 02:06 |
This means what pre-built templates to
use inside your controller.
| | 02:10 |
I'm going to choose the Empty MVC
Controller, but as you can see there are
| | 02:14 |
many other options.
I'll click on Add, Visual Studio stubs
| | 02:20 |
and some boiler plate code.
Let me unpin my Toolbox so we can see
| | 02:24 |
more of this.
It starts with a Home Controller that
| | 02:27 |
derives from the controller class and we
have one method Index.
| | 02:31 |
Action methods serve two purposes in the
controller.
| | 02:34 |
First, they can get information from the
inbound request.
| | 02:38 |
For example, form data or query string
data.
| | 02:41 |
This is done through a technique called
model binding, and then you can use just
| | 02:45 |
data in your method.
Second, they can return something to the browser.
| | 02:49 |
This is done through the return value of
the method.
| | 02:52 |
I'm going to return a simple string.
So I'm going to say, return content, and
| | 02:58 |
then the name of my controller and the
name of my action method.
| | 03:05 |
Now I'm going to run the application by
pressing F5.
| | 03:10 |
The user navigates to the controller by
typing in something on the URL.
| | 03:15 |
Home, and then they navigate to the
method by typing in another value here, Index.
| | 03:21 |
Home happens to be the default controller
and index happens to be the default
| | 03:25 |
action method.
So, I see the same results here.
| | 03:27 |
Let's go modify our controllers.
I'll close down the browser.
| | 03:31 |
Return to Visual Studio and open up the
second controller, LiveDemoController.
| | 03:36 |
What Can you return from an action
method?
| | 03:38 |
You can return content like I just did,
XML, JSON packages, Http status codes,
| | 03:46 |
Redirect requests two other pages and of
course Views.
| | 03:49 |
Let's show you what I'm doing down here.
Remember I said that you can gather up
| | 03:54 |
information from the inbound request.
I'm doing that here in this method called ReadValue.
| | 03:59 |
I'm reading an integer value from the
query string, and then I'm checking to
| | 04:04 |
see if the value is null.
If it is then I return a status code, a
| | 04:08 |
404 error.
If I get a valid number, I check the number.
| | 04:13 |
If it's 1, then I return a redirect
request.
| | 04:15 |
And if it's any other number, then I
return some raw content.
| | 04:19 |
Let's try this.
We'll press F5 to run the application.
| | 04:24 |
Type in the name of my controller,
livedemo slash, the name of my action
| | 04:30 |
method, and then my query string value.
I'll start with the value of the 2, that
| | 04:38 |
is returning my content result.
If I pass in the query string value of 1
| | 04:43 |
that makes the redirect request, and if I
pass in no value, which will result in a
| | 04:48 |
null, that sends the 404 error request.
My point of this demonstration is that
| | 04:55 |
you can return a lot of different
information to the browser through the
| | 04:58 |
action method.
The most common thing you're going to
| | 05:00 |
want to return from the action method is
HTML.
| | 05:03 |
And the best way to do that in MVC is by
using a View.
| | 05:10 |
Let's look at the ShowViewsController.
Here I have three action methods.
| | 05:15 |
SimpleView, NiceForm and a
DataDrivenView.
| | 05:18 |
We'll start with the SimpleView.
I'm going to create my own view by
| | 05:22 |
right-clicking on this method and
choosing Add View.
| | 05:26 |
Now before I do that, let me share this
folder down here.
| | 05:30 |
There is this folder called Views that
has has a ShowViews subfolder.
| | 05:34 |
There are two cshtml files in this
folder, keep that in mind.
| | 05:39 |
I'll right-click here, choose Add View,
name my view, pick the code engine that I
| | 05:45 |
want to use within that view, and then
set some other values.
| | 05:48 |
Currently I'm going to leave those all at
the defaults and then I'll click on Add.
| | 05:54 |
Do you see what showed up over here?
SimpleView.cshtml, and now I can write
| | 06:03 |
any HTML that I want here.
Like that.
| | 06:15 |
I need to adjust this and put some text
in there.
| | 06:21 |
Now I'll run the browser by pressing F5,
navigate to My View, and there's my hyperlink.
| | 06:30 |
The point of this is the view contains
HTML, and I don't have to write it in my
| | 06:34 |
action method, I can use a much better
designer for building the HTML.
| | 06:39 |
Now you can do fancier HTML than just
this.
| | 06:42 |
(SOUND), let's look at this method here,
nice form.
| | 06:45 |
So this shows that any valid HTML can be
used inside your view.
| | 06:50 |
For my last demonstration, I want to show
a data driven view.
| | 06:55 |
Here's what the current view looks like.
It says DataDrivenView at the top, and it
| | 07:00 |
contains some pictures of our tours.
But I forgot to include the tour name
| | 07:05 |
above each one of these pictures.
Let's see how to fix that.
| | 07:09 |
I'll close the browser, and return back
to Visual Studio.
| | 07:14 |
Then I'll open up this
ShowViewsController, this is the
| | 07:17 |
controller action method I am calling.
On line 28, I am getting an instance of a
| | 07:24 |
view model class which I will use to pass
the data into my view.
| | 07:29 |
You can see down here on line 32, I'm
passing vm into my view.
| | 07:34 |
That's going to pass the information over
to my View and I can use code then to
| | 07:37 |
read this information.
To get the data I'm using the
| | 07:41 |
TourDataSource.GetTours method.
I'll press F12 so you can see this code.
| | 07:47 |
What this code does is return a list of
Tours.
| | 07:49 |
And it has things like TourName,
SeniorDiscountAvailable, and so on, and
| | 07:54 |
some pictures.
This is where I'm getting the picture URL
| | 07:58 |
that I show on the page.
I'll return over to ShowViewsController.
| | 08:02 |
And then I want to take a look at the
view, right-click, choose GoToView.
| | 08:08 |
At the top of the view I'm telling the
raiser view engine that I'm using this class.
| | 08:13 |
The Tour's View model, so I can reference
that by using the word model in my code.
| | 08:18 |
So in line eight, I'm turning on code
with the App symbol.
| | 08:21 |
I'm writing a foreach statement.
I'm getting each individual tour.
| | 08:25 |
And down here I'm creating a div and
getting the image.
| | 08:29 |
And reading the information from the tour
class it's tour image.
| | 08:33 |
What I want to do up here is add an h3
tag.
| | 08:38 |
And then inside that h3 tag I want to
retrieve some information for the tour class.
| | 08:42 |
(SOUND).
This code is using the HTML helper class
| | 08:51 |
to display some elements on the page.
I tell it the name of the property inside
| | 08:55 |
the model and it will display the items
automatically.
| | 08:59 |
(SOUND).
Let's try this out.
| | 09:05 |
I'll press F5, navigate to my controller,
and my action method, and now you see
| | 09:11 |
that my customized HTML includes the tour
name.
| | 09:17 |
Let's summarize what we've seen.
MVC is an alternative to traditional
| | 09:21 |
ASP.NET web form development.
It has access to the same course services
| | 09:25 |
as web forms.
But it takes a more purist HTML and HTTP
| | 09:29 |
view of web development.
| | 09:30 |
| | Collapse this transcript |
| Providing a web front-end for data with Dynamic Data| 00:00 |
Dynamic Data Web Applications have one
simple goal, to provide an easy way to
| | 00:06 |
build webpages that provide standard
operations on database data.
| | 00:10 |
If you have ever created a data-driven
application, you know that a substantial
| | 00:14 |
portion of the work is repetitive.
Say that you have a few tables in the
| | 00:18 |
database, the customers table, the
products table and the shippers table.
| | 00:23 |
First, you write code to access the
database.
| | 00:26 |
Then, you create a form to input new data
into a products table.
| | 00:30 |
Another form to edit existing products.
Next, you create a form to show all the
| | 00:35 |
products and probably one to query the
product info.
| | 00:37 |
Then you repeat those steps for the
shippers table.
| | 00:40 |
And the employees table and all the rest
of the tables inside this database.
| | 00:43 |
Dynamic data apps do all this work for
you.
| | 00:47 |
To create one of these Dynamic Data
Applications, I will use File > New > Project.
| | 00:52 |
I'll choose Visual C# as my language,
then click on the Web Node.
| | 00:58 |
And then, choose this node here.
ASP.NET Dynamic Data Entities Web Application.
| | 01:05 |
The entity part of the this name means
that I'm going to use entity framework to
| | 01:08 |
connect to the database.
I'm going to place this in the correct
| | 01:12 |
folder on my hard drive, and then click
OK.
| | 01:16 |
Visual Studio adds a number of files to
my project.
| | 01:19 |
The one I'm going to spend the most of
the time in at first is this Global.asax.
| | 01:24 |
Before I can do any work though, I need
to add a database using entity framework.
| | 01:28 |
To do that, I'm going to right-click on
the Web Application, and choose Add > New Item.
| | 01:35 |
Next, I'll select the data node, and
choose this first item, ADO.NET Entity
| | 01:41 |
Data Model.
I'll leave the name at the default, and
| | 01:44 |
then click on Add.
Next, it asked me where I'm going to get
| | 01:49 |
the information for the entity framework,
the over (UNKNOWN) layer that it's building.
| | 01:52 |
I'm going to choose to generate it from a
database and then click Next.
| | 01:57 |
Now, in my application, I've added this
data connection in one of the earlier movies.
| | 02:02 |
So it shows I already have
Northwind40.sdf.
| | 02:06 |
If you do not see this, you can create a
new connection by clicking here, choosing
| | 02:09 |
SQL server compact from this list.
Then, choosing the database file by
| | 02:18 |
clicking on the Browse button, going out
to the exercise files folder.
| | 02:23 |
And then, opening the assets folder,
drilling down into the database folder
| | 02:28 |
and then picking this SDF file.
I'll test the connection, and then click OK.
| | 02:36 |
Now, I've got this connection.
I am going to quit this entity item here
| | 02:41 |
called Northwind.
I'm going to remove the 40 and call
| | 02:45 |
NorthwindEntities and click Next.
Visual Studio notices that I'm using a
| | 02:51 |
local SDF file, and it asks if I want to
make a copy of it and add it to my
| | 02:55 |
Dynamic Data site.
I'm going to say yes.
| | 02:59 |
Next, I have to build my object model.
This will be the mapping layer between my
| | 03:03 |
database tables and my programatic
entities.
| | 03:06 |
So, what I'm going to do is open this
table's node and check this first check box.
| | 03:12 |
I want all the tables to be added.
Then, I'm going to change this to say,
| | 03:16 |
NorthwindModel, and then click on Finish.
I'm going to go ahead and click OK on
| | 03:23 |
this message too.
Let's review what happened.
| | 03:27 |
I created an Entity Data Model using
Entity Framework.
| | 03:31 |
During that process, a copy of my
database file was added to my app
| | 03:35 |
underscore data folder.
It was also a change made to my web
| | 03:38 |
config file which you cannot see.
But that's where my connection strings
| | 03:41 |
are stored for connecting to the
database.
| | 03:44 |
The next thing I need to do, is tell the
Dynamic Data Engine how to to find my
| | 03:49 |
model classes.
That code is written in Global.asax.
| | 03:52 |
I'll double-click on this file to open
it.
| | 03:55 |
The Global.asax file has some standard
boiler plate text in here.
| | 04:00 |
The code that I'm looking for is here.
I will uncomment this code by pressing
| | 04:05 |
Ctrl+K, and then Ctrl+U.
And then, you're going to need to modify
| | 04:10 |
this so its says your entities.
I've already changed it.
| | 04:13 |
It says NorthwindEntities that represents
my entity model.
| | 04:17 |
And then, I have a compile error right
now, what I need to do is add a using
| | 04:24 |
statement on top of my page for
System.Data.Entity.Infrastructure.
| | 04:29 |
The way I made this tooltip pop up is I
pressed Ctrl+period on the keyboard.
| | 04:33 |
And now, I'm going to touch this with my
mouse and you'll see that it added a line
| | 04:38 |
at the top of my page up here.
At this point I think I'm ready to go.
| | 04:42 |
Oh, another thing you may need to change,
is you make sure that it says scaffold
| | 04:46 |
all tables equal to True.
What's that's telling the Dynamic Data
| | 04:51 |
site is to look up my classes that are
inside this entity and look at every
| | 04:55 |
single table list defined in there and
create all of the pages on this website
| | 05:00 |
for all of the tables there.
And if you look at my project, you'll see
| | 05:03 |
that I only have one page.
I have a default ASPX.
| | 05:05 |
I do not have a product's table or a
shipper's table or a customer's table, I
| | 05:11 |
just have this default ASPX.
All of the pages you're going to see in a
| | 05:14 |
minute are dynamically generated.
Hence, the name of this project type,
| | 05:18 |
Dynamic Data.
I'll press F5 to run the application.
| | 05:21 |
You might see a dialogue popping up
saying you need to add a modification to
| | 05:27 |
your Web.config file.
If so, just press Yes.
| | 05:30 |
Now, look at this site.
This is my Dynamic Data site, every
| | 05:33 |
single table in my database has a
hyperlink on this page.
| | 05:37 |
When I click on the hyperlink, it takes
me to the page where I can read the
| | 05:41 |
information about my shippers.
And while I'm on this page, I can edit
| | 05:45 |
the details of the shipper.
I'm going to change this name to Speedier
| | 05:50 |
Express, and then Update.
That just made a change back to my database.
| | 05:56 |
I can then click on this back to home
page and do the same thing with my other tables.
| | 06:00 |
Here is my customers.
Here is my products.
| | 06:05 |
Again, I can change these, I can edit
them, I can insert new data, let me show
| | 06:10 |
you how to do that, I'll go back to the
shipper's table.
| | 06:14 |
Insert new item.
Click on Insert.
| | 06:22 |
Now, I have this new item in my table,
and then later I can delete it by
| | 06:26 |
clicking on this hyperlink.
Again, this is all code that was written
| | 06:29 |
by the Dynamic Data Engine.
I'll say OK to this one.
| | 06:33 |
It also understands queries.
Let me show you that.
| | 06:36 |
I go over here and choose my Products
table, and then here you can see these filters.
| | 06:41 |
I can filter by the discontinued
products, by Categories, and by the supplier.
| | 06:51 |
If you're not happy with the way the
pages look, you can change the look of
| | 06:55 |
the pages without changing the
functionality.
| | 06:57 |
That is done through templates.
I don't have time to show you all the
| | 07:00 |
details of this, but the templates live
over here in this Dynamic Data Folder.
| | 07:05 |
There's Content templates, Page
Templates, different kinds of templates
| | 07:10 |
in here.
If you want to change the templates for
| | 07:11 |
the look of the page, you would go to
this page template folder, find the edit
| | 07:16 |
or the insert or the list.
You'd open these files up.
| | 07:19 |
And then, you'd modify the HTML and the
ASPX code that's inside these pages to
| | 07:24 |
change the look.
Let's say you want a different header, or
| | 07:26 |
change the font size, or change some
styles.
| | 07:29 |
You can do that here.
And if you change the edit ASPX page,
| | 07:33 |
every single edit page inside the Dynamic
site picks up the details on this new look.
| | 07:39 |
Now, that was easy.
The basic crud work for the database was
| | 07:43 |
magically handled by the Dynamic Data
site.
| | 07:46 |
This is a flexible system and you can
customize any portion of the generated application.
| | 07:50 |
| | Collapse this transcript |
| Creating a classic Windows application with Windows Forms| 00:00 |
Windows Forms have been extremely popular
in corporate applications, forming the
| | 00:04 |
basis of thousands of useful
applications.
| | 00:06 |
They are easy to develop, and support
drag and drop interface design in the
| | 00:11 |
Visual Studio Editor.
Despite their popularity, WinForm
| | 00:14 |
development is on the wane.
WinForms uses GDI as it's rendering
| | 00:19 |
engine, which some consider inferior for
building modern interfaces.
| | 00:23 |
Because of this, Microsoft created a
replacement technology for Windows forms.
| | 00:27 |
This new UI API is called Windows
Presentation Foundation, and it is
| | 00:32 |
covered in another movie in this chapter.
Even though I'm a die hard WPF fan, I
| | 00:37 |
want to show you some of the features of
WinForms.
| | 00:40 |
It is a powerful tool and is still used
by many development shops as their
| | 00:43 |
leading Windows client development
application.
| | 00:46 |
In Visual Studio, I've opened a project
called Create Windows Forms.
| | 00:49 |
It has a few assets I'm going to use
later in the application.
| | 00:53 |
I would like to show you, that it's very
easy to create a brand new Windows forms app.
| | 00:57 |
Just go to File, New, Project, and then
choose Windows, your Language of choice.
| | 01:05 |
I picked Visual Basic for this example.
Because the templates for Windows forms
| | 01:09 |
in Visual Basic, have some more robust
form types.
| | 01:12 |
But you can choose either language.
And then you click this item here, and
| | 01:16 |
then click on OK.
I've already created the project, so I'll
| | 01:18 |
just click Cancel here.
This is a basic gray form.
| | 01:23 |
I'm going to add some of these special VB
form templates to this project.
| | 01:27 |
I'll add two of them.
I'll do that by Right-clicking and
| | 01:32 |
choosing Add New Item.
Then I'll click on Windows Forms.
| | 01:38 |
Look at this list.
These are all the item template types.
| | 01:41 |
I'm going to choose this one here called
Splash Screen, and also add one for this
| | 01:51 |
Explorer form.
When I run the application it's going to
| | 01:56 |
start with this form 1-VB.
That's not what I want to have happen.
| | 02:00 |
I want this splash screen to start first.
So to configure that option I go to this,
| | 02:04 |
My project section, underneath my
project, and Double-click on it.
| | 02:09 |
Then at the bottom I can change the
Splash Screen.
| | 02:12 |
I will choose this Splash Screen 1.
I'll also get to pick what the Start Up
| | 02:16 |
form is in this location.
I'll choose Explorer 1.
| | 02:19 |
Now I'm ready to run the application.
I'll press F5 to Debug it.
| | 02:23 |
There's my splash screen, and there's my
explorer form.
| | 02:27 |
This is what I meant by the robust
templates.
| | 02:29 |
Microsoft has already built these VB
templates that have tool bars, they have menus.
| | 02:35 |
They have tree views, status bars and
everything else, and as you saw that
| | 02:40 |
splash screen looked pretty nice too.
It wasn't quite wide enough, and I can
| | 02:44 |
fix that by dragging the size of the form
a little bit wider to fit all the text.
| | 02:48 |
Rather than showing you the pre-built
forms for this entire demo, I will modify
| | 02:52 |
this basic form here, and show you how to
add a menu and a few other items...
| | 02:56 |
So let me Double-click on this to open
the Editor, and make this form a little
| | 03:00 |
bit bigger by Dragging the corner.
I'll also go back to My Project and
| | 03:05 |
change my Start Up to Form 1, and I'll
press F5 on the application to see how
| | 03:11 |
that looks.
That's pretty good, except the form 1s
| | 03:16 |
not in the center of the screen.
So let me modify the start up location
| | 03:20 |
for this form by opening up form 1,
selecting the form itself with my mouse,
| | 03:25 |
and then I'm going to go to my Properties
Window and sort them alphabetically.
| | 03:31 |
Click on this Alphabetical Button at at
the top, and look for a property called
| | 03:34 |
Start Position, And I'll choose the
Center Screen.
| | 03:38 |
I can also choose what state this form
shows, Normal, or Maximize or Minimized.
| | 03:45 |
I'll leave it at Normal for the moment.
Then, I'll press F5 to test again.
| | 03:51 |
Better.
It's now in the center of the screen.
| | 03:53 |
My splash screen's still not wide enough,
but I'm going to ignore that for the moment.
| | 03:57 |
I will add several standard items for
this form.
| | 04:00 |
To do that, I'm going to open my Toolbox
and Pin it to the side.
| | 04:05 |
And, then, I'm going to go to the Menus
and Toolbar section, and drag over what's
| | 04:09 |
called the MenuStrip.
MenuStrips go across the top of the form,
| | 04:14 |
and they have Menu items on them.
One nice thing about this Visual Studio
| | 04:18 |
editor, is that I can choose this little
Build Button over here, and I can pick to
| | 04:24 |
Insert standard items.
And what this does, is add all the
| | 04:28 |
standard menus, File, Edit, Tools and
Help.
| | 04:34 |
And what I want to do is modify this
Tools menu, and add a new menu item to
| | 04:38 |
the bottom of this list.
All I need to do is click where it says
| | 04:42 |
Type Here, and type in the name of my
menu, Show Files, and then press Enter.
| | 04:47 |
Done.
I can also add what's called a Tool Strip
| | 04:52 |
that goes below the Menu strip.
And I can add what's called a Status
| | 04:56 |
Strip, and that goes across the bottom of
the screen.
| | 04:59 |
This is really for things like progress
bars, and status update messages on the page.
| | 05:05 |
You can also use these things called Tool
Strip containers.
| | 05:07 |
These allow you to build Drag and Drop
menus, so I can drag and Attach it to the
| | 05:12 |
side of the Windows.
I'm not going to show you how to do that.
| | 05:15 |
The next thing I'm going to add is a List
Box.
| | 05:17 |
To do that, I'll open all Windows forms,
and find List Box on this list.
| | 05:21 |
Here it is, I'll Drag that over.
And I want this List Box to be attached
| | 05:26 |
to the left side of the screen.
So I'll choose what's called the Dock Property.
| | 05:30 |
Make you sure you have your List Box
selected, and then choose this Dock Property.
| | 05:35 |
And I get this visual representation of
how I want to dock the item.
| | 05:38 |
Dock to the top, dock to the bottom, fill
the entire center of the screen.
| | 05:43 |
Left or right, and click on this Left
button.
| | 05:47 |
Make this a little bit wider.
And then on the right side of the screen,
| | 05:50 |
I'm then going to dock what's called the
Properties Grid.
| | 05:53 |
The Properties Grid is a lot like this
property window, it allows me to fill
| | 05:57 |
automatically the grid with information
from an object.
| | 06:01 |
I use this all the time in projects.
Here it is, the Property Grid, so I Drag
| | 06:05 |
that over and Drop it, and then say the
same thing for the dock.
| | 06:09 |
Actually I think what I'll do, I'm
going to choose this Center one, and fill
| | 06:13 |
up the rest of the screen with this
Property Grid.
| | 06:16 |
Now I'll see what this looks like when I
run, press F5.
| | 06:20 |
Nice.
For my next demonstration I'm going to
| | 06:24 |
write some code in the Show Files Menu
item, that's going to populate this list
| | 06:29 |
box with the names of the files that it
finds on my desktop.
| | 06:32 |
I've already added some text files to my
desktop, that I'll load into this list box.
| | 06:36 |
Let me show you how to do that.
I go to my Tools menu, Double-click on
| | 06:41 |
this Show Files menu item, which will
stub in some code.
| | 06:44 |
Unpin this toolbox so I can see more
stuff on the screen.
| | 06:48 |
And then I'm going to go to this Link
Code.text file, that's inside this Assets
| | 06:53 |
folder, and I'm going to Copy this code
into my Clipboard.
| | 07:00 |
Then I'll return back to form 1.
And I'm going to write one line of code here.
| | 07:04 |
I'm going to get the location of my
desktop programmatically.
| | 07:08 |
So I'll say dim Location equal
Environment.
| | 07:12 |
This is a .net class that knows about the
environment, like the desktop.
| | 07:17 |
And I'm going to ask for a GetFolderPath,
and then I'm going to pass in a value here.
| | 07:30 |
I'm looking for the desktop, there it is.
So lets review what I've done so far.
| | 07:36 |
I've asked the OS to find out where the
desktop is on this computer.
| | 07:39 |
Once it finds that path.
Get the folder path of that, and store it
| | 07:43 |
in this variable.
Then I'm going to Paste that code I got
| | 07:46 |
from the Assets Folder.
I'm going to go out to the Directory Class.
| | 07:52 |
And I'm going to ask it to enumerate the
files.
| | 07:54 |
Which simply means, give me a list of
files that I can for each over.
| | 07:58 |
So I can use link to query the
information.
| | 08:00 |
Get all the files in this location, and
store them in this variable.
| | 08:03 |
This is a link query, and I can then use
this query later, to for reach over this information.
| | 08:09 |
So this represents the file, and then I'm
going to say Where the extension of the
| | 08:14 |
file's equal to txt, and then I'm
going to select out the information about
| | 08:19 |
this file.
The file information.
| | 08:21 |
Then, I am going to take my ListBox, call
my query, turn that into a list of
| | 08:26 |
information and add it to the DataSource,
and then I'm going to display the name of
| | 08:29 |
the text file here.
Press F5 to demonstrate.
| | 08:35 |
There's my three files that live on my
desktop.
| | 08:40 |
So the next bit of code, when I click on
one of these items, I want to populate
| | 08:44 |
this Property Grid with the information
from the file info class.
| | 08:47 |
To do that, I'm going to back to my form.
I'm going to go to my List Box, and then
| | 08:54 |
I'm going to the Lightning Bolt on my
Property form, and find the selected
| | 08:59 |
index change, and Double-click on this.
That stubs in this
| | 09:02 |
ListBox1_SelectedIndexChanged event
handler.
| | 09:06 |
Then I'm going to go steal some code from
this SelectedIndexChange.text file, and
| | 09:12 |
Paste it in here.
Now I just did a Ctrl + Tab to switch
| | 09:16 |
back and forth between these files.
What this says is if something is
| | 09:20 |
selected in the list box, then get that
selected item and apply it to the
| | 09:24 |
selected object of the property grid.
The property grid is eagerly waiting for
| | 09:29 |
an object to look at.
So when I pass it to Select and item.
| | 09:32 |
In this case a File Info, the property
grid looks at it and reads all of its
| | 09:36 |
property information and puts it into the
property group.
| | 09:44 |
You see when I click on Tour Names.text.
It shows information about that file.
| | 09:48 |
The name of the file, and it also shows
things like the Creation Time, and the
| | 09:53 |
last Access Time.
This is live data so I can change this.
| | 09:56 |
Creation Time, I'll change this to the
second of the month, and shut down the application.
| | 10:02 |
Press F5 to re-run the application.
And when I click on that file, you'll see
| | 10:11 |
that it has the new time stamp.
I want to return back to Visual Studio,
| | 10:15 |
and then talk about what we've seen.
What I want you to remember from this, is
| | 10:19 |
that Window's forms are still a viable
technology for developing business applications.
| | 10:23 |
And they are common in many corporate
environments.
| | 10:25 |
| | Collapse this transcript |
| Creating a dramatic Windows application with Windows Presentation Foundation (WPF)| 00:00 |
Windows Presentation Foundation, more
commonly called WPF, provides a rich
| | 00:05 |
model for building modern U X.
It contains incredible data buying tools,
| | 00:10 |
a superb animation tool set, and is the
best Microsoft technology for building
| | 00:14 |
desktop applications.
I thought I would start by showing you a
| | 00:17 |
couple of examples before moving into
Visual Studio.
| | 00:20 |
I'm in my exercise file folder and I'll
open this WPF example folder then I'll
| | 00:25 |
double on this scatter plot vis.exe, and
I'll maximize this window.
| | 00:31 |
This is a 3 dimension cube of data that I
can manipulate with my mouse.
| | 00:37 |
There's about 625 cubes inside this
application that are being animated.
| | 00:44 |
Some of the cubes are transparent and
some of them are not.
| | 00:46 |
You can zoom in with your mouse wheel and
see some of the transparent cubes, in
| | 00:52 |
between the yellow cubes.
Another prime example of what you can do
| | 00:57 |
in WPF, is Visual Studio itself.
It is written in WPF.
| | 01:01 |
So look at this UI, every single window,
every single item in this application is
| | 01:06 |
something you can create in your own
application.
| | 01:09 |
Tree views in the solution explorer,
property grids.
| | 01:12 |
The tool box the menus and tool bars and
even the code editor windows.
| | 01:18 |
You can make all of those yourself.
In this demonstration I'm going to write
| | 01:22 |
simple UI in this create WPF application.
I'm going to open this mainwindow.zaml
| | 01:29 |
and show you a few things on creating a
layout.
| | 01:33 |
In this application, I have three buttons
inside a stack panel.
| | 01:37 |
A stack panel's purpose in life is to put
each of its children controls, one after
| | 01:42 |
the other, in a stack.
In this case it is a vertical stack.
| | 01:45 |
I can also change this to a horizontal
stack by changing An orientation property.
| | 01:51 |
Now the buttons are stacked one next to
each other.
| | 01:53 |
Control z to undo.
(SOUND).
| | 01:57 |
Goes back to the original.
I can add another item to this stack panel.
| | 02:02 |
Let's add a grid to the stack panel, and
make it a little bit taller.
| | 02:07 |
And then I can drag items into the grid.
Let's take a check box and drag that in there.
| | 02:14 |
The items inside the grid, they're
located by their margin settings.
| | 02:18 |
You see that has a 36 pixel margin on
this side.
| | 02:21 |
As I drag this item to a new position,
it's changing the margin.
| | 02:25 |
The grid excels at doing multiple columns
and multiple rows.
| | 02:29 |
The way you add columns and rows is by
moving to the edge of the grid and clicking.
| | 02:34 |
Now I have two rows I will move to the
top and split into one column.
| | 02:39 |
Now as I move this check box from one
column to the other, you will see that
| | 02:43 |
its writing out these values here.
Grid.Row equal to 1, Grid.Column equal to
| | 02:49 |
1, I will move it back into the first
column.
| | 02:50 |
Let's see if it that changes it removes
the Grid.Column value and over down here
| | 02:56 |
next, so you can see the difference.
Now it's set to grid row 2 and grid
| | 03:02 |
column 1.
I can't emphasize enough how
| | 03:05 |
sophisticated a UI that you can create
with the WPF.
| | 03:08 |
You saw that cube example you see Visual
Studio, I don't have time to build a very
| | 03:13 |
vanity application, so let me just show
you how to move to these other Windows.
| | 03:17 |
I have the right a little bit of code to
do that.
| | 03:20 |
Here inside this fancy buttons.
I'm going to declare an instance of my
| | 03:23 |
window, and then I'll call win.show.
What I want to show you in this first
| | 03:28 |
example is how to change a button's
appearance.
| | 03:31 |
This is done using something called a
template, and it can dramatically change
| | 03:34 |
the way a UI element looks.
I'll run the application by pressing F five.
| | 03:39 |
I'll click on this fancy button and here
are the 2 fancy buttons.
| | 03:44 |
You're probably thinking to yourself
these aren't looking very fancy.
| | 03:46 |
Just wait.
I'll click on the first one it shows a
| | 03:50 |
message box.
I'll click on the second.
| | 03:52 |
It also shows a message box.
Now let me change this by adding a template.
| | 03:57 |
I'll go over this fancy button.zammel
file.
| | 04:02 |
Turn off this disassembling window, I'm
not sure why that showed up, and then I
| | 04:06 |
want you to see at the top of this
window, is a section called Window
| | 04:12 |
Resources, and inside there's something
called a Control template.
| | 04:15 |
Control Templates allow me to specify a
brand new set of Zamel that can get
| | 04:20 |
applied To the control.
So here, I've created a template called glassButton.
| | 04:26 |
That's the key that identifies it.
And as you can see, there are a number of
| | 04:30 |
lines of xaml in here.
And eventually, we'll get down here to
| | 04:35 |
the bottom.
Down here, I can see the actual buttons.
| | 04:40 |
And then I click on this button.
And open my Property window by pressing F4.
| | 04:46 |
Now I'm going to look for Template over
here.
| | 04:48 |
Oh, I need to stop running my application
first.
| | 04:51 |
I'll click on Stop Debugging.
And I'll look for the word Template.
| | 05:01 |
Now I'm going to click here.
And choose local resource.
| | 05:05 |
This is my class button.
You see what happened to this button.
| | 05:10 |
It's picking up the template and changing
the appearance.
| | 05:13 |
Let me do the same thing for this other
button.
| | 05:20 |
And then I'll run the application.
I can still click on these buttons.
| | 05:26 |
They still function.
They have all the functionality of the
| | 05:30 |
buttons, but they also have this new
template which includes some gradients,
| | 05:35 |
and it has some animation, so when I
hover on my mouse over these buttons, you
| | 05:38 |
can see that the UI changes to look like
there's a yellow light running inside of
| | 05:43 |
the button.
Next I'd like to look at a blog viewer.
| | 05:48 |
This is an application that I wrote
that's loading my blog.
| | 05:52 |
This is completely written in XML.
I'll click on No, there's a script error
| | 05:56 |
in my blog, and this is completely
written without doing any code.
| | 06:01 |
I'm using what's called XML binding.
I've got some (UNKNOWN) ...
| | 06:04 |
That sets up an xml data source.
The data source points to the internet.
| | 06:09 |
I'm pulling the xml data over through an
RSS feed, and populating this list box.
| | 06:15 |
Some of the items on the top of the page.
Items on the bottom of the page.
| | 06:19 |
And then, this is a frame that I'm
filling with the information from my feed.
| | 06:22 |
Let me click on another item here,
changing monitors.
| | 06:25 |
It will load a new page.
Again, I'll click No to the script error.
| | 06:30 |
And you can see a new article.
Let me show you how that was done.
| | 06:35 |
Close this, switch over to this blog
viewer, switch to my code-behind, and
| | 06:43 |
show that there's No code in here.
Let me open the code behind for the blog
| | 06:47 |
viewer not the fancy buttons.
This is the one I wanted you to see.
| | 06:51 |
There's no code in here.
Everything is inside the XML.
| | 06:56 |
Here's my data source, XML data provider.
I mark that as a resource, I gave it a
| | 07:01 |
key, and I pointed it out to my feed.
And then in the rest of the document I
| | 07:08 |
just use these elements and then I use
what's called data binding to retrieve
| | 07:12 |
the information from the fed, pull the
data out of the feed and put it in this
| | 07:16 |
text property on the text block.
Here's the list box, and I'm using an
| | 07:21 |
item source equal binding.
This is how I'm filling this list box.
| | 07:25 |
Data binding is very powerful in WPF.
In my last demonstration, I'll show you
| | 07:29 |
an animation.
Here's the animation window.
| | 07:33 |
This uses a number of custom paths with
some drop shadows on there and lips with
| | 07:38 |
the gradient fills, a picture of a fish.
And then I went into blend and I added
| | 07:44 |
some animations to these paths so they
move up and down.
| | 07:47 |
Also moving the fish up and down.
And the sun will set.
| | 07:50 |
Press F5 to run the application, and
there you go.
| | 07:55 |
Wpf was my first true love, at least when
it comes to XML-based UI.
| | 08:00 |
Over the years I've felt the same
happiness when working with Silverlight
| | 08:03 |
and Windows phone.
Check out the other videos in this
| | 08:06 |
chapter to see how XML has morphed to
work with the Windows store apps.
| | 08:10 |
| | Collapse this transcript |
| Creating a Windows Store application| 00:00 |
In this video I want to talk about
building Windows store applications.
| | 00:04 |
I have a sample of a Windows store
application running in this simulator.
| | 00:08 |
This simulator is included with Visual
Studio 2012.
| | 00:12 |
Now, note that you will not be able to
run this simulator unless you're running
| | 00:16 |
on Windows 8.
I have this game called Reversi, this is
| | 00:20 |
a sample from the Microsoft servers.
I'm going to click on the Start a New
| | 00:24 |
Game button, and I'll see the game
screen.
| | 00:28 |
As I move my mouse over this grid you can
see a highlight show on the squares where
| | 00:32 |
I can click to make my move.
I'll click here, the game makes it's move
| | 00:37 |
and then it's my turn again.
I never do very good at this game, so I'm
| | 00:41 |
not going to play it for very long.
I would like to show you another
| | 00:44 |
database-driven application that's more
of a business-type application.
| | 00:49 |
This is also a sample app that comes from
the Microsoft servers, and it's currently
| | 00:52 |
running on this simulator.
To simulate moving to the new
| | 00:55 |
application, I'm going to use a key
stoke.
| | 00:58 |
Window + Key + Tab, and then release.
This switches me over to a this Manipoll
| | 01:03 |
Hospitals example.
This represents a data bound application,
| | 01:07 |
or I can look at the patient data.
On this screen, and then when I find a
| | 01:12 |
patient I want to work with I can click
on this item and it switches me over to
| | 01:17 |
the detail page where I can read vital
statistics.
| | 01:20 |
See a picture of the patient, and I can
look at a lot of other information about
| | 01:24 |
this patient.
I'm ready to show you how to make these
| | 01:27 |
types of applications.
I'm going to click on this Minimize button.
| | 01:31 |
That doesn't stop the simulator, it just
moves it down to the Taskbar.
| | 01:34 |
If you truly want to stop the simulator
you right click here and choose Close Window.
| | 01:39 |
Now I've switched over to Visual Studio.
As I said, this is an application that I
| | 01:43 |
downloaded from Microsoft.
Let me refresh your memory of how to do that.
| | 01:48 |
Go to File.
New Project.
| | 01:52 |
Then scroll down to the bottom and find
the Online section.
| | 01:55 |
Then go to Samples and look through these
nodes.
| | 01:59 |
You can also use the Search Online
Samples to find, the item.
| | 02:05 |
There it is.
So you click on this and then enter your
| | 02:08 |
project name and click OK.
It downloads the file from the Microsoft
| | 02:12 |
servers and creates your project.
Now this is a XAML based project so I can
| | 02:17 |
edit things like this GamePage.xaml.
For instance if I want to move this to a
| | 02:22 |
new location I can pick it up and drag it
to a new spot and then if I were to rerun
| | 02:26 |
the game again it would be in a new
position.
| | 02:29 |
What I'd rather do is show you how to
build your own Windows store application
| | 02:33 |
from scratch.
To do that, I'll go here and choose Close
| | 02:37 |
Solution, and then I'll choose New
Project, Windows Store, and then I'll
| | 02:47 |
choose just Blank Application.
Then click OK.
| | 02:51 |
Next I am going to double click on this
main page.xaml to switch over to the editor.
| | 02:55 |
Now I've opened the main page.xaml I will
make some changes to the Xaml and the UI
| | 03:01 |
for this page.
I'm going to start by changing my scale
| | 03:04 |
to Fitall.
I'll open the tool box and pin it to the
| | 03:09 |
side of the window.
And then I'm going to hold down the Space
| | 03:13 |
Bar, and drag this to the center of the
screen.
| | 03:16 |
If you look at the xaml, you'll see that,
inside this page, I have a grid.
| | 03:22 |
I'm going to add a new row to the grid by
hovering my mouse over the left edge of
| | 03:26 |
the grid, and clicking.
That'll add a couple of row definitions
| | 03:31 |
to my project.
Let's set this to about 80.
| | 03:35 |
It looks about right.
Then what I'm going to do is I'm going to
| | 03:38 |
put a text block in this location.
Find the text block down here.
| | 03:42 |
Text blocks are read only controls.
You can't change the value on the user interface.
| | 03:47 |
I'm going to drag a text block over here
and drop it in this location.
| | 03:51 |
You see that Visual Studio created a text
block and set its margins and a few other properties.
| | 03:56 |
I'm going to change the margins to be the
same size on all four sides.
| | 04:00 |
I'll make it 12 pixels.
I'll change the size of my font to 46.
| | 04:09 |
And then I'll change the text itself here
to say, the name of our company.
| | 04:14 |
(NOISE) Also, I think I want to change
the vertical alignment, I don't want it
| | 04:22 |
to be vertically aligned to the top.
I want it to be centered.
| | 04:25 |
Although I can't tell if that made any
difference on the UI.
| | 04:28 |
In this bottom half of the screen I'm
going to put what's called a flip view in
| | 04:32 |
there, and I'm going to show a few images
in the flip view.
| | 04:35 |
Now before I add the flip view I should
probably add the pictures.
| | 04:38 |
So to do that I'm going to go to my
Assets folder.
| | 04:42 |
going to right click.
And choose Add Existing Items.
| | 04:47 |
I need to go to my exercise files on my
Desktop.
| | 04:51 |
Go to the Assets folder.
Find the Images folder.
| | 04:56 |
And then I'm going to pick some of these
abstract images.
| | 04:58 |
I only need a few of them.
We'll pick these first four and then
| | 05:01 |
click Add.
There they are.
| | 05:03 |
My next step is to add a flip view.
Here it is, so I'm going to drag this
| | 05:08 |
down and drop it in the second row in my
grid and then I'm going to change some of
| | 05:13 |
the values here.
I want the margins to be I think the same
| | 05:17 |
as the other one.
12 pixels.
| | 05:18 |
And we're going to change the horizontal
and vertical alignment to be stretch.
| | 05:23 |
Next I'm going to add two child elements
to this flip view.
| | 05:34 |
I'm going to add an image.
I could drag from the Toolbox but I'm
| | 05:38 |
going to type some xaml in instead.
There's the first image and I need to
| | 05:46 |
change a few properties on this.
I'm going to set its value to one of
| | 05:50 |
these images.
To do that I'm going to click on the
| | 05:52 |
image and go to my Properties window.
Over here I am going to switch this over
| | 05:57 |
to my source and then I will click on
this drop down and pick my abstract image.
| | 06:05 |
Next I am going to set the stretch
property to this one here.
| | 06:09 |
I'm going to set it to uniform to fill.
That fills up the entire image, but keeps
| | 06:14 |
the proportions the same.
Now I am going to copy this image and
| | 06:18 |
pasting in a few times, three times, and
then I'll change the source to say
| | 06:23 |
Abstract 02 and Abstract 03.
It's ready to test.
| | 06:30 |
Now I have to choose where I'm going to
test this Windows store application.
| | 06:33 |
By default it's going to test it on my
local machine, but I can also test it on
| | 06:37 |
a tablet device by choosing remote
machine or by testing it in the simulator
| | 06:42 |
by choosing this item.
So let's take a look at the top two.
| | 06:45 |
I'll start by choosing a local machine
and pressing F5 to debug the application.
| | 06:48 |
So this is the flip view.
On the right side of the screen is a
| | 06:53 |
button I can click on to move to the next
image.
| | 06:56 |
When I've got to the last image I can
click here to go back to the first image.
| | 07:00 |
So the flip view is nothing more than a
control that manages its children
| | 07:03 |
elements and gives you these left and
right buttons or up and down buttons to
| | 07:06 |
move through the content.
I told you you could also run this inside
| | 07:09 |
the simulator.
So I'm going to close this application by
| | 07:12 |
dragging from the top of my screen down
with my mouse.
| | 07:15 |
Returning back to Visual Studio.
First I'll stop debugging, and then I'll
| | 07:20 |
switch over to simulator, and then I'll
press F5 again.
| | 07:26 |
As you can see it loaded my application
in the simulator.
| | 07:28 |
It behaves the same, but now I've got a
window that looks like my tablet and I've
| | 07:34 |
got all sorts of simulator tools in here.
For instance, I can simulate Pinch and
| | 07:37 |
Zoom mode, Rotation mode.
I can rotate the tablet to see what my
| | 07:42 |
application looks like in landscape
versus portrait mode.
| | 07:47 |
Turn the tablet upside-down.
I can take screenshots.
| | 07:50 |
I can do all sorts of things with the
simulator.
| | 07:52 |
So as you see, Visual Studio gives you
lots of tools for working with the
| | 07:57 |
applications that go in the Windows store
and for deploying them on test simulator devices.
| | 08:02 |
| | Collapse this transcript |
| Building data-centric business apps with LightSwitch| 00:00 |
Visual Studio LightSwitch is a new
product in the visual studio family.
| | 00:04 |
Aimed at developers or business analysts,
who want to quickly create data centric
| | 00:08 |
business applications for the desktop and
the cloud.
| | 00:12 |
I'll create a brand new LightSwitch
project by choosing File, New Project.
| | 00:16 |
And then selecting the LightSwitch node
in the template section.
| | 00:20 |
And then choosing LightSwitch
application.
| | 00:22 |
I have the choice of building a
SilverLight app or an HTML5 application.
| | 00:26 |
I'll choose the SilverLight app and name
this Tour app.
| | 00:33 |
Now I'll click OK.
The basic tasks in LightSwitch are
| | 00:36 |
creating data sources and creating
screens.
| | 00:39 |
To create a data source, I can either
Create a New Table or Attach to an
| | 00:43 |
Existing Database.
I'm going to Create some New Tables.
| | 00:46 |
I'll click here, and then type in the
name of my table.
| | 00:48 |
Tour.
Down here on the bottom half of the
| | 00:52 |
screen, I create the names of the columns
in the data and the data types.
| | 00:56 |
typing The first one's going to be
called your name, I've typed String.
| | 01:02 |
The second is called TourMode, I've typed
String.
| | 01:09 |
And I want to have a choice list for the
user to pick from.
| | 01:12 |
So I'm going to go to the Properties
Window, and click on this link, Choice
| | 01:17 |
List and I can add different choices.
I will have up Walking Tour, a Bus Tour
| | 01:23 |
and a Bike Tour.
Next I'll add a MaxCapacity which is of
| | 01:46 |
type Integer.
Let me see, I have a typo.
| | 01:50 |
(SOUND) A PromoPicture of type Image.
(SOUND) IsKidFriendly, which is of type
| | 02:09 |
Boolean, true or false.
Now I have a HasSeniorDiscount of type Boolean.
| | 02:21 |
I'm done with this table.
Notice the name, I called it Tour here,
| | 02:26 |
but it's called Tours over here in
application data.
| | 02:29 |
You can choose the plural by typing in a
new value here, for the plural name.
| | 02:33 |
Let me create two more tables.
Click on New Table and create a Customers Table.
| | 02:38 |
(SOUND) The first two fields are
self-explanatory, FirstName and LastName.
| | 02:51 |
This next one is going to be an Email.
And I'm going to a feature of LightSwitch
| | 02:55 |
where I can pick these validatable types,
Email Address or I can also choose Wed
| | 03:02 |
Address, or Phone Number.
LightSwitch will automatically create the
| | 03:06 |
validation code for me, if I choose this
type.
| | 03:09 |
One more table.
This is going to be my Booking Table.
| | 03:21 |
And it's going to have relationships to
the other two tables.
| | 03:23 |
To make a relationship, I click on this
Relationship Button.
| | 03:28 |
This first relationship is going to be
from the Booking Table, to the Customer Table.
| | 03:34 |
And the second relationship, Is going to
be from the Booking Table to the Tour Table.
| | 03:40 |
As you can see, LightSwitch adds these
nice graphics to represent their one to
| | 03:45 |
many relationship between the tables.
Now it's time to add some screens to this application.
| | 03:53 |
Right-click here, and choose Add Screen.
There are different kinds of screen
| | 03:57 |
templates available.
You can see them listed here.
| | 04:00 |
I'm going to create several new data
screens, and a couple of list and detail screens.
| | 04:05 |
So I'll start with the new data screens.
I'll make one for my customer.
| | 04:09 |
It's going to be called Create New
Customer.
| | 04:18 |
Do the same thing for my tour.
And notice that I don't have any sort of
| | 04:25 |
Visual Designer per se, like you do in
Windows Forms or WPF.
| | 04:30 |
Instead what I get is this kind of tree
view representation, of how the data is
| | 04:33 |
going to be shown on the screen.
If I want to move this max capacity down
| | 04:37 |
a little bit, I can just pick this up and
drag it to the end of the list.
| | 04:41 |
Let's do the same thing with the promo
picture, I'll put it down at the bottom.
| | 04:44 |
Next I'll add a screen for listing some
data.
| | 04:48 |
This is going to be for listing my Tours,
and one for my Bookings.
| | 05:02 |
Now at this point, I'm ready to run the
application, but I realize I forgot to
| | 05:08 |
create a screen for creating a new
booking.
| | 05:10 |
Let me fix that problem.
Right-click on Screens, choose to Add a
| | 05:14 |
New Screen.
What LightSwitch is going to do for me,
| | 05:21 |
is it's going to create a menu with all
of these screens available.
| | 05:25 |
The problem is, the New Booking screen is
in the wrong position.
| | 05:28 |
It's at the end of this list.
I can fix that by Right-clicking here on
| | 05:32 |
Screens, and choosing Edit Screen
Navigation.
| | 05:35 |
This is the order of the menu, I need to
move this Create New Booking up to the
| | 05:41 |
top of the list.
So I've got a new booking, a new
| | 05:48 |
customer, a new tour and the two details
pages.
| | 05:52 |
That looks good to me.
Close this window.
| | 05:55 |
And I think, at this point I'm ready to
run the application.
| | 05:58 |
I'll press F5 to Debug.
(BLANK_AUDIO) LightSwitch created a
| | 06:03 |
database for me, created all the tables
in the database, wrote all the screens
| | 06:07 |
for me, and created the navigation menu.
Let's look at the Navigation menu.
| | 06:11 |
It's over here in this Task menu, let's
start by creating a New Tour.
| | 06:14 |
Click here.
I'll call this tour Historic Gold Country.
| | 06:18 |
The Tour mode should have a list from my
drop down choice, this is going to be a
| | 06:27 |
Bus Tour.
It is kid friendly, it has a senior
| | 06:30 |
discount, takes 40 people, and then I can
click on this button, LightSwitch wrote a
| | 06:36 |
tool for me to pick the image, and I'm
done.
| | 06:40 |
Now I'll Save the tour.
I'll Create another tour.
| | 06:49 |
This is going to be a Bike Tour.
Only takes 12 people.
| | 06:55 |
And it has a different promo picture,
we'll choose this Abstract02, and then
| | 07:00 |
Save that one.
And then I can go to Tasks, Tour List
| | 07:05 |
Detail, to see this screen where I get to
see all of the Tours over here.
| | 07:09 |
I want to click on them, I read the
details on the right side of the screen.
| | 07:14 |
Now, I need to create a new customer.
When I attempt to Save this customer, I
| | 07:21 |
have violated one of the rules of the
Email.
| | 07:23 |
So you see this dialogue pop up, please
correct data entry errors and try to Save again.
| | 07:29 |
Also at the top of this screen, there's a
message that says; 1 validation issue
| | 07:33 |
exists with the data on this screen.
Click here for more details.
| | 07:36 |
When I click on this link, I get this
message.
| | 07:38 |
Invalid email address.
So, I'll fix my error, and then Save.
| | 07:45 |
Finally, I'm ready to go, create a
booking.
| | 07:48 |
And I should be able to choose from my
list of customers, and from my list of tours.
| | 08:01 |
And now, of course, I can also go and
look at the booking list detail.
| | 08:09 |
Here's my booking, and here's the
information about that booking.
| | 08:12 |
And it's an editable form.
So if I decide to change this to The Hill
| | 08:16 |
Climb, I can do that and then Save.
And rebook Walt to a new Biking Tour.
| | 08:22 |
So what do we take away from this demo?
LightSwitch dramatically simplifies the
| | 08:27 |
development of data centric business
applications, because it takes care of
| | 08:30 |
all the plumbing for you.
It allows you concentrate on the business
| | 08:34 |
logic, and other custom features that
your user need to get their jobs done efficiently.
| | 08:38 |
| | Collapse this transcript |
| Harnessing the power of DirectX graphics| 00:00 |
DirectX is a collection of application
programming interfaces, or APIs, for
| | 00:05 |
handling tasks related to multimedia on
the Microsoft operating systems.
| | 00:09 |
It is especially good at game programming
and media applications.
| | 00:13 |
Many first rate games like Assassin's
Creed, Battle Field and Gears of War are
| | 00:19 |
written for DirectX.
There are several places where you can
| | 00:22 |
use DirectX in an application in Visual
Studio.
| | 00:25 |
Let's go look at the Project templates.
I'll start by looking at the C++ section,
| | 00:31 |
Visual C++ and looking in the Windows
Store.
| | 00:35 |
Here are several DirectX apps.
There's a Direct2D.
| | 00:39 |
And a direct 3D Application.
If you look in the Windows phone
| | 00:43 |
location, you'll also see a Windows Phone
Direct 3D App.
| | 00:48 |
For today's demo, I'll quickly create
this one here called the Direct 3D Application.
| | 00:53 |
And then, click OK.
This is a C++ Application.
| | 00:57 |
So, you can see there's a lot of CPP
files and header files available in here.
| | 01:02 |
Obviously, it's going to take some time
to learn C++ if you don't already know it.
| | 01:06 |
I'm not going to show you any of the
code.
| | 01:08 |
I'm just going to run the application.
What this application is going to do is
| | 01:13 |
create a spinning cube in 3D space.
This is a Windows Store Application using
| | 01:23 |
DirectX to render this cube.
Very smooth, nice frame rates.
| | 01:28 |
Now, I'm going to press Alt+F4 to close
this application.
| | 01:32 |
And then, I'll use Alt+Tab to switch back
to Visual Studio.
| | 01:36 |
For my next demonstration, I'd like to
use something from the sample sites on
| | 01:40 |
Microsoft's website.
I go to Online, go to Samples.
| | 01:52 |
And I'll search for marble.
There are three examples of Marble Maze.
| | 01:56 |
These two are for Windows phone, and this
top one is for a desktop application.
| | 02:00 |
I'll choose this top one, call it
MarbleMaze1, and then click OK.
| | 02:09 |
Then, click Install.
This is also a C++ Application.
| | 02:16 |
And as you can see, it has hundreds of
C++ files.
| | 02:21 |
I want to see what this looks like in
action, so I'm going to press Ctrl+F5.
| | 02:32 |
(MUSIC).
I'll click on the Start Game button.
| | 02:37 |
Then, I'll use my mouse to tilt the 3D
maze.
| | 02:43 |
(SOUND).
Oh, no.
| | 02:45 |
Let's try one more time.
Checkpoint.
| | 03:01 |
I pressed Alt+F4 to close the
application.
| | 03:11 |
I love everything about DirectX, the
ability to create fast immersive and
| | 03:16 |
graphic intense applications makes my
pulse race.
| | 03:19 |
Learning C++ is going to take some
effort, but if you like what you see
| | 03:22 |
here, why not give it a try.
| | 03:24 |
| | Collapse this transcript |
| Writing add-ins for Microsoft Office| 00:00 |
Microsoft office is the worlds dominate
corporate application suite.
| | 00:04 |
A good portion of the business world uses
Microsoft Excel, Outlook, and Word applications.
| | 00:09 |
Over the years Microsoft has incorporated
many extensibility features in office applications.
| | 00:14 |
With the extensibility tools you can
create add in's and code special office
| | 00:18 |
sentric macros.
The Visual Studios team is also part of
| | 00:22 |
this integration tool set.
Back in 2003, they published a special
| | 00:26 |
version of Visual Studio known as Visual
Studio Tools for Office.
| | 00:30 |
In Visual Studio 2012, you no longer need
a special office version of Visual
| | 00:34 |
Studio, because office integration is
built right in.
| | 00:38 |
I've opened a Visual Studio project.
I'm going to show you the code in this
| | 00:42 |
ProcessAnalyzer application in just a
minute.
| | 00:45 |
But first I want to talk about how you
create an office project.
| | 00:47 |
I'll open File, New, Project, and then
navigate to the language of my choice,
| | 00:51 |
Visual Basic or C#, and then choose the
Office node.
| | 00:56 |
For this demo, I'll use Visual Basic and
Office 2010.
| | 01:00 |
Note, you need to have Office installed
on your computer if you want to see this node.
| | 01:04 |
Here you can see the different kinds of
office projects, Excel, InfoPath,
| | 01:10 |
Outlook, PowerPoint, Project and Visio,
and Word.
| | 01:16 |
There are different kinds of projects,
and Add-in is an application that is
| | 01:20 |
installed once, and then loaded each time
Excel runs.
| | 01:23 |
It is not tied to a specific document.
If I want to do a document specific
| | 01:28 |
project, I would choose this one, Excel
2010 Workbook, or this one, Word 2010 Document.
| | 01:35 |
I'm going to create an Add-in, so I click
this one, and then click on the OK button.
| | 01:39 |
I've already created a project though, so
in this case, I will click on Cancel.
| | 01:43 |
The next thing that I want to tell you
about, is I'm going to create a custom
| | 01:47 |
office ribbon.
Or actually I'm going to create a
| | 01:49 |
subsection of the office ribbon, that's
going to contain my controls, and it's
| | 01:53 |
going to implement my code.
To do that, I need to add a ribbon to my project.
| | 01:58 |
As you can see I already have one here,
but let's me show you how to add a ribbon
| | 02:02 |
to your own project.
Right-click, choose Add New item, and
| | 02:08 |
then pick one of these 2 top items,
either the Ribbon (Visual Designer) or
| | 02:13 |
the Ribbon XML.
I am going to pick the Ribbon (Visual
| | 02:16 |
Designer), because I want to use the tool
box to drag in my controls to the ribbon.
| | 02:20 |
I will click on Cancel, and show you this
existing ribbon.
| | 02:25 |
These are the UI elements on my custom
section of the ribbon.
| | 02:29 |
There is a button and several gallery
items and a label.
| | 02:34 |
You can see these in the Tool Box in this
section, Office Ribbon Controls.
| | 02:40 |
Let's say that you want to add a text box
to your Ribbon.
| | 02:43 |
To do that you would go down here and
pick this Edit Box, and then drag it over
| | 02:48 |
to your ribbon, place it where you want,
and then let go of your mouse button.
| | 02:51 |
Now your users can type text in here, and
you can retrieve that in your source code.
| | 02:56 |
I'm going to press Ctrl + Z to Undo the
Edit Box, and show you the different
| | 03:00 |
controls I have.
I have a button which has an image, this
| | 03:05 |
image here, and the word Memory on it.
I have something called a Gallery, which
| | 03:12 |
you can think of as a drop-down, that has
a collection of items.
| | 03:17 |
In this Gallery, I've got the words
three, five and nine.
| | 03:21 |
And I've also got some images affiliated
with those items.
| | 03:24 |
Like this 9 image is affiliated with the
text nine.
| | 03:30 |
I've also got a label here.
I'm going to take the value from this
| | 03:34 |
Count Gallery, and put it in this label
when you choose it from the list.
| | 03:38 |
And then finally, down here in this
Gallery, in the item section.
| | 03:44 |
I've got two items, Bar Chart - Mixed,
and Bar Chart - Green.
| | 03:49 |
Let's see how I'm using those.
Remember, that this ribbon is going to
| | 03:53 |
plug into Excel.
Excel is represented here with this node.
| | 03:56 |
The code here in ThisAddIn.eb is the code
that runs, for instance, when the Add- in
| | 04:02 |
starts up, or when the Add-in shuts down.
The code that I'm going to show you, is
| | 04:06 |
over here in the code behind for this
ribbon, right here.
| | 04:13 |
This code is pretty self explanatory.
When you click an item in the Gallery,
| | 04:18 |
I'm going to take the selected item and
output it to the label.
| | 04:22 |
The more complex code is down here.
Down here I'm going to get the count from
| | 04:28 |
the Gallery.
That first Gallery has the numbers three,
| | 04:31 |
five and nine.
I've also created a tag for each of those items.
| | 04:35 |
And I'm reading that tag value, and
converting it to an integer.
| | 04:39 |
Then I'm reading the items in the second
Gallery.
| | 04:42 |
And I'm reading its information out,
which is an integer, and I'm using that
| | 04:45 |
as the selected chart style.
I don't think I showed you those numbers,
| | 04:48 |
let me do that again.
I'll go back to my Ribbon, go to
| | 04:51 |
Gallery2, go to my items, and then look
at this Tag, it's number 42, and this
| | 04:59 |
one's number 45.
Those are numbers that mean something to
| | 05:02 |
Excel, in their Chart Wizard.
I'll touch F7 to go back to the code behind.
| | 05:08 |
So next, I'm going to instantiate a
worksheet.
| | 05:11 |
I'm going to add a new worksheet to the
Excel document.
| | 05:15 |
And I'm going to output some text.
To a cell A1, I'm going to put the word,
| | 05:20 |
Process Name.
And in cell B1, I'm going to put Memory Used.
| | 05:24 |
Then I'm going to write some link code
here, to query the Processes on my computer.
| | 05:29 |
I'm going to get all the running
processes on my computer, and I'm going
| | 05:32 |
to sort them by the size of memory that
they're using.
| | 05:36 |
It's called the WorkingSet64.
And then I'm going to select out that information.
| | 05:40 |
Then what this code does down here, is
create an array based on that query.
| | 05:44 |
And then this four loop here, walks
through all the processes on my computer,
| | 05:49 |
and prints out the ProcessName, the
WorkingSet, and the number of Threads
| | 05:55 |
that are running inside that process.
Now I'm multiplying that by 1,000 and by
| | 06:01 |
1,000, to make the number of Threads
match the sizes of the processes, so the
| | 06:06 |
chart will be readable.
Then on line 45 I'm declaring a chart.
| | 06:11 |
I'm adding a chart using
ActiveWorkbook.Charts.Add.
| | 06:14 |
And I'm telling it to put it after the
current sheet.
| | 06:18 |
I'm using the selectedChartStyle I got
from up above, to set the chart style,
| | 06:22 |
adding a title, and a couple of labels.
Now let's see what this looks like when I
| | 06:30 |
run it.
I'm going to press F5 to run.
| | 06:31 |
That should launch Excel, create my
custom ribbon, add my custom ribbon to
| | 06:37 |
the add-in section, and there it is.
So now I'm going to choose the number of
| | 06:41 |
items I want to to look at, there's my
images.
| | 06:43 |
I want five items in my chart.
I want the bar chart with the mixed
| | 06:48 |
colors, and then I'll click on this
memory button.
| | 06:51 |
So, what that did, is it created this
worksheet, added my labels at the top,
| | 06:58 |
uses the processes that are running on my
computer.
| | 07:00 |
There's the memory used for each process,
and the number of threads multiplied by
| | 07:05 |
one million, and here's the chart that
was created.
| | 07:07 |
Let me do it one more time.
Add-ins count is going to be nine, the
| | 07:14 |
type of chart's going to be green, and
then generate.
| | 07:17 |
I've used office automation for many
years on lots of different project.
| | 07:21 |
I worked on a project years ago where I
did word automation, I've worked on
| | 07:24 |
projects where I've done PowerPoint
automation, I've done both Outlook and
| | 07:29 |
Excel automation.
I encourage you to explore your own
| | 07:31 |
ideas, and your own favorite Office tool.
| | 07:33 |
| | Collapse this transcript |
| Creating a reusable class library| 00:00 |
It is common nowadays to create separate
dlls that contain shared logic for applications.
| | 00:05 |
That way, you have a centralized assembly
that contains the compiled code.
| | 00:10 |
In dot net, you create a class library to
hold this shared code.
| | 00:14 |
When you compile a class library, it
generates the dll file.
| | 00:17 |
For this example, I'm going to use a
solution called create class line that
| | 00:21 |
has three projects.
This first project is a console
| | 00:25 |
application written in Visual Basic.
This last project is a WPF application
| | 00:30 |
written in C#, and this shared name
generator library is a class library that
| | 00:35 |
is written in C#.
The way you create a class library is by
| | 00:40 |
going to File>New>Project and choosing
Windows and then the Class Library node.
| | 00:48 |
Let's look at the code that I have inside
this name generator library.
| | 00:53 |
This contains three text files.
This first one contains a list of female names.
| | 00:58 |
This one contains a list of male names.
And this one contains a list of surnames.
| | 01:04 |
The interesting code for this demo is in
namegenerator.cs.
| | 01:10 |
In my constructor of my class I use the
file class read all lines method to parse
| | 01:17 |
the lines of text inside this text file.
This creates an array.
| | 01:20 |
I'm doing that for all three text files,
and I'm storing that information in these
| | 01:25 |
three arrays up here.
I'm also creating a random number generator.
| | 01:29 |
I have four methods of interest.
Get female name, get female names, which
| | 01:35 |
is plural, and it returns a list of
strings.
| | 01:38 |
Whereas this one returns a single string.
And then I have the male equivalents,
| | 01:43 |
GetMaleName and GetMaleNames.
Let's see what's happening inside this GetFemaleName.
| | 01:49 |
I generate a random number, an integer
between zero and the length of the female
| | 01:56 |
names array.
I do the same thing for the surnames,
| | 01:59 |
then I take those two random indexes and
I drill into the array, and get out one
| | 02:04 |
of the female names and one of the
surnames, and then I can catenate those
| | 02:08 |
together with a string, with a space.
Get female names does similar things but
| | 02:14 |
with more items being returned.
Here I'm using link to query the array
| | 02:20 |
data, and ordering it in a random order,
that's what this code does here.
| | 02:25 |
I do that for the surnames too.
And then down here I have a for loop that
| | 02:30 |
gets the maximum count.
Let's say that I want 12 female names.
| | 02:34 |
It's going to iterate over the results
for 12 items, and build me up a temporary name.
| | 02:40 |
The first name and last name.
And then add this to this list of strings.
| | 02:45 |
And then I return that.
I'm going to compile my application by
| | 02:49 |
choosing Build Solution.
And then I'm going to show you the
| | 02:53 |
results of that.
I'm going to right click on this name
| | 02:55 |
generator live.
And choose Open Folder in File Explorer.
| | 03:01 |
Then I'll drill down into the bin folder,
which is where my executables live, and
| | 03:05 |
into the debug folder, which is for my
debug release, and there's my dll.
| | 03:10 |
This is the shared dll that I'm going to
use in both my console application and my
| | 03:15 |
WPF application.
To do that, I need to add a reference.
| | 03:19 |
I'll start with my Visual Basic project.
Here it is.
| | 03:22 |
There is a reference node here in the
console application.
| | 03:25 |
Normally in VB, you do not see this
reference node, but you can turn it on by
| | 03:30 |
clicking on this Show All Files button.
I'll click on it once.
| | 03:33 |
See how the reference folder disappears.
Then when I click on it again it shows up again.
| | 03:38 |
Now I'm going to right click on the
Reference folder and choose Add Reference.
| | 03:45 |
There's several ways to add a reference.
One way of adding it is to browse on the
| | 03:48 |
hard drive and find the DLL wherever it
lives and then click on that.
| | 03:53 |
That works, but Visual Studio has another
way of adding it which is convenient.
| | 03:58 |
It is this.
Solution node.
| | 04:00 |
When I click on the Solution node, it
shows the other two projects inside the
| | 04:05 |
solution, and I can select one of those
to automatically add a reference every
| | 04:09 |
time I do a compile.
So I'll choose this NameGeneratorLib, and
| | 04:14 |
then OK.
You see that over here in the reference
| | 04:17 |
list, I now have NameGeneratorLib.
I'm going to do the same thing for my WPF
| | 04:21 |
application down here.
I'll go down here, right click on my
| | 04:25 |
References folder, Add a Reference, and
pick name generator lib.
| | 04:32 |
And, again, you see it shows up on the
reference list.
| | 04:34 |
Now it's time to add some code to my vb
project.
| | 04:37 |
I'll go up to my console application and
open this module one dot vb file.
| | 04:42 |
The first thing I'm going to do is
declare an instance of my name generator class.
| | 04:45 |
(SOUND).
Now, I'll write a for each loop to go
| | 04:54 |
over the name generations.
(SOUND).
| | 05:06 |
And then I'll write out the information
to the console.
| | 05:14 |
Now I'm ready to test the application, so
I'll choose Debug, Start Without Debugging.
| | 05:19 |
Excellent, it worked, I have a list of
twelve female names generated from those
| | 05:24 |
text files.
Now I'm going to press any key to
| | 05:27 |
continue, which will shut down my console
window.
| | 05:30 |
Let's do the same thing now in my WPF
application.
| | 05:33 |
So, I'll close this VB file.
Scroll down here to my WPF application.
| | 05:39 |
And open this mainwindow.xaml.
And I'll start by double clicking on this
| | 05:45 |
Add Names button.
When I click on Add Names, I'm going to
| | 05:48 |
add one or two names to this first box.
And when I click on the Fill List, I'm
| | 05:53 |
going to use the Get Female Names to fill
this entire list.
| | 05:56 |
Double click on Add Names which takes me
over to the code.
| | 06:09 |
Just like I did in my Visual Basic
application, I'm instantiating the name
| | 06:13 |
generator class.
Then here I'll say.
| | 06:23 |
(SOUND) I'm opening up my name list box
and adding something to the items list.
| | 06:27 |
I'm going to call
namegen.GetaSingleFemaleName and then
| | 06:35 |
I'll do the same thing but get a male
name.
| | 06:42 |
Now I'm going to test this by
right-clicking on my WPF application and
| | 06:47 |
making this my startup project.
That tells Visual Studio which one to
| | 06:51 |
start and attach the debugger.
Then I'll press F5 to run the application.
| | 06:54 |
And click on the button, and there are my
two random names.
| | 06:59 |
There's two more.
And there's two more.
| | 07:01 |
So for my final demo, I'll fill this list
with 20 names.
| | 07:07 |
Copy this code, bring it down here to
this button, click code and then I'll
| | 07:13 |
say, this dot data context equal.
Like that.
| | 07:22 |
I'll get 20 male names.
I'm setting that to the data context.
| | 07:28 |
I'm using a feature of WPF which is
called data binding.
| | 07:31 |
If you look at my XAML file you'll see
that this list box says it's getting its
| | 07:36 |
item source from the binding, and the
binding is reading the data context to
| | 07:40 |
get the information.
There's 20 names.
| | 07:46 |
So as you can see, it is very easy to add
references to DLLs and .net projects.
| | 07:51 |
A class library template provides a
trouble-free way of making a custom library.
| | 07:55 |
| | Collapse this transcript |
|
|
5. Code and Text EditorsLanguage editor availability in Visual Studio 2012| 00:00 |
One of the key tasks a developer faces
everyday is writing code.
| | 00:04 |
Actually, it's a lot more than just
writing code.
| | 00:07 |
After writing the code, you need to test
it for correctness.
| | 00:10 |
If it's not working correctly, then you
debug the code.
| | 00:13 |
In later iterations, you might refactor
the code to make it easier to understand.
| | 00:18 |
Writing code can be done in Notepad or
other simple text editors.
| | 00:22 |
But most of us want more than that.
We want an editor that assists us by
| | 00:25 |
including auto-completion tools, syntax
checkers, code snippets, and refactoring tools.
| | 00:32 |
We want tools that highlight our mistakes
and provide visual clues to the state of
| | 00:36 |
our current code base.
Visual Studio provides a rich set of text
| | 00:39 |
editors with all of these features.
Visual Studio includes several general
| | 00:44 |
language editors.
There are editors in Visual Studio for
| | 00:48 |
all of the major Microsoft language.
C# and Visual Basic are two of the most
| | 00:52 |
popular and both have superb editors
available.
| | 00:56 |
C++ is seeing a resurgence for device and
phone development.
| | 01:00 |
Naturally, there is a full-featured
editor for the C++ crowd.
| | 01:04 |
F# is Microsoft's functional programming
language.
| | 01:08 |
It, too, has an editor inside Visual
Studio.
| | 01:10 |
Visual Studio is extensible.
So third parties can create editors and
| | 01:14 |
plug them into the IDE.
Microsoft has taken that route and
| | 01:18 |
created editors for their Iron Python and
Iron Ruby languages.
| | 01:21 |
Third party editors like these are not
part of the default installation, but are
| | 01:26 |
easy to add to Visual Studio.
When using the SQL Data Tools, you'll use
| | 01:30 |
the SQL Editors or the T-SQL ones.
The Web developer has a number of text
| | 01:36 |
editors to enhance the programming grind.
The most popular are listed first,
| | 01:40 |
there's HTML, CSS, and JavaScript.
Microsoft continues to embrace newer web
| | 01:47 |
libraries and extensions.
Visual Studio 2012 adds support for LESS
| | 01:51 |
and CoffeeScript.
When working with markup languages like
| | 01:55 |
XML, you'll use the markup editors.
There's one for XML, one for XAML which
| | 02:00 |
is used in WPF Applications.
One for XOML which stands for eXtensible
| | 02:05 |
Object Markup Language.
And of course, HTML is also a markup language.
| | 02:10 |
Visual Studio uses combined editors and
designers for some of their languages.
| | 02:13 |
In these tools, you can work in the text
editor or the designer to generate your code.
| | 02:18 |
In this example, you are looking at the
ASP.NET designer and the HTML editor.
| | 02:23 |
At the bottom are 3 buttons for changing
the view, the HTML Editor Only View, the
| | 02:29 |
Designer Only View, or the Split View.
Here is a combination editor for the WPF applications.
| | 02:35 |
And finally, this is how a combination
editor looks for the phone app.
| | 02:39 |
The primary difference here is the
vertical split bar and the phone skin
| | 02:44 |
shown on the UI in the Designer.
Naturally, you'll want to configure your
| | 02:48 |
Editors to meet your requirements.
This is a configuration editor tool for
| | 02:52 |
changing all the fonts in every
conceivable window inside Visual Studio.
| | 02:56 |
This next dialog is a configuration tool
to change the language specific options.
| | 03:01 |
The next step is to see how to configure
the editors inside Visual Studio.
| | 03:05 |
| | Collapse this transcript |
| Configuring essential settings for the editors| 00:00 |
As a programmer, you spend a sizable
portion of your workday writing text.
| | 00:05 |
Oh, sure.
We call it code, but think about it for a minute.
| | 00:08 |
Your code is just specialized text, and
you probably write other text documents, too.
| | 00:14 |
For example, HTML and XML files are
common in software projects.
| | 00:19 |
So it won't surprise you to learn that
Visual Studio has lots of text editors.
| | 00:23 |
In this movie I want to show you some
basic settings that you can configure for
| | 00:27 |
any text editor.
For this demo I have this project open
| | 00:31 |
called Configure Editor.
It has four files I'm going to use during
| | 00:35 |
the demo.
Fleet.xdata, program.cs,
| | 00:38 |
samplestylesheet.css, and
sampletextfile.txt.
| | 00:44 |
I'll start by opening these bottom three
files.
| | 00:47 |
By double clicking.
Each text file gets its own tab in the
| | 00:53 |
tab group.
One of the features I use occasionally is
| | 00:56 |
to split my screen into multiple tab
groups.
| | 00:58 |
To do that you Right Click on the tab and
choose New Horizontal or Vertical tab group.
| | 01:03 |
I'll do that again for this style sheet.
Now you see I have three text files all
| | 01:11 |
in their separate horizontal row.
Now that I have these editors open, I'll
| | 01:15 |
show you some settings that are common to
all editors.
| | 01:18 |
We'll start by looking in Tools, Options,
and then moving to this Text Editor section.
| | 01:24 |
This is where you'd make the changes for
all your text editors.
| | 01:27 |
We're going to look at several nodes
here.
| | 01:28 |
We're going to look at the General node
and the All Languages node.
| | 01:33 |
I'll start by looking in the General
node.
| | 01:34 |
We're first going to look at the
Selection Margin, and the Indicator Margin.
| | 01:38 |
And the Highlight Current line.
The selection margin is an extra bit of space.
| | 01:44 |
It's over here between the line numbers
and the code.
| | 01:48 |
The indicator margin is this grey bar
down the left edge of the screen.
| | 01:52 |
And finally, we have highlight current
line.
| | 01:54 |
That's just what it says, it highlights
the current selected line.
| | 01:57 |
I'll unselect these two items, and then
click OK.
| | 02:03 |
See the gray bar is now missing.
And I don't know if you noticed it or
| | 02:05 |
not, but there's a few less pixels here
now between the line numbers and the code.
| | 02:11 |
It's a little bit harder to select the
line that I'm interested in without that
| | 02:15 |
extra space.
I don't know if you can see it, but there
| | 02:18 |
is a light gray border around this line.
That's the line selection.
| | 02:24 |
Let's go back and turn on those options.
And keep an eye over here.
| | 02:29 |
you see it?
Next, let's talk about the all languages sections.
| | 02:37 |
At the top of this dialogue is the
statement completion.
| | 02:40 |
The statement completion settings are on
by default.
| | 02:43 |
I suggest you leave them enabled.
The auto list members provides useful
| | 02:47 |
popup lists of available members,
properties, and methods as you type in
| | 02:51 |
the editor.
Parameter information is another useful
| | 02:54 |
feature, that completes syntax for the
current declaration or procedures
| | 02:57 |
displayed under the insertion point in
the editor with all of its available
| | 03:01 |
parameters shown on the tool tip.
I think you can figure out what line
| | 03:04 |
numbers does.
You can see I've already got it enabled
| | 03:07 |
on all of my items, you can turn it off
if you want.
| | 03:10 |
I like having it on in my code.
I also like having this word wrap setting
| | 03:15 |
turned on.
What does it do?
| | 03:16 |
Let me show you.
I'll scroll down here to this line 19.
| | 03:20 |
Here you see I have a long comment, in
this page.
| | 03:25 |
I also have a long comment in this CSS
file.
| | 03:29 |
Again I need to scroll over to the right
to see it all.
| | 03:33 |
With word wrap enabled by clicking here
to put a check mark in the box, it wraps
| | 03:39 |
the text down to the next line, just what
you'd expect it to do.
| | 03:42 |
It also works with code lines too.
Back to Tools options.
| | 03:48 |
Next we'll look at the Navigation Bar.
Navigation Bar adds extra items to the
| | 03:53 |
top of your code window.
Let me show you.
| | 03:55 |
I'll unselect the Navigation Bar and when
I return back to my C# file, you'll see
| | 04:00 |
that I'm missing those two items at the
top of that list.
| | 04:03 |
Let's turn them back on and see what they
do.
| | 04:05 |
What these do is allow me to look at the
code that's inside this file.
| | 04:13 |
Now it's getting a little bit hard to see
so I'm going to close these two files.
| | 04:16 |
This shows the different classes.
Shows there's an (UNKNOWN) down here and
| | 04:23 |
a program class in here, and I can move
back and forth between them by using this
| | 04:27 |
drop down.
And then this shows the different methods
| | 04:31 |
and members of the types that are inside
here.
| | 04:33 |
Again I can move to main or I can move to
Save File.
| | 04:37 |
Visual Studio is extensible.
You can have many different languages.
| | 04:41 |
If you look in the Tools option list, you
can see I have editors for many different languages.
| | 04:47 |
Let's say that you have a file like this
fleet.xdata, that's not using a normal extension.
| | 04:53 |
I want to have this loaded inside an XML
editor.
| | 04:56 |
What I can do is go to File Extension,
and choose the extension, in this case, xdata.
| | 05:03 |
And then pick my editior of choice.
The xml text editor and then click on Add.
| | 05:08 |
Now I'm guaranteed that when I open an
xdata file inside Visual Studio it will
| | 05:13 |
use the XML editor.
Like that.
| | 05:17 |
One more time back to Tools options.
Up here at the top in the environment is
| | 05:24 |
a section called Fonts and Colors.
It's here where you change all the fonts
| | 05:29 |
and colors for your text editors, your
printer, and all the other sections of
| | 05:34 |
Visual Studio.
I'll talk about these in the next video
| | 05:37 |
in this chapter.
| | 05:38 |
| | Collapse this transcript |
| Customizing fonts and colors for editors| 00:00 |
What developer doesn't want absolute
control over their coding editor?
| | 00:04 |
Perhaps you prefer a dark background, and
neon blue text for your code.
| | 00:09 |
One way to indulge your inner artist is
by configuring the visual studio fonts
| | 00:12 |
and color options to your own custom
palette.
| | 00:14 |
In this video, I'm working with this font
and color project.
| | 00:18 |
The first thing I want to show you is
some basic font sizing.
| | 00:21 |
I'm going to double click on book.cs I've
configured this font to make it readible
| | 00:26 |
for this movie.
I'll show you how to do that in the tools
| | 00:29 |
option in a second.
But anytime you want to size a code window.
| | 00:32 |
You can mearly hold down your control key
and move down your mouse wheel.
| | 00:37 |
When you move it one direction the font
gets smaller and when you move it the
| | 00:41 |
other direction the font gets larger.
Now this is per code window.
| | 00:45 |
If I switch to another code window, like
this program.CS and make the text
| | 00:49 |
smaller, and then switch back to the book
window, you'll see they don't match.
| | 00:54 |
There's a free tool you can add to Visual
Studio to synchronize the mouse wheel, so
| | 00:59 |
that when you scroll it in one window, it
matches all the under windows.
| | 01:02 |
Let me show you that.
It's in Tools > Extensions and Updates.
| | 01:08 |
And we're going to go to the online
gallery, and search for the word, trout.
| | 01:13 |
Yes, that's what I thought too.
Why was it called trout zoom?
| | 01:17 |
But that's the name.
I will install this extension.
| | 01:22 |
I'll restart Visual Studio.
>> And now when I zoom this window
| | 01:27 |
smaller and switch to this program file
you see that they match.
| | 01:31 |
Next I'm going to talk about how you can
change the font face.
| | 01:36 |
To do that you go to tools.
Options.
| | 01:39 |
Open the Environment node.
And then select Fonts and Colors.
| | 01:43 |
I'm currently working with the Text
Editor settings.
| | 01:46 |
As you can see, there are a number of
different areas we can configure in
| | 01:49 |
Visual Studio.
We'll start with the Text Editor.
| | 01:52 |
And the default font is Consolas.
This is a nice font.
| | 01:55 |
But if you want to switch to a different
mono space font, you can.
| | 01:59 |
This lists all of the installed fonts on
my computer.
| | 02:02 |
Since developers tend to prefer
monospaced fonts, Microsoft highlights
| | 02:06 |
all the monospaced fonts in bold in this
list.
| | 02:10 |
I happen to like Consolas, so I'm
going to leave it at the default.
| | 02:14 |
Next, I want to show you what you can
change as far as the font colors.
| | 02:17 |
These are the different items that are
displayed in my code window.
| | 02:21 |
By clicking on one of the items in the
Display Item list I can see what it looks
| | 02:24 |
like, in the Editor without having to go
back to the Editor.
| | 02:28 |
This is what the text looks like when I
select it with my mouse.
| | 02:30 |
I'll change this to an olive color and
see what happens when I go back to Visual Studio.
| | 02:38 |
I get an olive color background.
Nice.
| | 02:41 |
I'm going to show you changing the color
of your comments.
| | 02:48 |
I'm going to scroll down to the C
section, and look for comment.
| | 02:52 |
There it is.
It says that the default value for a
| | 02:56 |
Comment is a dark green color.
What I like to do is change the item background.
| | 03:01 |
I'll click on this dropdown and look
through my color choices.
| | 03:05 |
I'm not seeing any colors that appeal to
me in this list so what I will do is
| | 03:08 |
click on the custom button and here I can
work with the entire color palet.
| | 03:14 |
I'm thinking I want a light yellow color.
So I'll click here in this yellow band,
| | 03:19 |
and then I'll slide my mouse up and down
in this area 'till I get the light color
| | 03:23 |
I'm interested in and then I'll click
Okay.
| | 03:25 |
And then I'll click on Okay a second
time.
| | 03:29 |
And as you can see my comments now are in
the light yellow color with the green text.
| | 03:34 |
Next I want to talk about brace matching.
Do you see this curly brace?
| | 03:37 |
When I move my mouse to a curly brace it
accentuates that brace and the matching
| | 03:42 |
brace with a light gray background.
I don't know about you but it's a little
| | 03:46 |
too light for my taste.
So what I'd like to do is make this a
| | 03:48 |
little more obvious.
I'll go back to Tools.
| | 03:52 |
Options, find my brace matching.
I just don't want the grey background,
| | 03:59 |
and I'm thinking that I want an orange
color.
| | 04:08 |
I think that's much better.
I can obviously see my matching braces in
| | 04:11 |
a much clearer fashion.
Let me switch over to this book dot cs file.
| | 04:17 |
Another technique I like to use is
differentiating the difference between a
| | 04:21 |
class or a reference type.
And a struct or a value type.
| | 04:28 |
Let me show you how you can differentiate
those in your code.
| | 04:30 |
Go to tools, options.
Back to the same place as before, the
| | 04:35 |
text editor.
We go down to the bottom of the list and
| | 04:39 |
find something called the user types.
Again, I'm going to set the background.
| | 04:48 |
This time I'm going to use a light blue
color, and a white font.
| | 04:56 |
And for the value types I'll use a
pinkish color.
| | 05:05 |
And you see the difference.
My strokes are not highlighted in a pink color.
| | 05:11 |
Any my class is highlighted in blue
color.
| | 05:14 |
And this also applies to where you use
them.
| | 05:17 |
You can see why I'm substantiating the
book and substantiating the file information.
| | 05:21 |
They're in the matching colors.
There are tons of other settings in this options.
| | 05:25 |
More than I can show you in this video.
I'd like to change my highlight line, the
| | 05:31 |
selected line.
Look for highlight.
| | 05:33 |
I also like to change the font sometimes
when i'm teachign I like to make the
| | 05:37 |
intelli sense window bigger.
To do that you can go this section and
| | 05:40 |
look statement completion.
And I'm going to bump this font size up
| | 05:44 |
to 16.
And I"ll also do the same thing with the
| | 05:48 |
editor tool tip.
I'll pump that up to 16 too.
| | 05:52 |
And then I'll click okay.
And now, you'll see, when I saw var.
| | 05:56 |
Notice that this window, now, is much
larger.
| | 05:59 |
The font size is much larger in here.
Same things with I hover my mouse over an item.
| | 06:03 |
And the tool tip that pops up.
That is now in a larger font.
| | 06:07 |
Now, of course, you're going to make a
mistake occasionally.
| | 06:11 |
So there's a way to reset the settings.
I'll go back to using the defaults, for
| | 06:15 |
the editor tool tip, for the statement
completion, and I'll also reset it for my
| | 06:21 |
text editor.
There's a growing movement in developer
| | 06:25 |
editors that use a dark background in the
editor.
| | 06:28 |
If you've installed the changed color
theme extension, then you can easily
| | 06:34 |
change to a dark background.
Here on this change color theme, I'm
| | 06:38 |
going to pick light with dark editor, and
now I got a dark background and neon
| | 06:44 |
colored text.
I'll switch that back before I close this movie.
| | 06:50 |
Switch back to the blue theme.
See the first chapter for details how to
| | 06:54 |
install this extension, the Theme Editor.
You can spend an hour exploring all the
| | 06:58 |
font settings in this dialogue.
Before long you'll have your own
| | 07:01 |
customized code editor that will be the
envy of your peers.
| | 07:04 |
| | Collapse this transcript |
| The C# and Visual Basic editors| 00:00 |
C# is a very popular programming language
for writing dot net applications.
| | 00:04 |
Many people consider it the primary
language for dot net and rarely consider
| | 00:08 |
using the other inbox languages.
For most of the examples in this course I
| | 00:12 |
will be using C#, so this is a good time
to explore the basics of the C# language
| | 00:15 |
and its code editor.
I have a solution with two projects.
| | 00:20 |
A C# Console project and a VB Console
project.
| | 00:23 |
This is the default console.
Most console applications have a program.cs.
| | 00:27 |
Or in VB down here you can see it's
called module1.vb.
| | 00:30 |
And inside the program.cs you'll find a
main method.
| | 00:36 |
Now all .Net methods have to have a main
method but usually you don't see them.
| | 00:40 |
It's more obvious in a console
application.
| | 00:42 |
This is where the application starts.
This is where you set up your code.
| | 00:46 |
This is where you call all your other
methods.
| | 00:47 |
It's a static method, and by default, it
has an array of strings.
| | 00:51 |
This is how you get information passed in
from the command line.
| | 00:54 |
And it's not necessary to have these
here, I can delete this out of this
| | 00:57 |
method and still compile the application.
I just did a Ctrl+Shift+B to compile, and
| | 01:01 |
you see that it works just fine.
What I want to do is write some code to
| | 01:04 |
open a text file and output some text to
the console.
| | 01:08 |
To do that I need a file.
I'm going to embed one in my application.
| | 01:12 |
You can right click on your project, then
add an existing item.
| | 01:15 |
Since I already have a copy of the file
in my VBproject, I'm just going to copy it.
| | 01:19 |
And then paste it into my C# console
application.
| | 01:23 |
Now I want to make this part of my
project so I mark it build action as content.
| | 01:29 |
That means it gets copied to my output
directory, and I mark it to copy if it's
| | 01:33 |
a newer version of the file.
Next thing I want to do is show you how
| | 01:36 |
to add a class.
Right click.
| | 01:39 |
Choose Add Class.
The name of this class is going to be
| | 01:45 |
file lister.
And I click on Add.
| | 01:48 |
Classes are containers for code and for
data.
| | 01:52 |
This one's mostly going to be code in
this example.
| | 01:55 |
What I want to do is create three methods
that are going to get called from this class.
| | 01:59 |
I'm going to make them static methods.
So you start by saying public static void.
| | 02:05 |
This is the return type of this function,
or this method, as they're known in .net.
| | 02:09 |
Public static void, and then the name of
my method.
| | 02:14 |
Methods in C# always end with a set of
open and close parentheses and then you
| | 02:21 |
have a set of curly braces for the code
to live inside.
| | 02:24 |
I'm going to copy this two more times and
then I'm going to name this one.
| | 02:29 |
Add name and this one's going to take a
parameter of type string called new name
| | 02:39 |
and this methods going to be called Print
Formatted Names.
| | 02:46 |
Okay I'm ready to go.
I'll go up to this PrintNames, and I'll
| | 02:48 |
start writing my code here.
The first thing I want to talk about in
| | 02:51 |
C# is you do comments by doing two
slashes.
| | 02:56 |
Next, when you want to create a variable
you can either use the type of the
| | 03:00 |
variable, let's say string, like that.
And then you can assign a value to the
| | 03:06 |
variable, by saying file Text=, then here
I'm going to make a method callout to the
| | 03:12 |
.net framework to get the contents of
that file.
| | 03:14 |
I'm going to work with the file class.
Now as you can see the file class is not
| | 03:18 |
showing up in my list.
That's because the true name of this
| | 03:21 |
class is longer.
It's system.io.file.
| | 03:27 |
Now I'm going to call the read all text
method.
| | 03:30 |
Pass it in file name.
(NOISE) And then end the line of code
| | 03:38 |
with a semicolon.
That's one line of code.
| | 03:42 |
If I want to split this across multiple
lines, C# still sees this as a single
| | 03:46 |
line of code even though it's on two
physical lines inside the code editor.
| | 03:50 |
Another way of declaring a variable is
using the var keyword.
| | 03:54 |
And what this does is tell the compiler
to figure out the type.
| | 03:59 |
And I don't want to keep typing this
system.io every time I use the file class.
| | 04:03 |
That's why we have these using statements
at the top of our document.
| | 04:07 |
I can take this bit of code, remove it
from here, add a using statement at the top.
| | 04:12 |
Like that and now I no longer have to
type system.io every time I want to use
| | 04:18 |
the file class or any other class that
lives inside this name space.
| | 04:21 |
So now here I'm going to say (SOUND).
What's the difference between these two methods?
| | 04:32 |
This method reads the file and returns it
as one single string.
| | 04:41 |
This method reads the file and returns it
as an array of strings.
| | 04:44 |
So now that I have an array I can say
console.right line.
| | 04:55 |
I'm asking for the third item out of this
array and them I'm going to print it to
| | 05:01 |
the console.
Now, I can't call it yet unless I call
| | 05:03 |
this method from my Program.CS, so I'll
go over here and say File
| | 05:09 |
Lister.PrintName, and I'm ready to run.
C# is my starting project.
| | 05:18 |
You can tell because it's in bold.
Now I'm going to go up and say
| | 05:21 |
Debug>Start without debugging.
And there is my Jones, last name.
| | 05:27 |
To speed things up, I've got some of the
code already written.
| | 05:30 |
I'll open up this file.
And I'll take these two lines of code
| | 05:33 |
here for adding a name.
Copy those.
| | 05:37 |
Then return to my file lister, and paste
them into the add name.
| | 05:43 |
And then for the printed format name I'll
do the same thing.
| | 05:46 |
Copy these.
Return over to my C# file and paste those in.
| | 05:54 |
So what this one does is take a new
string name in, it appends the text to
| | 05:59 |
the text file.
It adds a line feed character return to
| | 06:03 |
the file.
And then it writes out the new name.
| | 06:05 |
And then this one will loop through all
the items in the file.
| | 06:09 |
And output them to the console.
And format them based on the index number
| | 06:13 |
in the file lines.
Now, to use these, I'm going to copy this
| | 06:18 |
code too.
So I don't have to type it in.
| | 06:20 |
Go over to program.cs, (SOUND) and then
again I'll run the application.
| | 06:27 |
Debug.
Start without debugging.
| | 06:29 |
Scroll up to the top of this list.
There is Jones, and then there's my list
| | 06:34 |
of files, and since I added my last name
to the list, it should show up here at
| | 06:38 |
the bottom.
Here it is.
| | 06:40 |
So, what I want you to take away from
this is, some of the features of the
| | 06:43 |
Visual Studio editor, and some of the
features of C#.
| | 06:47 |
Now, I mentioned VB in this title.
VB and C# are very similar.
| | 06:50 |
I already have a VB console application
written here.
| | 06:52 |
Let's see what's different.
Instead of being called program.cs, it's
| | 06:56 |
called module1.vb.
But it has a main method with no parameters.
| | 07:01 |
I created a class over here called File
Lister.
| | 07:03 |
The code's a little bit different.
It's Public Class.
| | 07:07 |
I used capital letters or pascal casing
they call it.
| | 07:09 |
For a Public and Class you use the
imports keyword instead of the using statement.
| | 07:15 |
But it's the same idea.
You don't end the line of code in VB with
| | 07:18 |
a semi colon.
You end it by hitting the Enter key on
| | 07:21 |
the keyboard.
And it's smart enough in the newest
| | 07:24 |
version of Visual Basic to know.
When you split a line across two lines,
| | 07:28 |
that that's considered to be two lines.
For those of you that have done Visual
| | 07:31 |
Basic in the past, this is a relatively
new feature.
| | 07:34 |
Comments are done with an apostrophe
instead of two slashes, and instead of
| | 07:38 |
using the static keyword, we use the
shared keyword.
| | 07:42 |
And if you're not returning anything from
a function, it's called a sub not a function.
| | 07:45 |
But other than that, the code's the same,
right.
| | 07:47 |
You look here, it's Append Text.
The for each loop is slightly different,
| | 07:52 |
but the way I called Console.ri, line and
the way I called Format, they're very similar.
| | 07:58 |
So, it's very easy for you to transition
as a developer between Visual Basic and
| | 08:02 |
C# and back.
So in conclusion I'd like to say that
| | 08:06 |
both the VB and C# editors are very full
featured and enhance your daily coding chores.
| | 08:11 |
I'll show you more of the tools available
in these editors throughout the course.
| | 08:14 |
| | Collapse this transcript |
| Using the JavaScript editor| 00:00 |
JavaScript is the universal client side
scripting language employed on web projects.
| | 00:05 |
I'll wager that you have written
JavaScript at some point in your
| | 00:09 |
programming life.
If not, you will.
| | 00:11 |
Visual Studio 2012 updates the JavaScript
editor features to match the other
| | 00:16 |
mainstream editors like Visual Basic and
C#.
| | 00:18 |
To create the project I'm going to
demonstrate I used the new project
| | 00:22 |
dialog, selected WEB and then this ASP to
Net Web Forms Application.
| | 00:27 |
Here is the project that was created, Web
Application One.
| | 00:32 |
I'll open the Scripts folder.
If you don't think JavaScript is
| | 00:37 |
important just look at this folder and
the default ASP to net Web forms project.
| | 00:41 |
It's full of script files including the
popular Jquery library.
| | 00:46 |
Microsoft includes this references.js
file.
| | 00:49 |
For IntelliSense purposes.
Any js file that's referenced here on the
| | 00:54 |
bottom of this file with the syntax will
add IntelliSense to all the other
| | 00:59 |
JavaScript files in this folder.
I have added one of my files here, finance.js.
| | 01:02 |
I would like to write a function in
finance.js to show you some of the IntelliSense.
| | 01:07 |
(SOUND) This is the basic syntax for a
function.
| | 01:12 |
You have IntelliSense in here.
We also have code snippets.
| | 01:20 |
I type in the word if and press the Tab
key twice.
| | 01:26 |
Visual studio will step in the if code
snippet.
| | 01:29 |
There's also the for snippet, for tab
tab.
| | 01:35 |
There's also brace matching.
If I select this bottom brace, you'll see
| | 01:38 |
that it's matched in the top.
There's also code outlining.
| | 01:42 |
You see the minus sign up here.
I can click on this to collapse this
| | 01:45 |
function, or this function down here.
Then I can hover over these three dots to
| | 01:49 |
see the contents of that function.
You get IntelliSense for variables, I'll
| | 01:57 |
declare var x equal 5.
On line six I'll type x dot.
| | 02:03 |
I get IntelliSense for the numeric data
type.
| | 02:06 |
If I change this to a string and come
back to line six and type the dot operator.
| | 02:14 |
Now I'm getting IntelliSense for a string
type.
| | 02:19 |
When you create a function, you can add
your own IntelliSense hints.
| | 02:22 |
That's what I've done down here on this
function on line 19.
| | 02:26 |
I have declared these xml comments inside
the function, and I specified that
| | 02:31 |
curnumber, this parameter, is the number
to convert.
| | 02:34 |
So, when I call this in my JavaScript
code, I'll see that IntelliSense.
| | 02:40 |
Let's go write some code.
I'm going to go over to an aspx page.
| | 02:44 |
This one here called Loanpayments.aspx.
I have a button on this page that has an
| | 02:51 |
on-click handler that calls a method
called update number and passes in this
| | 02:55 |
number and my function over in the
finance.js file.
| | 03:00 |
We'll turn that into some words.
You'll see some more IntelliSense here.
| | 03:08 |
I'm going to use the DOM, so I'll call
the document.getElementById.
| | 03:11 |
I'm looking for this element, output.
There's the IntelliSense for this method.
| | 03:24 |
Once I have the div element then I'll
manipulate it by making a call to my
| | 03:35 |
custom function.
Again you see I get IntelliSense.
| | 03:43 |
Now I'm going to try to call my function.
The name of my function is Convert Number
| | 03:48 |
To Words.
I need to wrap this inside a function.
| | 03:54 |
(SOUND).
(SOUND) I think that's good to go.
| | 04:08 |
And then I'll just pass in this parameter
here to my convert numbers to words.
| | 04:14 |
Let's review what I've written.
I created a function called update number
| | 04:18 |
which matches the name down here and
passing in a single value which is this
| | 04:22 |
value here.
I'm getting an element on the page which
| | 04:25 |
is this div tag here.
I'm changing the enter html for that div
| | 04:29 |
tag by calling my custom function and
passing in the string.
| | 04:33 |
Let's see if this works.
Press F5, click on the Run Script button,
| | 04:41 |
and my number was turned into the correct
words.
| | 04:44 |
For my last demonstration, I'll show you
how to use J query to modify some of the
| | 04:49 |
UI on a page.
This is the page I'm going to work with.
| | 04:53 |
UsejQuery.aspx.
Let's look at the HTML that's on this page.
| | 04:58 |
I have two anchor tags at the top.
Both anchor tags have an ID, x1 and x2.
| | 05:05 |
Neither anchor tag is pointing to a URL.
Below my anchor tags, I have several
| | 05:10 |
divs, and I have several paragraphs.
You could see that this paragraph here
| | 05:16 |
has a class definition defined live demo
and so does this div.
| | 05:20 |
I'm going to use this class to find this
paragraph tag and this div tag using
| | 05:25 |
jquery and modify their content.
To do that I need to go down here and
| | 05:28 |
write some script.
If you haven't worked with jquery it's a
| | 05:32 |
big topic.
Let me just say that you use a dollar
| | 05:35 |
sign as an alias for the J query library.
And what the code I've already written
| | 05:39 |
does, is, check to make sure the document
is downloaded and ready.
| | 05:42 |
And then it wires up an event handler for
this anchor tag.
| | 05:48 |
This is a selector.
What this is doing is selecting one of
| | 05:51 |
the items on the dom.
The one with the ID x1, and then it's
| | 05:55 |
wiring up an event handler for the click
event, and it will run this in line function.
| | 05:59 |
So what I'll do down here is use that
same dollar sign to activate J query.
| | 06:05 |
The IntelliSense is showing me I need to
specify an element.
| | 06:09 |
I'll do that in a set of double quotes
and then after this I will specify the
| | 06:14 |
HTML has a new value.
Like that.
| | 06:23 |
Now the next thing I need to specify is
which elements on the page I want to select.
| | 06:28 |
Here, I selected an item by its ID.
What I need to do is select these by
| | 06:32 |
their class identifier.
To do that, you type in a period, and
| | 06:37 |
then the name of the class, live demo.
If you've ever worked with CSS this
| | 06:42 |
syntax should look familiar to you.
I'll press F5 to run the application and
| | 06:47 |
see if this works.
I selected out those two elements and
| | 06:54 |
modified their content.
The next thing I want to do is change the
| | 06:57 |
color of some of these elements.
I'll return back to Visual Studio.
| | 07:01 |
I'll copy this code.
(SOUND) Change this to select the other
| | 07:10 |
anchor tag.
Now, I'll change line 44 to select some
| | 07:14 |
different elements.
I want to select all the div tags and the
| | 07:18 |
p tags.
Now, I'll change the CSS.
| | 07:31 |
And I think I'm ready to run.
Press F5.
| | 07:36 |
Click on the link and it found all the
divs, including some I didn't expect down here.
| | 07:41 |
There's either a paragraph tag or a div
tag here at the bottom of this page.
| | 07:46 |
So let's review what we've seen.
The JavaScript editors have seen a lot of
| | 07:49 |
improvement in this version of Visual
Studio.
| | 07:51 |
If you are a web developer, or plan to be
one, you should really spend sometime
| | 07:55 |
with the new editor tools.
| | 07:57 |
| | Collapse this transcript |
| Editing XML, HTML, and more with markup editors| 00:00 |
Markup languages like HTML and XML are a
way of mixing text and symbols within a
| | 00:06 |
single text file, so that a computer can
distinguish and manipulate sections of
| | 00:10 |
the document.
In this demonstration, I'm opening a
| | 00:14 |
EditingWithMarkUpEditors, which has a
single Wpf project within it.
| | 00:19 |
I'm going to start by adding the classic
markup file, which is called an XML file.
| | 00:24 |
Right click, choose Add > New Item.
If you scroll down to the bottom of this
| | 00:30 |
list, they're in an alphabetical order,
you'll see XML File.
| | 00:36 |
I collect Tour, Visual Studio puts the
file in my project and starts by adding
| | 00:42 |
one line of markup.
This header, which says this is an XML
| | 00:46 |
file and which version of XML I'm using
and the encoding for this file.
| | 00:49 |
(SOUND) If you want to put a comment in
an XML file, comments look like this.
| | 00:58 |
Comment start with the angle bracket and
then the exclamation point or bang
| | 01:05 |
operator and then two hyphens.
And then it ends with two hyphens in the
| | 01:08 |
angle bracket.
The way I added that comment by
| | 01:11 |
highlighting the code, was I used a
keystroke.
| | 01:13 |
I used Ctrl+K and Ctrl+C.
To comment this out, you start by putting
| | 01:19 |
in tags.
I want to have a Tours root element, so
| | 01:22 |
you see that Visual Studios markup
editor, when I hit the close angle
| | 01:26 |
bracket, it stubbed in the end tag.
And it keeps doing that.
| | 01:38 |
Of course you probably know this, if you
want to have a single line, you can erase
| | 01:42 |
this last tag and put a forward slash
here at the end.
| | 01:47 |
That's considered to be valid.
Now I can compile this.
| | 01:49 |
If it's not valid, let's say I leave this
out, Visual Studios markup editors will
| | 01:54 |
warn me that I'm doing something wrong by
putting a red squiggle under that.
| | 01:58 |
And if I hover over that, it will tell me
the tag was not closed.
| | 02:01 |
Let me show you another problem.
Let me change this by removing one r.
| | 02:06 |
Now, I'm going to get some errors that
say things like, expected n tag Tour.
| | 02:12 |
My point is that the editor has some
basic functionality built in.
| | 02:16 |
There of course are other kinds of
markups.
| | 02:18 |
There's also HTML.
You see I have a file here called AboutUs.html.
| | 02:23 |
Now if I open that up, you'll see that it
has some HTML tags in there.
| | 02:28 |
And it's got a DOCTYPE at the top that
tells it what kind of HTML we're using,
| | 02:32 |
what type of specification.
And if you look at the top Microsoft has
| | 02:35 |
added this DOCTYPE: XHTML5.
This is what's going to validate the tags
| | 02:41 |
as I type them in here.
Now I get a little better intelli-sense
| | 02:45 |
than I got over in the XML file.
Now you can see the snippets available.
| | 02:49 |
So if I type in this anchor tag snippet
and hit the Tab key two times, it stubs
| | 02:55 |
in the rest of the tag, href equal and
then the pound symbol, and then put some
| | 03:00 |
content in there.
So these are code snippets.
| | 03:03 |
It knows all of the eligible tags that
make sense and make HTML5 document.
| | 03:08 |
Let's try another one.
I'm going to do form and then I'm
| | 03:11 |
going to press Tab two times.
And as you see, it put in an action
| | 03:15 |
equal, and a method equal, and a form.
Notice that I get, IntelliSense when I
| | 03:20 |
work with things like attributes.
When I type the equals sign,, Visual
| | 03:25 |
Studio puts in the beginning and ending
quote.
| | 03:28 |
These are settings that you can control
in Tools options.
| | 03:31 |
Here's another markup.
This one's called MainWindow.xaml.
| | 03:35 |
This is using a special dialect of XML.
Now, in the bottom half of this screen,
| | 03:41 |
you can see the XML.
There's a root element that says Window.
| | 03:45 |
And then there's a number of definitions
here including namespaces XML namespace definition.
| | 03:50 |
What this tells the editor is to look
inside this namespace to find the allowed
| | 03:56 |
elements, so when I type in something
here like, let me say I want to put a
| | 04:00 |
TextBox in here.
When I type this in, that's verifying
| | 04:05 |
that the tag is valid.
And they can also then look up the valid
| | 04:10 |
pieces of the TextBox.
So when I type in this space bar here I
| | 04:13 |
can get a list of all of the eligible
attributes that I can use on this element.
| | 04:20 |
Again, you'll see Visual Studio.
When I typed in the word Text and the
| | 04:23 |
equal sign, it stubbed in the beginning
and ending single quotes this time.
| | 04:27 |
This is another setting that you can
change inside Tools options.
| | 04:35 |
And here, I'm going to show you one last
feature.
| | 04:37 |
This is an event attribute.
I'm wiring up an event handler for this.
| | 04:41 |
So you see the Visual Studio prompt said,
would you like to create a New Event Handler?
| | 04:46 |
If I hit the Tab key now, it will write
some code for me.
| | 04:50 |
And if I press the F7 key, you'll see
that it also wrote some code in my
| | 04:55 |
Codebehind file.
Ctrl+Tab to switch back to the XAML editor.
| | 05:00 |
So what do I want you to take away from
the XAML editor?
| | 05:04 |
It's similar to the other two editors,
but it's even got more Intelli-Sense
| | 05:07 |
because it knows about the Schema.
So lets go back and fix this XML file
| | 05:11 |
that I created earlier.
This one here, this Tour.xml.
| | 05:14 |
It'd be nice if I had a Schema that would
tell me whether Tours was allowed, where
| | 05:18 |
Ddescription was allow, and what
attributes are allowed in the Tour element.
| | 05:24 |
I already have one here, I've got a
TourSchema available, and you can see
| | 05:28 |
that I've got some elements here.
I've got a Tours element and things like that.
| | 05:33 |
So what I'm going to do is add this
TourSchema to the Tour.xml file.
| | 05:37 |
That's esay to do.
Make sure you have your Tour.xtml file
| | 05:40 |
selected, and then touch the text editor.
Now you can go over to your Property window.
| | 05:46 |
Press F4 if you do not see the Property
window, and click on the Schemas section
| | 05:50 |
and then click on this button with three
dot on it.
| | 05:53 |
This lists all of the Schemas that Visual
Studio knows about.
| | 05:56 |
Many of these Schemas are used by Visual
Studio, for instance the Schema for our ado.net.
| | 06:02 |
The one I'm looking for is listed here,
TourSchema.xsd.
| | 06:09 |
So I'll click here and then I will go to
this Use column and say Use This Schema
| | 06:15 |
and then I'll click OK.
Now I'm back in my XML file.
| | 06:19 |
I'll erase my existing XML and start
fresh.
| | 06:23 |
Look at that.
It knows there's a Tours element, which
| | 06:26 |
is my root element.
It automatically adds the XML namespace,
| | 06:29 |
which points to the TourSchema.
And it knows that, inside this Tours
| | 06:34 |
element, I can only use a Tour element.
And inside this one, I can only work with
| | 06:40 |
the TourName.
These are in a particular order.
| | 06:45 |
Next come Description and so on.
It also knows what attributes are allowed.
| | 06:53 |
So what have we seen in this video?
You don't have to use a separate tool to
| | 06:59 |
work with markup files.
The same great features available for
| | 07:03 |
code editors are also available for your
HTML and XML files.
| | 07:08 |
| | Collapse this transcript |
| Managing the alignment of your code| 00:00 |
Visual Studio assists you in writing
readable code by automatically indenting
| | 00:04 |
and aligning your text.
Many people use the default settings
| | 00:08 |
without a second thought, but with a
little effort, you can configure the
| | 00:11 |
formatting so that you have better
control over how your code is arranged.
| | 00:15 |
I'm inside this project called aligning
your code, and I've opened this book.cs file.
| | 00:20 |
The first step in understanding the
alignment of your code is to visualize
| | 00:24 |
what's happening by Visual Studio.
To do that, we're going to go to the Edit
| | 00:27 |
menu and choose Advanced.
Now, there are a lot of interesting
| | 00:33 |
things in the menu, but the one I'm
looking for is here, View White Space.
| | 00:37 |
Now you can see inside my document, these
blue dots.
| | 00:41 |
Those represent the spaces.
For instance, if I type a couple spaces
| | 00:45 |
here on line 21, you see they show up as
dots.
| | 00:48 |
If I press the tab key, you see that they
show up as arrows.
| | 00:53 |
That's how I can differentiate between
the two.
| | 00:56 |
Let's go see what the default settings
are for tabs and indents.
| | 01:01 |
We'll go to Tools options and go to the
Text Editor section.
| | 01:06 |
I'm going to choose the all languages
tabs.
| | 01:08 |
That means any changes I make in here
will effect every single code editor.
| | 01:12 |
And I'm going to click on the Tab
section.
| | 01:15 |
Currently the Tab size and the Indent
size are set to match, and they're set to
| | 01:21 |
4 spaces.
I prefer to use 2 spaces because I can
| | 01:24 |
see more on my screen.
Now, if I click this to insert spaces
| | 01:28 |
instead of keeping tabs, I'll see what
happens.
| | 01:30 |
Click on OK.
And now, I'm going to go down to this
| | 01:33 |
line and press the Tab key.
Rather than putting a Tab character in
| | 01:37 |
there, it puts a two space indent.
Now, we can discuss which is better,
| | 01:43 |
using spaces or tabs.
There's been a lot of discussion over the
| | 01:46 |
years about which is better.
My point is that you can pick which one
| | 01:49 |
you prefer and use it in your
application.
| | 01:52 |
Next, I want to talk about what happens
when you indent.
| | 01:55 |
Let's go up to this line of code here
where I have this comment, and I'm going
| | 01:58 |
to move down to the next line.
I'm going to press the Enter key.
| | 02:01 |
Do you see where my cursor is?
It's lined up with the comment on the
| | 02:04 |
line above.
Now, as I start typing, it puts the
| | 02:07 |
spaces in there and my comment is
indented at the same level.
| | 02:12 |
This is a smart indent feature, this also
works with things like the if statement.
| | 02:16 |
So, I'll come down to this line of code
and I'll type in If.
| | 02:20 |
I'll press the Tab key twice to stub this
in, and you see that Visual Studio
| | 02:23 |
automatically put the spaces here.
So when I start typing my code in here,
| | 02:27 |
it's indented two spaces over from the
curly braces.
| | 02:31 |
This is the way I like to work, but if
you prefer a different layout, you can
| | 02:35 |
also change this.
Let me show you what I'm talking about.
| | 02:37 |
You can go to Tools > Options.
And say that I want to have no indenting.
| | 02:44 |
Now, watch what happens when I move down
to the next line.
| | 02:46 |
It no longer tries to keep it aligned
with the line above.
| | 02:50 |
It will move it over to, always to the
front of the line.
| | 02:52 |
And now, I have to manually hit the space
bar or the Tab key to get over to where I want.
| | 02:57 |
Let's try that with my if statement.
I had another if statement here.
| | 03:01 |
See, it's not indented.
And then, if I come down here and I move
| | 03:05 |
down a line, you'll see that it's not a
line with the curly braces anymore.
| | 03:09 |
I don't know why you'd want to have this
option, but it's available if you want to
| | 03:12 |
turn it on.
Now, before I close, I'm going to turn
| | 03:14 |
off my White Space.
And I'm gpnna go back and set my settings
| | 03:18 |
to what I prefer, which is smart
indenting.
| | 03:23 |
And two units for Tab size and Indent
size.
| | 03:26 |
Aligning your code might seem like a
minor enhancement, but you have to look
| | 03:30 |
at your code for hours at a time.
Why not get it configured just the way
| | 03:33 |
you want?
| | 03:34 |
| | Collapse this transcript |
| Formatting your code| 00:00 |
I'm in a project called
FormatingYourCode.
| | 00:03 |
I want to show you how to arrange a code
on the screen according to the rules of
| | 00:07 |
the text editor.
To do that, I'm going to spend my time in
| | 00:09 |
this class, the Book class.
This is a simple class, it has a couple
| | 00:14 |
of properties at the top and has a method
with a few parameters, and it has this
| | 00:20 |
UseFormatDocument method.
If you look at my code in here, you can
| | 00:23 |
see that it's not aligned the way I would
like it to be.
| | 00:26 |
This equal sign doesn't have any spaces
around it.
| | 00:30 |
And this equal sign has too many spaces
around it.
| | 00:32 |
Now, of course, I could come in here and
manually fix it by using my keyboard.
| | 00:36 |
But I can also use a set of rules to
format these.
| | 00:40 |
I'll use Ctrl+Z to Undo those changes,
and let me show you the format document.
| | 00:44 |
I'll go to Edit > Advanced > Format
Document.
| | 00:49 |
There's actually two formatters in here,
Format Document and Format Selection.
| | 00:53 |
Format Selection only works with what is
highlighted in your text editor at the moment.
| | 00:57 |
I use this keystroke here, ctrl + k, ctrl
+ d instead of opening this menu.
| | 01:02 |
Ill show you that in a minute.
You see what happened?
| | 01:05 |
Those extra spaces were removed and the
extra spaces were added on this line.
| | 01:09 |
Now, let me put them back the way they
were, and let me also change the way this
| | 01:14 |
for h loop looks, and perhaps the way
this method looks.
| | 01:18 |
I moved the curly braces around.
Now I'm going to move the Ctrl+K, Ctrl+D shortcut.
| | 01:23 |
Now, watch what happenes to my code.
The curly braces got moved back to their
| | 01:27 |
original positions and the spaces got
added.
| | 01:29 |
So what's happening is the C# editor has
a set of rules to find about what to do
| | 01:34 |
when you format a document.
So let's go look at those rules.
| | 01:37 |
Here they are, they're in Tools options
and then in the Text Editor.
| | 01:42 |
Then you open the C# editor and click on
the Formatting section.
| | 01:46 |
In the general area, you got things like
Automatically format completion on semicolon.
| | 01:51 |
So when you type a semicolon on the end
of a line, it will format that line.
| | 01:56 |
When you type in a curly brace at the end
of a code block, it will format the line.
| | 01:59 |
And when you paste code into your
document, it'll also format it.
| | 02:03 |
I'll leave these all checked.
And then I also go into these areas and
| | 02:07 |
see if there's some new rules that I
would like.
| | 02:10 |
For instance, how do I want my curly
braces to be arranged on the page.
| | 02:15 |
I would like to have an open brace on a
new line for type.
| | 02:18 |
Is that what I want or do I rather have
it up on the same line as the class decoration?
| | 02:24 |
For today's example, let's say that I
want it on the same line as the class decoration.
| | 02:28 |
And I want to do the same thing for my
methods, and I want to do the same thing
| | 02:32 |
for my control blocks.
So I'll move this curly brace up on the
| | 02:35 |
if statement.
Now when I go back to my document, and I
| | 02:38 |
do the Ctrl+K, Ctrl+D, you'll see that it
moved this curly brace up here and this
| | 02:43 |
one up here, and it also moved the one up
on my class.
| | 02:47 |
Next, I want to talk about how to format
the parameters inside this method.
| | 02:51 |
So I'll go back to my Tools options and
click on Spacing.
| | 02:57 |
Here, we can say insert space between
method name and its opening parenthesis.
| | 03:03 |
That sounds good.
And I'll also put some spaces between the arguments.
| | 03:06 |
Click OK.
I keep an eye on this when I reformat,
| | 03:10 |
Ctrl+K, Ctrl+D.
And it added some extra spaces.
| | 03:13 |
So you get the idea, you have total
control over what's happening here.
| | 03:17 |
This is specific to each text editor.
I work a lot in XAML, so I like to change
| | 03:22 |
my settings for my XAML editor too.
Let me open up this SampleWpfControl, and
| | 03:28 |
then, I'll make this editor larger so you
can see it.
| | 03:32 |
I'd like to control what happens when I
format my tags.
| | 03:34 |
And then in particular, I'd like to
control what happens to my attributes.
| | 03:38 |
I like having my attributes aligned one
below the other.
| | 03:41 |
So I'm going to go make some changes
here.
| | 03:43 |
Let me add some extra spaces in here,
some extra spaces here.
| | 03:46 |
And then we'll go set some Editor
options, Tools > Options.
| | 03:51 |
I'll open up the XAML editor and go to
the Formatting section.
| | 03:58 |
And here, I get to pick whether I want
double quotes or single quotes for my attributes.
| | 04:02 |
I prefer single quotes, and I get to
choose what happens to my spacing.
| | 04:07 |
This first one's called attribute
spacing, how much space do I want between
| | 04:11 |
my attributes?
Currently, it's set to Position each
| | 04:13 |
attribute on a separate line.
But there's two other options, Preserve
| | 04:17 |
new lines and spaces, which essentially
say's, don't touch my code.
| | 04:21 |
And the second one, which say's insert a
single space between attributes.
| | 04:24 |
Let me do this one first.
And then do my Ctrl+K, Ctrl+D.
| | 04:28 |
You see how it put everything on a single
line, including this top element up here.
| | 04:34 |
Now switch it back to the old one,
Ctrl+K, Ctrl+D.
| | 04:41 |
And now you see how each lines up on
separate lines and they're nicely
| | 04:44 |
arranged in, it looks like a Table of
Content view for me.
| | 04:47 |
You can also specify whether or not it
removes the excess spaces in your document.
| | 04:51 |
So if I put a few extra spaces in here,
or blank lines I should say, then.
| | 04:57 |
I can use this option, element spacing to
control what happens with my new lines.
| | 05:01 |
This means don't touch my code, this
means collapse multiple empty lines in a
| | 05:06 |
single line, this means move all of the
empty lines.
| | 05:09 |
I prefer this setting right here, Ctrl+K
and Ctrl+D.
| | 05:14 |
I can't tell you how many times a day I
use Ctrl+K and Ctrl+D to format my code
| | 05:19 |
as I work.
I find it indispensable to my sense of
| | 05:21 |
order while working and I think you will
too.
| | 05:23 |
| | Collapse this transcript |
| Using outliners and regions in your code| 00:00 |
When you are faced with editing hundreds
of lines of code, you need a way to hide
| | 00:04 |
the parts that are not important for the
immediate task.
| | 00:08 |
Visual Studio provides code outlining and
code regions for these scenarios.
| | 00:13 |
I'm inside this outlining project, and
I'm looking at the code inside the
| | 00:17 |
book.cs class.
This is a class that has a number.
| | 00:22 |
Of properties and it has a couple of
methods.
| | 00:25 |
Update price and Cap price at maximum.
Now, by default, when you open up a file
| | 00:31 |
in Visual Studio in certain editors,
outlining is enabled.
| | 00:34 |
C-sharp is one of those editors.
There's a line down the left side of the
| | 00:38 |
screen with some minus symbols on it.
By clicking on these minus symbols I can
| | 00:42 |
collapse a section of the code, that's
what outlining means.
| | 00:46 |
I'm going to collapse this method, and
then I'm also going to collapse this
| | 00:50 |
method down here.
Now you can still see the code by
| | 00:54 |
covering your mouse over these 3 dots.
You get a glimpse into the hidden code
| | 01:00 |
when you hover over this section.
You can see that some lines are missing,
| | 01:03 |
by looking at the line numbers down the
side.
| | 01:05 |
It goes from 17 to 28 and 34 to 50.
Now of course, you can expand this at any
| | 01:11 |
time by clicking on the plus symbol.
There's a menu for enabling and disabling
| | 01:15 |
outlining, that's over here in Edit.
Outlining.
| | 01:18 |
So here, you could toggle all outlining.
You could stop outlining if you don't
| | 01:23 |
like that feature.
Now, that line is gone from the left side
| | 01:26 |
of the screen.
To re-enable it, go back to edit, and
| | 01:29 |
choose outlining.
Start automatic outlining.
| | 01:33 |
You can also collapse all of your methods
with one command.
| | 01:37 |
Choose edit, outlining and then choose
collapse to definitions.
| | 01:43 |
Now you see that I have my book still
readable but both my methods were collapsed.
| | 01:47 |
It also collapsed this XML comment
section here by default XML comments are
| | 01:52 |
also out lineable.
Let's go look at this HTML page.
| | 01:57 |
I do not see any outlying bar in this
one.
| | 01:59 |
You can enable and disable outlining for
particular elements.
| | 02:04 |
Let me copy these TD tags down here.
Verify that outlining is enabled.
| | 02:14 |
There we go.
It was turned off for that file, I'm not
| | 02:17 |
sure why.
You notice that this TR tag is now collapsible.
| | 02:21 |
These rules are something that you can
configure.
| | 02:24 |
For instance, what if I want to create my
own collapsible section for this H1 like this.
| | 02:30 |
That's not normally a setting that
enabled in the H1 tag.
| | 02:35 |
To change the HTML options, you go to
tools, Options,and then you go to the
| | 02:38 |
text editors and open up the HTML editor
and then go to format.
| | 02:42 |
Now you want to go to the tag specific
options and then go to your HTML tag section.
| | 02:53 |
And find the tag that you want to add an
outlining, for instance if you look down
| | 02:57 |
here you'll see that H2, there is no
outlining enabled for H,2, but for H1 I
| | 03:03 |
enabled that earlier.
So by putting this check mark in here it
| | 03:06 |
caused this visual studio to add this
plus minus symbol on the H1 tag.
| | 03:10 |
You'll see the other tags like the TR
tag...
| | 03:15 |
Have outlining enabled, but they have a
minimum number of lines.
| | 03:18 |
So until you have five lines of text
within the tr tag, it will not show the outliner.
| | 03:23 |
You have total control over these
settings.
| | 03:28 |
Next, I want to talk about what I call
regions.
| | 03:31 |
So I'll switch back to my book class.
A region is a way of building your own
| | 03:35 |
collapsible section What you do is you
find a section of the code and you type
| | 03:39 |
in #region, and then a string value.
Like this.
| | 03:45 |
And then at the end of the section that
you want to make collapsible you type in
| | 03:48 |
end region.
And you see the outliner automatically an
| | 03:55 |
+ and - symbol here and want to click on
the collapse what you see is the value
| | 04:01 |
that you typed in, in my case properties
is what shows here.
| | 04:03 |
Again I can however over this to see the
contents and I can expand it as nessecary.
| | 04:08 |
And another way of doing this.
Is to highlight all the lines of code,
| | 04:13 |
and then right-click and choose this
command, Surround With.
| | 04:21 |
I'll say Surround With a region.
And I'm back to where I was.
| | 04:30 |
Code outlining is simple to understand,
easy to work with.
| | 04:33 |
Regions are a bit more work, but you
should try them on your next coding session.
| | 04:36 |
| | Collapse this transcript |
| Getting multiple views of your code| 00:00 |
I'm in this project called multiple views
of code.
| | 00:02 |
And I want to show you how to have
multiple windows and multiple views of
| | 00:06 |
code files.
One of the simplest ways to see a view is
| | 00:09 |
to double click on the file.
For instance, I've already opened the
| | 00:12 |
author file.
But I can open this book.cs and this program.cs.
| | 00:17 |
And you might have seen this in other
movies.
| | 00:18 |
This adds multiple tabs across the top of
the document.
| | 00:21 |
Now, if you want to split these tabs into
other areas of the screen, you can pick
| | 00:25 |
one of these.
Up and drag it, pull it down into the
| | 00:29 |
center of the screen, and start trying to
figure out where to add it.
| | 00:33 |
Now if I move to this item in the center,
you can see that if I hover over this
| | 00:37 |
bottom icon and let go, it will add
another tab group.
| | 00:42 |
The other way of doing that, of course,
is to right-click and choose New
| | 00:46 |
Horizontal Group, or move to the next tab
group.
| | 00:49 |
Once you have them in the other tab
group, you can drag them back and forth
| | 00:52 |
between the groups.
You kind of push it up here into this
| | 00:55 |
area, and if I move this one back up
here, they're all back on the top tab area.
| | 01:00 |
I can also create a second copy of this
class in another tab.
| | 01:06 |
You do that by going to the window menu
and choosing new window.
| | 01:11 |
Now you see I have two copies of the
author, and the name has changed at the top.
| | 01:15 |
And now it says author.cs colon one, and
over here it says author.cs colon two.
| | 01:21 |
Drag this over to a new position, so the
two authors are next to each other.
| | 01:25 |
And again, I can drag this down, put on
the bottom screen And now I've got two
| | 01:30 |
views of the same text file.
There's another way to accomplish this.
| | 01:36 |
It's called the split screen.
I'll close this one on the bottom.
| | 01:40 |
And what that does, is it splits this one
text editor into two views.
| | 01:45 |
One way to make a split view is to go to
this button at the top of the scroll bar,
| | 01:50 |
and click and drag.
Now I've split that into two views.
| | 01:54 |
Notice there's no tab this time, though.
There's no tab available down here, and I
| | 01:58 |
can't drag this book down to the second
section.
| | 02:01 |
And when I open this tab, the author's
tab, I get the split view.
| | 02:04 |
When I go to the book view, I get the
full view.
| | 02:07 |
Now, to put this split view away, I can
either drag up to the top, or I can double-click.
| | 02:13 |
If you find it hard to remember that this
is here, you can also go to the window menu.
| | 02:17 |
And choose split, and then go back there
and choose remove split.
| | 02:21 |
I use the tab management tools all the
time, but the windows split feature I
| | 02:26 |
don't use as often.
I do feel that both have a place in your
| | 02:30 |
Visual Studio tool set, however.
| | 02:32 |
| | Collapse this transcript |
| Navigating code and code references| 00:00 |
As soon as you have more than a couple
pages of code and a project, you'll want
| | 00:04 |
to use the Visual Studio navigation
features to move intelligently through
| | 00:08 |
your code.
For this demonstration, I'm using this
| | 00:10 |
Navigating C Sharp.
Now I just opened this project and I
| | 00:14 |
haven't looked at any files yet.
going to open this node and double click
| | 00:19 |
on author.
Then, as I look through my code, I double
| | 00:22 |
click on book and then maybe back to
author, and then over to program.cs and
| | 00:28 |
then up to my references folder and maybe
open this property window.
| | 00:32 |
Visual Studio's tracking my progress.
And if you look at the top of my screen,
| | 00:37 |
you'll see that there is a back button
and a forward button here.
| | 00:40 |
Also, in the view menu is a navigate
backward or a navigate forward.
| | 00:45 |
This does exactly what you'd expect.
You can navigate backwards to the files
| | 00:49 |
you had open, and forward to the files.
Another way of navigating for items is to
| | 00:57 |
choose Navigate to.
Now you type in something you want to
| | 01:02 |
search for inside your project.
I'm going to look for author, and there's
| | 01:06 |
three places I can navigate to.
The author, which is a class, the C sharp
| | 01:12 |
file, or this method called add book to
author.
| | 01:14 |
I'll Double Click here, and as you see,
it took me over to to that add book to author.
| | 01:19 |
Let me go back to the book class, put my
cursor here.
| | 01:22 |
Another feature is the go to command,
Control + G.
| | 01:30 |
Or go to from this menu.
This is handy if you already know the
| | 01:34 |
line number you want to return back to.
Let's say I want to go to line 32.
| | 01:38 |
That moves me down to line 32.
Speaking of moving around in your code.
| | 01:45 |
Here's another feature that I find a lot
of developers are not familiar with.
| | 01:48 |
Look at this method.
Cap price at minimum.
| | 01:51 |
It's got a number of curly braces in
here.
| | 01:53 |
If I pick one of the curly braces, say,
this first curly brace, it highlights the
| | 01:58 |
lower curly brace.
I can move to the matching curly brace
| | 02:02 |
with a keystroke.
The keystroke is the control and the
| | 02:05 |
right square brace.
When you press that keystroke again, it
| | 02:09 |
moves back to the first (INAUDIBLE) Let's
try that with the if statement.
| | 02:12 |
I'll move my cursor here, and then use
the same keystroke to go back and forth.
| | 02:17 |
Now let's look at another convenience.
When I select this current price, after
| | 02:22 |
about a 1 second wait, Visual Studio
highlights the word Current Price with a
| | 02:27 |
gray background and also highlights it on
line 28 and line 34.
| | 02:32 |
This is so you can quickly look through
your document and see every place that
| | 02:35 |
you're using this in bound parameter.
Let's try it up here.
| | 02:40 |
BookID.
Here I'm not using BookID but I am using
| | 02:45 |
the new price.
Now I want to show you how to find the
| | 02:50 |
definition of a class or the definition
of a method.
| | 02:54 |
I'll return to my Program.cs file and I'm
interested in knowing where this book
| | 02:59 |
class is defined.
So I can select this book, right click on
| | 03:03 |
it, and choose go to definition or press
the F12 key.
| | 03:07 |
That takes me over to the book class
where I can read more about that class,
| | 03:11 |
and then of course, I can click the on
the Back button to take me back to where
| | 03:14 |
I instantiated the book.
This also works with methods.
| | 03:17 |
I can click on this update price.
Press F12.
| | 03:21 |
It takes me over to where the update
price method is defined and then click on
| | 03:26 |
the back button to go back.
You might also want to know how many
| | 03:30 |
other places are using this.
You can see I'm calling update price down
| | 03:33 |
here, in 2 different places.
One of the things you can do in Visual
| | 03:37 |
Studio is right click on this and choose
find all references.
| | 03:42 |
Now, I get a list down in the bottom of
the three places in my code where update
| | 03:46 |
price is being used or defined.
This first one shows where it's being defined.
| | 03:50 |
It's inside the book.cs class, and then
these other ones show me where it's being called.
| | 03:55 |
And as I click on them, it automatically
navigates me to those locations.
| | 04:00 |
Close that window.
Let me go over to the update price by
| | 04:07 |
pressing F12.
Let me show you one other feature.
| | 04:10 |
Right click and choose view call
hierarchy.
| | 04:15 |
What this does is show all the calls to
update price.
| | 04:20 |
So I can see that in another demo and in
Main, I've got the calls.
| | 04:23 |
And I can see that from within this
method, I'm making some calls out.
| | 04:28 |
I'm calling a method called Cap Price at
Maximum and Write line.
| | 04:32 |
Now notice one of these is a method that
I wrote, the second method right line is
| | 04:36 |
one that's part of one of the .net
framework classes.
| | 04:39 |
When I double click on these items, if I
double click on Cap Price at Maximum, it
| | 04:44 |
takes me to my definition.
But when I double click on Write Line, it
| | 04:48 |
takes me to this special file.
This works in C Sharp.
| | 04:52 |
What's happening here is Visual Studio is
looking up the basic definition of the
| | 04:56 |
console class and giving me a simple view
of that.
| | 04:59 |
Let me show you another way of getting to
this.
| | 05:02 |
I will go over to my Program class.
I'll click on string, and I'll press F12.
| | 05:09 |
The string class is not one of the types
I wrote.
| | 05:11 |
It's one that's part of the .net
framework.
| | 05:13 |
So when I press F12, in this case, it
takes me to this simplified view of that
| | 05:17 |
string class.
I have one more demonstration I'd like to
| | 05:19 |
show, and that's called the bookmark.
Let me close this window and go to my
| | 05:25 |
book class.
I can drop little bookmarks in my code
| | 05:29 |
that I can use for navigational purposes.
Let's say I want to go to this line of
| | 05:33 |
code here.
So what I can do is come up to this
| | 05:36 |
toolbar and toggle a bookmark.
You'll see there's this gray item on the
| | 05:41 |
sidebar out here.
Then I'll come down to this if statement
| | 05:45 |
and do the same thing.
And then down here where I'm doing this l
| | 05:49 |
statement, and add a third bookmark.
Now that I got these three bookmarks in
| | 05:53 |
there, I can use these forward and
backward buttons here to move through my bookmarks.
| | 05:58 |
One, two, three.
And to remove a bookmark, I can click on
| | 06:02 |
this (SOUND) to clear all the bookmarks
in my application.
| | 06:06 |
So as you can see, there are many
different ways to navigate your code
| | 06:10 |
besides using the traditional up down
arrows and mouse scroll bars.
| | 06:13 |
Why don't you try a few of these new
techniques on your next project?
| | 06:17 |
| | Collapse this transcript |
| Adding a reference to a project or assembly| 00:00 |
In a real world application, you're
going to use code written by other developers.
| | 00:05 |
To access that code, you need to
understand how to add a reference to a project.
| | 00:09 |
I am inside a solution called
AddReferences that has two projects,
| | 00:13 |
NameGeneratorLib and WpfApp.
You may have seen NameGeneratorLib in
| | 00:18 |
other videos.
This has a class called NameGenerator.
| | 00:22 |
And I want to call one of these methods
like this GetFemaleName.
| | 00:26 |
To do that, I need to add a reference in
this Wpf Application to the dll that's
| | 00:32 |
generated by this NameGeneratorLibrary.
To do that, I can right-click on this
| | 00:35 |
Reference node in my WpfApp and choose to
Add a Reference.
| | 00:41 |
Because NameGeneratorLib lives inside the
same solution, I can go to the Solution
| | 00:46 |
node, click on Projects and then look
through my list of projects, in my case,
| | 00:51 |
there's only one, and pick the
NameGeneratorLib and then click on OK.
| | 00:57 |
Now you see that the NameGeneratorLib has
been added.
| | 01:00 |
To delete a reference, you can
right-click and choose Remove.
| | 01:04 |
Now, why do I need that?
Let me show you.
| | 01:06 |
I'll open up MainWindow.xaml.
And I'm going to write the code in this
| | 01:13 |
button to fill this list box with the
names from that library.
| | 01:16 |
So I'll double-click on this button and
then I'll uncomment this code.
| | 01:20 |
To uncomment this code, I'm going to
press ctrl + k, ctrl + u.
| | 01:25 |
Here's why I need the reference.
When the compiler goes out and tries to
| | 01:29 |
resolve this
NameGeneratorLib.NameGenerator, it can't
| | 01:33 |
find a namespace called NameGeneratorLib.
If I hover my mouse over this, you'll see
| | 01:40 |
that it says the type or namespace, name,
NameGeneratorLib could not be found.
| | 01:45 |
And then it has some guidance.
Are you missing a using directive or an
| | 01:49 |
assembly reference?
In my case, I'm missing the assembly reference.
| | 01:52 |
So let's go add that back to my project.
Add Reference, choose my
| | 01:57 |
NameGeneratorLib, and then click OK.
Now, the red squiggle goes away, and when
| | 02:03 |
I run my application by pressing F5, I
can click on this Fill List button and I
| | 02:09 |
get a list of names in my list box.
I'll close the application and return to
| | 02:15 |
Visual Studio.
There's going to be a lot of code that
| | 02:18 |
you didn't write that's going to be part
of a third party library or part of the
| | 02:22 |
.NET framework, so you need to be able to
add references to those libraries, too.
| | 02:26 |
For instance, I'm going to work with this
System.Speech.Synthesis.SpeechSynthesizer.
| | 02:28 |
I'll uncomment this code with Ctrl-K,
Ctrl+U.
| | 02:37 |
And again, I get a red squiggle.
This time, on the word Speech.
| | 02:41 |
So naturally, I need to go add a
reference.
| | 02:42 |
There are other section available in the
reference manager.
| | 02:50 |
One is for the dot net assemblies and one
is for com components.
| | 02:54 |
So, if you're still working with old com
components, you can choose these to add references.
| | 02:58 |
I'm not going to show you how to do that
in this example, but it's available if
| | 03:01 |
you need to do that in your application.
I'm going to go to my Assemblies, and as
| | 03:05 |
you can see, it's a big list.
You might not know the name of the item
| | 03:09 |
you're looking for.
Here it is, System.Speech.
| | 03:11 |
But if you don't know the name or you
don't know where it is in this list, you
| | 03:15 |
can type in this search dialogue, speech,
and then click here.
| | 03:20 |
And then click on the check mark, and
then click on OK.
| | 03:23 |
Now the red squiggles go away and I'm
ready to use the speech synthesis engine.
| | 03:31 |
>> Hello, and welcome to the Visual
Studio 2012 Essential Training course.
| | 03:35 |
>> Don't forget, we also have the
Building Windows Store Apps Essential
| | 03:40 |
Training course on our website.
>> So, how did I make that work?
| | 03:44 |
I created a SpeechSynthesizer.
I told it to use my default audio device.
| | 03:49 |
I gave it the sentence to speak.
And then, on this next one, I told it to
| | 03:54 |
change the gender and the age of the
person speaking.
| | 03:58 |
These are our enumerated values, so I can
choose VoiceAge.Adult, and then I told it
| | 04:03 |
what to speak in the new voice.
By allowing us to set references to
| | 04:07 |
external libraries, Visual Studio grants
us access to an extensive list of
| | 04:11 |
additional features and functionality.
| | 04:13 |
| | Collapse this transcript |
|
|
6. Tools That Enhance Your Coding SessionsUsing the Task List| 00:00 |
I suspect you keep a task list somewhere
in your Office.
| | 00:03 |
If you want, you can manage some of your
tasks from within Visual Studio.
| | 00:06 |
The first step to managing your tasks, is
to show the task list.
| | 00:11 |
That's in the view menu, right here.
I can choose from several kinds of tasks
| | 00:17 |
in this drop-down, comments, and user
tasks.
| | 00:21 |
User tasks are just what you think.
I can come down here, and add a new task.
| | 00:24 |
By clicking on this button, Create User
Task, write my task in there, and then it
| | 00:30 |
shows up whenever I open this User Task.
I don't find this very useful, but it's
| | 00:34 |
one of the things you can do in the Task
List.
| | 00:37 |
What I do find useful is the User
Comments one.
| | 00:40 |
So I'll switch over to Comments.
And then I'll go look at this code over
| | 00:44 |
here in samples.
Here, you can see I have a number of comments.
| | 00:48 |
Including a bug comment in here.
So what I can do is turn these into tasks
| | 00:54 |
for the test just by putting certain
tokens at the beginning of the comment.
| | 00:58 |
For instance, I can put the word, to do,
here.
| | 01:00 |
And as you see, it shows up on my task
list.
| | 01:04 |
I find this much more convenient.
It's in my code, but it's also on the
| | 01:07 |
task list.
Now later, let's go down and add one
| | 01:10 |
here, put a couple more TODOs in, TODO,
and I can use this to navigate through my code.
| | 01:19 |
When I click on the TODO in my task list,
it takes me to that comment in my code.
| | 01:24 |
I can also specify different tokens.
Let's say that I want to make a bug
| | 01:28 |
token, and I want to be able to use my
own token in my class but still have it
| | 01:31 |
show up in this task list.
Go to Tools > Options and click on the
| | 01:37 |
Task List.
Here are the predefined tokens, Hack, To
| | 01:41 |
do, Undone, and Unresolved merged
conflict.
| | 01:46 |
I'd like to add my own.
So, I'll type in a new name, here.
| | 01:49 |
Bug.
And then click on priority equal high.
| | 01:53 |
And then click on add.
Now, I can go back to my code and type in
| | 01:59 |
the word Bug at the beginning of this
comment.
| | 02:02 |
And it shows up and it moves to the top
of the list because the priority level
| | 02:06 |
was set to high.
Now that you've mastered the task list,
| | 02:09 |
let's move on to commenting your code.
| | 02:11 |
| | Collapse this transcript |
| Commenting your code| 00:00 |
There are two different kinds of
documentation that frequently are written
| | 00:03 |
by developers.
First we have code comments, second we
| | 00:07 |
have help files.
In this video, I'll cover the code
| | 00:09 |
comments, which explain the purpose of
the current code and help make the code self-documenting.
| | 00:14 |
I'm in a solution called comments, which
has several projects, a SeaShore project,
| | 00:19 |
a Visual Basic project and a WPF project
written in SeaShark, yes it is.
| | 00:24 |
We'll first look at C sharp comments.
We'll open up this program class and
| | 00:29 |
we'll add a comment by typing in two
forward slashes and that's it.
| | 00:34 |
You know its a comment because its in
green.
| | 00:37 |
A comment is not compiled into the source
code.
| | 00:40 |
It's stripped out of the source code.
And it's there for developer purposes.
| | 00:44 |
If you want to do multi-line comments,
let's say that I want to comment out
| | 00:48 |
these lines, the console right lines
here, I can start by doing the forward
| | 00:52 |
slash and then an asterisk, and then when
I want to end the comment block I do an
| | 01:02 |
asterisk and a forward slash.
Now this block of code is commeted out.
| | 01:05 |
I find that I don't use that very often
anymore.
| | 01:10 |
I tend to use the multi-line comet tools
since I have Visual Studio, so what I can
| | 01:15 |
do is select these lines of code, and
then in my Edit menu, I can look up the
| | 01:22 |
comment selection and uncomment
selection.
| | 01:25 |
On my machine, the keystrokes are Ctrl+K,
Ctrl+C for comment and Ctrl+K, Ctrl+U for uncomment.
| | 01:32 |
So I'll click on Comment selection, and
you see that those items are now in green.
| | 01:36 |
And then a Ctrl+K, Ctrl+U uncomments
those lines.
| | 01:41 |
Now this tool also works in other
languages.
| | 01:43 |
Let's go to this HTML file.
I want to comment out of this paragraph.
| | 01:49 |
Now I can use that same keystroke,
Ctrl+K, Ctrl+C.
| | 01:52 |
And now I'll get an HTML-specific comment
start and end.
| | 01:56 |
And if you prefer the toolbar.
You can go to these two buttons, here.
| | 02:00 |
There's a plus and an x symbol.
The plus one adds a comment and the x
| | 02:05 |
uncomments it.
So, let's select this text again and
| | 02:09 |
uncomment by clicking on the button.
This also works in Visual Basic.
| | 02:13 |
In Visual Basic, the way you do a comment
is with a apostrophe.
| | 02:17 |
But I, again, will use my keystrokes or
these buttons.
| | 02:20 |
And then I don't have to remember what
the comment character is in each language.
| | 02:24 |
Same with this wpf application.
I'll open up this mainwindow.xml.
| | 02:31 |
Select one of these buttons, and then to
comment out the button I'll highlight
| | 02:34 |
that line and click the Comment button.
It only took us a few minutes to tour the
| | 02:40 |
parts of the Visual Studio comments
system.
| | 02:42 |
For a more complex documentation story be
sure and watch the Documenting Code video
| | 02:47 |
in this chapter.
| | 02:48 |
| | Collapse this transcript |
| Documenting your code| 00:00 |
Creating an external help file is another
type of documentation.
| | 00:04 |
Note, I'm not talking about help for the
end user of the application, but rather
| | 00:09 |
about code documentation, which can be
read by other programmers to get a better
| | 00:13 |
understanding of the code API.
To demonstrate this, I'm going to use
| | 00:17 |
this solution called Documenting and a
project called TourBookingLib.
| | 00:21 |
I'd like to document this Book.cs class.
Here it is.
| | 00:26 |
It has a number of properties and several
methods.
| | 00:30 |
I can put a comment in this code, but the
only people that can see this comment are
| | 00:34 |
developers that can access the source
code.
| | 00:36 |
That doesn't do people much good when
they're using my dll or my assembly.
| | 00:41 |
Let's see where I'm using this book.
I'm going to open up Program.cs and look
| | 00:46 |
at these two lines of code.
Here, I'm instantiating the Book class.
| | 00:49 |
Here, I'm calling the UpdatePrice method.
When I hover my mouse over this Book, I
| | 00:54 |
get very little information, same with
this UpdatePrice.
| | 00:58 |
I see that it takes one parameter.
If I hover over the Tour class, I see
| | 01:03 |
that is says the default constructor.
So somehow, the Tour class is getting
| | 01:06 |
more information than the Book class.
Let me show you how to add this documentation.
| | 01:11 |
You go back to the Book class and you add
what is called an XML comment.
| | 01:16 |
So you type in three forward slashes.
When I type in the three forward slashes,
| | 01:21 |
Visual Studio also adds two extra lines
of code and puts in these XML beginning
| | 01:27 |
tags and ending tags.
That's why they're called XML comments.
| | 01:30 |
Now, I can type a note in here and do the
same thing for my UpdatePrice method down here.
| | 01:43 |
I typed in Updates the price of the book.
Notice that it also stubbed in a param
| | 01:48 |
with name bookId and a param with name
newPrice.
| | 01:51 |
And then I can put information n about
these parameters.
| | 02:02 |
I'll do the same thing down here.
(SOUND) And now I'm ready to check this out.
| | 02:19 |
I'll go back to my Program.cs file, and
I'll hover over this UpdatePrice and I
| | 02:25 |
now get some more information, Updates
the prices of the book.
| | 02:28 |
And when I attempt at a parameter here,
I'll see that there are two overloads of
| | 02:34 |
this method.
And as I type in the values, hit the
| | 02:38 |
comma, and you'll see that it's pulling
up the information, the newPrice, the
| | 02:41 |
Updates the price of the book.
If I work with the percentage one, it
| | 02:46 |
tells me it's the new price by percent.
So this is documentation for the other developers.
| | 02:53 |
If this is all you do, it's still better
than having no comments or no XML
| | 02:57 |
comments in your application.
And you can do a lot more sophisticated
| | 03:01 |
things with this.
Let's see what we have in the Tour class.
| | 03:05 |
Here, we have a summary and we also have
an example.
| | 03:08 |
Here, I have a summary for the default
constructor, and here, I have a
| | 03:12 |
constructor that takes another parameter.
So I say a constructor that takes a
| | 03:18 |
TourName, the initial name of the Tour,
and then an example, the code you would
| | 03:22 |
use to write that.
And then I have comments for each of my properties.
| | 03:27 |
I also have a TicketType Enum.
And I'm putting a summary here.
| | 03:31 |
And then I'm putting a summary in for
each of the items inside the enumeration.
| | 03:35 |
So now, I'm going to go ahead and use
this in my program file.
| | 03:37 |
(SOUND) When I use SeniorDiscount, it
says, Indicates whether the Tour has a
| | 03:45 |
senior discount available.
Let's look at this in TicketType.
| | 03:52 |
Now, I need to call this method instead,
GetTourPrice.
| | 04:06 |
(SOUND).
This is what I wanted you to see.
| | 04:07 |
When I hit this dot operator and hover
over Kid or Normal or Senior.
| | 04:13 |
I get a tool tip that tells me that extra
information.
| | 04:16 |
Very nice.
You might also want to turn these XML
| | 04:23 |
comments into a help file.
To do that, you need to go to your
| | 04:26 |
Properties section of your application.
And down here at the bottom of the Build
| | 04:31 |
section, you want to make sure there's a
check mark here in the XML documentation file.
| | 04:36 |
So this is going to create a file called
BookLib.xml.
| | 04:38 |
So when I build my project and go look at
my hard drive, you'll see there is an XML
| | 04:49 |
file in here.
That contains information written out
| | 04:54 |
during the compilation process.
I can pass this XML information to a
| | 04:57 |
third party tool to generate some help
files.
| | 05:01 |
Here's one you might be interested in.
It's called Sandcastle.
| | 05:04 |
Sandcastle is a tool that was originally
written by Microsoft and then turned over
| | 05:08 |
to the open source world a few years ago.
You can get a copy of sand castle at this url.
| | 05:13 |
Now I don't have time to actually run
through the steps to generate this help,
| | 05:17 |
but I have created a chm file here from
that tool.
| | 05:20 |
So you can look at it.
Double click on this, and this is what we
| | 05:23 |
have for the help file.
We've got the tour booking lib namespace
| | 05:26 |
which contains two classes, book and tour
And one enumeration called ticket type.
| | 05:32 |
When I click on the ticket type, it shows
me a little grid down here with the
| | 05:36 |
ticket type name and the description.
I click on back.
| | 05:41 |
I can go over here and look at the book
class and see the book members, or the
| | 05:45 |
tour class and see the tour members.
I can look at the constructors, there's 2
| | 05:49 |
of those.
And that example XML text that I put in
| | 05:53 |
there is now being shown here, in this
example section.
| | 05:57 |
There's my two constuctors.
Here's my tour methods.
| | 06:00 |
Again, you look here on the parameters.
It tells you what the tour ID does and
| | 06:04 |
what the ticket type does.
This also cross references to the ticket type.
| | 06:07 |
If you want to go look at that again, and
it also has my tour properties.
| | 06:15 |
Whether or not you create help files, I
still encourage you to document your code
| | 06:18 |
with the xml comments.
Why?
| | 06:20 |
The main reason, is that it makes your
code friendly to other developers, as
| | 06:24 |
visual studio will provide the
intellisense information.
| | 06:27 |
| | Collapse this transcript |
| Using IntelliSense effectively| 00:00 |
Intellisense is one of the most helpful
features I can think of within Visual Studio.
| | 00:05 |
When you are writing code, it gives you
instant, automatic, context aware help.
| | 00:10 |
I can't imagine working without its
helpful suggestions.
| | 00:13 |
There are some Intellisense features that
are powerful but less intuitive, however.
| | 00:18 |
In this movie, I'll illustrate the
countless ways in which Intellisense
| | 00:21 |
helps you write your code.
To demonstrate this, I'll use this
| | 00:24 |
UsingIntellisense project, and I'll start
by opening up Program.cs.
| | 00:31 |
I want to instantiate an instance of this
class over here, StreamableTourInformation.cs.
| | 00:37 |
So I'll start by writing some code.
As soon as I type a character in Visual
| | 00:41 |
Studio, in the C# editor, Visual Studio
shows the autocomplete drop-down.
| | 00:46 |
This is showing me all of the items that
start with the letter v.
| | 00:49 |
If I type in something like string, it
shows me words that start with str.
| | 00:56 |
As you can see, this is a huge list of
items I can use in my code.
| | 01:03 |
Now, I'll declare my variable.
I'll call it s, and then I'll say equal.
| | 01:08 |
Now that I type another character, I get
another autocomplete box.
| | 01:11 |
And it knows that I'm on the other side
of the equal sign.
| | 01:14 |
So I'm probably looking for the new
keyword.
| | 01:17 |
Now, I'll start typing streamable.
As I type, it will eventually find a match.
| | 01:23 |
Now at this point, I can click with my
mouse to finish entering.
| | 01:28 |
And then I'll do my open and close parens
and then my semicolon.
| | 01:31 |
Some of you are probably squirming in
your seat at the moment thinking you had
| | 01:36 |
to touch your mouse to do the auto-entry?
I'm a keyboard person.
| | 01:40 |
Well, I have good news for you.
There's also a keyboard way of doing this.
| | 01:44 |
Let me show you.
I'll go back to where I started typing
| | 01:48 |
the streamable.
And now, what I want to do is have the
| | 01:53 |
autocomplete feature finish the typing
for me.
| | 01:55 |
What I'm going to do is type in the open
parenthesis.
| | 01:59 |
Notice I haven't finished typing the rest
of the StreamableTourInformation, so I'll
| | 02:03 |
hold down the Shift key and Tab the open
paren, and Visual Studio finishes the
| | 02:08 |
typing for me and then puts the open
parenthesis in.
| | 02:11 |
We do that again.
(SOUND) There we go.
| | 02:15 |
And this time, I'm going to press the
Semicolon key.
| | 02:19 |
Again, you see what happened?
It finished the typing for me and put the
| | 02:22 |
character that I specified on the
keyboard.
| | 02:24 |
This can save you a lot of time.
Now, you notice that when I hit the
| | 02:28 |
Backspace key, it doesn't automatically
show the autocomplete list anymore.
| | 02:32 |
There are two key combinations that I use
all the time in Visual Studio.
| | 02:36 |
Learn to use these and you'll be a .NET
ninja.
| | 02:40 |
They are the Ctrl+Spacebar and the
Ctrl+Period.
| | 02:43 |
I'll use Ctrl+Spacebar.
That will cause the Intellisense window
| | 02:48 |
to appear.
I'll show you a Ctrl+Period in a few minutes.
| | 02:51 |
So I back up, and I'm ready to reprompt
the auto complete dialog.
| | 02:55 |
So I do ctrl + spacebar, this time I
didn't even get the autocomplete
| | 02:59 |
drop-down because I had enough
information on the screen that it
| | 03:02 |
automatically completed the call.
Let me back up a little bit further, like
| | 03:06 |
to here.
Now, do a Ctrl+Spacebar, I get a drop-down.
| | 03:10 |
If it's unique enough, (SOUND) there's no
other word that starts with this unique combination.
| | 03:16 |
Now, when I do Ctrl+Spacebar, it
completes the code.
| | 03:20 |
I also use Ctrl+Spacebar when you have
case corrections you need to do.
| | 03:24 |
For instance, C# is a case-sensitive
language, so this is not a valid type.
| | 03:30 |
But I know it's something like this, so I
put my cursor somewhere on this word,
| | 03:35 |
press Ctrl+Spacebar and have it fixed
magically.
| | 03:38 |
Here's another feature.
Let's try this again, var s2 = new.
| | 03:46 |
You notice that my type has a capital S
and a capital T and a capital I.
| | 03:52 |
I can type those in like this.
And the Intellisense tries to find a
| | 03:59 |
class that matches those proper cased
values and suggest that.
| | 04:03 |
So again, now I can press the Tab key to
finish typing.
| | 04:08 |
Alright.
Let me erase this line of code.
| | 04:09 |
And then we'll talk about method
parameters.
| | 04:12 |
The Console class has a method called
right line.
| | 04:15 |
If I hover my mouse over this, you'll see
that there are 18 overloads or 18
| | 04:20 |
different versions of the right line
method.
| | 04:22 |
Let's see what happens when I erase the
text in here and do an open parentheses.
| | 04:26 |
This is some Intellisense for the
overloads, there's 19 versions of this method.
| | 04:31 |
I can click on these up and down arrows
to read the information about these methods.
| | 04:37 |
So if I'm interested in calling the one
that takes a double value, I can read
| | 04:41 |
about it here and then use it.
I can't say enough good things about the
| | 04:48 |
Intellisense support in Visual Studio.
It is a feature I simply couldn't live without.
| | 04:52 |
In the next movie, you'll see how to use
the smart tag feature.
| | 04:55 |
| | Collapse this transcript |
| Using SmartTags and other IntelliSense aids| 00:00 |
Don't you wish you could have Visual
Studio automatically generate Boilerplate
| | 00:03 |
code for you?
Well, it actually has several ways of
| | 00:06 |
doing that.
In this video, I'll look at the smart tag feature.
| | 00:10 |
For this demonstration, I'll use this
project called UsingSmartTags, and I'll
| | 00:14 |
start by opening up Program.cs.
I wrote this line of code expecting to
| | 00:26 |
have a Barn class available inside my
Project.
| | 00:30 |
As you can see, it has a red squiggle
underneath it.
| | 00:33 |
That's usually a warning that I do not
have this class available.
| | 00:37 |
So I'm missing a using directive where I
should add an assembly reference.
| | 00:40 |
Visual Studio offers correction help when
it knows how to fix your error.
| | 00:44 |
These are known as smart tags.
One of the smart tags is to add a using
| | 00:49 |
statement at the top of my document.
Now of course, I can come up here and put
| | 00:52 |
a using statement in here, but I don't
have a class for that yet.
| | 00:55 |
So, let's go and create a class.
Now, when I hover my mouse over this, if
| | 01:00 |
you look carefully, you'll see that
there's a tiny blue rectangle.
| | 01:06 |
Now, if I click carefully with my mouse,
it's a very small target, but if you
| | 01:10 |
manage to click it successfully with your
mouse, you can then see these two smart
| | 01:14 |
tags, Generate a class for Barn or
Generate a new type.
| | 01:18 |
Let's try this first one, Generate class
for Barn.
| | 01:21 |
And if you look over in my solution,
you'll now see a new file, Barn.cs.
| | 01:27 |
And if I open that up, I'll say I have a
very simple class.
| | 01:30 |
That was nice.
Let's try that again.
| | 01:32 |
Go back to Program.
I'll do the same thing, and this time,
| | 01:44 |
I'll choose to Generate a new type.
Now I'm offered a more generous dialog.
| | 01:50 |
What kind of type do you want to create?
Is it a public type?
| | 01:54 |
Is it a class or a struct or an interface
or an enumeration?
| | 01:58 |
What do I want to call it?
I'm going to switch to struct, I'll call
| | 02:01 |
it duck, and I'll choose to put it in a
separate file called Duck.cs and then
| | 02:07 |
I'll click OK.
And again, it adds Duck.cs and puts in
| | 02:12 |
the public struct.
Let's return back to Program.cs and talk
| | 02:16 |
about another smart tag for adding Using
statements.
| | 02:19 |
I'll delete these two lines of code.
This time, I'm sending var fs = new FileStream.
| | 02:31 |
Again, I get a red squiggle.
Sometimes, I find it difficult to
| | 02:35 |
activate this smart tag.
It is hard to click on that.
| | 02:38 |
So there's another magic keystroke you
can use in Visual Studio, like ctrl +
| | 02:42 |
space bar.
This times, it's Ctrl+Period.
| | 02:44 |
Ctrl+Period activates the smart tag and
you see I have two choices.
| | 02:49 |
I can add a using statement to the top of
my document by clicking here, that should
| | 02:54 |
fix my compile error.
Or, the second choice is go back down
| | 02:59 |
here and reactivate the smart tag, choose
to fully qualify the FileStream.
| | 03:03 |
So when I click on the second item, it
changes my code to say, System.IO.FileStream.
| | 03:10 |
The next smart tag I want to show you is
called generate from usage.
| | 03:13 |
Notice on line 17 that I'm instantiating
an instance of this Customer class, and
| | 03:18 |
then I'm setting two properties.
And then calling a method on that class.
| | 03:23 |
If you look over here in my code, you'll
see that I have a class that implements
| | 03:27 |
first name, last name, full name, and a
save method.
| | 03:31 |
I'm going to delete this code, return
back to Program.cs and I should start
| | 03:37 |
getting some red squiggles over here.
That's because the code is no longer
| | 03:40 |
inside the Customer class.
I'm going to activate my smart tag by
| | 03:44 |
pressing Ctrl+Period.
And one of my choices is to generate a
| | 03:48 |
property stub for first name.
This is called generate from usage.
| | 03:52 |
Now I'll go back over to my Customer
class and see that it added this property here.
| | 03:57 |
So this is a quick way of building up
this Class from usage.
| | 04:02 |
Ctrl+., Generate Property Stub, come down
here and do the same thing on this line,
| | 04:12 |
and then down here in the Save method.
Should have stubbed in a save method over here.
| | 04:19 |
Microsoft's smart they know you haven't
written in any code in here.
| | 04:22 |
So they put this line of code in here
where it say, throw new NotImplementedException.
| | 04:26 |
If you try to actually call this method,
you're going to get an exception in your
| | 04:31 |
code so, you know oh, yes, I forgot to
write the implementation code in the save method.
| | 04:34 |
You can also manage your using statements
at the top of your document.
| | 04:38 |
If you right click up in this area of the
screen, you can choose the organize usings.
| | 04:43 |
What I can do here is remove my unused
usings that shrunk my using statements
| | 04:48 |
down to just a single line.
Ctrl+Z and I can also chooses to remove
| | 04:54 |
them and sort them in alphabetical order
or just sort them in alphabetical order.
| | 04:59 |
Visual Studio can enter other lines of
code for you.
| | 05:02 |
When you add certain code constructs,
such as an interface in a C# class
| | 05:07 |
definition, Visual Studio gives you the
opportunity to automatically generate the
| | 05:12 |
code necessary to implement the
interface.
| | 05:14 |
You can see that my Customer class is
trying to implement this i convertible interface.
| | 05:19 |
There's that smart tag.
Now, if I do a Ctrl+Period, I'll get a
| | 05:23 |
smart tag that says, implement the
interface iConvertible.
| | 05:27 |
That's what I want to do, so I'll select
this item.
| | 05:29 |
And you can see that it wrote in all of
the methods necessary to meet the
| | 05:34 |
requirements of that interface.
This is used to convert my type, the
| | 05:38 |
Customer class, to other types like
ToSingle, to or these other common dot
| | 05:43 |
net types.
Looks like it wrote about 100 lines of
| | 05:46 |
code for me.
Smart tags are another part of the
| | 05:49 |
intellisense tools that are indespensible
for writing code in a fast and effective manner.
| | 05:54 |
| | Collapse this transcript |
| Working with code snippets| 00:00 |
A few years back, Visual Studio
introduced the idea of code snippets.
| | 00:05 |
Snippets are small sections of code that
can be automatically generated and
| | 00:09 |
inserted into your code.
They show up in Intellisense and are customizable.
| | 00:14 |
For this demonstration, I'm using a
solution called using code snippets that
| | 00:18 |
has several projects.
I'll start by opening this model project
| | 00:22 |
using CS code snippets, and then opening
this program.cs file.
| | 00:27 |
Our first stop is to look at the code
snippet management tool.
| | 00:29 |
It lives inside the Tools manual.
At this location, code snippets manager.
| | 00:36 |
This dialogue shows all of the installed
snippets.
| | 00:39 |
You pick a language, let's say C Sharp,
and it shows you all of the C Sharp code snippets.
| | 00:44 |
There's one for ASP.NVC4, something
called ANVC Action 4.
| | 00:51 |
Here's ones for Office.
Here's one for bolding a range or
| | 00:58 |
creating a table.
There's also ones for CSS and HTML.
| | 01:03 |
Let's look at the CSS ones.
Here's one called font face and media query.
| | 01:10 |
You can add your own snippets to this
library.
| | 01:12 |
I'm going to add a snippet library that I
created in this custom snippet example.
| | 01:17 |
I'll click on Import, open up my Exercise
files.
| | 01:21 |
Grab this TourClass.snippet file and
click Open.
| | 01:31 |
Then I get to pick where to place this
item inside the snippet folders.
| | 01:35 |
I'll pick the default and then click on
finish.
| | 01:37 |
Now that I've imported my code snippet, I
can find it here in my code snippets.
| | 01:43 |
And there it is.
I click on okay, and let's look at some
| | 01:47 |
of the c sharp snippets.
Some of the snippets show up just as
| | 01:51 |
you're typing in code.
For instance, if I type in the word "if,"
| | 01:54 |
this little symbol that looks like a
piece of paper, that represents a code snippet.
| | 01:58 |
And it even says here in the tool tip,
"code snippet for an 'if' statement." So
| | 02:02 |
if I hit the Tab key twice, the first Tab
key dismisses the Autocomplete dialogue,
| | 02:07 |
and the second Tab key stubs in the code
snippet.
| | 02:11 |
Some of the code snippets have
placeholders in them.
| | 02:14 |
For instance, if I type in four each and
press the Tab key twice, you'll see that
| | 02:19 |
there are some yellow highlights in here.
I can press the tab key to move to the
| | 02:24 |
highlights and then edit the values in it
for each file.
| | 02:28 |
In files, something like that.
If you want to see the list of code
| | 02:36 |
snippets that are available use this key
combination, Ctrl+K, Ctrl+X.
| | 02:41 |
I'll try that one.
Now you see this pop up that says insert
| | 02:45 |
snippet and now you can use your mouse to
drill in and look for things like office
| | 02:49 |
development word formatting.
Let's choose boulder range and then that
| | 02:54 |
inserts this bit of code, and again you
see there's some yellow areas in this
| | 02:57 |
code snippet too.
I'll use the tab key to move back and forth.
| | 03:02 |
I'll delete that and move over to my VB
section, and I'll put up module one over here.
| | 03:07 |
You used a question mark to see the code
snippets, so I'll type in Question Mark
| | 03:12 |
and then the Tab key...
And I get the same dialog.
| | 03:15 |
Its the same code snippets there's a vb
specific version of the office developmet
| | 03:19 |
ones and a Csharp specific version.
This one's using Cent to convert the
| | 03:29 |
toggle to a bold.
It also works in CSS I have the sample
| | 03:34 |
filesheet.css file here.
I'll type in @.
| | 03:39 |
Press the Tab key twice.
And this is what was stubbed in for me.
| | 03:46 |
Font face, font family.
An SRC, an SRC for the local.
| | 03:52 |
This allows me to download a font family.
To the users computer from the style sheet.
| | 03:58 |
Let me try another one I'll type in at
media and press Tab.
| | 04:04 |
Now let's say you want to reuse some of
your own code.
| | 04:06 |
So I'm going to go back to program.cs and
I'm going to write a little bit of code here.
| | 04:12 |
Var.
X equal new book.
| | 04:14 |
Let's say that I want to reuse this code.
There's a couple ways I can reuse this code.
| | 04:19 |
I can create a code snippet, and I'll
show you how to do that in about ten
| | 04:22 |
seconds, but the other way you can do it,
if you don't want to go to that bother,
| | 04:26 |
is you can go to your toolbox, and drag
this code over, and drop it on one of the
| | 04:30 |
tabs in the toolbox.
Now later, when you need that code, come
| | 04:35 |
back to the toolbox, drag that over to
your source code window, to study that code.
| | 04:40 |
It's a very simplistic way of doing it.
If you want a more sophisticated way of
| | 04:44 |
doing it, use code snippets.
So, over here this code snippet example.
| | 04:48 |
I have my own custom code snippet, tour
class dot snippet.
| | 04:52 |
This is really nothing more than an XML
file.
| | 04:55 |
When you create a snippet, you provide
four sections, properties such as title
| | 04:58 |
and description.
You must also provide a reference list of
| | 05:05 |
what assemblies are necessary for your
code snippet.
| | 05:08 |
Then you define your code.
In this case I said I want a C sharp code
| | 05:12 |
section, so it knows it can only be used
in the C sharp code editor.
| | 05:15 |
Here you can see I'm using this c data
section in my XML to define the code.
| | 05:20 |
Here's a comment and a public class and a
constructor and so on.
| | 05:24 |
Now that I've created this snip-it,
you've imported the application and then
| | 05:28 |
you can go over to program.cs, (SOUND)
Type in TCC.
| | 05:36 |
Press the tab key twice, and there's my
tour class.
| | 05:38 |
Now where did the TCC come from?
Up here.
| | 05:43 |
I created a shortcut.
It's a bit tedious to create your
| | 05:47 |
snippets this way.
So, there are some other tools available
| | 05:50 |
and the extensions and updates.
If you go here and look online and Search
| | 05:55 |
for the word Snippet, (SOUND) you'll see
there's several Snippet Tools, like
| | 06:00 |
Snippet Designer and WPF Client Snippet
and some other ones in here.
| | 06:05 |
l encourage you to check those out if you
want to write your own custom snippets.
| | 06:08 |
As you have seen, code snippets are
incredibly useful and they can be easy to
| | 06:13 |
create with the right tool.
Have fun exploring what you can do with
| | 06:16 |
code snippets.
| | 06:17 |
| | Collapse this transcript |
| Refactoring your code| 00:00 |
Writing code is a constant push and pull
on your development skills.
| | 00:04 |
First you write some code and test it to
see if works the way you intended.
| | 00:08 |
Then, as the project progresses, you
discover ways to improve and change the code.
| | 00:12 |
This kind of rewriting is sometimes
called refactoring.
| | 00:16 |
Regardless of how you define it, Visual
Studio has refactoring tools to help.
| | 00:20 |
If you are a C# developer, then you don't
have to do anything special, as there are
| | 00:24 |
about ten refactoring tools built into
Visual Studio.
| | 00:28 |
If you are a VB programmer, you should
download the free Code Rush Express tool
| | 00:33 |
which provides dramatic code refactoring
support.
| | 00:35 |
For this demonstration, I'll use a
project called Refactor (INAUDIBLE) C#.
| | 00:39 |
I'll start my refactoring journey by
opening the program .cs file.
| | 00:43 |
A common refactoring is renaming parts of
your code.
| | 00:47 |
C Sharp Refactoring supports renaming
Classes, Methods, Variables and other
| | 00:53 |
parts of your code library.
For my first refactoring, I'm going to
| | 00:57 |
Rename this variable on line 13.
Calling it B is not very descriptive.
| | 01:02 |
To rename it I'll select the variable and
then go to my Edit refractor menu and
| | 01:08 |
then choose rename.
Visual Studio brings up a dialogue that
| | 01:12 |
asks me for the new name.
I'll call this one book.
| | 01:15 |
And then it asks me several other
questions.
| | 01:17 |
Do I want to preview the changes before I
apply them, do I want to search through
| | 01:21 |
my comments for the word B and change it
to Book, and do I want to look through my
| | 01:25 |
string literals...
I'll accept the defaults and click Okay.
| | 01:29 |
Here is the preview screen.
It tells me what it's looking at in the
| | 01:32 |
top half of the screen, and in the bottom
half of the screen, it shows me the code
| | 01:36 |
that's going to be changed.
I like the changes so I'll click Apply.
| | 01:40 |
And as you can see, it changed line 13
and line 18.
| | 01:46 |
Next, I want to rename this method.
This method is defined inside the Book
| | 01:50 |
class over here, so I can change it
either in the Book class itself or I can
| | 01:56 |
change it in Program.cs.
I'll try it from here.
| | 01:59 |
Select Save Book, right-click on it and
choose Refactor.
| | 02:05 |
Notice there's also a keystroke, control
r, control r.
| | 02:08 |
There are also other keystrokes for the
other (UNKNOWN) tools like Control R,
| | 02:13 |
Control M for extract method.
I'll choose this first one.
| | 02:17 |
I'll call this one Save The Book...
And again, it shows me that it's going to
| | 02:25 |
be changed in two different locations,
and here is the changes.
| | 02:30 |
Now I click on apply and it changes it
here.
| | 02:33 |
If I open up my book.cs file, you'll see
that it also modified it here.
| | 02:39 |
Now let's try the extract method
refractor.
| | 02:42 |
To do that I'm going to open mathlive.cs.
I wrote this method called, calculate
| | 02:49 |
paint neede, that has some code that I
think is reusable in many other methods.
| | 02:53 |
I highlight the code that I want to
refactor, right click, choose Refactor,
| | 02:59 |
extract method I'll call this new method
CalculateArea, and then click OK.
| | 03:07 |
Visual Studio wrote a new method down
here, figured out what needed to be
| | 03:11 |
passed in as parameters, the radius
needed to be passed in as a parameter,
| | 03:15 |
took my three items from the previous
method And returns them here.
| | 03:19 |
And then it fixed up the code here too,
to call my calculate area and passing the
| | 03:23 |
area value.
The next factor will be reorder parameters.
| | 03:28 |
I'll open up the book class, and go to
this method save the book.
| | 03:33 |
Right Click and choose Refactor, Reorder
Parameters.
| | 03:39 |
Now, I can change the order.
I'll move the overwrite existing to the
| | 03:43 |
end, and then click okay.
It has to do some work here, it has to
| | 03:48 |
find all the instances that called this
method and change the parameters.
| | 03:52 |
That's what I'm seeing here, I'll click
on Apply.
| | 03:56 |
Now we see that Overwrite Existing is at
the end of the list and if we go see
| | 04:00 |
where I'm calling this method in
Program.cs we'll see that the Boolean
| | 04:04 |
value is at the end of the list.
Return back to book.
| | 04:08 |
You might have noticed that was a
spelling error in this boolean parameter too.
| | 04:12 |
That's right, we can rename this...
(SOUND).
| | 04:24 |
For my final refactoring, I'll show you
the extract interface.
| | 04:28 |
I go to my book class, right click on it.
Choose refactor.
| | 04:33 |
Extract interface.
I tell it the name of my new interface,
| | 04:38 |
iBook, and I tell it which members I want
to export to the interface.
| | 04:43 |
I've got a choice of price and title, and
the method.
| | 04:45 |
I'm going to take the two properties, but
leave the method inside the book class.
| | 04:49 |
Now I'll click on Okay.
Visual Studio creates a new file in my
| | 04:54 |
project called ibook.cs creates an
interface called ibook moves my two
| | 04:58 |
properties over here.
And finally it modifies my book class to
| | 05:04 |
implement this ibook interface.
All in all, I'd say Microsoft nailed the
| | 05:09 |
most common refactorings.
If you want more refactoring, look into
| | 05:14 |
third party tools like Code Rush and
ReSharper.
| | 05:17 |
| | Collapse this transcript |
| Understanding code generation| 00:00 |
It is common when writing your
application that you will come across
| | 00:03 |
large areas of boilerplate code in which
the same code pattern is repeated over
| | 00:08 |
and over.
Whenver you find yourself repeating the
| | 00:11 |
same mindless task you should consider
automating the process.
| | 00:15 |
The good news is other people have
considered this problem before you and
| | 00:18 |
have written code generation tools.
Code generation is where software, rather
| | 00:22 |
than a human, is used to write program
components automatically.
| | 00:25 |
A number of commercial and free code
generators are available in the market.
| | 00:30 |
Some of the common scenarios I've seen
with code generation are as follows.
| | 00:34 |
Generating repeated sections of a code
where there are many common spots but
| | 00:38 |
also coach sections that vary.
Boilerplate code, code that is entered
| | 00:42 |
many times.
In Visual Studio this has mostly been
| | 00:45 |
replaced by code snippets.
Most of the drag and drop designers use
| | 00:49 |
code generators.
Another popular use of code generation is
| | 00:53 |
an object relational mapping tools or
ORMs.
| | 00:56 |
ORM tools take the tables and other
constructs of a database and turn them
| | 01:01 |
into language objects.
There is an active community of 3rd party
| | 01:05 |
vendors making code generation tools.
Ideablade and Hibernate, Entity
| | 01:10 |
Framework, CodeSmith and the star of this
show; Visual Studio T4.
| | 01:17 |
When you survey the different code
generation tools in the market you'll
| | 01:20 |
find that most of them use one of these
mechanisms for the code tools.
| | 01:24 |
Are there templates prototypes or
aspects.
| | 01:28 |
The T4 system used by Visual Studio is
template based.
| | 01:31 |
And in a template system you start by
creating a template file which contains
| | 01:35 |
your portions of your code.
Then you run the code generation tool.
| | 01:40 |
This could be a standalone tool, or a
command line utility.
| | 01:44 |
The T4 template tool in Visual Studio is
built into the IDE, and runs when you
| | 01:49 |
compile your app code.
When the generator is ready, you pass the
| | 01:53 |
template to the generator.
Optionally, you pass other external
| | 01:56 |
parameters to the generator.
The generator combines the information
| | 02:00 |
from the template and the parameters, and
saves the output to the disk.
| | 02:05 |
Here's an example of a template token.
Usually, a template token has a group of
| | 02:09 |
special characters that start and end the
token.
| | 02:12 |
You mix these tokens throughout your
template file.
| | 02:15 |
Code Smith for example uses the less than
and percent combination to start a token,
| | 02:20 |
and the percent and greater than to end
the token.
| | 02:22 |
In T4 the percent is changed to the hash
symbol.
| | 02:27 |
Here is an example of a T4 template, on
the left side of the screen is the
| | 02:31 |
template and on the right side of the
screen is the output that is saved to disk.
| | 02:35 |
On line 20 in the template I'm using a
token to print the file names.
| | 02:41 |
Over in the code file lines 17 through 24
are the results of that token.
| | 02:46 |
I'd like to show you how to use the
Visual Studio Code Generator known as T4.
| | 02:52 |
It is the topic of the next movie in this
chapter.
| | 02:54 |
| | Collapse this transcript |
| Generating code with T4| 00:00 |
Visual Studio includes a code generator
that creates files from simple template definitions.
| | 00:05 |
It has an awkward name.
It's known as the Text Template
| | 00:08 |
Transformation Tool Kit.
Most of us just call it T4.
| | 00:13 |
For this demonstration, I'll use the code
inside this project, CodeGenWithT4Templates.
| | 00:17 |
To add a T4 template to a project you
right-click.
| | 00:22 |
Choose add new item, and then I'll search
for T4.
| | 00:26 |
There they are.
There's two different kinds of templates.
| | 00:30 |
The one I'm going to use for today's
demonstration is the text template.
| | 00:34 |
Call this one live demo, and click add.
At the top of this template are
| | 00:42 |
instructions to the code generation tool.
I'm telling it I want to use C sharp as a language.
| | 00:48 |
I need a reference to the system.core
library and I'd like to import several
| | 00:53 |
name spaces.
Then down here I pick the output extension.
| | 00:57 |
If you look at my file underneath live
demo you'll see there's a live demo.txt file.
| | 01:04 |
If I change this extension to a, b, c,
and compile the project.
| | 01:09 |
You'll see that it changes the extension.
What I really want this to be is .cs.
| | 01:14 |
So I'll modify it one more time.
Use Ctrl+Shift+B to compile.
| | 01:19 |
And see that I now have my live demo.cs.
Each t4 template can contain blocks which
| | 01:24 |
are responsible for dynamically creating
text for the template.
| | 01:27 |
I can simply put text in, like this, and
when I open up my LiveDemo.cs file,
| | 01:39 |
you'll see that it's already starting to
write the code into that cs file.
| | 01:43 |
I'll go back over here.
I'll put a comment in.
| | 01:48 |
And now, I want to start putting some
tokens into my code.
| | 01:53 |
So far, let's see what we have.
I've got a comment and I want to put a
| | 02:01 |
timestamp here.
So, switch back to my TT file, and I'll
| | 02:07 |
does a delimiter.
This is the special delimiters for tokens inside.
| | 02:13 |
A T4 template.
This is saying to output whatever
| | 02:15 |
expression I put in here.
(SOUND) And I'll see if that worked.
| | 02:29 |
If you make a mistake, which is common,
you don't get any IntelliSense in the T4 template.
| | 02:33 |
Let's say I have a broken two string
method here.
| | 02:37 |
This is what you'll see, error generating
output.
| | 02:39 |
Now it's possible to debug these
templates if you install an additional toolkit.
| | 02:45 |
There's something called the D4 toolkit
you can install, and that sets up debugging.
| | 02:50 |
I know how to fix this one though, we'll
go back and put the g in here and continue.
| | 02:54 |
Next, I want to call the custom code.
Now one way you can do is have a class of
| | 02:59 |
your own, like this database connections
class here, and I could invoke this from
| | 03:05 |
my template.
In order to do that, you have to tell the
| | 03:08 |
code generation engine what assembly
contains the code, and the name of the
| | 03:12 |
methods that you want to call.
So later I'm going to be calling this one
| | 03:14 |
called Get Connection.
For right now though, I just want to put
| | 03:18 |
some code inside this Template file.
(SOUND) This is how you set aside a code
| | 03:26 |
for Code Blocks.
(SOUND) Now I'll Write some code for a
| | 03:31 |
method called OutputName.
And then I'll use a special helper method
| | 03:39 |
that's part of the T4 world, write line.
Put some text in there, and then I'll
| | 03:47 |
call this method form up here in my other
portion of my T4 template.
| | 03:51 |
(SOUND).
I like this.
| | 04:04 |
That's the way I want to do it.
And rather than keep writing code live.
| | 04:10 |
I've already created this one here called
Make Function.
| | 04:12 |
So I'll open up Make Function.
You see that I have some static text in here.
| | 04:18 |
Then when I get to line 14, I'm getting
the system time.
| | 04:21 |
On line 16, I'm reading the environment's
machine name.
| | 04:25 |
Writing a for loop down here.
And in the for loop, I'm calling this
| | 04:29 |
method called print file names which I
define down here.
| | 04:32 |
Passing in the root folder of my hard
drive, and what that'll do is output a
| | 04:37 |
function do work put the date time the
computer name and a list of strings that
| | 04:46 |
contain these files are in the root
directory of my hard drive.
| | 04:49 |
Where this gets really awesome is where
you start working with things like
| | 04:52 |
database connections and you can open up
tables inside the database and read
| | 04:56 |
information out of them and then use that
to dynamically generate parts of your UI.
| | 05:00 |
Are parts of your business model.
That's what all around mapping tools do.
| | 05:04 |
They just use a system like this to go
out and do the same thing.
| | 05:08 |
I'll show you with one of my own classes.
This class is going to use DatabaseConnections.cs.
| | 05:11 |
It's going to make this call to
GetConnections(), which is going to
| | 05:14 |
connect to this Northwind database.
And return a connection.
| | 05:20 |
You need to bring another t4 template.
But, before I do that, I need to fix one
| | 05:25 |
small error in this live demo.tt I
noticed.
| | 05:30 |
When you create this class, it shouldn't
have these parentheses after it.
| | 05:34 |
That will cause a compiler error later if
I don't fix it.
| | 05:37 |
Now, I'm going to add a new t4 template.
Right click.
| | 05:41 |
Choose Add Existing Item, go out to my
Exercise Files folder, click on Assets,
| | 05:47 |
then open up the Files folder.
Make sure this filter down here is set to
| | 05:52 |
All Files, and then choose
ClassesFromDB.tt.
| | 05:58 |
In this code, because of some quirks, you
need to specify the location of the
| | 06:03 |
executable that contains this database
connection.cs file.
| | 06:07 |
This is going to be different depending
on where you put the files on your computer.
| | 06:12 |
So, the way I'm going to handle this is,
I'm going to right click on my project.
| | 06:16 |
And choose open folder in file explorer.
Go to my bin directory.
| | 06:21 |
Go to my debug folder.
And this is the executable that contains
| | 06:25 |
that database connection code.
Now, what I'm going to do is hold down
| | 06:27 |
the Shift key, and right click, and then
choose Copy as path.
| | 06:33 |
Then I'll switch back to Visual Studio,
and I'll modify this so it says the path
| | 06:39 |
to my executable.
Remove these double quotes here, and I'll
| | 06:43 |
also need to change it where this
connection string is.
| | 06:46 |
That looks good.
I'll save the application, oh, I see I
| | 06:59 |
have a typo.
I have this extra double quote in here I
| | 07:02 |
need to remove.
That looks good.
| | 07:05 |
Now I'll compile the application, and see
what I get.
| | 07:12 |
Excellent.
What did this do?
| | 07:14 |
It opened up a connection to the
database, looked at each table in the
| | 07:17 |
database, and created a class with the
name matching the table.
| | 07:20 |
Then it read through all of the columns
in the database.
| | 07:23 |
And created a property for each of those
items.
| | 07:26 |
Underneath the class.
This means that if I add a new table to
| | 07:29 |
the database and recompile my code, I'll
get the new class in here.
| | 07:33 |
If I change the datatype in the field in
the database, or change the name of the
| | 07:37 |
field, I'll get the results here.
Code generation done right can be a
| | 07:42 |
productivity boost for you and your
development team.
| | 07:44 |
The included T4 editor is a little
sparse, but you can always install the
| | 07:49 |
free visual studio extension from
Tangible for better syntax help.
| | 07:52 |
| | Collapse this transcript |
| Using Class View| 00:00 |
Classes and structures are the heart of
building an object oriented application.
| | 00:04 |
If you're looking at exist classes, you
can navigate through your class structure
| | 00:08 |
with the object browser or the class
view.
| | 00:10 |
For this demonstration, I'm going to use
this project called using class view.
| | 00:15 |
As a number of classes, book, employee,
person, realty rate and sale.
| | 00:21 |
It also has a class down here in the data
services section called data shuttle.
| | 00:26 |
going to open up this program.cs file.
And the first thing I want to show you is
| | 00:31 |
how to look up definitions like sale or
employee.
| | 00:34 |
There's a window, an underutilized
window, I think, called view code
| | 00:39 |
definition window.
Now when I select an item in my code
| | 00:44 |
window up here.
Let's say I choose this sale item.
| | 00:46 |
It'll then take me and show me the
structure in this bottom half of the window.
| | 00:50 |
In this demonstration I'm going to drag
it over and drop it on the right side of
| | 00:55 |
the screen to make it a little bit easier
to see.
| | 00:57 |
Now I want to click on Royalty Rate.
Takes me to that enumeration.
| | 01:01 |
When I clicked on one of the enumeration
values it takes me to that item and so on.
| | 01:06 |
So it's a quick way of finding out about
a class.
| | 01:09 |
Now how does this work for a class that
you didn't write?
| | 01:15 |
(SOUND) Then it opens up the special
listing window that Microsoft has for
| | 01:19 |
looking at the structure of this type.
Very nice.
| | 01:22 |
Let me drag this back where it use to be.
And then turn it off for the rest of the demo.
| | 01:28 |
The class view gives me another overview
of the classes that are inside my project.
| | 01:33 |
Usually the class view lives over here in
this solution explorer area.
| | 01:37 |
If you do not see it, you can enable it
by going to view, class view.
| | 01:43 |
Now, when I open up this top section,
I'll see there are 3 name spaces.
| | 01:46 |
Using class windows, using class windows
bookseller and using class windows data service.
| | 01:52 |
When I open each one of these, I can see
the classes that are inside those name spaces.
| | 01:58 |
I just realized that this class is
DataShuttle class doesn't belong here.
| | 02:02 |
It really belongs in the BookSeller name
space.
| | 02:05 |
So, I'm going to double click on it in
the class view, which will open it up in
| | 02:09 |
my editor.
I'll change the name space, up here, to BookSeller.
| | 02:17 |
And after a few seconds, you'll see the
classview update reflect those changes.
| | 02:21 |
Now, the data shuttle class is inside
this new name space.
| | 02:26 |
So, of course you can use this to
navigate through and look at items by
| | 02:29 |
double clicking on them.
We should point out, even though it's
| | 02:33 |
called the class view, I'm able to
navigate to this enum or this struct.
| | 02:38 |
There's also a search at the top of this
class view.
| | 02:41 |
I can search from one of my classes, like
the employee class.
| | 02:46 |
And I can also search for classes like
the console class.
| | 02:52 |
Now, of course, these do not exist inside
my project.
| | 02:56 |
So what happens is I add the class view.
Let me scroll this down so you can see it
| | 02:59 |
a little bit better.
Is it then it shows me the classes inside
| | 03:04 |
the Microsoft name spaces.
It shows there's something called
| | 03:07 |
system.console and some other items.
Also didnt point out that when you click
| | 03:11 |
on one of these items, you can also see
the members here, in this area.
| | 03:15 |
If you'd like to have a bigger area to
look at this information, you should
| | 03:17 |
probably look at the object browser.
The object browser is another way to look
| | 03:22 |
at classes and their members.
The differences between the object viewer
| | 03:25 |
and the class viewer is that the object
viewer defaults to providing you drill
| | 03:28 |
down to any object in any reference.net
assembly, not just the ones you've written.
| | 03:33 |
To open up the object viewer, go to the
View menu and choose this item, Object Browser.
| | 03:39 |
Again, I can use the search here to look
through this and find the class.
| | 03:42 |
I'll look for the console class.
Here it is, system.console.
| | 03:48 |
And when I select it, I can see that it
derives from object.
| | 03:51 |
And when I click on it, I can see all the
members over here.
| | 03:53 |
This is the same information that's
listed over here in the classU, it's just
| | 03:56 |
in a different format.
It's also got a help section on the
| | 04:00 |
bottom that shows you more information, a
summary of this class.
| | 04:04 |
Let's look for one more.
System.link.enumerable.
| | 04:11 |
So let's review if you want to look at
object and compiled assemblage use the
| | 04:14 |
object browser.
If you want to examine or modify the
| | 04:18 |
classes in your old code then use the
class view.
| | 04:20 |
| | Collapse this transcript |
| Using Class Diagram in the Class Designer| 00:00 |
In this demonstration we're going to look
at the class diagram tool.
| | 00:04 |
Here I am inside the using class diagram
project and I'm going to take this
| | 00:09 |
employee class and right click on it and
choose view class diagram.
| | 00:14 |
The Class Diagram Tool exist to make it
simple to diagram and model your classes,
| | 00:18 |
it provides a visual representation of
your classes and their relationships with
| | 00:22 |
other entities.
It also provides a way of modifying or
| | 00:25 |
adding new entities to your application.
You can think of it as a very light
| | 00:29 |
weight UML tool.
I can click on this Chevron here to learn
| | 00:33 |
more information about the employee
class.
| | 00:34 |
I see that it derives from the person
base class and has these properties.
| | 00:38 |
And now I can right click on this and
choose to show base class and it will
| | 00:43 |
figure out that there was a base class
called person.
| | 00:46 |
And that there's a relationship between
them.
| | 00:48 |
It's also drawing the relationship arrow,
showing that there's an inheritance
| | 00:51 |
relationship here.
As you can see I can also drag these
| | 00:54 |
around to different spots on the screen,
and the arrow moves accordingly.
| | 00:59 |
At the bottom of the screen you can
editor for changing these class details.
| | 01:02 |
Let's say I decided to change the name of
this hire date to hired date...
| | 01:07 |
I can put the D in here.
Press Enter.
| | 01:10 |
Notice that it changes up here in my
properties, and then I can go look at the
| | 01:15 |
class details, again down here at the
bottom, or I can go over to my employee
| | 01:19 |
class and see that it was modified over
here too.
| | 01:22 |
I'll show you another way to add a class
diagram.
| | 01:25 |
Right click, choose Add > New Item.
Search for the word diagram, then click Add.
| | 01:36 |
And this was completely blank, so how do
I add classes to this diagram?
| | 01:41 |
One way is to go over to your Solution
Explorer and drag them over to your
| | 01:45 |
designer surface.
I can also create new classes.
| | 01:54 |
I press the Delete key to remove those
items from the class diagram.
| | 02:00 |
Now it tells me how I can create new
items.
| | 02:02 |
Create new text by dragging items from
the toolbox.
| | 02:06 |
Let's look.
Excellent there is a class that created a
| | 02:15 |
class in the diagram.
It also added an item to my project
| | 02:18 |
called livedemo.cs and I can also drag
over enumerations.
| | 02:26 |
Interfaces and so on.
Once you have these classes, you can then
| | 02:32 |
go down here and add Methods, Properties,
Fields, Events, and more.
| | 02:42 |
And again, as I put them in here, you'll
see that they show up.
| | 02:45 |
I need to fix this typo.
They show up over here in this live demo class.
| | 02:50 |
There's my file date and there's my save
file method.
| | 02:55 |
Another way to add classes.
Let's remove all these.
| | 02:58 |
I'll select them with my mouse, and hit
the delete key.
| | 03:01 |
Now I'll go to my class view.
Here's another view of the classes.
| | 03:05 |
What happens if I pick up this name
space, and drag this over?
| | 03:08 |
Well, in that case, it takes all of the
members that are inside that name space,
| | 03:13 |
and adds them to this list.
This becomes handy when you're working
| | 03:16 |
with dot net classes.
Have you ever wondered to yourself the
| | 03:19 |
relationship between all the classes in
the Microsoft libraries?
| | 03:22 |
Here's how you can solve this problem.
Go back to solution explorer, I already
| | 03:26 |
have a diagram called SystemIOdiagram,
which I'll open.
| | 03:30 |
And I'll go to my class view and I'll
search for system.io.
| | 03:38 |
Here's the Name space.
It has a number of classes in it.
| | 03:41 |
What I'm going to do is I'm going to pick
up the Name space and drag it over to my
| | 03:44 |
diagram tool.
And now I can see every single class in
| | 03:48 |
that Name space and their relationships.
They're a little bit small, so let's zoom in.
| | 03:54 |
I'm zooming in by holding down the
Control key and using the scroll wheel on
| | 03:58 |
my mouse.
Then I'll slide over sideways and we can
| | 04:01 |
see the relationships between these
classes.
| | 04:04 |
So let's review if you want to look at
your classes in a visual designer or you
| | 04:08 |
want to edit them in a visual designer
use the class design tool.
| | 04:12 |
| | Collapse this transcript |
| Mastering the search tools| 00:00 |
There are many ways that search is built
into Visual Studio.
| | 00:03 |
In this demonstration, I've opened a
solution called MasteringTheSearchTools.
| | 00:07 |
It has a number of projects with lots of
files in each of these projects.
| | 00:12 |
I've got classes in these different
files.
| | 00:15 |
I've got a UI application, I've got a
SpaceCenterTour.txt file, and many more
| | 00:21 |
items in here.
The first thing I want to look at is the
| | 00:24 |
Search tool built in to the Solution
Explorer.
| | 00:26 |
Right here at the top of the Solution
Explorer is a Search box.
| | 00:29 |
I'm going to search for the word Log.
That found DailyLogs.cs.
| | 00:32 |
It found FileLogger.cs, found HttpLogger.
Make this a bit wider so it's easier to see.
| | 00:36 |
And more.
A LoggerBase class.
| | 00:37 |
When I click on one of these in the
Search window, it loads it into my Edit window.
| | 00:41 |
Let me Unpin this to get a little more
room.
| | 00:52 |
There is the LogString method, there's
the LogTextFile method, there's the
| | 00:56 |
FileLogger class, and so on.
So it's a quick and handy way of drilling
| | 01:00 |
down into my files to find information.
Let's look for main window.
| | 01:06 |
There it is.
I see it's inside two of these
| | 01:09 |
applications, MainShell and SalesApp.
Now, I'll look for cs.
| | 01:15 |
This is finding most of my CSharp files.
Next, I'll show you the Instant Search feature.
| | 01:21 |
To show that, I'm going to click on this
x button to clear the search in the
| | 01:26 |
Solution Explorer.
And then I'm going to open up MainShell
| | 01:30 |
and open this SpaceCenterTour.txt file.
Then I'll move my focus to the file and
| | 01:35 |
press Ctrl+F to open the Instant Search.
First, I'm going to look for the word of.
| | 01:42 |
Notice what happens when I type in of.
It highlights the word of in orange
| | 01:48 |
inside this document.
This works in any file.
| | 01:50 |
You can use a C# file, VB file, Text
files, HTML files.
| | 01:55 |
If you want to change the scope from just
searching this one document to searching
| | 01:58 |
multiple areas inside your application,
you can choose this scope drop-down.
| | 02:02 |
For instance, I could switch to the
Current project, and then, it would look
| | 02:05 |
through all the projects and highlight
any words in any of those files as necessary.
| | 02:09 |
I'm going to keep the scope at the
Current Document for this demo though.
| | 02:13 |
Next, I want to look for the word NASA.
Now I can click on this Find Next button
| | 02:20 |
to move through my document looking at
each one of those instances of that word.
| | 02:25 |
I'll scroll back to the top and I'll
search for the word the.
| | 02:28 |
In this case, the word the appears as a
separate word, but in some places, it
| | 02:33 |
also is occurring inside another word,
like the word other.
| | 02:36 |
So what I can do is click on this Match
whole word to limit it only to the word
| | 02:41 |
the and not any other instance.
I can look also for case-sensitive searches.
| | 02:48 |
I'll type in The and then I'll make it a
case-sensitive search, just like you'd expect.
| | 02:54 |
Let's turn both those off.
Remove this, and then go switch over to a
| | 02:59 |
reg ex or a Regular Expression search.
If you know how to do a reg ex
| | 03:04 |
expression, this will work for you.
I'll start by looking for some digits
| | 03:08 |
inside this, so numeric values, slash d.
If I only want to find three digits, I
| | 03:13 |
type in slash d3.
If I want to look for carriage returns
| | 03:19 |
and lines feeds, I can use this slash r
slash n.
| | 03:25 |
And then finally, you can do complex
searches.
| | 03:28 |
I'm going to look for letters be and then
put a set of square braces here, and
| | 03:34 |
then, I'll look for the letters n through
t.
| | 03:38 |
So that finds bet, ber, and so on.
For the next search engine I want to show
| | 03:46 |
you how you can search through your
commands.
| | 03:47 |
You know how there's thousands of items
in these different windows.
| | 03:51 |
These are implemented as commands inside
Visual Studio.
| | 03:53 |
And over here in this section of Visual
Studio, something called the Quick Search.
| | 03:57 |
So let's say that I know there's this
Full Screen mode that I want to use.
| | 04:00 |
I can click here in the Quick Search.
Type in Full Screen or just the word full.
| | 04:06 |
And it shows there's one match for this,
View Full Screen.
| | 04:09 |
When I click on this, it runs that
command.
| | 04:14 |
Let's try another one.
Let's try this Build, Rebuild Solution.
| | 04:18 |
(SOUND) There it is.
Click on this, and it runs that command.
| | 04:25 |
Another way of searching through all your
files in the system is to do a Ctrl+Shift+F.
| | 04:31 |
This is called the Find and Replace
dialog, and my current scope for this is
| | 04:35 |
Find in Files or Replace in Files.
I'm going to search for Log and then
| | 04:41 |
press Find All.
What this will do is give me a list on
| | 04:45 |
the bottom of the screen of all of the
files that contain the word Log.
| | 04:50 |
DailyLogs, FileLogger, so it's kind of
like the one I had earlier with the
| | 04:54 |
Solution Explorer, it's just a different
way of looking at that data.
| | 04:58 |
Next, I'll do that same keystroke and
look for the word Florida.
| | 05:01 |
And I can see it's inside these files, at
line 6, at line 11, at line 135, and line 160.
| | 05:10 |
And just like you'd expect, as I click on
these items, it takes me to that line of
| | 05:13 |
code in the file.
Search is everywhere.
| | 05:16 |
You can find the Search in the Reference
dialog.
| | 05:21 |
Up here for searching through your
Assemblies (SOUND).
| | 05:27 |
You can find it in the Class View for
searching for the Assemblies that are
| | 05:31 |
included in your project in the .NET
Assemblies.
| | 05:35 |
It's available in the Toolbox.
Switch to Solution Explorer, go down here
| | 05:41 |
to MainWindow.xml, also hide this Find
Results.
| | 05:46 |
I'll open up my Toolbox and Pin it to the
side and look for the button.
| | 05:51 |
There's two.
And it's also available in tools like
| | 05:55 |
Team Explorer.
The search giant Google was right.
| | 05:58 |
Search is the key to finding information
in a data-infused world.
| | 06:02 |
Tool makers are realizing that putting
Search into their applications is a great
| | 06:07 |
way to expose GUI to a user in a
different way.
| | 06:10 |
Take that lesson to heart.
I encourage you to find ways to add
| | 06:13 |
Search to your own application, and you
can start by looking at all the ways that
| | 06:17 |
Visual Studio makes search a prime part
of the application.
| | 06:19 |
| | Collapse this transcript |
|
|
7. Debugging and Troubleshooting CodeUsing breakpoints effectively| 00:00 |
Nobody wants to write code that contains
bug , but it's a fact of the programmers life.
| | 00:05 |
Visual Studio contains many excellent
debugging tools that I will show you in
| | 00:08 |
this chapter.
In this demonstration I'm going to use
| | 00:11 |
this project called UsingBreakpoints.
My first step is to show you the
| | 00:15 |
different settings you can configure for
debugging.
| | 00:18 |
Let's go to Tools options.
And then click on the Debugging section.
| | 00:25 |
Another way of getting here is to go to
Debug and then choose Options and Settings.
| | 00:33 |
In this first section, you can see many
different options ask before deleting breakpoints.
| | 00:38 |
Break all processes when one process
breaks, many other ones.
| | 00:41 |
Enable just my code.
Enable the exception assistance.
| | 00:45 |
I'm going to leave all these at the
defaults for the moment.
| | 00:49 |
In Edit and Continue, I want to make sure
that I enable Edit and Continue.
| | 00:54 |
What this means is that, when I stop at a
breakpoint, I can make changes to my code
| | 00:59 |
and then resume running the code without
having to restart the application.
| | 01:03 |
Just-In-Time debugging is a technique for
debugging a program that is started
| | 01:07 |
outside of Visual Studio.
If you have enabled Just-In-Time
| | 01:10 |
debugging, a crash will display a dialog
box that asks if you want to debug, which
| | 01:15 |
causes Visual Studio to open and load the
source code for that application.
| | 01:19 |
Naturally, this only makes sense for
developer machines.
| | 01:23 |
In the Output Window, you can determine
whether debug output is written to the
| | 01:28 |
Output Window.
So you can turn off the different settings.
| | 01:31 |
All debug output, Off or On.
You can choose whether to output
| | 01:38 |
Exception Messages, all sorts of
information, Thread Exit Messages.
| | 01:42 |
You can also debug problems with your WPF
Animation and Data Binding, and things
| | 01:47 |
like that.
Finally, if you want to, you can download
| | 01:51 |
Symbol files or PDB files from Microsoft
Symbol Servers by clicking on this
| | 01:55 |
checkbox and then specifying where to
cache information.
| | 02:00 |
I'm not going to do that for this
example.
| | 02:02 |
I'll unselect the Microsoft Symbol
Servers and then click OK.
| | 02:06 |
So, how do you put a breakpoint in your
code?
| | 02:07 |
Let's show you.
I'll go over to this MainWindow.xaml.
| | 02:09 |
I'll double-click on this button to look
at the code behind, and I'll put a
| | 02:17 |
breakpoint on this line here, string
result.
| | 02:20 |
To do that, I can go over to this gray
bar on the side of the window and click once.
| | 02:25 |
That tells me there's a breakpoint at
line 37.
| | 02:29 |
To turn off the breakpoint, I click a
second time on the red dot.
| | 02:33 |
I favor the keystroke way of doing this,
which is by pressing the F9 key on the keyboard.
| | 02:38 |
Now, let's run the application and see
what happens.
| | 02:41 |
I will make sure I'm running under a
debugger by pressing F5, that's important.
| | 02:49 |
When I click on the button, it hits my
breakpoint.
| | 02:53 |
You can tell you're at your breakpoint by
looking over here, and you'll see that
| | 02:56 |
there's a red dot, and superimposed over
the red dot is a yellow arrow.
| | 03:00 |
Also, my line of code is yellow.
I'll click on the Continue button, and
| | 03:06 |
this time, I'll click on the second
button.
| | 03:10 |
Currently, the second button is
displaying the word Martin .
| | 03:13 |
I want to put a breakpoint in here using
another technique, ctrl + k, ctrl + u to
| | 03:20 |
uncomment those lines of code.
I can use a class called the Debugger
| | 03:25 |
class, which is part of the classes that
Microsoft provides to check out the
| | 03:29 |
debugger situation.
What I'm doing here is verifying whether
| | 03:33 |
or not a debugger is currently attached
to the running process.
| | 03:37 |
If there is a debugger attached, then I
say System.Diagnostics.Debugger.Break.
| | 03:43 |
This causes it to break and stop at this
line of code.
| | 03:46 |
I'll press F5 to run the application.
Click on that button a second time.
| | 03:52 |
And you see that it hit my breakpoin,
even though there's no red dot over here
| | 03:55 |
on the margin bar.
Let me stop this and run this application
| | 04:00 |
from the hard drive.
I'll choose to Open Folder in File Explorer.
| | 04:04 |
I'm going to double-click on this EXE
file.
| | 04:09 |
And when I click on this button, it shows
the text.
| | 04:12 |
It's not breaking because I don't have a
debugger attached.
| | 04:16 |
So let me close this, return back to
Visual Studio, comment out this if
| | 04:22 |
statement, or delete it, like so.
And try running this again.
| | 04:27 |
I'll compile the application.
Switch over to File Explorer,
| | 04:31 |
double-click on this again.
This is the Just-In-Time debugger.
| | 04:36 |
I hit my breakpoint, it says, would you
like to debug this?
| | 04:39 |
This would also happen if something
crashed on the application.
| | 04:41 |
Now, if I click on Debug, it will ask me
what I want to load.
| | 04:45 |
I want to load this into a new instance
of Visual Studio and I'll click Yes.
| | 04:51 |
It launches Visual Studio and loads my
code and hits my debugger break.
| | 04:57 |
Now, you know a few ways to add a
breakpoint to your code.
| | 04:59 |
Check out the Stepping Through Your Code
video to see how to step through your
| | 05:03 |
code and rewind your code and repeat
actions.
| | 05:05 |
| | Collapse this transcript |
| Stepping through code in the debugger| 00:00 |
Once you have breakpoints in your code,
you need to step through the code.
| | 00:04 |
This movie shows how to effectively
navigate code while debugging.
| | 00:08 |
Before running this demonstration let's
verify that one of my editing continue
| | 00:11 |
settings is turned on.
I'll go to debug options and settings.
| | 00:15 |
Click on edit and continue and make sure
there's a check box here.
| | 00:20 |
Then click Okay.
Next, I want to show you the code.
| | 00:23 |
I have a main window that has a button.
When you click on the button it's
| | 00:28 |
going to run this code.
I have break point over here.
| | 00:30 |
And, as you're stepping through the code,
there's a call to this function called
| | 00:35 |
calculate monthly payment, which lives
over here in this financial class.
| | 00:39 |
So that's our basic code.
Let me put a break point here and run the
| | 00:43 |
application by choosing Debug > Start
Debugging.
| | 00:48 |
When I click on the button, it hits my
break point.
| | 00:51 |
You can tell you're hitting your break
point because there's a red dot over here
| | 00:54 |
and a yellow arrow.
Now I want to move one line of code.
| | 00:57 |
To do that I can click on this button
here, the step into button.
| | 01:02 |
I can also press the F11 key.
That runs one lien of code, then stops
| | 01:07 |
and waits.
If I want to go back and rewrite this
| | 01:10 |
line of code I can pick up the yellow
arrow with my mouse, drag it up here and
| | 01:16 |
do that same line of code again.
With Edit and Continue I can even do
| | 01:20 |
things like change this amount to 5.8...
Drag this back up there.
| | 01:27 |
And run it a third time.
This time I'll press F11 so this'll ask
| | 01:32 |
me to run a couple of lines of code.
Make some changes to my variables.
| | 01:36 |
Rerun those same lines of code and try to
find the bug in my code.
| | 01:41 |
Next I'm going to press this stepinto
button, this is a method call, so when I
| | 01:46 |
press stepinto, it will walk me into that
method.
| | 01:49 |
And now I'm running inside the second
method.
| | 01:52 |
And I can keep pressing F11 to step
through the code, hover over this to find
| | 01:57 |
the results.
Return the results And now I step back
| | 02:03 |
into the original caller.
There are several other buttons up here.
| | 02:07 |
There's a stop debugging.
There's a restart which will recompile
| | 02:12 |
the application and start fresh.
There's also.
| | 02:15 |
A show the next statement.
This is useful if you've wondered around
| | 02:19 |
inside your files and you don't remember
where you are at the break point.
| | 02:23 |
You'll look up here and see that I am at
a break point but you don't remember
| | 02:26 |
where it is.
You can click on show next statement,
| | 02:30 |
gets you back to where ever the yellow
marker is.
| | 02:32 |
And then you've got these three buttons:
step into, step over and step out.
| | 02:38 |
So let's talk about step over.
I'm ready to run this line of code line 41.
| | 02:43 |
And remember the last time I called
calculate monthly payment I had to step
| | 02:46 |
through five or six lines of code over in
that function.
| | 02:50 |
I can skip all those steps and run this
line of code as if it was a single line
| | 02:54 |
of code.
By clicking on step over.
| | 02:58 |
If you already tested this code and you
don't want to look at it again, then you
| | 03:01 |
can skip over that method call.
The step out is useful when you've
| | 03:05 |
stepped into a method so I'll press F11
to step into the calculate monthly payment.
| | 03:10 |
And I run one or two lines of code in
here, maybe rewind it and try some
| | 03:15 |
things, and then when I'm done and I
don't want to step individually through
| | 03:19 |
any more lines of code in this method, I
can click on Step Out.
| | 03:23 |
That returns me back to the calling
method.
| | 03:25 |
So now you know how to move to any point
in your code, rewind your code, step over
| | 03:30 |
code and use some of the buttons on the
Debug toolbar.
| | 03:34 |
| | Collapse this transcript |
| Debugging exceptions| 00:00 |
Debugging code and dealing with
exceptions are two similar tasks.
| | 00:04 |
In many cases it is an unhandled error in
our code that leads us to a debugging session.
| | 00:09 |
This is a solution called debugging
exceptions that contains three different projects.
| | 00:14 |
An ASP.NET project, a console project,
and a WPF project.
| | 00:19 |
This exceptions in WPF project is my
start up project.
| | 00:22 |
Right click and choose Set a Start Up to
make it the same on your computer.
| | 00:26 |
If you look at my code in this
mainwindow.xml, when you click on this
| | 00:31 |
Exception and Array button, what my code
is doing is creating an array, adding one
| | 00:36 |
item to it, and then attempting to access
an item in the array with an ordinal
| | 00:42 |
number that is bigger than the items that
I have on the arrays, this will cause an
| | 00:46 |
exception on line 44.
And before I run this application, lets
| | 00:50 |
review one setting.
Debug > Options and Settings, just in time.
| | 00:55 |
I've got just in time debugging enabled
and to refresh your memory on what that
| | 01:00 |
does that means that if I'm running an
application.
| | 01:03 |
From the command line let's say and an
exception happens.
| | 01:06 |
I'll be given an opportunity to open the
application in Visual Studio and debug it.
| | 01:11 |
Click on Cancel, and then I'll run this
application without attaching a debugger.
| | 01:18 |
When I click on this button, you see the
debugging exceptions dialog pop up and it
| | 01:23 |
says this application has stopped working
and what do you want to do?
| | 01:26 |
Do you want to debug it or close the
program?
| | 01:28 |
Now on the end users computer they're
going to see just the close program prompt.
| | 01:33 |
So close the program the application
quits running.
| | 01:37 |
Same thing happens in other types of
applications, let's go to this asp.net
| | 01:41 |
application, make it our start up.
Run the application without attaching a debugger.
| | 01:49 |
Click on this exceptions in array button
which does the same code as you saw in
| | 01:52 |
the wpf application and this is how the
asp.net Application handles the untrapped error.
| | 01:58 |
It shows a error page.
This says index was out of the bounds of
| | 02:03 |
the array.
Now, it doesn't crash the browser.
| | 02:05 |
It doesn't crash the server.
Instead, it just shows an error page to
| | 02:08 |
the user.
User could click on back, and try it again.
| | 02:12 |
For the third example, we'll look at a
console operation.
| | 02:17 |
I'll make this my startup.
Has the same code in the static board main.
| | 02:26 |
This time I'm going to press the control
key in F5, that's how you run an
| | 02:30 |
application without attaching the
debugger and you see that it is in stop working.
| | 02:36 |
And you can see a couple things in the
console I can see the unhailed exception
| | 02:40 |
information and then I get an opportunity
to close the program.
| | 02:44 |
Now what happens if you're running this
application with a debugger attached.
| | 02:53 |
Visual Studio gives you an opportunity to
examine this unhandled exception.
| | 02:58 |
This is the unhandled exception dialog in
Visual Studio, and it has some
| | 03:02 |
interesting things.
Notice this black line is pointing at the
| | 03:05 |
exception, the line of code that caused
the exception.
| | 03:07 |
It's giving me the information up here.
Index was outside the bounds of the array.
| | 03:12 |
It has some troubleshooting tips with
hyperlinks if I want to click on one of
| | 03:16 |
these to find out more information from
the MSDN help.
| | 03:19 |
I can view the detail about this
exception by clicking here, and then
| | 03:23 |
opening this exception snapshot to learn
more about it.
| | 03:27 |
Sometimes it's interesting to go in here,
there are occasions where you get nested
| | 03:31 |
exceptions and you can open this
inter-exception to learn more details
| | 03:35 |
about what's going wrong.
And I get information about the source
| | 03:38 |
and the stack trace and lots of other
details.
| | 03:42 |
Now I am sitting at what looks like a
break point, so I can also drag this
| | 03:46 |
yellow arrow back up and retry running
the code.
| | 03:49 |
I'll press F11 to step through my code
and possibly troubleshoot the exception
| | 03:54 |
while I'm running.
Now, this same kind of behavior works for
| | 03:58 |
ASP.net and NWPF.
Let me show you.
| | 04:01 |
I'll go back to my ASP.net application
and start with a debugger attached.
| | 04:11 |
Switches me back to Visual Studio with
the same dialogue.
| | 04:14 |
This time, I'm going to click on the Stop
Debugging, and I'll do the same thing for
| | 04:18 |
the WPF app down here.
I'll make that my startup.
| | 04:28 |
Now you know the way to get detailed
information about the exception while
| | 04:31 |
running the application in Visual Studio.
And it also gives you an opportunity to
| | 04:35 |
debug the application at the same time.
| | 04:37 |
| | Collapse this transcript |
| Using data tips and data visualizers| 00:00 |
When you are debugging, you need to see
the information stored in variables and
| | 00:04 |
other objects in your code.
DataTips and Data Visualizers are
| | 00:08 |
provided by Visual Studio to show you
this information.
| | 00:12 |
For this demonstration, I am using the
solution DataTipsAndDataVisualizers.
| | 00:16 |
I will start in
DataTipsAndDataVisualizers project, make
| | 00:20 |
that my start project.
And then we'll go look at the code inside
| | 00:24 |
this MainWindow.xaml.
We'll start by looking at the code inside
| | 00:28 |
this button.
I'll debug my application and then click
| | 00:32 |
on this DataTips button.
A DataTip is just a ToolTip that floats
| | 00:36 |
over top of the variable when you hover
your mouse over it.
| | 00:40 |
I'm going to press F11 to step through
several lines of code, and then I'll
| | 00:44 |
hover my mouse over each one of these
variables to see the current value.
| | 00:50 |
When you load it with a more complex
type, like this birth date, you can hover
| | 00:55 |
your mouse over the item.
And then when you hover over this plus
| | 00:58 |
symbol or click the plus symbol, you can
get details about that type.
| | 01:03 |
This also works with items like an Array.
Currently, I have an Array with 15 items.
| | 01:08 |
If I hover over this plus symbol, I can
see the items in the list.
| | 01:12 |
As I step through this for loop by
pressing F11, I'm adding a current date
| | 01:17 |
timestamp to that Array.
Now, when I hover over this for the Data
| | 01:23 |
Tip, you'll notice that the first two
items have a new timestamp.
| | 01:27 |
I can also drill down into the individual
items by hovering over the plus symbol.
| | 01:33 |
I want to move down to this section of
the code now, so here's a tool you can
| | 01:37 |
use in Visual Studio.
Right-click on this line, and choose Run
| | 01:42 |
To Cursor.
This means I don't have to keep pressing
| | 01:44 |
the F11 key.
Now, I'm ready to run line 49.
| | 01:49 |
I'll press F11 and then hover over list.
A couple more things you can do with
| | 01:55 |
DataTips, one of the things you can do is
right-click on the DataTip, and do things
| | 02:02 |
like Copy the Value.
Now, I'll open up the Notepad and paste
| | 02:07 |
in the value.
Another thing you can do is right-click
| | 02:14 |
and choose Add Watch.
I'll talk more about Watch windows later,
| | 02:18 |
but you can see there's a watch down here
in this section.
| | 02:20 |
Another interesting thing you can do is
pin the DataTip, click here to pin the DataTip.
| | 02:27 |
Now, this DataTip can be moved anywhere
inside your code window, and it's
| | 02:32 |
monitoring the list.
So as I press F11 and step through the
| | 02:38 |
list, you'll see I now have four items in
here and I can inspect the list with this
| | 02:42 |
pinned DataTip.
Let me stop debugging.
| | 02:45 |
Press F5 to start debugging again.
Move down here and you see that my
| | 02:52 |
DataTip is still here.
And I'll choose Run To Cursor.
| | 02:55 |
And that DataTip will stay there until
you click on the x button.
| | 03:00 |
If you want to look at data with a little
more complex structure, then you can use
| | 03:05 |
a Visualizer.
I have four demonstrations for
| | 03:08 |
visualizers here.
A visualizer is essentially a floating
| | 03:11 |
window that knows how to load a complex
piece of data, for example an XML file.
| | 03:16 |
There are Text, HTML and XML Visualizers,
all of which work on String objects.
| | 03:22 |
There is a WPF Tree Visualize for
displaying the properties of the WPF
| | 03:26 |
Object Tree and the DataSet Visualizer
which works for DataSets, DataView, and
| | 03:32 |
DataTable objects.
I'll show you a few of these.
| | 03:35 |
Click on this first button.
Step through my code by pressing F11.
| | 03:40 |
I'm going to load an XML file with this
line of code here.
| | 03:43 |
When I hover over this, the DataTip is
showing me the XML file, but it's showing
| | 03:48 |
me on a single line and it's not very
viewable this way.
| | 03:51 |
I can't really scroll to the end of this
list.
| | 03:55 |
I click on this magnifying glass, I can
then choose a different visualizer, the
| | 04:00 |
XML Visualizer.
Now you see I get a floating window with
| | 04:05 |
an XML Visualizer.
Next, I'll show you the Text Visualizer.
| | 04:12 |
Here, I'm loading the contents of a TXT
file.
| | 04:15 |
Again, when I hover over it, it's not
very readable, so I'll click on the
| | 04:18 |
magnifying glass and choose the Text
Visualizer.
| | 04:20 |
Now I can read the Text file without
having to open it in Notepad.
| | 04:25 |
I'll press F5 to continue.
Next, we'll choose the HTML Visualizer.
| | 04:33 |
Same steps, load the HTML page.
Click on HTML Visualizer.
| | 04:40 |
And here, you can see my bold header and
my hyperlinks are now working.
| | 04:46 |
For my last demonstration, the WPF
Visualizer.
| | 04:49 |
I'm going to stop running this
application and make this ExploreCA
| | 04:54 |
project my startup.
Now I've run the application by pressing F5.
| | 05:01 |
I'm going to click on the Entry button,
step down here to this line of code by
| | 05:05 |
pressing F11.
Now, when I get my DataTip, I'll choose
| | 05:09 |
the magnifying glass and the WPF Tree
Visualizer .
| | 05:15 |
Maximize this window.
The way this works is it shows the
| | 05:18 |
current item in my visual tree, this
Details button.
| | 05:21 |
Then in the bottom half of the screen,
it's showing the rendering of that
| | 05:24 |
button, and then, over on the right side
of the screen are all the properties for
| | 05:28 |
that button.
For instance, here's the BitmapEffect or
| | 05:31 |
the Content property.
Let's see what happens as I drill through
| | 05:36 |
these items in the visual tree.
This is what the entire URL looks like.
| | 05:40 |
And I'm going to open this Stack panel
and click on each one of these individual
| | 05:44 |
Text Blocks.
So I can drill down and see each
| | 05:47 |
TextBlock, look at it here.
See how it relates to the rest of the
| | 05:51 |
object in the run-time Visual Tree and
read all the information in the Property window.
| | 05:56 |
So as you've seen, Visualizers and Data
Tooltips give you an enormous amount of
| | 06:00 |
information while you're debugging your
application.
| | 06:02 |
| | Collapse this transcript |
| Beyond the basic breakpoint| 00:00 |
Now that you are comfortable with
breakpoints, it's time to kick it up a notch.
| | 00:04 |
I'm going to use this
BeyondBasicBreakpoint application to show
| | 00:07 |
you how to do hit counts in breakpoints
and how to do conditional breakpoints.
| | 00:11 |
Let me start by running the application.
I'll press F5 to run the application.
| | 00:16 |
This first demonstration, I select a
color and then click on the button.
| | 00:20 |
That changes the color of the ellipse.
In this second button, I click on the
| | 00:27 |
HitCount Breakpoint button, and that
fills a text block with a list of characters.
| | 00:33 |
Now, let's add a breakpoint.
I'll shut down the application and switch
| | 00:36 |
over to MainWindow.xaml, and then I'll
double-click on this Conditional
| | 00:41 |
Breakpoint button.
What this code does is get the selected
| | 00:46 |
item in the list box, cast it to a
ColorSample.
| | 00:50 |
Now, a ColorSample is a class that I
wrote that has a ColorName and a ColorBrush.
| | 00:58 |
I get the item and then I take the
ColorBrush and I assign it to the
| | 01:03 |
ellipse.Fill property.
What I want to do is break on this line
| | 01:06 |
of code.
If I put a normal breakpoint in here and
| | 01:09 |
run the application, every time I select
a color and click on the button, it hits
| | 01:14 |
my breakpoint.
In other words, it's not conditional.
| | 01:17 |
It runs no matter which one of these
colors is selected.
| | 01:20 |
Now, that can get tedious when you're
debugging.
| | 01:23 |
You may have a bug report that says the
problem only occurs with certain
| | 01:26 |
conditional data, so let's make a
Conditional Breakpoint.
| | 01:29 |
I'm going to right-click on the red dot
and choose Condition.
| | 01:33 |
In this dialog, I choose whether or not I
want to have a Conditional Breakpoint.
| | 01:38 |
And if I do, I type in the condition that
I want to evaluate in this textbooks.
| | 01:51 |
In my case, it's going to be
currentColor.ColorName=="Orange".
| | 01:55 |
When that condition is true, I want a
break.
| | 01:57 |
I'll click OK, run the application,
choose a blue brush, nothing happens.
| | 02:04 |
Choose the yellow brush, nothing happens,
but when I choose the orange brush, now,
| | 02:10 |
I hit my breakpoint.
I can also modify this breakpoint to say
| | 02:16 |
when it's changed.
Now I'm hitting it when it's yellow, I'm
| | 02:29 |
not hitting it until I go to orange.
And now it's changed to orange, so it's
| | 02:34 |
when it's changing either to the orange
value or from the orange value that I hit
| | 02:38 |
my breakpoint.
For the next demonstration, I'll add a
| | 02:47 |
HitCount Breakpoint to this button.
Double-click on the button.
| | 02:51 |
Put a breakpoint here on line 55.
Again, I'll go add a breakpoint, then
| | 02:57 |
right-click on it, choose Hit Count.
And then, I'll say break when the hit
| | 03:03 |
count is a multiple of 12, and then click
OK.
| | 03:09 |
Notice that you can tell whether it's a
hit count or a conditional.
| | 03:13 |
Because the breakpoint now has a plus
symbol in the center.
| | 03:16 |
I'll press F5 to run the application with
a debugger attached.
| | 03:19 |
I'll click on this.
It hits my breakpoint.
| | 03:22 |
If I look at my counter, you'll see that
the current counter is 12.
| | 03:27 |
Now, I'll press F5 to run the
application.
| | 03:29 |
And now, when I hover over this I'll see
the hit counter is 24.
| | 03:32 |
Let's review.
At first glance, a breakpoint seems
| | 03:35 |
simple, just a way to stop a running out
to inspect the code.
| | 03:39 |
But it's more sophisticated than that.
Using the hit count or conditional
| | 03:43 |
settings can really save time during our
debugging session.
| | 03:45 |
| | Collapse this transcript |
| Using the Watch windows| 00:00 |
In this video, I want to look at the
WatchWindows in Visual Studio.
| | 00:03 |
To do that, I'm going to use this
project, UsingTheWatchWindows.
| | 00:07 |
Let's start by looking at the UI in
MainWindow.xaml.
| | 00:11 |
This contains two buttons, which I'll use
for debugging the application and also
| | 00:15 |
contains a calendar control.
Keep that in mind for later.
| | 00:19 |
I'll run the application by pressing F5
to attach a debugger, and then I'll click
| | 00:24 |
on this first button, Watch Windows.
We'll step through the code and get to
| | 00:29 |
this line of code here where I've
declared the variable markupPercent.
| | 00:33 |
Now, one way you can add a watch is by
clicking on the item and choosing this QuickWatch.
| | 00:39 |
QuickWatch is a modal dialog that pops up
and shows me the values of this greeting variable.
| | 00:45 |
Now, the problem with this, it's an older
technology and you can't switch back to
| | 00:49 |
your code unless you close this window.
So Microsoft added to Visual Studio the DataTip.
| | 00:56 |
Now, I talked about the DataTip in
earlier videos.
| | 00:58 |
That's where you can hover over a
variable and see the value that's stored
| | 01:03 |
in there.
What I want to talk about instead is
| | 01:05 |
these Watch windows down here.
By adding a Watch window, I can keep an
| | 01:09 |
eye on the variable without having to
hover over the item all the time.
| | 01:14 |
There's several ways to do that.
One is that I could right click and
| | 01:17 |
choose Add Watch.
Another way is to grab the variable with
| | 01:22 |
my mouse, and drag it down here, and drop
it in the Watch window.
| | 01:25 |
We had this one here, too.
As you can see, I can watch the data
| | 01:31 |
without having to hover over it.
If it's a complex object like the Book, I
| | 01:35 |
can click on the plus sign to open it up
and read more about it.
| | 01:38 |
I can also change values.
I notice that the greeting string is
| | 01:42 |
wrong, so I'm going to click here,
double-click on it, and then change this value.
| | 01:46 |
Now, if I hover over the greeting here in
the DataTip, you'll see that it's
| | 01:51 |
correctly matching what I entered in the
Watch window.
| | 01:54 |
Next, I'm going to step into this line of
code, and I want you to see what happens
| | 01:58 |
on markupPercent, and what happens to the
greeting line.
| | 02:03 |
Press F11 to step one line of code.
Hello turns to black and 2.5 turns to red.
| | 02:09 |
That's how the Watch windows tells you
what the most recent change is in the
| | 02:13 |
Watch window.
So I can quickly see which item changed
| | 02:16 |
when I move to a line of code.
You're not stuck with just items in your code.
| | 02:20 |
Remember that Calendar Control that's
part of my window?
| | 02:23 |
I can come down here and type in this
which represents the current window,
| | 02:27 |
.MainCalendar and then hit Enter.
Now I've added that Calendar Control and
| | 02:33 |
I can investigate properties on the
Calendar Control.
| | 02:36 |
I can also work with .NET classes, like
the System.IO.Directory class.
| | 02:41 |
I can bring that down here.
And then I can call methods on that class.
| | 02:47 |
I could call the CreateDirectory class
here if I wanted to or read information
| | 02:51 |
like find out if a file Exists.
To remove an item from the Watch list,
| | 02:57 |
you could just hit the Delete key.
If you want to clear out the entire Watch
| | 03:00 |
Window, right-click and choose Clear All.
I'll press F5 to continue running the application.
| | 03:06 |
And then I'll click on this Add more
Watch Windows.
| | 03:09 |
You can have up to four Watch windows on
the bottom of your screen.
| | 03:13 |
You get the extra watch windows by going
to Debug > Windows, and then choosing Watch.
| | 03:21 |
I'll add a second Watch window.
And then I'll drag this book variable
| | 03:25 |
down there.
Step through my code.
| | 03:29 |
Get to this point.
I haven't instantiated the book, yet.
| | 03:32 |
Next, I'm going to talk about another
class that I have, called the BookStore class.
| | 03:37 |
This is a class that I wrote that's got a
static method called GetTopSeller and has
| | 03:42 |
a method called UpdateBookPrice.
What I want to show you is that you can
| | 03:45 |
call these methods from the Watch window.
So switch back to MainWindow.cs.
| | 03:49 |
And then I'll come down here, and I'll
type in BookSeller.
| | 03:50 |
I'm going to use the keystroke from
Visual Studio called ctrl + spacebar to
| | 03:51 |
finish typing that.
And then I'm going to call my
| | 03:53 |
GetTopSeller, open and close parens.
And that returns a book, so I can click
| | 04:09 |
on this to see the results of that book
that was returned from that method.
| | 04:13 |
Next, I'm going to try to call another
method on this BookStore class.
| | 04:18 |
This time I did Ctrl+Spacebar and I
didn't have a unique match, so I have to
| | 04:21 |
choose from this list, .UpdateBookPrice.
And I'm going to pass in my Book, and I
| | 04:28 |
have an instant sub in my code and the
new price percentage increase, 1.02 decimal.
| | 04:36 |
And I'll press the Enter key and I got an
exception.
| | 04:40 |
I don't know if you can see that, but it
says it threw an exception.
| | 04:44 |
The reason it threw an exception is
because book is currently null.
| | 04:47 |
So let me step through this long line of
code.
| | 04:50 |
And then, what I want to do is rerun that
method.
| | 04:53 |
The way you can do that is by clicking on
the circular arrows here.
| | 04:57 |
This will reevaluate the expression.
So I click here.
| | 05:00 |
And it says, okay, successfully ran that
and updated it.
| | 05:04 |
I can also do the same with this one.
If I want to get the new top seller, I
| | 05:08 |
can click here to refresh that method.
Watch Windows are yet another way to
| | 05:12 |
monitor data during a debugging session.
| | 05:14 |
| | Collapse this transcript |
| Using Locals and Auto windows| 00:00 |
For this video, I'm using a project
called LocalsAndAutosWindows.
| | 00:04 |
These windows are usually shown in every
debugging session across the bottom of
| | 00:08 |
your screen.
Let's take a look.
| | 00:10 |
I'll click on this Autos Window, and
then, I'll show you across the bottom of
| | 00:16 |
the screen, I currently have four windows
down here, Autos, Locals, and two Watch windows.
| | 00:22 |
If you do not see these windows on your
copy of Visual Studio, you can enable
| | 00:27 |
them by going to the Debug menu and
choosing the Windows menu.
| | 00:31 |
Then, select the Locals menu item to
enable the Locals window.
| | 00:37 |
The Autos menu item to enable the Autos
window.
| | 00:42 |
And in the Watch menu section, you can
enable up to four Watch windows.
| | 00:46 |
I currently have watch one and watch two
enabled.
| | 00:51 |
The Autos windows displays variables used
in the current statement and the line
| | 00:57 |
above it.
If you are in a C# application, that is.
| | 00:59 |
If you're in a Visual Basic application,
then it shows you the line of code and
| | 01:04 |
three lines above and three lines below
that line of code.
| | 01:07 |
So as I step through my code by pressing
F11.
| | 01:11 |
You keep your eye on that Autos window at
the bottom.
| | 01:13 |
You'll see that currently I've got
greeting and this.
| | 01:16 |
This represents the current window.
If I move one more line of code, you'll
| | 01:21 |
see I now have the book added, and
greeting has moved down one section.
| | 01:26 |
As I step further into my code, now the
greeting string disappears and the x
| | 01:33 |
variable shows up, and the book is left
over.
| | 01:35 |
So what's its doing is monitoring your
current debug location and giving
| | 01:38 |
information about that in the line above
it.
| | 01:40 |
If I move this yellow cursor up, you'll
see it changes back to showing the greeting.
| | 01:45 |
Now as I step through this code, I'm
going to get to a section where I call
| | 01:49 |
another function.
So when I step into this other function,
| | 01:53 |
now I'm looking at Auto variables for
this function.
| | 01:56 |
When I return back to the original
function, you see that it shows x again.
| | 02:00 |
That's because x is above the current
line.
| | 02:04 |
The Locals window is very similar.
The difference is it doesn't check above
| | 02:09 |
or below, it gives you the state of all
the Local variables, any variable that is
| | 02:13 |
declared within this function.
And it also gives you the state of any
| | 02:17 |
parameters that are passed into the
function.
| | 02:20 |
So you can see, look at the Locals
window, I've got this which represents
| | 02:25 |
the current window, the sender, which is
this first parameter.
| | 02:29 |
e, which is the second parameter, and
then I've got all of these variables
| | 02:34 |
today, bankBalance, Book.
They're all listed here.
| | 02:40 |
Now, when I come into this function down
here, and I call that AnotherFunction,
| | 02:44 |
you'll see that the Locals window changes
to reflect the Local variables inside
| | 02:48 |
this method.
The Autos window and the Locals window
| | 02:51 |
are very easy to understand and they're
automatic.
| | 02:54 |
I use them every day when I'm debugging.
| | 02:56 |
| | Collapse this transcript |
| Walking the Call Stack| 00:00 |
By using the call stack window, you can
view the method calls that are currently
| | 00:04 |
on the stack.
To demonstrate this, I'll use the
| | 00:07 |
solution of walking the call stack.
This has two projects.
| | 00:11 |
A Visual Basic project called BankLive
that has a class with a couple of methods
| | 00:16 |
that I'm going to call.
Get bank rate from system and get loan fee.
| | 00:20 |
I'm going to call those methods from my C
Sharp application, which is a WPF application.
| | 00:26 |
There's also some helper classes in here,
the loan class and the financial class.
| | 00:31 |
I will start the application by pressing
F5 to attach a debugger, and then
| | 00:36 |
clicking on the Show Call Stack button.
If you are using the default settings in
| | 00:40 |
Visual Studio, the Call Stack will show
up when you are at a break point.
| | 00:44 |
On my machine you can see it down here on
the bottom of my screen.
| | 00:48 |
If its not visible on your computer you
can add it by going to debug windows call stack.
| | 00:56 |
By default the call stack shows one
column.
| | 01:00 |
Tear this off and make it a little bit
bigger, so we can see what's going on.
| | 01:03 |
One column that gives you information
about the current location of the thread
| | 01:08 |
that's running this code, and the
language that this application was
| | 01:11 |
written in.
There's a lot of information in this
| | 01:14 |
first column.
I don't want to see all of this
| | 01:16 |
information sometimes.
So I can turn off some portions of this
| | 01:19 |
by right clicking.
And choosing what I want to see in that
| | 01:23 |
first column.
I don't want to see the module name, I'm
| | 01:27 |
not interested in the parameter types at
the moment, and I'm not interested in the
| | 01:31 |
byte offset either.
So I'll turn that one off.
| | 01:34 |
But I do want to know the line number,
and I do want to know the name of the
| | 01:37 |
method that I'm calling.
In this case I am starting in the call
| | 01:40 |
stack button underscore click procedure.
You can see that back here.
| | 01:44 |
Now I'm going to put this window back on
the bottom.
| | 01:46 |
I'll do that by holding on the Control
key and double clicking on the Title Bar.
| | 01:52 |
And then I'll make it a little bit wider,
and then continue.
| | 01:55 |
Next, I'm going to press the F11 key to
step through my code and watch what
| | 02:00 |
happens when I step into the Create Loan
Method.
| | 02:04 |
The call stack shows that we are two
levels deep inside the call stack.
| | 02:08 |
This method called
bank.financial.createloan.
| | 02:11 |
And we're currently at line 14 inside
that application.
| | 02:15 |
And that was also written in C Sharp.
Now, I'm inside the bank loan class.
| | 02:23 |
And as I step through this code, you see
that I've moved into the basic module.
| | 02:27 |
Now at this point, I'm four levels deep
inside the call stack.
| | 02:32 |
One of the things you can do with the
call stack window is double click on each
| | 02:35 |
of these rows, to take a look at the code
that was the entry point into.
| | 02:41 |
The method with the yellow line.
Visual Studio shows you this line with a
| | 02:46 |
arrow on the margin and a green
highlight.
| | 02:49 |
So let me step up to this top level.
Step all the way back to here.
| | 02:53 |
Then I'll return back to the bank line.
I'll press F11 one more time, and you'll
| | 02:59 |
see we are starting to move back up the
call stack.
| | 03:02 |
So let's review what we've seen, the call
stack window is a debugging window in
| | 03:05 |
Visual Studio that allows the call stack
to be examined while a program is debug mode.
| | 03:10 |
While you are in the call stack window
you can view any previous call in the stack.
| | 03:14 |
| | Collapse this transcript |
| Effective use of the Immediate window| 00:00 |
The Immediate window is another debugging
window in Visual Studio.
| | 00:03 |
It can be used at design time or debug
time to evaluate expression, execute
| | 00:07 |
statements, print variable values, and so
forth.
| | 00:11 |
To demonstrate this, I've opened the
UsingImmediateWindow project.
| | 00:16 |
Let me show you the default position of
the Immediate window.
| | 00:18 |
Press F5 to run my application with the
debugger attached, and then, I'll click
| | 00:22 |
on this Immediate Window button.
That causes a breakpoint to be hit in my code.
| | 00:27 |
Look at the lower section of my window.
There is the Immediate Window.
| | 00:31 |
This is the default location.
If you do not see this, you can add it to
| | 00:34 |
your Visual Studio IDE by going to the
Debug menu, choosing Windows, and then
| | 00:38 |
selecting Immediate.
Now, the Immediate Window can be used to
| | 00:43 |
query any item or run any arbitrary code.
Since I'm sitting at this breakpoint and
| | 00:47 |
I'm inside my Windows, one of the things
I could do is query that button that's on
| | 00:50 |
my interface.
So I could say this.ImmediateWindow.Width
| | 00:55 |
and print out the result.
So 156 pixels.
| | 00:58 |
I can make arbitrary calls to any method.
I'll show you that in just a second.
| | 01:04 |
I'm going to shut this down and show you
how you can use the Immediate Window in design-time.
| | 01:13 |
To add an Immediate Window, I'll choose
Debug > Windows > Immediate.
| | 01:17 |
Now I have a design-time version of the
Immediate Window.
| | 01:21 |
You can see the code I ran a few minutes
ago.
| | 01:24 |
I'll show you how I use the Immediate
Window on some projects.
| | 01:28 |
I'm going to open this Financial.cs file.
And I''m going to look at this GetCurrentLoanRate.
| | 01:35 |
How do you invoke a method in your
application so that you can debug it?
| | 01:38 |
Well, one of the ways I do this is by
creating a unit test or writing a test
| | 01:41 |
harness page.
I'll run this in the Immediate Window by
| | 01:47 |
typing in my class,
Bank.Financial.GetCurrentLoanRte and
| | 01:50 |
pressing the Enter key.
Now I see the results in the Immediate Window.
| | 01:54 |
To rerun that line of code, I press the
Up arrow.
| | 01:58 |
I can keep pressing the Up arrow to look
at the other items I've run in this window.
| | 02:04 |
And I can clear the items by
right-clicking and choosing Clear All.
| | 02:09 |
I'll put a breakpoint on line 14 by
pressing F9.
| | 02:13 |
And then I'll come down here and run that
Financial call again.
| | 02:17 |
When I press the Enter key, Visual Studio
starts up a debugging session, an ad-hoc
| | 02:21 |
debugging session, and runs my code and
then lets me stop and look at this code.
| | 02:26 |
At this point, I can use a normal
procedures in debugging.
| | 02:29 |
I can press F11 to step through a line of
code.
| | 02:32 |
I'm going to look at the call to this
GetBankRateFromSystem, and so on.
| | 02:37 |
I can rewind back to that previous line
by dragging the yellow cursor up.
| | 02:41 |
I can also, while I'm sitting at this one
breakpoint, I can test other portions of
| | 02:44 |
my application.
For instance, I can go to this Online
| | 02:48 |
Services and put a breakpoint here in
this GetBankRateFromSystem.
| | 02:53 |
I'll put a breakpoint here by pressing
F9.
| | 02:56 |
Switch back to this Window by pressing
Control+Tab.
| | 03:00 |
Now, I'll go to my debugged version of
the Immediate Window, and type in Bank.OnlineServices.
| | 03:07 |
Do you see I'm getting IntelliSnese now
that I'm at a brea point?
| | 03:10 |
(SOUND) And I'll make this call.
Now, remember what I'm doing.
| | 03:13 |
I'm sitting at one breakpoint.
I'm going to run this code in the
| | 03:17 |
Immediate window.
And that will take my over to my other breakpoint.
| | 03:21 |
So this is a way of running any ad-hoc
code at any time in your application and
| | 03:25 |
investigating portions of your
application.
| | 03:29 |
So you can think of it as a mini query
window for investigating the state of
| | 03:32 |
your application at any moment in time.
Let's recap, the Immediate Window
| | 03:36 |
provides a way to run ad-hoc arbitrary
code while editing or debugging your code.
| | 03:41 |
| | Collapse this transcript |
| Exploring tracepoint, a different type of breakpoint| 00:00 |
A tracepoint is similar to a breakpoint.
Unlike breakpoints, tracepoints give you
| | 00:05 |
the opportunity to perform an action when
the tracepoint is hit.
| | 00:08 |
For example, you could unobtrusively
print out information during application execution.
| | 00:13 |
To demonstrate, I've opened the
Tracepoints project.
| | 00:16 |
Let me show you what this application
does before adding a tracepoint.
| | 00:19 |
I'll press F5 to run the application, and
then I'll click on this Silent Tracepoint button.
| | 00:25 |
What this code does is print out a list
of prime numbers between my minimum and
| | 00:28 |
maximum defined ranges.
Let me show you the code.
| | 00:32 |
I'll stop the application, switch over to
my code behind, and look at the code
| | 00:38 |
inside this Button_Click.
I've made a note in here that you cannot
| | 00:43 |
use tracepoints if you're using the
Express editions.
| | 00:45 |
Now, what this code does is create a list
of integers, and then the code down here
| | 00:51 |
takes the starting and ending numbers,
500 and 600, and calculates the prime numbers.
| | 00:56 |
Then loads them into the list and then I
assign the list to the DataContext, and
| | 01:02 |
then I bind the list box to the
DataContext.
| | 01:05 |
That's the overview of what happens here.
Now, let's say that I want to print out
| | 01:09 |
some information about the process.
If I want to do that, I would have to
| | 01:13 |
print a Console.WriteLine within my
application.
| | 01:17 |
That's what I'm doing here.
I'm trying to find out why certain
| | 01:19 |
candidates where being rejected, why
they're not prime numbers?
| | 01:22 |
So I can do that by looking at the
candidate number and see what it is
| | 01:25 |
divisible by.
Now, in my code, I'm putting this in the Console.WriteLine.
| | 01:30 |
And if I click on this button, you can
see that output here in the Output window.
| | 01:34 |
But that means that I had to add this
line of code to write information out
| | 01:39 |
when all I needed was some debug
information.
| | 01:41 |
So a tracepoints can be used to replace
this.
| | 01:44 |
Let me copy this code here (SOUND).
Copy this and then comment on this line
| | 01:50 |
of code.
And then I'm going to add a tracepoint.
| | 01:53 |
I'm going to a breakpoint to this line of
code, and then, I'm going to right-click
| | 01:57 |
on it and chooe When Hit.
It doesn't actually say the word
| | 02:01 |
tracepoint, but this is how you create a
tracepoint.
| | 02:04 |
I'll choose When Hit.
And then I'll say I want to Print out a message.
| | 02:08 |
And I want to do a Silent Tracepoint, so
I want to Continue execution whenever
| | 02:12 |
this tracepoint is hit.
Currently, you see I'm printing out a
| | 02:15 |
function name and the thread ID.
I'm going to go see what this looks like.
| | 02:20 |
I'll click on OK.
Run the application.
| | 02:24 |
Click on the button.
And you see it's outputting the name of
| | 02:29 |
the method and the thread that was
running.
| | 02:32 |
That's not very interesting to me, so I'm
going to modify that tracepoint.
| | 02:35 |
I'll right-click on this triangle that
represents that it's a tracepoint, and
| | 02:41 |
I'll put my text in there instead.
And then I'll click OK.
| | 02:45 |
Clear out the Outpu window, run the
application, and it's sort of doing what
| | 02:53 |
it want to do.
It's printing out information, but it's
| | 02:55 |
not printing the candidate value and the
currentTestValue.
| | 02:58 |
Why is that?
Let's go look.
| | 03:03 |
Well, if you read this comment down here,
it says, you can include the value of a
| | 03:06 |
variable or other expression in the
message by placing in curly braces around
| | 03:10 |
the value.
So it's just printing out the word
| | 03:12 |
candidate, not the candidate value, so
I'm going to put a curly brace around
| | 03:16 |
candidate, a curly brace around the
currentTestValue.
| | 03:22 |
And then I will delete the plus symbol,
because I'm not doing a concatenation now.
| | 03:26 |
And this double quote.
And I'll run it again.
| | 03:33 |
Switch back to my UI.
Click on this Silent Tracepoint button.
| | 03:38 |
Hm, not seeing the results.
I bet they're at the end of the list.
| | 03:42 |
There they are.
One more demonstration.
| | 03:45 |
I'll right-click and choose When Hit, and
this time, I'll make it a non-Silent tracepoint.
| | 03:54 |
Now, it functions like a normal
breakpoint.
| | 03:56 |
Every time this tracepoint is hit, it'll
stop my code so I can examine it at the debugger.
| | 04:00 |
Now you know the way to silently print
data to your Output window with Tracepoints.
| | 04:05 |
| | Collapse this transcript |
| Attaching a debugger to a running process| 00:00 |
There are times when it is advantageous
to debug a running process.
| | 00:04 |
For example you are testing an
application on a Windows phone.
| | 00:08 |
After 20 minutes of usage, you encounter
a problem.
| | 00:12 |
It would be nice to attach a debugger at
that moment.
| | 00:15 |
Here's another example.
Your ASP.NET website has trouble on one
| | 00:19 |
server on your web farm, but only on
Monday mornings.
| | 00:22 |
You can't replicate the problem on your
test servers.
| | 00:26 |
So it would be beneficial to attach to
the Web server process at the critical time.
| | 00:31 |
For this demonstration, I will use the
AttachToRunningApp project.
| | 00:35 |
I'm going to open the folders in my hard
drive by right-clicking and choosing Open
| | 00:40 |
Folder in File Explorer.
Next, I will open the bin directory and
| | 00:46 |
then open the Debug directory.
This is my executable.
| | 00:50 |
I'm going to run this application and
click on this, Show Current Time.
| | 00:56 |
Here is a bug.
It is supposed to show the current time,
| | 01:00 |
but it is showing the current date.
I would like to attach a debugger to this
| | 01:04 |
process to investigate.
I'll return back to Visual Studio and
| | 01:09 |
choose an item from my Debug menu.
Can you see which one it is?
| | 01:13 |
Yes, this one, Attach to Process.
At the top of this dialog is my computer.
| | 01:21 |
By default, it uses your local computer,
and it also lists all of the running
| | 01:25 |
processes in this section, called
Available Processes.
| | 01:28 |
I will choose this one, Attach to Running
App.exe, and then click Attach.
| | 01:33 |
Now I can go over to my C sharp code Put
a breakpoint here.
| | 01:40 |
Verify that I'm attached to the correct
process by looking at this process dropdown.
| | 01:46 |
And then I'll return back to my program
and click on that button again.
| | 01:52 |
At this point, everything you've learned
about debugging your code applies.
| | 01:55 |
You're looking at your code.
You can use your watch windows, your
| | 01:59 |
local windows, the output window, the
breakpoint window, the call stack.
| | 02:03 |
You can rewind your code.
Everything you've learned, you can use.
| | 02:06 |
I'll press f5 to continue running To
detacht from a running process, you
| | 02:13 |
return back to Visual Studio and choose
debug, detach all.
| | 02:18 |
And, just to show you that application is
still running.
| | 02:21 |
I'll show you a few more items in that
dialogue.
| | 02:24 |
I'll return to the debug menu and choose
attatch to process.
| | 02:28 |
It's possible that there could be other
processes that have been launched by
| | 02:32 |
other users on this computer.
Those are not shown by default, so I can
| | 02:36 |
come down here and choose Show Processes
from all users.
| | 02:39 |
And it's also possible for you to attach
to other computers.
| | 02:43 |
Let's see what's in this qualifier
dropdown.
| | 02:46 |
If I go to this dropdown, I can see all
of the available computers that I can debug.
| | 02:51 |
There are two listed here.
This first one is my local computer, and
| | 02:54 |
the second one is a surface tablet.
Now, in order to debug on the surface
| | 02:59 |
tablet, you have to do what's called a
remote debugging process.
| | 03:02 |
I have to install software on that other
computer.
| | 03:05 |
I'll close this and click on cancel, and
then let's review.
| | 03:09 |
You can easily attach to any running
process.
| | 03:12 |
If you have the source code for the app
available, you can also debug the application.
| | 03:17 |
Note, in some situations, you may need to
run Visual Studio as an administrator.
| | 03:22 |
Also, you might need to install a remote
debugging tool on other computers before
| | 03:26 |
you can attach a cross a network.
| | 03:28 |
| | Collapse this transcript |
| Debugging ASP.NET websites| 00:00 |
Debugging ASP.NET web applications is
just as easy as debugging other project types.
| | 00:05 |
To demonstrate, I'm using the Debug Web
App project.
| | 00:09 |
This is an ASP.NET web forms project, and
this is what the site looks like.
| | 00:13 |
I'll press F5 to run the application in
Internet Explorer.
| | 00:17 |
It has two pages I'm interested in, this
home page, and the Debug page.
| | 00:22 |
When you click on this button it prints
out the time so this is where I'm
| | 00:26 |
going to put my breakpoint.
Before you can debug an asp.net web
| | 00:30 |
application, you need to add a line of
XML to the web config file.
| | 00:33 |
By default Visual Studio does that for
you when you create an asp.net project.
| | 00:38 |
I'll show you I'll close the broswer.
Move down to my WebConfig file, and look
| | 00:45 |
in this section.
Here's the section I'm interested in, a
| | 00:48 |
compilation node.
Currently it says debug = true.
| | 00:52 |
That means, if I put a breakpoint in my
debug page, here, inside this C# file.
| | 00:59 |
Press f9 to add a break point here.
And then I press f5 to debug my
| | 01:04 |
application, and click on the button.
It hits my break point.
| | 01:08 |
Everything that you've learned about how
to debug an application applies to
| | 01:12 |
asp.net applications, too.
The watch window, the auto window, the
| | 01:16 |
call stack.
This is on the server side, and it works
| | 01:20 |
just the same as the other project types.
I'll stop the application, go back to my
| | 01:25 |
web config, and change this to false.
Now, I'm going to press F5 to run the
| | 01:30 |
application, and Visual Studio looks at
the web config file, and sees that I do
| | 01:34 |
not have debug set to true and it asks me
if I want to change that.
| | 01:39 |
Its asking me if I want to modify the web
config file to enable debuging.
| | 01:43 |
Of course I do, I'll click on Yes, and
now its doing the same process as before.
| | 01:47 |
I move over to debug click on the button
and hit my breakpoint.
| | 01:52 |
While I'm at this break point, I can work
with all of the ASP dot net intrinsics.
| | 01:56 |
Things like the server object, the
session object, request object, the
| | 02:01 |
response object.
For instance, I can find out which
| | 02:04 |
browser is currently running.
To do that, I can go to my watch window
| | 02:08 |
and type in this.request.
This represents the inbound request and
| | 02:14 |
all the information that Microsoft has
gathered about that inbound request.
| | 02:18 |
Then I can go to the browser and look at
all the information that's available
| | 02:24 |
about this browser.
Whether it's a mobile version, what the
| | 02:27 |
major and minor version numbers are, and
many more pieces of information.
| | 02:31 |
I'm just going to print out the browser
name.
| | 02:35 |
Like that so I see I'm running in IE that
implies that I could be able to debug in
| | 02:41 |
other browsers.
Before I show you that let me add a
| | 02:44 |
couple of more items here.
Look at the content encoding, I see
| | 02:50 |
that's utf8 and I can also look at the
server object or a session object.
| | 02:56 |
In these cases these are complex objects
so I can click on the plus symbol to see
| | 03:02 |
more information about the server.
For instance I'm looking at the server
| | 03:06 |
name here, or in the session object I can
read information about this current session.
| | 03:11 |
It's a cookie-less session is not true.
Some of you heard me say I can debug like
| | 03:17 |
in other browsers.
Let's show you how you do that.
| | 03:19 |
I'll stop this application, and I'll go
to this drop-down menu at the top of
| | 03:24 |
Visual Studio.
I have a number of choices here I'll
| | 03:27 |
start with Firefox.
Press F5, as you can see it launched my
| | 03:34 |
site in Firefox.
Click on the button.
| | 03:37 |
Did I take my breakpoint out no its not
hitting it quite the same.
| | 03:41 |
It didn't switch me over to Visual Studio
but if you look on my taskbar you can see
| | 03:45 |
the icon for Visual Studio is yellow or
orange depending on your point of view.
| | 03:49 |
And I can click on that and that
signifies that I can switch over and look
| | 03:53 |
at my breakpoint.
There it is I'll stop running again.
| | 03:57 |
And choose a different browser.
I'll choose Google Chrome.
| | 04:01 |
Press F5, again my page opens in the new
browser, I click on the button and this
| | 04:08 |
time it switches me directly to Visual
Studio and hits the break point.
| | 04:11 |
And there's one other awesome tool
available, it's called the page inspector.
| | 04:16 |
Put the page inspector, you can debug
within Visual Studio.
| | 04:20 |
So I'll choose this item here, page
inpector.
| | 04:24 |
And then when I run the application,
instead of opening a seperate browser, it
| | 04:29 |
loads an in Visual Studio browser where I
can see information about the page.
| | 04:37 |
I can move to different pages.
And then when I'm on that page, I can see
| | 04:41 |
information down here about the HTML that
is being rendered, about the styles.
| | 04:47 |
And I can click on these items, either in
the HTML editor, or I can click on this
| | 04:54 |
Inspect button.
To use this to look through my HTML and
| | 04:58 |
select the items and inspect the
information about them inside this tool.
| | 05:03 |
If you are a web developer, you should be
happy with the built-in support for
| | 05:08 |
ASP.net debugging.
Note the ASP.net MPC debugging works
| | 05:11 |
exactly the same.
JavaScript debugging is also available in
| | 05:14 |
Visual Studio, and that is the topic for
the next video.
| | 05:17 |
| | Collapse this transcript |
| Debugging JavaScript| 00:00 |
JavaScript developers have access to most
of the Visual Studio debugging tools.
| | 00:04 |
There are also some JavaScript specific
tools.
| | 00:07 |
To demonstrate this, I've opened the
solution DebuggingJavaScript.
| | 00:10 |
It contains two projects.
This first project contains an HTML file,
| | 00:17 |
which has some script.
The second project is a Windows Store App
| | 00:21 |
that is written in JavaScript.
Both of these projects have JavaScript
| | 00:25 |
which will allow me to have show you some
of the JavaScript debugging tools.
| | 00:29 |
Let's start with PageWithCode.html.
Inside this HTML, I have a div tag which
| | 00:36 |
is marked as id content, a div tag which
is marked as id div 1, and an input tag
| | 00:42 |
with the id of button1, which has this
onclick handler.
| | 00:46 |
The onclick handler calls this function
called showMessage, which I wrote up here
| | 00:51 |
in my own chunk of JavaScript.
Here it is.
| | 00:55 |
It's called showMessage and it takes an
inbound parameter, it finds an element on
| | 00:59 |
the page by calling
document.getElementById.
| | 01:04 |
Yes, I know some of you are thinking I
should have used JQuery, but for this
| | 01:07 |
demonstration, I'm using the normal dom.
I'm also getting the ElementById.
| | 01:13 |
I'm using this first element and finding
it's inner HTML and then applying the message.
| | 01:18 |
So when I run the application by pressing
F5 and clicking on this Debug JavaScript.
| | 01:25 |
Notice I'm on this page,
PageWithCode.html.
| | 01:29 |
Click here.
It puts the word hello into that div.
| | 01:33 |
Now, I want to debug this, so I'll switch
back to Visual Studio, open this code,
| | 01:38 |
and put a breakpoint here on line 11.
Press F9 to add the breakpoint.
| | 01:43 |
Return back to my browser and click on
the button again.
| | 01:47 |
Success.
I hit my breakpoint.
| | 01:50 |
At this point, everything we know about
debugging in Visual Studio applies.
| | 01:53 |
You can rewind the code by grabbing the
yellow marker and moving it up a line,
| | 01:58 |
pressing F11 to step through your code.
You can use the Locals and Watch windows
| | 02:03 |
and all of the Call Stack and the Media
windows.
| | 02:05 |
Everything you've learned so far applies
here.
| | 02:07 |
But there are also some special windows
available when you're working with JavaScript.
| | 02:12 |
Let me show you these two special
windows.
| | 02:14 |
They're in the Debug menu, under Windows,
and they have their own section.
| | 02:19 |
Here they are.
The JavaScript Console and the DOM Explorer.
| | 02:23 |
I already have these enabled in my
computer.
| | 02:25 |
Here's the DOM Explorer.
It's a tab next to my HTML page.
| | 02:30 |
And the JavaScript Console is down here
on the bottom of the screen, that's its
| | 02:34 |
default location.
So what can you do with the JavaScript Console?
| | 02:37 |
For one thing, you can use it to inspect
the DOM or select elements of the DOM.
| | 02:42 |
Let's say I want to look for my button.
I can come down here and type select,
| | 02:47 |
open paren, press Enter.
The JavaScript Console works in
| | 02:54 |
conjunction with the DOM Explorer and it
highlights my button in the DOM Explorer.
| | 02:59 |
Let's try it with the div 1 tag, select
div 1.
| | 03:05 |
It works just like you'd expect.
I can also use this to read information
| | 03:10 |
from the DOM Explorer.
If you take a lot at this div right now
| | 03:15 |
in the HTML page, I can get information
about this div.
| | 03:21 |
We'll say this div here, but it's in a
very obtuse format.
| | 03:26 |
I'd like to see it look more like it
looks in the DOM.
| | 03:29 |
So what I can do is come over here, and
then type in (SOUND) content.
| | 03:36 |
Now, what you see is it's showing me just
that subset of the DOM.
| | 03:41 |
I can see the div tag, and if I want, I
can click on this drop-down to expand it
| | 03:45 |
and see the contents.
Let's try that one more time.
| | 03:47 |
We'll type in button1, Enter.
And now, I can just see the HTML for that button.
| | 03:54 |
We can also use these tools over in this
Windows Store Application.
| | 03:58 |
So let me stop the debugger, close this
HTML page, switch over to this JavaScript
| | 04:04 |
Windows Store Application.
The main page here is this Default.html page.
| | 04:10 |
This contains the HTML that's used to
render the UI for this Windows Store Application.
| | 04:16 |
And the code for this lives over here in
this JS Folder.
| | 04:18 |
It's called default.js.
You can see some code in here that is
| | 04:22 |
building up some data for a FlipView
control.
| | 04:26 |
For instance, look at this line of code
here.
| | 04:28 |
There's a for loop here that is building
a string for the flip image based on some
| | 04:33 |
images that I've imported here in this
folder.
| | 04:36 |
That's going to build a string for
Abstract0.png, so that'll load this picture.
| | 04:40 |
Let's see what this application looks
like when I run it and then we'll debug it.
| | 04:45 |
I'll right-click, select the Set as
StartUp Project item, then I'll press F5
| | 04:50 |
to run the application.
Now, this is supposed to be a fullscreen
| | 04:54 |
application, but because I have a bug in
my code, I have this little tiny window
| | 04:59 |
up here in the corner.
You can sort of see what it's supposed to
| | 05:01 |
look like.
I'm supposed to be able to click on these
| | 05:03 |
buttons and flip through my content,
forward and backwards.
| | 05:07 |
But the window's too small.
Now I'm going to switch back to Visual
| | 05:09 |
Studio with Alt+Tab.
And when I return, you see that the DOM
| | 05:13 |
Explorere and the JavaScript Console
window have automatically opened.
| | 05:17 |
So I can use the same kind of selection
here, for instance, if I'm looking for
| | 05:21 |
this id fView, I can use the select fView
here or I can just select it with my mouse.
| | 05:27 |
Now that I've got the item selected, I
can come over here and learn more about
| | 05:32 |
that element.
Here's the styles that are applied to the element.
| | 05:35 |
Here is the layout of the elements.
I can see that it's set at 100px by 100px.
| | 05:41 |
It should be 100% by 100%.
That's the issue with my small window.
| | 05:46 |
So I'll go to my Attributes, find the
style and modify this first one, change
| | 05:52 |
this to say 100%.
Now, I'm going to switch back to my
| | 05:57 |
running application.
What you can see is that the DOM Explorer
| | 06:01 |
is working wide with the application as
it's running on my desktop.
| | 06:05 |
Let me make one more change.
I'll switch this over to 100% tab, switch
| | 06:13 |
back over to here and now I've got the
fullscreen glory of this Windows Store Application.
| | 06:19 |
In conclusion, the JavaScript debugging
tools are very cool.
| | 06:22 |
Be sure and spend some time with the DOM
Explorer and the JavaScript Console.
| | 06:27 |
| | Collapse this transcript |
| Debugging threads and tasks| 00:00 |
Multi-threaded applications are becoming
more commonplace.
| | 00:03 |
Use of threads and task windows to
discover what your threads are doing.
| | 00:07 |
To demonstrate that, I'm using this
project DebuggingThreadsAndTasks.
| | 00:12 |
Most of the code, I will be showing in
this example will be in
| | 00:14 |
MainWindow.xaml.cs and in the
WorkItems.cs file.
| | 00:18 |
I'll start by looking at MainWindow.xaml,
and then I'll double-click on this first button.
| | 00:25 |
As you can see, there are a number of
breakpoints already in my code.
| | 00:29 |
You may need to add breakpoints to match
what you see in my code.
| | 00:33 |
This first method is here just to show
you the thread window.
| | 00:36 |
There's no code other than comments in
this window.
| | 00:39 |
I'll press F5 to run the application with
the debugger attached and then click on
| | 00:44 |
this first button.
To see multiple threads, you go to the
| | 00:48 |
Debug menu and choose this item, Threads.
The default position for the Thread
| | 00:55 |
window is docked at the top of the
screen.
| | 00:58 |
You can see that I have a number of
threads here, six threads running.
| | 01:01 |
Here's the main thread.
You can tell that I'm in the main thread
| | 01:04 |
by the yellow arrow here, and I can see
there are some other worker threads.
| | 01:09 |
Some of them have names, some of them do
not.
| | 01:12 |
Some of these threads exist to support
debugging.
| | 01:14 |
If you want to see a more real world
representation of the app threads,
| | 01:18 |
disable the VS host in the project.
Let me show you how that works.
| | 01:22 |
Close this to stop debugging.
Double-click on this property node inside
| | 01:27 |
the solution.
And then click on my Debug section.
| | 01:31 |
Down here at the bottom, there is this
default setting called Enable the Visual
| | 01:35 |
Studio hosting process.
VS host is a helper XE that runs during
| | 01:39 |
your debugging sessions.
It is created whenever you build a
| | 01:42 |
project in the Visual Studio IDE.
Its purpose it to provide support for
| | 01:47 |
improved F5 performance and partial trust
debugging.
| | 01:50 |
I'm going to turn off this check mark.
Close this window and press F5 to debug again.
| | 01:56 |
Click on the button.
Now, I can see the threads that are used
| | 02:02 |
in my application, not the threads that
are used by VS host.
| | 02:05 |
I'll leave it at this state for the rest
of my demonstrations.
| | 02:08 |
Okay, I'll stop debugging and we'll look
at the next bit of code.
| | 02:11 |
The code inside this thread pool.
In .NET there are a number of ways of
| | 02:17 |
spawning a thread to do some extra work.
The old school way of doing it is to
| | 02:21 |
thread pool.
What I'm doing here is I'm storing the
| | 02:24 |
value in this string on the UI thread,
and then down here, I'm saying the same
| | 02:28 |
thing on the UI thread again.
And then here, I'm asking the thread pool
| | 02:32 |
to queue up some work.
I provide the name of the method, and at
| | 02:37 |
some point, the thread pool thread, a
worker thread, will come alive and go out
| | 02:42 |
and run the code in this open the files
method.
| | 02:46 |
And in here, I'm opening a
ContentLicense.txt file and a ContentHtmlPage.txt.
| | 02:52 |
And then I'm returning.
So, this code inside this method will be
| | 02:56 |
running on the worker thread.
Whereas, the code here in line 39 and on
| | 03:00 |
line 45 will be running on the main
thread or the UI thread, since this is
| | 03:04 |
the WPF application.
Press F5 to run the app.
| | 03:08 |
Click on the second button.
You see I'm on this main thread.
| | 03:12 |
8368 is its identifier.
I'll press F11 to step through my code.
| | 03:18 |
Now, I'm ready to run this code.
I'm going to press F5.
| | 03:22 |
Notice, there's no worker thread yet.
We queued up the work.
| | 03:25 |
But before the work could be started,
there's no thread in the thread pool.
| | 03:28 |
And it takes a little bit of time for
that thread to get created.
| | 03:31 |
Meanwhile, my main thread continued to
run and it's loading this string value.
| | 03:37 |
Now, when I press F5, you'll see it hits
my breakpoint over in the other method.
| | 03:40 |
Let me run that again, I don't know if
you saw that.
| | 03:43 |
Let me press F5.
Press F5 again, and now I'm inside my
| | 03:48 |
OpenTheFiles method.
And you can see that that is working on
| | 03:51 |
the worker thread, and meanwhile, my main
thread is idle.
| | 03:55 |
One of the problems with the way I
implemented this code is that I have no
| | 04:05 |
way of waiting on the task to complete
the code that I sent for the thread-pool?
| | 04:10 |
I no way waiting for that to get a result
back.
| | 04:13 |
Luckily for me, my method OpenTheFiles as
I was returning a void, but if I was
| | 04:17 |
returning a string or a boolean or some
item like that, I can't do that using the
| | 04:23 |
thread pool.
That's why Microsoft created the Task class.
| | 04:26 |
Now, I don't have time to go over the
Task class in detail, it works a lot like
| | 04:30 |
the thread pool.
But you can schedule a Task and then wait
| | 04:34 |
for that task to complete.
C# has the Async keyword and the Await keyword.
| | 04:40 |
VB has similar keywords in .NET4.5.
But I do want to show you one helper
| | 04:46 |
class which is called the Parallel class.
It's down here.
| | 04:49 |
What I want to do is open a database
connection...
| | 04:54 |
And then I want to send a number of email
notifications.
| | 04:58 |
To do that, I have the code over here in
this WorkItems.cs file.
| | 05:04 |
This first method open database
connection has a Thread.Sleep for 1,200 milliseconds.
| | 05:09 |
You don't want to have this code in
production.
| | 05:12 |
But I'm using it to simulate some slow
database openings.
| | 05:15 |
I'm going to remove these two breakpoints
for the moment.
| | 05:17 |
On line 21, I have a method called
SendEmailNotification that takes a string
| | 05:23 |
emailAddress, and sleeps for 1800
milliseconds, and then outputs
| | 05:27 |
information to the console.
Now, let's demonstrate what this does and
| | 05:30 |
I'll show you how to look at the threads
in action.
| | 05:33 |
I'll press F5 to run the application,
make sure that I can see my Output
| | 05:38 |
window, and then click on this button,
Parallel Class.
| | 05:43 |
You can see what happened down here in
the Output window.
| | 05:45 |
The connection opened, some of the emails
were sent, and then about one second
| | 05:50 |
later, the rest of the emails were sent.
Let's stop this code.
| | 05:53 |
I'll put a breakpoint back in here and
back here.
| | 05:57 |
Then I'll go look at how I set this up to
run in parallel.
| | 06:01 |
I used the Parallel.Invoke method, and
then I specified each method that I
| | 06:06 |
want to call.
The computer I'm using in the booth has
| | 06:09 |
eight cores, so I made sure to have more
than eight items to send.
| | 06:13 |
Now I put the breakpoints in my code and
I'm going to press F5 to run the
| | 06:19 |
application, click on this Parallel Class
button again.
| | 06:24 |
This is showing me the threads.
Now, if I press F5 a second time, you'll
| | 06:28 |
see the worker threads start coming in to
do the work.
| | 06:32 |
I'm running on thread 1072.
When I press F5 and hit my next
| | 06:36 |
breakpoint, I can see its thread 9580
that's running that code.
| | 06:39 |
Let me stop the application, rerun it by
pressing F5, and I'll show you a few
| | 06:45 |
other windows we can use.
I'll turn off the Thread window.
| | 06:51 |
And this time, I go to the Debug window
and choose the Parallel Tasks.
| | 06:57 |
I'll also choose Parallel Stacks.
And I'll choose Parallel Watch.
| | 07:04 |
So now, I have windows that are dedicated
to watching these Parallel operations.
| | 07:08 |
Currently, I'm in the Console.WriteLine
in the Connection Open, the OpenDBConnection.
| | 07:14 |
So I don't see any tasks in here.
And I see I'm on 1 thread in WorkItems.OpenDBConnection.
| | 07:20 |
And here, I can see the watch information
for that window.
| | 07:23 |
Now, I'm going to press F5, which will
move me to my next breakpoint.
| | 07:27 |
And here, I can start seeing some more
information.
| | 07:29 |
Down here in the Parallel Watch, I see
all the email addresses that have been
| | 07:34 |
scheduled for that Parallel operation.
Currently, I'm working with Task number 1.
| | 07:39 |
Up here in the Parallel Stacks window, I
can see that there are a number of threads.
| | 07:45 |
This is a visual representation.
There's eight threads currently and
| | 07:49 |
they're all being scheduled to run in
these different areas.
| | 07:52 |
Send email notification, send email
notification, and then up here, I can see
| | 07:58 |
that I have one active task that's
assigned to this thread.
| | 08:02 |
I have one scheduled task and I have a
number of threads that are currently blocked.
| | 08:08 |
Now, I'm going to press F5 one more time.
We'll move to Task number 3 down here,
| | 08:13 |
and I can see a lot more of the tasks are
now active, ready to go.
| | 08:17 |
I can say I'm working on this thread down
here, with db@explore.ca.com, and I can
| | 08:22 |
see him over here in this item, as far as
the Parallel Task windows go.
| | 08:27 |
Writing multiple threaded applications is
not easy, but these tools, the Parallel
| | 08:32 |
Tasks, the Thread window, the Parallel
Stacks, and the Parallel Watch window
| | 08:36 |
will help you be a better multi-threaded
developer.
| | 08:40 |
| | Collapse this transcript |
| Even more debugging windows| 00:00 |
There are a lot of debugging windows
available in Visual Studio.
| | 00:04 |
There are nearly 30 specialized windows.
We've looked at most of these windows
| | 00:08 |
during the course.
Just to refresh your memory, let's look
| | 00:11 |
at the Debug menu, and then click on
Windows.
| | 00:13 |
Well, that doesn't look like 30.
That's because I'm not at a breakpoint.
| | 00:17 |
Let's fix that problem.
I go to my Program and I'll put a
| | 00:21 |
breakpoint on the first line of my method
and then press F5.
| | 00:24 |
Let's try that again, there's the
windows.
| | 00:29 |
This still doesn't look like 30, but
there's some windows hiding here in these sections.
| | 00:34 |
In this chapter, I've shown most of these
windows.
| | 00:36 |
There are a few that we haven't touched
yet.
| | 00:38 |
The Disassembly window is one.
The Memory window is another.
| | 00:42 |
The Application Thumbnail, which this
gives you a picture of the running
| | 00:46 |
application like a snapshot.
And the Registers window.
| | 00:53 |
Let's look at these last two.
I'll click on Disassembly and I'll click
| | 00:56 |
on Registers.
So the Registers shows you the numeric
| | 01:04 |
values in each of the CPU registers.
As your code is running and the register
| | 01:09 |
values are changing, you'll see these
numeric values changed.
| | 01:13 |
The Disassembly window shows the
disassembled code in your application.
| | 01:15 |
Now, since, I'm sitting at a breakpoint
in my Program.cs, there's also a matching
| | 01:24 |
line, number over here in my Disassembly.
Let me drag this Disassembly window over
| | 01:30 |
and dock it as a second tab group.
Now I can step through my code here in
| | 01:35 |
the Program window by pressing F11.
And you'll see the lines of code change
| | 01:39 |
in the Disassembly window.
I can also move my focus to the
| | 01:44 |
Disassembly window and press F11, and
now, I'm stepping through the individual
| | 01:48 |
lines in the Disassembly window, and you
can see the matching moves over here.
| | 01:53 |
So far, it hasn't moved yet, but as I
step through this code, you'll see
| | 01:56 |
eventually, it will move to line 16 in
the Program.cs file.
| | 02:00 |
There it goes.
So, if you need to see the Assembly
| | 02:03 |
information or you need to see the CPU
Registers, you now know how to find those
| | 02:07 |
windows, too.
| | 02:08 |
| | Collapse this transcript |
| Debugging with the ASP.NET page inspector| 00:00 |
The Page Inspector is a browser window
inside Visual Studio that renders Web
| | 00:05 |
ages and provides developer tools to help
debug markup and style sheet problems.
| | 00:09 |
For this demonstration, I'm using the
project, DebugWithPageInspector.
| | 00:15 |
I will start by showing you the
application in IE.
| | 00:19 |
To do that, I'll go to this drop-down and
choose Internet Explorer from this list.
| | 00:23 |
And then I'll press F5 to run the
application.
| | 00:25 |
This is my website.
The first page has some pictures and some text.
| | 00:31 |
We're going to spend our time in this
second tab, this Debug tab.
| | 00:35 |
In this page, I have a button that runs
some server site code that changes this label.
| | 00:41 |
I have a list of Tours that has some
issues.
| | 00:45 |
The colors are wrong on this, I don't
like the orange background, and something
| | 00:50 |
is wrong with this Tour, it doesn't look
like the rest of the Tours.
| | 00:53 |
And when you click on this Debug
JavaScript button, I'm running some
| | 00:57 |
client-side JavaScript to add an image to
the DOM.
| | 01:01 |
The trouble comes when I click on the
button the second time and I see that the
| | 01:04 |
image doesn't look the right size.
It's too wide.
| | 01:08 |
We're going to use the Page Inspector to
solve these problems.
| | 01:11 |
I'll close the browser and return back to
Visual Studio.
| | 01:16 |
I'll switch in this drop-down to the Page
Inspector and then press F5 to run the application.again.
| | 01:23 |
This is the Page Inspector.
It consists of a top window which
| | 01:26 |
contains the browser, Internet Explorer.
And the bottom two panes which show the
| | 01:31 |
HTML and other items.
I'll click on the HTML tab.
| | 01:36 |
The HTML tab in Page Inspector shows the
HTML as it is rendered by the browser.
| | 01:41 |
If you click on the Files tab, you can
see the files that are used to generate
| | 01:46 |
this page.
I can see that site.master and
| | 01:49 |
Default.aspx are used to build this page.
Now, I'm going to come up to this page,
| | 01:53 |
it is live, and click on this Debug link,
and look at this page that has the trouble.
| | 01:59 |
Down here, I can see that this page is
built from Site.Master and DebugPage.aspx.
| | 02:05 |
If I click on Site.Master, Visual Studio
loads my source code into this tab over here.
| | 02:14 |
If I click on DebugPage.aspx, Visual
Studio loads that page into my code
| | 02:19 |
editor and it synchronizes the items.
If I select the label here, you'll see
| | 02:25 |
that it selects it over in the
DebugPage.aspx source code.
| | 02:28 |
I'll switch back to the HTML view.
Now, I can use this to drill into the element.
| | 02:34 |
You can see right now that because I have
the label selected here, it's attempting
| | 02:38 |
to find the label in the HTML section.
Here it is.
| | 02:42 |
This is the rendered HTML remember.
So the ID of this is different than what
| | 02:48 |
I have over here.
Over here I have asp:Label and the ID is Label1.
| | 02:53 |
That of course, gets turned into a span
tag in the HTML world, and the ID is now MainContentPlaceholder_Label1.
| | 03:04 |
That is the ASP.NET naming containers at
work.
| | 03:08 |
Over here in this area, I can see there
is a Styles tab.
| | 03:11 |
That is showing me the styles that make
up this span tag.
| | 03:15 |
I'm going to show you a tool that makes
it even easier to drill in and find this information.
| | 03:19 |
That's this Inspect button.
I'm going to click on the Inspect button
| | 03:22 |
and then click on the Label.
Now, I can come over here and look at the
| | 03:26 |
Trace styles.
The Trace styles lets me look at the
| | 03:29 |
style sheets that contain the actual code
that's generating this style.
| | 03:34 |
I will use the list items to demonstrate.
I'll click on Inspect and then I'll click
| | 03:38 |
on Bus Tours.
Make this a little bit taller, so we can see.
| | 03:43 |
These are all the styles that are
applied.
| | 03:45 |
I can see the bottom border is orange,
and when I open this up and click on this
| | 03:49 |
tourlist space li, that takes me over to
the actual CSS that is generating that style.
| | 03:56 |
When I move to this area, the color
value, and click on this area, it will
| | 04:03 |
take me over to the Style.css file.
This is where the body color is being defined.
| | 04:10 |
This is very handy.
I can see the source as I click on the Styles.
| | 04:15 |
Now, let's fix this.
What's the problem with Balloon Tours?
| | 04:19 |
And I see, I'm missing an li tag on
beginning and ending of Balloon Tours, so
| | 04:24 |
it's not part of the list.
Click on Inspect.
| | 04:29 |
Click here.
That loads my DebugPage at ASPX, over
| | 04:33 |
here, and I can come over here to my
source code and modify my HTML and wrap
| | 04:40 |
this Balloon Tours in an li tag.
The Page Inspector detects that I've made
| | 04:45 |
a change in my source code and prompts me
over here.
| | 04:48 |
Some files that are used by this page
have unsaved changes.
| | 04:51 |
Click here to save all files and refresh
the browser.
| | 04:55 |
Let me try this.
I'll click.
| | 04:57 |
What just happened?
My source code was saved.
| | 05:00 |
It recompiled my application, reloaded my
page in the Page Inspector.
| | 05:06 |
Very convenient.
Next, I'll turn to the problem that I
| | 05:10 |
have with this JavaScript.
I'll click on this button.
| | 05:14 |
And let's make some more room, so it's a
little bit easier to see before I click
| | 05:17 |
on the button.
And there's my image.
| | 05:20 |
Now that image is somewhere inside this
HTML.
| | 05:22 |
I'll use the Inspect tool to find it in
just a second.
| | 05:26 |
Let me add the image that looks wrong.
I'll click a second time, and then I'll
| | 05:30 |
click on Inspect, and click on this first
item or the second item.
| | 05:33 |
Notice as I hover over them.
It puts an orange border, that's to
| | 05:38 |
signify that this is being rendered by
JavaScript.
| | 05:41 |
It also says JS img and JS img.
Those are clues that these are created by code.
| | 05:48 |
Also, if you look over on my source code
page on line 13.
| | 05:51 |
It says divElement.appendChild.img,
that's the line of code that's actually
| | 05:57 |
generating this image.
Now, there's more, if I click, you'll see
| | 06:01 |
down here that the Call Stack tab also
has an orange border.
| | 06:04 |
That's to signify that there's some
information in there.
| | 06:08 |
What this shows me is the JavaScript
areas that are rendering this.
| | 06:11 |
There's an onclick.
When I click on this, you can see it over here.
| | 06:15 |
It's in this loadElements on this input
tag.
| | 06:18 |
I'll make this a little bit wider to see
this.
| | 06:20 |
Now, when I click on loadElements, it
takes me up to the function that's
| | 06:23 |
actually being called by that button.
And you can still see the highlight very
| | 06:28 |
dimly, you can see the highlight on line
13 saying this is the line of code that's
| | 06:31 |
generating that image.
Let's use Inspect, click on this again.
| | 06:35 |
So, what's actually wrong with this?
The width is not set to 90, that's the
| | 06:43 |
value that I want.
Now there's a couple of ways I could fix this.
| | 06:45 |
For temporary testing, I can type a new
value here in the HTML tab.
| | 06:51 |
Type in a new value here and press Enter.
And then in the Page Inspector, I can see
| | 06:55 |
what it looks like.
Once I'm satisfied that that's the
| | 06:58 |
problem, then I can come over here and
modify my source code (SOUND) IMG.
| | 07:07 |
Once again, the Page Inspector tells me I
have some unsaved changes.
| | 07:09 |
I'll click on that header and it
refreshes the page.
| | 07:13 |
And now, when I press the button, the
images are perfectly sized.
| | 07:18 |
That's great.
I'll summarize what we've seen.
| | 07:21 |
The Visual Studio Page Inspector tool is
an awesome productivity feature for Web developers.
| | 07:26 |
It brings the entire debug experience
inside Visual Studio to make it easier to
| | 07:31 |
find and troubleshoot HTML and CSS
errors.
| | 07:35 |
| | Collapse this transcript |
|
|
8. Using the Designers for UI DevelopmentArranging UI elements| 00:00 |
Visual Studio provides UA designer tools
for creating user interfaces.
| | 00:04 |
In this video I want to examine the tools
for arranging and sizing the UI elements
| | 00:08 |
in a Windows forms application.
I have opened this form1.vb file, now you
| | 00:14 |
probably remember how to add controls.
You use your tool box, and you drag items
| | 00:19 |
over to the designer surface, and then
position them.
| | 00:22 |
Notice I'm getting a black rectangle and
a plus symbol, and when I let go of the
| | 00:25 |
mouse, it adds the control.
Now that I have the control, I want to
| | 00:29 |
arrange these items and size them to meet
my needs.
| | 00:32 |
The way you select a control is by
clicking on it.
| | 00:37 |
Another way of selecting the control is
to go the property menu and choose from
| | 00:41 |
this drop down.
Once you have the items selected, then
| | 00:46 |
you can size it.
Let's pick this big one down here.
| | 00:49 |
If you grab the top, bottom, left or
right handles, you're sizing one side of
| | 00:54 |
the control.
If you drag the corners of the control
| | 01:00 |
you're changing two sides of the control.
The calendar is a little bit odd in that
| | 01:05 |
it is not resizeable.
I can try to drag these controls but they
| | 01:09 |
do not work.
When you have an item selected, you can
| | 01:12 |
also move it on the screen.
Obviously you can move it with your mouse
| | 01:16 |
and drag it to a new position.
When you want to move it with your
| | 01:20 |
keyboard, you can press the up, down,
left and right arrow keys on your keyboard.
| | 01:26 |
Look what happens when I hold down the
Control key, and I press the Left and
| | 01:30 |
Right arrows.
Now it's aligning to the different
| | 01:34 |
controls on the page.
If I hold the Shift key while I'm
| | 01:38 |
pressing the left and right arrows then
I'm changing the size of the button.
| | 01:44 |
When you want to select multiple elements
you can click once and then hold down the
| | 01:50 |
Control key to click on another item.
You can also select or deselect items
| | 01:55 |
this way.
You can also use the Shift key and the mouse.
| | 02:00 |
One of these buttons is not like the
other.
| | 02:03 |
Button number three has white handles,
and all of the other buttons have black handles.
| | 02:07 |
That's going to become important when we
start using these tools up here on the toolbar.
| | 02:11 |
I'm not quite ready to go there yet
because I want to show you another way of
| | 02:14 |
multiple selecting I'm going to take my
mouse and drag a selection handle and
| | 02:19 |
then let go.
Now let's talk about these controls up here.
| | 02:23 |
Remember what I said about the button
with the white dots.
| | 02:26 |
That become the master control, when I
use these buttons up here in the tool
| | 02:31 |
bar, whichever button has the white
handles is the one that's used as the gauge.
| | 02:35 |
So if I choose to align left, all the
black handled buttons will move leftward
| | 02:40 |
on the page.
When I choose align right, they move to
| | 02:43 |
align with the right edge of the white
handled button.
| | 02:46 |
When I choose to make them size, for
instance make them the same width Button
| | 02:51 |
4 is smaller than button 3, so when I
choose this, it's going to make sure that
| | 02:55 |
they match, but they're not lining up at
the moment.
| | 02:58 |
I can also choose things like, make same
size, make same height, that do exactly
| | 03:02 |
what you'd expect.
Here's an interesting one, the make
| | 03:06 |
horizontal spacing equal, and make
vertical spacing equal.
| | 03:09 |
It's going to analyze all my buttons and
spread them out so that they have equal
| | 03:14 |
distance between the buttons.
And I'll align these to the left.
| | 03:19 |
I can also do horizontal spacing.
I'll select these three items, and then
| | 03:28 |
choose, make horizontal spacing equal.
Let me show you another alignment tool.
| | 03:34 |
You might have noticed when I was
dragging these buttons around that blue
| | 03:37 |
lines appear.
Let me make this button a little bit taller.
| | 03:41 |
These blue lines are alignment signals
that let you know when you're aligned to
| | 03:47 |
the left edge or right edge or the top
edge or bottom edge.
| | 03:51 |
There's also a pink line that shows up
when the text inside the control matches
| | 03:55 |
the alignment.
What do you think will happen if I put
| | 03:59 |
this button over top of the calendar?
Well, the answer is, it depends.
| | 04:03 |
It depends on the Z index of the
controls.
| | 04:06 |
For instance, if I take this button and
put it over the calendar.
| | 04:11 |
It shows up behind the calendar.
That's because this button is further
| | 04:15 |
back in the Z index, and this button is
further forward in the Z index.
| | 04:19 |
I can change those by right clicking.
And choosing bring to front and send to back.
| | 04:25 |
Or by using these buttons up here on the
tool bar.
| | 04:28 |
So I'll send this one to back so that
calendar's on top of both of them.
| | 04:31 |
Then I'll select the calendar and click
on this one here to send it behind both buttons.
| | 04:37 |
Each designer has its own tools for
arranging the elements on the screen.
| | 04:41 |
This video I've shown you the tools for
working in Windows forms.
| | 04:44 |
In the next video I show you how to
arrange the controls in a WPF application.
| | 04:48 |
| | Collapse this transcript |
| Arranging UI elements in WPF| 00:00 |
Visual Studio provides UI designer tools
for creating user interfaces.
| | 00:04 |
In this video, I want to examine the
tools for arranging and sizing the UI
| | 00:07 |
elements in a WPF application.
I've opened this project arrange in WPF.
| | 00:13 |
We'll start by looking at the container
form items, that would be the window in
| | 00:17 |
this case.
If you want to make it easier to see
| | 00:19 |
these controls, you can zoom in or zoom
out by choosing this sizing drop down.
| | 00:24 |
I prefer to use my mouse to do the
sizing.
| | 00:27 |
To do that, I hold down the Ctrl key and
use my mouse wheel to zoom in or zoom out
| | 00:32 |
rather than using the Scroll bars to
slide back and forth.
| | 00:35 |
I also prefer this short cut, hold down
the space bar.
| | 00:38 |
Your mouse cursor changes to a hand, and
then you can drag the window to whatever
| | 00:42 |
position you want.
Then, I'll hold down the Ctrl key and
| | 00:45 |
zoom in, and then drag down here so I can
see those controls.
| | 00:49 |
Adding a control to the designer surface
is easy.
| | 00:52 |
Click on the Toolbox, choose the item you
want, and then drag to your designer.
| | 00:57 |
The only indication that you're dragging
to the designer is the plus symbol on
| | 01:01 |
your mouse.
I'll let go of my mouse, and there's my
| | 01:04 |
new control.
You can see some sizing handles around
| | 01:07 |
the edge, some dotted lines indicate the
margin sizes.
| | 01:11 |
You can read the numbers for the margin
sizes here, 86 margins on the top, and
| | 01:15 |
you can verify that in your ZAML.
Here's the 86 value and the 413 value.
| | 01:22 |
Next, let's talk about moving the item.
The obvious way is to pick it up with
| | 01:26 |
your mouse and drag it to a new position.
Notice how the margin value is changing
| | 01:30 |
on the top.
And notice how it changed down here to
| | 01:33 |
match in the XAML view.
Another way of moving it is to use the up
| | 01:37 |
down and left right arrows.
If you hold down the Shift key while
| | 01:42 |
you're using the arrows, it jumps by
increments.
| | 01:46 |
Next, I want to talk about sizing.
You notice there is several handles
| | 01:51 |
around the outside edge.
They do what you would expect.
| | 01:54 |
If you grab the side handles, it's
changing one edge of the button.
| | 01:59 |
If you grab the corners, it changes two
edges of the control.
| | 02:03 |
WPF has some idiosyncrasies though that
might catch you.
| | 02:08 |
When I hold my mouse over the sizing
handle, I get a two-headed arrow.
| | 02:11 |
Now I can size.
But if you're not careful and you hold
| | 02:14 |
your mouse just a few pixels below the
sizing handle you'll get this icon.
| | 02:18 |
This is called the Skew.
When I drag with my mouse now, I'm
| | 02:22 |
skewing the degrees between the edges, so
it's no longer a 90 degree angle.
| | 02:28 |
I'll press Ctrl+Z to undo.
It's the same on the corner handles.
| | 02:33 |
If you're directly over the rectangle,
you get the two headed arrow.
| | 02:37 |
If you're slightly off the rectangle, you
get a curved arrow.
| | 02:40 |
Now when you drag, you're doing what's
called the rotation.
| | 02:43 |
Next, let's look at how to select
multiple items.
| | 02:49 |
I just did a Shift-click.
I selected this first button and I held
| | 02:54 |
down the Shift key, and I selected the
second button.
| | 02:58 |
I'll do the same thing over here.
This time I held down the Ctrl key.
| | 03:02 |
So, Ctrl or Shift, either one works.
WPF adds a bounding box around the
| | 03:08 |
selected items.
And then within the selection, I can
| | 03:11 |
click on these buttons.
So, I can choose which of the three
| | 03:15 |
buttons is selected within the selection
box.
| | 03:18 |
To deselect the current selections, we
need to click outside the bounding box.
| | 03:24 |
Naturally, you can use your mouse.
Drag your mouse around the controls and
| | 03:30 |
they get selected.
Once you have the items selected you can
| | 03:33 |
use the arrow keys to move them or the
mouse to move the group.
| | 03:38 |
You can also do things like rotate the
group.
| | 03:41 |
Ctrl+Z to undo.
You can also put these control inside
| | 03:47 |
another control.
Currently, these are three independent controls.
| | 03:50 |
WPF supports this idea of inserting
another item into a group, so I can
| | 03:55 |
right-click and choose Group Into.
And then, pick from one of the Canvas
| | 04:00 |
controls, or the Doc panel or the Stack
panel.
| | 04:03 |
I'll choose Grid, and you'll see down
here in my XAML, I now have a grid with
| | 04:14 |
three buttons inside the grid.
Ctrl+Z to undo.
| | 04:16 |
Let me zoom out a bit.
Move this up so I can see it.
| | 04:18 |
Now I want to talk about aligning items.
One simple way of aligning an item is
| | 04:23 |
dragging one control and looking for the
red dotted line.
| | 04:27 |
That's telling me I've aligned with the
top of the button on the right side of
| | 04:30 |
the screen and the side of the button
that's below me.
| | 04:33 |
You can also use tools in this format
menu to accomplish more complex formatting.
| | 04:41 |
Let me show you.
Select these three items, and then I'll
| | 04:46 |
choose Format > Align Left.
You can also align to center, or top and bottoms.
| | 04:56 |
Ctrl+Z to undo.
I can choose to make them the same size.
| | 05:02 |
I'll do both.
Now, those are too big.
| | 05:05 |
So, let's just do the width then.
That's nice.
| | 05:12 |
I can also change the z-index.
I'll show you that in a minute.
| | 05:16 |
And, I can flip them horizontally or
vertically.
| | 05:20 |
Now that's interesting.
I just changed them to backwards buttons.
| | 05:25 |
Look at the text.
Let's look at the z-index.
| | 05:30 |
I moved this calendar up here and then
put two buttons on the calender.
| | 05:35 |
In this case, the calendar is higher in
the z-index so it's covering up the buttons.
| | 05:39 |
So, I can right-click and choose Order >
Bring to Front.
| | 05:44 |
Or I could do the same thing in the
Format menu by clicking this item, Bring
| | 05:47 |
to Front.
Then, I'll send this calendar to the back.
| | 05:58 |
That's changing the z-index.
One more thing I'd like to show you
| | 06:01 |
before I close the video is down here
next to the sizing dropdown are two buttons.
| | 06:07 |
They don't look like buttons, but they
are.
| | 06:09 |
There's the show snap grid, which turns
on the grid so you can see where the
| | 06:14 |
controls are going.
Like if you want to align the center, you
| | 06:16 |
can move this over to that outline.
And then, you can choose Snap to Gridlines.
| | 06:21 |
Now when you move an item around, it'll
snap to the nearest gridline.
| | 06:25 |
Each designer has its own tools for
arranging the elements on the screen.
| | 06:29 |
In this video, I've showed you the
designer for WPF.
| | 06:32 |
In the next video, I'll show you the one
for ASP.net.
| | 06:36 |
| | Collapse this transcript |
| Arranging UI elements in ASP.NET| 00:00 |
In this video, I want to examine the
tools for arranging and sizing the UI
| | 00:04 |
elements in an asp.net application.
For this demonstration, I'm using this
| | 00:08 |
arrange and web forms application.
And I've opened this arrangeelement.aspx page.
| | 00:14 |
Normally when you open an ASPX page in
Visual Studio, it starts in the Source
| | 00:18 |
view, which is the HTML view.
You can also look at the Design view, or
| | 00:23 |
the Split view.
I will leave mine as Split view for a few minutes.
| | 00:26 |
To add a control to an HTML page, or an
ASPX page, you open the Toolbox and then
| | 00:34 |
you'll drag the control.
And take this button, and I'll drag it
| | 00:37 |
right here.
Notice the black dotted outline where I'm
| | 00:41 |
going to drop.
There's a space in there so I can put it
| | 00:43 |
on either side of that space.
I'll let go here, and there's my new button.
| | 00:48 |
Now, I'll try to put it between the big
button and the small button.
| | 00:52 |
I'll drag it over.
See the dotted line on the left side of
| | 00:55 |
the button.
As I move my mouse over here, the dotted
| | 00:58 |
line will move between the two.
I'll let go, and there's the button
| | 01:02 |
between the two existing buttons.
To select an item, you click on it.
| | 01:07 |
Let's select this picture, and then to
size the item, you grab one of these handles.
| | 01:13 |
On the image, you can grab the bottom or
the left or the corner and it will keep
| | 01:18 |
the aspect ratio of the image the same.
Let's see what that wrote.
| | 01:23 |
It wrote for me a style height equal
110px for me.
| | 01:30 |
I'll try this side here.
Now it is dragging the left edge and now
| | 01:32 |
you can see a width value.
And now I can drag the corner to change both.
| | 01:36 |
That, of course, also works with buttons
and other elements.
| | 01:40 |
To move an item, you would think you
could use the up and down arrows, but you can't.
| | 01:45 |
You can only use the mouse.
I'm going to drag this image up above the button.
| | 01:49 |
Before I do that, let me switch to the
Design view so I have more room on the screen.
| | 01:53 |
Now I'll drag this button up with my
mouse and drop it here.
| | 01:56 |
Some of you are WPF developers or Windows
Form developers.
| | 02:01 |
You might be tempted to pick this image
up and drag it over and drop it anywhere
| | 02:05 |
on the page.
But, that won't work.
| | 02:07 |
That's because of the way HTML and CSS
work.
| | 02:11 |
If you really want to move it to an
absolute position, you're going to have
| | 02:14 |
to change a CSS style.
I'll show you how to do that in just a
| | 02:18 |
few minutes.
To select multiple items, you drag this
| | 02:22 |
picture down here, and then I'll select
these two images.
| | 02:25 |
Click on one and then hold down the Ctrl
key and click on the other.
| | 02:28 |
Now I have these two items selected.
And now I can do things like go to
| | 02:32 |
Format, choose Make Same Size, say Height
and Width for both of these will be the
| | 02:38 |
same, like that.
Make this a little bit smaller and try
| | 02:47 |
this again.
Ctrl-click.
| | 02:49 |
Now, I want to do some alignment.
When I open this menu, you'll see that I can't.
| | 02:54 |
Also, when I go to the order I cannot do
anything because I'm not using absolute
| | 03:00 |
positioning yet.
I'm going to show you how to use absolute positioning.
| | 03:04 |
But in many situations, that's the wrong
thing to do in HTML or CSS.
| | 03:08 |
And here's how you do it.
You go up to this SetPosition and choose Absolute.
| | 03:13 |
Now, I want to go back to that menu, I
can now choose to align them to the right edge.
| | 03:19 |
It didn't do exactly what I wanted.
That's because it depends on the order
| | 03:23 |
you select the items.
I'll Ctrl+Z, I'll select this bottom
| | 03:27 |
image, then Ctrl-click the top image.
Now I'm going to go to Format.
| | 03:35 |
And because I turned on Absolute
Positioning, I now can choose this Right Alignment.
| | 03:40 |
Let's see what happened in my HTML.
It changed my style to say position equal absolute.
| | 03:50 |
The Visual Studio layout engine for
asp.net is not as flexible as the one in
| | 03:55 |
WPF or Windows Forms, but that's because
we're working with HTML and CSS.
| | 04:00 |
| | Collapse this transcript |
| Arranging UI elements in Windows Store and Windows Phone apps| 00:00 |
In this video, I want to examine the
tools for arranging and sizing the UI
| | 00:04 |
elements in a WindowsPhoneApplication and
a WindowsStoreApplication.
| | 00:08 |
To demonstrate that, I've opened this
solution called ArrangingUiElements,
| | 00:12 |
which contains a Phone App and a Windows
Store App.
| | 00:15 |
I'll open the Phone App and double-click
on the MainPage.xaml file.
| | 00:21 |
This shows the Designer for the Phone
Application.
| | 00:23 |
Next, I'll open up the
WindowsStoreApplication and double-click
| | 00:27 |
on MainPage.xaml.
This shows the Designer for the WindowsStoreApplication.
| | 00:33 |
To add a control to the Designer surface,
open the Toolbox, find the control that
| | 00:38 |
you want to add, select it, and drag it
to the Designer surface.
| | 00:42 |
That also works the same in the Windows
Phone Designer.
| | 00:47 |
Select the item, drag to the Designer
surface.
| | 00:51 |
To remove it from the Designer surface,
press the Delete key.
| | 00:54 |
Delete.
I'll spend most of my time in this
| | 01:00 |
Designer, because the Designers between a
Windows Phone and the Windows Store Apps
| | 01:05 |
are nearly identical.
To select an item, click with your mouse.
| | 01:11 |
Once you have an item selected, you can
do things like size it or move it.
| | 01:15 |
To move it, you pick it up with your
mouse and drag it to a new position.
| | 01:19 |
If you prefer the keyboards, you can
press the up and down keys or the left
| | 01:24 |
and right keys.
If you hold down the Shift key while
| | 01:29 |
you're using the arrow keys, it moves in
increments.
| | 01:33 |
When you have an item selected, you can
also change its size.
| | 01:37 |
There are several ways of changing the
size.
| | 01:39 |
You can see there are white rectangles
around the outside edge of the selected item.
| | 01:44 |
Those are sizing handles.
If you grab a sizing handle on the edge,
| | 01:47 |
you're changing one side.
If you drag a sizing handle from the
| | 01:51 |
corner, you're changing two sides.
Some of you may have watched the WPF
| | 01:56 |
Online video and you're aware that if you
move your cursor near the edge, but not
| | 02:01 |
over the rectangle itself, you get these
other indicators.
| | 02:05 |
This indicates that you can skew the item
Ctrl+Z to Undo, and if you go near one of
| | 02:10 |
the corners, say this top corner here,
you can rotate the item.
| | 02:16 |
Now, here's an interesting thing.
If you want to control the center point
| | 02:19 |
of the rotation you can grab this little
white dot in the center.
| | 02:22 |
See in the center of that button?
I'll grab that and drag it over here.
| | 02:26 |
And now, when I rotate the item, I'm
rotating it around this new center point.
| | 02:32 |
Next, I'll talk about how to multiple
select.
| | 02:35 |
You can hold down the Shift key when you
have one of the buttons selected.
| | 02:39 |
And, click on the other items.
Try that again.
| | 02:42 |
Notice, I got a big bounding box around
these two items.
| | 02:46 |
I'll click on the item to deselect it and
try this again.
| | 02:48 |
Hold down the Shift key and select.
You can also hold down the Ctrl key to do
| | 02:53 |
the same thing.
Designer puts a big boundary box around
| | 02:57 |
the two items.
I'll Control click to add this third button.
| | 03:01 |
Now that they have the bounding box in
there I can click on the individual items
| | 03:05 |
inside the bounding box.
To disable the bounding box or to turn it
| | 03:09 |
off, right-click outside of it.
I'll use that technique to use some of
| | 03:13 |
the items in this format menu like the
alignment mixing size.
| | 03:19 |
Select these three items and then I'll
choose Format Align tops.
| | 03:25 |
How does it determine which of these
three items to monitor for the top?
| | 03:30 |
The item that had the sizing handle is
the master.
| | 03:34 |
We can also choose things like make same
size.
| | 03:39 |
And other items like, changing the order,
flipping.
| | 03:42 |
We just like to show this one flipping
the order.
| | 03:45 |
Now, the text is backwards, Ctrl+Z to
Undo.
| | 03:48 |
Now, let's talk about Z index.
Click outside of one of these items, drag
| | 03:53 |
this image up, and put these buttons over
top of this image.
| | 03:58 |
One of the buttons is on top of the image
and one of the buttons is behind the image.
| | 04:02 |
That's because it's controlled by the Z
index.
| | 04:05 |
Now, I can force this button behind.
The image by right clicking and choosing
| | 04:10 |
order, Send to Back.
I'll bring this button to the front by
| | 04:16 |
choosing order Bring to Front.
You can also group these items into other containers.
| | 04:23 |
I'll select these three items again.
And then, I'll right-click and choose
| | 04:27 |
Group Into.
And then I can pick form one of these
| | 04:30 |
Container Controls, for instance this
Canvas Control.
| | 04:33 |
Now you see that the canvas is wrapped
around the three elements.
| | 04:37 |
Let's summarize.
The visual Designer here in the Windows
| | 04:40 |
Store project is very similar to the
Designer inside of the Windows Phone
| | 04:44 |
project, which is in itself similar to
the WPF Designer.
| | 04:47 |
All three of these designers give you
complete control over your UI when you're
| | 04:51 |
working with XAML-based projects.
| | 04:54 |
| | Collapse this transcript |
| Controlling UI designs with the Document Outline view| 00:00 |
Most UI can be represented as a
hierarchical tree of elements.
| | 00:03 |
There are parent elements that contain
children controls, each child control has
| | 00:08 |
a coresponding parent control.
The Document Outline Window in Visual
| | 00:12 |
Studio provides a tree view
representation of the UI elements.
| | 00:16 |
It works with all UI designers.
I'll show you how it works in a WPF application.
| | 00:21 |
To demonstrate this, I've opened the
project UseDocOutline, then I've opened
| | 00:26 |
this MainWindow.xaml file.
I've also made sure that the toolbox is
| | 00:31 |
visible on the left edge of the screen.
To show the Document Outline Window, go
| | 00:36 |
to View > Other Windows, and then choose
Document Outline.
| | 00:41 |
Here's the heiarchical representation of
all the elements in this WPF Window.
| | 00:46 |
I'm going to start by looking at the
StackPanel, here, which contains these
| | 00:52 |
three TextBlocks.
I can use the Document Outline to select
| | 00:55 |
these items in the hierarchy.
Notice what happens when I select the
| | 00:59 |
item in the Document Outline.
It also gets selected in the Designer surface.
| | 01:04 |
I'm going to use this to modify this
StackPanel.
| | 01:07 |
This StackPanel should be over against
the left edge of the window.
| | 01:10 |
I'll modify the column of the StackPanel
by sending that to the first column, and
| | 01:17 |
then I'll modify the column span number
to three, so I can see the end of the
| | 01:23 |
text in the word California.
That's better.
| | 01:28 |
Let's take a look at these two canvases.
I have a yellow canvas and a tan canvas.
| | 01:33 |
There they are, right here.
I would like to be able to lock these
| | 01:37 |
elements so they cannot be moved inside
the Designer.
| | 01:40 |
Currently, I can pick these up and move
them to new positions.
| | 01:43 |
To lock them, you click in this last
column.
| | 01:46 |
When you click once in this last column,
you get a lock icon.
| | 01:51 |
The next time you click, it turns off the
lock.
| | 01:53 |
So I'll lock these two canvases.
Now, I'll use my mouse to drag over these
| | 01:57 |
multiple elements and then attempt to
move them.
| | 02:01 |
You see that the two ellipses move, but
the two canvases do not.
| | 02:05 |
The lock applies to the canvas and all of
its children.
| | 02:08 |
It's important to note that this is a
design time feature.
| | 02:12 |
It doesn't lock the elements on the run
time version of the application.
| | 02:16 |
Let me Unlock both of these (SOUND) and
we'll talk about this column with the eye
| | 02:20 |
icon in it.
This is to make the items hidden or visible.
| | 02:24 |
Let me hide the StackPanels.
I'll click on this StackPanel and click
| | 02:28 |
on the eye icon, and I'll do the same
with this second StackPanel.
| | 02:33 |
They're no longer visible.
Again, this is a design- time only feature.
| | 02:37 |
It's only hiding it here while you're
working in the Designer, not when the
| | 02:40 |
application is running.
Click again to make them visible.
| | 02:44 |
Now, how can you use these features?
Well, one way I could use them is if I
| | 02:48 |
have a deeply nested set of objects, like
I have over here.
| | 02:51 |
There are several canvases here.
And they're overlapping each other on
| | 02:55 |
purpose, so that we have this nice border
along the edge.
| | 02:58 |
But to select these items when I'm
working in the Designer is difficult.
| | 03:02 |
There's only a few pixels for me to click
on.
| | 03:05 |
So what I can do is go into these
canvases, and make some of the canvases
| | 03:10 |
not visible.
Maybe I want to work with the orange
| | 03:12 |
canvas for a while, so I can select it.
Click here.
| | 03:16 |
Now, it's easy to select.
And then later, when I'm done I can
| | 03:20 |
re-enable those two elements.
There's also a HiddenComboBox on this page.
| | 03:26 |
When the user's running the application,
they're going to do some action that will
| | 03:30 |
reveal some of the UI elements.
They're not visible right now, because
| | 03:33 |
they're covered up by this list box here.
But I can't really work with that
| | 03:37 |
ComboBox unless I see it.
So, what I can do Is drill into this canvas.
| | 03:42 |
See this list box.
Click on the eye icon.
| | 03:46 |
Now, I can see my ComboBox and select it.
And then, when I'm ready to look at the
| | 03:49 |
complete UI again, I can click on the eye
icon.
| | 03:53 |
It's also possible to do things like
change the Z index.
| | 03:56 |
Notice how the purple ellipse is
overlapping the green ellipse?
| | 04:01 |
I can pick up this bottom ellipse and
drag it to a new position in the document
| | 04:05 |
outline and that changes the Z index.
And I can also use this to move controls
| | 04:11 |
like this list box.
This list box is inside one canvas.
| | 04:15 |
I would like to move it to the other
canvas, so I'll pick this up and drag it
| | 04:19 |
and drop it inside this second canvas,
and there it is.
| | 04:23 |
It's now parented to another element.
Time to sum up what we know about the
| | 04:28 |
Document Outline Window.
It's not a good tool for layout of your
| | 04:32 |
UI, but it is a perfect companion for the
other UI designer tools.
| | 04:35 |
The lock feature and the height feature
are only available in this window.
| | 04:39 |
For that reason, I always open the
Document Outline when I start a design session.
| | 04:44 |
| | Collapse this transcript |
| Working with Expression Blend for a complex UI| 00:00 |
Visual Studio is without a doubt the best
developer tool produced by Microsoft.
| | 00:05 |
In Visual Studio 2012, the XAML UI
designers are first rate.
| | 00:10 |
Expression Blend is a separate tool that
is also an excellent XAML design tool.
| | 00:14 |
That shouldn't be a surprise.
They share a common designer engine.
| | 00:18 |
Some XAML developers never leave Visual
Studio.
| | 00:21 |
But that is a mistake.
There are some UI tasks that are harder
| | 00:24 |
to do in Visual Studio but only take a
few minutes in Blend.
| | 00:28 |
Are you afraid it'll interrupt your work
flow?
| | 00:30 |
Stop worrying.
It is trivial to switch to Blend.
| | 00:33 |
And both tools share the same file
formats.
| | 00:36 |
Here is a list of activities that I
always do in Blend.
| | 00:40 |
When I need to create or edit an
animation, I reach for Blend.
| | 00:44 |
When it's time to manage visual states,
it's time for Blend.
| | 00:48 |
I also use it for transitions, style
editing, template editing and gradient manipulations.
| | 00:56 |
Before I switch to Blend, a word of
advice.
| | 00:58 |
You need to have Visual Studio 2012
update to installed in order for the
| | 01:03 |
demonstration to work.
I have two files that I want to edit in Blend.
| | 01:07 |
The first file, octopod.xml is a cute
animal I created a few years ago out of a
| | 01:11 |
set of elipses and custom paths.
I need to modify the colors and angles of
| | 01:16 |
the gradient and that is a perfect job
for the Blend Gradient tool.
| | 01:20 |
Here's how I'm going to switch to Blend.
I'm going to right-click on my solution
| | 01:23 |
and choose Open Folder in File Explorer.
I'll copy this path, then I'll launch
| | 01:30 |
Blend in Windows 8.
I do that by pressing the Windows key and
| | 01:33 |
then typing in the word Blend, and then
clicking on this icon.
| | 01:39 |
Then I'll click on Open Project, and
Paste in that path I just copied.
| | 01:44 |
And then I'll open this SLN file.
Expression Blend shares the same solution
| | 01:50 |
and project file formats.
Now, the designer looks different here.
| | 01:54 |
It's darker, it's unfamiliar.
But, you'll get used to it if you use it
| | 01:59 |
for any length of time.
Over here, on the left hand side are a
| | 02:03 |
number of tabs.
The Project tab is similar to the
| | 02:06 |
Solution Explorer and Visual Studio.
We also have assets, triggers, and states
| | 02:10 |
over here.
And then on the right side of the screen,
| | 02:13 |
we have properties, resources and data.
I'll choose Projects, and then I'll
| | 02:19 |
double-click on Octopod.xaml.
I want to select some of the items in my Octopod.
| | 02:25 |
To do that, I will use one of these two
selector items over here.
| | 02:28 |
There is a Selection tool and Direct
Selection tool.
| | 02:32 |
In Expression Blend, you change tools by
touching the letter.
| | 02:35 |
In this case, the letter A or the letter
V.
| | 02:38 |
And then, further down this list are a
number of tool items that have multiple
| | 02:43 |
items under them.
For instance, here's the rectangle section.
| | 02:46 |
Notice there are more than one item here,
so I click and hold to reveal the extra items.
| | 02:52 |
I want to draw a new ellipse, so I'll
click here and choose Ellipse.
| | 02:55 |
And then, I can come over to my designer
surface and draw a new ellipse.
| | 03:00 |
Control+Z to undo.
Also, over on the left side of the screen
| | 03:04 |
is something called the objects in
timeline.
| | 03:06 |
This is similar to the document outline
inside Visual Studio.
| | 03:10 |
This lists my items and I can click on
them to select them inside the artboard.
| | 03:15 |
This area of the screen is known as the
artboard.
| | 03:18 |
Here's the head canvas, here's the eyes.
And then, I can expand these to see these
| | 03:24 |
sub-elements that make up the eye.
So, let me choose the head canvas, and
| | 03:29 |
then the head node.
Now over on the right side of the screen,
| | 03:34 |
you can see the Properties pane.
This is similar to the property window we
| | 03:38 |
have in Visual Studio.
Except it's arranged in little panels and
| | 03:44 |
the way you do data entry is different.
For instance, if I want to change the
| | 03:47 |
stroke thickness of this item, I can
directly type a number in like 5.5 or I
| | 03:52 |
can use my mouse.
Notice that when I move my mouse over
| | 03:57 |
this item, it changes to a four-headed
arrow.
| | 04:00 |
And now what I can do is hold down my
mouse button.
| | 04:03 |
And drag left or right or up or down to
change that numeric value.
| | 04:11 |
Control+Z to undo, Control+Z to undo.
Now I'm ready to change the gradient colors.
| | 04:18 |
Up here, at the top of the Property
Window is the brush.
| | 04:22 |
You can see I'm currently using this fill
right here, the Head Brush.
| | 04:26 |
I've predefined a brush in the resources
of this application.
| | 04:30 |
Now I can change this out and not use the
Resource Brush.
| | 04:34 |
I can click here to turn off the Brush.
Click here to make a solid color brush,
| | 04:38 |
or click here to use a gradient brush.
Or I can click over here in the brush
| | 04:43 |
resources and pick my Head Brush.
What I'd like to do is modify the colors
| | 04:49 |
of this gradient.
I can do it either individually, for just
| | 04:53 |
this one element.
Or I can change it so it affects all of
| | 04:56 |
the elements, like these legs.
To do that, I'm going to click on this
| | 05:00 |
green rectangle.
And then choose Edit Resource.
| | 05:04 |
This brings up the Edit Resource dialog,
and I can see the gradient fill here.
| | 05:09 |
It goes from a white color,
semi-transparent, to this dark blue color.
| | 05:13 |
I'm going to change this blue value to
green.
| | 05:17 |
Like this, a dark green.
And notice how when I change the brush it
| | 05:22 |
effects the entire object.
We'll make this a little bit darker and
| | 05:28 |
then click OK.
Now I choose another tool that I always
| | 05:31 |
do in Blend, the Gradient Manipulation
tool.
| | 05:33 |
I'll go over here to my Toolbar, click
here on the Gradient tool or press the
| | 05:39 |
letter G, and do you see what happened?
There is a two headed arrow in here, and
| | 05:45 |
the two circles on this arrow represent
the gradient fill areas.
| | 05:49 |
See how if I move this white rectangle
here, it also moves it inside the arrow.
| | 05:54 |
If I want to add another gradient stop, I
can click here.
| | 05:57 |
Dial in a dark blue color for this
gradient stop.
| | 06:02 |
And now you see I can move that on the
octopod by dragging this circle.
| | 06:06 |
I can also change the angle by dragging
either the tail or the head of the arrow.
| | 06:11 |
This is not something that you can do
inside Visual Studio.
| | 06:12 |
My octopod is cute, but it's not
something you'd use in an everyday
| | 06:15 |
business application.
So, let me show you all a pie chart
| | 06:23 |
that's over here in the main window.
This is a pie chart I built out of shapes.
| | 06:28 |
And what I want to do is animate this
arc.
| | 06:30 |
Let me show you how you change the arc
first.
| | 06:32 |
I'm going to click on Appearance over
here, and I'm going to change the
| | 06:35 |
starting angle with my mouse or the
ending angle with my mouse.
| | 06:39 |
So, what I want to do is be able to
animate this at runtime.
| | 06:43 |
For this example, I'll use the animation
tools in Blend because they are much
| | 06:46 |
better than what you have in Visual
Studio.
| | 06:49 |
I'll click here to create a brand new
storyboard.
| | 06:52 |
Storyboards are containers for animation.
I'll leave it at the defaults and click OK.
| | 06:58 |
I get a red border in my Designer that
signifies that every action I do now is
| | 07:03 |
being recorded.
Then I'll go over here to my Timeline.
| | 07:07 |
The arc is already selected and you see
that this yellow line is at the zero point.
| | 07:12 |
This is the start of my animation.
So, I'll click on this plus symbol to
| | 07:15 |
record a keyframe.
It's a plus, and you'll see I get a white
| | 07:18 |
circle here.
Now I'm going to drag this yellow bar
| | 07:22 |
over to the two second mark and add
another keyframe.
| | 07:27 |
Now I'm on the second keyframe.
Now, I'll go over here and change the
| | 07:31 |
starting angle, around like that, and
stop.
| | 07:36 |
Then I'll rewind, click here, and click
Play.
| | 07:40 |
So, it wrote the animation for me.
Again, this is not something you can do
| | 07:43 |
in Visual Studio.
You would have to hand edit the XAML to
| | 07:46 |
do it there.
I liked the animation I always like to
| | 07:49 |
show one more thing.
You can modify the keyframe.
| | 07:51 |
I'll click on this last keyframe and then
I'll go over here to my property area and
| | 07:56 |
choose what's called an easing function.
I'll choose this one here and then I'll
| | 08:02 |
try running the animation again.
So now you see that the animation goes a
| | 08:06 |
little bit further than it was supposed
to and then backs into the original position.
| | 08:10 |
When I save these changes in Blend.
And then return to Visual Studio.
| | 08:15 |
Visual Studio says I detect some changes,
I'll click on Yes to All, and you'll see
| | 08:19 |
that my octopod has changed to reflect
those changes.
| | 08:23 |
In conclusion, remember expression blend
is your friend.
| | 08:26 |
Spend some time learning how to use this
powerful tool.
| | 08:29 |
| | Collapse this transcript |
|
|
ConclusionWhat's next| 00:00 |
Thanks for watching Visual Studio 2012
Essential Training.
| | 00:05 |
Now that you've learned about the core
features of Visual Studio, you are ready
| | 00:08 |
to start writing code for your dream
project.
| | 00:11 |
Visual Studio is a powerful tool and has
many features not included in this series.
| | 00:17 |
That gives you a great opportunity to dig
in and continue learning.
| | 00:21 |
Here are a few areas you might want to
explore.
| | 00:24 |
Visual Studio contains many first-rate
testing tools.
| | 00:27 |
The most prevalent testing for front line
developers is unit testing.
| | 00:30 |
Visual Studio provides the Microsoft test
environment for running these essential tests.
| | 00:35 |
Code coverage data is used to determine
how effectively your tests exercise the
| | 00:39 |
code in your application.
Finally, there are some
| | 00:43 |
performance-testing tools available in
certain versions of Visual Studio.
| | 00:47 |
For the testers in your group, there's a
separate Visual Studio Tester edition.
| | 00:51 |
It provides broad testing tools to enable
manual, exploratory, and scripted testing
| | 00:56 |
of software, as well as a powerful lab
managing system for configuring and
| | 01:00 |
managing test environments.
Team foundation server is a powerful back
| | 01:05 |
end server that provides critical
services for development teams.
| | 01:08 |
TFS contains a bug tracking tool that is
tightly integrated with your source code
| | 01:13 |
and work items.
It has a source control provider that is
| | 01:17 |
easy to incorporate into a copy of Visual
Studio.
| | 01:20 |
You can configure TFS to automatically
build your project with every source code
| | 01:24 |
check in or build it according to a daily
schedule.
| | 01:26 |
TFS also provides a rich set of reports,
just what you're team lead needs to see
| | 01:32 |
to determine the progress of the
development life cycle.
| | 01:36 |
Version control also called source
control is a way to track versions of
| | 01:40 |
your software.
More precisely, it permits you or your
| | 01:43 |
team members to track every single
revision made to a project.
| | 01:46 |
Visual Studio provides all the standard
actions for source control like managing
| | 01:50 |
versions, checking in project changes,
merging seperate code branches and
| | 01:55 |
handling code conflicts, checking out new
code, or rolling back to older versions.
| | 02:01 |
Visual Studio works with many source
control providers including Team
| | 02:05 |
Foundation Server, Git and Subversion.
Do you have a great idea for Visual
| | 02:12 |
Studio enhancement?
If so, you should learn more about the
| | 02:15 |
extensibility story.
Extensions let you build a plugin for the
| | 02:19 |
Visual Studio environment.
Your extension is available within the
| | 02:22 |
Visual Studio IDE.
For example, a spell checker extension
| | 02:26 |
examines all the text in a code window
for spelling errors.
| | 02:30 |
Another popular extension point in Visual
Studio is in the NuGent packages.
| | 02:34 |
Here, you can create a deployable package
for your third party library.
| | 02:38 |
Then, other developers use NuGet to
download your package to use in their application.
| | 02:43 |
The cloud is everywhere in modern
development.
| | 02:46 |
Azure is Microsoft's entry into the cloud
services world.
| | 02:50 |
There is an Azure service project
template in Visual Studio, making it
| | 02:53 |
simple to build custom controls.
Also, there is a publishing tool, with a
| | 02:58 |
single-click websites can be deployed to
your Azure portal.
| | 03:02 |
When you are ready to move beyond Visual
Studio, check out the other titles on lynda.com.
| | 03:07 |
Here are a few titles available from the
catalogue that you might find interesting.
| | 03:11 |
At the top of the list are two of my
latest titles, Building Windows Store
| | 03:15 |
Apps Essential Training and Silverlight 5
Essential Training.
| | 03:19 |
Further down the list are ASP.NET, C#,
SharePoint, and Windows Phone titles.
| | 03:25 |
Don't forget these videos and hundreds of
other topics are always available here at lynda.com.
| | 03:30 |
So, if you need a quick refresher
session, you can come back to the site
| | 03:33 |
and review the topic again.
Once again, I'm Walt Ritscher.
| | 03:37 |
I write about XAML and UI topics on my
blog at xamlwonderland.com.
| | 03:42 |
You can follow me at Twitter,
@waltritscher.
| | 03:45 |
You can learn more about my Shazzam Pixel
Shader utility at shazzam-tool.com.
| | 03:51 |
I always have something cooking when it
comes to .NET, so look me up at the next
| | 03:54 |
convention or invite me over to speak at
your user group.
| | 03:57 |
There is nothing like sharing some tech
talk about .NET applications with your friends.
| | 04:01 |
Good luck.
Now, go create something great.
| | 04:05 |
| | Collapse this transcript |
|
|
