I was in the process of completing my DropDownMenu class and I needed a way to save the information of the selected item in the list and the best thing would be to use the getter functions. In my later posts you'll see the dropDownMenu but for right now to give you an idea, we would need the following details to be accessible when an item is selected:
lable, detail, thumb, data and index.
So, if we used the getter functions normally, I had to create something like below 5 times!
public function get index():int { return _index; }
It may work, but we can do something better, to save the data all in an object and use only one getter function and extract the kind of details we'd like to see.
In order to do so, you should do the following in your Class file. First introduce your object with all of the information you want to save in it, easily like this:
private var _selectedItem:Object = {lable:"EMPTY", detail:"EMPTY", thumb:"EMPTY", data:"EMPTY", index:0};
it will be very easy to overwrite the values of an object, as an example, you are able to set values to such an object like this:
_selectedItem.data = "some data here!";
ok, and after you have the object ready you should write your getter function like this:
public function get selectedItem():Object { return _selectedItem; }
easy right? you don't have to write several getters now and you will call the getter function from outside of the class like this:
If you have read the previous posts, you know that we are trying to build a drop down menu and till here we have the scrollbar ready. and as you know we need a container for our items which are going to be placed under the drop down menu. so we here we create a Box class which enables us input three different parameters in it. Of course we are going to make the box in a way which the parameter are optional so in result we can have different kinds of Box instances which all may look different when we change the input.
we need a class which itself can be used as a MovieClip so we will make sure to extend the MovieClip class. I thought that it's not always a good idea to create dynamic classes through library and reference them via new class() as little by little they can make our code dirty, so wherever we can create classes which they can act as a movieclip or something, it would be better to just extend it.
Alright, for our box to appear on the stage, we will use the follwoing.
myBox.floorWidth > will be used to set our box's width myBox.floorHeight > will be used to set our box's height myBox.font > will be used as our font but remember to create an empty dynamic text object and place it somewhere off the stage and embed the characters you would need in it. You need to do this because in the class later you will see that we will embed the fonts. (Some where I read that it is possible to embed fonts dynamically into classes which was not possible in SA2. I will look into that later as it will be another nice improvements in AS3) myBox.fontSize > This will be the size of our fonts in the Box myBox.fontColor > This will be the color of our fonts myBox.addInfo({}); > I like this part a lot! as we can call the addInfo method within the Box class and add our information to it easily as you can see the sample above. Note that we want our Box class to accept optional features so if we insert "--" for the object values, it will simply ignore it which in result you can have a Box with thumbnails and label and details all available or just a label you can find the final look of our box below.
Notice that we have added no mouse events because OOP is telling us not to make the classes very complicated. so we will just have a box which shows the input. later if we needed a Box which should do something on a click or something, then we can nicely extend our current Box and add listeners to the new sub class.
And here is the Box class below.
As you see, in this class I have learned how to deal with a couple of important functionalities like TextField and Loader which I try to give some brief explanation on them.
then, introduce your variable in the class block which will later hold your string.
protected var myLable:TextField;
protected var myFormat:TextFormat = new TextFormat();
Note that in this example, "myLable" will hold our text string later and myFormat will hold all the necessary properties for the style of our text.
After that you should start the text field class by calling new TextField(); and set any different settings you want for the text field (This is NOT the style of your text but the properties of the text field itself)
There are a lot more properties for text fields that I'm sure you can easily find the list in flash's help documents, but here I have mentioned just the properties that I needed to set in my Box class. so feel free to play around with different properties, I assure you that it's will be fun
OK, after you have your text field set, you need to set the format (or the styling of your text) ready.
After you set the text field and the format ready, it will be the time to link these two objects together like this.
myLable.defaultTextFormat = myFormat;
You're almost done, now insert your string in plain string or html like this.
myLable.text = "my first text!";
myLable.htmlText = "my <b>first</b> text";
That's it, I remember a couple of years ago when I was learning AS2 and found about how text fields are organized, I used to say why we should do a lot of work to display a simple text?! well, these things are necessary, every piece of them are necessary. Computers are dumb, we need to tell them every details
And by the way, please note how differently AS3 treats the auto size thing... I'm not going to talk about the details here, I'm sure you will find a lot of detailed articles talking about other small things here and there, here you just understood how to make a text field appear on your flash movie. If you found something nice with it, make sure to let me know though!
Anyway, there will be a lot of talks about text fields later as in our application we are going to do a lot of crazy things with the text fields.