Give us a call 203-379-0773

Flextras Friday Lunch - Episode 48 - 2/5/2009 - mx_internal

In this episode I talk about the mx_internal namespace. We talk about e4x, Book publishing, context menus, and FlexPMD.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Subscribe

Contact

Flextras Friday Lunch - Episode 47 - 1/29/2009 - Sorting an XMLListCollection

In this episode I demonstrate how to sort an XMLListcollection. The audience asks about component sizing and progress on the Flextras Calendar Component.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Subscribe

Contact

Flextras Friday Lunch - Episode 46 - 1/22/2009 - The Strategy Pattern

In this episode I talk about the strategy design pattern. I take questions about framework performance and framework use of design patterns, book publishing, and ActionScript Tiff encoders.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Subscribe

Contact

Changing the Highlight of our AutoCompleteComboBox

A prospect approached me about our AutoCompleteComboBox.

I noticed that the highlight of the AutoComplete text is done in bold. That means if I am using a custom font I have to embed both the normal and the bold font for the highlight to show up.

The highlighting in our Flex AutoComplete Component is done using a the htmlText property of a label. If you are embedding a custom font, and the bold version of that font is not available, you won't see the highlight. This is confirmed in the bold section of the Flex htmlText Documentation.

ItemRenderers make this aspect of our AutoCompleteComboBox completely customizable. I demonstrated this in one of the early Flextras Friday Lunch episodes. You can also view the sample and the source code. The sample is downloadable as part of our free developer edition.

The custom itemRenderer is an extension of the label. It listens to the dataChange event and modifies the label's htmlText property using some regEx to find the typed text. I'll show you the code:

public function onDataChange(e:FlexEvent):void{
var ld : AutoCompleteListData = AutoCompleteListData(this.listData)

var label : String = data.FirstName + ' ' + data.LastName + ' ' + data.Email
if(ld.typeAheadText != ''){
var regEx : RegExp = new RegExp(ld.typeAheadText ,'ig');
this.htmlText = label.replace(regEx , '<b>$&</b>');
} else {
this.htmlText = label;
}
}

First, the custom renderer gets the AutoCompleteListData. This is an extension of the listData class.

The code then generates the string for our label. The AutoComplete's default renderer supports the labelField and labelFunction, but this custom renderer sample accesses properties directly in the data object.

The regex uses the i flag, which tells the search to ignore the case. The replace tag function just encloses our typed text with bold. You could use different colors, or underlines as alternatives to bold. Or you could roll your own.

The prospect went on to ask if there was a way to select every instance of the type ahead text. That is done with a simple mod of our itemRenderer. Just add the 'g' flag tot he regex expression, like this:

var regEx : RegExp = new RegExp(ld.typeAheadText ,'ig');

I updated the sample to include the multiple selection:

Flextras Friday Lunch - Episode 45 - 1/15/2009 - updateDisplayList()

In this episode I talk about the updateDisplayList() method. Participants ask about component resizing, and we go into details on the Flex component lifecycle.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Subscribe

Contact

Flextras Friday Lunch - Episode 44 - 1/08/2009 - Using a Stack as an Array

In this episode I talk about the stack data structure and using Arrays as a stack. I field questions about the Vector class, Flex Builder Problems, and BlazeDS.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Subscribe

Contact

Flextras - A Look Back and a Look Forward

A new year is always a great time to look forward and to look back. This is a modified version of January's DotComIt newsletter to discuss the "State of Flextras."

A Look Back

Flextras launched in January 2009 with a single component to our library. I had the five year goal of generating a half a million dollars in yearly sales and employing 5-6 people all focused on building a line of User Interface Flex Components that save Flex Developers time. The success of Flextras could be calculated in many ways, and I thought I'd share some of the metrics we use internally to evaluate our progress.

First, there is our Mailing List. Entering January, there were 239 people on this mailing list; now there are 662. That is a 277% increase in people interested in the stuff we do. We must be doing something right. I'll count that as a success. You can get on our mailing list by registering on our site and opting in.

Next, I take a look at our Developer Edition Downloads. We had 390 downloads of our AutoCompleteComboBox, and 189 of our DataSorter. While we're happy that 390 people are interested in finding out about the stuff we build, not everyone who registers on the site goes on to download a Developer Edition. We'll have to review our process to make sure it is not causing issues. This is a half success.

In a perfect world, Flextras would be releasing 6-12 components a year. That pace requires more than one developer. I was hoping to release four in 2009, but have fallen short. Building a Calendar has turned out to be a lot less trivial than I thought, and I didn't think it would be trivial. But, I've learned a lot and continue to keep moving forward. This is a half success.

Cash Flow is perhaps the most important indicator of the lifeblood of a business. From that perspective, DotComIt has had a rough year. Flextras has only generated 6 paying customers. Sales have been slowly increasing, though. I have a lot of my own thoughts as to why we don't have more sales, but if you want to chime in with yours, I'd love to hear them.

DotComIt brought in some money through other avenues including The Flex Show Pledge Drive, some small consulting projects, and some one-on-one mentoring. Unfortunately, we're still hovering near a $3K loss this year and I haven't taken any salary in ten months. These are fun times that we live in!

