Archive for Flex 2
Flex Menu Monkey Patch: Allowing a Branch to be Selected
Posted by: | CommentsSo the interaction designers decided that the branches of a menu needed to be selectable (picture a warped checkbox tree, only it’s a menu… and there aren’t any checkboxes). The default behavior of a Menu in Flex can be described as follows:
1. If you click on a leaf, the leaf is selected.
2. If you click on a branch, the sub menu opens up.
3. If you hover over a branch, the sub menu opens up.
I needed to change #2 to select the branch.
The first thing that I did was sublcass Menu (we’ll call it NewMenu), and overrode (with copies) two obvious methods on the Menu class:
override protected function mouseUpHandler(event : MouseEvent) : void override protected function mouseDownHandler(event : MouseEvent) : void
In those two methods you’ll need to remove any expressions containing something similar to the following:
_dataDescriptor.isBranch(item)
This will allow the branches of your sub class to be treated as leaves. The problem is that Menu class contains this line:
private var subMenu:Menu;
which forces all sub menus to be of type Menu– the only NewMenu will be at the very top! We need all sub menus to be NewMenus. So this is where the monkey patching comes in. You have to change subMenu to a protected variable. Then in your NewMenu class, you can override the function:
mx_internal override function openSubMenu(row : IListItemRenderer) : void
And change the line:
menu = new Menu();
to
menu = new NewMenu();
And you’re done! The reason you need subMenu to be protected is because later on in the method you assign menu to subMenu, and you couldn’t do that from a subclass when it was private. Voila. Interaction designers satisfied.
Autoscrolling a Flex TextArea
Posted by: | CommentsIn the little suite of console widgets I created, I was having more difficulty than necessary getting my console to scroll to the bottom as text was added. On account of (what I suspect were) timing issues, when I tried executing console.verticalScrollPosition = console.maxVerticalScrollPosition; the maxVerticalScrollPosition has not been updated to reflect the text that had been added.
I was not adding the text directly to the text property of the TextArea, rather it was bound to a String in my model. None of the obvious events fired by TextArea seemed to be doing the trick, the maxVerticalScrollPosition was always what it was previously. However, on the next update it would change to reflect what I wanted it to become after the previous update (in other words it was a step behind).
I solved the problem by adding a binding to console’s text property, like this:
BindingUtils.bindSetter(scroll, this.console, "text");
And the scroll method contained the boilerplate console.verticalScrollPosition = console.maxVerticalScrollPosition; statement. That seemed to do the trick. What I was going to try next was a little more extreme:
BindingUtils.bindSetter(scroll, this.console, "maxVerticalScrollPosition");
but fortunately I didn’t have to.
Data Model Injector (poke)
Posted by: | CommentsI needed to build a simple command line interpreter for an application I am building, well, I didn’t need to but I wanted something inconspicuous that the testers (and interaction designers) wouldn’t see and complain about. So I threw something together, it was fun.
Two basic operations I was constantly needing to do was to get a value and/or modify a value. I modified my peek method to return the object in question. And then I also wrote a poke method that allows me to set a value specified by a dot notation.
Here’s the code to the modified peek:
private function peek(prop : String) : * {
try {
var a : Array = prop.split('.');
var x : * = model;
for (var i : int = 0; i < a.length; i++) {
x = x[ a[i] ];
}
return x;
}
catch (error : Error) { return "undefined"; }
}
You can see it’s just a one line change from my previous implementation. And here is poke:
private function poke(prop : String, val : *) : void {
try {
var a : Array = prop.split('.');
var x : * = model;
for (var i : int = 0; i < a.length-1; i++) {
x = x[ a[i] ];
}
x[ a[a.length-1] ] = val;
}
catch (error : Error) { trace(error.message); }
}
In this method I had to iterate one less time to get the parent of the object I wanted to assign to. And then on the final line I manually grabbed it to perform the assignment.
My initial wrong assumption was that I could do this in my loop:
for (var i : int = 0; i < a.length; i++) {
x = x[ a[i] ];
}
x = val;
Take a look at it, or step through it in a debugger to see why that doesn’t work. It was pretty enlightening.
Data Model Inpector (peek)
Posted by: | CommentsI recently built a console for inspecting arbitrary values contained in my data model. I wanted something similar to the Flex Builder “Variables” window, and though I haven’t arrived there quite yet, I’ll share what I’ve got so far.
The mechanics are a little boring: I extended TitleWindow, there is a TextInput where I enter the value I want to inspect and a TextArea where the ObjectUtil.toString() dump of the object is output.
The heart of the control is this method:
private function peek(prop : String) : void {
try {
var a : Array = prop.split('.');
var x : * = model;
for (var i : int = 0; i < a.length; i++) {
x = x[ a[i] ];
}
console.text = ObjectUtil.toString(x);
}
catch (error : Error) { }
}
It accepts a “modified-dot-notation” String, parses it, and constructs the result using model as the root.
I knew I was going to use the bracket operator. In fact I started out spliting my tokens and accessing the values like this: model[ a[0] ] [ a[1] ] [ a[2] ]... and so on. It wasn’t very scalable, which is why I was pleased with this method.
The interesting thing about it is that because ArrayCollections allow for use of the bracket operator, accessing elements of an ArrayCollection is simple. Instead of "acName.list.source.2", you can pass the method "acName.2” and it returns the correct value.
Book Review: Creating Visual Experiences with Flex 3.0
Posted by: | CommentsCreating Visual Experiences with Flex 3.0 by Juan Sanchez and Andy McIntosh was nothing like I expected. I’ve been working closely (well, more closely than I’d like, anyway) with some interaction designers, and subconsciously I was expecting it to be more along those lines. Fortunately for me it turned out much differently.
Sanchez and McIntosh cover a variety of topics, ranging from the very basic (creating CSS in design view) to the more advanced (programmatic skinning). They all pertain to realizing the vision you have for your application. It won’t make you a better designer, but it does go through a lot of tools you can use to make your Flex application look how you want it to.
In my opinion, one of the coolest features of the book is Appendix A. Skinning and Styling Diagrams. They illustrate all of the common Flex components and label all of the styles and skins on those components. If someone were to build an application that was a meshing of these diagrams with the Flex Style Explorer… that would be one awesome app. At any rate, it has become a useful reference (especially since I haven’t seen it duplicated online). The Filters Cheat Sheet, or Appendix B, looks pretty cool too, although I haven’t done a whole lot with filters in a project yet.
Aside from their “intro to RIAs”, I think the main thing I liked about the book was that it was written with the assumption the reader already had a basic understanding of Flex. An “advanced” Flex book, if you will. And the content and walk throughs were very clear, I didn’t have any problem going through the exercises.
I definitely give this book 5 stars. I recommend it to anyone who: is beyond the basics of Flex; is sick of Halo; doesn’t think styling wastes CPU cycles; or all three.
Simple Flex Builder Performance Tip
Posted by: | CommentsI wanted to put this little tidbit out for boosting Flex Builder’s performance on all platforms. I was ecstatic when I got my new desktop this past June (quad-core, 12MB cache, etc., etc.) and the build process flew. It was awesome (see complaints in previous post about my laptop seeming like a dinosaur in comparison), but as time went by it started getting more and more sluggish about building my apps.
There wasn’t any apparent explanation (except for maybe the fact that I was running Windows Vista with only 8GB of RAM) so it was a little disheartening. On the other hand I wasn’t seeing any performance decreases in any of my other “benchmark” apps (JBoss 4.2 startup in 10 seconds, NetBeans startup in 15 seconds, Photoshop CS3 in 8 seconds) so I got a little suspicious.
I did a little searching around and ran a few experiments, and came to realize that the more projects I had open, the longer it would take to build any one of them. When I started closing the projects, there was a corresponding increase in performance. This information allowed me to focus my search efforts and sure enough, Flex Builder will process every open project to see if it needs to be recompiled, and in the process compile the project you’re interested in.
So close some of those projects (right-click, or in case of a Mac two-finger-tap, and close).
Angle Brackets in MXML
Posted by: | CommentsAfter using this blog theme for a few months, I should have known… When I was transferring some of the blogs from my CS 462 labs (which, incidentally, contained a lot of XML) I noticed that this theme was tenacious in the way it ate my angle brackets.
Apparently Flex Builder doesn’t like them either when you’re editing MXML (note: though I dislike the use of XML based syntax in a scripting language like ColdFusion, I don’t mind it as much for laying out visual components, which seems a short step from using HTML)… but I forget that MXML is in fact, XML and that there are some occasions when it doesn’t like you using angle brackets.
There are some exceptions, for example if you have the code (a > b) ? ‘x’ : ‘y’ inside a click handler, that is allowed. Don’t try to use it inside a label or a text attribute though. The good news is that because it’s XML, you can fall back to the good ol’ HTML escape sequences (i.e. > and <) when you need to display those characters.
Training Videos
Posted by: | CommentsI created a new site where I hope to start posting screencasts of some of the training I’ve been working on. Nothing great yet, but I hope I can build up a helpful library over time. More than anything it helps me understand these concepts better.
URL updated. Well, here it is: http://flexplanations.com
You’ll need Flash player installed to view the training videos. I should mention that I have a quad-core CPU, 4GB of RAM, and a 15Mbps internet connection, and they work fine for me. I have noticed issues on my slower computers with slower internet connections.
Book Review: ActionScript 3.0 Cookbook
Posted by: | CommentsFrom a Flex developer’s perspective, ActionScript 3.0 Cookbook, by Joey Lott, Darron Schall, and Keith Peters is pretty hard-core Actionscript (I know it’s ActionScript… Actionscript is easier to type). Many of the graphical recipes use the Sprite class, and there are plenty of references elsewhere to classes that have simpler to use, more watered down counterparts in Flex. At the risk of not being techinically correct, you could almost say it’s an “advanced” Flex cookbook.
This book has given me a deeper exposure to Actionscript, a deeper exposure that I find myself in need of more and more as I try to bend Flex to do my will. I’ll admit, I avoid the Sprite class and the Graphics class unless I’m in a situation where it’s unavoidable and I absolutely have to use them. Setting that aside, there are some things I routinely find too abstracted in Flex that I need to get at with base Actionscript. The TextField is a perfect example of this, a powerful component that is somewhat diluted for use in Flex. The authors devote a nice long chapter (chapter 9) to Text, offering plenty of opportunity for learning your way around this powerful class.
Two other chapters I have found to be very useful are chapters 5 (Arrays) and 14 (Dates and Times). Arrays are something I commonly overlook when I’m learning a new language, because they’re such a basic concept I feel as if I don’t need to devote much time for them. As a result, I often need to consult a reference when doing anything beyond accessing elements. At the same time, the recipes in the book dealing with Arrays aren’t all things you’d obviously want to do with them
(there’s one involving inserting items in the middle of an Array, which is unheard of in most languages). The same thing can be said for dates and times, even though I use them frequently it’s something I rarely commit to memory for any language, and it’s nice to have a reference handy.
The breadth of topics covered in the book is good, and based on the chapters I’ve gone through already the depth of each has been sufficient to make me feel comfortable with the topic covered. I can’t say this for many other Actionscript books I read, specifically the Actionscript 3.0 Language Reference (pdf format from Adobe) which covered each topic in such depth as to destroy all confidence in being able to effectively use the concepts.
The main reason I’ve enjoyed reading the ActionScript 3.0 Cookbook is because there are so many things I’ve never tried. I’m sure I will be occupied by trying out these recipes off and on over the next year or longer. In summary I’d recommend this book to any Flex developer who wants to develop a mastery of the ActionScript language a little bit at a time.
