Flex Examples
Another good question/dilemma came up on FlexCoders the other day. A curious poster asked how you could embed a copyright symbol, ©, into a Flex application since using © did not seem to work. As it turns out, an easy way to do this is to use a character’s numeric value (©) instead of its code name (©).
Well, at any rate, here’s a handy little chart thing-a-ma-jig to hopefully help out if you’re looking for some specific codes. Granted, you could have probably found it on Google in a fraction of the time, but what fun would that be?
Full code after the jump.
Clicking on a row in the DataGrid control will display both the numeric and string values, for easy copy-paste goodness. Changing the values of the Slider control will change which characters are displayed. By default characters from   to Ȁ are displayed.
Download source (ZIP, 1K) | View MXML
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/using-special-characters-in-your-flex-applications/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var charCodes:ArrayCollection;
private function init():void {
charCodes = new ArrayCollection();
var i:int;
for (i = slider.values[0]; i <= slider.values[1]; i++) {
charCodes.addItem({charCodeNum:i, charCodeValue:"&#" + formatString(i) + ";", charCodeStr:String.fromCharCode(i)});
}
}
private function formatString(str:Object, minLength:int = 4):String {
return ("000000000" + str.toString()).substr(-minLength);
}
]]>
</mx:Script>
<mx:VBox>
<mx:DataGrid id="dataGrid" dataProvider="{charCodes}" width="300">
<mx:columns>
<mx:DataGridColumn dataField="charCodeStr" />
<mx:DataGridColumn dataField="charCodeValue" />
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%">
<mx:HSlider id="slider" minimum="32" maximum="512" thumbCount="2" values="[0, 512]" liveDragging="true" snapInterval="1" tickInterval="32" dataTipPrecision="0" change="init()" />
<mx:Label text="`{dataGrid.selectedItem.charCodeStr}` = {dataGrid.selectedItem.charCodeValue}" selectable="true" />
</mx:HBox>
</mx:VBox>
<mx:Label text="© {new Date().fullYear} Flex Examples" />
</mx:Application>
View source is enabled in the following example.
Update 2007/09/01: I just discovered another trick today. You can use custom XML entities which allow you to use “©” from within your Flex applications instead of “©” or “©”:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/using-special-characters-in-your-flex-applications/ -->
<!DOCTYPE example[
<!ENTITY copy "©">
]>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Label text="©" fontSize="64" />
</mx:Application>
Update 2008/08/19: You can also use special characters in your Flex applications using the following syntax: © (MXML), © (MXML), and \u00A9 (ActionScript), as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/using-special-characters-in-your-flex-applications/ -->
<mx:Application name="Button_label_Unicode_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function init():void {
btn3.label = "\\\\u00A9 - \\u00A9 (ActionScript)";
}
]]>
</mx:Script>
<mx:Button id="btn1" label="© - © (MXML)" />
<mx:Button id="btn2" label="© - © (MXML)" />
<mx:Button id="btn3" creationComplete="init();" />
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Nice to see this sample. Thanks!
But as I know we can directly use Unicode chars without any need of any kind of replacement if you have the right font.
The translation between &#xxxx; and characters seems to be done at compile time, most likely by the XML parser. This is a bummer if you load data from a database and want to display some special characters.
I’ve been desperately trying to create a currency formatter which gets it’s currency symbol via a remote object call to display a € (Euro symbol, char code 8364). Can’t get it to work… all I get is a â (a with circumflex).
Your method works fine if I do this:
But not if I do this:
(and because of that, loading a string containing “€″ obviously wouldn’t work either)
You would have to do this (which doesn’t work so well when you load your data externally, it’s not feasible to scan through all text looking for entities):
As it is I have given up, other currencies are written with their three-letter abbreviations anyway, so writing EUR 33.00 is perfectly fine. However, it would look so much better with a proper €. If you have any similiar ideas of how to get special characters to work in an even more general way I would be very interested.
Theo,
How is it not working?
If I try this in my MXML document it seems to work:
<mx:CurrencyFormatter id="cf" currencySymbol="€" precision="2" /> <mx:Text htmlText="{cf.format(100)}" />Also, if I load a remote document (content.txt) it looks like it parses that € character properly (as long as I set the
htmlTextproperty and not thetextproperty). Observe:<mx:HTTPService id="getText" url="content.txt" resultFormat="text" /> <mx:Text condenseWhite="true" creationComplete="getText.send()"> <mx:htmlText>{getText.lastResult}</mx:htmlText> </mx:Text>And my content.txt file looks like:
Is that roughly what you were looking for, or did I totally misunderstand?
Peter (who hopes the formatting for this turned out)
Yes, it works in a MXML document, because the XML parser translates € into €, but it doesn’t work if you put the € in ActionScript code, or if you load it using remote objects. Like this (in an .as or a script tag):
That will display the literal string in the text field, however
works fine.
I hadn’t considered htmlText though, good idea. It should work regardless.
To properly display the euro character from strings got via a RemoteObject (using AMFPHP) I simply used this line of code :
And oddly enough, this works…
Instead of a weird square character, I get the nice ‘€’ one!
nice! It is also critical that you have the special characters embedded in the font you’re using.
Well, no…
At least not for my snippet.
Hi.
Just looking for a special character for a “does not equal” eg. an equals sign with a slash going through it…do you have any idea if one exists? Thanks
Jack,
On Windows you can use charmap.exe to find all sorts of special characters and their unicode values (which may or may not be different/available, depending on which font you’re using).
The character you want is “Not Equal To”, and is U+2260: ࣔ
Peter
Hi Peter,
Hi
I am trying to display different currency symbols but only euro is getting displayed but not others. I changed flex-config file and added range U+20A0-U+20CF but still no luck. In place of pound , copy right , yen symbols only blank space comes up.
Can you please help me on this ?
Thanks.
Ty for this its prolly the best resource on the web for these codes. I’m surprised Adobe hasn’t provided better. I would normally consider that their responsibility. Ty again.
Could you pls let me know how to handle the HTTP request paramters which has special characters like – (hyphen).
username
the parameter user-name has a special character -.
How to handle this.
pls help.
Could you pls let me know how to handle the HTTP request paramters which has special characters like – (hyphen).
the parameter user-name has a special character -.
How to handle this.
pls help.
Really very use full.
Thanks for this article.
If u use embededd fonts in your app – take a look at this article http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_07.html
Hi
I am trying to display different currency symbols but only euro is getting displayed but not others. I changed flex-config file and added range U+20A0-U+20CF but still no luck. In place of pound , copy right , yen symbols only blank space comes up. Any idea as to what might be causing the problem. First of all am I using the correct unicode range?
I also tried with String.fromCharCode(8364) , for euro it works fine but not for any other currency symbols
Thanks
Saj.
Problem with different currency symbols not getting displayed is resolved. I was using a wrong unicode range. As peterd said earlier the best way to check the unicode range is through charmap.exe (Windows. Just run this from your windows run command). When I used unicode range U+0021-U+FFFC things started working fine.
Thanks
Saj.
Hi Saj,
I have the same problem. Can you help me on this. how did you resolved this.
Please do post the same, if you have a sample.
Admiring the time and effort you put into your blog and detailed information you offer! I will bookmark your blog and have my children check up here often. Thumbs up!
Great info here!
I need to display Math equations and Chemical formulas in a Spark (Adobe Flex 4) text control. Can someone tell me what my options are?
Thanks!
Hey. This works like a charm ;)
static private var entityMap:Object = { ‘ ’:' ’, ‘¡’:'¡’, ‘¢’:'¢’, ‘£’:'£’, ‘¤’:'¤’, ‘¥’:'¥’, ‘¦’:'¦’, ‘§’:'§’, ‘¨’:'¨’, ‘©’:'©’, ‘ª’:'ª’, ‘«’:'«’, ‘¬’:'¬’, ‘’:'’, ‘®’:'®’, ‘¯’:'¯’, ‘°’:'°’, ‘±’:'±’, ‘²’:'²’, ‘³’:'³’, ‘´’:'´’, ‘µ’:'µ’, ‘¶’:'¶’, ‘·’:'·’, ‘¸’:'¸’, ‘¹’:'¹’, ‘º’:'º’, ‘»’:'»’, ‘¼’:'¼’, ‘½’:'½’, ‘¾’:'¾’, ‘¿’:'¿’, ‘À’:'À’, ‘Á’:'Á’, ‘Â’:'Â’, ‘Ã’:'Ã’, ‘Ä’:'Ä’, ‘Å’:'Å’, ‘Æ’:'Æ’, ‘Ç’:'Ç’, ‘È’:'È’, ‘É’:'É’, ‘Ê’:'Ê’, ‘Ë’:'Ë’, ‘Ì’:'Ì’, ‘Í’:'Í’, ‘Î’:'Î’, ‘Ï’:'Ï’, ‘Ð’:'Ð’, ‘Ñ’:'Ñ’, ‘Ò’:'Ò’, ‘Ó’:'Ó’, ‘Ô’:'Ô’, ‘Õ’:'Õ’, ‘Ö’:'Ö’, ‘×’:'×’, ‘Ø’:'Ø’, ‘Ù’:'Ù’, ‘Ú’:'Ú’, ‘Û’:'Û’, ‘Ü’:'Ü’, ‘Ý’:'Ý’, ‘Þ’:'Þ’, ‘ß’:'ß’, ‘à’:'à’, ‘á’:'á’, ‘â’:'â’, ‘ã’:'ã’, ‘ä’:'ä’, ‘å’:'å’, ‘æ’:'æ’, ‘ç’:'ç’, ‘è’:'è’, ‘é’:'é’, ‘ê’:'ê’, ‘ë’:'ë’, ‘ì’:'ì’, ‘í’:'í’, ‘î’:'î’, ‘ï’:'ï’, ‘ð’:'ð’, ‘ñ’:'ñ’, ‘ò’:'ò’, ‘ó’:'ó’, ‘ô’:'ô’, ‘õ’:'õ’, ‘ö’:'ö’, ‘÷’:'÷’, ‘ø’:'ø’, ‘ù’:'ù’, ‘ú’:'ú’, ‘û’:'û’, ‘ü’:'ü’, ‘ý’:'ý’, ‘þ’:'þ’, ‘ÿ’:'ÿ’, ‘ƒ’:'ƒ’, ‘Α’:'Α’, ‘Β’:'Β’, ‘Γ’:'Γ’, ‘Δ’:'Δ’, ‘Ε’:'Ε’, ‘Ζ’:'Ζ’, ‘Η’:'Η’, ‘Θ’:'Θ’, ‘Ι’:'Ι’, ‘Κ’:'Κ’, ‘Λ’:'Λ’, ‘Μ’:'Μ’, ‘Ν’:'Ν’, ‘Ξ’:'Ξ’, ‘Ο’:'Ο’, ‘Π’:'Π’, ‘Ρ’:'Ρ’, ‘Σ’:'Σ’, ‘Τ’:'Τ’, ‘Υ’:'Υ’, ‘Φ’:'Φ’, ‘Χ’:'Χ’, ‘Ψ’:'Ψ’, ‘Ω’:'Ω’, ‘α’:'α’, ‘β’:'β’, ‘γ’:'γ’, ‘δ’:'δ’, ‘ε’:'ε’, ‘ζ’:'ζ’, ‘η’:'η’, ‘θ’:'θ’, ‘ι’:'ι’, ‘κ’:'κ’, ‘λ’:'λ’, ‘μ’:'μ’, ‘ν’:'ν’, ‘ξ’:'ξ’, ‘ο’:'ο’, ‘π’:'π’, ‘ρ’:'ρ’, ‘ς’:'ς’, ‘σ’:'σ’, ‘τ’:'τ’, ‘υ’:'υ’, ‘φ’:'φ’, ‘χ’:'χ’, ‘ψ’:'ψ’, ‘ω’:'ω’, ‘ϑ’:'ϑ’, ‘ϒ’:'ϒ’, ‘ϖ’:'ϖ’, ‘•’:'•’, ‘…’:'…’, ‘′’:'′’, ‘″’:'″’, ‘‾’:'‾’, ‘⁄’:'⁄’, ‘℘’:'℘’, ‘ℑ’:'ℑ’, ‘ℜ’:'ℜ’, ‘™’:'™’, ‘ℵ’:'ℵ’, ‘←’:'←’, ‘↑’:'↑’, ‘→’:'→’, ‘↓’:'↓’, ‘↔’:'↔’, ‘↵’:'↵’, ‘⇐’:'⇐’, ‘⇑’:'⇑’, ‘⇒’:'⇒’, ‘⇓’:'⇓’, ‘⇔’:'⇔’, ‘∀’:'∀’, ‘∂’:'∂’, ‘∃’:'∃’, ‘∅’:'∅’, ‘∇’:'∇’, ‘∈’:'∈’, ‘∉’:'∉’, ‘∋’:'∋’, ‘∏’:'∏’, ‘∑’:'∑’, ‘−’:'−’, ‘∗’:'∗’, ‘√’:'√’, ‘∝’:'∝’, ‘∞’:'∞’, ‘∠’:'∠’, ‘∧’:'∧’, ‘∨’:'∨’, ‘∩’:'∩’, ‘∪’:'∪’, ‘∫’:'∫’, ‘∴’:'∴’, ‘∼’:'∼’, ‘≅’:'≅’, ‘≈’:'≈’, ‘≠’:'≠’, ‘≡’:'≡’, ‘≤’:'≤’, ‘≥’:'≥’, ‘⊂’:'⊂’, ‘⊃’:'⊃’, ‘⊄’:'⊄’, ‘⊆’:'⊆’, ‘⊇’:'⊇’, ‘⊕’:'⊕’, ‘⊗’:'⊗’, ‘⊥’:'⊥’, ‘⋅’:'⋅’, ‘⌈’:'⌈’, ‘⌉’:'⌉’, ‘⌊’:'⌊’, ‘⌋’:'⌋’, ‘⟨’:'〈’, ‘⟩’:'〉’, ‘◊’:'◊’, ‘♠’:'♠’, ‘♣’:'♣’, ‘♥’:'♥’, ‘♦’:'♦’, ‘”‘:’"’, ‘&’:'&’, ”:’>’, ‘Œ’:'Œ’, ‘œ’:'œ’, ‘Š’:'Š’, ‘š’:'š’, ‘Ÿ’:'Ÿ’, ‘ˆ’:'ˆ’, ‘˜’:'˜’, ‘ ’:' ’, ‘ ’:' ’, ‘ ’:' ’, ‘’:'’, ‘’:'’, ‘’:'’, ‘’:'’, ‘–’:'–’, ‘—’:'—’, ‘‘’:'‘’, ‘’’:'’’, ‘‚’:'‚’, ‘“’:'“’, ‘”’:'”’, ‘„’:'„’, ‘†’:'†’, ‘‡’:'‡’, ‘‰’:'‰’, ‘‹’:'‹’, ‘›’:'›’, ‘€’:'€’ };
static public function convertEntities(str:String):String
{
var re:RegExp = /&\w*;/g
var entitiesFound:Array = str.match(re);
var entitiesConverted:Object = {};
var len:int = entitiesFound.length;
var oldEntity:String;
var newEntity:String;
for (var i:int = 0; i < len; i++)
{
oldEntity = entitiesFound[i];
newEntity = entityMap[oldEntity];
if (newEntity && !entitiesConverted[oldEntity])
{
str = str.split(oldEntity).join(newEntity);
entitiesConverted[oldEntity] = true;
}
}
return str;
}
hey i great post!!
i wanted to insert a “” mark in tooltip in flex 4 but dont have a clue how to do it.
and i m using creatTooltip(“sample +someField.text+ text”) function to creat tooltip and inserting text in it.
i want someField.text to b appear as quoted.
thnks in advanced as ur posts are great!!
cheers
In my application, i am not using any specific font, still at some places, i am getting the WON symbol (“\u20A9″) perfectly and at some places, i am getting square boxes.
Why so?
Nishant
In my application, i hav used WON sign, at some places it gets rendered perfectly and at some places it does not. Can anyone tell me , what might be the issue?
Nishant