SmartLogic Solutions Blog » item renderer http://blog.smartlogicsolutions.com News and updates from the people at SmartLogic Solutions Tue, 30 Nov 2010 21:39:14 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Recreating Ely’s Flex 4 List Component Series: Part 3 – Adding Transitions http://blog.smartlogicsolutions.com/2008/08/23/recreating-ely%e2%80%99s-flex-4-list-component-series-part-3-adding-transitions/ http://blog.smartlogicsolutions.com/2008/08/23/recreating-ely%e2%80%99s-flex-4-list-component-series-part-3-adding-transitions/#comments Sat, 23 Aug 2008 05:00:57 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=173 In Part 2 we added hovered and selected states to the ItemRenderer for the list items. In this part we’ll add some transitions to make the list look more like an Accordion. Since screenshots won’t do the example justice this time, I’ll show a screencast I made demonstrating the result first:

[flash /wp-content/uploads/2008/08/elysliststep4.swf]
(Sorry for the embed being cutoff, still figuring out the params to this word press plugin. Click through for the full embed on its own page.)

Keep reading for the source…

Step 4: Add Accordion-like Selection Transitions

I added some more data to the list so it would look more interesting than switching between only two items. The only other thing that changed in this step was the item renderer:

skins/ItemRenderer5.mxml

<?xml version="1.0" encoding="utf-8"?>
<ItemRenderer xmlns="http://ns.adobe.com/mxml/2009"
              xmlns:mx="library:adobe/flex/halo"
              height="32" height.selected="98">
 
    <states>
        <State name="normal" />
        <State name="hovered" />
        <State name="selected" />
    </states>
 
    <transitions>
        <mx:Transition fromState="selected">
            <mx:Sequence>
            <mx:Parallel>
                <Fade target="{details}" />
                <Resize target="{this}" />
            </mx:Parallel>
            <RemoveAction target="{details}" />
            </mx:Sequence>
        </mx:Transition>
        <mx:Transition toState="selected">
            <mx:Parallel>
                <Fade target="{details}" />
                <Resize target="{this}" />
            </mx:Parallel>
        </mx:Transition>
    </transitions>
 
    <content>
 
        <Group height="32" left="0" right="0">
            <Rect bottom="0" top="0" left="0" right="0" radiusX="5" radiusY="5">
                <stroke>
                    <SolidColorStroke color="#1a2953" weight="2" />
                </stroke>
                <fill>
                    <SolidColor color="#cccccc" alpha="0" alpha.hovered="0.5" />
                </fill>
            </Rect>
            <TextGraphic verticalCenter="0" left="10" right="0"
                         fontWeight="bold" fontSize="22">
                {data.lastName}, {data.firstName}
            </TextGraphic>
        </Group>
 
        <Group id="details" bottom="0" top="36" left="0" right="0"
               layout="flex.layout.HorizontalLayout" includeIn="selected">
            <Group width="50" height="66">
                <Rect bottom="0" top="0" left="0" right="0">
                    <stroke>
                        <SolidColorStroke color="#ccccaa" weight="2" />
                    </stroke>
                    <fill>
                        <SolidColor color="#ffaaaa" alpha="0" alpha.hovered="0.5" alpha.selected="1" />
                    </fill>
                </Rect>
            </Group>
            <Group height="66">
                <Rect bottom="0" top="0" left="0" right="0">
                    <stroke>
                        <SolidColorStroke color="#ccccaa" weight="2" />
                    </stroke>
                    <fill>
                        <SolidColor color="#ffaaaa" alpha="0" alpha.hovered="0.5" alpha.selected="1" />
                    </fill>
                </Rect>
                <Group verticalCenter="0" width="60">
                    <TextGraphic top="0" left="0" right="0" fontSize="14"
                                 textAlign="right" fontWeight.selected="bold">
                        phone
                    </TextGraphic>
                    <TextGraphic top="20" left="0" right="0" fontSize="14"
                                 textAlign="right" fontWeight.selected="bold">
                        website
                    </TextGraphic>
                </Group>
                <Line x="64" yFrom="4" yTo="62">
                    <stroke>
                        <SolidColorStroke color="#ccccaa" weight="2" />
                    </stroke>
                </Line>
                <Group verticalCenter="0" left="68" right="0">
                    <TextGraphic fontSize="14">{data.phone}</TextGraphic>
                    <TextGraphic top="20" fontSize="14">{data.website}</TextGraphic>
                </Group>
            </Group>
        </Group>
 
    </content>
 
</ItemRenderer>

The keys here were to:

  • specify a height.selected for the item renderer so the entire renderer would resize when the details Group is removed
  • use the halo Transition, Sequence, and Parallel classes since these alternatives aren’t present (to my knowledge yet) in Gumbo

And as usual, here’s the source and SWF.

