Parsing Tweets with the TwitterString Class

While building a little Twitter aggregator for an upcoming conference, I found myself in need of a set of methods to create hyperlinks from three distinct elements that can be included within a tweet; links, usernames, and hashtags.

I was able to find regular expressions to do all the heavy lifting from various sources on the Web and have created a class which pretty much does all the processing with one method call. Here’s an example of the thing working, followed by example code, and the class itself.

Example SWF

Example MXML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   creationComplete="init()" width="300" height="100" 
			   backgroundColor="#1E1E1E" preloaderBaseColor="#989898">
 
	<fx:Script>
		<![CDATA[
			import flashx.textLayout.elements.Configuration;
			import flashx.textLayout.elements.TextFlow;
			import flashx.textLayout.conversion.TextConverter;
			import flashx.textLayout.formats.TextLayoutFormat;
			import com.fracturedvisionmedia.utils.TwitterString;
 
			private var myTxt:String = "Everyone should follow @josephlabrecque (http://bit.ly/7NkqrB) - really cool stuff and super-informative insights! #Awesome #Super #LOL";
 
			private function init():void {
				// Configure styling the TextFlow links to match richTxt
				var cfg:Configuration = TextFlow.defaultConfiguration;
				var normalTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkNormalFormat);
				normalTLF.color = 0xDCD9D9;
				cfg.defaultLinkNormalFormat = normalTLF;
				TextFlow.defaultConfiguration = cfg;
 
				// Import tweet as HTML
				richTxt.textFlow = TextConverter.importToFlow(TwitterString.instance.parseTweet(myTxt), TextConverter.TEXT_FIELD_HTML_FORMAT);
			}
		]]>
	</fx:Script>
 
	<s:RichEditableText id="richTxt" selectable="false" editable="false" right="10" top="10" bottom="10" color="#DCD9D9" left="10"/>
 
</s:Application>

TwitterString Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

