Give us a call 203-379-0773
Back our Angular 4 Book on Kickstarter.

Check out my Angular 4 Book Kickstarter

I know this isn't related to Flex Development, but I just launched a Kickstarter for an Angular 4 book. Check it out here. There are a lot of details on the Kickstarter page, but this is your chance to learn how I build HTML5 apps similar to the ones we used to build with Flex.

There are a lot of details on the Kickstarter page, so click over there and back now.

A Flex AutoCompleteMultiSelect Component

I am surprised to announce a brand new Flextras component. A consulting client wanted an AutoComplete component which would allow multiple items to be selected in the drop down. So, I built them one. This component is an extension to the Flextras Spark AutoComplete component that allows for multiple items to be selected in the drop down. The new component has a few variations, so let's talk about them.

Getting the Code

Ever since we shut down the Flextras store, we are no longer updating binary builds on the Flextras web site. You can get the updated code from our GitHub repository. I recommend building it into a SWC with a Flex Library project. Here are instructions to do that from Flash Builder:

  1. Create a Flash Builder Library Project
  2. Put the Spark directory into the Flash Builder Library Project's source directory.
  3. Include design.xml and manifest.xml in project [Optional]
    1. Bring up project properties on your Library Project
    2. Select Flex Library Build Path
    3. Select Assets
    4. Select design.xml and manifest.xml
  4. Set up namespace URL [Optional]:
    1. Bring up project properties on your Library Project
    2. Select Flex Library Compiler
    3. Click Browse next to manifest file; and select the manifest file on your disc
    4. Enter "http://www.flextras.com/mxml" in the namespace URL box
  5. From the Project menu select Clean; and your Library Project's bin directory should have built a SWC.

Now you can add the library project, or generated SWC, to the library path of a main Flex project to create the application.

Generic AutoCompleteMultiSelect

Once you have the library SWC compiled, you create a simple application to demonstrate the AutoCompleteMultiSelect like this:

<?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/mx"
             xmlns:flextras="http://www.flextras.com/mxml">

    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dataProvider : ArrayCollection = new ArrayCollection([
                {label:'Alabama',data:1},
                {label:'Alaska',data:2},
                {label:'Arizona',data:3},
                {label:'Connecticut',data:7},
                {label:'Delaware',data:8},
                {label:'Florida',data:9},
                {label:'Oklahoma',data:36},
                {label:'Oregon',data:37},
                {label:'Pennsylvania',data:38},
                {label:'Wyoming',data:50},
                
            ]);
        ]]>

    </fx:Script>
<flextras:AutoCompleteMultiSelect dataProvider="{this.dataProvider}"/>
</s:Application>

This demo application starts with the Application tag, as Flex applications often do. There is a script block which creates an ArrayCollection as a dataProvider. Then there is the AutoCompleteMultiSelect component. The AutoCompleteMultiSelect will be in the flextras namespace if you compiled it as per previous instructions. Specify the dataProvider on the AutoCompleteMultiSelect instance and run the application:

The AutoComplete input is put inside the drop down with the default skin. You can type inside it to see the list get filtered:

You can select an item by clicking on it. You can use the control key when clicking to add items to a selection. When you want to select a range, then select the first item and hold down the shift key when clicking the second item. All items between the first and second item will be selected. This is probably what you are used to from the Flex list. The selected items will show up visually in the drop down, and also show up in the prompt area:

The items are separated by a comma; however you can change it using the delimiter property on the component. Go play with this sample or get the source.

It is worth nothing that the component also exposes all the selected items using a savedSelectedItems property. If you need to access all the selected items, this is the best way to do so. The selectedItems or selectedIndices properties relate back to the dataProvider, which may have filtered out selected items if you have typed something in the AutoComplete input.

Use the component as an MultiSelectDropDownList

In the process of developing this component, I also created a skin without the AutoComplete functionality, essentially creating a MultiSelectDropDownList. The skin is named DropDownListMultiSelectSkin.mxml and is located in the spark.flextras.autoCompleteMultiSelect directory.

