Writing XIFF Extensions To Pass Custom Data Over XMPPLearn how to write your own XIFF extensions with custom data that can be sent over XMPP.

As I mentioned in an earlier post, I was working on building a chat room using XMPP (Jabber) and the XIFF AS3 API.
If you aren’t sure how to get started with XMPP and XIFF, make sure to check out that post to get you up and running.

Once I had successfully worked out using XIFF to connect with XMPP and pass data back and forth between the server and the client, I soon realized that I wanted to associate custom data with each user in the chat rooms.
The core protocol used in XMPP to express a user’s current network availability (offline or online, etc) is Presence.
On IM, you know when your buddies come online and become unavailable, etc because you subscribe to their presence.
The user’s presence is also sent to a chat room when he/she joins the room.

The default presence data typically only incorporates information about the user’s status (away, busy, available, etc).

The issue that I soon ran into with my chat rooms, was that our site already had a large collection of users with data associated with each user (id, username, picture, etc) and I wanted to associate this data with the chat users without duplicating the data.
The best place seemed to be their presence since its already linked directly with each user. The only issue I had was figuring out how to do that.

As I soon realized, the XMPP spec is extremely extensible and well thought through and XIFF has tried to manage this extensibility in its library as well.

In XIFF, extensions can be added to any XMPPStanza that is sent to the XMPP server.
By default, there are three core XMPP stanzas, IQ, Message and Presence.
Each of these stanza classes has an addExtension() method.

What I needed to do was write a custom extension class that I could pass into the Presence’s addExtension() method.

Digging in to the code, all XIFF extensions need to extend the Extension class and implement IExtension and ISerializable.

To implement IExtension, you will need to add getNS() and getElementName() methods.

getNS() will return the custom unique namespace that you will need to create and associate with this extension.
eg: http://yourdomain.com/extensionname

getElementName() will return the base XML element name to associate with this extension.
eg: extension_name

To implement ISerializable, you will need to add serialize() and deserialize() methods.
serialize() will convert the typed extension into XML data to be passed to the server while deserialize() will do the opposite and convert the received XML data into the typed extension.
For more detailed information on this, make sure to look at some of the existing extensions in XIFF’s library.

Once the class is complete, you will need to register the extension with XIFF. This registration process informs XIFF of the particular extension so that it knows how to handle it when it is received over the network.
This can be done by calling ExtensionClassRegistry.register( CustomExtension ) anytime before you try to pass the extension over XMPP.
Most extensions provide a static enable() method with the above code in it to handle this registration process.

At this point, you can create an instance of any of the core XMPP stanzas (IQ, Message, or Presence) and an instance of your new extension and then use the addExtension() method of the core stanza to pass in your extension.

The last step is to call the send() method on your XMPP connection passing in the XMPP stanza.

To finish up my particular example, I created a custom user extension that had the user’s id, name, picture, etc and attached it to the user’s presence.
This as mentioned above could be passed with the send method on the XMPP connection and anyone subscribed to my user’s presence would receive the custom extension as well.

One thing that I wanted to do was join a chat room and have this custom data associated with the presence information of all of the existing users in the room that gets broadcast out.
It took me a little bit to realize that the Room class has a feature for this already. Like I said, XMPP has thought of everything already.
When you join a chat room, you call the Room’s join() method and the second parameter allows you to add an array of Presence extensions. Just instantiate your custom Presence extension and wrap it in an array and pass it into the join() call.

Hopefully this helps out others that got stuck on sending custom data over XMPP with XIFF.
Let me know if you have any questions or want any other XIFF/XMPP tutorials.

Posted in Flash, Flex | 2 Comments
Embedding Fonts Using External SWF FilesLearn how to embed fonts in external SWF files, using Flash's character embedding panel, for use in Flex and ActionScript projects.

There are several ways to embed fonts for use in Flash projects. One of the most common ways in Flex (that is now supported in Flash with CS4) is using the Embed metadata tag with unicode ranges. Lee has a good example of using this technique with Flash CS4 on gotoAndLearn(). This seems to be the suggested best-practice technique, but I still don’t find it the easiest.
Instead, I like to use Flash’s character embedding options when possible:

  1. Create a new Flash file and add a dynamic text field on stage (I usually like to enter in the name of the font I’ll be embedding as the field’s text).
  2. Select the text field’s font (family and style in CS4).
  3. Now open the Character Embedding panel and select the range of characters you would like to embed. You don’t want to embed the entire font or else your SWF will be very bloated.
  4. Now to be able to use this font you need to be able to reference it. Before Flash CS4, this was typically the font name that you selected from the font list. In CS4 however this doesn’t work. With CS4, Flash has finally updated their font list to match how other Adobe products list fonts (by family with styles grouped under the family). This is much better when looking for a specific font and trying to match fonts used in Photoshop, etc but it does make it more confusing when trying to determine the name of the font to reference for our purposes. To confirm what font name to reference add the following script to the Flash file to iterate over the embedded fonts:
    var fontList:Array = Font.enumerateFonts();
    for( var i:int=0; i<fontList.length; i++ )
    {
        trace( "font: " + fontList[ i ].fontName );
    }
    

    This will list out all of the embedded fonts in the Flash file by the name you should use to reference them.

  5. Compile the Flash file and your external font SWF is ready for embedding.
  6. Now create a Flex or ActionScript project in Flex Builder and create a property to reference your font like this:
    [Embed( source="/assets/swf/fonts.swf", fontFamily="Helvetica Neue LT Std 95 Black" )]
    public static var HelveticaNeueLTStd95Black:Class;
    

    In the Embed metadata, set the source parameter to point to the SWF we created and set the fontFamily parameter to the font reference we discovered above using enumerateFonts(). The actual property name of the Class can be anything you want.

  7. Add a TextField in your project and set its embedFonts property to true. There are two ways to use the embedded font with this TextField:
    • Create a TextFormat object and set the font property to the fontFamily name you used in the Embed tag above. Now set the defaultTextFormat of the TextField to this TextFormat object.
    • Create a CSS file and set the font-family property of a selector to the fontFamily name you used in the Embed tag above. Load and parse the CSS into a StyleSheet object and set the styleSheet property of the TextField to this StyleSheet object. Make sure your text is using the selector from the CSS file.

That’s it!
No need to figure out the unicode range of the characters you want to embed. Just use Flash’s Character Embedding panel that you’ve probably been using forever.
It should be noted that Lee’s technique referenced at the top of this post is probably still the best way to do runtime font loading.

Posted in Flash, Flex | 2 Comments
XIFF GUI (AS3 XMPP Demo)I've been working on building a chat room using XMPP (Jabber) and the XIFF AS3 API and have released a full-featured XIFF overview demo with source code.

XIFF GUI

Click image to view demo (Right-click demo to view source)


I’ve been working on building a chat room using XMPP (Jabber) and the XIFF AS3 API.
As Mike Chambers mentioned back in August, unfortunately there’s not a lot of documentation or tutorials out there for getting up and running with this library.
If you do want to get started, hopefully this will help you out.

First things first, you’ll need an XMPP server running. I’ve setup Openfire which is an open source, cross-platform, easy to setup XMPP server.
Next you’ll need the actual XIFF library.
Once you have the server installed and setup and the library downloaded, you can follow along with Mike Chambers tutorial up above for establishing an initial connection using the XIFF library.
Now at this point, you’ve managed to connect to an XMPP / Jabber server, join a room, and send a message to the room. This was great when I was jumping in and just trying to figure out how to get started. After you get your head wrapped around this, you’ll probably ask yourself the same thing I asked myself… “sweet… but now what?”
At this point you’re kind of on your own… or at least I was. I searched and searched but couldn’t find much more than a couple of simple tutorials very similar to Mike’s.
The one exception to this was a demo that I found from Nick Velloff that included source.
The demo shows examples of connecting to an XMPP server, logging in, registering, adding buddies, removing buddies, displaying the logged in user’s roster (list of buddies), changing a buddy’s group, changing the logged in user’s presence, messaging your buddies, and creating a multi user chat room. Shew… what a God-send right?
Well, once you download the source code and try to get it running locally you’ll soon realize that its not the immediate help you were hoping for. This demo was released back in October of 2007 and since then the XIFF library has been overhauled quite significantly.
Trying to alter the demo’s source to fit the new code was not an immediately simple fix either.
So anyway, I decided to sit down last week and go through every line of the demo code and update it to work with the latest XIFF library.
I also groomed the code a bit to make it take advantage of the Flex layout engine, separate the connection logic from the view, and fix some things that weren’t completely working in Nick’s original.
One other important thing to note is that the source code of my demo includes the current XIFF library for two reasons: 1) In case the library changes again and I haven’t updated the demo, you’ll still be able to download a completely functioning sample, and 2) I had to make some minor tweaks to the library to remove the voids from the constructors and add clone and toString methods to all of the events. I have submitted bug reports for both of those issues and hopefully they will be fixed soon, but until then I made the tweaks myself.
If the team over at Jive Software does not want me to include the source I will remove it and then explain what needs to be tweaked.

