Flex, Flash & Fusion: August 2006

10 years of Flash

I opened up the web browser today... Nothing special (or so I thought). I've got my personalized homepage aggregating rss feeds from all over the place. I happened to see a post by FlashGuru and Aral Balkan on MXNA linking to the history of the flash player. I must say, this is a very interesting swf, not to mention it is some pretty impressive work. If you've got some time, definitely go ahead and take a look at it. Its so cool that I had to blog it too!

History of the flash player

Flex-based MDI (Multiple Document Interface)

One thing that traditional web applications don't do well is MDI (Multiple Doucment Interface). Yes, there are frameworks that make it easier, but it simply is not reliable across multiple platforms and browsers. MDI just happens to be *another* one of those things that Flex allows you to do very easily and do well within a web based application. I'm not just talking about using the PopUpManager class to maintain multiple non-modal dialogs within the context of the application. I'm talking full-blown "windowed" applications that run within the context of the Flex swf. Take a look...

This is a prototype MDI application interface that allows for multiple window creation, minimizing/maximizing windows, window drag/drop, window allignment (tile and cascade). Don't forget this is just a prototype :-) ... I have every intention of making this better by adding animation/transitions to it, and by making it a bit more robust.

Sorry, this is closed source, but here's basically how I did it... There is a canvas that is used to contain the "windows". I created a base class that creates the window framework. The base class can be extended to contain pretty much any type of flex component that is derived from the mx.core.UIComponent class. I created a MDIManager class that contains functions for adding/removing windows from the canvas, and it manages alignment/reorganization of the windows.

Hopefully this is a good example to provoke some thought... What else can Flex do for me & my applications?

Launch the MDI demo application

Enjoy!

I'm on Flex.org !

Just wanted to say. I'm on Flex.org! Yep... on the right, My blog at work (Cynergy Systems) is now aggregated by MXNA and is among the "industry experts" for Flex development. Now, thats cool :)

Using mx:Metadata to Define Component Styles

I'm sure that you already know that you can create custom components in Flex. I'm also sure that you know that you can use CSS to style your applications and components. Did you know that you can also use styles of your custom component to define styles on elements within that custom component?

Ok, I may have lost some of you there. Lets take a look at my example below... What I am showing here are 2 custom components side by side (example 1 and example 2). They are two separate instances of my "MXML_Example" component. Yes, they look different, but they are the exact same component. Each "MXML_Example" component contains a mx:Panel, mx:TextArea, and mx:Button.

First, lets look at the source used to instantiate the two components:

<components:MXML_Example width="{(width/2)-20}" left="10" top="80" title="Example 1" styleName="example1" height="200" />
<components:MXML_Example width="{(width/2)-20}" right="10" top="80" title="Example 2" styleName="example2" height="200" />

The instantiation is nearly identical... why the difference? You can see that the styleName attribute is the only significant difference between the two instantiations... that has got to be a clue.

Lets take a look at the source of the "MXML_example" component. In the mx:Metadata tag, you can see definitions for three different different styles.

<mx:Metadata>
[Style(name="panelStyleName", type="String", inherit="no" )]
[Style(name="buttonStyleName", type="String", inherit="no" )]
[Style(name="textAreaStyleName", type="String", inherit="no" )]
</mx:Metadata>

In the creationComplete event, the setStyle method is is used to apply these styles to the components within the "MXML_Example" component.

private function onCreationComplete() : void
{
panel.styleName = getStyle("panelStyleName");
button.styleName = getStyle("buttonStyleName");
textArea.styleName = getStyle("textAreaStyleName");
}

So, we know that the styles on the MXML_Example element get applied to the child elements. Now, Let's take a look at the CSS definitions for the "example1" and "example2" styles.

.example1
{
panelStyleName:"panel1";
buttonStyleName:"button1";
textAreaStyleName:"textArea1";
}
.example2
{
panelStyleName:"panel2";
buttonStyleName:"button2";
textAreaStyleName:"textArea2";
}

You can see that there are different styles defined for the panelStyleName, buttonStyleName, and textAreaStyleName attributes. The css definitions for these styles dictate the styling of the elements within the "MXML_Example" instance. Be sure to take a look at the source code to see the full css definitions that are used for each example.

Open in New Window
View Source
Download Source

All images included within this example copyright 2006 Cynergy Systems.

Custom Slider Components

Recently, a coworker asked me if it was possible to resize the thumb on a slider on a mx:HSlider or mx:VSlider control. I have never had the necessity to do this, so I really had no idea if it could be done. After a little perusal of the Flex 2 API documentation... turns out that it can be done, and its pretty easy.

First thing you need to do is create a class that extends the mx.controls.sliderClasses.SliderThumb class. In the constructor, set the desired size. In my example, I just made it 25x25 pixels. When you instantiate the Slider, implement the sliderThumbClass attribute with a reference to your extended SliderThumb class. For example

<mx:HSlider sliderThumbClass="components.LargeSliderThumb"  />

By assigning the sliderThumbClass, the slider thumb is resized and the desired effect has been achieved.

I also decided to play with skinning the slider, just for fun. Don't tell me my icons are pixelated b/c already know. :) I used the thumbUpSkin, thubOverSkin and thumbDownSkin style attributes of the mx:HSlider element to use png images instead instead of the default skin. This shows how the different skins are rendered with the different sizes.

View Source
Download Source

Just MXML and AS3

Hello everyone. Yes, It has been a while since I posted anything, but that's how it goes when you've got a lot of work to do. I have a ton of posts in the works... if only I had 30 hours a day (or didn't require sleep) so that I could do everything that I want to.

On to the "real" topic here: Just MXML and AS3
Just MXML and AS3 is a new initiative by Ted Patrick, Flex Evangelist (and former coworker) that helps build the Flex community by providing examples of working real-world code. It is currently in its infancy, but looks very promising. Why am I promoting someone else's initiatve? ... to help the flex community. I've posted a few examples, and I encourage you to do the same.