Duration: 20 minutes
Summary: In this video we will talk about the TabPanel and the PasswordStrength controls. The TabPanel allows us to create tabs on the page. The tab container can hold multiple tab panels, and the panels can have header template and content template. In our example, we will create a container with three tabs that simulate asking the user for personal, address and programming information. In day-to-day programming activities you can use this control as a wizard that the user can fill out and submit. On the first tab, we will add TextBoxWatermarkExtender and a ValidatorCalloutExtender to show off their capabilities.
The PasswordStrength is a very handy control that helps your users visually determine the strength of the password they are typing. As you will see in the example, this control lists many properties that give you the flexibility of controlling the strength of the password. This control is already usable with most of the default values. But then you can tweak the rest of the properties to meet your needs. We will start with the basic control first. Then we will create a similar control but add more properties to it.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: ASP.NET and Visual Studio 2010
Keyword: ASP.NET 4, Visual Studio 2010, ToolkitScriptManager, Label, TextBox, PasswordStrength, TargetControlID, StrengthIndicatorType, PreferredPasswordLength, PrefixText, MinimumNumericCharacters, MinimumLowerCaseCharacters, equiresUpperAndLowerCaseCharacters, DisplayPosition, TextStrengthDescriptions, TabContainer, TabPanel, HeaderTemplate, ContentTemplate, TextBoxWatermarkExtender, ValidatorCalloutExtender.
Welcome back everyone. This is Ayad Boudiab , I'm a senior .net application
developer. We are continuing our discussion on the Ajax control toolkit. As
you have seen in the previous videos, we have already covered a lot of
those controls, like the accordion, always-visible control, the animation,
the collapsible panel, the drag panel, the drop shadow. There's a lot of
those controls that are available. Within that, we are covering many of
In today's video, I'd like to concentrate on two of those controls, which are
the tab panel, and the password strength. As we always do, we will create a
page for each of those controls, drop them on the page, and manipulate
their properties to see how they work and so we can experiment with them.
Of course, there are a lot more properties than I'm covering in every
video, but at least this one will point you in the right direction, so you
can experiment more and more with those controls, and see how helpful they
are when developing web applications.
What I'd like to start with is, of course, the tab panel control. I believe
I already have a page here titled "TabPanelExample." I just added that to
my website. The page is empty. Now I'd like to start with that tab panel
control, but I need to add my toolkit script manager first. So let me add my
toolkit script manager on the page. Then I will add the rest of the controls.
I don't need this error message. Again, if you've watched previous videos,
you've noticed this message is starting up, because I have a couple of
instances of Visual studio working. Most likely you will not run into this
error message when you are working with these examples.
You have the toolkit script manager. Now, I want to add my tab panel. Now
let's go ahead to the left-hand side and see what we have as far as the
controls are concerned. I'm looking for the tab container. Here's the Tab Container.
I'm going to drop that on my page, and now I have an empty
control of tab container. I'm going to give this one a certain height, so
we can see the content. I'm going to make the height equal about 200
pixels. Now I need to add some tab panel within the tab container, because the
container contains the tab panels. The tab panel will contain a header
template and a content template. Let's see how we can work with that. Now
that I have my tab container, I'm going to add a tab panel inside that.
Here's a tab panel. Now, inside the tab panel, I'm going to add the rest of
the information, but first of all, let's give the tab panel an ID. 'TabPanel1',
OK? This is also, of course, runat equal to server. Let's give it
some header text, because if I have the panel showing up, I need some
information that shows up on the header. I'm going to give it some header
text. I made that equal to, let's say I'm looking here for personal
information. So "Personal Info" is the header text for this one. Now,
inside the tab panel, I have header templates and content templates.
For the header template, let's say, just type "Header for personal info",
and let's call this one "content for personal info" Now this is the first tab panel I'm
creating. I'm going to create two more, one for the address info, and one
for the programming info. I'll just go ahead and copy this one, and paste
it a couple of time underneath. Now I have two of those tab panels, ID 'TabPanel1',
'TabPanel2', 'TabPanel3', which is good. Now, of course I don't
want all this to say "personal info." This one should say "address info,"
and this one should say, for example, "programming info".
This is the address, so let's copy that and paste it here. Now I have the
address information. This is for the programming info, so we copy that,
paste it here, and the same thing down here. Now, based on this, let's see
what I have. Let's preview that in the browser. Now I have three tabs with
a height of 200 pixels. I have on for the "Header for personal info", one for
the "Header for address info", and then one for the "Header for programming info". Of
course, it usually says "Content for programming info," but of course you
can put a lot of controls in there and work with them, within the tab. It's
the same thing here, and the same thing here. That's how the tabs work.
Let's see if we can take that a step further, and see what else we can do.
Let's, for example, talk about the first tab. I have the header template
and the content template. The header template, as you saw, shows up on the
header of the tab. Now I need to manipulate the content template. Let's see
what we can do within the content template. Let's go ahead and add a textbox
for this one. Here's the content template. Let's close down here. Let's
add a break after this one, and let's go down here, within the content
template, and let's add a textbox. Scroll up. We're going to add one of
those textboxes, drop it here.
With the TextBox1, Runat="server", that's fine. Now what I need
to do is add a watermark. I'm not sure if you watched the HTML5 videos that
we have covered in other lessons, but a watermark is something that shows
up, within the textbox in this case, and it shows the user what type of
information they are filling in. You could, of course, make that watermark
with an opacity of about .5, so it hardly shows. Then the user would know,
"That's what I should be typing in here." You can put some text in there to
show the user what you are expecting in that textbox. Let's see if we can
take a TextBoxWatermarkExtender and drop it in here, in that location.
I'm looking for TextBoxWatermarkExtender I looked through the list
here that we have, and we need a TextBoxWatermarkExtender, and I drop
that on my page. Now I have the TextBoxWatermarkExtender. I need to
manipulate the properties, like we normally do. For this one, I'm going to
specify my TargetControlID. So TargetControlID is 'TextBox1'.
What type of watermark text would you like to see? The WatermarkText is
what shows up so the user will know what to fill in there. For example,
something like "First Name", so the user will know that they need to fill
in their first name. Now, under the watermark I'm going to put a break,
because I need to proceed with other information, but let's go ahead and
test this one and see what we have. Preview that in the browser. On the
first tab, I have "First Name". Notice where it says "First Name". Now
watch what's going to happen when I click inside the box. The "First Name"
is gone, but I know now that this is a textbox for my first name, so I go
in and type my first name. That's how a watermark will actually work.
Whenever it loses focus, it keeps that watermark, telling the user what
they need to fill out in there.
Now, one more thing I'd like to do in this case, if I were programming this
for a development application, I probably would make this less opaque than
that, just a .5, .4 opacity so the user will know that there's not already
data entered here. That's what we can do with a watermark extender.
Next thing is, how can we work with a ValidatorCalloutExtender? Let's do
that. Right underneath the textbox, down here, I'm going to drop another
textbox. Let me come over to the textbox, control, and drop that on the
page. Now I have 'TextBox2', runat="server". Now in this textbox, we
want a required field validator, so the user will know that they have to
fill out that textbox. It's a required field, so I need to drop a RequiredFieldValidator.
That will be in the validation tab. Here's the RequiredFieldValidator,
I drop it in here. Now it says "RequiredFieldValidator",
"RequiredFieldValidator1" ID. Runat="server", ErrorMessage,
but whatever kind of error message you would like to see,
something like "Please enter the age." Let's say it's the textbox for
age, "Please enter the age."
The other thing I need to make sure of is that I'm specifying the control
that I want to validate. The ControlToValidate would be 'TextBox2'. I'm
validating the textbox, making sure that the user enters some information.
Now if I right-click and preview that in the browser, I should be able to
see another textbox in here. So far, so good. Let's go ahead and proceed
with the rest of the information. Now that I have the RequiredFieldValidator
, how about if I need to use the ValidatorCalloutExtender? I
will show you how this will work shortly. Let's scroll down and look for
the ValidatorCalloutExtender. Here it is. Drop it on the page.
Now, ValidatorCalloutExtender is tied to the RequiredFieldValidator.
So I have the textbox. The textbox has a RequiredFieldValidator.
The RequiredFieldValidator has a ValidatorCalloutExtender,
and I will show you how that shows up when I try to validate the data. The
ValidatorCalloutExtender has an ID, Runat="server", all is good. Now
let's give it a TargetControlID. In here, I'm going to give it a TargetControlID
, and as I specified earlier, my TargetControlID is the
'RequiredFieldValidator1'. Copy that, paste it there. Let's give it a width,
make sure it's in the range I need, maybe something like 300 pixels. Now,
since I'm validating some data, I need a way to submit that information.
Let's go ahead, underneath this, and put a break and drop a button, so I
can submit the data and try to validate it. Here is a button, that button
where the text says "Submit." That's all that I need in this case. Let's
try to preview that in the browser. I should be able to see the following
information. I need to submit without entering the age. Submit. You see?
"Please enter the age." That's the callout extender that I just added. Of
course, behind the callout extender, you have the required field validator.
Try to close it and you will see, where it says "Please enter the age," as
the required field validator.
You also have that callout extender, which will give the user some type of
indication that they need to give this information because it's missing. Of
course, you can get fancy and add lots of CSS, but at the least, that's how
we can work with the callout extender.
Let's go ahead and see how we can work with a password strength example.
Let's add a page. Click here, add a new item, and let's call this one
"PasswordStrengthExample" It's the same thing like we always do. On the top
of the page, we have the toolkit script manager. I can use the same one.
Now, underneath this, I'm going to work with a password strength example.
Let's go ahead and drop a label, and then some text to tell the user to
"please enter the password". Then drop a PasswordStrength control on the
page. Since I have this code, here on the side, instead of you seeing me
typing it, I don't want to run out of time on this video, let me go ahead
and copy that code, and drop it on the page, and we can go over it.
What I have is a label. The label has an ID, "Label1", Runat="server".
It says "Please enter password". So far, so good. I have a text
box, 'TextBox1', that the user will be able to enter the password. I have a
PasswordStrength control that's associated with that textbox, and has an
ID. It's nothing fancy, just basic stuff. It's just a control associated
with a textbox so the user can enter a password. Let's simply save that
and preview it in the browser to see what we have.
"Please enter password." I click inside the box and I start typing. I type
a letter, it says "Strength: Very Weak". It says "Strength: Weak". Now "Strength: Almost OK",
"Strength: Average", "Strength: Strong", "Strength: Unbreakable." I didn't do anything. I didn't add any
of this. I just dropped that control out of the box and associated it with
a textbox, and it's given me this information. It's a powerful control
with all the standard, basic default values, like what you see right now on
the screen. As I'm taking out letters from the password, the strength is
getting worse and worse, even nonexistent.
How about if we make this one a little bit fancier than that? Again, I
already have some code on the side. I'm going to replace what I already
have in here. In this case, I still have the label that asks the user to
enter the password. The textbox is a textbox, but the password strength
control has more properties associated with it. For example, I have the
TargetControlID, I already have that. The StrengthIndicatorType is
'Text'. Let's see, if I say "equal" in here, I have a 'Bar Indicator', or 'Text',
so it's your choice. In this case, we choose 'Text', PreferredPasswordLength
to be 10 characters. You need to have that power because what "strong
password" means to Microsoft is different from what you have as designed on
your website. You have to have a PreferredPasswordLength. Let's say in
this case it's 10. PrefixText is 'Strength:', The MinimumNumericCharacters,
you need at least two numbers. The MinimumLowerCaseCharacters,
you need that to be two. RequiresUpperAndLowerCaseCharacters
to be true, so you have mixed characters. The DisplayPosition is 'RightSide'.
The TextStrengthDescriptions="Very Good;Weak;Average;Strong;Excellent",
etc. Of course, you can control that yourself.
Let's go ahead and save. View that in the browser. Now, when I start
typing, it says "Weak", but I put numbers, it says "Average". I put a
couple of uppercase letters, and some lowercase, because I need to have ten
letters for my password. Now it says "Strong." More numbers makes it say
"Excellent", and adding some more letters, it still says "Excellent". It's
you. You can control, with these properties, how strong you want that
password to be. Again, you can always use the bar indicator instead of text
to show how strong that password is.
I hope this discussion of the tab panel and the password strength controls
have been helpful to you. Please stay tuned for other videos that we have
on Mr. Bool website. Thank you very much for listening. I'm Ayad Boudiab ,
and you take care.