You can create a new application, similar to the previous one and just set the skinClass property on the AutoCompleteMultiSelect component

<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/mx"
             xmlns:flextras="http://www.flextras.com/mxml">

    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dataProvider : ArrayCollection = new ArrayCollection([
                {label:'Alabama',data:1},
                {label:'Alaska',data:2},
                {label:'Arizona',data:3},
                {label:'Connecticut',data:7},
                {label:'Delaware',data:8},
                {label:'Florida',data:9},
                {label:'Oklahoma',data:36},
                {label:'Oregon',data:37},
                {label:'Pennsylvania',data:38},
                {label:'Wyoming',data:50},
                
            ]);
        ]]>

    </fx:Script>
<flextras:AutoCompleteMultiSelect dataProvider="{this.dataProvider}"
skinClass="spark.flextras.autoCompleteMultiSelect.DropDownListMultiSelectSkin"/>

</s:Application>

Run this application to see the working app:

Open the drop down by clicking the button, and select a few items. You should see something like this:

You can play around with the live application. or get the source.

Adding a Checkbox Renderer

I created one other component in this new round of Flextras development. My client wanted a renderer with a checkbox that would represent the state of an item. I created a CheckboxAutoCompleteRenderer.as in the spark.flextras.autoCompleteMultiSelect.renderers directory. You can use it in an application like this:

<?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/mx"
             xmlns:flextras="http://www.flextras.com/mxml">

    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dataProvider : ArrayCollection = new ArrayCollection([
                {label:'Alabama',data:1},
                {label:'Alaska',data:2},
                {label:'Arizona',data:3},
                {label:'Connecticut',data:7},
                {label:'Delaware',data:8},
                {label:'Florida',data:9},
                {label:'Oklahoma',data:36},
                {label:'Oregon',data:37},
                {label:'Pennsylvania',data:38},
                {label:'Wyoming',data:50},
                
            ]);
        ]]>

    </fx:Script>
<flextras:AutoCompleteMultiSelect dataProvider="{this.dataProvider}"
                                     itemRenderer="spark.flextras.autoCompleteMultiSelect.renderers.CheckboxAutoCompleteRenderer"/>


</s:Application>

The only change in this from the original sample is that it includes an itemRenderer on the AutoCompleteMultiSelect.

Select a few items to see the checkbox work. The interesting thing about this renderer is that if you click the checkbox, you do not have to use the control key to select multiple items in the drop down:

The CheckBox Renderer also has AutoComplete functionality, and will highlight the typed text inside the renderer's label display:

You can check out a running sample or get the source.

Final Thoughts

Since we shut down the Flextras store, I didn't think I'd be spending much more time on it, but a client came along with some specific extensions to our component set and I was happy to work with them to make these changes, and I'm equally happy to share them with the Flex community. I hope you find them useful.

We are willing to entertain similar requests from other clients if you have a need be sure to email us to discuss.

Flextras has moved Servers

We have just completed a move of this server from our old hosting provider onto an Amazon EC2 server. If you find any problems, please be sure to let us know.

Flextras Components Go Open Source

I sent this out to folks on the Flextras Newsletter a bit earlier in the month, but here comes a formal blog announcement.

Flextras Components Go Full Open Source

You can get the most recent source code for all our components, under an Apache License, from the Flextras GitHub account. This includes our Calendar, the Flex AutoComplete component, and the mobile component set. The Mobile Component set includes a Flex mobile DropDownList, a mobile AutoComplete, and a handful of other components.

If you don't want to build the source yourself, binary builds are still available for download the Flextras web site, along with our documentation and samples.

What about Flextras Customers?

If you're already a Flextras customer, you'll still be eligible for complimentary support, as we have always provided. If you're not a Flextras customer yet, we will be more than happy to provide you with support at a cost. This can be done on an hourly basis, or through extended consulting engagements depending on your need.

