Flex notes » Actionscript

Generating PDF-s on the client side (including non-latin chars)

Robert Bak — Thu, 10 Nov 2011 09:59:54 +0000

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:

<s:TextInput id="TI" text="ążółć - works!" />
<s:Button click="createPDF()" label="Generate PDF" y="22" />

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:

[Embed(source="Ubuntu-L.ttf", mimeType="application/octet-stream")]
private var embeddedFont: Class;

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

protected function createPDF():void
{
// Prepare the font
FontsResourceFactory.getInstance().registerFont("newFont.otf", new embeddedFont());
var bf: BaseFont = BaseFont.createFont("newFont.otf", BaseFont.IDENTITY_H, BaseFont.EMBEDDED );
// parameters are:
// family, font-size, style, color, BaseFont
var font: org.purepdf.Font
= new org.purepdf.Font( org.purepdf.Font.UNDEFINED, 24, -1, RGBColor.BLACK, bf );

var buffer:ByteArray = new ByteArray();
var writer:PdfWriter = PdfWriter.create( buffer, PageSize.A4);
var doc:PdfDocument = writer.pdfDocument;
doc.open();
// When creating a paragraph
// add the font parameter
doc.add( new Paragraph(TI.text,font) );
doc.close();

// save the file
var f: FileReference = new FileReference();
f.save( buffer, "test.pdf" );
}

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.

Notes:

Without it you’ll get a message like “font transcoding requires you to specify ‘fontName’ and one of ‘source’, ‘systemFont’, or ‘sourceList’” ↩

Basic socket server in AIR

Robert Bak — Tue, 25 Oct 2011 11:04:56 +0000

The socket api is relatively simple, but I couldn’t find a simple step by step tutorial on getting sockets working. The basic idea was to create an app that can send text to connected clients (which I’ll be using to send code while teaching a Flex class), and getting that basic functionality working is amazingly simple with AIR 2+.

The config

To make life easier, first I’ve created a class that will hold the configuration for the socket, it’s nothing interesting, but as it will be used later, I’ll put it at the top. There are a few things to keep in mind while choosing the port – it needs to be smaller than 65536 and should be bigger than 1024 (see docs) and ports can’t be shared, so you need to make sure that the port you’re choosing isn’t already used ¹.

public class SocketConfig
{
static public const port:int = 9231;
static public const address:String = "127.0.0.1";
}

The server – setup

Creating the server is really easy. We just need to set up an instance of the ServerSocket class, and start listening and handling incoming connections.

// create a server socket
protected var socket:ServerSocket = new ServerSocket();

protected function createServer(event:FlexEvent):void
{
// bind the socket to a given address and port
socket.bind(SocketConfig.port,SocketConfig.address);
// the CONNECT event is dispatched after a client connects
// to the socket, make sure we handle it
socket.addEventListener(ServerSocketConnectEvent.CONNECT,
clientConnectedHandler);
// start listening for connections
socket.listen();
}

As it’s supposed to push data to multiple clients, here’s the code to keep track of the connections,

[Bindable] // for keeping track of the clients
protected var clientSockets:ArrayCollection = new ArrayCollection();

// adds the client to the list and adds the disconnect handler
function clientConnectedHandler(event:ServerSocketConnectEvent):void{
clientSockets.addItem(event.socket);
event.socket.addEventListener
(Event.CLOSE,clientDisconnectedHandler);
}

function clientDisconnectedHandler(event:Event):void{
clientSockets.removeItemAt(
clientSockets.getItemIndex(event.target));
event.target.removeEventListener
(Event.CLOSE,clientDisconnectedHandler);
}

The client – setup

Setting up a client is as easy, if not easier. You just need to create a Socket, add event listeners to link some logic to it and connect to the server (using it’s address and port)

// create our client socket
protected var socket:Socket = new Socket();

protected function createSocket(event:Event):void
{
// get notified when the socket connects
socket.addEventListener(Event.CONNECT,socketConnected);
// get notified when there's data
socket.addEventListener(ProgressEvent.SOCKET_DATA,socketData);
// connect
socket.connect(SocketConfig.address,SocketConfig.port);
}

We can create functions with trace statements to check if the connection works and, as the only thing this server will be sending will be strings, output the data is being sent.

protected function socketConnected(e:Event):void{
trace("client - socket connected");
}

protected function socketData(e:ProgressEvent):void{
trace("client - socket data");
// read the string from the socket
trace(socket.readUTF());
}

The server – finishing

The last thing we need to do is send the data to sockets, we’re going to use the writeUTF ² of the socket. Notice that this function is called on each of the connected sockets (stored in the clientSockets collection) and not on our ServerSocket instance. It’s also important to flush the data to the socket once finished to make sure the data is sent.

