Give us a call 203-379-0773
Check out our new training course on AngularJS for Flex Developers

Spark DataGrid - 8/24/2012 - Episode 148 - Flextras Friday Lunch

This week I demo the Spark DataGrid.

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

Understanding SkinParts - 8/3/2012 - Episode 145 - Flextras Friday Lunch

I went back to the basics with this talk, discussing SkinParts in the Spark Lifecycle.

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

Building Mobile Skins in Flex 4.5

Flex 4.5 was recently released, and one of the big pushes for that is mobile support. When building mobile components, we want to build ActionScript Skins for them instead of MXML skins, as we did with Flex 4 and Flex 4.1. This is a bit of a change for us, as Adobe always pushed us to use MXML when creating skin classes.

I believe that the push to use ActionScript over MXML is due to performance. MXML is really just an ActionSript code generation language; and sometimes it does some unexpected things under the hood. Writing skins in ActionScript is one way to avoid the potential wonkyness that may occurs when MXML is turned into ActionScript.

MobileSkin Class

To help build skins, there is a new MobileSkin class as part of the SDK. This is a class that extends UIComponent and provides a bunch of methods to help us build mobile skins. As best I can tell, there is no penalty for not extending the Mobile Skin class. You could extend UIComponent or some other Flex component to create your skin. But, unless you have a compelling reason to break convention, I'd stick with what adobe recommends.

Extra MobileSkin Methods

MobileSkin provides some special methods that you can override or extend. The extra methods are not much different, conceptually, than the Spark methods such as partAdded() and partRemoved(). These are some of the extra methods:

  • layoutContents(): The layoutContents() method is used to size and position the children of your component. It is called from the updateDisplayList() method.
  • drawBackground(): The drawBackground() method is used to create your background graphics. It is called from updateDisplayList(). In the mobile skin for our upcoming mobile AutoCompleteComboBox we use graphics.drawRect() to create a background on the popup. This is a replacement for the MXML Graphics used in the default ComboBox skin.
  • commitCurrentSkinState(): The commitCurrentSkinState() method is used to help implement states. Whenever the state changes, the commitCurrentSkinState() method is called. States in a Mobile Skin should not be implemented as real states that extend the state class, with multiple overrides to change things. Instead they should be implemented procedurally within the skinClass. You should tie into the component lifecycle methods to make the relevant changes to properties, styles, positioning, and layout. This method is called from the currentState set method.
  • hasState(): The hasState() method is a helper method that you should implement. It can tell people using your skin class whether this skin class implements a certain state, or not. As best I can tell this is primarily used for people extending your mobile class. I envision it being important to the extensibility of the class; but you may let it slide by the wayside if you're building a single use component.

There are also a few methods which I consider helper methods. They aren't implemented for you to extend, but are rather implemented to help you solve a specific task quickly:

  • setElementSize(): The setElementSize() method is a helper for setting the size of a child. This handles the differences between child types, such as ILayoutElement or IFlexDisplayObject. The documentation recommends you always set an elements size before setting its' position.
  • setElementPosition():The setElementPosition() is a helper method for setting the x and y values of a child. This handles the differences between child types, such as ILayoutElement or IFlexDisplayObject.. Documentation states you should always set the elements size before setting its' position.
  • getElementPreferredHeight(): This method is used to get the preferred height of the child. If the child is an ILayoutElement, then the getPreferredBoundsWidth() value will be returned. If it is an IFlexDisplayObject, then the measuredWidth will be returned. If the object is neither of those, then the height of the object is returned.
  • getElementPreferredWidth(): This method is used to get the preferred height of the child. If the child is an ILayoutElement, then the getPreferredBoundsHeight() value will be returned. If it is an IFlexDisplayObject, then the measuredHeight will be returned. If the object is neither of those, then the width of the object is returned.

These methods help encapsulate setting the size and position of your child, no matter what the type of the child is.

MobileSkin extends UIComponent

