Give us a call 203-379-0773

Name Your Own Price - Supported Flex Components that meet your Budget

I just sent this out to subscribers of the DotComIt newsletter:

Every once in a while someone says to me, "I would have bought your component if it was priced at X, but it is too expensive." Now I'm giving those people the chance to put their money where their mouth is.

In conjunction with the upcoming 360|Flex conference, we've launched a name your own price promotion. Radiohead did it to promote In Rainbows! 2D Boy did it to promote their casual game, World of Goo! Why not us? We couldn't think of a reason.

If you want to jump right to the promotion, do it. Otherwise you can read ahead about our thoughts on this.

Where Do We Start?

DotComit is not a new company, but the product business of Flextras is very different than the consulting business we've run for so long. We're still trying to figure out how to make it work, especially in this digital realm where products are just digital bits easily distributed by anyone.

It is up to us to add value to our customers above and beyond what they get by replicating digital bits. One of the items we offer is support. When you buy a Flextras component, you're buying access to us to help you solve your problems. You're buying the ability to have us tweak the API for your specific needs. You're buying peace of mind in the unlikely event that things go wrong.

Sometimes when you're dealing with random digital bits you find on the Internet they are not as polished, thought out, or bullet proof as you need them to be. Another value we can offer is our ability to continue to build and test high quality components. Your support, however you give it, helps us do that.

How do we judge success?

There are two ways we can judge this promotion as a success; one is by the number of people who participate. We'd love to reach one thousand new customers with this promotion. You can help. First, get your own set of our components. Then tell your friends. Blog about it! Post it on Twitter and Facebook. You can help us spread the word.

A second measure of success is the monetary one. I ran the numbers; and discovered that it takes $99.72 a day to keep Flextras running. That does not include non-routine marketing expenses, such as sponsorship costs of 360|Flex or Flash and The City. If we were to generate $15,000 of new revenue it would cover our conference sponsorship costs; and we'd consider it a smashing success.

Can you help us spread the word? We'd appreciate it?

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?

Understanding the Flex Component LifeCycle Methods

Lately we''ve been getting a lot of questions about the proper way to use the methods in the Flex 3 Component LifeCycle. I wrote about this in the December Flextras newsletter and thought I'd turn it into a post here too.

The Flex Component Lifecycle is a set of methods and events that Flex uses to setup, size, and position the components that make up your Flex Application. There four lifecycle methods that you'll use when creating Flex Components: createChildren(), commitProperties(), measure(), and updateDisplayList(). I'll discuss each one individually.

createChildren()

The createChildren() method is aptly named. It is intended to create the children of the component. This is run as part of the initial component setup and is never run again. In our Calendar component's MonthDisplay class we use createChildren() to create the day name headers to display the day of the week and the month header which displays forward / next buttons, the month name and the year.

commitProperties()

I consider the commitProperties() method is a wild card method. You'll use commitProperties() to coordinate component changes all at once. However, the exact use of this is a bit of a gray area. It depends what properties have changed and how they affect the component.

In many of the custom components I've built I find that I'm using commitProperties() as an alternative for createChildren(). In our Calendar component, I use it to create the month's days from a dayRenderer. This can't be done in createChildren() because we may not know the displayedMonth or displayedYear yet, and therefore can't determine the number of days in the week.

measure()

The measure() method will determine the ideal size of this component. Its' purpose is the most concretely defined of all the component lifecycle methods. This will set the measuredWidth, measuredHeight, measuredMinWidth, and measuredMinHeight properties on your component. A component is always sized by its' parent; but if these properties are suggestions to that parent.

How you calculate the meauredWidth and measuredHeight is open to interpretation and depends on your component. In most cases, you'll examine each of the component's children and keeping some type of running tally. For our Calendar component's 'month display, we set measuredWidth to the width of the longest week. MeasuredHeight is calculated using sum of the heights of the largest day in each week. The calculations take into account localization features, such as the first day of week.

I've experienced a few gotchas with the measure() method. First, if you specify an explicit height and width, the measure method will not be run. This is done for performance reasons. If you already know the height and width, why does the parent need suggestions from the child? It doesn't!

