Thanks, Mister! » Flex 3

AIR: Migrating Expired Certificates using AIR 1.5.3

Mister — Wed, 06 Jan 2010 08:39:19 +0000

If you renew your certificate and you are running an earlier version of Adobe AIR than 1.5.3, you are in a world of hurt. The process of updating and renewing your certificate is enough of a pain, but trying to update your AIR application after your certificate expires prior to 1.5.3 required you to just uninstall your previous version and reinstall a new version of your application.

Adobe AIR 1.5.3 Update

Luckily with AIR 1.5.3 you now have a grace period of 6 months to renew your certificate and still be able to publish an update to your application that users can install over the previous application. The down side is that it’s is not easy to update your certificate once you update to 1.5.3. You can read more about the Adobe AIR 1.5.3 update and changes to certificate migration here:

Release notes for Adobe AIR developers
Adobe AIR 1.5.3 Now Available

Updating Flex Builder 3 for AIR 1.5.3

First off, grab and install the latest and greatest AIR 1.5.3 from Adobe’s download site. You will also need to download the Adobe AIR 1.5.3 SDK to install within your Flex Builder 3. If you just change the descriptor file and not update the SDK to use AIR 1.5.3, you will receive the following error when compiling the project from the IDE:

invalid application descriptor: descriptor version does not match runtime version

or

EncryptedLocalStore may not use publisher IDs passed in from ADL

The instructions for updating Flex Builder 3 to use AIR 1.5.3 are not really clear, at least not for me. The best way to upgrade on the MAC is to download the AIR 1.5.3 SDK and manually drag the files to your Flex Builder 3 SDK folder. When you download the AIR 1.5.3 SDK and expand it, you can see the following folder structure:

You can just drag the folders one-by-one ( or the contents of the folder to be more careful ) to your Flex Builder 3 application directory inside the sdks folder. Now restart your Flex Builder 3 and create a new dummy project. If all goes well, your new project will have the 1.5.3 namespace already in the descriptor file. Now for existing Flex Builder 3 projects, you need to manually update your application’s namespace to 1.5.3 and add a new descriptor tag for publisherID (you don’t need to do this for a new AIR application, only if you are updating an project to AIR 1.5.3):

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5.3">

-- The application identifier string, unique to this application. Required. -->
<id>MyApplicationid>

<publisherID>3782AD3EDB99182DA9E106898998986691F7E39C8DBA6A3.1publisherID>
...

The publisherID is a combination of your application name and the publish id for the application. You can find the publisherID manually by looking at your currently installed application directory on MAC (Windows users can find it in the release notes):

1	MaciontoshHD > Users > [username] > Library > Application Support > Adobe > AIR > ELS > MyApplication.3782AD3EDB99182DA9E106898998986691F7E39C8DBA6A3.1

The long number after the application name is the publisherID, copy this and add it to your application descriptor file. You can also get the application publisherID from the NativeApplication:

1	trace(NativeApplication.nativeApplication.publisherID);

It should be noted that bye adding the …. to the descriptor file will create an error when compiling your application using Flex Builder 3:

invocation forwarded to primary instance

So this must be commented out of the descriptor file until you are ready to publish. If you leave this commented out when you publish the application, you won’t be able to migrate the application. So I am not sure how tracing the publisherID is going to be a help to you from the IDE when testing. You should also update the debug version of your Flash Player to the latest (10.0.42.34) before compiling your application. Now you can test your application from the IDE and it should work.

Migrating Expired Certificate

Now your application should run from the IDE and you can prepare to publish the application using your renewed certificate. Publish the application as normal using the renewed certificate to create the AIR compiled application. Now you will need to migrate your previous expired certificate using the ADT migration tools. The instructions for migrating certificates using the ADT migration tools can be found here:

http://www.insideria.com/2009/04/migrating-air-application-cert.html

