Thanks, Mister! » Flex

Blog Refresh

Mister — Sat, 17 Jul 2010 15:30:03 +0000

I just moved my blog from my previous web host to a new one, expect some bumps along the way along with broken links and examples. I am slowly working through fixing them, but feel free to report them to me if you find them.

What prompted me to move my blog was price for one, but also having WordPress installed by the host as opposed to me installing my own and being responsible for upgrades. I was starting to have issues with posting new messages and getting plug-ins to work properly.

I can say this though, migrating your MySQL database and all the custom parts of my blog were a huge pain and time suck. I couldn’t recommend it to anyone, much better to find a host that already has the WordPress application.

-Mister

Screen Capture with AIR 2 NativeProcess

Mister — Tue, 25 May 2010 01:20:57 +0000

Prior to AIR 2 the only way to capture the screen was to use something like Marapi Java Bridge that acts as a conduit between your application and the native system. However, AIR 2 now lets us call

With AIR 2 Beta and the upcoming AIR 2 release, you can now use the command-line tool “screencapture” that comes with Mac OS. Nothing extra needs to be bundled with the application for this to work on a Mac, but on Windows, you need an additional piece of code to execute the screen capture process.

The process of doing a screen capture is pretty easy. You first create a File object that points to the location of the “screencapture” command line on the Mac:

1 2	var file:File = File.applicationDirectory; file = file.resolvePath("usr/sbin/screencapture");

Then create a NativeProcessStartupInfo object that will be used when we start the NativeProcess.The arguments property of the NativeProcessStartupInfo takes a list of arguments that will be passed to the command line tool when its started. For a complete list of arguments used by the screencapture command line tool, type “screencapture –help” in the terminal window. For this example I wanted to push out a file named “screencap.png” to the desktop from a selection of the screen. Optionally, you could capture the image to the clipboard and paste it directly.

1
2
3
4
5
6
7

var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
var args:Vector. = new Vector.();
args[0] = "-i";
args[1] = "screencapture.png";

nativeProcessStartupInfo.arguments = args;
nativeProcessStartupInfo.executable = file;

Now we can start the native process:

1 2	process = new NativeProcess(); process.start(nativeProcessStartupInfo);

The screencapture command tool will be launched and you will see the selection cursor on your screen. After you make a selection, the file will automatically be saved to the desktop as “screencapture.png”.

Here is the complete project code:

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

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">

[CDATA[

private var process:NativeProcess;

private function init():void
{
launchNativeProcess();
}

private function launchNativeProcess():void
{
if(NativeProcess.isSupported) {

var file:File = File.applicationDirectory;

if (Capabilities.os.toLowerCase().indexOf("win") > -1) {
//file = file.resolvePath("bin/mylocalexe.exe");
} else if (Capabilities.os.toLowerCase().indexOf("mac") > -1) {
file = file.resolvePath("/usr/sbin/screencapture");
}

var args:Vector.<String> = new Vector.<String>();
args[0] = "-i";
args[1] = "screencapture.png";

var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
nativeProcessStartupInfo.arguments = args;
nativeProcessStartupInfo.executable = file;
nativeProcessStartupInfo.workingDirectory = File.desktopDirectory;

process = new NativeProcess();
process.start(nativeProcessStartupInfo);

}
}
]]>

To get something like this to work on Windows, you need to know a little bit of C or C# so you can call your own service and launch the screen print functionality on Windows. For more about using the NativeProcess in AIR 2 for both Windows and Mac, you check out this Adobe article.

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

<?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

Custom AIR updater interface using ApplicationUpdater

Mister — Mon, 14 Sep 2009 02:22:25 +0000

To tell you the truth, I never gave the ApplicationUpdaterUI much thought in terms of memory use before this post. I just thought it was a great way to add a complete update system to your AIR applications. I had not thought it could be so memory intensive until a recent conversation with Jesse Warden on Twitter:

* Please note that Jesse is dude that looks about 17 and I am the older more distinguished gentleman.

Problem with ApplicationUpdaterUI

Indeed, that “mofo eats mad RAM” is putting it lightly. It turns out that the ApplicationUpdaterUI consumes about 14MB of RAM within the application. Furthermore, for the ApplicationUpdaterUI to even check for available updates, it must loads the entire UI in memory even if not displayed. So just by using the framework, you end adding 14MB to your application that won’t be garbage collected. Granted, in most cases 14MB of RAM is not that big of deal. However, for smaller applications you might want to consider an alternative approach.

There happens to another class file called ApplicationUpdater. This class basically gives you all the benefits of the ApplicationUpdaterUI framework without any of the visible elements. This means you have to build your own user interface. This might actually be a benefit in the long run as you may want to customize your application updater to match your application. The other benefit is that you can use the ApplicationUpdater class to check for updates without loading any user interface. The interface only needs to be loaded if there is an actual update available.

Custom Updater Interface with ApplicationUpdater

In building my own custom updater interface, I thought it might be nice to have the same look and feel of the ApplicationUpdaterUI along with some of the more polite features (like postpone update until restart). Building your own updater using the ApplicationUpdater turns out to be a little more involved than I had originally thought. However, when you start attacking a problem you persevere until the end, no matter what the pain.

I did find some available information in the Adobe AIR 1.5 Cookbook, which has a basic custom updater example. This helped with some of the basic stuff, but I still needed a little more detail to make something similar to the ApplicationUpdaterUI. I found another good example by Jens Krause, but this example is for Flex 4. I needed something that would work for Flex 3. So here is what I built based on these examples:

The application consists of one class file and one MXML dialog for displaying all the user interface elements. I borrowed some of the icons from the ApplicationUpdaterUI which is available in the AIR SDK (I hope Adobe doesn’t mind). The update dialog UI is only loaded when needed, all checks for application updates happen using the ApplicationUpdater. The update dialog is only displayed when the user wants to manually update or the periodic update check finds a new application update.

The Good and the Bad

The good news is the updater only consumes about 2MB of RAM when you load the update dialog box, part of that is the ApplicationUpdater itself running in the background. The other good news is that you can yank out or customize any part of the this example to meet your own needs. The bad news is that even though I tried my best to fully remove the update dialog and have garbage collection clean it up, it doesn’t fully unload from memory (go figure). I don’t feel this is a huge issue as the application is most likely restarted after you install an update. Below is the code followed by a zip file containing the full application.

UpdateManager.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
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368

