Adding a button (or whatever) to a Panel header

The other day I had the need to add an Image control to the header area of a Panel. Since the Panel component does not support adding things to its header I had to find my own solution. My first simple approach was to just add the Image to the Panel content and then tweak the paddingTop style of the Panel to make the Image appear in the header. This worked for appearance but any mouse interaction on the Image was blocked. So I looked around a bit and found several solutions for extending the Panel component to add a single button to the Panel header. Since, in my case, I needed to add an Image and I figured in other use cases I might want to add several Buttons or a ButtonBar or whatever I decided to extend the Panel class to create a generic Panel component that would accept and place any kind of UIComponent in its header.
Here is the code. Feel free to re-use it in any way you deem fit.

package com.flexceptional.components
{
   import mx.containers.Panel;
   import mx.core.UIComponent;

   public class ExtendedPanel extends Panel
   {
       public var headerPanel:UIComponent;

       override protected function createChildren():void
       {
           super.createChildren();

           // Add the title panel
           if (headerPanel)
           {
               titleBar.addChild(headerPanel);
           }
       }

       override protected function updateDisplayList
(unscaledWidth:Number, unscaledHeight:Number):void
       {
           super.updateDisplayList(unscaledWidth, unscaledHeight);

           // Position the title panel
           if (headerPanel)
           {
               var y:int = (titleBar.height - headerPanel.height) / 2;
               var x:int = this.width - headerPanel.width - 5;
               headerPanel.move(x, y);
           }
       }
   }
}

Now, thanks to the convenience of MXML and the way it is compiled, we can specify our additions to the Panel header in MXML when defining the Panel.
Example:

<comp:ExtendedPanel width="100%" height="100%" title="Properties">
   <comp:headerPanel>
       <mx:Image source="{helpIcon}"
                 width="16"
                 height="16"
                 toolTip="Open help documentation in new window"
                 useHandCursor="true"
                 buttonMode="true"
                 mouseChildren="false"
                 click="propertyHelpIcon_clickHandler(event)" />
   </comp:headerPanel>
   <!-- Panel content -->
   <comp:PropertiesGrid />
</comp:ExtendedPanel>

Flex: Disable mouse wheel scrolling for Text

In several places in our application we have Text components that dynamically resize depending on their content. An annoying thing about these Text components is that they start scrolling when the user uses the mouse wheel while hovering the components. I have been trying to disable this scrolling for a while but all of the proposed solutions* that I have found have not worked.

It was only today when I broadened my search criteria to target the Flash community rather than limit the search to Flex that I finally found a solution:

http://www.eddieoneverything.com/articles/disabling-textarea-scrolling-in-flash-as3.php

Based on the solution proposed in this link I created a new text component for Flex that does not allow the user to scroll the content.

Here is the code. Feel free to re-use it in any way you deem fit.

package com.flexceptional.components
{
    import flash.events.Event;
    import flash.text.TextFieldAutoSize;
    
    import mx.controls.Text;
    import mx.events.FlexEvent;
    
    public class TextNoScroll extends Text
    {
        override protected function createChildren():void
        {
            super.createChildren();
            
            // To get rid of unwanted scrolling. Needs to
            // be done any time the component is resized
            // or the content changes.
            addEventListener(FlexEvent.UPDATE_COMPLETE,
                             updateCompleteHandler);
        }
        
        private function updateCompleteHandler(event:Event):void
        {
            textField.autoSize = TextFieldAutoSize.LEFT;
            var tempHeight:Number = textField.height;
            textField.autoSize = TextFieldAutoSize.NONE;
            textField.height = tempHeight + 20; // Padding 20px
        }
    }
}

* Proposed solutions that did not work:

• Setting mouseWheelEnabled=false on the internal textfield
• Stopping propagation of any mouse wheel events on the text component or the internal text field
• Setting mouseEnabled = false on the Text component. Well, this actually does disable the scrolling but it also disables any other mouse action, like selecting text or clicking links.

FITC Amsterdam 2011

Last week i went to the FITC conference in Amsterdam. Apart from the great parties these are some of the highlights from my visit there.

About the conference

FITC claims to be a conference for “Digital Creators” and its tagline for the Amsterdam edition is “Design. Technology. Cool shit.”. The audience was a blend of designers and developers, students, freelancers and design studios. The presentations covered areas from technical subjects on Flash, Flex, 3D and mobile development to talks about design and even business and marketing. There was also a keynote presentation from Adobe that covers the new developments in their frameworks and tools.

Many important people from Adobe were also there giving presentations and talking to the members of the community. Including people from the FlashBuilder and Flex SDK program management team and people from the Flash Player engineering team.

I found that most people I talked to were more targeted towards Flash design and development, making web page designs and advertising campaigns for their clients. Judging by the well worked out mixture of presenters and the diversity of the given presentations I am sure that there were also a lot of Flex developers present but for some reason they were a bit harder to find, at least for me.

Flash vs HTML5

There were a lot of talks about HTML5 on the conference and as to whether or not the new capabilities of HTML5 will put Flash out of a job. The general conclusion was that this might eventually be the case but not in a near foreseeable future. Even though the new HTML5 canvas and CSS3 specifications will allow for a lot more elaborate user experiences in a browser this is still a very immature technology. A few of the things that should make you think twice before switching over to HTML5 for your application development are:

• Browser support is still bad. Many major browsers are still not close to implementing all the new features of the HTML5 and CSS3 specifications meaning that the cool new stuff you implement might not even work in all browsers.
• Cross browser compatibility. Different browsers implement the new capabilities in different ways leading to you having to code around the differences to maintain a consistent user experience across different browsers.
• Performance. The different implementations of HTML5 canvas still require a lot of processing power so switching to HTML5 to support more mobile platforms is not a good idea yet.
• Tool support. In terms of development experience and productivity people have already started to develop nice new tools and APIs towards the new HTML5 and CSS3 specifications but there is still a long way to go.

New Flex stuff

The upcoming releases of the Flash Builder and Flex SDK focus on mobile application development and include a lot of features and tools for targeting a mobile market. One of the improvements that will also benefit the development of applications for desktop pcs are the set of optimized components that come with the new releases. If you are still developing using the Flex 3 SDK and would like to start doing something for mobile it is time to make the switch to Flex 4 and Spark. MX components will have limited support on mobile devices.

Concurrency in the Flash Player

Jim Corbett of the Adobe Flash Player team did a nice presentation about the news in the Flash Player. The main new features were the support for native GPU acceleration for rendering videos and 3D graphics and the addition of a low level 3D API for 3D development named “Molehill”. Even if Jim stressed the fact that it is not really official and that there is no release date set for it the Flash Player team is finally starting to think about adding concurrency, support for threads, in the Flash Player programming and execution model.

Conclusion

This year was my first time at FITC Amsterdam and I had a great time. I think that the conference was very valuable and rewarding, both for me personally and for my company in terms of contacts with people from the industry and community and new insights in the recent developments of tools and technologies for building user experiences. I hope to be able to come back next year!