SmartLogic Solutions Blog » Flex 4

Flex 4 Login Form Component

Greg Jastrab — Thu, 28 May 2009 16:59:08 +0000

It’s been a while since I’ve gotten to blog about Flex 4/Gumbo, and with some exciting news likely coming tomorrow I figured it was time to get back on track. I wanted to think of an example of something that may be frequently used across Flex/AIR projects that will greatly benefit from the Flex 4 architecture and a Login Form seemed like a good place to start. So today we’ll review a Login Form component I created in Flex 4. Follow the link to checkout the code from GitHub.

NOTE: This code was compiled using the 7297 revision of the Gumbo SDK trunk.

The LoginForm component extends SkinnableComponent and defines the 3 states (login, loggingIn, and loggedIn) & various skin parts. Lets dive into the example skin for the component.

com.smartlogicsolutions.skins.LoginFormSkin

 version="1.0" encoding="utf-8"?>
 xmlns="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
 
  >
    [HostComponent("com.smartlogicsolutions.components.LoginForm")]
  >
 
  >
     name="login" />
     name="loggingIn" stateGroups="notLogin" />
     name="loggedIn" stateGroups="notLogin" />
  >
 
  >
 
     left="0" right="0" verticalAlign="middle">
 
       id="loginFieldLabel" fontWeight="bold" />
 
       id="loginField" enabled.notLogin="false"  />
 
    >
 
     left="0" right="0" verticalAlign="middle">
 
       id="passwordFieldLabel" fontWeight="bold" />
 
       id="passwordField" enabled.notLogin="false" />
 
    >
 
     id="loginButton" label="Login" enabled.notLogin="false" />
 
     id="loginMessage" excludeFrom="login"
                  text="{hostComponent.loginMessageLabel}" />
 
  >
 
>

The skin provides the essentials for a login form: labels, input boxes, a button, and a label to display what is going on. This skin provides all of the skin parts the LoginForm may display. Of course, the only things a login form must have are the input fields and a button, so these are the only required parts of the component, as seen in this excerpt of the LoginForm component:

(excerpt) com.smartlogicsolutions.components.LoginForm

[SkinPart]
public var loginButton:Button;
 
[SkinPart]
public var loginField:TextInput;
 
[SkinPart]
public var passwordField:TextInput;

The labels are all decorated as being optional with the [SkinPart(required="false")] metadata, so any custom skin you provide for the Login Form doesn’t have to include the labels if you don’t desire.

Once you click the login button, the component puts itself into the loggingIn state and an associated event is dispatched. At this point you would call your service to execute the login, and eventually notify the form the result of the login action. So as for now, in this version of the component, you’ll need to explicitly call loginSucceeded() or loginFailed() on the LoginForm instance to signal the result.

Since this is a Flex 4 component, and the view & layout is decoupled from the LoginForm itself, it’s dead simple to re-purpose this component across various applications and apply drastically different styles and layouts for all of them. And the only thing that needs to happen is creating another Skin, and specifying that skin when including the LoginForm in your application. Look at the test application file that comes with this component to see how the skin is connected to the form:

TestLoginApplication.mxml

 version="1.0" encoding="utf-8"?>
 xmlns="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:sls="com.smartlogicsolutions.components.*">
 
  >
    private function enableButtons(doEnable:Boolean):void {
      btn.enabled = failBtn.enabled = doEnable;
    }
  >
 
  >
     />
  >
 
   id="loginForm"
                 skinClass="com.smartlogicsolutions.skins.LoginFormSkin"
                 loginLabel="Login:" loggedInMessage="Sweet, logged in!"
                 login="enableButtons(true)" />
 
  >
 
     id="btn" label="Set Login Success" enabled="false"
              click="loginForm.loginSucceeded(); enableButtons(false)" />
 
     id="failBtn" label="Set Login Failed" enabled="false"
              click="loginForm.loginFailed(); enableButtons(false)" />
 
     id="updateLoggingInMessage" label="Update Logging In Message"
              click="loginForm.loggingInMessage = 'Trying to login'" />
  >
 
>

The skinClass property of the LoginForm component will register a skin with the component. In the future, this component would be bundled into a SWC that would apply the skin I’ve provided by default, but for now you’ll need to explicitly apply a skinClass to the component.

I haven’t figured out how to properly embed Flash 10 SWFs in wordpress w/o breaking the page for users that don’t have it installed, but click through to see the TestLoginApplication in action.

Future features of this component and example will include:

validations on the input fields
FlexUnit4 tests
transitions between the states to demo some Spark effects
an extended RegistrationForm class

Enjoy!

Advanced CSS in Flex 4 – ID and Descendant Selectors

Greg Jastrab — Wed, 22 Oct 2008 00:39:41 +0000

NOTE: View my comment below for updated code on making this work with the latest SDK (as of 5/25/09).

A few days ago one of the commit messages in the Gumbo trunk mentioned some work for advanced CSS was beginning. I tried to create an example of using a descendant selector as well as an ID selector, but neither worked.

Tonight, another commit message said that this was now in place by default (I guess it would have worked earlier, but I needed to be specify a compiler argument). But now, after rebuilding the latest checkout of Gumbo you should now be able to compile the following example to see the advanced CSS selectors working. Below is the SWF (you’ll need Flash Player 10 to view it) and the code follows:

