I put together a simple demo of how you can capture an image from the webcam in Flex. Nothing super complex going on here once you see it.

Basically we use the Camera, VideoDisplay, and the Bitmap classes. The Camera allows us to do just what you expect prompting the user to connect to their camera. The Camera is then attached to the VideoDisplay component and we can see what the camera sees.

 
 
var camera:Camera = Camera.getCamera();
                
if (camera) 
{
    videoDisplay.attachCamera(camera);                    
} 
else 
{
    Alert.show("Oops, we can't find your camera.");
}
 
 

When we want to capture an image we create a new, empty Bitmap at the same size as the VideoDisplay, and we draw the output of the VideoDisplay to the image. We then write that image back to the stage so we can see it.

 
 
var snap:BitmapData = new BitmapData(320, 240, true);
var snapBmp:Bitmap = new Bitmap(snap);
 
snapBmp.width = 320;
snapBmp.height = 240;
 
if(snapshotHolder.numChildren > 0)
    snapshotHolder.removeChildAt(0);
 
snapshotHolder.addChild(snapBmp);                
snap.draw(videoDisplay);
 
 

Demo: http://www.davidortinau.com/flash/WebcamCaptureDemo/WebcamCaptureDemo.html

Source: http://www.davidortinau.com/flash/WebcamCaptureDemo/srcview/index.html

I have a Flex application that will shrink and grow vertically, but I do NOT want to ever, ever, ever see the Flex scroll bar. Ever! It has its place, but not for the entire app. That’s what the browser has a scroll bar for. And people are intimately familiar with that scroll bar, so I would much rather use that.

My Flex application makes use of the mx:ViewStack and each view will be the same width, but vary in height and even change interactively. At a minimum I want Flash to span the available browser window top to bottom. At a maximum I want the user to scroll with the browser scroll bar.

How I Did It
I disable the Flex scroll bars by modifying the policy value. Depending on how nested your application is (Canvas > VBox > Canvas > HBox > etc) you may have to do this at many levels. If there is a way to disable this by default, please have mercy on a brother and tell me now.

 
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" 
width="680"
horizontalScrollPolicy="off" 
verticalScrollPolicy="off">
 

Next I set the ViewStack to resizeToContent.

 
<mx:ViewStack id="mainStack" resizeToContent="true"
     <views:WelcomeView id="welcomeView" />
     <views:OrderFormView id="orderFormView" />
</mx:ViewStack>
 

Now I create a listener to handle any resize of the views. In my case this will always come up through the OrderFormView which is itself an mx:ViewStack.

 
import mx.events.ResizeEvent;
 
private function setupResize() : void
{
     orderFormView.addEventListener(ResizeEvent.RESIZE, formResize);
}
 

And then on formResize I use the ExternalInterface to issue the appropriate javascript to resize my DIV container to the height of my ViewStack plus a buffer of 30 pixels cuz I want a little play at the bottom.

 
private function formResize(e : ResizeEvent) : void
{
     ExternalInterface.call("setFlashHeight", mainStack.height + 30);
}
 

ExternalInterface.objectID is the ID of the DIV made available by Flex. Then in the page I have a javascript function to perform the actual resize.

 
function setFlashHeight(newHeight)
{
var viewportwidth;
var viewportheight;
 
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
 
// older versions of IE 
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
 
document.getElementById('consumer').style.height = (viewportheight > newHeight) ? viewportheight + 'px' : newHeight + 'px'; 
}
 

Something else you’ll likely want to do is scroll back to the top of the page after the resize.

 
ExternalInterface.call(
    "function() { scroll(0,0); }"
);
 

That’s it. The next thing to do is implement something like SWFFIT or write a little function that appropriately resizes the DIV upon a browser resize event (if the user resizes or removes a status bar or finder bar, etc.).

In addition to a Date Range Validator control for a recent project, I also need to compare to user input fields for confirm email address and confirm password. Since I’d just extended the DateValidator, I figured the same approach would work for comparing two controls.

Class: FieldComparisonValidator.as

Disclosure: this was evidently something Adobe Consulting had in their bag of tricks for Flex 2, but namespaces had changes and the code I found burried in a mailing list didn’t work. I made some quick updates to what I saw there, and this works fine for comparing mx:TextInput.

To see how the entire form validation plays out in my forms, check out the previous post How to Validate a Date Range in Flex.

To validator implemntation is:

<validators:FieldComparisonValidator id="valConfirmEmail" source="{txtEmailAddressConfirm}" property="text" destination="{txtEmailAddress}" destinationProperty="text" required="true" />

I’ll be using this thing aplenty, so if it breaks down I’ll be sure to update it. If you have a better validator for this scenario, or an improvement, please let me know.

I had the need to validate a date based on a range of allowed dates, and I couldn’t find this validation control anywhere for Flex. The reason is probably because it’s just so easy to write.

The solution is to write a custom validator that extends DateValidator, pass in the start and end dates, and then perform the validation. This way I can benefit from the nice inline validation Flex gives us.