Second, the documentation states that measuredMinWidth and measuredMinHeight are optional, but I have found this not to be the case. If these values are not set I've experienced situations where the width or height ended up being set to NaN, which interferes with sizing calculations up the component chain.

updateDisplayList()

The updateDisplayList() method is intended for changing the visual pieces of the component. It is great for setting the height and width of your children and positioning those children with the x and y coordinates. In the Calendar's MonthDisplay this will size and position all the days. Even though the measure() method assumes that individual days can contain have different height or widths, updateDisplayList() forces all days to the same size. You may also use updateDisplayList for changing styles.

Final Words

So, in summary:

  • createChildre(): Creates the component's children
  • commitProperties(): Coordinates property changes
  • measure(): Determines the ideal size of a component's children
  • updateDisplayList(): Positions and sizes the children

Most of the work I do when building components for Flextras relates to use of one of these component lifecycle methods. The Flex 4 framework does bring quite a few changes along with a new component architecture. Perhaps I'll write about that another time.

Passing Data to List itemRenderers

We send out a monthly newsletter to subscribers, and this is April's newsletter. You can subscribe to our mailing list by creating an account at www.flextras.com

The AutoCompleteComboBox is now feature complete and I'm adding some polish to the code and documentation. I expect to have a final version out to beta testers later this week and it will be available for sale before the end of the month. Since you guys like the technical stuff, I thought I'd talk about one of the challenges I had while creating the AutoCompleteComboBox.

What is an AutoCompletes?

An AutoComplete is a text input box. When you start typing, a list of possible options is displayed, trying to guess what you want to find. Two common examples are a browser address bar or an e-mail client address field. In the list that pops up, the text you typed is usually highlighted. Here is an example:

In the Flextras AutoCompleteComboBox, each item in that list is displayed with an itemRenderer. Inside the itemRenderer, I wanted to provide access to the type ahead text so that you guys could style or process it in any way you wanted. This was not as easy as I thought it'd be.

How do AutoCompletes work?

Our AutoCompleteComboBox is an extension of the ComboBox in the Flex Framework. The drop down portion of the ComboBox is a List. The itemRenderer that you set on the ComboBox is passed into the list and used to create each list item. The AutoCompleteComboBox has a property named typeAheadText that lets us know what the user typed. To provide syntax highlighting the itemRenderer needs to know what the type ahead text is.

I thought this would be easy. I could just use the listData property to get the listOwner and access the public property on the AutoCompleteComboBox. Right? Unfortunately, no, that was wrong. The drop down is positioned using the PopUpManager. The parent of the drop down is not the ComboBox. There was no easy, consistent way to traverse the hierarchy using listOwner to get to the AutoCompleteComboBox values.

While Building the Flextras DataSorter I spent a lot of time rummaging through the List code in the Flex SDK. It gave me good insight into how lists work, and that knowledge was very useful here. Let's solve the problem.

Creating My Own List?

I decided the best solution would be to create my own custom List that could send in the typeAheadText as part of the list data. These are the steps:

  1. First, I decided to create my own ListData class, AutoCompletListData. This class extends ListData and adds my new instance variable, typeAheadText as a public property.
  2. Next, I created my own extension of the List Class, AutoCompleteDropDown. In this class, I added the typeAheadText as a public property.
  3. In my custom List class, I overrode the makeListData function. makeListData creates the listData instance that is passed to each itemRenderer. Instead of returning an instance of the ListData class, it returns an instance of my new AutoCompleteListData class.
  4. From within the AutoCompleteComboBox, I changed the dropdownFactory to create my AutoCompleteDropDown instead of a standard list. Whenever the type ahead text changes in the AutoCompleteComboBox, it is set in the ComboBox dropdown, and filtered on down to the itemRenderers.
  5. From Within the itemRenderer, I can access the typeAheadText by casting this.ListData to my AutoCompleteListData and then accessing the value:
    AutoCompleteListData(this.listData).typeAheadText
Once you can access the typeAheadText in your itemRenderer, you can use it to style the display in any way you can imagine. I used a regex to add some bold statements to the HTML text on a label. That is baked right in. But, if you want to do something more in your development, you can. Once the component is released, I plan to make a bunch of different examples for how this works.