I got really busy the past few weeks, but I have managed to get my video player to this point. I haven’t had the time to comment the code enough to release the source. Of course if you leave a comment it may make worth my while. Thanks.
I have been working the last few weeks on a video component that will be used for thingsiknowabout.com video tutorial application. I thought I would take a little time and explain components, especially designing one from scratch and using programmatic skins to draw the interface.
Note: all code snippets will be taken from the source file, the code is commented well as I will only be touching on important steps.
The component that we will be creating is the play and pause button for the video component.
“Yes I could have used the button component that comes with flex but then I wouldn’t have anything to teach you now would I?”
I know the button is simple, however it does show a lot of things that one can learn about custom components.
Here is the play button component we will be creating. Download the code by right clicking then clicking view source. Open the code to follow along.
Package is a special type of namespace that is known at compile time. It is the directory structure that your class resides in. They help by lowering the possibility of name conflicts.
So for an example lets say you want to create a play pause button, you know there are other play pause buttons out there but this play pause button you are creating is special. So you think up a name for your special play pause button and then it hits you. You name it specialPlayPauseBtn. However, on the other side of the globe someone is thinking their play pause button they just created is special too. So they come up with the same name specialPlayPauseBtn. Now without packages if someone was to download your special play pause button and then download across the globe guys special play pause button, then yours would be over written. Then no one would know just how special your play pause button was.
So with packages you are able to create your own directory to store your special components into. I know its simple, especially if you worked in other object orientated languages. I will go into namespace at another time.
So I use com/thingsiknowabout/vPlayer/controls like below.
package com.thingsiknowabout.vPlayer.controls{ |
Matadata tags are used to tell the compiler that it is ok to use the name value pairs. It also puts it in the property panels list. When naming your styles try to explain what they are going to style by looking at the name. Such as the buttons skin when it is in the up state.
[Style(name="upSkin",type="Class",inherit="no")] |
Types of Styles specifies the data type of the value that you write to the style property. Type class allows you to create the style from a programmatic skin or graphic.
Inherit is in the form of yes or no and if yes it is then inherited in any classes that extend this class.
The Icon Metadata is used to define an icon for your component. It can be a png,gif or jpeg file that contains the icon. Size can be no larger then 19×19 pixels.
[IconFile("PlayPauseBtn.png")] |
The UIComponent is the base class for all visual components. You start out by having your custom class extend the UIComponent.
public class PlayPauseBtn extends UIComponent{ |
Extending the UIComponent insures that the component is created properly and receives events at the right time. This is done by methods being “fired” off at a specified time. Example:
First the constructor is called in the component. The constructor needs to have the same name of the class, declared public and doesn’t return a data type.
public function PlayPauseBtn(){ |
There are special methods that are meant to be overridden in the UIComponent. These are listed in the order they are called.
1. createChildren
2. commitProperties
3. measure
4. updateDisplayList
You override the UIComponents createChildren method to create child objects in your component. Such as the playPauseBtn has two display objects, the _skin and the _icon.
override protected function createChildren():void{ |
CommitProperties method is where you want to commit any properties your component has. You can specify a specific order your properties are updated. You never call this method directly. Use the invalidateProperties() to call this method.
override protected function commitProperties():void{ |
Measure method is where you want to set the deminsions of your component and also set your minimum deminsions. Call this method by calling invalidateSize().
override protected function measure():void{ |
Update Display List is where everything comes together. This is where you are going to order the display objects to make sense of your component. Basically your setting up the interface of your component. Call this method by invalidateDisplayList().
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ |
Properties of your component are variables that can be used to set or change the way your component behaves. Such as the Playing property in the PlayPauseBtn. Use get and set to give more control on the setting and getting of these methods.
public function get Playing():Boolean{ return _Playing; } |
public function set Playing(value:Boolean):void{ _Playing=value; invalidateProperties(); } |
Skins come in two flavors programmatic and graphic. The PlayPauseBtn uses both but one or the other. If graphics are not supplied then the class sqPlayBtnSkin is used. The sqPlayBtnSkin extends the ProgrammaticSkin class which gives us all the functions to draw our skins programmatically, hence ProgrammaticSkin.
We want to keep the programmaticSkin as small as possible, because it most likely will be called more then once, especially in a state driven component. We draw the objects using the graphics class and we execute this task in the updateDisplay list.
Please use the available code to find more information on how to achieve this UIComponent creation and skinning process. I hope you learn something. If you have any questions be sure to ask by leaving a comment or emailing me at wilsonk@starssite.com.
Well I spend most of my programming hours concentrating on flex and amfphp. I was very satisfied with the results. AMF allows for binary serialization of Action Script native types and objects to be sent to server side services So long to get and post. I will be posting a full tutorial on the whole process in a few weeks. For now there are some loose ends I want to tie up before doing so.
What I have seen so far, it is very impressive on speed and low overhead on the coding side so far. Now into my learning tonight I was able to use the mx:RemoteObject to communicate with amfphp by calling methods in a php class to connect directly to an mysql database.
My plan is to build a tutorial viewer that will allow you to view tutorials I will be writing on the subject. As for now I am going to sit down with the flex framework guide to dig deeper.
A great resource on this subject is at polygeeks site. http://www.polygeek.com
Well another language barrier to overcome. MXML is what they call it, and it works in a whole other framework then flashCS3. Well I set out to learn flex a few weeks ago, I felt confident because I consider myself an above average as3.0 coder. Even in as3.0 there are always things I can learn to better myself however I just never needed them. Such as creating a component that extends the uicomponent class. I would love to learn more about overriding methods and properties, but I just haven’t needed too. Well that is until now.
I am working on a project called the iCard (More on this later) and it is pushing me to the highest points of my knowledge in as3.0 and now flex. So with me and programming, any time I get pushed to my limits I end up extending those limits, with that said, I decided to blog about my extending experience on the problems Ill face and over come.
I stop at nothing, I mean if I come across a problem, I will search out a solution until I find one. Sometimes it takes me awhile, sometimes not. However I will try to publish my work as fequently as I can leaving out the dry and boring details leaving a summary of the prolbem and a more detail of the solution.
Warning: I am not a writer by no means, so please leave the comments about my writing ability to yourself. It would be greatly appreciated. However if you woud like to comment about the subject at hand please feel free to do so.
The following links are sites I constantly use as references that might come in handy on your own projects. Ill add to it as I go because I am always searching for knowledge. A lot of authors of the listed sites below are highly respected in this field and feed the community quite extensively.
Recommended reference links