protected function writeDataToSockets(event:Event):void
{
for each (var sock:Socket in clientSockets){
sock.writeUTF("test");
sock.flush();
}
}

That’s it, now we have a fully working server which can push data to clients over TCP.

Please remember that this is a very basic example with no code for error handling, etc. Just enough code to get it working. The very last thing to do is make sure we release the port once the server application closes.

protected function applicationCloseHandler(event:Event):void
{
socket.close();
}

The source code has some additional code for the UI.
Download source code.

Notes:

Remember to close the socket when closing the app, otherwise you might run into trouble when launching it again ↩
writeUTF has a limit on string length – it needs to be shorter than 65536 ↩

Things you might not know about calling actionscript functions

Robert Bak — Fri, 19 Feb 2010 22:20:21 +0000

OK, my guess would be that everybody used a function at one point or another. But there are some things which are less than obvious about an actionscript function. Let’s take a quick look.

Calling functions

Let’s create a simple function which will accept any number of parameters.

function sum(...arg):int
{
var val:int = 0;
for each (var i:int in arg)
val+=i;
return val;
}
// The usual way to call it
sum(0,1,2);

But that’s something everybody knew how to do. The interesting thing is that in Actionscript 3.0 there is a class called Function which also has it’s own methods defined, and all the functions are instances of that class. Most of the methods are inherited from Object but there are two defined for it, which are used to achieve a similar thing – calling the function, this are apply() and call(). The first parameter of both functions is almost always ignored [1].

The definition of call – call(thisArg:*, ...args):* shows that it also takes any number of parameters, than it uses them as arguments, so, as the first parameter is ignored – sum.call(null,0,1,2) is the same as sum(0,1,2).
The problem with calling functions like this is that you actually need to know how many parameters you’re going to use.

Luckily apply() has an array as a second parameter. Which means you can call a function, and pass any number of parameters as an Array. Quick sample of achieving the exact same functionality as before using apply.

// this array can be dynamically generated
var params:Array = [0,1,2];
sum.apply(null,params);

Which is much more flexible.

arguments variable

One more thing which is worth knowing is that inside functions you can access the arguments variable. It’s holds all the variables passed to the function, with the limitation that it doesn’t work when using the ...arg notation in the function definition. So this will not work:

function sum(...arg):int
{
      trace (arguments);
      // throws an error
      [...]
}

But it will work with functions without the ...arg in the definition, for example this prints out both strings:

function printStrings(s:String,s2:String):void
{
trace (arguments);
}

Apart from that this variable also holds the reference to the currently executing function in the arguments.callee property. Things like this come in handy sometimes.

Sample

Using all the tools described (callee, arguments, apply) we can build a quick sample, a class that records the calls to it’s functions in an easy way, and is able to replay them when needed.

CallRecorder.as

package
{
import mx.collections.ArrayCollection;
public class CallRecorder
{
// Just a sample function
public function printJohn(s:String):void
{
rememberTheCall(arguments);
trace ('John says ' + s);
}

// Just a another sample function
// notice that it has a different set of arguments
public function printBob(s:String,times:int = 1):void
{
rememberTheCall(arguments);
while (times-- > 0)
trace ('Bob says ' + s);
}

/** Replays all the calls in memory **/
public function replay():void
{
replayIsOn = true;
trace ("--- Starting the replay ---");
// Notice we actually don't need to worry
// about the arguments
for each (var arg:Object in memory)
(arg.callee).apply(this,arg);
replayIsOn = false;
trace ("--- Stoping the replay ---");
}

/** True if currently replaying **/
private var replayIsOn:Boolean = false;
/** Used for storing the history of function calls **/
private var memory:ArrayCollection = new ArrayCollection();

/** Stores a call in memory, if not called while replay **/
private function rememberTheCall(passedArguments:Object):void
{
if (!replayIsOn)
memory.addItem(passedArguments);
}

}
}

Sample execution:

var recorder:CallRecorder = new CallRecorder();
recorder.printBob("I do");
recorder.printJohn("I do too");
recorder.printBob(":)",3);
recorder.printJohn(":)");
recorder.replay();
// results in
// Bob says I do
// John says I do too
// Bob says :)
// Bob says :)
// Bob says :)
// John says :)
// --- Starting the replay ---
// Bob says I do
// John says I do too
// Bob says :)
// Bob says :)
// Bob says :)
// John says :)
// --- Stoping the replay ---

Not a great piece of software but hopefully interesting.
———————————–
[1] The only case it’s not ignored which I could find is when using anonymous functions.
LiveDocs on Function class
LiveDocs on arguments class