SmartLogic Solutions Blog » FXG 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 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 Recreating Ely’s Flex 4 List Component Series http://blog.smartlogicsolutions.com/2008/08/16/recreating-elys-flex-4-list-component-series/ http://blog.smartlogicsolutions.com/2008/08/16/recreating-elys-flex-4-list-component-series/#comments Sat, 16 Aug 2008 06:35:54 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=136 If you haven’t seen Ely’s video on Adobe TV about improving the designer/developer workflow (which is an updated version of what he infamously previewed at MAX last year), you should probably check that out to see what the goal of this series is.

I’m going to attempt to go through the steps and recreate what he demonstrated, which was to take a simple list and iteratively transform it into a rich, accordion-like interactive list. To get started, be sure that you’re setup to compile Flex 4 code and that you have Flash Player 10. Here we go…

Step 1: The Boring List

We need a starting point, so first let’s get a boring old list going.

ElysList.mxml

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009">
 
    <List width="300" height="400">
        <Array>
            <String>something</String>
            <String>something else</String>
        </Array>
    </List>
 
</Application>

Compile and run this, and you should see:

Screenshot of Ely\'s List: Step 1

Screenshot of Ely's List: Step 1

Looks marvelous, doesn’t it? Let’s go for step 2, which is to add a border and to make the data in the list some objects rather than just an array of strings.

Step 2: List Using Objects for Data and Adding a Border

The application file for step 2 is still kinda boring. Here we’ll just make a bindable array of object data and specify a skin file for the List, as well as an item renderer the items in the list should use.

ElysList2.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.ListSkin2"); }
    </Style>
 
    <List bottom="20" top="10" left="10" right="20" itemRenderer="skins.ItemRenderer2">
        {customers}
    </List>
 
</Application>

Let’s checkout the skin for the List:

skins/ListSkin2.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="8" radiusY="8">
        <stroke>
            <SolidColorStroke color="#ccccaa" weight="2" />
        </stroke>
    </Rect>
 
    <Group id="contentGroup" bottom="5" top="5" left="10" right="10"
           layout="flex.layout.VerticalLayout" />
 
</Skin>

Here we use some new FXG tags to draw the border around the list, and then place the container which will hold the elements of the list within that border.

IMPORTANT: The ID of the group is not arbitrary. If you look inside the flex.component.ItemsComponent class (which List is a descendant of) you will find a SkinPart being declared for the contentGroup variable that is typed as Group:

[SkinPart]
public var contentGroup:Group;

This means the skin file must include a Group with an ID of contentGroup where the item renderers within the list will be placed. Speaking of item renderers, that brings us to the last piece of step 2.

skins/ItemRenderer2.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>
        <Rect bottom="0" top="0" left="0" right="0">
            <fill>
                <SolidColor color="#0000ff" alpha="0" alpha.hovered="0.2" alpha.selected="0.8" />
            </fill>
        </Rect>
        <Group id="contentHolder" bottom="3" top="3" left="0" right="0"
               layout="flex.layout.HorizontalLayout">
            <TextGraphic fontSize="20" fontWeight="bold">{data.lastName},</TextGraphic>
            <TextGraphic fontSize="20" fontWeight="bold">{data.firstName}</TextGraphic>
        </Group>
    </content>
 
</ItemRenderer>

Here we have specified an ItemRenderer with 3 states (normal/hovered/selected). We’ve added a solid background which will change its alpha value depending on the view state. And finally we added 2 pieces of text so we will see “Lastname, Firstname” in the list.

Compile ElysList2.mxml and you should see:

Screenshot of Ely\'s List: Step 2

Screenshot of Ely's List: Step 2

Later this week I’ll tackle the next steps, but hopefully this will keep some of you busy over the weekend.:)

Oh, and here is the source so you won’t have to retype all of the above: Ely\’s List Steps 1-2