The actual validation code to compare dates is based on the Date.parse() which you can see in the class code.

The class: DateRangeValidator.as

In my form I’ve been using a form validator that checks all the validation controls in the array and when it’s all good enables the form button. The Flex code for my form looks basically like this:

<mx:Form>
... other fields ...
            <mx:FormItem label="Date of Birth" required="true" labelStyleName="fieldLabel">
	    	<mx:DateField disabledRanges="{[ {rangeStart: new Date(1988,0,1), rangeEnd: new Date(2025,11,30)} ]}" id="dateOfBirth" yearNavigationEnabled="true" editable="true" formatString="MM/DD/YYYY" minYear="1900" maxYear="1988" change="this.formValidator.validateForm(event);"/>
	    </mx:FormItem>
... other fields ...
            <mx:FormItem horizontalAlign="right" width="349">
	    	<mx:Button id="btnSubmit" click="submit()" label="NEXT"
				enabled="{this.formValidator.formIsValid}" />
	    </mx:FormItem>
</mx:Form>

Then I have my array of validators:

<mx:Array id="validators">
... some validators ...
	<validators:DateRangeValidator id="valDateRange" source="{dateOfBirth}" property="text" StartDate="{new Date(1900,0,1)}" EndDate="{new Date(1988,0,1)}" required="true"/>
</mx:Array>

And the custom form validator that checks all fields to make sure it’s all valid before enabling the button. For more info on this, check out this article and code from Joel Hooks.

<validators:FormValidator id="formValidator" validators="{this.validators}"/>

And that’s it. I hope this saves someone a little time. If you have any comments or improvements, please let me know.

My first 360|Flex experience began Monday morning with Mike Labriola (@mlabriola, slides) stalking back and forth in front of a standing room only crowd. Shirt un-tucked, one hand thrust into a pocket he held a goblet of water in the other from which he alternately took sips and gestured to his listeners. Delivering his best Sean Astin, Mike transformed the room into his private cigar study. We were all in audience to savor his cognac and digest the divine merits of unit testing Flex applications.

“Welcome to 360|Flex,” I thought. The session was fantastic and Mike was entertaining all the way through the final “ok, get out of here” as he waved his empty goblet and turned his back.

Bookend that session with my final session Wednesday afternoon on Design Patterns delivered by Yakov Fain (@yfain). I whispered to @dmatchack sitting in front of me, “I hope we finally talk about something over than MVC”. He said, “no kidding” and chuckled.

What we received in the next 1 hr and 20 minutes was a much more than that.

Though likely not the whole story on Yakov, I left with the distinct impression that Yakov HATES Cairngorm and PureMVC (mate didn’t garner a sneer) in favor of implementing good design patterns in a more appropriate manner. Yakov gave away a book to an attendee, “though I’m not really satisfied with that answer”. Halfway through the session we were treated to a gratuitous (though clean) slide of Angelina Jolie. The half filled room erupted in laughter and applause.

I attended as many non-developer related sessions as were of interest to me. This strategy yielded my favorite sessions from the conference:

Joe Johnston (@merhl)
FLEXperience - Putting the Flex in UX
http://www.slideshare.net/merhl/flexperience

Francisco Inchauste (@iamfinch)
RIA Mojo - Making Your Flex Application Stand Out with a Great UX
http://www.davidortinau.com/presos/RIA_Mojo.pdf

Joe Olsen (@joeolsen, @phenomblue)
Creativity is the Fuel, Process is the Engine: Building a Scalable Interactive Production Environment

All said, it was a great 3 days of meeting or at least experiencing great people (@jprevel, @randytroppmann, @lordb8r, @kremdela, @visualrinse, http://coenraets.org/), learning a new tip here and there, and overall being reminded why I do what I do building interactive experiences.

Thanks to @lordbron and @jwilker and everyone else that made this a great conference.

Perhaps a lesser known framework for building Flash projects, CASA Lib (formerly CASA Framework) is a nice package of helpers and loose structure for constructing your actionscript world. CASA Lib is the ongoing work of Aaron Clinger and Mike Creighton, both previously working together at Odopod.

I've worked on a couple of projects with Mike and seen his use of CASA Lib first hand. Mike does really nice work, and on that merit alone I'm taking a long look at how CASA Lib can help me.

I've used Cairngorm in Flex and goofed around with EasyMVC and PureMVC. For Flex, Mate is another one out there that seems to be getting more and more buzz. There is a LOT of information about frameworks for Flex and Flash out there, but not a ton of consensus or guidance from what I've seen. Finding best practices for developing Flash/Flex is a real chore, not that it's ever easy in any technology given how opionated developers can be.

CASA Lib is really something completely different. I think with my current understanding I would characterize it more as a loose framework built with a bagful of the most frequently used helper methods for things such as loading xml data, destroying instances, event handling and other tasks.

Check it out and let me know what you think.