A Look Forward

My top priority is going to be finishing up our Calendar Component and getting that available for sale. I believe this is a big hole in the Flex community that is not appropriately filled; and I think I can be the one to fill it. You can watch The Flex Show video series for a good understanding of how we have approached our development of the component.

I expect to start offering some premium support options; and a subscription service where you can get our whole component set for a single price. I'll need to rework our web site to support such things, and may need another lawyer visit. I believe that selling a mix of support and services is one step to reaching our end goal.

I'm also thinking about our first employee. It will have to be funded by sales, but If Flextras can generate 40 sales a month, and keep up the pace consistently for six months, I'll be looking to add my first employee. It sounds like a big goal, but I plan to make that happen this year.

I'm also working on some non-Flextras ventures that should come out sometime this year.

Final Words

I'm sure that we'll have many other adventures in 2010. My own personal year in review is up on my blog now. The Flex Show's review episode will be released on Wednesday January 6th. So, tell me, what can I do to bring you on as a customer in 2010?

How do I prevent typing in the AutoComplete Flex Component once the dataProvider is empty?

This question comes in from a client using our AutoCompleteComboBox. Note, I modded his original question to make it more appropriate for blog posting.

I'm letting my users type ahead to find a state, but right now, it's allowing them to just keep typing if the text they've entered doesn't match an existing entry.

I was looking for a property that would restrict selection / value to the data provider, but I didn't see any obvious properties that would do that.

What's your recommendation to enable that?

If I understand the request, we want to prevent users from typing further when the dataProvider's length drops down to zero. There isn't an explicit property built into our AutoCompleteComboBox that will do that.

But, we can implement it pretty easy. We just need to listen to the autoCompleteDataProviderFiltered event, check the dataProvider's length, and if it is zero reset the TypeAheadText.

This might make some more sense with some code. First here is our AutoCompleteComboBox:

<flextras:AutoCompleteComboBox id="ACCB" dataProvider="{myDB2}"
autoCompleteEnabled="true"
autoCompleteDataProviderFiltered="onDataProviderFiltered()" />

The code is listening for the autoCompleteDataProviderFiltered event and running an event handler. This event is dispatched by the component after the dataProvider has been filtered.

Inside our event handler, we want to check the dataProvider's length:

public function onDataProviderFiltered():void{
if(ListCollectionView(ACCB.dataProvider).length == 0){

}
}

If the dataProvider's length is not 0; then we do nothing. The component can continue to operate as it is. If the dataProvider is zero, we want to strip off the character that the user just typed, using a line like this:

public function onDataProviderFiltered():void{
if(ListCollectionView(ACCB.dataProvider).length == 0){

ACCB.autoCompleteSetTypeAheadText(
ACCB.typeAheadTextValue.substring(0,ACCB.typeAheadTextValue.length-1));

}
}

It uses the type ahead text property, which represents what the user typed, and removes the last character from it using the substring method of the String Class.

It resets the type ahead text using the autoCompleteSetTypeAheadText method.

You can view a sample application or the full source code:

How do you tell if a component is in a transition?

I'm working on Fleshing out the Flextras CalendarDisplay component. I think I'm finally happy with our approach to implementing a day view. One of the things we want to support is the ability to transition between a month view, a week view, and a day view.

Transitioning from a day display to a month display was working fine. Transitioning from the month to the day was not. After stepping through the code I discovered that the updateDisplayList() method would resize the day before the effect ran, thus negating the effect.

I needed a way to figure out if a transition was playing and tell the component not to run the updateDisplayList() method.

I've seen some situations where you set a Boolean value "transitionRunning" to true before running the play method, then set it back to false in a listener to the effectEnd method.

But, that wouldn't work in this situation. If the transition is a transition between two states, then all the code for starting / stopping the effects is locked up in private methods of UIComponent.

I ended up writing this method to loop over the transitions array and figure out if one of the effects was playing.

protected function isTransitionPlaying():Boolean{
if(this.transitions){
for each(var transition : Transition in this.transitions){
if(transition.effect.isPlaying){
return true;
}
}
}
return false;
}

My intuition tells me there should be an easier way, but I'm not sure what that is.

Update:

A friend on twitter recommended I take a look at the activeEffects property. The function would be modified like this:

protected function isTransitionPlaying():Boolean{
if(this.activeEffects.length >
0){
return true;
}
return false;
}

Unfortunately, that didn't work. Even though a transition was running, it was not on the activeEffects array. I'm unsure why.

Flextras Friday Lunch - Episode 43 - 12/18/2009 - The measure() method

In this episode I talk about the Flex Component LifeCycle's measure() method. We talk about 360|Flex San Jose in 2010, build tools such as ANT and Maven, and constraints based layouts.

Flextras Friday Lunch is a short demo followed by open Q&A that occur every Friday at 1pm EST. The presentations take place over Connect. You can find out what time this occurs in your own time zone at TimeAndDate.com.

I hope I can help answer some of your questions at the next one.

Notes

Subscribe

Contact

More Entries