admin originally posted this on Drunk on Software.

In this edition we chat with Anthony Franco, of EffectiveUI, about building high quality software.  Anthony shares about life at EffectiveUI and his thoughts on rich Internet applications.

Resources:

My wife’s bluetooth headset uses a non-rechargable AAAA battery.  Right.  Where do you get AAAA batteries?

jonr originally posted this on Jon Rose's Blog.

When googling for solutions to any number of Flex challenges, I commonly find posts that include monkey patching as part of the solution.  Monkey patching is basically replacing a Flex class with your own.  For example, if you want to change something in UIComponent you can create a mx.core.UIComponent in your project, and the Flex compiler will use your class instead of the frameworks class.  So, basically you take the source code from the framework and modify it to meet your needs.

While it is interesting to have this option, its seems like a horrific idea to actually do this on a real enterprise project.  With this sort of solution upgrading the Flex SDK will be painful at best, and impossible at worst.  I think the only time I would ever do this is to get a bug fix into my code before it is available in a release, with the intent to throw away my class once the next release of the SDK is available.

From all the posts out there, it does appear this is a common thing to do in the Flex community.  So, am I missing something here, or is this as evil of an approach as it seems?

jonr originally posted this on Jon Rose's Blog.

I just finished a write up for InfoQ on the Flight Framework. Flight compares themselves to Cairngorm, without all the “boiler-plate” code.  The association with Cairngorm is a turn off for me to seriously consider using Flight, as I still don’t understand what value Cairngorm provides (old post 1 & 2).  That doesn’t mean I don’t believe that Flight may have value, but in learning about the framework there seem to be the typical assumption that everyone is out there looking for the perfect MVC solution (old post 3).

I lived through the countless MVC frameworks in Java.  So, I don’t believe it is naive when I ask, what is so great about MVC anyway?  We all love to work in code where the separation of concerns (SoC) have been adhered to, but do I need MVC to accomplish this in Flex?  I don’t believe I do…

Anyway, back to Flight, they did allude to some additional features in the framework, like history management.   Although that specific feature is available in Flex 3, there maybe other features that make it useful.  The documentation is pretty slim right now - we will see what else is there when the docs evolve.  For me, I guess I want to see frameworks that do more than attempt to enforce a pattern.

jonr originally posted this on Jon Rose's Blog.

I have updated my Flex security component called Chimp.  I was working on implementing a suggestion to use the includeInLayout property instead of removing children, and found a number of issues in the process.  I have expanded the sample application to help test the component.  Also, it should give a pretty good picture of how the component works.

Here is what has changed since the last post:

• Replaced the “remove” action with “removeFromLayout” & “removeChild” actions
  • removeFromLayout: This property use the includeInLayout property to remove components from view.  This is preferred over the ‘removeChild’ action, but will not work in all cases (like TabNavigator tabs).
  • removeChild: This removes the child from the parent.
• Update the component so it updates the view on any permission changes.  So, it no longer require that permissions are loaded and set before the Chimp is loaded.  The Chimp still needs to be added before the protected components are added because they are tracked with an event listener on the add to stage system event.

Please let me know if anyone else has suggestions on how to improve the component…

admin originally posted this on Saturnboy.

A while back I started digging into the WindowShade component in Flexlib. I really needed a set of cool collapsable buckets for a project at work, and WindowShade was perfect for the task. Alas, I couldn’t find too much info on styling a WindowShade other than Doug McCune’s awesome example of WindowShade and Degrafa. So, here is how I went about achieving the look and feel I needed with WindowShade.

Plain Vanilla

I started with an unstyled, super vanilla WindowShade wrapping a List. And of course, I get this super-vanilla output:

shade 1 (view source enabled)

The only styling magic was to add padding="0" to the WindowShade to get the child List component to suck up to the bottom of the WindowShade button.

My First Attempt

In the next pass, I ditched the lame WindowShade button, and went with Flexlib’s CanvasButton, which contains a simple Label plus a CheckBox skinned with a plus or minus graphic. The code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:flexlibContainer="flexlib.containers.*"
        xmlns:flexlibControl="flexlib.controls.*"
        viewSourceURL="srcview/index.html">
 
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var goodies:Array = [
            { header:'Ice Cream', items:['Vanilla', 'Chocolate', 'Strawberry', 'Cookies & Cream'] },
            { header:'Candy', items:['Twix', 'Snickers', 'Fire Balls', 'Hot Tamales', 'Mike & Ikes', 'Pez'] },
            { header:'Cookies', items:['Chewy Chips Ahoy', 'Mint Milano', 'Oreo', 'Nutter Butter', 'Fig Newtons'] }];
    ]]>
    </mx:Script>
 
    <mx:Style source="style.css" />
 
    <mx:VBox width="140" styleName="container">
        <mx:Repeater id="r" dataProvider="{goodies}">
            <flexlibContainer:WindowShade width="100%" styleName="shade"
                    data="{r.currentItem.header}"
                    opened="{r.currentIndex == 0}">
                <flexlibContainer:headerRenderer>
                    <mx:Component>
                        <flexlibControl:CanvasButton width="100%" height="30" styleName="shadeBtn">
                            <mx:Script>
                            <![CDATA[
                                import flexlib.containers.WindowShade;
                            ]]>
                            </mx:Script>
 
                            <mx:Label id="header" top="3" left="4" text="{WindowShade(parent).data}" styleName="shadeHead"/>
                            <mx:CheckBox id="chk" top="9" right="6" selected="{WindowShade(parent).opened}" styleName="shadeChk"/>
                        </flexlibControl:CanvasButton>
                    </mx:Component>
                </flexlibContainer:headerRenderer>
 
                <mx:List width="100%" dataProvider="{r.currentItem.items}" rowCount="{r.currentItem.items.length}" styleName="shadeList"/>
            </flexlibContainer:WindowShade>
        </mx:Repeater>
    </mx:VBox>
