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 them.
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.