This seems to come up every once in a while, especially outside US and UK. People start looking at the PDF generating libraries, and find that when they use a non-latin character it stops to work. It needs some special care but it is really easy to get it working, I’m going to show how to do it, step by step, when using purepdf (a port of iText

Getting ready

You can find purepdf on google code. Once you download the zip you’ll find purePDF.swc and purePDFont.swc, for this example you’ll only need the first one so put it in your projects lib folder and you’re ready.
The next thing you need is a font to use, I’ll be using Ubuntu-L.ttf which can be downloaded from font.ubuntu.com, just drop it in the project. You can use any font, as long as it supports the charset you’ll be using. At this point my project looks something like this:

Flex stuff

To make the example work, we need some basic UI which, in the example, begins and ends with:

As you can see, the text has some polish characters (as Flex text is UTF encoded there’s no problem with putting what you need there). The other thing worth noting is that we’re going to be creating the PDF after a click, that’s important as we want to save the pdf to the user system and that’s only possible when the save function is being called after an user interaction.

What’s left to do now is embedding the font:

The mineType is required to stop Flex from handling the fonts as a font ¹. That’s all the setup we need no we can get to the purepdf code.

Purepdf code

The code that’s needed to start using the font and generatign the pdf takes around 10 lines, I’ll paste it first and than add comments.

In lines 4-9 we’re using the embedded font file to create an instance of an org.purepdf.Font, that’s all you need to do to start using the font. The rest of the code is standard purepdf code.

11 – creates a buffer to hold the pdf file

12 – creates a PDFWriter linked with that buffer and sets the size of the pdf page

13 – gets the PDFDocument from the writer

14 – opens the document

15 – adds a paragraph to the open document. Here’s the important change if you already have some code written, you need to set the second parameter which is the font you’re wanting to use. If it supports the chars you’re using there will be no problem.

16 – closes the document

and 20-21 save the document to the user filesystem.

That’s it, the PDF you get in result looks something like this:

Hopefully this get’s people started. You can find many more examples and tutorials on the google code page for the project.

Download source code.

One of the problems with CSS is that in involves a lot of copy&paste. Having multiple selectors which share a common property value (like a font color) is common, but in CSS you still need to have an individual color for each selector. So you end up with code that looks like this:

Which is ok, but involves a lot of searching and replacing and careful analysis of the changes being made. I’ve been thinking about a way to put constants in there for a while and finally found a nice one today, while reading documentation for Flex 4.5. It’s really simple to use and has an added bonus – the compiler will make sure that the consts are actually defined, which should help with maintainability.

Defining the constants

Let’s start by defining the constants and their value. You need to create a new actionscript file (in my case style\StyleConstants.as), than throw away all the code that’s inside (eg. the package and class definitions), and define a const inside, we’ll use the file later.

Please notice that the variable can be private and will still work (it can also be public).

Putting Actionscript variables in CSS – PropertyReference

Looking at the Flex CSS documentation I’ve found that there’s a new keyword that you can use in Flex 4 CSS – PropertyReference. Since the docs say that “You can use document properties in your CSS” we’re going to do just that. The CSS class will be the modification of the one at the top, I’ll put it in style\Style.css and replace the colors with a pointer to the const declared above.

Getting it all together

The last thing left to do is creating the application that will use the style, it’s also very basic.

As you can see, inside the main Application file, we import the css the regular way, the only addition is the include in line 9, which puts all the constants defined inside the StyleConstants.as inside the Application, allowing the PropertyReference to find them. Once you run this app you should see a great UI looking like this:

Which does exactly what it should – uses the same color for both the Button and TextArea.

Compile time checking?

Yup. If you mess up you’re going to get a message from the compiler himself.

Will get you:

Which is really nice.

Notes

A few things to keep in mind:
1) This will not work with Flex 3.
2) You need to put the links to the CSS and consts in the main application file.
3) You can use a var instead of a const when defining the values. This will allow you to change the style during runtime, but keep in mind that this will not update the styles of the components that were already created but only the newly created ones.
So the code below

Will get you this:

4) This allows you to set more than just simple values, allowing you to get back a functionality described at Flex Examples (Changing the opening and closing easing functions …) using the code below.

5) For other ways that create similar results, check stackoverflow.com

Download source code.

It’s a common requirement for e-mail or password inputs – the second input should not be copy pasted from the first one, to make sure it’s what the user wanted to put in. When using spark my Flex 3 method didn’t work, so just in case someone needs to do the same thing, here’s the code for spark components:

It will also work with a TextArea.

A while ago the way to go, if you needed spell checking in Flash or Flex was Grant Skinners Spelling Plus Library (which still has a lot to offer, especially for Web applications, as it’s much smaller than the Adobe library). But, for a while now, Adobe has been working on their own project, called Squiggly, which I’m going to use.

The Squiggly library

You can download the library files from Adobe Labs. After uncompressing the .zip file you’ll find three files in the libs folder. The one you need for this tutorial is “AdobeSpellingUIEx.swc” – it’s the Flex 4 version for simple integration, so just put it in your libs folder. The “AdobeSpellingUI.swc” is what you would use if your target would be a Flex 3 application. You should use only one of them as putting both in your libs might cause troubles. The third file is used when working with more advanced options given by the library.

Getting additional dictionaries

While it’s nice to be able to spell check English words it doesn’t solve the issue for everyone. Although Adobe seems to discourage using the library with most languages, I’ve had a really good experience while using it with Polish language. So let’s take a look on how to install, and use, additional dictionaries.

