I’m using in a Flex 4.6 mobile project and found that setting the maxChars property to 512 caused exeption:

Main Thread (Suspended: ArgumentError: Error #2006: The supplied index is out of bounds.)
flash.text::StageText/set viewPort [no source]
spark.components.supportClasses::StyleableStageText/updateViewPort
spark.components.supportClasses::StyleableStageText/commitProperties
mx.core::UIComponent/validateProperties
mx.managers::LayoutManager/validateProperties
mx.managers::LayoutManager/doPhasedInstantiation
mx.managers::LayoutManager/doPhasedInstantiationCallback

However setting maxChars to something much smaller (e.g. 10) was fine. From experimentation, seems that the biggest number to which maxChars could be set without causing the problem was 481. I have no idea what that number relates to. Anyway the database field my TextInput corresponds to is 512 chars max so that’s the number I need.

The workaround:

Setting maxWidth on the TextInput seems to solve the problem. But rather than insert a constant I want the TextInput to flex to the width of it’s container, so the following seems to avoid the problem:

The future of Flex :

• Apache Flex
• Apache Flex Blog

None of the various width or height properties of the VideoDisplay component describe the width or height of the contained view.

So, to get the properties of the view we need to delve deeper into VideoDisplay and use the mx_internal namespace. Even then, the ResizeEvent.RESIZE event is broadcast by VideoDisplay before it’s view dimensions (column B) have been updated to the new site.

In that previous article I observed that if, after each resize, I added an Event.EXIT_FRAME listener, I could guarantee that the VideoDisplay’s view had been sized by the time it was called. I observed that the same is true in Flex 4. However EXIT_FRAME didn’t feel like the right place to be doing this. So with a closer look at the component life cycle we can see that handling the FlexEvent.UPDATE_COMPLETE event is more appropriate. Column C shows the view’s width/height after UPDATE_COMPLETE has been broadcast. It colours red when a value  disagrees with column B (RESIZE). And so, it is column C that contains the values we want to use while managing our overlay.

Using this information and Flex 4′s new component and skinning architecture, we can build quick and simple to use video overlay component rather than messing about with external listeners and calculating positions as we did in the previous Flex 3 examples.

Reviewing what Flex 4 includes ‘out of the box’…

• VideoDisplay : a non-skinable component that wraps an osmf ‘view’. It translates much of the osmf api and events to what we are accustomed to with Flex 3.
• VideoPlayer : A skinable component provides hooks for skin parts. A required part is an instance of VideoDisplay. The others are the buttons and controls we’d normally expect when giving the user control of the video.

The VideoPlayer and it’s skin are overkill for this example, so we’ll create something far simpler…

• VideoDisplayOverlayContainer : A container component who’s children will overlay a VideoDisplay
• VideoDisplayOverlayContainerSkin : A simple skin, providing the required videoDisplay skin part.

This way, overlaying the video is as simple as giving the container some child components and a layout (defaults to basic layout). In the example that follows we overlay a label instance to each of the four corners and the centre of the view…

<components:VideoDisplayOverlayContainer
    id     ="videoDisplayContainer"
    source ="VideoSampleForFlex.mp4"
    width  ="100%"
    height ="100%" 	>
    <s:Label text="A" top="2" left="2" backgroundColor="0xffffff" backgroundAlpha="0.4" />
    <s:Label text="B" top="2" right="2" backgroundColor="0xffffff" backgroundAlpha="0.4"  />
    <s:Label text="C" bottom="2" left="2" backgroundColor="0xffffff" backgroundAlpha="0.4"  />
    <s:Label text="D" bottom="2" right="2" backgroundColor="0xffffff" backgroundAlpha="0.4"  />
    <s:Label text="O" verticalCenter="0" horizontalCenter="0" backgroundColor="0xffffff" backgroundAlpha="0.4"  />
</components:VideoDisplayOverlayContainer>

View source

The end result (view source enabled):

• View source
• Download source zip
• Download resizeHandle.fxp (Flash Catalyst project)
• Download resizeHandle.fxpl (Flash Catalyst library)

My 1st spark skin

In the running example above, window ‘A’ is a normal instance of spark.components.TitleWindow. This leads me to my first spark skin. If you are viewing on a windows or linux platform it won’t look any different from normal. In that case it is simply using spark.skins.spark.TitleWindowSkin. However if you are viewing on a Mac you’ll notice that the close button is located at the left of the title bar rather than the right. This is where a Mac user will expect it to be – but the default in Flex is currently to the right, no matter what platform. This was achieved through the most basic technique of skinning a spark component : clone an existing skin, adapt it and apply it. To that end, spark.skins.spark.TitleWindowSkin was cloned to creacog.spark.skins.TitleWindowMacSkin, and a couple of lines changed swap around the closeButton and title. We switch skins if we are on the mac platform by loading the compiled Mac style sheet in the preinitialize handler of main.mxml.

This technique of cloning is one thing that initially feels slightly wrong with spark. It leads to a lot of duplicate code which is something developers normally do their best to avoid. The reasoning seems mainly to facilitate Flash Catalyst workflow, where skins are predominantly the domain of interaction designers for whom duplication is the norm and code re-use doesn’t really figure. However until and unless Flash Catalyst matures into a product that can support round-trip editing, there’s a good chance that developers will be making a lot of use of diff tools and duplicate code across skins is something we’ll probably just get used to. The subject has been discussed in detail in a number of other blogs and their comments:

• Flex 4 skinning ignores developer needs
• Using Flex 4 Skin Inheritance To Make PictureButton Component

Implementing and skinning ResizeableTitleWindow

We now need to know a little more about the mechanics of spark skinning. I must admit having previously read some blogs and watched some video posts of how simple spark skinning is – and I got it until sitting in-front of an empty editor scratching my head – where to begin? The key thing that crystallised it for me was to read the skinning contract.

So, first was to create the component class. This extends spark.components.TitleWindow. It adds a new optional skin part of resizeHandle of type UIComponent. Essentially we need something the user can click on no matter what it’s appearance. creacog.spark.events.TitleWindowBoundsEvent was created extending spark.events.TitleWindowBoundsEvent with the new event constants for resizing. Using the creacog package is the main deviation from the specification – for obvious reasons.

Catalyst was used to create the ResizeHandleSkin. A simple custom component with two states: up and over. It has a semi-transparent white background that transitions it’s alpha on mouse over. Importing ResizeHandle.fxpl into the flex project resulted in slightly odd packaging. Simply moving ResizeHandle.mxml to the creacog.spark.skins package brought it into structure consistent with the rest of the project.

spark.skins.spark.TitleWindowSkin was again cloned, this time to creacog.spark.skins.ResizeableTitleWindowSkin. To that 3 new lines is all that was required to add an instance of the resizeHandle skin part – positioned front-most and at the bottom right corner. It could be any size and positioned anywhere, but the logic behind resize adjusts the width and height of the component, leaving it’s x and y untouched.

creacog.spark.skins.ResizeableTitleWindowMacSkin is a further clone, this time with the closeButton skin part positioned to the left for mac users.

Finally we use styles (being careful of  the new namespace syntax) to the  notify the flex framework to use creacog.spark.skins.ResizeableTitleWindowSkin (and substitute creacog.spark.skins.ResizeableTitleWindowMacSkin on the Mac) whenever a ResizeableTitleWindow instance is drawn. If we omitted this step, the ResizeableTitleWindow instance would be created, but it would fall back to using the TitleWindowSkin which does not include the resizeHandle skin part and therefore the resizing functionality would be ignored.

Summing up

This new approach to skinning components feels far superior to what we have been used to in Flex 3. I’m slightly scared that the workflow from designer  via catalyst could result in inflexible skins (at least in the short term), as post-production work is required of the developer if the skin is intended to take on runtime styling for example. Lack of any sign of round-trip capability means skin production is currently one way from catalyst. i.e. tweaks or changes within catalyst will create a new output and it will be for the developer to merge the changes with additions s/he may have implemented on previous skins.

Looking forward to getting going on some real flex 4 projects.