Enjoy your Gumbo!

]]> http://blog.smartlogicsolutions.com/2008/08/16/recreating-elys-flex-4-list-component-series/feed/ 1 Skinning A Button in Flex 4 Using FXG http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/ http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comments Wed, 16 Jul 2008 06:01:36 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/ In yesterday’s post I walked through how I got the Flex 4 SDK setup, compiled, and ran the first Hello World application in Flex 4. I said I would follow up today with skinning a Button using the new declarative graphics tags known as FXG (previously referred to as MXML-G), so here we are.

Today I want to explore using the new layout property as well as using a Skin file to describe how the button should look. Let’s get started…

This project will have 3 files:

  1. NewSkinning.mxml – main application containing 2 buttons
  2. MyButtonSkin.mxml – first custom button skin
  3. OtherSkin.mxml – circular button skin

NewSkinning.mxml

UPDATE: Removed xmlns:mx="library:adobe/flex/halo" and changed <mx:Style> to <Style> as pointed out by Peter.

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009"
             layout="flex.layout.VerticalLayout"
             backgroundColor="gray">
 
    <Style>
        Button { skinZZ: ClassReference("MyButtonSkin"); }
        .otherButton { skinZZ: ClassReference("OtherSkin"); }
    </Style>
 
    <Button label="Hello World" />
 
    <Button styleName="otherButton" label="Hello World 2" />
 
</Application>

Two things to note here are that you cannot include two language namespaces in the same file. If you replace “library:adobe/flex/halo” with “http://www.adobe.com/2006/mxml” you will get an error when trying to compile the application:

/Developer/Applications/Flex/test4/new_skinning/NewSkinning.mxml(5): col: 28
Error: Only one language namespace must be specified per document.
Found 'http://ns.adobe.com/mxml/2009' and 'http://www.adobe.com/2006/mxml'.

UPDATE: You can ignore this if you’re using the updated code, but I’ll leave this in here in case people search for the compiler error above.

Secondly, you’ll notice a new attribute from my code from yesterday: layout, which is assigned a new class value. Layout in Flex 4 can be handled separately from the view if you don’t want to use absolute positioning. The layout="flex.layout.VerticalLayout" will tell the Application to use the flex.layout.VerticalLayout class to layout the children.

At first, this may not seem like a big deal, since you could define vertical or horizontal layout in an Application in Flex 3, but this now carries through to all classes, and it is easy to simply write a new layout class and assign that to the layout property if you want to write some custom layout code yourself. Notice the skinZZ property in the CSS is used to assign the view class for the Button components. Now let’s check out the Skin files.

MyButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
    <states>
        <State name="up" />
        <State name="over" />
        <State name="down" />
        <State name="disabled" />
    </states>
 
    <content>
 
        <Rect left="0" right="0" top="0" bottom="0" minWidth="100" minHeight="40">
            <stroke>
                <SolidColorStroke color="0x020202" color.over="0xFF00FF" />
            </stroke>
            <fill>
                <SolidColor color="white" color.over="gray" color.down="0xFF0562" />
            </fill>
        </Rect>
 
        <TextBox text="{data.label}" fontFamily="Arial" fontSize="12"
                 color="0xFF0000" color.disabled="0xC0C0C0"
                 color.over="0x0000FF" color.down="0x00FF00"
                 left="10" right="10" top="4" bottom="2"
                 textAlign="center" verticalAlign="middle" />
 
    </content>
 
</Skin>

OtherSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
    <states>
        <State name="up" />
        <State name="over" />
        <State name="down" />
        <State name="disabled" />
    </states>
 
    <content>
        <Ellipse width="50" height="30">
            <fill>
                <SolidColor color="blue" color.over="red" color.down="white" />
            </fill>
        </Ellipse>
    </content>
 
</Skin>

Compile and run the app and you should see:

NewSkinning Screenshot

NewSkinning Screenshot