I mentioned earlier that the MobileSkin class extends the UIComponent class. This is important because it means that to implement our layouts; we can tie into the same component lifecycle methods that we're used to using from learning the Halo Architecture:

  • createChildren(): The createChildren() method is the method you use to create your component's children. It is called automatically during the lifecycle creation.
  • commitProperties(): commitProperties() is used to coordinate property changes in a component. It is a bit of a wild card method, and what you do with this will relate specifically to what properties are changing, and how they change.
  • measure(): The measure() method is used to determine the ideal height and width of a component. It sets the measuredWidth and measuredHeight properties. OF course, a component is always sized by its' parent, and it is up to the parent to use these values or not. I believe al Flex Framework containers will honor these values if possible.
  • updateDisplayList(): The updateDisplayList() method is used to position and size the children of a component. When extending a MobileSkin you'll probably use layoutContents() and drawBackground() instead of updateDisplayList() directly.

The HostComponent Property

In Flex 4 when we created a skin, we would specify the component class that this skin accessed using the hostComponent metadata. It looked something like this:

<fx:Metadata>
[HostComponent("mobile.flextras.autoCompleteComboBox.AutoCompleteComboBox")]
</fx:Metadata>

We do not use metadata to define the host component in an ActionScript skin. Instead we create a property named hostComponent. The properties type should be of the component class that the skin was designed for. I would use something like this:

public var hostComponent: AutoCompleteComboBox;

The hostComponent property is set automatically during lifecycle creation. It gives the skin class a hook into the component class. As one example of a use case, our AutoCompleteComboBox mobile skin uses the hostComponent property to reference the number of items in the dataProvider, and uses that to determine the size of the drop down.

Final Thoughts

Building Mobile Components feels like a nice intersection where the Spark and Halo component architectures meet. You'll need to know both lifecycles in order to be successful at creating components for use in Mobile development.

Why can't I access mobile skins in my Flex Library Project?

I'm working on a version of the Flextras AutoCompletComboBox for mobile devices. Many if you may have seen me demoing an early version of that at the 360|Flex conference. With the formal release of Flex 4.5 on the horizon, I came across a problem.

When trying to create a Flash Builder Library Project that supported mobile components, I could not access mobile skins. This seemed odd to me; as I could access them in a Flash Builder Mobile project. As best I could tell the list of SDK SWCs was identical. After some digging, I think I found the issue and a possible solution.

The Issue

One of the things I've done to prep the AutoComplete component for mobile usage is to create a custom, mobile optimized skin. Our AutoComplete is a composite of Skin Parts which do have mobile support, such as the Button, TextInput, and List. I wanted to apply the mobile skins for those components to the default AutoCompleteComboBox skin. Unfortunately, this gave compiler errors for trying to access undefined classes.

I believe the issue relates to where the mobile component skins are stored. They are compiled into a specific theme class; which is not automatically applied to mobile library projects. I suspect in many use cases, you wouldn't want to apply a theme to a Flex Library that may be overwritten when a real project is compiled. However, with the new Spark Architecture; where skins are classes [not necessarily just CSS and assets] it seems that referencing skin classes inside a library project seems more likely.

The Solution

The fix I found was to add add the mobile theme SWC to the library path. Details are here:

  1. Bring up project properties -> Flex Library Build Path -> Library Path
  2. Click "Add SWC" button
  3. Enter "C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\frameworks\themes\Mobile\mobile.swc" and click okay.
  4. Click Okay on the dialog window
  5. click okay in project properties

I still get compiler warnings, which is undesirable, but it's better the compiler errors that do not allow me to create a SWC at all.

The full details of my work around are in this bug post. Please vote for it; as that will raise its awareness in Adobe. I believe the more people who vote, the more likely it is to be fixed.

Flex Mobile Skins - 4/29/2011 - Episode 100 - Flextras Friday Lunch

Today I talk about building Flex Mobile Skins.

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

Contact

The Difference Between AutoComplete and Look-Ahead

Recently, Flextras rebuilt our AutoCompleteComboBox Flex Component using the Flex 4 Spark Architecture. Since it has a limited API at the moment, we've released it free for production use and you can download it as part of our developer edition. A few people have asked what the difference is between our component and the Flex 4 ComboBox.