Final Thoughts

I've spent the past five years of my time devoted to Flextras and being part of the Flex Development Community. It would be fantastic to see lots of people do great things with my component legacy.

If you want to say thanks, or if you need help, be sure to contact us. We'd love to hear from you and will be here when you need us.

Check out the Flextras AutoComplete KickStarter

Did you ever wish that the Flex Framework had a native Autocomplete Component? Do you wish you had easier access to the source of the Flextras AutoComplete? Do you want to help make those things happen?

Now you have a chance to answer all three questions as a yes.

We have launched a KickStarter campaign to do just that. If funded, we are going to expand the API of our Spark AutoComplete and donate all the code to Apache Flex.

This is an experimental approach to funding our love for creating Flex components. If you like the idea, then go check out the Kickstarter and let's make this happen.

StageText in Mobile Flex - 5/4/2012 - Episode 137 - Flextras Friday Lunch

This week I talk about the advantages and pitfalls of using StageText in a Flex mobile application.

Flextras Friday Lunch is a short demo followed by open Q&A that occur the first and third Friday of every month 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

Play the Free Flextras Game

As part of the Flextras 360|Flex promotion, we created a customized version of our Flash game, Igor Knots and the Magonda Maze.

We named this game Free Flextras, and it ties into the fact that our components are now available for free for production use. You can pay if you want the source code, or you can pay if you want help. People seemed to respond positively to this approach, so we walked away from 360|Flex with warm fuzzies.

The way the game worked was that you would sign in--with your Flextras Account--and then could unlock, and play, the levels by guessing the codes. You could find codes by doing "Desirably" things such as stopping by the Flextras booth at 360|Flex or coming to Jeffry's presentation or just by random guessing. All in all, I had 20 codes, 10 were discoverable and 10 were guessable.

These are the codes:

  • FirstOne: This code unlocks the first locked level and is on the post card that was included in the 360 Swag bag. In retrospect, I wish I gave out a sticker instead of a postcard.
  • Preso: This code was on a slide as part of my presentation.
  • LiveDemo: This was part of our Booth Video Loop, which demonstrated our components in action. I chose it because they were watching our demos live.
  • MobileDropDownList: This was part of our Booth Video Loop, which demonstrated our components in action. It refers to our Mobile DropDownList, available as part of the Flextras Mobile Components.
  • MobileAutoComplete: This was part of our Booth Video Loop, which demonstrated our components in action; and it refers to our Mobile AutoCompleteComboBox component, available as part of the Flextras Mobile Components.
  • FlextrasDude: This was part of our Booth Video Loop, which demonstrated our components in action. The Flextras Dude has shown up in a few of our promotions and he was the star of the Free Flextras game
  • Master: This code showed up on a slide as part of John Wilker's 360|Flex focused Wednesday Keynote. I used Master as the code word because I figured that John is the Master of Ceremonies. This code unlocks the second to last board, named Checkers, which is my favorite.
  • IgorKnots: Igor Knots is the name of the character in our non-Flextras focused mobile game. Since this uses the same engine, I used his name as a codes. This was available on a flyer at the Flextras booth.
  • MagondaMaze: The Magonda Maze is the other half of the title of the Igor Knot game. I used this for the same reason I used Igor Knots; and it was available on a flyer at the Flextras booth. I switched flyers each day, each having a different code.
  • FutureFreedom: This was the final code at the Flextras booth, on the Flyer for the third day. I was trying to tie into the "Free" theme here. From here on out, it was a bit of guessing to find the codes.
  • Calendar: This code refers to our every popular Calendar component. I'm surprised at how many people were looking for an Alternate Calendar component to the one they were currently using.
  • AutoComplete: This is a reference to our stand alone AutoComplete component, which has an MX Version and a Spark Version and is even available in our Mobile Component set.
  • TheFlexShow: The Flex Show is a podcast about Flex Developers that I produce and we consider part of the line of 'stuff' that DotComIt does. We recorded a bunch of on-site interviews at 360|Flex.
  • AskTheFlexpert: Ask The Flexpert is our pay by the minute help line. If you need help as a Flex Developer, feel free to give us a call.
  • 360Flex: 360|Flex is, of course, a reference to the conference we were at.
  • JeffryHouser: This one is my name.
  • Flextras: Flextras was chosen for obvious reasons; and I thought it was an easy guess.
  • DotComIt: DotComIt is the company under which Flextras, The Flex Show, and Ask The Flexpert fall under. Aside from all these extra curricular activities, we primarily do consulting
  • Freebie: This ties into the free nature of our components. I think this was a hard one to guess, but I thought people may go crazy like they did for last year.
  • ApacheFlex: Apache Flex unlocks the final board of the game. I'm one of the initial contributors and I knew a lot of talk about the conference would be 360|Flex focused.