</mx:Application>

After throwing in some colors from a sweet Kuler theme and embedding Helvetica, we get this:

shade 2 (view source enabled)

At this point, I was really happy with look and feel, but there we still a few minor issues with the CanvasButton header that needed to be fixed before declaring victory.

Fixups

First, I needed the rollover event to flow down to the checkbox, so it would correctly show the overSkin on mouse over. Second, I wanted a color change on the Label on rollover to provide better visual feedback to the user. And lastly, I wanted the entire CanvasButton header to be clickable, not just the label text or the checkbox graphic.

Focusing just on the modified CanvasButton code, used in the headerRendered:

<flexlibControl:CanvasButton width="100%" height="30" styleName="shadeBtn"
        rollOver="header.setStyle('color', 0xffffff); chk.dispatchEvent(event);"
        rollOut="header.setStyle('color', 0xcccccc); chk.dispatchEvent(event);">
    <mx:Script>
    <![CDATA[
        import flexlib.containers.WindowShade;
    ]]>
    </mx:Script>
 
    <mx:Label id="header" top="3" left="4" text="{WindowShade(parent).data}" styleName="shadeHead"/>
    <mx:CheckBox id="chk" top="9" right="6" selected="{WindowShade(parent).opened}" styleName="shadeChk"/>
    <mx:Canvas width="100%" height="100%" backgroundColor="#000000" backgroundAlpha="0" />
</flexlibControl:CanvasButton>

The final result, a nice styled WindowShade:

shade 3 (view source enabled)

I used the parent CanvasButton’s rollover event to set the child Label color and forward the event to the child CheckBox. To make the entire button clickable, I used one of my favorite Flex UI hacks: I added a space-filling transparent Canvas.

Comparison Shopping

And finally, a side-by-side comparison of all three WindowShade skins:

jonr originally posted this on Jon Rose's Blog.

It’s true!  At least to the same extent Mr. Bush is to blame for the current financial mess, and speaking as someone who is terrified by both of the extremes in American politics, he does deserve some of the blame.

For those of us in our early 30’s, there is little cause to be concern for ourselves (even at this advanced stage of economic sickness in the country).  We must continue to work hard (or start for some), and hope for the best over the long-term.  Honestly, the only thing that troubles me about the current mess is that it has a high probability of affecting my parent’s ability to retire at a reasonable age.  This is the case for anyone over 50.  As much as this is troubling on a personal level, it likely means a stay of execution for social security.

All the dooms day predictions of social security’s demise were based on all the boomers being able to leave the workforce in the very near term.  Now, that those timelines will be extended for many unfortunate folks it probably means that another poorly constructed government program will have a much longer lifespan than anticipated only a few short months ago…

I do not believe anyone can predict what will happen in our economy in the next 6-12 months.  I think the only certainty at this point is that all of our old assumptions will have to be re-evaluated once we get our collective heads above water.

admin originally posted this on Ruminations on Large-Scale Software Development.

The sleek DEC VT100 terminal, c. 1978

admin originally posted this on Eldorado Software.

jonr originally posted this on Jon Rose's Blog.

I’ve posted a simple component, called Chimp, for doing role based permissions in Flex through metadata.  You can check it out at: http://code.google.com/p/flexible-chimp/. The quick overview is that you provide Chimp the user’s roles on start-up and then add meta data to the components for filtering what the user can see.

Here are the setup instructions:

1) Download and add the chimp.swc to your project library
2) Add compiler argument to keep necessary metadata:

-locale en_US -keep-as3-metadata+=Protected

3) Load the Chimp in your application. The Chimp must be loaded after role data is available, but before children are added:

Chimp.load(perms);

4) Add metadata to your Flex components:

[Protected(permissions="ROLE_ADMIN",notInPermissionAction="remove",componentId="this")]
[Protected(permissions="ROLE_UPDATE",inPermissionAction="enable",componentId="updateButton")]