nickMiddleweek.blog.search();

Loading...

Wednesday, 23 February 2011

An even Smoother HSmoothBox

I'm currently working for a large used car publishing company and we're working on some pretty cool UI's that interface ColdFusion ColdSpring and the Endeca Search Engine. I've been meaning to blog for a while about some personal developments but an issue cropped up with the Open Source HSmoothBox component and I wanted to share the issue and my workaround...

HSmoothBox (as found here: http://strawberrypixel.com/blog/?p=21) also has a little sibling component called VSmoothBox and in a nutshell they are like HBox/ VBox components with animated scrolling.

it's part of a composite component that binds it's dataProvider to the HSmoothBox's dataProvider and each time the composite component's dataProvider setter function is called, we invoke hscroller.scrollToItemIndex(0);

the problem came to light when we were using the HSmoothBox with PopupManager which, has its data model injected via BindingUtils.bindProperty(). First time round, all is fine but on take-two of opening the poppedUp HSmoothBox, it throws a wobbly... This was because the injected data model was fetched from the server and the timings just so made it work on it's first view but attempt numero two meant the dataProvider's ArrayCollection was there already waiting and was being injected into the HSmoothBox before it was fully created.

so, inspecting the lovely Open Source code for HSmoothBox, you can see on it's FlexEvent.CREATION_COMPLETE handler an internal "_scroller" object is created which, is required when we call its scrollToItemIndex() function. The culprit was caught!

now I probably should contact the author as well (and I will) but for now here is the little Class that extends HSmoothBox and fixes the issue.

package com.middleweek.component
{
    import containerEx.HSmoothBox;
    
    import mx.events.FlexEvent;
    
    
    /**
     *
     * @author nick.middleweek 16th February 2011
     *
     * This is to fix component functionality by overriding some methods that are prematurely invoked.
     *
     */
    public class HSmoothBox2B extends HSmoothBox
    {
        /**
         * @private
         * Storage variable to test if the creationComplete phase has executed.
         */
        private var creationCompleted : Boolean = false;
        
        
        /**
         * Constructor
         *
         */
        public function HSmoothBox2B ()
        {
            super();
            this.addEventListener( FlexEvent.CREATION_COMPLETE, onCreationComplete );
        }
        
        
        private function onCreationComplete ( evt : FlexEvent ) : void
        {
            this.creationCompleted = true;
        }
        
        
        override public function scrollToItemIndex ( val : int, immediate : Boolean = false ) : void
        {
            if ( creationCompleted == true )
            {
                super.scrollToItemIndex( val, immediate );
            }
        }
        
        
        override public function head () : void
        {
            if ( creationCompleted == true )
            {
                super.head();
            }
        }
        
        
        override public function tail () : void
        {
            if ( creationCompleted == true )
            {
                super.head();
            }
        }
    
    }
}

now HSmoothBox is even smoother!

Monday, 1 November 2010

Word Problems...

a shame it is, but this isn't a Deadmau5 - Word Problems review :)  being slightly more in tune with flex I had a little task to create an ActionScript word spliiter, then display a word summary - a bit like the featurette found in word. there were a few rules to stick to including ignore punctutation but include single quotes as part of the word - as you'd expect. I was going to use Regular Expressions to split the words out but after tinkering, I decide to use good old brute force. Below is a little screenshot of the demo, click that or here and you'll get the working version. the source code is available too so have a play and use it as you please...



happy counting...

Friday, 29 October 2010

ActionScript Precision discrepancy problems

mmmm, this is a bit of nightmare, especially for those writing financial software... check this, take a perfectly good number (AS3 Number) such as 11995, then divide it by 1000000, then multiply it by 1000. you would expect to get 11.995, but no, you get 11.995000000000001. then if you multiply by ten, the discrepancy gets slightly worse so each time you apply calculations, you are dealing with the wrong number.

to sort this out, you could roll your own string manipulation functions or there's a neat little static function built into the Number object called toFixed, see the docs: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/Number.html#toFixed()

you use it like this...

var num : Number = ( 11995 / 1000000 );
var num2 : Number = num * 1000;
var str2 : String = num2.toFixed( 6 );
var num3 : Number = new Number( str2 );

...easy!

Thursday, 28 October 2010

How to set the width of a flex data grid column to the item renderer width?

so we need to set the width of a data grid column to the same size of the item renderer defined for that column. we know we can't specify the width attribute of the DataGridColumn to 100% (check this: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/dataGridClasses/DataGridColumn.html) so if we turn the problem inside out and get the item renderer (IR) to work out how big it is and then set the column width in pixels from there (well we dispatch a custom event from the IR and listen for that event on the datagrid so it's all done propa!).

let's give it a whirl... we need a datagrid with at least one column and let's drop a numeric stepper control inside the columns IR and then we can use that to control the width of the IR which, can then specify the DataGridColumn.width attribute in pixels.

et voila! le source code ist here!

Monday, 6 September 2010

How to create Flex 4 Components

So this is a god send, i've been working with Flex 3.5 banging some lovely little components but time has come to make the shift and upgrade to Flex 4... The framework is certainly different and there's a new skining architecture. I'm still reading around the subject but this is where I'm soaking it all up from: http://www.adobe.com/devnet/flex/components.html

enjoy!

Monday, 21 June 2010

Flash Builder: CTRL + SPACE on Steroids!

So here's a little tip for Flex and Flash Builder... I'm using Eclipse with the Flash Builder 4 plugin but I guess it'll work in the standalone version as well... I'm always using contextual menu/ code assist to help find out about those odd properties, but I've never noticed the status area which tells you how to scroll through the various code assist views...
  1. All Properties


  2. Properties

  3. Events

  4. Effects

  5. Styles


:)

Thursday, 13 May 2010

mind the gap!

this one stumped me for a bit and I was looking in the wrong place for the answer but with Flex mx.containers.panels you have the Panel itself and the Panel header. Now when you're styling up and things are getting very pixel perfect you need to know your flanels from your panels and to alter the distance between the header and the panel contents you need to specify the top css style of the panel and not the bottom css style of the panel header...

So you do this:
.myPanel { border-thickness-top:0; }

and not this:

.myPanel { title-style-name: "myPanelHeader"; }
.myPanelHeader { border-thickness-bottom:0; }

what a painel !