The Flex Spark ComboBox provides look ahead functionality. That means when you type it scrolls to the item and the input box also shows the "rest" of the first item selected. For example if you had a list of US states and type 'Ca' the drop down would scroll to California Your typed text would be 'Ca' and "lifornia" would be filled in and highlighted as part of your input. Here is a screenshot:

An AutoComplete actually filters your dataProvider; meaning it limits the number of items you can choose based on the words you type. The filter function is exposed as an API, so you can filter the drop down using any function you want; it doesn't have to be a first letter only, which is what you get with the scrolling of the Flex Spark ComboBox.

Our AutoComplete Component also highlights the typed text in the drop down with the text you typed.

Using our AutoCompleteComboBox, with the same list of states, if you typed 'Ca' the first element in the AutoComplete would be California (With a Bolded Ca). States without 'Ca' would be removed, such as Alabama, Delaware, Florida, and others. But, states with Cs, such as North Carolina or South Carolina would still be listed. Here is a screenshot:

Our AutoComplete also has an API that lets you control the filtering, and control the renderer highlighting. More info about both are in our AutoComplete Manual.

Here is a sample of the two components side by side:

And, of course the source code.

What else can I do for you today?

Get your Free Spark AutoComplete Component

Last week, I sent this out as a modified version of the Flextras Newsletter, talking about all about the Spark version of our Flex AutoCompleteComboBox Component, which is now available for you to use in any way you choose, with no cost and with no watermarks.

What is AutoComplete?

An AutoComplete component is one that allows you to filter a drop down list as you type. This functionality is everywhere these days and you use it when you type in your browser's address bar or when you type a search query into Google. Our Flex AutoComplete component allows you to implement this functionality in Flex. If you've already downloaded our developer edition, or purchased a license. Thank you on both accounts.

The First Step

Our first step in creating the Spark AutoComplete was to create the basic functionality that makes up an AutoComplete Component:

  • Drop Down Filtering
  • Drop Down Highlighting

This functionality is in our free AutoCompleteComboBoxLite component, available as part of our AutoComplete Developer Edition.

This component is not watermarked, and you can use it in production systems. We've updated our license agreement to accommodate for 'free' components, so check out our version compare chart.

Review our AutoComplete Manual for information on how to use itemRenderers to customize the highlighting in the drop down or how to control the filtering with a filterFunction.

If you want the source code, that is available too, but you'll have to purchase the Unlimited Domain Edition. If you've already purchased the Unlimited Domain Edition, you just have to sign into your account and re-download the release builds to get the source code.

We'll be implementing the more advanced API features of our AutoComplete, such as selectOnEqual and selectOnEnter over the next few months in order to bring our Spark AutoComplete component up to a feature parallel with our Halo component.

Mobile AutoComplete

Creating a Spark component is the first step in supporting our components on mobile devices, so you can expect more on that in the future. We'll be speaking at 360|Flex in Denver about moving from MX components to mobile components. Expect more information in the future about using Flextras components on mobile devices. If you're already doing it, we'd love to hear more details.

Can You let your Friends Know?

We're looking to make 2011 a strong year for this component business of ours, so I'm asking you to help spread the word. Tell your friends about the work we're doing, and direct them to our free Spark AutoComplete Component. Tweet about this, or post it to your Facebook wall. Make a mention of it in your blog. Anything you can do to help us get the word out is greatly appreciated.

Share on Twitter

Share on Facebook

FXG - 2/4/2011 - Episode 94 - Flextras Friday Lunch

This time I delve into FXG, the Flash XML Graphics format used by many of the creative suite products. We talk about the Spark AutoCompleteComboBox, Flextras licensing, the online Flex Meetup Group, and the upcoming onslaught of tablets.

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

Contact

getCurrentSkinState() - 12/10/2010 - Episode 89 - Flextras Friday Lunch

Today, I spoke about the getCurrentSkinState() method of the Flex Spark Component LifeCycle. Conversation turns to the Playbook, and version control.

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

Contact

Spark Scrollbars - 11/05/2010 - Episode 85 - Flextras Friday Lunch

This time I talk about Spark Scrollbars, accesssing the Windows registry from AIR, finding cool jobs, Adobe's approach to HTML5 and the Flex Show Pledge Drive.

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

Contact

More Entries