[flash http://blog.smartlogicsolutions.com/wp-content/uploads/2008/10/CSSExample.swf]

CSSExample.mxml

 version="1.0" encoding="utf-8"?>
 xmlns="http://ns.adobe.com/mxml/2009">
 
    > />>
 
     source="descendants.css" />
 
    >
        >Text in a VGroup>
    >
 
    >
         id="red">Text in an HGroup>
    >
 
>

Standard so far, now let’s see the CSS with the advanced selectors:

descendants.css

VGroup TextView {
    font-size: 24pt;
}
 
HGroup TextView {
    text-decoration: underline;
}
 
#red {  
    color: #ff0000;
}

Flex 4 is now fully demonstrating the Cascading part of CSS. (You may need to review CSS selectors syntax.) NOTE: I don’t know how much of the CSS spec is going to be supported in Flex 4, and am not suggesting that everyone of the selectors at the CSS selectors page will be available in Flex 4.

The VGroup TextView selector targets any TextView instances which are a child of a VGroup. #red selector targets instances with an ID of “red”.

As usual, here is the bundled source and SWF.

I hope everyone’s enjoying their Gumbo!

New Flex 4 Theme and Class Renaming

Greg Jastrab — Thu, 09 Oct 2008 04:30:18 +0000

NOTE: See my comment below about updating this example until I have the chance to.

A few times a day I update my subversion checkout of the Gumbo trunk. Last night I noticed a major overhaul which renamed all the Flex 4 classes, repackaged them into the mx package instead of flex. The new classes are now all (at least temporarily) prefixed with Fx, so if you are trying to compile your previously working Flex 4 code against the up-to-date SDK and suddenly see the following error:

Error: Could not resolve > to a component implementation.

your issue will be resolved by changing Application to FxApplication. You’ll need to do the same for most of the other Flex 4 controls (Group, VGroup, and HGroup are exceptions that don’t need to be prefixed with Fx).

Spark Theme

You may also notice the new spark folder added in the skins directory. Below is an example application showing what these new skins look like for some of the Gumbo components:

[flash /wp-content/uploads/2008/10/spark_controls.swf]

As usual here is the code:

FxControls.mxml

"1.0" encoding="utf-8"?>
"http://ns.adobe.com/mxml/2009">
 
    "0" verticalCenter="0">
 
        "Button" />
 
        "Check Box" />
 
        "Radio Button" />
 
        />
 
        />
 
        />
 
        />
 
    >
 
>

Remember, you’ll need Flash Player 10 in order to run this SWF after you’ve compiled it.

I hope everyone’s enjoying their Gumbo!

Rotate Effect and Non Embedded Fonts in Flex 4

Greg Jastrab — Fri, 26 Sep 2008 03:10:55 +0000

One big improvement in Flash Player 10 is that fonts no longer need to be embedded in order to rotate text or alter it’s alpha. Below is a simple example demonstrating both of these features by using the Rotate and Fade effects in Flex 4.

[flash /wp-content/uploads/2008/09/rotate_and_fade.swf]

Check out how simple the code is below!

TestRotate.mxml

"1.0" encoding="utf-8"?>
"http://ns.adobe.com/mxml/2009">
 
    >
        "r" target="{btn}" angleTo="360" />
        "a" target="{btnAlpha}"
              alphaFrom="1" alphaTo="0" duration="3000" />
    >
 
    "0" verticalCenter="0">

Some changes to Gumbo since I’ve last posted:

Non visual items must go in a Declarations block (see MXML 2009 spec)
There are now HGroup and VGroup convenience classes so you can save some typing by not specifying the layout property

I hope everyone’s enjoying their Gumbo!

Recreating Ely’s Flex 4 List Component Series: Part 3 – Adding Transitions

Greg Jastrab — Sat, 23 Aug 2008 05:00:57 +0000

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!

Recreating Ely’s Flex 4 List Component Series: Part 2

Greg Jastrab — Tue, 19 Aug 2008 06:20:41 +0000

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

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!

Recreating Ely’s Flex 4 List Component Series

Greg Jastrab — Sat, 16 Aug 2008 06:35:54 +0000

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>somethingString>
            <String>something elseString>
        Array>
    List>
 
Application>

Compile and run this, and you should see:

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

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!

SmartLogic Solutions Blog » Flex 4

Flex 4 Login Form Component

com.smartlogicsolutions.skins.LoginFormSkin

(excerpt) com.smartlogicsolutions.components.LoginForm

TestLoginApplication.mxml

Related Posts:

Advanced CSS in Flex 4 – ID and Descendant Selectors

CSSExample.mxml

descendants.css

Related Posts:

New Flex 4 Theme and Class Renaming

Spark Theme

FxControls.mxml

Related Posts:

Rotate Effect and Non Embedded Fonts in Flex 4

TestRotate.mxml

Related Posts:

Recreating Ely’s Flex 4 List Component Series: Part 3 – Adding Transitions

Step 4: Add Accordion-like Selection Transitions

skins/ItemRenderer5.mxml

Related Posts:

Recreating Ely’s Flex 4 List Component Series: Part 2

Step 3: A More Interesting Item Renderer

ElysList3.mxml

skins/ListSkin3.mxml

skins/ItemRenderer3.mxml

Related Posts:

Recreating Ely’s Flex 4 List Component Series

Step 1: The Boring List

ElysList.mxml

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

ElysList2.mxml

skins/ListSkin2.mxml

skins/ItemRenderer2.mxml

Related Posts: