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

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

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

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

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!

Expected response to be a <:redirect>, but was <500>
<"No HTTP_REFERER was set in the request to this action, so
redirect_to :back could not be called successfully. If this
is a test, make sure to specify
request.env[\"HTTP_REFERER\"].">

What a lovely error message to send me on a goose chase trying to set HTTP_REFERER directly on the @request as instructed.

Did Not Work

@request.env["HTTP_REFERER"] = '/'
post upload_path, { :file => fixture_file_upload("worddoc.docx", "application/msword") },
  { :html => {:multipart => true} }
assert_redirected_to '/', 'index'

This continued to spit out the same error. I finally stumbled across a post back from 2006 that held the answer. The HTTP_REFERER is not set the same way in an integration test:

Success!

post upload_path, { :file => fixture_file_upload("worddoc.docx", "application/msword") },
  { :html => {:multipart => true}, :referer => '/' }
assert_redirected_to '/', 'index'

Hope that saves anyone else some time if you encounter this error.

$> gem update puremvc-gen

to get the new version. If you’re installing for the first time, refer to the original blog post for instructions.

When trying to run git-svn to import my subversion repository into git I got the following error, followed by a Perl stack trace:

Can't locate Term/ReadKey.pm

A couple of installs got this working, read on…

Install Term::ReadKey

To install Term::ReadKey, fire up a terminal and type (you may need to sudo):

$> perl -MCPAN -e shell
cpan> install Term::ReadKey

After a bunch of output I got the error message:

Writing Makefile for Term::ReadKey
    -- NOT OK
Running make test
  Can't test without successful make
Running make install
  make had returned bad status, install seems impossible

I tried to see what was wrong with the Makefile by trying to run make in the TermKey folder:

~/.cpan/build/TermReadKey-2.30 $> make
-bash: make: command not found

Interesting, didn’t realize OS X came preinstalled with things like perl but not make.

Getting make on OS X

I’m sure there’s an easier way to just get make on OS X, but I’m still new to my mac, so I wanted to install something supported by Apple instead of getting into stuff like ports. After searching around on the Developer center I found that XCode includes make.

After signing up for a free developer account and installing XCode, I now had make.

Installing Term::ReadKey – round 2

Let’s try this again…

$> perl -MCPAN -e shell
cpan> install Term::ReadKey
 
CPAN: Storable loaded ok
Going to read /Users/greg/.cpan/Metadata
  Database was generated on Wed, 10 Dec 2008 11:26:54 GMT
Term::ReadKey is up to date.

Hurray! Now git-svn is working on OS X.

Other relevant Mac/Git links:

• Git Installer for OS X
• Git Crash Course for SVN Users

Related Posts:

• Displaying an Image in a ComboBox
• Setting Up Ubuntu 9.10 for Ruby On Rails Development
• Introducing environmentalist: an intuitive, environment-focused config structure for your rails applications
• Introducing PureMVCGen – an ANT based PureMVC Flex Generator
• Subversion Timestamps + Capistrano finalize_update
• Powered by Contextual Related Posts
]]> http://blog.smartlogicsolutions.com/2008/12/10/getting-git-svn-to-run-on-os-x/feed/ 0 http://blog.smartlogicsolutions.com/2008/12/05/introducing-puremvcgen-an-ant-based-puremvc-flex-generator/ http://blog.smartlogicsolutions.com/2008/12/05/introducing-puremvcgen-an-ant-based-puremvc-flex-generator/#comments Fri, 05 Dec 2008 21:47:04 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=409 just denotes you are [...]]]> I just published a PureMVC code generation tool I’ve been working on lately. It’s an ANT-based tool, but is distributed via Ruby Gems, which allows it to be easily installed as a command-line tool once you have Ruby, rubygems, and ANT installed.

Once you have those programs installed, simply enter ($> just denotes you are at a prompt on the command line)

$> gem install puremvc-gen

and the tool will be installed. Read on to see how to use it…

Project Settings

Presently, there is one bit of configuration housekeeping that must be done to get started using the tool. Within the source directory of your project you will need to add a proj.properties file containing 5 property settings:

• app.prefix => what to prefix your Facade and application Mediator with
• project.name => the name of your main MXML file
• core.namespace => the namespace of the project
• core.dir => the directory corresponding to the namespace (this will eventually be inferred from core.namespace)
• pmvc.flavor => standard | multicore (although only standard is currently supported)

An example configuration for a project called MyDemo using the namespace com.mydemo.demo would look like:

Example proj.properties

app.prefix = Demo
project.name = MyDemo
core.namespace = com.mydemo.demo
core.dir = com/mydemo/demo
pmvc.flavor = standard

Using PureMVCGen

Validating Project Properties

If you are starting a new PureMVC project and you have the proj.properties file created in the source directory:

$> puremvc-gen check

will ensure that the properties are correctly set. If they have been, at the end of the ANT output, you should see:




Display showing properties have been validated

Generating the PureMVC Skeleton

To generate the PureMVC directories, main MXML file, Facade, main Mediator, StartupCommand, and PrepareActorsCommand classes, simply enter:

$> puremvc-gen init

After this was run successfully the directory hierarchy will look something like this:




PureMVC skeleton generated from demo project properties

Other Commands

I haven’t created any online documentation yet, but the tool has fairly decent instructions on the command line.

$> puremvc-gen help


A quick rundown of the command, proxy, and mediator generation commands:

• puremvc-gen new command => generates a simple command
• puremvc-gen new command -m (or –macro) => generates a macro command
• puremvc-gen new mediator => generates a mediator
• puremvc-gen new proxy => generates a proxy

All of these generation commands may be passed a -n option to specify the name for the class on the command line. Otherwise, ANT will prompt you to input the name.

Where to Git It

The project is hosted at github so feel free to checkout the source. I’ll update the README file eventually so that front page will have documentation as well.

The gem is also hosted at RubyForge so you can download it there if you’d like to build it manually.

The GitHub page will eventually include a Roadmap for planned features, but please comment here with any suggestions you may have.

Finally, if you’re averse to Ruby you can always download the conf/ directory of the project, and manually run the ANT commands. They are a bit more cryptic though, which is why the gem and executable it provides are nice, however it should output instructions on what settings need to be made to run it manually.

Enjoy!

Related Posts:

• PureMVCGen 0.1.1 Released – Now Works on Windows
• Compiling Your First Flex 4 Application
• Watch Multiple Logs in a Single Terminal
• Getting Subclipse to Work in Gandymede (Eclipse 3.4)
• Facebox With Prototype
• Powered by Contextual Related Posts
]]> http://blog.smartlogicsolutions.com/2008/12/05/introducing-puremvcgen-an-ant-based-puremvc-flex-generator/feed/ 9 http://blog.smartlogicsolutions.com/2008/12/01/displaying-an-image-in-a-combobox/ http://blog.smartlogicsolutions.com/2008/12/01/displaying-an-image-in-a-combobox/#comments Mon, 01 Dec 2008 16:17:53 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=392 I needed to display an Image inside of a ComboBox for a recent project. The image of a selectedItem needed to appear in the ComboBox when it is collapsed and the image needed to be specified as a String.

I was surprised that a quick search didn’t find any components to allow this. The closest was a post by Jason Hawryluk, however this required the image to be embedded into the application.

So I simply extended ComboBox to include an Image within it, and added some sizing calculations so it would respect padding. An example follows below:


[flash http://blog.smartlogicsolutions.com/wp-content/uploads/2008/11/ImageComboBox.swf H=150]

The ImageComboBox class

1. Adds an Image in the createChildren method
2. Measures the available size the image can take up in the measure method
3. In the updateDisplayList method, if an item is selected:
1. Sets the source for the Image
2. Places and sizes the Image based on calculations from measure

In order to prevent the ComboBox from displaying “[object Object]” along with the image, be sure to include a label=”" property on the items in the dataProvider for the ComboBox. The following code is the MXML main file for the embedded SWF above:

Example MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	            xmlns:sls="com.slslabs.flex.controls.*">
 
	<mx:Label text="This demonstrates using the ImageComboBox" />
 
	<sls:ImageComboBox width="60" paddingLeft="5" paddingTop="5" paddingBottom="5">
		<sls:dataProvider>
			<mx:Object url="http://www.iconarchive.com/icons/iconshock/mario-bros/mario-32x32.png" label="" />
			<mx:Object url="http://www.iconarchive.com/icons/iconshock/mario-bros/luigui-32x32.png" label="" />
			<mx:Object url="http://www.iconarchive.com/icons/iconshock/mario-bros/start-32x32.png" label="" />
		</sls:dataProvider>
		<sls:itemRenderer>
			<mx:Component>
				<mx:Image source="{data.url}" />
			</mx:Component>
		</sls:itemRenderer>
	</sls:ImageComboBox>
 
</mx:Application>

I pushed the code into my first git repository at github. If you’re a git n00b, then after you’ve installed git (or checked out the Git Eclipse Plugin – which I still need to do) then pull down the code by using the command:

git clone git://github.com/gjastrab/imagecombobox.git

If you aren’t on the git bandwagon yet, then just right-click and save as… to download the ImageComboBox.as file for now.

I plan on improving it soon to have it respect the positioning of a label or to optionally hide the label.

Related Posts:

• Rotate Effect and Non Embedded Fonts in Flex 4
• Flex 4 Login Form Component
• Skinning A Button in Flex 4 Using FXG
• Creating Your First Custom SkinnableComponent in Flex 4
• Creating a Custom Layout Class in Flex 4
• Powered by Contextual Related Posts
]]> http://blog.smartlogicsolutions.com/2008/12/01/displaying-an-image-in-a-combobox/feed/ 3 http://blog.smartlogicsolutions.com/2008/11/17/migrairable-library-added-to-google-code/ http://blog.smartlogicsolutions.com/2008/11/17/migrairable-library-added-to-google-code/#comments Mon, 17 Nov 2008 08:34:16 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=383 I created a Google Code repository for my winning submission to the Adobe AIR Cookbook Cook-off. The MigrAIRable library contains the source, an ANT file to create the SWC, and an example tree to demonstrate how to use it.