Once you successfully migrated your previous expired certificate, your compiled AIR application is ready to update your previous version of the installed application on your system. If things didn’t go correctly, you will get an error that an application already exists with the same name, and you need to install the application in a different directory. That would be bad, and you probably missed one of the delicate steps and need to go through it all again. If you do get an update option to replace the existing application, you can no celebrate.

My Opinion about Certificates

In my opinion, using 3rd party certificate vendors (and paying for them) like Thawte, Verisign, ect. is total nonsense and just way to cumbersome. Adobe could easily provide a way to authenticate the authors of AIR applications with minimal cost to developers. This is especially important when you just want to publish an application for free and distribute it through the Adobe market place.

Adobe could borrow some ideas from Android Market, especially since Adobe plans on allowing developers to create more and more Flash/Flex content for mobile devices. Developers don’t need some complicated and expensive system in place to review code and authorize updates (i.e. iPhone app store), we simply need a way to verify to the end user that the author is who she says she is and the application is protected from someone else writing an application with identical name.

The renewal process for a certificate and the above steps to migrate certificates is a total pain, and I think an unnecessary barrier for Adobe AIR application developers. Anything Adobe could to do to lower the barrier for the average AIR developer to create certified applications would be greatly appreciated. There are also other ways to freely publish and distribute your application freely as described on this post at polyGeek.com:

http://polygeek.com/862_flex_deploying-trusted-air-apps-without-certification-for-free

-Mister

AIR:: Adding Application Menu Bar Items

Mister — Fri, 31 Jul 2009 18:55:57 +0000

Just a quick how-to post on adding application menu bar items to your Adobe AIR application when running. Certain operating systems can support application menu bars, so this example will not be true for all systems. You can check this using “NativeApplication.supportsMenu == true”, which basically means you are on Mac OSX dude. If you were on a Windows or Linux box you would check for “NativeWindow.supportsMenu == true” and add the menu items to the NativeWindow rather than the NativeApplication.

As it turns out, I ran into just a small confusing snag that initially prevented the added application menu bar item from firing a select event. I eventually reached out to the Adobe AIR Tight discussion group and Jesse Warden had a quick fix. It turns out that if you do not use strong item references, they are swept away by Garbage Collection (GC) before you actually use the items. For example instead of creating the NativeMenuItem within the scope of the function, I had to create it within the scope of the class or in this case, the WindowedApplication.

In my application I only needed to add a single menu bar item. So instead of blowing away the entire application menu and then creating all my own menu items (as many of the examples show). I just wanted to add a single item to the exiting application menu bar. On Mac OS, you get 4 application menu items: YourAppName, File, Edit, and Window. YourAppName would be your applications name or if you are running in the Eclipse IDE, just simply “adl”. In my case I wanted to add a “Preferences” option under the YourAppName. You can do this by accessing the NativeMenuItem representing the YourAppName. Something like NativeApplication.nativeApplication.menu.items[0] will return a NativeMenuItem with that reference. Using that reference you can then add a new NativeMenuItem to the submenu of the referenced NativeMenuItem. In addition to adding items to the submenu, you can also detect when the new item is selected.

In any event, here is the complete application code example:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" windowComplete="createApplicationMenu()" >

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

<mx:Script>
[CDATA[
import mx.controls.Alert;

private var prefItem:NativeMenuItem;
private var menuItem:NativeMenuItem;

private function createApplicationMenu():void
{
if(NativeApplication.supportsMenu) {
prefItem = new NativeMenuItem("Preferences...");
prefItem.addEventListener(Event.SELECT, handlePreferencesSelected);
prefItem.keyEquivalent = ",";

menuItem = NativeMenuItem(NativeApplication.nativeApplication.menu.items[0]);
menuItem.submenu.addItemAt(new NativeMenuItem("", true), 1);
menuItem.submenu.addItemAt(prefItem, 2);
}
}

private function handlePreferencesSelected(event:Event):void
{
Alert.show("handlePreferencesSelected");
}

]]>
mx:Script>
mx:WindowedApplication>

That’s it, so now you can have a new item under your application name in the application menu bar to fire whatever function you desire.

-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

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

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