Avg. Rating 4.4

Problem

Create embed fonts/images library to use in several project components and prevent duplicate embedding.

Solution

Create static class, push embed resources in it's Array variable and use this Array items as corresponding classes throughout the project.

Detailed explanation

The main purpose of this recipe is to demonstrate a simple way to prevent duplicate fonts embedding - this same approach can be used for any other embed resource (images, movies ets.) using as library items.

First of all we will add some .ttf files to our project. I've used several windows system fonts as an example. Library class looks like:

package fontsLib
{
   import flash.text.Font;
   
   public final class EmbedFontsLibrary
   {
   public static   var Fonts:Array = new Array();
   
  
[Embed(source="../assets/tahoma.ttf",fontName="Tahoma",mimeType="application/x-font-truetype")]
   private static var   MyTahoma  : Class;
   Fonts.push(MyTahoma);
   
  
[Embed(source="../assets/verdana.ttf",fontName="Verdana",mimeType="application/x-font-truetype")]
   private static var   MyVerdana  : Class;
   Fonts.push(MyVerdana);
   
   [Embed(source="../assets/times.ttf",fontName="Times New
Roman",mimeType="application/x-font-truetype")]
   private   static var MyTimes  : Class;
   Fonts.push(MyTimes);   
   }
}

To use this fonts in the application we should import library class as  import fontsLib.EmbedFontsLibrary. Let's add test RichTextEditor instance as:

<mx:RichTextEditor id="textRTE" text="Congratulations, winner!" 
  width="{width-435}" height="100%" styleName="rte"/>

in creationComplete handler of our application we should add code:

extRTE.fontFamilyArray = [];
   for each (var   _f:Font in EmbedFontsLibrary.Fonts) {
      textRTE.fontFamilyArray.push(_f.fontName);
   }

Now in our RichTextEditor font face dropdown we can see only fonts defined in EmbedFontsLibrary class. These fonts can be accessed as Array items via indexes.

The same approach is used for images illustrated with the next, more complicated example: we create a library class and organize elements as Dictionary() instance to access via string key:

package util
{
   import flash.utils.Dictionary;
   
   [Bindable]
   public class NodeSystemImageLib
   {   
   private static var imageLib : NodeSystemImageLib;
   
   public const ROOT_GENE_THUMBNAIL:String = "rootGeneThumbnail";
   public const NO_ROOT_GENE_THUMBNAIL:String =
"norootGeneThumbnail";
   public const ROOT_GENE_ICON:String = "rootGeneIcon";
   public const INACTIVE_ROOT_GENE_ICON:String =
"inactiveRootGeneIcon";
   public const NO_ROOT_GENE_ICON:String = "norootGeneIcon";
   public const SELECTION_FRAME:String = "selectionFrame";
   public var   imageClasses:Dictionary;
   
   public static function getInstance() : NodeSystemImageLib 
   {
        if ( imageLib == null )
        {
                imageLib = new NodeSystemImageLib();
        }
        return imageLib;
   }
   
   public function NodeSystemImageLib()
   {
        if (   imageLib != null )
        {
                throw new Error( "Only one NodeSystemImageLib
instance should be instantiated" );    
        }
        if(imageClasses == null){
                        //fullfill dictionary instance with assets
images 
                        imageClasses = new   Dictionary();
   
               
[Embed(source="../../assets/geneImages.swf",symbol="rootNodeSym")]
                var rootSym:Class;
   
                imageClasses[this.ROOT_GENE_THUMBNAIL] = rootSym;
   
               
[Embed(source="../../assets/geneImages.swf",symbol="simpleNodeSym")]
                var geneSym:Class;
                imageClasses[this.NO_ROOT_GENE_THUMBNAIL] =
geneSym;
   
               
[Embed(source="../../assets/geneImages.swf",symbol="rootNodeSymIco")]
                var rootIconSym:Class;
   
                imageClasses[this.ROOT_GENE_ICON] = rootIconSym;
   
               
[Embed(source="../../assets/geneImages.swf",symbol="rootNodeSymIcoClosed")]
                var rootIconSymClosed:Class;
   
                imageClasses[this.INACTIVE_ROOT_GENE_ICON] =
rootIconSymClosed;
   
               
[Embed(source="../../assets/geneImages.swf",symbol="simpleNodeSymIco")]
                var geneIconSym:Class;
                imageClasses[this.NO_ROOT_GENE_ICON] = geneIconSym;
   
               
[Embed(source="../../assets/geneImages.swf",symbol="selectionFrame")]
                var selectionFrame:Class;
                imageClasses[this.SELECTION_FRAME] =
selectionFrame;
           }
   }
   }
}

Now we can use it in mxml as:

<mx:Image id="frame" source="{frameClass}" x="0" y="0"
width="55" height="55" scaleContent="true"/>
<mx:Script>
<![CDATA[
   import util.NodeSystemImageLib; 
        [Bindable]
   private var frameClass:Class =  
NodeSystemImageLib.getInstance().imageClasses[NodeSystemImageLib.getInstance().SELECTION_FRAME];
   ...

]]> </mx:Script>

or as

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas   xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"   height="100%">
<mx:Script>
<![CDATA[
   
   import util.NodeSystemImageLib;
   
   [Bindable]
   public var treeData:XMLList;
   
   [Bindable]
   private var norootImageClass:Class =  
NodeSystemImageLib.getInstance().imageClasses[NodeSystemImageLib.getInstance().NO_ROOT_GENE_ICON];
   
   [Bindable]
   private var   rootImageClass:Class =  
NodeSystemImageLib.getInstance().imageClasses[NodeSystemImageLib.getInstance().ROOT_GENE_ICON];
   
   [Bindable]
   private var   rootClosedImageClass:Class =  
NodeSystemImageLib.getInstance().imageClasses[NodeSystemImageLib.getInstance().INACTIVE_ROOT_GENE_ICON];
   
   ]]>
</mx:Script>
<mx:Tree id="myTree"   width="100%" height="100%"
labelField="@label"
   showRoot="false" dataProvider="{treeData}" 
   defaultLeafIcon="{norootImageClass}"
folderClosedIcon="{rootClosedImageClass}"  
folderOpenIcon="{rootImageClass}"/>
</mx:Canvas>

We are now protected from double and so on embedding in our project.

Report abuse

Related recipes