If you haven’t read about MigrAIRable yet, it is a solution to allow your serialized data structures to have migrations, so that adding new fields to later versions to your class will not break your serialization when reading older versions of the data.

If you’re at MAX this week, come checkout the session Inside the Adobe AIR Cook-off: The Best Show Off Their Winning Chops where I, along with the two runner-ups, will be panelists.

Related Posts:

• I Won the AIR Cook-off
• Migrating Serialization Changes Within an AIR Application
• Adobe MAX 2008 Registration is Open
• Adobe AIR Alpha Released on Linux
• Adobe onAIR Bus Tour: Baltimore
• Powered by Contextual Related Posts
]]> http://blog.smartlogicsolutions.com/2008/11/17/migrairable-library-added-to-google-code/feed/ 0 http://blog.smartlogicsolutions.com/2008/11/12/presenting-an-intro-to-flex-at-refresh-baltimore-tonight/ http://blog.smartlogicsolutions.com/2008/11/12/presenting-an-intro-to-flex-at-refresh-baltimore-tonight/#comments Wed, 12 Nov 2008 17:03:07 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=374 I’ll be presenting an introduction to Flex tonight at Refresh Baltimore. If you’ve been wondering what Flex is and have been meaning to look into it, this presentation will be right up your alley.

The presentation slides and code will be posted at http://www.smartlogicsolutions.com/wiki/Intro_to_Flex after the presentation.

RSVP at http://www.localist.com/event/6229 if you can make it.

Related Posts:

• Presentation on AMF Using BlazeDS, AMFPHP, RubyAMF, and ColdFusion
• Flex MVC Component Architecture Using OpenFlux
• Certified Adobe Flex 2 Developer
• Google Analytics Event Tracking Overview
• Advanced CSS in Flex 4 – ID and Descendant Selectors
• Powered by Contextual Related Posts
]]> http://blog.smartlogicsolutions.com/2008/11/12/presenting-an-intro-to-flex-at-refresh-baltimore-tonight/feed/ 0 http://blog.smartlogicsolutions.com/2008/10/29/i-won-the-air-cook-off/ http://blog.smartlogicsolutions.com/2008/10/29/i-won-the-air-cook-off/#comments Thu, 30 Oct 2008 02:26:18 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=354 I was waiting to post this until the results were announced which they were today. O’Reilly just posted the winners of the Adobe AIR Cook-off and I’m pleased to say I won the grand prize!

My recipe was Migrating Serialization Changes in AIR. Thanks to anyone who voted for it.

I have a follow-up recipe I haven’t gotten to write up yet, but I’ll try to get it up in the next week. It will provide a solution to add the marker which is required for this serialization to work to the front of your structures if you already have files being serialized in an existing AIR application and you want to start taking advantage of this migration technique.

Related Posts:

• Migrating Serialization Changes Within an AIR Application
• MigrAIRable Library Added to Google Code
• Adobe AIR Alpha Released on Linux
• AIR 1.0 and Flex 3 Released
• Adobe onAIR Bus Tour: Baltimore
• Powered by Contextual Related Posts
]]> http://blog.smartlogicsolutions.com/2008/10/29/i-won-the-air-cook-off/feed/ 3 http://blog.smartlogicsolutions.com/2008/10/21/advanced-css-in-flex-4-id-and-descendant-selectors/ http://blog.smartlogicsolutions.com/2008/10/21/advanced-css-in-flex-4-id-and-descendant-selectors/#comments Wed, 22 Oct 2008 00:39:41 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=338 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

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

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!

Related Posts:

• New Flex 4 Theme and Class Renaming
• Rotate Effect and Non Embedded Fonts in Flex 4
• Skinning A Button in Flex 4 Using FXG
• Flex 4 “Gumbo” Planning Documents
• Compiling Your First Flex 4 Application
• Powered by Contextual Related Posts
]]> http://blog.smartlogicsolutions.com/2008/10/21/advanced-css-in-flex-4-id-and-descendant-selectors/feed/ 6