First thing you need to do is get the new dictionary. There are many places that can provide you with dictionary files, I usually go to the dictionary listing on Open Office wiki ¹. There’s sometimes more than one set of files available for a given language, but what you’re looking for is usually just the spelling part, which consists of two files – one with a .aff extension and one with .dic. The rule is that the first part of the file names will be the language code, so for English spellchecker you might need “en_US.aff” and “en_US.dic” and for Polish it would be “pl_PL.aff” and “pl_PL.dic“. In my project I’m going to use both, so I’ll just put them in some directory. Here’s how it looks:

Creating a dictionary configuration file

The structure of the configuration file is fairy simple, and more ore less, only points to the files downloaded above, it’s included in the project but just for reference, here’s how to define the support for two languages.

Full project structure

Now we have all the files ready, and can start coding. Here’s how my project looks:

As you can see the project is using the new Flex SDK version named “Hero”, but it was also tested with SDK 4.1. The project downloadable at the end of this article has been created in the new version of Flash Builder “Burrito”, which includes the new SDK, and which you can download from Adobe Labs

The code

To get basic spellchecking to work you don’t need to do a whole lot. I’ll paste the whole code first, and than explain what happens.

The first thing you need to do is configure the spell checker by providing it with an XML configuration you have created. That’s what happens in the creationCompleteHandler. After that you just need to call the enableSpelling function with two parameters: first is the id of a component which should be spell checked, and the second one specifies the language which should be used. The disableSpelling function removes the spell checking, I’ve noticed you need to call it before setting a new language, otherwise it will not change. With just this few lines of code you get a fully functional spell checker. Here’s how it looks when switching languages:

If you look at code, you might also notice that the you don’t need to create a new object of class SpellUI, all the functions are static.

Final notes

A modern spell checking library would not be complete without a way to suggest proper spelling, and this also works out of the box, you just need to right click on an underlined word to get them.

But there are some things to keep in mind when starting to use this library. First, it’s still in development an a lot can change, including the way you use the library. Second, there are some issues with efficiency, the dictionaries are quite big (the Polish one is 4MB, the en_US around 600kB) and even after downloading them the parsing process freezes the application for a noticeable time. But still, a long needed addition to the Flex ecosystem is here, and it’s really easy to use.

Download source code.

When looking at some old project folders I’ve found one of the first skins I’ve created while starting with the Flex 4 skinning model, and I thought it might be an interesting case to look at, source code is included at the end of the post. It’s based on a really nice design done by Adrian Pelletier. What we’ll try to do is create a button which looks more or less like one of his button designs:

What makes it a good design is not only the way it looks but also the way the Photoshop file is created – it’s mostly based on shapes and layer effects which are easy to translate to Flex skin code.

Styling a Flex 4 Button

The Flex 4 skinning model is different from the one used in Flex 3, to keep the introduction short, let’s just say it’s now much easier to create programmatic skins, and you can do it with newly introduced MXML tags. If you ever used Degrafa to skin your components it’s should be fairly familiar, if not please check the example code. The basic usage is straight forward – you need to create a mxml file and you can start putting the new tags to design the skin.

Let’s start with the shadow behind the button, as you can see on the picture above it has 3 parts – a gradient fill, a stroke and an inner shadow, and all of them thrown on a shape of a rounded rectangle. Let’s translate this to graphic tags. First of we need that rounded rectangle, so we define a Rectangle with the corner radius using the new tags:

That’s how easy it is to create shapes using the new syntax. Next we need to define a fill, which according to the Photoshop design is a linear gradient starting from color 0x0f2835 and ending with color 0×153445. We also need an inner drop shadow on it, so let’s add it. We also need a stroke above all this, so we need to add another rectangle which will not have the drop shadow on it, and will define that gradient stroke, just like the design. A few minutes later we have:

It’s not the shortest listing, but remember that I’m only copying the settings from the design. The final flash result looks like this:

It’s almost a easy to create the rest of the design, take a look a the working button with some Flex magic thrown in to get nice transitions between states (viewsource enabled), and after the jump, I’ll quickly point to different parts of the design which are used in the ButtonSkin.mxml

Result

What makes a skin – looking at ButtonSkin.mxml

First of you should define a component for which the skin is designed.

Next you need to define all the states which are defined by the host component (you can check this info on livedocs) which is done in this code:

After that’s done you also need to put the parts of the skin that the host components assumes your skin will have (this is called skinning contract and I’ll write a post about it when I have some time). In the case of Button we need to display a single string (the button label as stated in livedocs) we’re going to use a Label for that and give it an id of labelDisplay according to the contract.

Than we can start putting in the graphics, using the same tags we used while creating the shadow. The only additions is that the values of the gradients change depending on the state, thanks to the new state syntax in Flex 4 it’s much more readable – there’s a different color when the button is in an over state (color.over) and a different one when the button is in the down state (color.down)

To add the smooth color fades between states we also define a bunch of transitions which work on our gradient entries.

Feel free to download the source code and play with it, hopefully it will be a good starting point.

Download source code.

I’ve recently started a project that uses new Flex 4 skinning. It was going great until I’ve added some SkinParts and it started throwing a strange error message on those definitions :

1020: Method marked override must override another method.

After starring at it for a while with utter confusion, I’ve started to investigate what might be the problem. Turns out I was adding skin parts to a spark Group, and the documentation states:

To improve performance and minimize application size,
the Group container cannot be skinned.
If you want to apply a skin, use the SkinnableContainer instead.

Which is exactly what I needed to do. Too bad there was no hint about it in the error string.