26 Aug 2008

Twitter Text with link hover for Flex

4 Comments Examples, Flex/Flash

I’ve been messing around with the twitter API and have noticed that there where no text components that where Twitter enabled. So I decided to extend Text to be twitter friendly. There are probably a million different ways of doing this but this worked for me the best.



TwitterText.as

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
package com.components
{
	import mx.controls.Text;
	import mx.controls.TextArea;
	import mx.controls.Alert;
 
	import com.adobe.utils.StringUtil;
	import flash.text.StyleSheet;
	import flash.events.TextEvent;
	import flash.events.Event;
	import com.event.TweetLinkEvent;
 
	[Event(name="tweetLinkClicked", type="com.event.TweetLinkEvent")]
 
	public class TwitterText extends Text
	{
 
 
		public function TwitterText()
		{
			//TODO: implement function
			super();
		}
 
        public function get styleSheet():StyleSheet {
             return textField.styleSheet;
        }
 
        public function set styleSheet(value : StyleSheet) : void {
            textField.styleSheet = value;
        }
 
		override public function set htmlText(value:String):void {
	   		value = makeURLClickable(value);
	   		this.selectable = true;
	   		textField.addEventListener(TextEvent.LINK, linkHandler);
	   		super.htmlText = value;
		}
 
 
		private function linkHandler(evtObj:TextEvent):void{
			var prefix:String = evtObj.text.substr(0,1);
			var linkType:String = "";
			switch(prefix){
				case "@":
				linkType = "reply";
				break;
				case "#":
				linkType = "hash";
				break;
				case "h":
				linkType = "link";
				break;
			}
			var event:TweetLinkEvent = new TweetLinkEvent(TweetLinkEvent.TWEET_LINK_CLICKED, evtObj.text, linkType);
			this.dispatchEvent(event)
		}
 
 
 
		private function makeURLClickable(value:String):String
		{
			var strAry:Array = value.split(" ");
 
			for (var i in strAry){
				if(StringUtil.beginsWith(strAry[i], "http")){
					strAry[i] = "<a href='event:"+strAry[i]+"'>"+strAry[i]+"</a>";
				}
				if(StringUtil.beginsWith(strAry[i], "@") && String(strAry[i]).length > 1){
					strAry[i] = "<a href='event:"+strAry[i]+"'>"+strAry[i]+"</a>";
				}
				if(StringUtil.beginsWith(strAry[i], "#") && String(strAry[i]).length > 1){
					strAry[i] = "<a href='event:"+strAry[i]+"'>"+strAry[i]+"</a>";
				}
 
			}
			return strAry.join(" ");
		}
 
 
	}
}

TweetLinkEvent.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.event
{
	import flash.events.Event;
 
	public class TweetLinkEvent extends Event
	{
 
		public static var TWEET_LINK_CLICKED:String = "tweetLinkClicked";
 
		public function TweetLinkEvent(type:String, text:String, linkType:String)
		{
			super(type);
 
			this.linkType = linkType;
			this.text = text;
		}
 
		public var linkType:String;
		public var text:String;
 
	}
}

Sample Usage

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
48
49
50
51
52
53
54
55
<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	xmlns:components="com.components.*" color="#ffffff" backgroundColor="#000000" viewSourceURL="srcview/index.html">
 
	<mx:Script>
		<![CDATA[
			import com.event.TweetLinkEvent;
			import mx.controls.Alert;
			[Bindable]
			private var _sampleTweet:String;
 
			private function init():void{
				//DO WHAT EVER YOU WANT WITH THE RESULT
				var style :StyleSheet = new StyleSheet();
 
				//active color
				var active:Object = new Object();
                active.color = "#FF00FF";
 
                //hover color
				var hover:Object = new Object();
				hover.textDecoration = "underline";
                hover.color = "#FF6600";
 
                //link color
                var link:Object = new Object();
                link.color = "#FF9900";
 
 
                style.setStyle("a:active", active);
                style.setStyle("a:hover", hover);
                style.setStyle("a:link", link);
 
				//SAMPLE TWEET, NOTICE THERE THERE ARE NO HREF's
                tweetText.htmlText = "@abritez this @ is a #demo tweet http://blog.unthinkmedia.com";
                tweetText.styleSheet = style;
			}
 
			private function handleLink(evtObj:TweetLinkEvent):void{
				//DO WHAT EVER YOU WANT WITH THE RESULT
				Alert.show(evtObj.text + " is " +  evtObj.linkType);
			}
 
 
		]]>
	</mx:Script>
 
	<components:TwitterText id="tweetText"
		tweetLinkClicked="handleLink(event)"
		horizontalCenter="0" verticalCenter="0" 
		styleName="tweetStyle" 
		width="200" selectable="true" />
 
 
</mx:Application>


Popularity: 3% [?]

Tags:
written by
I am a designer, developer & dad who interested in educational technology and using media for social goodness.

4 Responses to “Twitter Text with link hover for Flex”

  1. Reply luiscript says:

    Thanks for share it. I’m programming a twitter client and this was wery useful for me.

  2. Reply terry says:

    this is cool. thanks ~

  3. Reply ama says:

    very cute. thanks

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes