March 24th, 2008 by Kyle
Tags: , , ,
Posted in: Flex

Here is a sample that demonstrates what to do if you have an itemRenderer that has scrollbars and the outer control has drag and drop enabled. If you just try and scroll the scrollbar of the itemRenderer, the dragging mouse movement activates the drag functionality. That’s not what you want! You want to be able to drag the scroll thumb to scroll the inner renderer.

The sample shows how to use stopImmediatePropagation() to halt the dragging and allow the scrolling:

This movie requires Flash Player 9

Download a zipfile containing the source to this sample.

Browse the source of this example.

Or continue into the blog entry to see the source:
Read the rest of this post»


No Comments »

February 18th, 2008 by Kyle
Tags: , , , , ,
Posted in: Flex

Here is a sample that came about as usual, from working on an issue with a customer. I found I didn’t have a good example of a combobox itemEditor. This sample came about when moving from using a combobox as an inline editor to moving to a combobox within a custom component as an editor. Wrapping the combobox in a VBox within the custom component caused some errors and undesirable behavior. In order to wire up data and tabbing/focus behavior you have to remember you component should implement IDropInListItemRenderer and IFocusManagerComponent. See the following sample code and running sample:

App:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:XML id="xml" source="weather.xml"/>
    <mx:DataGrid id="myDatagrid" dataProvider="{xml.city}"
        variableRowHeight="true" editable="true" rowHeight="50"
        width="300" height="300">
        <mx:columns>
        <mx:DataGridColumn dataField="Location"/>
        <mx:DataGridColumn dataField="Climate" editable="true" editorDataField="value">
            <mx:itemEditor>
                <mx:Component>
                    <mx:ComboBox editable="true">
                        <mx:dataProvider>
                            <mx:String>Mild</mx:String>
                            <mx:String>Hot</mx:String>
                            <mx:String>Foggy</mx:String>
                            <mx:String>Rainy</mx:String>
                            <mx:String>Snow</mx:String>
                        </mx:dataProvider>
                    </mx:ComboBox>
                </mx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>
        <mx:DataGridColumn dataField="CloudCoverPercent" editable="true" editorDataField="value"
            itemEditor="CloudCover"/>
    </mx:columns>
    </mx:DataGrid>
</mx:Application>
 

Read the rest of this post»


11 Comments »

December 12th, 2007 by Kyle
Tags: , , , ,
Posted in: ActionScript, Flex

This isn’t as difficult as some may think. Basically your itemRenderer opens up a popup. When the renderer creates the popup, it sets an “opener” property on the popup pointing back to “this”, which is the itemRenderer. That way, when the editing is finished in the popup, the popup can pass data back to a function in the itemRenderer to do the update, close itself, and set focus back to the itemRenderer.

Here is the code for the app:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" >
    <mx:Array id="arr">
        <mx:Object articleName="Finding out a characters Unicode character code Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="15" />
        <mx:Object articleName="Setting an icon in an Alert control" data="14" />
        <mx:Object articleName="Setting an icon in a Button control" data="13" />
        <mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />
        <mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
        <mx:Object articleName="Using the Alert control Formatting data tips in a Slide" data="8" />
    </mx:Array>
    <mx:ArrayCollection id="AC" source="{arr}" />    

    <mx:DataGrid height="250" dataProvider="{AC}" variableRowHeight="true" width="60%" editable="true">
        <mx:columns>
            <mx:DataGridColumn dataField="data" headerText="ID" editable="false" width="125"/>
            <mx:DataGridColumn
                editable="false" wordWrap="true"
                headerText="Article Name"              
                itemRenderer="MyRenderer" dataField="articleName"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
 

Read the rest of this post»


4 Comments »

November 26th, 2007 by Kyle
Tags: , , , , , , , ,
Posted in: Flex

This is a follow on to my previous blog entry:
http://blog.739saintlouis.com/2007/11/22/flex-linebreaks-in-the-datagrid/

Here I show how to deal with line breaks in itemRenderer and itemEditors instead of in a datagrid labelFunction.
(This is also a nice example of writing simple, separate itemRenderer and itemEditors.)
Read the rest of this post»


No Comments »

Here is another good datagrid itemrender that I refer to when starting on datagrid renderer issues for customers.
It demonstrates how to create an itemEditor that is based on VBox and has child components (in this case a checkbox) and demonstrates how to implement the IDropInListItemRenderer and IFocusManagerComponent interfaces.
The sample also demonstrates how to add a listener to the underlying dataprovider arraycollection to detect change events and show what data has changed when edits are committed to the collection.

Here is the code for the application:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" creationcomplete="init()">
    <mx:script>
        <!–[CDATA[
            import mx.events.CollectionEvent;
            import mx.events.DataGridEventReason;
            import mx.collections.ArrayCollection;
            import mx.events.DataGridEvent;
            import mx.events.ListEvent;

            [Bindable]–>            private var myAC:ArrayCollection = new ArrayCollection([
                {id:89, Contact: ‘Bob Jones’, FollowUp: true },
                {id:5, Contact: ‘Jane Smith’, FollowUp: true },
                {id:7, Contact: ‘Doug Johnson’, FollowUp: false },
                {id:15, Contact: ‘John Jackson’, FollowUp: true },
                {id:21, Contact: ‘Christina Coenraets’, FollowUp: true },
                {id:4, Contact: ‘Joanne Wall’, FollowUp: false },
                {id:461, Contact: ‘Maurice Smith’, FollowUp: false },
                {id:35, Contact: ‘Lorraine Barnes’, FollowUp: true },
                {id:61, Contact: ‘The Dude’, FollowUp: true },
                {id:56, Contact: ‘Abe Rockaway’, FollowUp: true }

            ]);

            private function init():void{
                myAC.addEventListener(CollectionEvent.COLLECTION_CHANGE, onChange);
            }

            private function onChange(event:CollectionEvent):void{
                for (var i:int=0; i < event.items.length;i++){
                    var obj:Object=event.items[i].source;
                     for (var p:String in obj) {
                            if(p!="mx_internal_uid"){
                                cellInfo.text += "\n";
                                if(event.items[i].property==p){cellInfo.text +="*"}
                                 cellInfo.text += p+": " + obj[p];
                            }
                        }
                }
            }

        ]]>
    </mx:script>
    <mx:datagrid id="myGrid">
        dataProvider="{myAC}" editable="true" >
        <mx:columns>
            <mx:datagridcolumn datafield="Contact" width="150">
            <mx:datagridcolumn datafield="id" width="150" editable="false">
            <mx:datagridcolumn datafield="FollowUp">
                width="150"
                headerText="Follow Up?"
                itemRenderer="DGCheckBoxEditor" rendererIsEditor="true"
                editorDataField="cbSelected"/>
        </mx:datagridcolumn>
    </mx:datagridcolumn>  

    <mx:textarea id="cellInfo" width="300" height="150">    

</mx:textarea>
</mx:datagridcolumn></mx:columns></mx:datagrid></mx:application>

Read the rest of this post»


2 Comments »

I have come across a few cases where it was useful to have the column and row positions within an itemRenderer and so have made this sample to demonstrate how to do that.

Here is the application code:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:script>
        <!–[CDATA[
            import mx.events.DataGridEvent;
            import mx.collections.ArrayCollection;

            private static var object1:Object = new Object();
                                object1.name = "Object 1";

            private static var object2:Object = new Object();
                                object2.name = "Object 2";

            private static var object3:Object = new Object();
                                object3.name = "Object 3";

            private static var object4:Object = new Object();
                                object4.name = "Object 4";

            private static var object5:Object = new Object();
                                object5.name = "Object 5";

            private static var object6:Object = new Object();
                                object6.name = "Object 6";

            private static var object7:Object = new Object();
                                object7.name = "Object 7";

            private var things:Array = [object1, object2, object3, object4, object5, object6, object7]–>
            [Bindable]
            public var thingsAC:ArrayCollection = new ArrayCollection(things);

        ]]>
    </mx:script>

    <mx:datagrid id="dg" width="510" height="100">
         draggableColumns="false" dataProvider="{thingsAC}"
         horizontalScrollPolicy="on"
         rowCount="4">

        <mx:columns>
            <mx:datagridcolumn width="200" headertext="Name" datafield="name">
            <mx:datagridcolumn width="200" headertext="Column 2" itemrenderer="MyIR">
            <mx:datagridcolumn width="200" headertext="Column 3" itemrenderer="MyIR">
            <mx:datagridcolumn width="200" headertext="Column 4" itemrenderer="MyIR">
        </mx:datagridcolumn>
    </mx:datagridcolumn>

</mx:datagridcolumn>
</mx:datagridcolumn></mx:columns></mx:datagrid></mx:application>

Here is the code for my itemRenderer:

<mx:vbox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalalign="center">
    implements="mx.controls.listClasses.IDropInListItemRenderer"
    preinitialize ="init();">

    <mx:script>
    <!–[CDATA[
        import mx.controls.DataGrid;
        import mx.controls.dataGridClasses.DataGridListData;
        import mx.controls.listClasses.BaseListData;
        import flash.events.Event;
        import mx.collections.ArrayCollection;        

        [Bindable]–>       public var _lbl:String;

        private function onChange(event:Event):void{
            var myListData:DataGridListData = DataGridListData(listData);
        }

        private var _listData:BaseListData;
        private var myDG:DataGrid;

        public function get listData():BaseListData {
          return _listData;
        }
        public function set listData( value:BaseListData ):void {
            _listData = value;
            myDG = _listData.owner as DataGrid;

        }  

        public function init():void {
            addEventListener("dataChange", handleDataChanged);
        }    

        public function handleDataChanged(event:Event):void {
            // Cast listData to DataGridListData.
            var myListData:DataGridListData = DataGridListData(listData);

            var row:int=myListData.rowIndex+myDG.verticalScrollPosition;
            //to make 1 based
            var col:int=myListData.columnIndex+1;

            _lbl="row: " + String(row) +
                " column: " + String(col);

        }    

        ]]>
    </mx:script>
    <mx:label id="lbl" text="{_lbl}">
</mx:label>
</mx:vbox>

Here is the running application:

This movie requires Flash Player 9

Browse the source of this example.
Download a zipfile containing the source to this sample.


No Comments »

October 23rd, 2007 by Kyle
Tags: , , , , ,
Posted in: Flex

I can’t count the number of times upon starting to work on a datagrid issue that I turn to the flex docs and copy the code sample at the bottom of the Datagrid API page. Then I usually search around for a simple sample of an itemRenderer that fits my needs. I decided it was high time I posted a simple sample that combined those needs into one sample and was located in an easy place for me and everyone else to find…my blog.

Here is the sample code for the app:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:xmllist id="employees">
        <iployee>
            <name>Christina Coenraets</name>
<phone>555-219-2270</phone>
            <iail>ccoenraets@fictitious.com</iail>
            <active>true</active>
        </iployee>
        <iployee>
            <name>Joanne Wall</name>
<phone>555-219-2012</phone>
            <iail>jwall@fictitious.com</iail>
            <active>true</active>
        </iployee>
        <iployee>
            <name>Maurice Smith</name>
<phone>555-219-2012</phone>
            <iail>maurice@fictitious.com</iail>
            <active>false</active>
        </iployee>
        <iployee>
            <name>Mary Jones</name>
<phone>555-219-2000</phone>
            <iail>mjones@fictitious.com</iail>
            <active>true</active>
        </iployee>
    </mx:xmllist>      

    <mx:datagrid dataprovider="{employees}" width="600" height="400" editable="true">
        <mx:columns>
            <mx:datagridcolumn headertext="Name" datafield="name">
            <mx:datagridcolumn headertext="Phone" datafield="phone">
            <mx:datagridcolumn headertext="Email" datafield="email" itemrenderer="EmailRenderer">
        </mx:datagridcolumn>
    </mx:datagridcolumn>

</mx:datagridcolumn>
</mx:columns></mx:datagrid></mx:application>

Here is the code for the itemrenderer:

<mx:label xmlns:mx="http://www.adobe.com/2006/mxml">
    width="100%" height="100%" paddingLeft="3"
    fontWeight="{currentWeight}" fontStyle="{currentStyle}" >

    <mx:script>
        <!–[CDATA[

            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;
            import mx.events.FlexEvent;

            private var _listData:DataGridListData;
            [Bindable]–>           private var currentWeight:String = "normal";
            [Bindable]
            private var currentStyle:String = "normal";

            [Bindable]
            override public function set data(value:Object):void{
                super.data = value;
                if(data){
                    currentStyle = (data.active == "false" ? "italic" : "normal");
                }
                dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
            }

            override public function get data():Object {
                return super.data;
            }

            [Bindable("dataChange")]
            override public function get listData():BaseListData
            {
                return _listData;
            }

            override public function set listData(value:BaseListData):void
            {
                _listData = DataGridListData(value);
                text=_listData.label;
                currentWeight = _listData.label == "ccoenraets@fictitious.com" ? "bold" : "normal";
                if(data){
                    currentStyle = (data.active == "false" ? "italic" : "normal");
                }
            }
        ]]>
    </mx:script>
</mx:label>

Here is the running app:

This movie requires Flash Player 9

Browse the source of this example.
Download a zipfile containing the source to this sample.


No Comments »

I had a customer ask how they could use a button itemRenderer in a tile list, have the buttons toggle, and keep track of all the toggled buttons so one could easily clear all the toggled buttons. Here is what I came up with:

The key to this is that if your TileList has a dataprovider that is an array collection, within an itemRenderer, each item’s BaseListData will have a UUID.
If you extend the Tilelist and add a public member that is an arrayCollection that is used to contain all the UUIDs of toggled buttons, then management of those toggled buttons become quite easy.

Here is my simple extension to TileList:

<?xml version="1.0" encoding="utf-8"?>
<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="acToggledButtons = new ArrayCollection()">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var acToggledButtons:ArrayCollection;
           
            public function removeAll():void{
                acToggledButtons.removeAll();
                this.invalidateList();
            }
        ]]>
    </mx:Script>
</mx:TileList>
 

Read the rest of this post»


No Comments »

I recently had a request from a customer to demonstrate how a RadioButton in a DataGrid ItemRenderer could select and entire row and indicate that a row is selected. I also had a notion to put code on my blog that demonstrated a simple ItemRenderer that implemented mx.controls.listClasses.IDropInListItemRenderer since that allows you to access data and datagrid properties easily. I seem to often be looking around for a simple example to use as a starting point for many ItemRenderer examples I produce, but can never find a “template” starting point. This entry should take care of both these things.
Read the rest of this post»


7 Comments »