Resources for Learning Flex

english mobile

I started this blog to document the hurdles I was finding as I was learning Flex 3. In the year since I started blogging on Flex, this task has become much easier. I wanted to take a minute to talk about two things that I've noticed that are real improvements. First, the Start Page appears to update itself occasionally.

I've posted before that I had problems learning to use the debugger due to lack of resources that explain its basic functionality. A few weeks ago, I cranked up the Start Page for some other reason and noticed it had scroll bars. I scrolled down, and lo and behold! there was a link to a video tutorial on the debugger!

The second, I noticed just today when I was looking at the web version of the Flex Builder forums (I usually use NNTP). I noticed there's a forum for Flex in a Week, and since I'm nosey I opened it up and discovered a link to the Flex in a Week training course. I haven't had a chance to look at all the resources, but the topics look like they should be useful to the new learner of Flex. Thanks to the folks at Adobe for being proactive and helping new users over the learning curve hump!

Some thoughts on charting

english mobile

This past week, I made my first foray into the world of Flex charting, and I'll have to say that I found it a pleasant surprise. From all the comments I've seen from others using charting, I had expected a difficult, painful process. My experience was quite the opposite. This is the first time in my year or so of using Flex that I've been able to accomplish anything significant without having to customize or rewrite anything. It seems that almost anything you'd want to do with a chart, there was a property or style that would handle it. I did find the fact that nearly everything was a style a bit confusing at first, but once you realize this, it goes fairly smoothly.

I might not have found the whole experience quite so smooth if I hadn't found some nice examples by good people who were willing to post their code for the world, so I thought I'd acknowledge them here:

I learned a lot about charting this week, and I hope to have time someday to share more of it, but I did find two quick things that might be helpful to you if you're trying to get your charts looking exactly right. The first is if you use a line chart with itemRenderers that mark each data point in the chart, the first and last one will be cut off through the middle where the chart control clips the content. The solution is to set clipContent on the chart to false. Seems obvious, but took me two days to find it.

The second is that if your first legend item in a Legend control has a short label, you'll wind up with overlapping legends where the Legend control lays them all out as if they had a short label. You can use the markerWidth style to make all of the legend items the same size, and you can just make sure that size is large enough that your legends don't collide. No, this won't give you a pixel-perfect layout, but it is a heck of a lot quicker than fixing either Legend or LegendItem to correct this.

Getting Help in Flex Builder

english mobile

When I open the Help Contents in Flex Builder 3, the first thing on the page is Tip! Learn how to filter and reduce your search results by reading "Searching Help." The problem is that on my installation of FB3, this is a dead link. I checked it this week on my husband's installation, and his link is dead as well. I eventually figured out what this page would have told me, but I feel like I was really slowed down in those early months when I had no control over the search results that would flood the results page when I searched for anything. A couple of weeks ago, I found the Flex 2 version of the page, when I no longer needed it.

But I thought I'd share a bit about how my help contexts are set up, because I find that these really cut the amount of time I need to mine relevant information. I have two main contexts that I use most of the time. The first is "How to." This gives me access to the "how to" instructions on most of the topics that I would be working on. I have unchecked AIR for now, since I'm not working in AIR these days.

My second help context is just the Language reference. I find that my pattern is to read the how to for a general overview of how to approach a problem, then I switch to the language reference context for the specific details (like property values and what they do). Sometimes I use the "Find in Language Reference" option on the Help Menu, but I don't like it as well, because it resets my help context.

It seems to me that there are certain search terms that are very difficult to get to in the Language Reference context, because they are inherited by many components. Since the name of the component that is being inherited from occurs early in the documentation for it, it will often appear in the search results before the results for the component itself. So I've learned that there are a few ways around this. If I am searching for List, I type in ListBase. List will actually come up in the search results ahead of ListBase. If I am looking for UIComponent, I click on the first thing that inherits from it and use the link in the "inheritance crumb trail" to go to it. If I am looking for AdvancedDataGridItemRenderer or AdvancedDataGridGroupItemRenderer, I look for AdvancedDataGrid and click the advancedDataGridClasses Summary. This gives the advantage of allowing me to easily get from one class to another.

In the next few weeks, I'm going to try to post a few Tips and Tricks about how I use Flex Builder itself to be as productive as possible, independent of any code I might be using. I'd like to invite you, the readers, to consider these posts to be an invitation to discuss their own tips and tricks by posting comments. Hopefully, we can all trade our best productivity tricks and become more productive together.

Debugging itemRenderers

english mobile

You may have notced that I have spent a lot of time chasing down issues with itemRenderers. It always frustrated me that you could get information on the parent of any component, but I could never figure out how to find out information on the renderers being displayed by a List based control.

I finally realized that if I set a break point in a scope that had a reference to a List control, I could rifle through the properties of that control until I found the rendererArray property, which seems to be an array of arrays. If you're not using a multi-column control, like a DataGrid or an AdvancedDataGrid, the itemRenderer for each row will be at the 0 index of each row index. Otherwise, each row will be the outer index of the rendererArray and each column will be an element in the row array.

I really do view this as my diary of Flex, and I got tired of not ever remembering what the name of the property is. It can take quite a while to fish through all the properties available on a control to try to relocate it. So I wrote it down, since it doesn't seem to be documented. Hope it helps you, too :-).

Are you Flex-ing in Europe or the UK?

english mobile

