TileList using custom ItemRenderer and Effects - MXML Snipplr Social Repository

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

Choose a language for easy browsing: