Duration: 19 minutes
Summary: In the previous videos we discussed how to work with ASP.NET Ajax controls on the server side, and how to set up the control toolkit to work with the controls on the client side. I showed you couple of examples on how to use the controls. In today’s video, we will be discussing couple new controls: AlwaysVisibleControlExtender and the AnimationExtender. As the name implies these controls are extenders, so we expect them to extend existing controls. We will start by adding a ToolkitScriptManager on the page, then adding a Panel. The AlwaysVisibleControlExtender and AnimationExtender will be extending this panel. As we scroll through the text on the page, we will notice that the AlwaysVisibleControlExtender will always stay on the top and docked to the top right corner of the page. The animation extender will add some animations when the user clicks on the panel.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: ASP.NET Ajax and Visual Studio 2010
Keyword: ASP.NET 4, Visual Studio 2010, Ajax, ToolkitScriptManager, Panel, AlwaysVisibleControlExtender, TargetControlId, VerticalSide, HorizontalSide, VerticalOffset, HorizontalOffset, AnimationExtender, Animations, OnClick, Sequence, Pulse, Parallel, FadeOut, Duration, ScaleFactor, ScaleFont, FontUnit, Fps, Unit, Center.
Welcome back everyone. This is Ayad Boudiab, I'm a Senior .Net Application Developer, and we've been discussing AJAX in the last few videos. We talked about AJAX on the server side, when we talked about the UpdatePanel and the ScriptManager. We discussed all those on the server side, and of course, here, we're talking about ASP.NET AJAX.
The other thing is, we took those controls and we found the DLL, we downloaded that and we saw three ways of being able to download the Control Toolkit or installing it, but for the purpose of our discussion remember that we added the tab in here for AJAX control toolkit, and we right clicked in here, when we added some items. We chose the DLL, remember the DLL that we had in here under the bin folder, we chose the AJAXControlToolkit DLL. This one gave us all the controls that you see on the left hand side.
Okay, so I can drag and drop those controls on my page. But, again, in this case I'm using Visual Studio 2010, but you don't have to, you can get a lot of those just by writing in your choice of any editor that you can work with.
Now, what we tried to do today is, we need to talk about a couple controls. The first one is the AlwaysVisibleControlExtender , and then the AnimationExtender. These are the two items that I would like to talk about today. For that, I will need to create a page and then work with those controls and see that they are in fact on our web site. Let's go ahead to the right-hand side. Let's right-click on the project and add new item. That new item will be an ASP Web Form. In this case let's call it "AlwaysVisibleControlTest". AlwaysVisibleControlTest, and we click add and we end up with an empty page.
Here's the page, and I can look over at my left-hand side and basically look for the control that I'm interested in. As you know, when we work with those controls, the same way we've done with the server side, we need to make sure first we have a ToolkitScriptManager. I take this ToolkitScriptManager, and I drop it on my page. Doing so will allow us to work with the other controls that we'll be discussing.
It already exists. I don't want to replace the DLL. Apply to everything. When we drop this control, the ToolkitScriptManager, I'm able to work with the rest of the controls. Otherwise I'll get error messages telling me there's no script manager to work with on the page. Here's my script manager, I don't want to change anything on it, it already has an ID, it has a Runat="server". That's the basic stuff that we've got with any control that we drop on the page.
Now, the other thing is, I'm going to drop a Panel and then change the Panel a little bit. Then work with the AlwaysVisibleControlExtender and the AnimationExtender. That 'Panel' is basically part of the 'Standard' controls that we work with in ASP.NET, it's not part of the control toolkit. I'll take the Panel and I drop it on the page. The Panel has an ID, let's call it, for example, 'pnlContent' for panel content, Runat="server", and within that panel I'm going to add the current date and time.
I'm going to put that in an H3 form. Let's put the DateTime, . That's the date time available within the Panel. Let's go ahead and save.
Another thing that I'm interested in is, I want to give this Panel a little bit of style. I'm going to change the background and some width and border and stuff, but since the styles are not the main part of our discussion, let's just go ahead and copy those and paste them here. We've got the background-color for the HTML page, it should be 'White'. Then, the staticPanel that you see here, has width, background-color, border and padding. OK? Now, this is the class that I want to apply to the panel that I have here. In this case, I'll say CSSClass, equals, and Visual Studio should be able to help me here, it will recognize that I already have a staticPanel Class CSS. I applied that to the Panel.
If I right-click and view that in the browser, I don't have anything added to the page yet, other than the Panel. The panel includes the DateTime, and of course, I have the ToolkitScriptManager, but I didn't add any of the other controls that I'm interested in. Here's the page, it's loading. I don't have much going on on it. It takes a little bit the first time, it's just loading that from the localhost.
Here's the Panel, Wednesday, May 02nd, 2012. OK? Let's go ahead and close that for now and let's proceed with what we need to continue. Remember, we're talking about always visible control, and as I mentioned in the beginning, it's an extender, so it must extend something. Right?
Let's go ahead and scroll down here until we find AlwaysVisibleControlExtender. By the way, these are not in alphabetical order, so sometimes it's hard to find the control you're interested in. Here it is, AlwaysVisibleControlExtender. I drop that on the page and then I have the usual properties for the extender. Now, there are a few properties I'd like to change for this extender. Let's go ahead and start changing some of those properties.
First thing is, as I mentioned before, it's an extender, so it must extend some control. And as you saw earlier, I just created a panel, so I'm trying to extend that panel and give it some more properties. My TargetControlID in this case is the 'pnlContent' that you see here. That takes care of the first property, making sure that I'm targeting the control that I'm interested in.
The next item that I'd like to do is basically set the properties for the VerticalSide, HorizontalSide and Offsets, because I need to know where this AlwaysVisibleControlExtender needs to be.
The first thing that I will set is the VerticalSide, and again, Visual Studio is going to help me here, I'm going to put that on the 'Top'. Then the other one is for the HorizontalSide. That will be on the 'Right', so it will be Top, Right. The next items are the VerticalOffset and HorizontalOffset, and I need to make those to be equal to 10 pixels, for the HorizontalOffset, and the VerticalOffset also equal to 10.
We set all the properties that I'm interested in, I'm going to target that specific control, 'pnlContent' content, and then the VerticalSide and HorizontalSide are on the top-right, so it's going to show up here, on the top-right. And then, the Offset will be 10. That's about it for the control extender that I want to show.
Let's go ahead and save, preview that in the browser. Here it is, on the top-right with a 10 offset on the top and right. Let's give it a little bit more space, because it's wrapping to the next line, so let's make it '225', and preview that. Here it is, on the top-right corner, the Control Extender.
Now, the other thing is, I'd like to add some text to show you the power of this extender. What I did is I copied some text from the scripts that I had from previous videos, just the simple text, so nothing to worry about in there. Here is the text I'm going to put underneath here, this is the text, I'm going to go ahead and save, and as you notice here there's a lot of text on the page. Let's go ahead and preview that on the browser. OK?
You notice, here's the content, and here's the control on the top-right corner. Now, as you notice, as I'm scrolling, it's always on top, it's not going away, it's stuck to the top-right corner and staying there while I'm scrolling. This is one good way of using this type of control. Let's say you're writing an application for users taking an exam. Let's say we have a Microsoft ASP.NET certification exam, and you need to display the actual time on the page, and you see the time going down so users know how much time they have left on the exam. You can always show that, on, for example, top-right or top-left, or any place it doesn't overlap with the text you're interested in.
In this case, we're doing it in the top-right corner. As you notice, the control is there, and as we scroll, it's not being affected. OK?
Now, let me add one more thing. As I mentioned to you at the beginning of the video, I'm going to add the AnimationExtender. The AnimationExtender will help us do some animation with the control, and you will see more about the AnimationExtender in other videos, but in this case let's go ahead and experiment with an AnimationExtender and drop that over here on the page.
Here's an AnimationExtender. Let's change some of the properties for that extender. Now, this AnimationExtender, because it's an extender, it must be targeting some type of control. Let's go ahead and set that up. I already have the ID and the Runat="server". The only thing that I'm missing is the actual TargetControlID. The TargetControlID, again, is the 'pnlContent', like you saw earlier. I'm targeting this and I need to do some animation to that control. Now, inside of that I have the 'Animations' tag. Inside the 'Animations' tag, I'll put what I'm interested in. How would this animation happen? How does it take place? In my case, it's on the click. When the user clicks on the panel, something will happen.
In this case, then, I'm going to use, On Click, to take care of that, so when the user clicks on the control, something is going to happen. Now, these animations could happen in sequence, or in parallel. As the name implies, in sequence, one after the other, or parallel, a few of them happening at the same time.
Let's go ahead and start with a 'Sequence'. For that sequence I'm going to do, first, a Pulse. Let's do a Pulse. That Pulse is going to have a duration. You'll notice that sometimes Visual Studio will help me and sometimes it won't, and in this case it's not helping me with the properties and the attributes on the elements in the attributes. So, in this case I'm going to use 0.3 seconds for the duration of this Pulse. And then, inside that sequence, I'm going to do a Parallel execution. For the Parallel one, I'm going to, again, give it a duration, so that will be equal to 1 for 1 second. The 'Fps' in this case will be equal to 30. Frames-per-second will be 30. And then, while this Parallel thing is happening for the duration of 1 second, frames-per-second equals 30, I'm going to also within that, do a FadeOut. Here's a FadeOut.
Then, I'm going to add one more for the 'Scale'. By the way, you may be asking, where are you getting these properties from? Well, for these I'm going to show you. In the upcoming videos, I'm going to show you where these properties come from so you can set some very complex types of animation.
I'm going to set the ScaleFactor in here equal to 0.5. And I'm going to use the Unit to be equal to 'px' (Pixels). I'm going to Center that equal to 'True'. Also, I'm going to ScaleFont equal to, also, 'True'. And I'm going to use the FontUnit to be equal to 'Pt'(Points). So these are the properties that I'd like to set. Within the animation, when the user clicks on the panel control, I'm going to show a sequence of events.
The first one would be the Pulse, of duration 0.3. The second one is Parallel with duration of 1, and frames per second would be 30, and then I'm going to make it FadeOut, and then I'm going to have a ScaleFactor of 0.5, meaning it's going to scale down, Unit is pixels, I'm going to Center that equal to true. I'm also going to scale the font to be true, and the FontUnit to be points. Let's go ahead and save that and try to preview that in the browser.
We have a, some type of typo here. Let's go ahead and fix that. As you notice, I did not close the Scale element. Here's the Scale. Let's go ahead and close this. Go ahead and save. Preview that in the browser.
Here it is, again I can still scroll and here's the actual panel at the top. Now, remember my animation says "On Click" so I need to click on that Panel for something to happen. I click on that, I Pulse, and then here's the Scale and it's gone. OK.
That's how we can do some type of animation when we're working with the animation extender part of the AJAX control toolkit. We learned two things today; how to use the AlwaysVisibleControlExtender, which is very helpful in a lot of situations, and also, how we can use the AnimationExtender, which I'm going to talk more about in the upcoming videos because there are some other controls that also depend on it.
If you have any questions please let us know on Mr. Bool's website. Thank you very much for listening. I'm Ayad Boudiab, and you take care.