Advanced Search

Return to Snippet

Revision: 5660
at March 23, 2008 19:33 by mswallace
Updated Code 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:DefaultTileListEffect id="myTileListEffect"
            fadeOutDuration="500"
            fadeInDuration="500"
            moveDuration="1500" />

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object source="assets/Accordion.png"
                        label="Accordion" />
                <mx:Object source="assets/ApplicationControlBar.png"
                        label="ApplicationControlBar" />
                <mx:Object source="assets/Box.png"
                        label="Box" />
                <mx:Object source="assets/Button.png"
                        label="Button" />
                <mx:Object source="assets/ButtonBar.png"
                        label="ButtonBar" />
                <mx:Object source="assets/CheckBox.png"
                        label="CheckBox" />
                <mx:Object source="assets/ColorPicker.png"
                        label="ColorPicker" />
                <mx:Object source="assets/ComboBox.png"
                        label="ComboBox" />
                <mx:Object source="assets/DataGrid.png"
                        label="DataGrid" />
                <mx:Object source="assets/DateChooser.png"
                        label="DateChooser" />
                <mx:Object source="assets/DateField.png"
                        label="DateField" />
                <mx:Object source="assets/HorizontalList.png"
                        label="HorizontalList" />
                <mx:Object source="assets/HRule.png"
                        label="HRule" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:TileList id="tileList"
            dataChangeEffect="{myTileListEffect}"
            dataProvider="{arrColl}"
            itemRenderer="TileListItemRenderer"
            dragEnabled="true"
            dropEnabled="true"
            dragMoveEnabled="true"
            columnWidth="100"
            rowHeight="100"
            width="100%"
            height="100%" />

</mx:Application>

<!-- below is the custom renderer used in the above example-->

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        styleName="plain"
        verticalAlign="middle"
        horizontalAlign="center"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        width="100%"
        height="100%">

    <mx:Image source="{data.source}" />
    <mx:Label text="{data.label}"
            truncateToFit="true"
            width="96" />

</mx:VBox>

Revision: 5659
at March 23, 2008 19:15 by mswallace
Initial Code 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:DefaultTileListEffect id="myTileListEffect"
            fadeOutDuration="500"
            fadeInDuration="500"
            moveDuration="1500" />

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object source="assets/Accordion.png"
                        label="Accordion" />
                <mx:Object source="assets/ApplicationControlBar.png"
                        label="ApplicationControlBar" />
                <mx:Object source="assets/Box.png"
                        label="Box" />
                <mx:Object source="assets/Button.png"
                        label="Button" />
                <mx:Object source="assets/ButtonBar.png"
                        label="ButtonBar" />
                <mx:Object source="assets/CheckBox.png"
                        label="CheckBox" />
                <mx:Object source="assets/ColorPicker.png"
                        label="ColorPicker" />
                <mx:Object source="assets/ComboBox.png"
                        label="ComboBox" />
                <mx:Object source="assets/DataGrid.png"
                        label="DataGrid" />
                <mx:Object source="assets/DateChooser.png"
                        label="DateChooser" />
                <mx:Object source="assets/DateField.png"
                        label="DateField" />
                <mx:Object source="assets/HorizontalList.png"
                        label="HorizontalList" />
                <mx:Object source="assets/HRule.png"
                        label="HRule" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:TileList id="tileList"
            dataChangeEffect="{myTileListEffect}"
            dataProvider="{arrColl}"
            itemRenderer="TileListItemRenderer"
            dragEnabled="true"
            dropEnabled="true"
            dragMoveEnabled="true"
            columnWidth="100"
            rowHeight="100"
            width="100%"
            height="100%" />

</mx:Application>

<!-- below is the custom renderer used in the above example-->

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        styleName="plain"
        verticalAlign="middle"
        horizontalAlign="center"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        width="100%"
        height="100%">

    <mx:Image source="{data.source}" />
    <mx:Label text="{data.label}"
            truncateToFit="true"
            width="96" />

</mx:VBox>
Initial URL 









Initial Description














Initial Title





TileList using custom ItemRenderer and Effects









Initial Tags





Flex









Initial Language





MXML