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...

Using Favicons

Most web sites (or web pages) have an associated icon. Called a 'Favicon' (short for 'favorites icon'), browsers display this icon in the address bar, along with your tab (if you are using a browser with a multi-tab interface) and in your favorites (or bookmarks) list.

Invented by Microsoft, Internet Explorer would make automatic requests for this 16x16 graphic called favicon.ico in your web site's root directory. Developers quickly demanded a way to specify the location of the favorite icon. This became possible with additions to the 'rel' attribute of the 'link' tag. See below:

<link rel="shortcut icon" href="http://www.mysite.com/myicon.ico" type="image/vnd.microsoft.icon">

There were problems with this though. The first was that ico was a Microsoft proprietary format. Most modern browsers (including IE7) now support GIF and PNG formats for the icon, and some even support animated GIF's and PNG's.

Secondly, the 'rel' attribute of the link tag was created to specify the relationship between two linked documents. According to W3C specifications, this attribute could have multiple values that were space separated; so specifying 'shortcut icon' meant browsers wouldn't necessarily understand this as one distinct relationship. Mozilla based browsers such as Firefox specify this attribute simply as 'icon' but 'shortcut icon' should work fine as well-browsers that adhere to the W3C specification of the link tag interpret the attribute as having the values of 'shortcut' and 'icon'. 'shortcut' isn't recognized as a valid relationship, but 'icon' is.

It should be noted that although almost all modern browsers support favorites icons, to date this hasn't been incorporated into any W3C specification.
Read more...

Building An AS3 Project Without MXML

Usually you'll find yourself using MXML to quickly build Flash applications. There are times, however, when you really just want to work with the underlying ActionScript and not use MXML at all. Here's how.
The best way to do this is to subclass the Sprite class. So you would create a class that looks something like the following:

package
{
  import flash.display.Sprite;

  class TestApp extends Sprite
  {
  }
}

Once you've done this, you can create new components (such as text fields, buttons etc.) and add those components to the display list by using addChild(). So your code would look something like this:

package
{
  import flash.display.Sprite;
  import flash.text.TextField;

  class TestApp extends Sprite
  {
    public function TestApp()
    {
      var TestText:TextField;

      TestText = new TextField();
      TestText.x = 50;
      TestText.y = 50;
      TestText.text = "This is a test";
      addChild(TestText);
    }
  }
}

Read more...