I hope everyone’s enjoying their Gumbo!

]]> http://blog.smartlogicsolutions.com/2008/08/23/recreating-ely%e2%80%99s-flex-4-list-component-series-part-3-adding-transitions/feed/ 4 Recreating Ely’s Flex 4 List Component Series: Part 2 http://blog.smartlogicsolutions.com/2008/08/19/recreating-ely%e2%80%99s-flex-4-list-component-series-part-2/ http://blog.smartlogicsolutions.com/2008/08/19/recreating-ely%e2%80%99s-flex-4-list-component-series-part-2/#comments Tue, 19 Aug 2008 06:20:41 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=154 In Part 1 of this series we learned how to create an ItemRenderer for a List in Flex 4. I wanted to get through 2 steps tonight, but only have the code for the next step finished. This code creates the item renderer seen at ~4:20 of Ely’s video.

Step 3: A More Interesting Item Renderer

Most of the work in this step is done in the item renderer, so we’ll just blow through the Application and List skin quickly. The only thing that has changed in the Application file is specifying the new skin and item renderer:

ElysList3.mxml

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009">
 
    <Script>
        <![CDATA[       
            [Bindable]
            private var customers:Array = [
                {id: 1, firstName: "Greg", lastName: "Jastrab", phone: "123-456-7890", website: "http://www.smartlogicsolutions.com"},
                {id: 2, firstName: "John", lastName: "Appleseed", phone: "234-567-8901", website: "http://www.slsis.com"}
            ];          
        ]]>         
    </Script>
 
    <Style>
        List { skinZZ: ClassReference("skins.ListSkin3"); }
    </Style>
 
    <List bottom="20" top="10" left="10" right="20" itemRenderer="skins.ItemRenderer3">
        {customers}
    </List>
 
</Application>

For the skin of the list I’ve only changed the border and some positioning:

skins/ListSkin3.mxml

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
    <Rect bottom="0" top="0" left="0" right="0" radiusX="5" radiusY="5">
        <stroke>
            <SolidColorStroke color="#030303" weight="2" />
        </stroke>
    </Rect>
 
    <Group id="contentGroup" bottom="5" top="5" left="5" right="5"
           layout="flex.layout.VerticalLayout" />
 
</Skin>

Finally, we get to the meaty part…a bunch of FXG tags. The new item renderer has the name up top, an area for an image/icon to below the name and to the left, and the phone and website to the right of the image area. The two areas below the name will have a background color appear when the item is hovered or selected, and the phone and website labels will become bold in the selected state:

skins/ItemRenderer3.mxml

<?xml version="1.0" encoding="utf-8"?>
<ItemRenderer xmlns="http://ns.adobe.com/mxml/2009">
 
    <states>
        <State name="normal" />
        <State name="hovered" />
        <State name="selected" />
    </states>
 
    <content>
 
        <Group height="32" left="0" right="0">
            <Rect bottom="0" top="0" left="0" right="0" radiusX="5" radiusY="5">
                <stroke>
                    <SolidColorStroke color="#1a2953" weight="2" />
                </stroke>
            </Rect>
            <TextGraphic verticalCenter="0" left="10" right="0"
                         fontWeight="bold" fontSize="22">
                {data.lastName}, {data.firstName}
            </TextGraphic>
        </Group>
 
        <Group bottom="0" top="36" left="0" right="0" layout="flex.layout.HorizontalLayout">
            <Group width="50" height="66">
                <Rect bottom="0" top="0" left="0" right="0">
                    <stroke>
                        <SolidColorStroke color="#ccccaa" weight="2" />
                    </stroke>
                    <fill>
                        <SolidColor color="#ffaaaa" alpha="0" alpha.hovered="0.5" alpha.selected="1" />
                    </fill>
                </Rect>
            </Group>
            <Group height="66">
                <Rect bottom="0" top="0" left="0" right="0">
                    <stroke>
                        <SolidColorStroke color="#ccccaa" weight="2" />
                    </stroke>
                    <fill>
                        <SolidColor color="#ffaaaa" alpha="0" alpha.hovered="0.5" alpha.selected="1" />
                    </fill>
                </Rect>
                <Group verticalCenter="0" width="60">
                    <TextGraphic top="0" left="0" right="0" fontSize="14"
                                 textAlign="right" fontWeight.selected="bold">
                        phone
                    </TextGraphic>
                    <TextGraphic top="20" left="0" right="0" fontSize="14"
                                 textAlign="right" fontWeight.selected="bold">
                        website
                    </TextGraphic>
                </Group>
                <Line x="64" yFrom="4" yTo="62">
                    <stroke>
                        <SolidColorStroke color="#ccccaa" weight="2" />
                    </stroke>
                </Line>
                <Group verticalCenter="0" left="68" right="0">
                    <TextGraphic fontSize="14">{data.phone}</TextGraphic>
                    <TextGraphic top="20" fontSize="14">{data.website}</TextGraphic>
                </Group>
            </Group>
        </Group>
 
    </content>
 
</ItemRenderer>

And the result:

Screenshot of Ely\'s List: Step 3

Screenshot of Ely's List: Step 3


The next steps will be fun. We’ll spruce up the item renderer even more, and add some animation so the list behaves more like an Accordion than a list.

As usual, here is the source and SWF.

I hope everyone’s enjoying their Gumbo!

]]> http://blog.smartlogicsolutions.com/2008/08/19/recreating-ely%e2%80%99s-flex-4-list-component-series-part-2/feed/ 10