JavaScript Name Spaces and Modules

An important concept of modular JavaScript is name spaces usage. 

Since any variable declared in the code automatically becomes a global variable residing on the main window object, 

accidental overriding of variables could occur. Further more, code maintenance and modular components are hard to implement. 

The solution is using name spaces and JavaScript modules. Nested modules can also be easily created.

• Name spaces are implemented using JavaScript objects.
• Modules are achieved using JavaScript immediate functions. 

Here is a simple example:

var myAppNS;

(function (myAppNS) {

   myAppNS.prop = value;

   myAppNS.func = function() { 

      // do some stuff...

   };

} (myAppNS = myAppNS || {}));

Check out this jsfiddle to see an example.

For nested modules and nested name spaces - check out this plnkr.

From Flex to JavaScript - "The Big Switcheroo"!

So, it took me a year. 
As the rich-media world made a giant leap (or fall, depends on your point of view) from Flex / Flash back to good old JavaScript, I didn't want to be left behind. 
I've spend the last year learning new JavaScript frameworks, HTML5 / CSS3 features, new UI libraries etc. 
My future posts will probably target these new technologies. 
Bye-bye Flash, hello JavaScript!

Extending MXML Components with MXML

I've recently needed to create an MXML component that enables users to add MXML
content into it. The solution is simple yet powerful and provides a way to easily create
extendable MXML components.
In the example below, the component holds a ButtonBar and a ViewStack.
The ViewStack itself is a property of the component that can be added in MXML
when using the component. Each user can add as many views as he needs and
the ButtonBar displays the views.

Code can be found here.

Enabling / Disabling drop menu items dynamically

Recently, I had to find a way to enable or disable drop down menu items according
to the current view. While searching for an elegant solution, I've stumbled across a
piece of code that changed my approach all together. It seems that you can add data
binding into the XML data itself. While Flex compiles the file, it parses the XML data and
assigns the correct data binding.
Take a look at the example below:

Code can be found here.

Using Scale9Grid with Flex Image control

When using images with corner radius, we usually want to prevent the corner radius 
from distorting when the image is scaled. This is when Scale9Grid comes to the rescue... 
The implementation is not always clear, so here is a little example of Scale9Grid usage.
The Scale9Grid implementation can also be defined in the CSS style if needed.
Code can be found here.

AutoScroll Canvas Component

Recently, I had to come up with a generic component that can scroll anything within it, according
to the mouse location.
This component extends Canvas and has a "Speed" property and a "ScrollToPosition" method.
Check out the example below. Source can be downloaded here.

Filtering out Chart columns from a DataGrid

Many times we use a combination of Grid and Chart to display the same data and we use the
same data provider for both. The problem starts when you want to filter out some data from the
chart (for example) but not filter it out in the grid.
If you use the same data provider and a filter function, the data will be filtered out in both. 
A colleague from work offered a solution to use XML filtering for this task.
I've implemented this idea using an XML based data provider and ActionScript XML filtering 
to filter out data from the chart only.
Take a look at the example below: you can filter out chart columns using the check boxes in 
the grid.
Code can be found here.