Skip to content
August 14, 2008 / Shrikant Patil

Flex Fonts Style List ComboBox Component

The fonts style list as we see in MS word, excel etc, shows the list of fonts name with that respective font Style, which gives the pre-look to the user when applied it to the text. In flex we don’t have such ComboBox which displays the Fonts List with respective Font Styles. So i caught this point at developed a FontStyleList component.
The FontStyleList component extends the Flex ComboBox component, which uses Font.enumerateFonts(true) method of the class flash.text.Font to get the array list of available Device Fonts. So there is no need to assign the DataProvider to this component, component does it itself. Once it gets the Fonts list, it uses a Itemrenderer to display respective font name with respective font style in ascending sort order. To use the component you must use two *.as files;

  • FontStyleList – is component file.
  • FontStyleRenderer – is ItemRenderer which is used by the component.

Usage Sample:

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

Here is component Source Code : (FontStyleList.as)

package com
{
	import flash.text.Font;

	import mx.collections.ArrayCollection;
	import mx.collections.Sort;
	import mx.collections.SortField;
	import mx.controls.ComboBox;
	import mx.core.ClassFactory;
	import mx.events.DropdownEvent;
	import mx.events.FlexEvent;

	public class FontStyleList extends ComboBox
	{	

		private var fontList:ArrayCollection;

		public function FontStyleList()
		{
			super();
			addEventListener(FlexEvent.CREATION_COMPLETE, listCreated);

		}
		private function listCreated(e:FlexEvent):void{
			fontList = new ArrayCollection(Font.enumerateFonts(true));
			labelField = "fontName";
			setStyle("fontSize",15);
			var fontSort:Sort = new Sort();
			fontSort.fields = [new SortField("fontName")];
			fontList.sort = fontSort;
			dataProvider = fontList;
			itemRenderer = new ClassFactory(FontStyleRenderer);
			dropdown.variableRowHeight = true;
		}
	}
}

You can see that the component is using a ItemRenderer – FontStyleRenderer.as
Here is the source:

package com
{
	import mx.controls.Label;
	import mx.events.FlexEvent;

	public class FontStyleRenderer extends Label
	{
		public function FontStyleRenderer()
		{
			super();
		}
		override public function set data(value:Object):void{
			super.data = value;
			setStyle("fontFamily",value.fontName);
			text = value.fontName;
			dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		}
	}
}

The Trick here is getting the font list form the method Font.enumerateFonts(true) from the class flash.text.Font

Advertisements

5 Comments

Leave a Comment
  1. Bill / Nov 1 2008 2:29 pm

    Hey, you need to call fontList.refresh() before setting the fontList as the FontStyleList dataProvider. Doing this will actually perform the sort that you set up!

  2. cobolian / May 31 2009 4:46 pm

    Thx a lot, you save may day (week ? month ?)

  3. Amy Edward / Feb 7 2011 11:03 am

    will you please let me know about how to embed fonts in Flex ( especially non True Type fonts ) with a little help from the Flash IDE

  4. Alaa / Jan 1 2012 3:46 pm

    Thanks a lot that ‘s really Co0l

Trackbacks

  1. Embedding fonts bold vs. black at Jozef Chúťka's blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: