Embedding fonts in Flex Builder 3 using Actionscript 3

13 10 2009

I’ve been working on something that involves me doing some work with Flex and Actionscript. I needed to place a shape on my canvas and then write some text on that shape. The text field needed to be rotated by 90 degrees. All of the following needed to be done from the Actionscript. As you may already be aware, if I were to try and do this without embedding the font, the text would disappear. The best way I eventually found of embedding an existing system font was the following:

[Embed(systemFont='Franklin Gothic Medium', fontName="Franklin Gothic Medium", mimeType="application/x-font-truetype")]
const FONT_FRANKLIN:String;

Click here to read the full post and information on this code.

To then use this code with my text field, my code was as follows…

var format1:TextFormat = new TextFormat();
format1.font = "Franklin Gothic Medium";
format1.size = 14;
format1.align = "center";
var label1:TextField = new TextField();
label1.defaultTextFormat = format1;
label1.embedFonts = true;
label1.textColor = 0xFFFFFF;
label1.autoSize = TextFieldAutoSize.CENTER;
label1.text = "Connect";
label1.rotation = 90;

It is important to remember to set embedFonts to true, otherwise the text will still disappear!





Getting the text from a HTML select drop down box using Javascript

18 03 2009

I have a web page that uses an HTML select drop down list:

<select name="Company"> <%GetCompanies();%> </select>

When this web page is submitted, I need to show a Javascript ‘confirm’ box that would ensure that the user was sending the document created by the web page to the correct company. In order to do this, I needed to retrieve the selected company name from the select drop down list.

There are 3 pieces of information that you could get from this drop down list. The index (0,1,2 etc) which depends on which option is selected in the drop down list. The value, which in my case was a CompanyId that is retrieved from the database via my ‘GetCompanies()’ method, and the text, which is the actual text that is being displayed in the selected item of the drop down list. I placed the following code on the submit button:

<input type="submit" value="Send" onclick="return confirmSubmit()" />

The ‘confirmSubmit()’ is a Javascript function declared at the top of my page as follows:

function confirmSubmit()
{
var companyIndex = document.invoice.OrgID.selectedIndex;
var companyName = document.invoice.OrgID[companyIndex].text;
var ok = confirm('Are you sure you want to send this invoice to ' + companyName + '?');
if(ok)
return true;
else
return false;
}

So I get the selectedIndex, and use that value to find the text. If you didn’t do it that way, you would get returned ‘undefined’. Another way to find it would be:

document.getElementByName('OrgID').selectedIndex

As opposed to:

document.invoice.OrgID.selectedIndex

If true (Ok) is returned, the button continues to submit as expected. If false (Cancel) is returned, nothing happens and the user is free to change any details on the page.