Yesterday, I encountered bug where a TextInput would no longer correctly receive focus if its text property was programatically set. I checked bugs.adobe.com for the issue, but couldn’t find anything about it. As a final check before reporting a bug I decided to try a nightly build to see if the bug had been indirectly fixed.
I downloaded the 06/27/09 buid (8344) from here and followed these instructions (look about halfway down the page) to have multiple SDKs installed with Flash Builder, which hasn’t changed from Flex Builder 3. Everything seemed to go smoothly except that when I created a new project and specified the nightly build SDK, Flash Builder threw the dreaded cryptic internal build error. I tried cleaning about a dozen times. I tried setting the permissions on the new SDK folder to match the original 4.0.0 SDK. I even tried redownloading the SDK zip thinking that maybe Safari screwed it up while automatically unzipping it. Nothing I tried worked.
Adobe’s on vacation this week, so I didn’t get any response from my contacts there, and no one here at effectiveui has encountered the issue. RJ Owen was gracious enough to let me try installing the nightly on his machine, where I got a different and less cryptic error similar to the error Ed Syrett reported here. To work around this I copied the netmon.swc from the original 4.0 SDK that installed with Flash Builder and everything worked okay. In Ed’s post he pointed out that you can disable network monitoring which would have been a better solution since I’m not using that feature at the moment.
Back on my own machine, nearly out of ideas, I created a new Flash Builder workspace and added the nightly build SDK. This time when I created a new project I got the netmon error, but not the IBE. This time around I suppressed the netmon error by unchecking “Enable network monitoring” on the projects compiler options and everything worked fine. As it turns out, the TextInput focus error has been fixed, which more or less makes this hassle worth while. The only remaining problem is that any projects that are using the original 4.0.0 SDK in the new workspace seem to get the IBE if you clean them. RJ says he was able to resolve this by restarting Flash Builder and cleaning the projects again.
Take aways:
- You might want to create a new Flash Builder workspace if you’re messing with the nightly builds.
- Adobe’s working pretty diligently to address the issues they’re finding internally and that we’re submitting to them.
There are two ways to share data between a Flex 4 Spark component and its skin: you can either pull the data from the component into the skin or you can push the data to the skin from the component. It’s a subtle difference, but the latter approach is recommended because it does not rely on data binding, and it promotes encapsulation.
A while back I shared an example of using Flex 4 to create a text input that supports displaying a prompt when it is not focused and no text has been entered. In that example the skin pulled the value of the promptText property from the hostComponent and applied it to a SimpleText component with the id “promptView”. The logic for whether or not the promptView was visible was based on the current state of the skin (focused or normal) and whether or not the hostComponent's text property was an empty string. This is fine, sort of, but since a good component should be easy to skin, it would be better if the person creating the skin didn’t have to set the label on the promptView or replicate the logic to hide/show it. Because components are aware of the data type of each skin part, it is possible to push data into the skin from the component and encapsulate more of the logic.
I was getting a little tripped up there trying to explain that, but hopefully looking at the two examples side by side will make it more clear.
Example 1 is basically the same as the example created in my earlier post, but cleaned up a little. In this example the skin pulls data from the component.
Example 2 pushes the data from the component into the skin. You’ll see there’s a bit of added complexity in the component now, but the skin is much simpler. I believe this is a better approach and allows developers to use the skin in their own applications much easier.
Both examples have view source enabled, and you can grab also grab the source at github.
git://github.com/andymcintosh/SparkComponents.git
Posted in Flex 4, Spark |
I wish I was writing this post to tell the world that by some miracle someone has come up with a universal solution to the dit-ditta-dit-ditta-dit-ditta-bzzzzzzzzzzzzzz-BZZZZZZZZZZZZZZZ that you hear when you get your cell phone too close to your speakers. Alas, I’m writing this post only to share a possible one-off solution that might also work for you.
I have this Sony clock radio that has a built in dock connector to play music from your iPod/iPhone. It came with a little remote that you can use to navigate the iPod interface, which actually works surprisingly well with the iPhone. But, even with all these features, I only use it to charge my iPhone at night because if I actually turn it on I get GSM death sound. Sony has since released a new version of it that says it’s iPhone compatible, but I’m not sure if that means they shielded the speakers from this interference or if they tweaked something to suppress the warning that pops up on the iPhone that says it’s not compatible.
However, last night was the first time I connected the 3GS to the dock connector. I had it connected to the wi-fi network, so I figured I’d go ahead and listen to some music while I fell asleep. It occurred to me this morning that I heard less interference that I normally do, even when I’m connected to wi-fi, so I conducted a little test. First, I turned wi-fi off. There was no immediate interference like there would have been when turning off the wi-fi on the 2G. Next I disabled 3G and the interference started. Does this mean 3G doesn’t make that god-awful racket that we’ve all come to hate? That’d be pretty awesome! As a final step I left the phone docked, turned off wi-fi and left 3G on and had Angela call me. There was still no interference!
Has anyone else had this experience? It seems too good to be true.
Also, I’m sorry for letting the mp3 automatically start when you load this page. This could be new rick rolling.
Thanks to Secret Design Shop for the audio clip. If you’d like, you can get the mp3 from here and use it as your ringtone. You sick bastard.
Next Monday, RJ Owen and I will be doing a Flex 4 Deep Dive which will cover some of the UI goodness in the new framework. We’re going to discuss additions/changes to the UIComponent life-cycle in Flex 4, creating and skinning custom Spark components, and integrating Flash Builder and Catalyst.
There’s lots of cool stuff going on at Flash Camp, so you should check it out! We’re on from 4 to 5. I hope to see you there.
Flash Camp | Rocky Mountain Adobe Camp
Note: The session description lists Juan Sanchez as RJ’s co-presenter but he’s off on a sweet vacation or scaling some nines or something.
Sorry for the short notice.
Posted in Flex 4, Spark |
Yesterday, Andrew Westberg posted the following comment on my post about creating a custom Flex 4 component.
I’ve heard some complaints that Flex 4 is much more verbose for doing what was simple in 3. One example is adding an icon to a button. Thoughts on that?
At first, I misunderstood him and thought he was saying he had heard it was more difficult to add a second icon to a button with Flex 4 than Flex 3, which it’s not. I replied to him directly with an example of just how easy it is, and also sent him here to show him the cool button Juan built. Turns out, what he was saying is that it’s sorta a pain in the ass to add even the first icon, which it is compared to Flex 3 where the Button has built in support for an icon.
Consider the buttons in the image below. They have the same background an mouse over/down treatments, but different icons. Straight out of the Flex box, you’d have to create two different skins to have these two buttons with different icons (I think.)
To work around this I created a simple extension of the Spark Button and gave it an icon property. In the extension I defined an iconElement as a skin part, which, when added is passed the value of the icon property. Now you can create two instances of the same button with the same skin and specify a different icon for each one.
This would have been really easy it I hadn’t run into this SDK bug. Fortunately, after copying the mxmlc.jar into my $FLEX_HOME/lib directory and cleaning the project, it worked as expected.
View Example (view source enabled)
Posted in Flex 4, Spark |
Tonight I built a component that I’m sure most of us have built a half-dozen times before – a text input that displays a prompt inside of the component when no text has been entered and the component is not focused. The difference this time is that I built it as a Flex 4 Spark component, and I have to say I am pretty delighted by how simple it was.
Here are the basic steps I followed:
- Extended spark.components.TextInput to add promptText property and focused state
- Copied spark.skins.default.TextInputSkin as a new skin and added a SimpleText component (promptView) to display the promptText
- Used a binding function to dynamically set the visibility of the promptView
View Example (view source enabled)
Once it was working properly, it was super easy to add a fade in/out when the prompt is shown and hidden.
A while back I built a suite of text input components that provide type-ahead functionality, suggestions, an inline button to clear the text, etc. I’m looking forward to building those as Spark components, possibly with a couple of different skins.
Thanks to the Flex team for making an awesome new Flex and to Andy Hulstkamp for some great Flex 4 examples.
Posted in Flex, Skinning |
Goal
Add an item to an ArrayCollection when changing states.
Challenge
The AddChild override only works to add visual children to other DisplayObjects, which leaves you with the option to use a SetProperty override to completely replace the source of the ArrayCollection — or you could listen for the enter event on the state and write some ActionScript to manipulate the ArrayCollection.
I’d like something a little more expressive; Something like this:
<mx:state name="moreData">
<AddItem
target="{myData}"
relativeTo="{myData.getItemAt(2)}"
position="after"
>
<local:Item label="groovy thing" />
</AddItem>
</mx:state>Why?
Consider an application with a MenuBar at the top that lists certain options based on the user’s role/permissions. Since the menu is data-driven, you could create a “manager” state and insert addition options into the menu. And, since states can extend other states, you could base a “regional-manager” state on the “manager” state and add even more options. A RemoveItem override would allow you to base a “assistant-to-the-regional-manager” state on “regional manager” and remove a few things.
Also, once you understand how to create custom overrides, you can do all sorts of things with states that you couldn’t do out of the box. In my case, I wanted the ability to add layer to a data-driven graphic component, so I wrote an AddLayer override.
The Solution
Create an ActionScript class that implements the mx.states.IOverride interface which enforces that you specify how to initialize, apply and remove the override. For adding an item to an ArrayCollection, it’s pretty simple. In apply(), you determine which index the item should be placed at and use ArrayCollection’s addItemAt(item:Object, index:int). Then, in the remove() method you use removeItemAt(item:Object, index:int).
View Example
View Source
View Flex Bug #SDK-17271
After a whole bunch of digging around under the hood of the mx.rpc.XMLDecoder class, I finally pinpointed the line that is causing it to incorrectly decode elements that do not have sub-elements. Basically, when it gets to an element that it considers to have simple content (meaning just a string value between the tags), it immediately returns that string value and moves on to the next node. So, in the case of an empty node (like the one below), which has no inner value but only attributes, XMLDecoder would never even try to parse the attributes.
<car make="Subaru" model="Impreza" />
The solution was to check if the inner value evaluated to an empty string, and if it does, continue on as though it were actually a complex node, which will then parse the attributes.
Patch for Flex Bug #SDK-17271
I’ve created an example that decodes some simple xml data against a simple schema. By checking the “Patch” box, you can see that fix returns a object graph with the correct properties for the CarVO. This example would also be a good starting point if you’re interested in learning how to decode xml into strongly-typed objects. With the exception of this bug, the XMLDecoder class seems pretty solid, and it’s really handy if you want to parse something, like, say an MXML file.
View Example
View Source
Note: You could try pasting in your schema and data, but it’s not likely to work since you have to register class types with their qualified names in the schema. I’m still working out a way to do this dynamically from the schema.
Posted in Flex | Tagged bug, Flex |
I really love the CFEclipse snippets feature that I mentioned in my previous post. It is exactly what I’ve been after for quite a while. The snippets are stored as simple XML files in a folder in your workspace, which makes them really easy to edit and move from one workspace to another.
<?xml version="1.0" encoding="utf-8"?>
<snippet filetemplate="false" extension="cfm">
<name>Insert ActionScript Header</name>
<help>Insert top-level ActionScript header.</help>
<starttext>
<![CDATA[
//----------------------------------------------------------------------
//
// $${header text}
//
//----------------------------------------------------------------------
]]>
</starttext>
<endtext><![CDATA[]]></endtext>
</snippet>Oh, and get this! You can specify that a snippet as a class template, and then you can use it to create new files that are pre-filled with the syntax you want. Hot damn! I remember digging through a ton of folders in the FlexBuilder plugin trying to figure out how to customize the default ActionScript class template. The interface for creating a new class from a template is a little strange since you have to browse to the package in which you want to create the class and explicitly specify the class name and the file name. But still…
As far as sharing snippets via SnipEx, it’s not quite what I had hoped for. SnipEx is a ColdFusion application that allows you to share your snippets with others. There is a public repository at http://www.cfsnippets.org/ that you can use if you don’t have access to a ColdFusion server where you can install the application. The CFEclipse plug-in offers an “Export to SnipEx server” option, but it’s not yet compatible with cfsnippets.org. 
Mrinal Wadhwa and I talked briefly about teaming up and cranking out a bunch of useful Flex Actionscript and MXML snippets and posting them to cfsnippets.org, but the disappointing thing is that I can’t figure out how to pair a remote snippet with an abbreviation the way you can with your local snippets. Because of that, I’m not sure if it’s worth the effort to post to cfsnippets.org, but I’d be happy to zip up my snippets folder and share it with anyone who’s interested.
Perhaps my favorite feature about this plugin is that it intelligently indents multi-line snippets. All other solutions I’ve worked with screwed up the first line if you were trying to indent it at a level other than the one it was created at. Props to CFEclipse for figuring this one out.
The variable support is what other text expander are really lacking, and I’m really impressed with the implementation of it in CFEclipse.
Read more about some of the things you can do with your snippets here.
I just came across Lee Brimelow’s tutorial for using the dynamic snippets feature of CFEclipse. His step-by-step walk though guides you through installing the CFEclipse plugin and setting it up to work with ActionScript files. He’s explaining how to do it in the context of a Flash project, but it works with any text file that you’re editing with in Eclipse.
The feature is less like the WST Snippets feature that you can install as described here and here, and more like how TextMate or TextExpander expands short text abbreviations. Really, this is a much better solution, in my opinion. The WST plugin requires that you browse for a snippet and then interact with a rather kludgy interface to enter the values you want for the variables. Also, the WST Snippets seem a little volatile. I found myself losing snippets anytime something happened to corrupt my workspace.
I’ve been using TextExpander for the last week or so, but found it somewhat limiting when it came to inserting complex snippets, like say a getter/setter block. There was no support for passing in any variables (other than what was on your clipboard), and even specifying where the cursor should end up after pasting the snippet was pretty weak since it didn’t just jump to the location but rather slowly backed up until it go where it was supposed to be.
With CFEClipse, your snippets can contain as many variables as you want, which you are prompted to insert when you paste the snippet. It even allows you to specify the default value for the variable. I’m thoroughly impressed… this is just the sort of thing I’ve been looking for.
I literally just installed this 5 minutes ago (and it only took a minute to set up), but it looks like there’s some sorta of snippet sharing feature via something called SnipEx. I’ll dig into this and share my snippets with everyone if I can. I typically use snippets for getters/setters, varying levels of comment headers, and common function declarations like the one used to override updateDiplayList.
Posted in Flash | Tagged Flex, productivity |
