w11k-flash

w11k-flash is an AngularJS module providing a directive to include flash movies and flex applications into your AngularJS application as well as a thin communication layer for Flash/Flex and AngularJS.
Integrating a Flex application into an AngularJS application is a common usecase of a step-by-step migration of a Flex application to AngularJS.

 View on GitHub

Demo



Non-Flash Content

Content rendered by AngularJS
Talk to Flex
{{message}}
{{response}}

Installation

Basic Usage

Basic usage means you include your Flex application and toggle its visibility but do not communicate with Flex from your AngularJS code nor vice versa.

  1. Define a controller:
    angular.module('app').controller('DemoCtrl', function ($scope) {
      $scope.flash = {
        visible: false,
        config: {
          swfUrl: 'pathTo/your.swf',
          width: 600,
          height: 180
        }
      };
    
      $scope.toggle = function () {
        $scope.flash.visible = !$scope.flash.visible;
      };
    });
    
  2. Use the controller together with the w11k-flash directive in your template.

    Pass the config object stored in flash.config via w11k-flash attribute to the directive. This config object has to have a property `swfUrl` referencing the flash file to load. You can also pass properties flashvars, params, attributes, width and height via the config object. These values are passed to swfobject. See https://code.google.com/p/swfobject for more information.

    With the w11k-flash-visible attribute you can show and hide the Flash/Flex application. The Flash file is loaded lazy and once. If w11k-flash-visible changes from true to false, the Flash object will be invisible but not removed. If w11k-flash-visible evaluates to true later on, the Flash object will be visible again without reinitialization.
    <div ng-controller="DemoCtrl">
      <div w11k-flash="flash.config" w11k-flash-visible="flash.visible"></div>
    </div>
    

Control Flow Basic Usage

w11k-flash Sequence Diagram - Basic Usage

Advanced Usage

In addition to steps described in Basic Usage:

  1. Add a callback to your flash config object. This callback is called with a promise as parameter after the directive included the flex into the page. The promise will be resolved with a reference to the flash object when the Flex application calls AngularJSAdapter#fireFlashReady (see next step). Save a reference to the promise in your scope or controller instance to be able to use it later on.
    angular.module('app').controller('DemoCtrl', function ($scope) {
      $scope.flash = {
        config: {
          callback: function(flashReadyPromise) {
            $scope.flash.ready = flashReadyPromise;
          }
        }
      };
    });
    
  2. Use AngularJSAdapter for communication with the AngularJS application in your Flex code. During initialization expose functions you want to be able to call from your AngularJS code. Then call AngularJSAdapter#fireFlashReady to inform AngularJS about finish of initialization.
    private var angularjs :AngularJSAdapter;
    
    protected function talkToFlex(text :String) :String {
      // do something with text
      return 'Hello! My name is Flex.';
    }
    
    protected function application_creationCompleteHandler(event :FlexEvent) :void {
      // do all the initialization and then
      angularjs = AngularJSAdapter.getInstance();
      angularjs.expose("talkToFlex", talkToFlex);
      angularjs.fireFlashReady();
    }
    
  3. You can call all functions assigned to current scope (including scope hierarchy) from your Flex code. More precisely: You can evaluate expressions against the current scope. So assign functions you want to be able to call from your Flex code to the scope.
    angular.module('app').controller('DemoCtrl', function ($scope) {
       $scope.talkToAngular = function (text) {
        // do something with text
        return 'Hello, my name is AngularJS';
      }
    });
    
  4. Call an AngularJS function from your Flex code via AngularJSAdapter#call. call expect one mandatory and one optional parameter: the expression to evaluate and a map (locals) to resolve parameters within the expression.
    angularjs.call('talkToAngular("Hello")');
    angularjs.call('talkToAngular(text)', {text: 'Hello'});
    
  5. To call functions exposed by your Flex application from your AngularJS code, use the promise received by the config callback and its resolved value, a reference to the flash object.
    angular.module('app').controller('DemoCtrl', function ($scope) {
       $scope.talkToFlex = function (text) {
        if (angular.isDefined($scope.flash.ready)) {
          $scope.flash.ready.then(function (flashRef) {
            $scope.responseFromFlex = flashRef.talkToFlex(text);
          });
        }
      }
    });
    

Control Flow Advanced Usage

w11k-flash Sequence Diagram - Advanced Usage

Additional Options

License & Copyright

w11k-flash is licensed under MIT.

w11k-flash is developed and maintained by WeigleWilczek and Philipp Burgmer. All rights reserved.