Working effectively with novices

So I have two books that I highly recommend.

First let me explain where I'm coming from: First I'm a professor, mentor, and trainer, and I always have to try to express my knowledge about Flash and Flex to people who are brand new.

Second, as a consultant, architect, and developer, I frequently need to express the value of TDD, Agile, CI, and lots of other really good things, that are not quite development.

These books highlight the differences between a novice's brain and an expert's, and how to start bridging that gap.

Pragmatic Thinking & Learning by Andy Hunt, talks about the novice versus expert brain. How the brain interprets and responds to signals. This is written by programmers, and is incredibly useful.

For me, this book answered the question of why did my project managers always seem to make decisions that I didn't agree with and I urged against.






Made To Stick by Chip & Dan Heath, is a fantastic book about what makes an idea or concept "sticky". Why do we remember certain stories, advertisments, urban legands after hearing them once, yet things critical to our job we forget the moment we leave the meeting.

I feel like this book would have been helpful for me to persuade the aforementioned managers of why some of the things I was staying was important.




For me, these two books are game changers. I re-written my entire University of Houston, "Intro to Multimedia" course to target the novice brain better, and I'm working on incorporating more sticky ideas too.

Because I'm so excited by these books, I've had to share.

Migrating from Flex 3 to Flex 4 - A bulleted list

I know that there are lots of migration guides, but I thought I post a bulleted list. The intent of this migration is NOT to move to spark components, but to keep as much the same as the flex 3 build. So for example if you have a flex 3 dashboard, that you now want to load in flex 4 content.

1) Fix name spaces:
Search: xmlns:mx="http://www.adobe.com/2006/mxml"
Replace xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"

2) fix MetaData
Search: mx:Metadata
Replace: fx:Metadata

3) fix Script

Search: mx:Script
Replace: fx:Script

4) fix Component

Search: mx:Component
Replace: fx:Component

5) fix Bindings

Search: mx:Binding
Replace: fx:Binding

6) Declarations wrapping
All non-visual elements need to be wrapped into the Declarations Tag.
Create a Flex Template, to make this process really easy.
Declarations_multiline
<fx:Declarations>
${line_selection}
</fx:Declarations>



Declarations_singleLine
<fx:Declarations>
${word_selection}
</fx:Declarations>

Then it is just a matter of selecting the non-visual elements, hitting cntl-space and choosing the correct Declarations template

7) Adding the halo skin back into the workspace

• Copy the Halo theme into the workspace into a folder called "themes"
  c:\p.f\adobe\Flashbuilder\sdk\framework\theme\Halo.swf
• Flex Build Path -> Source Path -> Add Folder -> ${DOCUMENTS}\themes
• update the compiler settings to include:
   -theme=Halo/halo.swc

8) Migrate the states.

This takes the most work, because there is not much automation that you can do

1. Select all of the states and duplicate using cntl-alt-down
2. cntl-shift-c, to comment out the duplicated code
3. delete all of the nested nodes (AddChild, SetStyle, etc)
4. Create a 2nd Editor View (Window -> new Editor), and adjust them so you can see both
5. Keep the commented states on one side, and the version you are editing on the other
6. Systematically add the state properties
1. On the adds / removes, be sure to include the "includeIn" property
2. Use the Flex4 state syntax for the properties and styles
7. Be careful with the basedOn property of the states, you will need to make sure that your includeIn and properties reflect that as well. 

*********** At this point we should be just down to warnings ***********

9) Remove warnings about the styleManager

Manually replace "StyleManager.getStyleDeclaration" with "FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration"

You need to do this manually, as you will also need FlexGlobals imports. Also if you are within a visual element, you can just use styleManager instead of the static FlexGlobals property

10) Manually replace "Application.application" with "FlexGlobals.topLevelApplication"

You need to do this manually, as you will also need FlexGlobals imports.

11) You might still have some CSS warnings left, if so, you can select the Flex 3 compatibility mode within the Flex Compiler options

Some useful resources I found along the way:

http://www.actionscripterrors.com/?p=2186

http://www.jonathanrowny.com/journal/migrating-flex-4-stylemanager

http://squaredi.blogspot.com/2011/10/multiple-initializers-for-property.html

Multiple initializers for property 'dataprovider'

So, while migrating from Flex 3 to Flex 4, I'm going through the

• change namespaces
• move mx: to fx:
• wrap non-UIComponents into <fx:Declarations>

The next round of compiler errors is

"Multiple initializers for property 'dataProvider'. (note: 'dataProvider' is the default property of 'mx.controls.ComboBox').

Super useful error message here. 

Thanks to the hint at http://www.freeflowingcode.com/blog/flex/flex-multiple-initializers I noticed that there where still non-visual elements inside these components. 

Wrapping these elements into <fx:Declarations> made the error go away. 

So I guess that the take-away is, for components that use a dataProvider, and whose default property is dataProvider, you get a cryptic error message when your <Declarations> are not inside the correct tag. 

Showing more errors in Flash Builder / Eclipse

Have you had a task, like repackaging, migrating from Flex 3 to Flex 4, or anything that generated 100s of errors. Did you ever notice that eclipse had a "convenient" way of displaying 100 of (x+100) errors? I just discovered the simple way to show ALL of your errors.

Problems View -> Preferences (via down arrow on right hand side) -> Use Marker Limit = false;

Focusing on the spark Datagrid

From my presentation at 360Flex Unconference at Max.

The Slide Deck

Here is the blog that talks about the demo and has the source code:
The demo and source code

Precision focus control within the Spark DataGrid

So, in preparation for my MAX 360Flex Unconference presentation on Tues Oct 4th at 2pm (http://www.360flex.com/blog/2011/08/360max-the-schedule-2/) I've put together this demo about how to get precision focus control within the Spark Datagrid.

In this example you can see:

• Set focus to first editable item
• Tab through occasionally editable fields
• Focus with a mixture of multiple occasionally editable fields within a record
• Focus on a particular data item
• Focus using Tab, Shift+Tab, Arrows, and Page-Up and Page-Down
• Remove Focus
• Focus by clicking on a row

(Note, I've left the "disabled" cells editable, as I'm only changing the alpha. This is so that you can see that even if you click in to the non-editable fields directly, that the editing sessions (via the "Dashboard") doesn't get set)

view source

The slide deck for the preso will be coming soon.

DataGrids performance tests

 So my mission is to try to performance test the 3 Flex grids. mx:DataGrid, s:DataGrid and mx:AdvancedDataGrid.

I feel like my tests are incorrect and looking to you to point out my flaws.

Each grid has the same dataprovider and columns defined. I'm only using the default renderers
I have a StopWatch class, that will getTimer() from a start() method, until the next Event.RENDER from the grid under test.
I remove the data provider by setting it to null.
Once the screen is blank, I start the stopwatch and add the dataprovider.

The average of these tests over ten samples is:

Spark DataGrid: 207 ms
mx DataGrid: 176ms
AdvancedDataGrid: 171ms

I feel like my testing method is invalid, as I don't trust that

   1. The ADG is the fastest at rendering
   2. Spark is the worst at rendering
   3. That the difference in rendering between the 3 grids is negligible

Anyone to offer any insight?