From my perspective, this years promotion was not as successful as last year's promotion. I think I had problem was we didn't do a good job of drawing people in, since we did not offer a big prize like last year's Xoom. We only had 14 players, and I came home with a box of T-shirts. The game may have had trouble fitting on people's laptop screens too; and one person chastised me for not having an iOS version.

But, with all the codes available, I hope everyone can take a look and play the game. It shouldn't take more than a half hour to get through all the levels. And be sure to check out our Components, all now available for free.

Flextras Components are now free for Production Use

Hi Everyone, I'm here in my hotel room at the 360Flex conference and wanted to share the big Flextrsa news with all of you. Flextras components are now free for production use. These are fully functional components, with no timeouts, no watermarks, and no hidden "gotchas". This includes all of our Flex Components, including our Flex Mobile Components--such as the Flex Mobile DropDown, are ever extensible Flex Calendar component, and the Flex AutoComplete Component.

We hope you use them and build great things.

As part of this change, we are also offering different support options. For those using our free components, you have these options for support:

  • Google Groups: We've opened a Google Group strictly for Flextras components. This will give you the chance to pose the question to other users of our components. We'll be watching the group too, and will answer questions as time allots.
  • Flextras Friday Lunch: The Flextras Friday Lunch is our weekly live Q&A session. It occurs every Friday at 1pm Eastern time, and we usually hang out for an hour. Stop by, pose your question and w'ell probably be able to point you in the right direction.
  • Twitter: If you can sum up your question very concisely, we'll be more than happy to help you out.

If you want personalized support, or the source code, you'll have to purchase a license.

Here is a video message from Jeffry Houser (me), the Brains behind Flextras on the subject:

Flextras Flex AutoComplete Component Update

We pushed up new release builds of our Flex AutoComplete component last night. This includes a bunch of bug fixes throughout the product line:

In our MX AutoComplete:

  • Added version compiled against Flex 4.5
  • Fixed bug where cursor location was not being set properly if a mouse was used to select items.
  • Fixed 4.5 issue where border around TextInput would vanish.

In our free Spark AutoComplete:

  • Fixed Bug where selectedIndex and selectedItem would change during a copy operation.
  • When setting the dataProvider to null; we fixed bug where selectedIndex / selectedItem did not reset themselves automatically.
  • Stopped weird scrolling issue unique to Flex 4.5

We also refreshed the Mobile AutoComplete version to the latest from our Mobile Component set.

Check out the full release notes for the details; and as always you can download the developer edition to test them out for yourself in your own application.

Name the Flextras Dude and get $100 off our Mobile Components

We've created this character a while back and you may have seen in some form as we've been out promoting ourselves at conferences and elsewhere.

We have named him "the Flextras Dude". Let's face it that isn't much of a name. As such we have decided it is time to give the Flextras Dude a formal name.

We have put together a one question survey where you can help name him. We have a few names that we like, but would love your input.

Just by filling out this one question survey, you can get our Mobile Component set for $100 off. Just with one click, so please throw in your votes.

I've embedded the form below, but you can also find it here:

More Entries