Sweeping Design

I had trouble using ValidatorForm as the base tag for Form components, and still more trouble when I used those in a TabNavigator. In both cases, the fault was in trying to refer to add a CHANGE event listener to the as-yet null {source} for the validators.

The solution to the first part was to pull the meat out of the validators() setter and into an assignValidators() function, saving the array of validators to a private _validators for later use in calling assignValidators() from creationComplete(). This worked until I used the ValidatorForm in a TabbedNavigator, which doesn’t create its grandchildren - our {source} - until the tab is activated (or unless you set creationPolicy=’all’, but a component just shouldn’t make you do that). The solution here is to use callLater(assignValidators) in creationComplete() instead of just assignValidators().

Here’s the source, and what changed:

      private var _validators: Array;
        public function set validators(validators:Array):void  { 
          _validators = validators; 
        }
        
        public function get validators(): Array {
          return _validators;
        }
        
        protected function creationComplete(): void {
              callLater(assignValidators);
        }
        
        private function assignValidators(): void {
        
            for(var i:uint=0; i < validators.length; i++) { ...

I visited the topic of using flex in full-screen for the first time today and found the examples at Flex Examples and Everything Flex wanting in clarity and style. Here, then, is the low-down - as clean and simple as it gets!

View source here.

This example allows you to enter full-screen with “fullScreen=true” and exit with “fullScreen=false”. The listener for FullScreenEvent.FULL_SCREEN updates fullScreen in case the user exits by pressing escape rather than by clicking the checkbox. As a result, fullScreen is bindable, as shown in the checkbox.

Do note that you will need to set allowFullScreen to true in your project’s index.template.html, lest you get:
Error #2152: Full screen mode is not allowed.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
  <mx:initialize><![CDATA[
    systemManager.stage.addEventListener(
      FullScreenEvent.FULL_SCREEN,
      function(event: FullScreenEvent): void { fullScreen = event.fullScreen; }
    );
  ]]></mx:initialize>
 
  <mx:Script><![CDATA[
    private var _fullScreen: Boolean;
 
    [Bindable] public function get fullScreen(): Boolean { return _fullScreen; }
    
    public function set fullScreen(isFull:Boolean):void {
      _fullScreen = isFull;
      stage.displayState = (isFull) ? StageDisplayState.FULL_SCREEN : StageDisplayState.NORMAL; }
  ]]></mx:Script>
 
  <mx:CheckBox id="fs" label="Full Screen"
    click="fullScreen=event.target.selected" selected="{fullScreen}"
    horizontalCenter="0" verticalCenter="0"/>
 
</mx:Application>