package com.fracturedvisionmedia.utils {
 
	/**
	 * The TwitterString class assists with the parsing of a tweet to add hyperlinks 
	 * around Links, HashTags, and UserNames in a tweet.
	 * @author Joseph Labrecque
	 * v. 0.1.2
	 */ 
 
	public final class TwitterString {
		private static var _instance:TwitterString = new TwitterString();
 
		public function TwitterString(){
			if (_instance != null){
				throw new Error("TwitterString can only be accessed through TwitterString.instance");
			}
		}
 
		public static function get instance():TwitterString {
			return _instance;
		}
 
		public function parseTweet(t:String):String {
			var step1:String = parseHyperlinks(t);
			var step2:String = parseUsernames(step1)
			var step3:String = parseHashtags(step2)
			return step3;
		}
 
		private function parseUsernames(t:String):String {
			var result:String = t.replace(/(^|\s)#(\w+)/g, "$1#<a href='http://search.twitter.com/search?q=$2' target='_blank'>$2</a>");
			return result;
		}
 
		private function parseHashtags(t:String):String {
			var result:String = t.replace(/(^|\s)@(\w+)/g, "$1@<a href='http://www.twitter.com/$2' target='_blank'>$2</a>");
			return result;
		}
 
		private function parseHyperlinks(t:String):String {
			var urlPattern:RegExp = new RegExp("(((f|ht){1}tp://)[-a-zA-Z0-9@:%_\+.~#?&//=]+)", "g")
			var result:String = t.replace(urlPattern, "<a href='$1' target='_blank'>$1</a>");
			return result;
		}
 
	}
}

Download TwitterString

Skinning a Spark Button in Flex 4

The more I work with Flex 4, the more I understand why certain choices were made regarding the new component architecture, especially in regard to skinning. I stumbled, at first, as the skinning model is quite different and can appear much more cumbersome at first glance. Like most Flex devs, I was used to just modifying the CSS to style Halo components quickly and easily. The Spark model is more complex- but holds a lot more power as demonstrated below.

Example:
How to turn this button…

<s:Button label="Resources"/>

Into This button…

<s:Button label="Resources" skinClass="CustomButton"/>

The only difference being the addition of the CustomButton skin class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
      minWidth="21" minHeight="21"
      alpha.disabled="0.5">
 
    <fx:Metadata>
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- background -->
    <s:Rect left="0" right="0" top="0" bottom="0"
          radiusX="0" radiusY="0" topLeftRadiusX="2" topLeftRadiusY="2" topRightRadiusX="20" topRightRadiusY="80" height="30" width="69">
        <s:stroke>
            <s:SolidColorStroke color="0x001a0a" />
        </s:stroke>
        <s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0x00522d" />
				<s:GradientEntry color="0x003019" />
			</s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- label -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="bottom"
			 paddingLeft="5" paddingRight="10" 
             maxDisplayedLines="1" top="2" left="10" bottom="4" right="10" horizontalCenter="0" verticalCenter="0" color.up="#A0BAA6" color.over="#F0FFF0">
    </s:Label>
</s:Skin>

As you can see, you can pretty much use any sort of visual wizardry you like in here: Solids, Gradients, Bitmaps, Strokes, what-ever!

Super easy to get started too, as you can have Flash Builder duplicate an existing skin to get you started. Just rename and recode. Once within the new skin, you can use the Appearance panel to modify things as you would through Halo (CSS styling) in previous versions of Flex, or get into the nitty-gritty as I’ve done here.

Cool.

Flash Builder: Wrong Debug Player!

Every once in a while, Flash Builder loses its mind when I attempt to debug a project and tells me that I don’t have a debug version of Flash Player on my machine. I do… FB is just crazy. Right.

Sometimes it’s looking at the player running in the browser, in which case I just need to perform a debug player install from:
http://www.adobe.com/support/flashplayer/downloads.html

Other times, it’ll be pissed off about the player used by Flash Professional at:
C:\Program Files (x86)\Adobe\Adobe Flash CS4\Players

I’ve found a pretty foolproof (for me) way to fix this secondary problem. Just grab FlashPlayer.exe from:
C:\Program Files (x86)\Adobe\Adobe Flash Builder {such and such release}\player\win

Copy this into the Flash Pro location, restart FB, and you should be good.

Don’t know why this happens from time to time… but it’s happened enough that I feel the need to document it- at least for myself.

CD Baby Has Some Flex Going On…

The music distributor CD Baby just completed a huge update over the weekend. Looks like they have some Flex going on in the user admin area:

It’s just the default Flex styling, so it’s pretty obvious- very cool to see, nonetheless!

More Thoughts on the Flash Builder Rebrand

Here’s some personal history- this probably colors my opinion a great deal. I first started messing around with “Flash” using Macromedia Flash 4 producing really awful animations and got into it full swing with version 5. With the advent of ActionScript as a language, I began working on lots of interactive materials and a bunch of weird experimental games. This was all great stuff and over the next few years, I ended up producing a ton of work through Flash and all of my career decisions, a great deal of consulting, and much of my good fortune was due to the Flash Platform.

Being so enamored by the Flash IDE, I was initially put off a bit by the emergence of a fancy-pants new something-or-other called Flex. My understanding, at the time, was that Flex is basically a way for people who do not understand Flash to write out some MXML tags and have a Flex Server compile it all for delivery. During the Flex 1/1.5 era, I could care less about learning or using Flex and was very happy to be building some really nice, full apps using the Flash IDE.

With the emergence of the Flex 2 betas and the revelation that Flex was no longer tied to a server, but would compile SWFs just like the Flash IDE, my curiosity was peaked and I decided to give it a shot. One huge motivating factor here was the inclusion of ActionScript 3 and talk of the upcoming “Apollo” runtime. Living and breathing AS1/AS2 for years, I was well aware of it’s numerous shortcomings and the myriad of evolutionary quirkiness scattered throughout the language. AS3 promised to refine, solidify, and expand the language in huge ways- I couldn’t wait to start learning it.

So… the easiest way to do so was to use Flex Builder. I was happy to find that you could also ignore the Flex framework and just code in pure AS3. My first few projects using Flex Builder were simply ActionScript projects. I learned how to use Flex Builder as a replacement for the Flash IDE code editor and things went along pretty smoothly, for a time.

Then came “Moxie” and the Flex Builder 3 betas. For some reason, working with version 3 of Flex Builder got me REALLY interested in the Flex framework. After familiarizing myself with it, I started producing actual Flex projects and found that I was using the Flash IDE less and less. All of my perceived limitations around Flex were lifted with the realization of exactly to what extent the framework was customizable. This is in no small part due to the Flex Component Kit and resources like Scalenine.

Today, almost all of my Flash work is done using the Flex framework. I use the Flash IDE to produce content that is integrated within my Flex projects. While I have a solid understanding, of course, that Flex is just a framework (an AWESOME framework) for producing Flash applications… not everyone does. In fact, most people seem super confused about exactly what Flex is- there are a ton of people out there that just cannot grasp the fact that Flex projects are Flash.

Rewind to the point of this article: Really, the only people who should even care about this name change are people who use Flash Builder day to day… and for them- it’s just a clarification and is really a non issue. They will still be building Flex projects for clients, they will still be learning and working within the Flex framework. Many of them are Flex developers and will remain Flex developers. Clients will still ask for Flex development work. No one cares that the tool used to produce Flash content using the Flex framework is called “Flash Builder”. People like me will still use the Flash IDE, Flash Builder, and eventually Flash Catalyst to produce Flash projects using FLAs, AS3, and often times MXML, FXG, and the full Flex framework. No problem.

Personally, I love the change from Flex Builder to Flash Builder. I believe it is more true to the nature of the tool, and will ultimately remove much confusion surrounding the status of the Flex framework within the Flash Platform. I find it astounding that there are so many developers arguing against the clarification, especially since developers are actually the ones least affected by the change.

Not too many years ago, many people would scoff at the idea of building certain things using Flash. We did it anyway and these projects turned out to be revolutionary. Flash as a platform has come a long way and is poised to explode once again with initiatives such as the Open Screen Project, Flash Player on mobile devices, and the Adobe Flash Platform for the Digital Home. This rebranding of the Flex Builder tool only makes sense in terms of solidifying and clarifying this dynamic and ever-expanding platform.

Flash is not a dirty word!