Using contextual keyboards with StageText on iOS with custom fonts for Adobe Air


The title is a bit of a mouthful but it’s a very specific task that I’ve come across when making apps for iOS using AdobeAir. Often you want to tap in to some of the niceties of the operating system and one of those cases is the contextual keyboard – the specialised keyboards that appear when you’re entering in an email or a phone number for instance. There are 6 of these specified in the SoftKeyboardType class:

So the one thing to know when trying to use these keyboards on iOS is that you need to be using StageText – the standard TextField class will not be able to tap in to these as of yet because it’s really accessing an operating system level function that Adobe Air has not made available to the humble TextField. In that light, this quick tutorial explains how to go about using StageText to ultimately give you the option to use these different keyboard types. I’ve also included instructions on how to use customs fonts for this process too, just to complete the general use case requirements you may have.

  1. Firstly copy the fonts into your assets folder. By this I don’t necessarily mean the “Assets” folder (I have a feeling that this folder sits within a parent folder which is really what I’m talking about). Having said that, you might be able to place them there anyway and just make sure you include a relative path to them.
  2. Embed the font for the device. To do this, add the reference to the fonts into your application.xml file inside the infoAdditions section like so:

    You’ll probably have lots of other things inside your infoAdditions section as well. This is where I am wondering about if you need to have a relative path to your assets folder or not, so it might need to be entered as: Assets/BurbankSmall-Bold.otf but not sure. Will have to be some trial and error.

  3. Embed the font for AS3. You can do this by adding the font to your Flash library, or you can use an embed code. I’ve done the latter and just reference the same files that were placed in the assets folder for bundling. This is the relative path to the file you’re embedding on I believe (or it might just be relative to the src folder). In my case it was one and the same. Embedded as so:
    [Embed(source = "../bin/BurbankSmall-Medium.otf", fontName = "Burbank Small", mimeType = "application/x-font", advancedAntiAliasing = "true", embedAsCFF = "false")]
    private var font_1:Class;

    The fontName argument is important. You can actually make this anything you like for the sake of AS3 however when using StageText it seems to be working on an operating system level and the random name you give it for AS3 won’t mean anything, so it’s safest to use the fonts actual family name. This is really hard to find some times. It took a bit of trial and error and searching the internet to find that the family name for this file was “Burbank Small”. It looks like you specifically want to use the “Postscript Name” if you’re ever looking for the right one.

  4. Finally, if you have used the right name, it means all the hard work is done and you never have to worry about the name again because we can reference it like this:
    var myFont:Font = new font_1()
    myStyle.font = myFont.fontName
  5. In terms of using StageText. I think the easiest thing is to place a standard TextField on to your scene in the Flash IDE and style it as desired (if that’s the way you’re building your interfaces). I’ve created a function that will automatically convert a TextField instance to a StageText instance and copy all of it’s properties over (font/size/colour/position etc.). I’ve wrapped it up in a little class and attached, but you can just extract the function and place it in your own class somewhere if you like. Download the TextField to StageText class. Usage is pretty self explanatory. var
    myStageText:StageText = TextAir.convertToStageText(myTextField)
  6. Finally, to set the keyboard type to email, use the following:
    myStageText.softKeyboardType = SoftKeyboardType.EMAIL

Just a note – you might find that it works on the desktop and not on the device, this is usually because there’s something wrong with stage 2 – either it’s not been added to the infoAdditions properly, or the relative path you think should work, isn’t.


    Creative Digital Agency

    Code and Visual works with clients around Australia to create and build outstanding and accessible digital services. If you want to discus a project contact us now for an initial consultation.


    Recent Posts