package com.thanksmister
{
import air.update.ApplicationUpdater;
import air.update.events.DownloadErrorEvent;
import air.update.events.StatusFileUpdateErrorEvent;
import air.update.events.StatusFileUpdateEvent;
import air.update.events.StatusUpdateErrorEvent;
import air.update.events.StatusUpdateEvent;
import air.update.events.UpdateEvent;

import flash.desktop.NativeApplication;
import flash.events.ErrorEvent;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.filesystem.File;

public class UpdateManager
{
private var appUpdater:ApplicationUpdater;
private var appVersion:String;
private var baseURL:String;
private var updaterDialog:UpdaterDialog;
private var configurationFile:File;
private var isFirstRun:String;
private var upateVersion:String;
private var applicationName:String;
private var installedVersion:String;
private var description:String;

private var initializeCheckNow:Boolean = false;
private var isInstallPostponed:Boolean = false;
private var showCheckState:Boolean = true;

/**
* Constructer for UpdateManager Class
*
* @param showCheckState Boolean value to show the Check Now dialog box
* @param initializeCheckNow Boolean value to initialize application and run check on instantiation of the Class
* */
public function UpdateManager(showCheckState:Boolean = true, initializeCheckNow:Boolean = false)
{
this.showCheckState = showCheckState;
this.configurationFile = new File("app:/config/update.xml");
this.initializeCheckNow = initializeCheckNow;
initialize();
}

public function checkNow():void
{
//trace("checkNow");
isInstallPostponed = false;
if(showCheckState) {
createDialog(UpdaterDialog.CHECK_UPDATE);
} else {
appUpdater.checkNow();
}
}

//---------- ApplicationUpdater ----------------//

private function initialize():void
{
//trace("initialize");
if(!appUpdater){
appUpdater = new ApplicationUpdater();
appUpdater.configurationFile = configurationFile;
appUpdater.addEventListener(UpdateEvent.INITIALIZED, updaterInitialized);
appUpdater.addEventListener(StatusUpdateEvent.UPDATE_STATUS, statusUpdate);
appUpdater.addEventListener(UpdateEvent.BEFORE_INSTALL, beforeInstall);
appUpdater.addEventListener(StatusUpdateErrorEvent.UPDATE_ERROR, statusUpdateError);
appUpdater.addEventListener(UpdateEvent.DOWNLOAD_START, downloadStarted);
appUpdater.addEventListener(ProgressEvent.PROGRESS, downloadProgress);
appUpdater.addEventListener(UpdateEvent.DOWNLOAD_COMPLETE, downloadComplete);
appUpdater.addEventListener(DownloadErrorEvent.DOWNLOAD_ERROR, downloadError);
appUpdater.addEventListener(ErrorEvent.ERROR, updaterError);
appUpdater.initialize();
}
}

private function beforeInstall(event:UpdateEvent):void
{
//trace("beforeInstall");
if (isInstallPostponed) {
event.preventDefault();
isInstallPostponed = false;
}
}

private function updaterInitialized(event:UpdateEvent):void
{
//trace("updaterInitialized");
this.isFirstRun = event.target.isFirstRun;
this.applicationName = getApplicationName();
this.installedVersion = getApplicationVersion();

if(showCheckState && initializeCheckNow) {
createDialog(UpdaterDialog.CHECK_UPDATE);
} else if (initializeCheckNow) {
appUpdater.checkNow();
}
}

private function statusUpdate(event:StatusUpdateEvent):void
{
//trace("statusUpdate");
event.preventDefault();
if(event.available){
this.description = getUpdateDescription(event.details);
this.upateVersion = event.version;

if(!showCheckState) {
createDialog(UpdaterDialog.UPDATE_AVAILABLE);
} else if (updaterDialog) {
updaterDialog.applicationName = this.applicationName;
updaterDialog.installedVersion = this.installedVersion;
updaterDialog.upateVersion = this.upateVersion;
updaterDialog.description = this.description
updaterDialog.updateState = UpdaterDialog.UPDATE_AVAILABLE;
}
} else {
if (showCheckState) createDialog(UpdaterDialog.NO_UPDATE);
}
}

private function statusUpdateError(event:StatusUpdateErrorEvent):void
{
event.preventDefault();
if(!updaterDialog){
createDialog(UpdaterDialog.UPDATE_ERROR);
} else {
updaterDialog.updateState = UpdaterDialog.UPDATE_ERROR;
}
}

private function statusFileUpdate(event:StatusFileUpdateEvent):void
{
event.preventDefault();
if(event.available) {
updaterDialog.updateState = UpdaterDialog.UPDATE_DOWNLOADING;
appUpdater.downloadUpdate();
} else {
updaterDialog.updateState = UpdaterDialog.UPDATE_ERROR;
}
}

private function statusFileUpdateError(event:StatusFileUpdateErrorEvent):void
{
event.preventDefault();
updaterDialog.updateState = UpdaterDialog.UPDATE_ERROR;;
}

private function downloadStarted(event:UpdateEvent):void
{
updaterDialog.updateState = UpdaterDialog.UPDATE_DOWNLOADING;
}

private function downloadProgress(event:ProgressEvent):void
{
updaterDialog.updateState = UpdaterDialog.UPDATE_DOWNLOADING;
var num:Number = (event.bytesLoaded/event.bytesTotal)*100;
updaterDialog.downloadProgress(num);
}

private function downloadComplete(event:UpdateEvent):void
{
event.preventDefault(); // prevent default install
updaterDialog.updateState = UpdaterDialog.INSTALL_UPDATE;
}

private function downloadError(event:DownloadErrorEvent):void
{
event.preventDefault();
updaterDialog.updateState = UpdaterDialog.UPDATE_ERROR;
}

private function updaterError(event:ErrorEvent):void
{
updaterDialog.errorText = event.text;
updaterDialog.updateState = UpdaterDialog.UPDATE_ERROR;
}

//---------- UpdaterDialog Events ----------------//

private function createDialog(state:String):void
{
if(!updaterDialog) {
updaterDialog = new UpdaterDialog();
updaterDialog.isFirstRun = this.isFirstRun;
updaterDialog.applicationName = this.applicationName;
updaterDialog.installedVersion = this.installedVersion;
updaterDialog.upateVersion = this.upateVersion;
updaterDialog.updateState = state;
updaterDialog.description = this.description;
updaterDialog.addEventListener(UpdaterDialog.EVENT_CHECK_UPDATE, checkUpdate);
updaterDialog.addEventListener(UpdaterDialog.EVENT_INSTALL_UPDATE, installUpdate);
updaterDialog.addEventListener(UpdaterDialog.EVENT_CANCEL_UPDATE, cancelUpdate);
updaterDialog.addEventListener(UpdaterDialog.EVENT_DOWNLOAD_UPDATE, downloadUpdate);
updaterDialog.addEventListener(UpdaterDialog.EVENT_INSTALL_LATER, installLater);
updaterDialog.open();
}
}

/**
* Check for update.
* */
private function checkUpdate(event:Event):void
{
//trace("checkUpdate");
appUpdater.checkNow();
}

/**
* Install the update.
* */
private function installUpdate(event:Event):void
{
appUpdater.installUpdate();
}

/**
* Install the update.
* */
private function installLater(event:Event):void
{
isInstallPostponed = true;
appUpdater.installUpdate();
destoryUpdater();
}

/**
* Download the update.
* */
private function downloadUpdate(event:Event):void
{
appUpdater.downloadUpdate();
}

/**
* Cancel the update.
* */
private function cancelUpdate(event:Event):void
{
appUpdater.cancelUpdate();
destoryUpdater();
}

//---------- Destroy All ----------------//

private function destroy():void
{
if (appUpdater) {
appUpdater.configurationFile = configurationFile;
appUpdater.removeEventListener(UpdateEvent.INITIALIZED, updaterInitialized);
appUpdater.removeEventListener(StatusUpdateEvent.UPDATE_STATUS, statusUpdate);
appUpdater.removeEventListener(StatusUpdateErrorEvent.UPDATE_ERROR, statusUpdateError);
appUpdater.removeEventListener(UpdateEvent.DOWNLOAD_START, downloadStarted);
appUpdater.removeEventListener(ProgressEvent.PROGRESS, downloadProgress);
appUpdater.removeEventListener(UpdateEvent.DOWNLOAD_COMPLETE, downloadComplete);
appUpdater.removeEventListener(DownloadErrorEvent.DOWNLOAD_ERROR, downloadError);
appUpdater.removeEventListener(UpdateEvent.BEFORE_INSTALL, beforeInstall);
appUpdater.removeEventListener(ErrorEvent.ERROR, updaterError);

appUpdater = null;
}

destoryUpdater();
}

private function destoryUpdater():void
{
if(updaterDialog) {
updaterDialog.destroy();
updaterDialog.removeEventListener(UpdaterDialog.EVENT_CHECK_UPDATE, checkUpdate);
updaterDialog.removeEventListener(UpdaterDialog.EVENT_INSTALL_UPDATE, installUpdate);
updaterDialog.removeEventListener(UpdaterDialog.EVENT_CANCEL_UPDATE, cancelUpdate);
updaterDialog.removeEventListener(UpdaterDialog.EVENT_DOWNLOAD_UPDATE, downloadUpdate);
updaterDialog.removeEventListener(UpdaterDialog.EVENT_INSTALL_LATER, installLater);
updaterDialog.close();
updaterDialog = null;
}
isInstallPostponed = false;
}

//---------- Utilities ----------------//

/**
* Getter method to get the version of the application
* Based on Jens Krause blog post: http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/
*
* @return String Version of application
*
*/
private function getApplicationVersion():String
{
var appXML:XML = NativeApplication.nativeApplication.applicationDescriptor;
var ns:Namespace = appXML.namespace();
return appXML.ns::version;
}

/**
* Getter method to get the name of the application file
* Based on Jens Krause blog post: http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/
*
* @return String name of application
*
*/
private function getApplicationFileName():String
{
var appXML:XML = NativeApplication.nativeApplication.applicationDescriptor;
var ns:Namespace = appXML.namespace();
return appXML.ns::filename;
}

/**
* Getter method to get the name of the application, this does not support multi-language.
* Based on a method from Adobes ApplicationUpdaterDialogs.mxml, which is part of Adobes AIR Updater Framework
* Also based on Jens Krause blog post: http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/
*
* @return String name of application
*
*/
private function getApplicationName():String
{
var applicationName:String;
var xmlNS:Namespace=new Namespace("http://www.w3.org/XML/1998/namespace");
var appXML:XML=NativeApplication.nativeApplication.applicationDescriptor;
var ns:Namespace=appXML.namespace();

// filename is mandatory
var elem:XMLList=appXML.ns::filename;

// use name is if it exists in the application descriptor
if ((appXML.ns::name).length() != 0)
{
elem=appXML.ns::name;
}

// See if element contains simple content
if (elem.hasSimpleContent())
{
applicationName=elem.toString();
}

return applicationName;
}

/**
* Helper method to get release notes, this does not support multi-language.
* Based on a method from Adobes ApplicationUpdaterDialogs.mxml, which is part of Adobes AIR Updater Framework
* Also based on Jens Krause blog post: http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/
*
* @param detail Array of details
* @return String Release notes depending on locale chain
*
*/
protected function getUpdateDescription(details:Array):String
{
var text:String="";

if (details.length == 1)
{
text=details[0][1];
}
return text;
}
}
}