NOTE: If you are on Windows and having problems compiling, look at the comment that Sherif left in my previous post.

]]> http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/feed/ 15 Compiling Your First Flex 4 Application http://blog.smartlogicsolutions.com/2008/07/15/compiling-your-first-flex-4-application/ http://blog.smartlogicsolutions.com/2008/07/15/compiling-your-first-flex-4-application/#comments Tue, 15 Jul 2008 07:57:09 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/2008/07/15/compiling-your-first-flex-4-application/ Big news today in the world of Flex! The first push of the Flex 4 source was made this afternoon (and another push was made this evening). Additionally, a lot of documentation was added to the Adobe Open Source site regarding Flex 4 (code-named “Gumbo”). Reading through the Architecture Whitepaper will leave you with a great handle around where things stand and the current direction Flex is headed.

To reward myself for reading through all of those docs this evening, I decided it would be appropriate to try to test out the new code and make my first Flex 4 application…

Step 1: Get the Latest SDK

First we’ll need to get the latest SDK. You can either download the SDK under the “Adobe Flex SDK” column on the download page listed above, or checkout the source yourself:

svn checkout http://opensource.adobe.com/svn/opensource/flex/sdk/trunk

I’ll refer to the location you’ve put the SDK to on your disk as ${FLEX4} throughout the rest of this post.

Follow the instructions on the Setup (links to Windows/Mac/Linux pages are at the bottom) and Build and Test pages to ensure the compiler is working on your system.

Assuming everything compiled and ran correctly when you did the 

ant -q checkintests

command, you’re ready for the next step.

Step 2: Flex 4 – First App

Now that the SDK is setup, we’re ready to make our first Flex 4 application. First, I wanted to check out the new FXG tags, so let’s get a simple rectangle working first (this will look familiar if you’ve been playing with Degrafa):

Flex4App.mxml:

<Application xmlns="http://ns.adobe.com/mxml/2009"
             backgroundColor="red">
  <Group>
    <Rect left="20" top="20" width="100" height="100">
      <stroke>
        <SolidColorStroke color="0x00FF00" />
      </stroke>
      <fill>
        <SolidColor color="0x09BDFC" />
      </fill>
    </Rect>
  </Group>
</Application>

Assuming you’re in the current directory that Flex4App.mxml is sitting in:

Run: ${FLEX4}/bin/mxmlc Flex4App.mxml

This should compile your code and if successful will create a Flex4App.swf file. To run it using the Flash Player 10 (since Flex 4 targets this player):

Run (if you’re on Mac): ${FLEX4}/in/player/mac/Flash Player.app/Contents/MacOS/Flash Player Flex4App.swf

If you’re on Windows or Linux, look in the ${FLEX4}/build.xml ANT script at lines 26 and 34 to see the path to the 10 player on those systems.

Assuming all went well you should see something like:

Flex4App Screenshot

Flex4App Screenshot

Step 3: Flex 4 – Hello World!

For our final step, let’s throw in a button saying “Hello World”.

HelloWorld.mxml:

<Application xmlns="http://ns.adobe.com/mxml/2009"
             backgroundColor="red">
  <Group>
    <Rect left="20" top="20" width="100" height="100">
      <stroke>
        <SolidColorStroke color="0x00FF00" />
      </stroke>
      <fill>
        <SolidColor color="0x09BDFC" />
      </fill>
    </Rect>
  </Group>
 
  <Button left="20" bottom="5" label="Hello World" />
</Application>

Compile and run those…

${FLEX4}/bin/mxmlc HelloWorld.mxml
${FLEX4}/in/player/mac/Flash Player.app/Contents/MacOS/Flash Player HelloWorld.swf

and you should see

HelloWorld Screenshot

HelloWorld Screenshot

More Fun To Come…

Tomorrow or the next day I’ll try to play around with skinning a Button using a Skin file and get another post up regarding it. Happy Flex 4′ing!

]]> http://blog.smartlogicsolutions.com/2008/07/15/compiling-your-first-flex-4-application/feed/ 16