This time it supports the HTML produced by a RichTextEditor. It might be the first demo out there that has both smilies (emoticons) and html text that also includes source, although I didn’t search around :) In any case, it is exploiting the method I posted in the previous post.

The issues that it has is that it doesn’t interpret LI tag, for some reason, but maybe in the future I will sort it out.

Explanations will be coming soon. In the meantime here is the link:

Flex smilies with HTML support demo (view source included): here.

I commented the code, so you can peak around. I will write a full explanation like I did in the previous post, but later on this week (maybe weekend?).

The code that parses the HTML is partially hardcoded (for the format produced by RichTextEditor), and partially generic (the code that processes the HTML).

I will be coming again soon with the explanations, in the meantime enjoy and leave me feedback :)

Anyway, I developed a nice smilies’ engine class, only to lose it by switching to another branch (in git) without committing. So, until I will recode the nice and efficient engine, here is another idea that I had regarding this matter.

The open source library flexlib has a nice container, named FlowBox. To quote it’s creators:

The FlowBox is an extension of Box that implements a FlowLayout algorithm for laying out children. FlowBox will lay out children in a horizontal fashion. When the width of the children exceeds the width of the container, the child is placed on a new row.

That’s great :) So it is like we now have free container wrapping. What if we broke down the string that contains the smilies and put each word in an container? It would be easier for us to insert smilies, each in it’s own container, that’s for sure.

Flex smilies demo (view source included): here.

If you right-click -> View Source doesn’t work, it means you have pop-ups blocked.

If you download the source and make it a Flex Project, don’t forget to download flexlib and link it in your compiler.

As I don’t like to clutter my code with comments, let me explain some parts of the code. The flow is as follows:

1. the user inserts some text
2. the user submits the text
3. the input text is split into words and subsequently into simple text and smilies
4. we rebuild the output text, creating from each text piece/smiley a display object and putting all in a FlowBox

First two points are obvious and I don’t think they require any explanation, the code below does this:

form

<mx:Form defaultButton=”{submitButton}“>

    <mx:FormItem label=”Write something here:“>
        <mx:TextInput id=”messageTI” width=”200“/>
        <mx:Text text=”Supported smilies are :), :(, :P, :D, ;), :O” />
    </mx:FormItem>

    <mx:FormItem>
        <mx:Button id=”submitButton” label=”Do Magic!” click=”handleSubmit(event)” />
    </mx:FormItem>

    <mx:FormItem label=”Split input string:“>
        <mx:TextInput id=”output” width=”200” />
    </mx:FormItem>

</mx:Form>

button click event handler function

private function handleSubmit(event:MouseEvent):void {
    createEmoticons(messageTI.text);
    messageTI.text = ”;
}

Moving forward, we have the main function that actually does the work, creating the emoticons from text. It takes the string to process as an argument.

private function createEmoticons(text:String):void

First we define the smilies’ list, and their corresponding file termination (i.e. for grin, the file is called emoticon_grin.png).

var smilies:Array = new Array(‘:D’, ‘:)’, ‘:O’, ‘:P’, ‘:(’, ‘;)’);
var smiliesGfx:Array = new Array(‘grin’, ’smile’, ’surprised’, ‘tongue’, ‘unhappy’, ‘wink’);

Now the string splitting begins. First we split the string into words, storing all the output in initialArray. The splitting is done with a regular expression like /( )/ because I want to have in the output the spaces too.

var regExp:RegExp = new RegExp(“( )”, “i”);

initialArray = text.split(regExp);

Now we’ll search the smilies in the words (we can have hello:)wazza?, this will pass the first splitting).

for (i = 0; i < smilies.length; i++) {
    initialArray = splitArrayElements(smilies[i], initialArray);
}

I made up a function that takes a token and an array as arguments and does the following: goes through each array element and if it finds the token within it, it will split the string around that token and throw it into the return array (i.e. if we have bla:)bla with :) as the token, the result will be: [bla, :), bla]).

array of strings splitting function

function splitArrayElements(token:String, arr:Array):Array {

    if (arr.length == 0 || token == ”) return arr;

    var returnArray:Array = new Array();
    var tempArray:Array = new Array();

    var escapedToken:String = token.replace(/\(|\)|\[|\]/, “\\$&”);

    var regExp:RegExp = new RegExp(“(”+escapedToken+“)”, “g”);

    for (var i:uint = 0; i < arr.length; i++) {
        tempArray = arr[i].split(regExp);

        returnArray = returnArray.concat(tempArray);
    }

    return returnArray;

}

Now back to the main function. Now we have an array that contains all the initial string split nicely into words, smilies and spaces. During the splitting, some empty elements appear. Also, I will get rid of all the spaces, as there will be enough separation between words in the final result.

for (i = 0; i < initialArray.length; i++)
    if (initialArray[i] != ” && initialArray[i] != ‘ ‘)
        outputArray.push(initialArray[i]);

The basic idea now is to create a FlowBox and, for each element of the outputArray, put a Text if we have a word or an Image if we have a smiley. There are also a lot of calls to validateNow() function. This function validates and updates the properties and layout of the caller object. Don’t ask me why, but we need this, else the FlowBox will appear empty. Also, the dummyFix is there because in the case that you will imput numbers only, the text will not appear. After composing the FlowBox, we add it to the mainContainer which is a VBox (chosen so to simulate a possible chat behaviour).

FlowBox composition

var flowBox:FlowBox = new FlowBox();

mainContainer.addChild(flowBox);
mainContainer.validateNow();

flowBox.setStyle(‘horizontalGap’, ‘0′);
flowBox.width = Math.floor(mainContainer.width * 0.95);

var dummyFix:Label = new Label();

flowBox.addChild(dummyFix);
flowBox.validateNow();

dummyFix.text = “Your message:”;
dummyFix.validateNow();

for (i = 0; i < outputArray.length; i++)
    if (smilies.indexOf(outputArray[i]) == -1) {
        var label:Text = new Text();
        label.text = outputArray[i];
        label.validateNow();
        flowBox.addChild(label);
        flowBox.validateNow();
    } else {
        var image:Image = new Image();
        image.load(‘assets/emoticon_’+ smiliesGfx[smilies.indexOf(outputArray[i])] + ‘.png’);
        flowBox.addChild(image);
        flowBox.validateNow();
    }

    mainContainer.validateNow();

}

And that’s it :) In case you missed the link above, try the demo here (view source included).

Now this isn’t the most optimised code you’ve seen, but I wrote it like this for clarity’s sake. Many improvements can be done (like spliting the string in one command with a regular expression, instead of doing all those useless for cycles; or checking if the text has any emoticons at all; yeah, some things would be nice:) ) but this is only a demo. Maybe if I have time I will create a component out of it, but certainly after I remake all the code for the other method.

The good part is that you have smilies support fast without much fuss. The bad part is that for every word you get an object on the screen. Depending on the size of your chat application and other goodies that you provide around it, this could make the client perform terribly. At least I suppose so, I am not fully certain, but a performance hit should happen.

Ah well, next time I’ll talk about smilies I will show you a much better method that in theory should be the best resource-wise.

Thanks for reading and share this with the world (for your convenience, you can use the bookmark button at the bottom of the post). I am sure many people are still searching for something like this :)

By the way, people that do not have yet Firefox, please do yourself and myself a favour and download&install it: http://www.mozilla.com/firefox/. Thanks!

So, welcome all and enjoy your stay at kiorull.com!