Thanks, Mister! » Flex 4

AS3 Yammer Library

Mister — Wed, 27 Jan 2010 23:39:46 +0000

For the past few months I have been working on an AS3 library that wraps the Yammer API for use in Flash, Flex, and AIR projects. The biggest hurdle was making the application work for the web. As it is now, for Flash projects, you still need to be targeting Flash player 10 so that you can upload the ByteArray information file attachments. The second hurdle was creating an easy Oauth flow that doesn’t add items to the header that would violate the Flash player security, something you don’t have to worry about when creating AIR applications.

With that work out of the way, I would like to introduce an AS3 Yammer API library that communicates with the Yammer service. The as3yammerlib is hosted on GitHub and the source code is publicly available. To use the library you will need your own consumer key and secret for the Yammer API available from Yammer’s developer site. The library is also dependent on the as3corelib for doing JSON parsing and as3-signals for broadcasting events.

I put together a Flex web-based example using Flex Builder 4 that walks you through the Oauth process and retrieves messages for the logged in user. To use the code, just create a new Flex project and paste the Main.mxml file in your main application file and create another mxml for the MessageItemRenderer file within the same directory:

Main.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
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

<?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/halo"
xmlns:ns="library://ns.adobe.com/flex/mx"
creationComplete="init()"
minWidth="1024" minHeight="768">

<fx:Script>
[CDATA[
import com.yammer.api.Yammer;
import com.yammer.api.events.YammerEvent;
import com.yammer.api.vo.Oauth;
import com.yammer.api.vo.YammerCurrentUser;
import com.yammer.api.vo.YammerError;
import com.yammer.api.vo.YammerMessageList;
import com.yammer.api.vo.YammerTab;

import mx.collections.ArrayCollection;
import mx.controls.Alert;

private var oauthToken:String;
private var oauthSecret:String;

// your consumer key and secret go here
private var consumerKey:String = "your consumer key";
private var consumerSecret:String = "your consumer secret";

private var service:Yammer;

[Bindable] private var currentUser:YammerCurrentUser;

private function init():void
{
this.service = new Yammer(this.consumerKey, this.consumerSecret);
this.service.errorReceived.add(errorReceived);

// we have tokens stored
if(oauthToken && oauthSecret){
service.setOuthTokens(oauthToken, oauthSecret);
this.getCurrentUser();
}
}

// get request token from service.
private function getRequestToken():void
{
service.resultsReceived.add(requestTokenReceived);
service.requestToken();
}

// submit the virify pin from the web site
private function getAccessToken(verify_pin:String):void
{
service.resultsReceived.add(accessTokenReceived);
service.accessToken(verify_pin);
}

// sends user to browser page to retrieve verification pin.
private function sendAuthorizationRequest():void
{
service.sendAuthorizationRequest(); // open browser window
}

private function getCurrentUser():void
{
service.resultsReceived.add(currentUserReceived);
service.getCurrentUser();
return;
}

public function getMessages(tab:YammerTab):void
{
service.resultsReceived.add(messageListReceived);
service.getMessages(tab.url);
return;
}

private function requestTokenReceived(value:Oauth):void
{
service.resultsReceived.remove(requestTokenReceived);
Alert.show("Request tokens received: " + value.oauth_token);
}

private function accessTokenReceived(value:Oauth):void
{
service.resultsReceived.remove(accessTokenReceived);
Alert.show("Access tokens received:: token: " + value.oauth_token + " secret: " + value.oauth_token_secret);
this.getCurrentUser();
}

private function currentUserReceived(value:YammerCurrentUser):void
{
service.resultsReceived.remove(currentUserReceived);
currentUser = value;
var tab:YammerTab = currentUser.tabs[0]; // get first user tab, usually My Feed
this.getMessages(tab);
}

private function messageListReceived(value:YammerMessageList):void
{
service.resultsReceived.remove(messageListReceived);
var messagelist:YammerMessageList = value;
var messages:ArrayCollection = new ArrayCollection(messagelist.getMessages());
messageList.dataProvider = messages;
}

private function errorReceived(error:YammerError):void
{
Alert.show("Yammer Service Error: " + error.errorMessage);
}

]]>
fx:Script>