UpdateDialog.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Window xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" styleName="updateDialogWindow"
layout="absolute" maximizable="false" resizable="false" currentState="{_updateState}"
clipContent="false" showStatusBar="false" width="530" height="180">

<mx:Metadata>
[Event(name="checkUpdate", type="flash.events.Event")]
[Event(name="downloadUpdate", type="flash.events.Event")]
[Event(name="downloadUpdate", type="flash.events.Event")]
[Event(name="cancelUpdate", type="flash.events.Event")]
mx:Metadata>

<mx:Script>
[CDATA[
public static var EVENT_CHECK_UPDATE:String = "checkUpdate";
public static var EVENT_INSTALL_UPDATE:String = "installUpdate";
public static var EVENT_DOWNLOAD_UPDATE:String = "downloadUpdate";
public static var EVENT_CANCEL_UPDATE:String = "cancelUpdate";
public static var EVENT_INSTALL_LATER:String = "installLater";

[Bindable] public static var UPDATE_DOWNLOADING:String = "updateDownloading";
[Bindable] public static var INSTALL_UPDATE:String = "installUpdate";
[Bindable] public static var UPDATE_AVAILABLE:String = "updateAvailable";
[Bindable] public static var NO_UPDATE:String = "noUpdate";
[Bindable] public static var CHECK_UPDATE:String = "checkUpdate";
[Bindable] public static var UPDATE_ERROR:String = "updateError";

[Bindable] private var _isFirstRun:String;
[Bindable] private var _installedVersion:String;
[Bindable] private var _updateVersion:String;
[Bindable] private var _updateDescription:String;
[Bindable] private var _applicationName:String;
[Bindable] private var _updateState:String;
[Bindable] private var _errorText:String = "There was an error checking for updates.";

public function set isFirstRun(value:String):void
{
_isFirstRun = value;
}

public function set installedVersion(value:String):void
{
_installedVersion = value;
}

public function set upateVersion(value:String):void
{
_updateVersion = value;
}

public function set updateState(value:String):void
{
_updateState = value;
}

public function set applicationName(value:String):void
{
_applicationName = value;
}

public function set description(value:String):void
{
_updateDescription = value;
}

public function set errorText(value:String):void
{
_errorText = value;
}

public function downloadProgress(value:Number):void
{
if(progressBar) progressBar.setProgress(value, 100);
}

private function continueUpdate():void
{
if (this.currentState == UpdaterDialog.CHECK_UPDATE){
this.dispatchEvent(new Event(EVENT_CHECK_UPDATE));
} else if (this.currentState == UPDATE_AVAILABLE) {
this.dispatchEvent(new Event(EVENT_DOWNLOAD_UPDATE));
}else if (this.currentState == INSTALL_UPDATE) {
this.dispatchEvent(new Event(EVENT_INSTALL_UPDATE));
}
}

private function cancelUpdate():void
{
if (this.currentState == INSTALL_UPDATE) {
this.dispatchEvent(new Event(EVENT_INSTALL_LATER));
return;
}
this.dispatchEvent(new Event(EVENT_CANCEL_UPDATE));
}

public function destroy():void
{
iconImage.unloadAndStop(true);
iconImage.source = null;

continueButton.removeEventListener(MouseEvent.CLICK, continueUpdate);
cancelButton.removeEventListener(MouseEvent.CLICK, cancelUpdate);

// becaause we used skins, we have to clear them for garbage collection
//http://www.firstrowria.com/2009/01/flex-top-5-memory-leaks-in-flex-2-skinning-of-components-eg-button/
continueButton.styleName = null;
cancelButton.styleName = null;

while(this.numChildren > 0){
this.removeChildAt(0);
}
}
]]>
mx:Script>

