Learn how to add custom properties and methods to a component. The video shows a step by step demonstration about adding custom properties and methods to a component in Adobe Flex Builder 2.


More DIY videos at 5min.com

Video Transcription

Okay, let’s go back and you should be in your Fundamentals_wt5 and let’s say I want to be in the reference of this custom component that I just built. Well, just like with a text control or the other controls that you have looked at, you can simply assign this an id. So I will say, id=, and I will call the myComp. So I can now reference this in ActionScript through the value of myComp. And just below that I will in fact do that. So I will add in a Label control. So I will say mx:Label. And what I will do is I will bind the text property of that Label control to myComp.prop1 as you see there. And of course, this is a bindable property and based on what we know, the value of prop1 is of course your first name. So what we should now see is we should see your first name displayed twice, once in the original component and then once in the new Label control since I have set up that data binding. So be sure you save and run your application. And you should see your first name is in fact displayed twice. So that’s how you add a custom property to a component. You also have the ability to add in custom methods to a component. And methods are functions that literally do something. So we are going to learn how to do that and we are going to create a simple method to our component. So go back to your custom component and what I would like you now to do is build in a custom function. Again, we are going to access this function from outside of the component just like we access the property from outside of the component. So assign this a keyword of public. So use the public identifier and I want to say public function method1 and method1 is going to be returning a string. So you want to type this to indicate that this function will be returning a string, okay. And then open up your curly braces, I would like to put those on the separate lines since it’s easier to visualize. And I am just going to use the return keyword as simple as possible and I am going to say, return a string. So I used the double quotes. And I will say, back from the method, as you see there. And I will use my semicolon and what I will do is I will save this like so. You should see that it compiles with no problems at all. I would like you to return to your Fundamentals_wt5 and what I now want you do is just add in yet another Label control. So I am going to say, mx:Label and I am going to specify the text property of this Label control to a data binding. And this time I am going to use myComp which is the id I assigned to my custom component, and then I am going to call my method that I wrote. And the name of my method was method1. So I will say method1, I am expecting a string. Whenever you call a method in ActionScript use the parenthesis, parenthesis. And I going to set up my data binding like so, just to close off my data binding, close off my quote, close my Label control. And you should see there will now be yet another Label control below the two lets say, back from the method. So let’s save, okay. Let’s compile and you will see it says Your first name, Your first name and Back from the method, okay. So what you have learned in this lesson and what we have worked with is we have learned how to successfully architect an application using different components. You have learned all about data binding and how to bind both properties and methods to other controls. You have learned a little bit about how to write ActionScript and you are well on your way to developing best practices in terms of building Flex applications.