Creating Objects in JavaScript

There are several ways to create objects in JavaScript. Traditionally this was done by creating instances of the function object using the 'new' keyword. A somewhat easier method is to create an 'object literal' which we'll also touch on below.

Creating Objects With Functions

If you're use to creating objects in object-oriented languages like Java, then you're in luck-this will at least seem (superficially) familiar.

The first thing that we'll do is create a function called 'PointObject'. Even though you can call this PointObject function in a standard procedural fashion-what we'll be using it for is to act as a template for other variables. From the perspective of object-oriented programming, you can think of what we're doing as setting up a 'class'.

function PointObject()
{
}

var Point;
Point = new PointObject();


Next we'll create a variable 'Point'. We set this Point variable equal to a new instance of the PointObject function. The act of creating a new instance actually calls the function itself.

Since the PointObject function is called upon object creation, you can think of the code inside the PointObject function as the class's constructor.

Creating Object Literals

Using Javascript's built in object notation, you can easily create an object literal like so:

var Point = {
};


You'll notice there really isn't any object template or class-you're literally creating the instance of the object directly using the '{' and '}' characters.

This is the first in a series of articles on object-oriented JavaScript; next time we'll look at creating fields.

Read more...

How to pass values from HTML to Flash

There have been a number of ways to do this over the years and over different versions of Flash, but the way to do this today is with FlashVars. What are FlashVars you ask? FlashVars is the name of a parameter that you can pass into your Flash movie, via the 'param' tag.
The value of the parameter is a URL encoded string that contains the name-value pairs you would like to pass in. So, for example,if you would like to pass in a color value, you could do something like this:


<param name="FlashVars" value="ColorValue=0xff0000"> Read more...

Creating Custom Components with MXML

When you start building applications in Flex, it won't take you long to find that you need to build your own components. Flex makes this process relatively painless. Here is how you can create your own components in a few easy steps.

Usually, when you're building your own components in MXML, you start off by extending an existing component. As an example, let's create a customized menu bar component that contains specific menus.

Extending

The first thing we'll do is create a brand new MXML file called MyMenuBar.xml. This MXML file will contain our customized menu bar. We mentioned above that we would extend an existing component. Although its fairly obvious how to do this in Actionscript; how do we accomplish the same effect with MXML? By making one of the first lines in your MyMenuBar.xml file the component we're extending. See below.


<?xml version="1.0" encoding="utf-8"?>
<mx:MenuBar xmlns:mx="http://www.adobe.com/2006/mxml">


As you see above, we use the mx:MenuBar tag, and give it an XML name space attribute similar to the same attribute we would give our mx:Application tag inside our main application file.

We could then create our menu bar the way we would normally:

  <mx:XMLListCollection id="MenuBarXMLListCollection">
    <mx:XMLList id="MenuBarXMLList">
      <menuitem label="File">
        <menuitem label="Print..." />
        <menuitem label="Properties..." />
      </menuitem>

etc.
    </mx:XMLList>
  </mx:XMLListCollection>
</mx:MenuBar>



Creating a custom XML namespace

Often you'll want to group your components in a specific folder. For the sake of example, we'll say that we've grouped all of our components in a folder called 'Components' in a subfolder of the folder containing our main Flex application file. How do we go about using this new component from inside our main application?

This is easy-we'll create a custom XML namespace. This is basically similar to the namespace that you place in your mx:Application tag normally. See below.


xmlns:My="Components.*"

The above XML namespace maps a prefix 'My' to the MXML files in a specific subfolder (in this case 'Components'). We can then reference the MyMenuBar.mxml component rather easily:


<My:MyMenuBar />


With a couple of simple steps, you'll find building custom MXML components in Flex to be a breeze!

Read more...