<mx:states>
<mx:State name="{CHECK_UPDATE}">
<mx:AddChild position="lastChild">
<mx:Label x="152" y="86" text="Application:" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text x="230" y="86" text="{this._applicationName}" styleName="updateDialogText"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="107" y="19" text="Check for updates" styleName="updateTitle" />
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text x="107" y="50" text="Allow the application to check for updates?" styleName="updateDialogText"/>
mx:AddChild>
<mx:SetProperty name="height" value="180"/>
mx:State>
<mx:State name="{UPDATE_AVAILABLE}">
<mx:SetProperty name="height" value="360"/>
<mx:AddChild position="lastChild">
<mx:Text text="{this._installedVersion}" x="230" y="114" styleName="updateDialogText"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text text="{this._updateVersion}" x="230" y="134" styleName="updateDialogText"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="118" y="114" text="Installed Version:" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="127" y="134" text="Update Version:" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="152" y="96" text="Application:" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text x="230" y="96" text="{this._applicationName}" styleName="updateDialogText"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="107" y="19" text="Update Available" styleName="updateTitle"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text x="107" y="50" text="An updated version of the application is available for download." styleName="updateDialogText"/>
mx:AddChild>

<mx:AddChild position="lastChild">
<mx:Label id="releaseLabel" x="10" y="222" text="Release notes" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:TextArea text="{_updateDescription}" x="10" y="248" width="508" height="100" styleName="updateDialogTextArea"/>
mx:AddChild>

<mx:AddChild position="lastChild">
<mx:HRule x="10" y="214" width="508" styleName="updateDialogHRule"/>
mx:AddChild>
<mx:SetProperty target="{cancelButton}" name="y" value="164"/>
<mx:SetProperty target="{continueButton}" name="y" value="164"/>
<mx:SetProperty target="{cancelButton}" name="label" value="Download later"/>
<mx:SetProperty target="{continueButton}" name="x" value="269"/>
<mx:SetProperty target="{continueButton}" name="label" value="Download now"/>
mx:State>
<mx:State name="{NO_UPDATE}">
<mx:AddChild position="lastChild">
<mx:Label x="122" y="86" text="Application:" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text x="200" y="86" text="{this._applicationName}" styleName="updateDialogText"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="107" y="19" text="No Updates" styleName="updateTitle"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text x="107" y="50" text="There is no application update available at this time." styleName="updateDialogText"/>
mx:AddChild>
<mx:RemoveChild target="{continueButton}"/>
<mx:SetProperty target="{cancelButton}" name="label" value="Close"/>
<mx:SetProperty name="height" value="180"/>
mx:State>
<mx:State name="{UPDATE_DOWNLOADING}">
<mx:AddChild position="lastChild">
<mx:ProgressBar x="107" y="84" width="411" label=" " id="progressBar" mode="manual" height="15" styleName="updateDiallogProgress"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text x="107" y="20" text="Downloading Update" styleName="updateTitle"/>
mx:AddChild>
<mx:RemoveChild target="{continueButton}"/>
<mx:AddChild position="lastChild">
<mx:Label x="107" y="53" text="Download progress..." styleName="updateDialogLabel"/>
mx:AddChild>
<mx:SetProperty name="height" value="180"/>
mx:State>
<mx:State name="{UPDATE_ERROR}">
<mx:AddChild position="lastChild">
<mx:Label x="107" y="19" text="Unexpected error" styleName="updateTitle"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="107" y="50" text="{_errorText}" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:RemoveChild target="{continueButton}"/>
<mx:SetProperty target="{cancelButton}" name="label" value="Close"/>
<mx:SetProperty name="height" value="180"/>
mx:State>
<mx:State name="{INSTALL_UPDATE}">
<mx:AddChild position="lastChild">
<mx:Text text="{this._installedVersion}" x="230" y="139" styleName="updateDialogText"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text text="{this._updateVersion}" x="230" y="159" styleName="updateDialogText"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="118" y="139" text="Installed Version:" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="127" y="159" text="Update Version:" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="152" y="121" text="Application:" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text x="230" y="121" text="{this._applicationName}" styleName="updateDialogText"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Label x="107" y="19" text="Install update" id="windowTitle4" styleName="updateTitle"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text x="107" y="50" text="The update for the application is downloaded and ready to be installed." styleName="updateDialogText"/>
mx:AddChild>