<fx:Declarations>
-- Place non-visual elements (e.g., services, value objects) here -->
fx:Declarations>

<s:Button label="1. Request Token" click="getRequestToken()" width="120" x="10" y="10"/>

<s:Button label="2. Open Browser" click="sendAuthorizationRequest()" width="120" x="138" y="10"/>

<s:TextInput id="pinInput" text="3. Paste Pin" width="120" textAlign="center" focusIn="pinInput.text = ''" x="266" y="10"/>

<s:Button label="4. Access Token" click="getAccessToken(pinInput.text)" width="120" x="394" y="10"/>

<s:List id="messageList" x="10" y="113" width="563" height="337" itemRenderer="MessageItemRenderer"/>

<ns:Image source="{currentUser.mugshot_url}" width="48" height="48" x="11" y="45"/>

<s:Label text="{currentUser.full_name}" x="67" y="50" fontSize="14"/>

<s:Label text="{currentUser.job_title}" x="67" y="72" fontSize="11"/>

s:Application>

MessageItemRenderer.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer width="100%"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:ns="library://ns.adobe.com/flex/mx">

<fx:Script>
[CDATA[
import com.yammer.api.utils.MessageUtilities;
import com.yammer.api.vo.YammerMessage;

[Bindable] private var message:YammerMessage;

override public function set data(value:Object):void
{
super.data = value;
message = data as YammerMessage;
}

/**
* override set data to set
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
]]>
fx:Script>

<s:Rect left="0" bottom="1" right="0" height="1">
<s:fill>
<s:SolidColor color="0x000000" alpha=".2"/>
s:fill>
s:Rect>

<s:HGroup width="100%" height="100%" paddingTop="5" paddingBottom="5" paddingRight="5" paddingLeft="5">

<ns:Image source="{message.sender.mugshot_url}" width="48" height="48"/>

<s:VGroup width="100%" height="100%">

<s:Label text="{message.sender.full_name}" maxDisplayedLines="1" left="10" top="10" right="26" fontWeight="bold" color="#000000"/>

<s:RichEditableText id="richEdTxt" text="{message.body_plain}" width="100%" editable="false" selectable="false" focusEnabled="false" />

<s:HGroup width="100%" paddingTop="2">
<s:Label text="{message.created_at}"/>
s:HGroup>

s:VGroup>

s:HGroup>

s:ItemRenderer>

I am sure there are lots of ways to improve the library, but this one is a pretty simple start with lots of functionality. Please let me know if you find any errors and feel free to fork this version and add any improvements to the code.

-Mr

Spark TextFlow LinkElement Rollover in Flex 4

Mister — Mon, 31 Aug 2009 02:42:50 +0000

This is a little example of how to create a skinned rollover popup on a LinkElement object in Flash Builder 4 (Flex 4) within a TextFlow object. This is something I have been waiting for since 2001. The old way to create a rollover action on an HTML link was to create an invisible MovieClip that floats over your hyperlink. Flex Builder 4 greatly simplifies this by adding rollover, mouse, and click events to all hyperlinks within the TextFlow object. This is a HUGE plus

I borrowed the click event action from an example by Peter deHaan posted on his blog Flex Examples. You will need the latest build of the Flex Builder 4 SDK and some helpful instructions on how to install the latest Flex Builder 4 SDK.

Example AIR Application Output

Main.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
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

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication title="Spark RichEditableText LinkElement Rollover"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">

<fx:Script>
[CDATA[
import flashx.textLayout.formats.TextDecoration;
import mx.managers.PopUpManager;

import flashx.textLayout.elements.LinkElement;
import flashx.textLayout.events.FlowElementMouseEvent;
import mx.controls.Alert;

private var customToolTip:CustomToolTip;

protected function clickHandler(evt:FlowElementMouseEvent):void {
var linkEl:LinkElement = evt.flowElement as LinkElement;
Alert.show("The '" + linkEl.getFirstLeaf().text + "' link would have gone to " + linkEl.href + " in a " + linkEl.target + " window, but it was cancelled.", "Fun with hyperlinks");
evt.stopImmediatePropagation();
evt.preventDefault();
}

protected function rollOverHandler(evt:FlowElementMouseEvent):void
{
if(!customToolTip){
customToolTip = new CustomToolTip();
customToolTip.x = this.mouseX - customToolTip.width/2;
customToolTip.y = this.mouseY - 40;
PopUpManager.addPopUp(customToolTip, this, false);
}
customToolTip.text = LinkElement(evt.flowElement).href;
}

protected function rollOutHandler(evt:FlowElementMouseEvent):void
{
PopUpManager.removePopUp(customToolTip);
customToolTip = null;

}
]]>
fx:Script>

<s:RichEditableText id="richEdTxt" editable="false" selectable="false" focusEnabled="false" horizontalCenter="0" verticalCenter="0">
<s:textFlow>
<s:TextFlow>
--
<s:linkNormalFormat textDecoration="{TextDecoration.NONE}"/>
<s:linkHoverFormat textDecoration="{TextDecoration.UNDERLINE}" />
<s:linkActiveFormat textDecoration="{TextDecoration.UNDERLINE}" />
-->
<s:p>Text that includes a link to <s:a href="http://adobe.com/" target="_blank"
rollOver="rollOverHandler(event);" rollOut="rollOutHandler(event);"
click="clickHandler(event);">Adobes:a>.s:p>
s:TextFlow>
s:textFlow>
s:RichEditableText>

s:WindowedApplication>

CustomToolTip

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

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Script>
[CDATA[
import spark.skins.spark.BorderSkin;

[Bindable] private var _text:String;

public function set text(value:String):void
{
_text = value;
}
]]>
fx:Script>

<s:Skin minHeight="25">

<s:Rect id="upFill"
top="1"
right="1"
left="1"
bottom="1"
radiusX="10"
radiusY="10">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#222222" ratio="0" alpha="0.45"/>
<s:GradientEntry color="#222222" ratio="0.45"/>
<s:GradientEntry color="#222222" ratio="0.65"/>
<s:GradientEntry color="#222222" ratio=".8"/>
s:LinearGradient>
s:fill>
<s:stroke>
<s:SolidColorStroke color="#222222" weight="0.5"/>
s:stroke>
s:Rect>

<s:Rect id="highlightFill"
top="2"
right="2"
left="2"
bottom="2"
radiusX="10"
radiusY="10">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="#FDFDFD" ratio="0" alpha="0.6"/>
<s:GradientEntry color="#FDFDFD" ratio="0.2" alpha="0"/>
s:LinearGradientStroke>

s:stroke>
s:Rect>

<s:SimpleText id="labelElement" text="{_text}"
color="#FFFFFF"
right="20"
left="20"
verticalAlign="middle"
horizontalCenter="0"
verticalCenter="1"/>

<s:filters>
<s:DropShadowFilter color="#999999"
blurX="5"
blurY="5"
angle="90"
distance="2"
alpha="0.8"/>
s:filters>
s:Skin>

s:SkinnableContainer>

The only think I couldn’t get working for this example (the commented out section) was changing the format of the hyperlinks within the TextFlow object.

Source File

Additional Resources

http://labs.adobe.com/technologies/flashbuilder4/
http://livedocs.adobe.com/flex/gumbo/langref/spark/primitives/RichEditableText.html
http://blog.flexexamples.com/2009/08/27/creating-a-linkelement-in-a-spark-richeditabletext-control-in-flex-4/
http://blog.flexexamples.com/2009/07/13/downloading-and-installing-flex-4-sdk-builds-from-opensource-adobe-com-flash-builder-4-beta-edition/

-Mister