Hopefully this demo will help you as much as it helped me, although I have to say rewriting it probably helped me learn XIFF a lot more than just downloading a completely working sample, so definitely take your time with it, there’s quite a lot under the hood.

To download the source, click on the image above to view the demo and then right-click on the demo to view and download the source.
Please note that my host is not setup with a working XMPP server so the demo is not functional above, you must download it and connect it to your own XMPP server to see it fully functioning.

As the XIFF library changes, I will try and keep this demo updated.

Posted in Flash, Flex | 10 Comments
AS3 Syntax Highlighting (with SyntaxHighlighter 2.0)SyntaxHighlighter was recently updated to 2.0 so I updated my AS3 brush to be compatible.

SyntaxHighlighter was recently updated to 2.0 and with it there have been quite a few nice additions, but unfortunately it also kills all of the custom brushes. I realized this when I upgraded to the latest version and all of my AS3 syntax highlighting stopped working.
I decided to go ahead and update my AS3 brush to be compatible (and make my blog’s highlighting work again).
One of SyntaxHighlighter 2.0’s new features is support for multiple styles. I’ve included a Flex Builder style that you can use to have the AS3 syntax look the way Flex Builder styles it by default.

You can download my AS3 extension here.

Posted in Flash | 4 Comments
And it begins… againAn introduction to yourpalmark and an explanation of the retirement of digitalflipbook.

For quite a while I’ve been a bit bored with digitalflipbook.
Not so much the content of the site, but the look and the name.
I put up my first iteration of the site in early 2000 when I was graduating from college and looking to create a portfolio website to land my first job. At the time I really liked the name. It literally was a digital version of my portfolio of 3D animation and artwork (which I associated with one of those little books that when flipped would show an animation).
As of late though, I’ve felt like “digital” has a bit of a dated connotation and the site has moved on from a designer’s portfolio site to a developer’s technical blog.

So without further ado I welcome you to yourpalmark.

Now you might be saying, “but the name ‘yourpalmark’ doesn’t connotate a technical blog”… and you’d be right.
Who knows what tomorrow will bring so I’ve decided on a name that just represents me.
This allows me to keep the blog going in its current form as a technical resource for Flash and Flex but also keep it open-ended in case I ever decide to become a game show host.

Posted in General | 1 Comment
Language Reference UpdatesLanguage References updated for the release of Flash 10.

I’ve updated my Language References post for the release of Flash 10.

I’ve also added a subheading for beta language references and added Flex Gumbo to the list.

I’ll continue to try and update the post.

Posted in Flash | Leave a comment
SecurityError Loading Local Files AND Accessing Internet ResourcesHow to avoid the dreaded Security Sandbox Violation: Security Error: Error #2148 when importing, moving or renaming a project.

When you create a new Flex or ActionScript project in Flex Builder you are immediately able to access local files (config XML, etc) and internet resources at the same time.

But if you decide to import a project, or move or rename your current project suddenly you’re prompted with the dreaded Security Sandbox Violation: Security Error: Error #2148.

I’ve had this happen in the past, but often I was just loading a local XML file and I would just add -use-network=false as a compiler argument and all would be happy.

This however will then prevent you from accessing resources from the internet presenting you with yet another Security Sandbox Violation: Security Error: Error #2028. Not a great solution.

Lo and behold, Jesse Warden has the fix.

But to quickly recap, when Flex Builder creates a new project, it adds a new line item to two files giving permission to the new project’s bin directory to access both local and internet resources.

Here is the location of the two files (flexbuilder.cfg and flexbuilder.fbr):

PC:
C:\Documents and Settings\[username]\Application Data\Macromedia\Flash Player\#Security\FlashPlayerTrust

Mac:
[user]:Library:Preferences:Macromedia:Flash Player:#Security:FlashPlayerTrust

Now just add a new line item to each file (copying the one above if necessary) and change the paths to match your project’s bin or bin-debug directory.

Done.

Posted in Flex | 4 Comments
Color Name Class (SVG 1.0 – X11 and VGA)Here's a class for you that defines the names and hexadecimal values of all the colors in SVG 1.0, including the X11 colors and the HTML4 colors, based on the VGA colors.
UPDATE (2009-05-17):
  1. Renamed class from Color to ColorName
  2. Changed package to yourpalmark
  3. hexValue property has been renamed to color
  4. Added a toString method to trace out the properties of the ColorName object
  5. Changed license from New BSD to MIT

One small thing I’ve always found a bit handy with CSS in XHTML is the ability to type familiar names for colors rather than the hex value.

Unfortunately, Flash’s StyleSheet does not support color names at all and Flex’s StyleManager only supports the 16 basic VGA color names.

I decided to write a class that adds static properties for all of the color names defined by SVG 1.0 (The colors in SVG 1.0 include the X11 colors with the addition of gray/grey variants. X11 includes the 16 basic VGA, or HTML4, colors as well). This class also adds two static convenience methods for returning a ColorName object by passing in the color name or hexadecimal color value.

While this class does not extend the CSS parsing capabilities of Flash, it could be used by an advanced StyleSheet class that overwrites the parseCSS method using this class as a lookup.
This class could also be extended to add (or overwrite) color values specific to a project you are working on. By setting up static properties for a project color set, the project team could be assured that the colors being used are consistent between team members.

Description:
The ColorName class defines the names and hexadecimal values of the colors defined in SVG 1.0.

Documentation:
ColorName Class Documentation

Download ColorName Class

Posted in Flash | 4 Comments
Reposition ScrollBars in Flex ComponentsAn easy-to-follow explanation on how to move the ScrollBars from the right side of Flex components to the left.

I was under the assumption that someone had already figured this out, but I searched forever last night trying to find out how to move the VScrollBar to the left-hand side of a TextArea component and came up with nothing. (If I’ve overlooked something, forgive me… but at least this will help others when trying to find the answer).

After digging through the source code for a bit, I came up with the solution.
Now this has only been tested with the TextArea component and vertical scrollbar, but should work with any component that extends ScrollControlBase and should work with the horizontal scrollbar as well.
The other thing to keep in mind is that this might (and probably does) mess up the size calculations of the component… I didn’t look into that.

So without further ado, create a class that extends the TextArea component and override the protected updateDisplayList method like so:

protected override function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
{
	super.updateDisplayList( unscaledWidth, unscaledHeight );

	if( verticalScrollBar && verticalScrollBar.visible )
	{
		verticalScrollBar.x = -verticalScrollBar.width;
	}
}

Dead simple.

This sets the vertical scrollbar of the TextArea component to the far left side of the component. You can change the verticalScrollBar.x value to whatever you like to position the scrollbar elsewhere. Also, you should be able to do the same check for horizontalScrollBar and change its position within the if statement to move it. Like I said, I haven’t checked that out, but it should work.

Let me know.

Posted in Flex | 5 Comments
Adobe Edge Article: Geocoding with Papervision3DA link to my article on Adobe Edge about using Flex and Papervision3D to geocode.

The latest issue of Adobe Edge, with my article on using Flex and Papervision3D to geocode, just went live.

Check it out here.

Posted in Flex | 23 Comments
  • Pages

  • Categories

  • Archives