<mx:AddChild position="lastChild">
<mx:Label x="10" y="262" text="Release notes" styleName="updateDialogLabel"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:TextArea id="relaeseNotesTextArea0" text="{_updateDescription}" x="10" y="288" width="508" height="100" styleName="updateDialogTextArea"/>
mx:AddChild>
<mx:SetProperty name="height" value="402"/>
<mx:AddChild position="lastChild">
<mx:ProgressBar id="installProgressBar" x="107" y="84" width="411" label=" " mode="manual" height="15" styleName="installDiallogProgress" creationComplete="installProgressBar.setProgress(100,100)"/>
mx:AddChild>
<mx:AddChild position="lastChild">
<mx:HRule x="10" y="249" width="508" styleName="updateDialogHRule"/>
mx:AddChild>
<mx:SetProperty target="{cancelButton}" name="label" value="Postpone until restart"/>
<mx:SetProperty target="{cancelButton}" name="y" value="198"/>
<mx:SetProperty target="{continueButton}" name="y" value="198"/>
<mx:SetProperty target="{continueButton}" name="x" value="320"/>
<mx:SetProperty target="{continueButton}" name="label" value="Install update"/>
mx:State>
mx:states>

<mx:Button x="107" y="129" label="Cancel" id="cancelButton" click="cancelUpdate()" height="34" styleName="updateDialogButton"/>
<mx:Button x="202" y="129" label="Check for Updates" id="continueButton" click="continueUpdate()" height="34" styleName="updateDialogButton"/>
<mx:Image source="@Embed('/assets/images/UpdateIcon.png')" x="15" y="25" width="81" height="74" id="iconImage"/>

mx:Window>

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

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" width="428" height="280" creationComplete="init()">

<mx:Style source="assets/styles.css"/>

<mx:Script>
[CDATA[
import com.thanksmister.UpdateManager;
import mx.rpc.events.ResultEvent;

private var updater:UpdateManager;
[Bindable] private var baseURL:String;
[Bindable] private var updates:String;

private function init():void
{
configService.send();
}

private function handleResult(event:ResultEvent):void
{
var xml:XML = event.result as XML;
baseURL = xml..baseurl.toString();
updates = xml..updates.toString();

if(updates)
updater = new UpdateManager(true, false);
}
]]>
mx:Script>

<mx:HTTPService id="configService" method="GET" resultFormat="e4x" url="config/configuration.xml" result="handleResult(event)" />

<mx:Text fontSize="14" color="0xFFFFFFF" text="Update tester. Please click the button below to begin update checking or wait for the dealy time (3 min). Once the application is successfully updated, the application version will be updated from v1 to v2." x="10" y="10" width="342" height="104"/>

<mx:Button label="Begin update process" color="0xFFFFFFF" x="125" y="104" click="updater.checkNow()"/>

<mx:Label id="versionText" fontSize="14" color="0xFFFFFFF"/>
<mx:Label text="{'Base URL: ' + baseURL}" color="0xFFFFFFF"/>
<mx:Label text="{'Updates: ' + updates}" color="0xFFFFFFF"/>
mx:WindowedApplication>

I packed up the Flex project. You would use this basically the same as you would use the ApplicationUpdaterUI framework. You need to create an update version of your AIR file and place it and update.xm file on a server. You can test it from the local IDE if you replace the server url with “app:/”. Just remember you can not actually update an AIR application from the IDE, it has to be installed and running on your machine to update, and the update files have to be accessible just like when you use the ApplicationUpdaterUI.

The code is free to use, hose, rip apart, just post back any fixes or enhancements you make.

Source Files

UpdateTester.zip

Update

Don’t forget to add a closing event handler to the dialog box that calls the destory() function. This was not in the original code and there needs to be a way to handle users clicking on the close box of the Window for the update dialog user interface. I also added a change that if you don’t want to show the check for update now option, the “no update available” dialog does not appear either, here is the updated code for statusUpdate function in UpdateManager.as (not in the downloaded zip):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

private function statusUpdate(event:StatusUpdateEvent):void
{
//trace("statusUpdate");
event.preventDefault();
if(event.available){
this.description = getUpdateDescription(event.details);
this.upateVersion = event.version;

if(!showCheckState) {
createDialog(UpdaterDialog.UPDATE_AVAILABLE);
} else if (updaterDialog) {
updaterDialog.applicationName = this.applicationName;
updaterDialog.installedVersion = this.installedVersion;
updaterDialog.upateVersion = this.upateVersion;
updaterDialog.description = this.description
updaterDialog.updateState = UpdaterDialog.UPDATE_AVAILABLE;
}
} else {
if (showCheckState) createDialog(UpdaterDialog.NO_UPDATE);
}
}

-Mister

Garbage collection and styles

Mister — Sat, 22 Aug 2009 04:24:26 +0000

I read a really great post in my endless search for better garbage collection in AIR and Flex. Bernd Bindreiter of firstrow RIA posted a 5-part series on garbage collection and one of them involves removing skins from Button controls in order to have them garbage collected properly. In his post he removes each individual skin from the button using something like:

1
2
3

myButton.setStyle("overSkin", null);
myButton.setStyle("upSkin", null);
myButton.setStyle("downSkin", null);

What I wondered was if I could do the same thing by just setting the styleName to null:

1	myButton.sytleName = null;

This does work for skins, but as Bernd’s comments point out, other styles such as “color, fontSize, paddingTop” don’t create memory leaks, so this method only works with skins. However, setting the styleName to null is also an effective way for marking the object ready to be garbage collected. I recommend reading the rest of his posts about garbage collection techniques. I am always searching for the holy grail of garbage collection and his posts were very insightful.

-Mister

Adobe MAX 2009 – Los Angeles

Mister — Fri, 21 Aug 2009 16:00:30 +0000

This year Adobe Max 2009 is in my own backyard, well sort of 6 miles up the street, which means about an hour away in LA traffic. I am hoping to get in for free some how, either through Adobe Max Awards or by posting the Adobe Max Widget. See everyone there, maybe…

AIR :: TextField bug when resetting HTML text.

Mister — Tue, 14 Jul 2009 17:29:06 +0000

I ran into a really strange issue that only occurs within Adobe AIR applications (AIR 1.5.1/1.5.2). When I create a TextField control, set it’s style, and then assign it HTML text it appears fine. However, if I wish to reset that TextField content and the original content has links, the entire replaced content becomes one HTML link. I think the issue can be better explained with some images and some code samples.

Issue Context

The first image is a TextField with one HTML link. The link fires a TextEvent which is handled by a function which replaces the text. The original TextField out put is in the image below withe the “more” HTML link at the end:

The second image shows the result when the “more” link is clicked and the text is replaced. You can see that when the mouse is over the text the entire text becomes a “more” link even though the new content has no HTML links. The rollover style on the TextField underlines the text.

Below is the complete AIR application code that shows how I setup the application and changed the TextField content.

