w11k-flash | Flash/Flex Integration for AngularJS

Demo

Toggle Flash Visibility

Switch Flash Content

Non-Flash Content

Content rendered by AngularJS

My Name

Talk to Flex

Message

Response

Installation

Install w11k-flash and its dependencies via Bower
Include scripts into your application (w11k-flash and swfobject)
Add dependency to w11k.flash and w11k.flash.template to your AngularJS module
Include w11k-flash stylesheet

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.

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;
  };
});

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:

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;
      }
    }
  };
});
```

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();
}

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';
  }
});
```
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'});
```

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

Instead of configuring each directive instance by its own, you can use the constant w11kFlashConfig to share common configuration. Common configuration and instance configuration will be merged and instance configuration overrides common configuration.
```
angular.module('app').config(function (w11kFlashConfig) {
  w11kFlashConfig.config.swfObject.minFlashVersion = '13.1.17';
});
```
w11kFlashConfig can be used also to configure the path to the template the directive should use via templateUrl. This is an alternative to define a dependency to the w11k.flash.template module.
```
angular.module('app').config(function (w11kFlashConfig) {
  w11kFlashConfig.templateUrl = 'pathTo/w11k-flash.tpl.html'
});
```

License & Copyright

w11k-flash is licensed under MIT.