The European eLearning Summit (EeLS) is offering quality Flex training at a great price at Nottingham University on August 22nd. The class will be taught by Matthew Boles, and pricing starts at UK£50 (plus VAT), and the price includes lunch.

Musings on AdvancedDataGrid (Part 5)

english mobile

Up to part 4, I've been talking about the AdvancedDataGrid itself and the properties it has that are supposed to make your life easier, like styleFunction and iconFunction. And they do, once you understand them. But now I'd like to turn my attention to the data source I was using to drive my AdvancedDataGrid (ADG).

My AdvancedDataGrid is being used as a menu on an eLearning application. The application has various tasks that the user must complete. Once a task is complete, it is shown again in review mode, which provides the student with remediation on what he did wrong or right. The student can also view reports of what he did in a given task. So each task will be available in three modes: normal, review, and analysis. The mode will be determined by the top-level container.
To this end, I created an array of MenuContainer Value Objects (VO) that contained a number of Task VO's. I assigned these to a HeirarchicalData dataProvider in the ADG. I immediately realized that the itemClick event just gave me the Task VO, and the Task knew nothing about its parent (and rightly so). Apparently, the itemRenderer also knew nothing about where the Task fell in the data structure, nor anything else in the ADG.

I realized it was a slippery problem, since even if I were to loop through the MenuContainers and find the Task that was selected, I would only find the first instance of it. So I decided to wrap my Task class in another class that had two properties, task and UID. In this class, TaskUID, I simply used UIDUtil to create a UID for this instance of the task.

Once I had that accomplished, I decided to take one more squint at the docs before I built a function to loop through and find my TaskUID. I trolled the language reference only on the word hierarchical. I'd looked at the HierarchicalCollectionView before, but the description implies that this is for making flat collections look hierarchical (heck, it actually says it!). However, this class does include a method, getParentItem(), which looked perfect for my needs.

In a wild leap of faith, I cast the event.currentTarget.dataProvider from the itemClick event from HierarchicalData to HierarchicalCollectionView and the method worked! It gave me a reference to the MenuContainer from the TaskUID. I have no idea what the differences are between those classes, so I wouldn't guarantee all methods would work when you do this kind of casting, but this worked for me!

Musings on AdvancedDataGrid (Part 4)

english mobile

So, in part 3, I gave up on my extension of the AdvancedDataGridItemRenderer altogether and set my extended AdvancedDataGridGroupItemRenderer as both the itemRenderer and groupItemRenderer on the AdvancedDataGrid. This gave me a nice uniform appearance on all of my itemRenderers. So I set off happily to write my iconFunction.

This turned out to work exactly as advertised, with only one hitch--my leaf icons weren't rendering. Had I misunderstood? Did the iconFunction (as opposed to groupIconFunction) work only for grouping rows? Well, no, as it turns out.

If you'll recall, way back in Part 2 I had a problem getting my styles to show up in my first column, so I set the itemRenderer on that column to my extended AdvancedDataGridItemRenderer. Even after I did this, though, some cells still didn't show my styles. At the time, I didn't understand what that meant.

Lesson Number 3: All itemRenderers in the tree column will use the specified groupItemRenderer, unless you specifically tell that column to use something else. Even if you do tell that column to use something else, it will still use the groupItemRenderer for (ahem) grouped items.

Once I figured that out, it was obvious to me that by removing the itemRenderer property on that column, I would then have 100% of cells using my extended AdvancedDataGridGroupItemRenderer, which had the existing icon functionality plus my added functionality for setting the background based on a style passed in through the styleFunction.

Great! Wonderful! But I then found that my particular data structure depended on knowing something about both the parent node and the child node in order to know what to do with an item click, and I couldn't figure out how to get the information about a strongly typed parent from a strongly typed child that might be the child of more than one parent.

Tomorrow, I will write about how I got this information.

Musings on AdvancedDataGrid (Part 3)

english mobile

Review Part 2

The author of the blog post I originally found that inspired this journey said that this method would not cause the selection and rollover indicators to be obscured in the same way as this method. But I really wanted to be able to see these indicators, rather than a tiny edge around each row. So I was determined that I was going to get my AdvancedDatagridItemRenderer to allow me to see these indicators through it.

The first thing I'd tried, just setting the alpha property, hadn't worked. The next thing I tried was to try to use the graphics functions to draw a background like I did in the AdvancedDatagridGroupItemRenderer. Unfortunately, since the AdvancedDatagridItemRenderer does not inherit from UIComponent or DisplayObjectContainer, so it neither had a graphics object of its own nor any way to add one.

So I stuck my nose back into the docs and discovered that my TextField had a colorTransform object that I should be able to manipulate to change the alpha transparency. Well, I was able to change its alpha property, but there was absolutely no visible change.

Finally, I realized I was going to have to leave the Flex world and see what the Flash world had to offer. So I came across this post and was able to get the transparency by changing the blend mode. Still, my AdvancedDatagridItemRenderer and AdvancedDatagridGroupItemRenderer did not match, because the text in the AdvancedDatagridItemRenderer was semitransparent and the AdvancedDatagridGroupItemRenderer text was not. Lesson Number 2: Anything that inherits from TextField is only going to be able to support alpha transparency with difficulty, and even then the entire component, including the text, will be alpha transparent.

So I had the simple idea that I could use the AdvancedDatagridGroupItemRenderer to do all the item rendering.

Tomorrow, I will talk about getting the icons to render properly.