Code

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

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
<mx:Script>
[CDATA[
import mx.core.UIComponent;
import flash.net.navigateToURL;

private var textMessage:TextField;
private var longtext:String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum lorem in dolor facilisis aliquam dictum libero aliquet. Pellentesque scelerisque eleifend nunc nec consectetur. Pellentesque et libero lacus. Etiam condimentum diam pellentesque quam pretium ut gravida velit rutrum. Pellentesque sapien mauris, semper accumsan tristique at, hendrerit sed nunc. Quisque diam odio, dignissim quis scelerisque eu, interdum sed nibh. Sed fringilla, enim ac ultricies tristique, lacus ligula aliquet neque, et imperdiet nulla tellus in erat. In pulvinar, urna non semper congue, leo nulla vulputate dolor, et congue dui purus ac risus. Duis accumsan scelerisque consectetur. Nulla nisi justo, interdum sed porttitor a, rhoncus at lorem. Suspendisse sit amet tellus est. Maecenas vestibulum tristique sapien eu interdum. Integer a risus odio. " +
"Vivamus ac placerat neque. Donec consectetur malesuada lectus, id euismod odio convallis sit amet. Integer eget purus vel neque sagittis blandit."

private var shorttext:String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum lorem in dolor facilisis aliquam dictum libero aliquet. \"event:more\">[more].";

private function init():void
{
var object:UIComponent = new UIComponent();

this.addChild(object);

textMessage = new TextField();
textMessage.multiline = true;
textMessage.wordWrap = true;
textMessage.selectable = true;
textMessage.addEventListener(TextEvent.LINK, handleLinkClicked);

object.addChild(textMessage);

textMessage.styleSheet = getTextStyle();
textMessage.text = "\"body\">" + shorttext + "";
textMessage.width = 400;
textMessage.height = 200;

}

private function getTextStyle() : StyleSheet
{
var textStyle:StyleSheet = new StyleSheet();
var fonts:String = "Arial, _sans";
textStyle = new StyleSheet();
textStyle.setStyle(".body", {fontFamily:fonts, fontSize:"12", fontWeight:"normal", color:"#222222", textDecoration:"none"});
textStyle.setStyle("a", {color:"#245290", textDecoration:"none"});
textStyle.setStyle("a:hover", { textDecoration: "underline" });
return textStyle;
}

private function handleLinkClicked(event:TextEvent):void
{
var prefix:String = event.text;
var split:Array = prefix.split(":");
var type:String = split[0];
var id:String = split[1];

if(split.length > 2) id = split[1] + ":" + split[2]; // recreate the http link

if(type == "more"){
textMessage.text = "\"body\">" + longtext + "";
} else if (type == "link"){
var request:URLRequest = new URLRequest(id);
navigateToURL(request,"_blank");
}

return;
}
]]>

mx:Script>
mx:WindowedApplication>

Workaround

I can’t remember where in my web travels or blog reading I found this, but there seems to be a need to reset the TextField.htmlText value before setting the TextField.text value within AIR applications to clear the previous content. I couldn’t find any official bug that reported this issue. However, doing this will eliminate the bug and reset the TextField content properly. So in the event handler for TextEvent, just before setting the content of the TextField, do the textMessage.htmlText = “”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

private function handleLinkClicked(event:TextEvent):void
{
var prefix:String = event.text;
var split:Array = prefix.split(":");
var type:String = split[0];
var id:String = split[1];

if(split.length > 2) id = split[1] + ":" + split[2]; // recreate the http link

if(type == "more"){
textMessage.htmlText = ""; // reset the HTML value of the TextField
textMessage.text = "\"body\">" + longtext + "";
} else if (type == "link"){
var request:URLRequest = new URLRequest(id);
navigateToURL(request,"_blank");
}

return;
}

The issue could be with setting the styles of the link tags of the TextField. However, I could not reproduce this issue with Flex in a browser, this only occurs within an AIR application. If anyone can explain why this works or point me to the bug report for this particular issue, please pass it on, thanks!

-Mister

Flex :: Truncating HTML Text

Mister — Mon, 13 Jul 2009 00:51:16 +0000

With Flex truncating text within a Label control is easily done by setting the property “truncateToFit” to true. This parameter doesn’t do much when using the Text or TextArea controls in Flex. To truncate text in these controls you would have to build your own function to count characters and add the ellipses. There is one good example of creating your own custom Text control that truncates the text in the same manner as the Label control based on size of the control.

Now if you want to truncate HTML text within a Text or TextArea control thinks become more complicated. Currently in Flex doing anything with HTML is pretty dismal as there are not many ways to control the display of HTML or capture user interaction with HTML text. This seems to be changing with the upcoming release of Flash Builder 4 and the new spark components for displaying text and also the new Text Layout Framework . In the mean time you still might like to truncate HTML text in Text and TextArea controls.

I did find one blog post describing one method for truncating HTML text based on the size of the control. However, I wanted more restriction of the length of my HTML displayed and also wanted a way to better handle links that use the TextEvent to fire events from links clicks. There seem to be plenty of examples of HTML truncation within JavaScript and Java. I am lucky to have a girlfriend who also develops Java (and is also good looking ). I asked her for an example of HTML truncation and then translated that code in to working Flex code, which was surprisingly easy to convert.

Below is an example application that will truncate HTML text to any character length given. The truncation will not occur mid-link tag, only the text inside the links is counted you have the option to put a “… more” link at the end of the truncation to expand the text to its full length. I also gave the HTML a little extra formatting to distinguish links from regular text and add some rollover behavior for HTML links (something also missing from Flex). If the text Some limitations include image tags, break tags, and wrapping the entire block of text into a tag (However there is an easy work around that you can see in source code). The reason these limitations exist is because I only needed to truncate text that contain links. So the example will have to be expanded to include other tags.

Example

