Okay. So let's examine what happened there. So when you created this file MyFirstComp.mxml, this is actually compiled down into an ActionScript class and it creates a new class with the name of MyFirstComp.mxml. So this means all different kinds of things. Number one, it means you can add your own custom, properties, and methods to this class.
So for example you can add functions that do something. You can add your own variables to this, and you can pass it information that it may use, and you have the ability to do that with this custom component. So let's look at the whole process of exactly how to do that, and what I'd like you to do is go back over to your Fundamentals_wt4 and just close that, and close off MyFirstComp.mxml, and open up Fundamentals_wt5.mxml, and you'll see here, I have my main application tag and I'd also like you to open up your Prop method component that's already pre-build for you in the Components folder in the fundamentals project that we're working with, and here, you'll see, all I have is a simple component with a VBox just like we build before.
So what we're not going to do is, we're going to actually add in some ActionScript here, and we're going to define a public property that we can access from outside of this component. So from our main application, we'll be able to access this. So to write ActionScript, one of the ways we can do that is simply by adding in a script block. So make sure you make this right at boom, and say mx:Script and notice Flex Builder automatically adds in the CDATA tags for me.
What these CDATA tags do is because MXML is of course XML, this just prevents the XML parser from getting confused by any code that I type in here. So the CDATA tags just allow me to put that ActionScript in line like we're doing here. So what I want you to use is to use the keyword Public here and declare a variable and use a Var keyword to do that. So say public var prop1, and prop1 is going to be a string. So I want to data type this as a string.
Whenever you are coding an application in Flex, you always want to data type it. Number one, you may get an error, if you don't data type it, and number two, you'll get much, much better performance by actually data typing all of your different properties, and this will result in much better performance within the Flash player. So again, if you are moving from an older Flex application or an older Flash application, be sure that you always declare the type of data that this variable will be.
So now I have simply declared this public property, and what I would now like you to do is simply display this property using a label control. So again, there is nothing in the property currently but we're going to fix that in a moment, but just add in a label control. So say mx:Label and set the text property of this label control as a data binding to that property that you declare.
So I am going to add in a quote, I am going to add in a curly bracket like so, and I am going to say prop1 {prop1}. What this will do is this will bind my text property of my label control directly to this property that I declare, just like we learned earlier.
I'd like you to save your component and bear in mind, right this string has absolutely nothing in it, it's just declared as a string, it's not going to be a very exciting application and switch back to your Fundamentals_wt5.
So the first step of course is to specify our new namespace, which again is in the Components directory in our navigation. So make this writable, and I want you to simply say, xmlns:comp = “components.*”> that will simple import everything within the Components directory into that namespace including our PropMethod.mxml where we declared our public property.
So close that off, and what I'd now like you to do is I want you to actually instantiate the component that you just created. So directly below the Application tag, add in reference of your namespace which is comp, and instantiate the prop method component that you see there (
Transcription by:
Scribe4you Transcription Services