Complete Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="588" height="393" applicationComplete="init()">
<mx:Script>
[CDATA[

import flash.net.navigateToURL;

// string data to play with
private var loremIpsum:String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
"Curabitur ultrices orci non felis luctus non sollicitudin magna aliquet." +
" Curabitur lacinia dignissim \"event:link:http://www.google.com\">accumsan. " +
"Mauris ac dui in enim tristique egestas eu ac arcu. " +
"Quisque scelerisque, odio et luctus tempus, felis ante euismod felis, quis laoreet quam " +
"turpis in diam \"event:link:http://www.google.com\">http://www.google.com. " +
"Integer ut lectus id justo feugiat posuere. Vestibulum tempor porttitor " +
"justo, sed consequat dui lobortis ut. \"event:link:http://www.google.com\">Aliquam " +
"a posuere diam. Vestibulum turpis purus, " +
"dapibus id sagittis nec, volutpat ultricies leo. \"event:link:http://www.google.com\">Pellentesque tempus pulvinar ornare. " +
"Cras vel sapien vitae mauris tincidunt \"event:link:http://www.google.com\">http://www.google.com" +
" laoreet quis congue nisl. Aliquam pharetra nunc " +
"quis tortor adipiscing quis \"event:link:http://www.google.com\">elementum nulla venenatis. " +
"Suspendisse potenti. Mauris " +
"vitae enim sed nisl viverra venenatis \"event:link:http://www.google.com\">http://www.google.com. " +
"Proin auctor \"event:link:http://www.google.com\">mattis mollis. Phasellus ultrices " +
"ornare ullamcorper. Sed \"event:link:http://www.google.com\">turpis quam, tempus eget luctus eget, posuere vitae lorem. " +
"In vitae sem id lorem aliquam \"event:link:http://www.google.com\">viverra."

private function init():void
{
this.destinationText.styleSheet = this.getTextStyle();
this.destinationText.addEventListener(TextEvent.LINK, handleLinkClick);
this.destinationText.htmlText = "\"body\">" + loremIpsum + "";
this.sourceText.addEventListener(TextEvent.LINK, handleLinkClick);
this.sourceText.styleSheet = this.getTextStyle();
this.sourceText.htmlText = "\"body\">" + loremIpsum + "";
return;
}

private function truncateText():void
{
var limit:Number = limitStepper.value;
this.destinationText.htmlText = "\"body\">" + this.truncateHTMLText(loremIpsum, limit, true) + "";
this.destinationText.styleSheet = this.getTextStyle();
return;
}

/**
* Handle the click action on links within the html text using TextEvent.
* */
private function handleLinkClick(event:TextEvent):void
{
var prefix:String = event.text;
var split:Array = prefix.split(":");
var type:String = split[0];
var id:String = split[1];

if(split.length > 2) id = split[1] + ":" + split[2]; // recreate the http link

if(type == "more"){
this.destinationText.htmlText = "\"body\">" + loremIpsum + ""; // reset to original text length
this.destinationText.styleSheet = this.getTextStyle();
return;
} else {
var request:URLRequest = new URLRequest(id);
navigateToURL(request,"_blank");
}

return;
}

/**
* Truncate html text.
* @param value The original text value
* @param limit The maximum number of characters to show
* @param ellipses Boolean value to show elipses at the end of truncation.
* */
private function truncateHTMLText(value:String, limit:Number, ellipses:Boolean = true):String
{
if(limit == 0)
return "";

var original:String = value;

value = value.replace("[\\t\\n\\x0B\\f\\r\\u00A0]+", "");

var isTag:Boolean = false;
var count:int = 0;
var position:int = 0;
var limitLength:int = value.length - 1;
var closeTag:Boolean = false;

for(var i:int = 0; i < value.length; i++) {
var c:String = value.charAt(i);
if(isTag) {
if(c == '>') {
isTag = false;
if(closeTag || i == limitLength) {
position = i;
break;
}
continue;
} else {
continue;
}
} else {
if(c == '<') {
isTag = true;
} else {
count++;
if(i == limitLength || (count == limit)) {
if(((i+1) < limitLength) && ((i+2) < limitLength)) {
if(value.charAt(i+1) == '<' && value.charAt(i+2) == '/') {
closeTag = true;
continue;
}
}
position = i;
break;
}
}
}
}

var result:String = value.substring(0, position + 1);
var last:String = result.charAt(result.length - 1);
var length:int = result.length;

var nextChar:String = (length >= value.length) ? ' ' : value.charAt(length);

if(last != ' ' && last != '>' && nextChar != ' ' && nextChar != '<')
result = result.substring(0, result.lastIndexOf(' ') + 1);
var lastStartTag:int = result.lastIndexOf('<');

if(lastStartTag != -1) {
var ch:String = result.charAt(lastStartTag + 1);
if(ch != '/') {
result = result.substring(0, lastStartTag);
}
}

if(original.length == result.length)
return original;

if(result.length == 0)
return result;

var pattern:RegExp = new RegExp("(.*?)(\\s*\.\.\.\\s*)([\</[a-z]*?\>\\s*$]+)", "i");

if(result.search(pattern) == -1 && ellipses)
result += "...";

return (result + "\"event:more\">[more]");
}

/**
* Let's add a little style to the HTML text and mouse roll-over actions.
* */
private function getTextStyle() : StyleSheet
{
var fonts:String = "Arial, _sans";
var textStyle:StyleSheet = new StyleSheet();
textStyle.setStyle(".body", {fontFamily:fonts, fontSize:"12", fontWeight:"normal", color:"#222222", textDecoration:"none"});
textStyle.setStyle("a", {color:"#245290", textDecoration:"none"});
textStyle.setStyle("a:link", { textDecoration: "none", color: "#245290" });
textStyle.setStyle("a:hover", { textDecoration: "underline" });

return textStyle;
}
]]>
mx:Script>

<mx:TextArea id="sourceText" x="10" y="36" width="280" height="316"/>
<mx:TextArea id="destinationText" x="298" y="36" width="280" height="316"/>
<mx:Label x="10" y="10" text="HTML Text"/>
<mx:Label x="298" y="363" text="Char Limit"/>
<mx:Label x="298" y="10" text="Truncated HTML Text"/>
<mx:Button x="452" y="361" label="Truncate" click="truncateText()"/>
<mx:NumericStepper id="limitStepper" x="368" y="361" stepSize="10" minimum="100" maximum="1000" value="200"/>

mx:Application>

- Mister

Garbage Collection and Event Listeners

Mister — Fri, 29 May 2009 07:59:17 +0000

On a recent AIR project I have become aware and subsequently obsessed with memory. My concerns have centered around garbage collection and event listeners, specifically how you clean up event listeners to allow Garbage Collection (GC) to clean up objects. Most DisplayObjects implement the EventDispatcher class that allows it to broadcast events. Trolling around the googleverse I found some interesting ways to insure that you break strong references to allow clean up or manually remove event listeners on your own to make your application more memory savvy.

When you use addEventListener() method and register a event listener to an object you create reference. By default any object that has a reference to a listener will keep that reference until it is removed using the removeEventListener() method. Strong references will not be cleaned up by Flash player GC and remain in memory until the application is closed or the world ends, whichever comes first. This makes for a horribly leaky AIR applications, especially those applications that may run for days on the user’s system without being restarted.

Use Additional Parameters of Listener

The addEventListener() method does have some additional (and seldom used) parameters to create a weak reference when adding the listener to an object. On of those parameters is “useWeakReference”, the 5th parameter of the method. To utilize this parameter you need to set it from false to true:

1
2
3
4
5
6
7
8
9
10

addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false);
.....

var button:Button = new Button()
button.addEventListener(MouseEvent.click, handleMouseClick, false, 0, true);

private function handleMouseClick(event:MouseEvent):void
{
// handle the event
}

This will allow the event to be cleaned up at some point by Flash garbage collection. If you are like me and and find it annoying that the useWeakReference parameter of the addEventListener() method is false by default, you can can extend the object and make useWeakReference true by default, then use that object in your project:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package com.custom.controls
{
import mx.controls.Button;

public class CustomButton extends Button
{
public function CustomButton()
{
super();
}

override public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=true):void
{
super.addEventListener(type, listener, useCapture, priority, useWeakReference);
}

}
}

Explicitly Removing Listeners

Even though setting useWeakReference=true will most likely mark an object for clean up, to be even more certain you should explicitly remove the event listener with the removeEventListener() method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private var button:Button;

private function init()
{
var button:Button = new Button();
button.addEventListener(MouseEvent.click, handleMouseClick, false, 0, <strong>truestrong>);
}

private function handleMouseClick(event:MouseEvent):void
{
button.removeEventListener(handleMouseClick);
button = new Button();
// handle the event
}

Now you are certain that you have cleaned up and removed the listener manually and the object will be removed at some point during GC since there is no longer an explicit reference to the object.

Anonymous Functions

Another technique that comes in handy is to removing event listeners when using anonymous functions as event handlers. The trick to this techniques is the arguments.callee:

1
2
3
4

var button:Button = new Button()
button.addEventListner(MouseEvent.CLICK, function(event:MouseEvent):void {
event.currentTarget.removeEventListener(event.type, arguments.callee);
});

Bummer

Now for the disappointment. If you create an event listener using MXML they are always going to have strong reference by default with no way to change useWeakReference and they make it difficult to use removeEventListener() method:

1
2
3
4
5
6

private function handleClickEvent(event:Event):void
{
// handle event
}

<mx:Button click="handleClickEvent(event)"/>

So these objects will not be cleaned up when created in this way unless you have some clean up method that explicitly removes the event listeners or you add the event listeners to MXML object using ActionScript instead of binding.

So basically you need to add objects or listeners in ActionScript rather than use MXML when using the addEventListener() method, which sort of makes MXML less valuable in some respects because binding to objects and listening to events is what drives the framework.

Additional Links

For a great discussion on the topic, see Ted Patricks post and be sure to read all the comments as many of the examples were taken from discussion.

Garbage Collection Articles:

http://spreadingfunkyness.com/garbage-collection-with-flex-and-adobe-air/
http://blogs.adobe.com/aharui/2007/03/garbage_collection_and_memory.html
http://gskinner.com/blog/archives/2006/08/as3_resource_ma_2.html
http://www.adobe.com/devnet/flashplayer/articles/resource_management.html

AIR :: NativeMenu issue on Mac

Mister — Wed, 06 May 2009 17:06:42 +0000

I think the NativeMenu is a great option for AIR applications as you can get a consistent look for the application that matches the operating system. The other advantage is that NativeMenu’s are “outside” of the application and do not get clipped as they would if you just created a popup Canvas with a List control. However, I could not get the native menu to appear as a popup in my tests. In fact, it would often result in crashing the AIR application when i did NativeMenu.display();.

If I call a function that creates a NativeMenu from a button click everything works great. If I call the same function to create the menu from an event (like receiving data from a service call), the menu is not created and the application crashes upon subsequent attempts to create the menu. In addition, trying to create a NativeMenu popup on “createComplete” of the application also causes a crash.

So let’s say you have an application that you want to show a NativeMenu as a popup on startup of the application so you run the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="540" height="388" >

<mx:Style source="styles.css"/>

<mx:Script>
[CDATA[
private function init():void
{
var nativeMenu:NativeMenu = new NativeMenu();
var menuItem1:NativeMenuItem = new NativeMenuItem("Menu Item 1");
var menuItem2:NativeMenuItem = new NativeMenuItem("Menu Item 2");
nativeMenu.addItem(menuItem1);
nativeMenu.addItem(menuItem2);

NativeApplication.nativeApplication.menu.display(this.stage, 100, 100);

}
]]>
mx:Script>

mx:WindowedApplication>

This will cause an immediate crash of the application. But if you create an non-poppup NativeMenu, it works:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="540" height="388" >

<mx:Style source="styles.css"/>

<mx:Script>
[CDATA[
private function init():void
{
var nativeMenu:NativeMenu = new NativeMenu();
var menuItem1:NativeMenuItem = new NativeMenuItem("Menu Item 1");
var menuItem2:NativeMenuItem = new NativeMenuItem("Menu Item 2");
nativeMenu.addItem(menuItem1);
nativeMenu.addItem(menuItem2);

if(NativeApplication.supportsMenu){
var menuItem:NativeMenuItem = new NativeMenuItem("Menu Name");
menuItem.submenu = nativeMenu;
NativeApplication.nativeApplication.menu.addItem(menuItem);
}

}
]]>
mx:Script>

mx:WindowedApplication>

This works just fine. Initially I assumed this is some kind of timing issue or a possible undocumented bug. After a ton of research and much wasted time, I did find a possible bug mentioned by Marco Casario in his book “The Essential Guide to Flash CS4 AIR Development book is oriented to Flash developers “. Here is a snippet from his chapter on creating NatveMenu’s:

The display() method of the NativeMenu class only works properly on Microsoft Windows systems. Flash Player doesn’t work properly on Mac OS X systems, and displays the pop- up menu on the cursor of the mouse instead of at the specified coordinates. This occurs if the call to the display() function happens as a consequence of an event of the MouseEvent class . If the call happens in response to other events, the application doesn’t display the pop- up menu at all.

This limitation was not mentioned in the Adobe Documentation and as it happens, I was trying to create a NativeMenu popup for my AIR application on a Mac. I hate when you find these things out the hard way and waste a bunch of time tracking down obscure undocumented issues. If this is a limitation, it should clearly be presented as such when you look at the examples in the Adobe help. I think this is a Flash player on Mac issue, but so far I can’t find any official documentation on the problem nor could I track down an actual bug report. If anyone has any suggestions, please pass them on, thanks!

-Mr