|
 |
Flex (ActionScript3)From $1Table of contents
The following document provides the basic knowledge needed for integrating Wildfire in your Flex (ActionScript3) widget. We will start with a basic example of an basic flash widget that uses Wildfire - the Wildfire "Hello World". In the example, we used the code generated by the Standard Setup wizard, wrapped in with the most basic ActionScript3 code. The example is followed by code explanations that emphasize the parts in the code which you should modify once you place this code in your application.
Basic Working ExampleRun the Example:
The Example Code:<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="WFInit()" layout="absolute" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
<!-- Step 1 - Define a component to be used to load Wildfire: -->
<mx:Box id="wfLoaderBox" x="30" y="70" visible="false" />
<mx:Script>
<![CDATA[
import mx.events.DynamicEvent;
// Step 2 - Create a configuration object through which Wildfire will communicate with the host swf:
public var cfg:Object = { };
public function WFInit():void {
// Step 3 - Set up security to allow your widget to interact with Wildfire:
Security.allowDomain("cdn.gigya.com");
Security.allowInsecureDomain("cdn.gigya.com");
if(wfLoaderBox.numChildren > 0 ){
wfLoaderBox.visible = true;
return;
}
// Step 4 - Setting the configuration parameters (based on your selections in the wizard):
cfg['width']='200';
cfg['height']='250';
cfg['partner'] = 'PARTNER-ID';
cfg['UIConfig']='<config><display showEmail="true" showBookmark="true" ></display></config>';
// Step 5 - Set up the content to be posted
cfg['defaultContent']= 'Hello from Gigya!!! (Post content)'; // <-- YOUR EMBED CODE GOES HERE
// Step 6 - Set up an event handler for the onClose event, this is called when the Wildfire UI is closed.
cfg['onClose']=function(eventObj:Object):void{
//add here code to hide
wfLoaderBox.visible = false;
MovieClip(Loader(mx.core.UIComponent(wfLoaderBox.getChildAt(0)).getChildAt(0)).content).INIT();
}
var wfLoader:flash.display.Loader;
wfLoader=new flash.display.Loader();
// Step 7 - Load Wildfire or re-initialize if already loaded:
if (wfLoaderBox.numChildren == 0 ) {
wfLoader.contentLoaderInfo.sharedEvents.addEventListener("sendConfig",
function(e:Event):void {
var evtObj:mx.events.DynamicEvent = new mx.events.DynamicEvent('onStoreConfig');
evtObj.cfg = cfg;
wfLoader.contentLoaderInfo.sharedEvents.dispatchEvent(evtObj);
}
)
wfLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,
function(event:Event):void{
var uic:mx.core.UIComponent = new mx.core.UIComponent();
wfLoaderBox.addChild(uic);
uic.addChild(wfLoader);
}
);
// The following method Loads wildfire
wfLoader.load(new URLRequest('http://cdn.gigya.com/wildfire/swf/wildfireInAS3.swf?ModuleID=cfg'));
}
else {
MovieClip(Loader(mx.core.UIComponent(wfLoaderBox.getChildAt(0)).getChildAt(0)).content).INIT();
}
}
]]>
</mx:Script>
<!-- Step 8 - call WFInit(): -->
<mx:Button label="Load Wildfire" x="30" y="30" click="WFInit()"/>
</mx:Application>
Notes:
Explanation of code:The following is an explanation of the eight steps taken in the code above, giving a deeper understanding of the content of the code generated by the wizard. Note - full comprehension of this section is required only for advanced integration scenarios, or if you wish to perform manual tweaks. Step 1 - Creating a Container to Host the Wildfire UI (line 5):Wildfire requires the hosting widget to provide a uniquely identified container where the Wildfire UI will be drawn. <mx:Box id="wfLoaderBox" x="30" y="70" visible="false" /> The "wfLoaderBox" component is used to load Wildfire. Please modify the x and y attributes to set the component's position using absolute layout. Alternatively you may use layout elements such as Flex's VBox and HBox to control the position of the host container. Step 2 - Creating a Configuration Object (line 12):Create an empty configuration object from which Wildfire will read its configuration. The name of this variable ("cfg") is significant! The variable must be declared to be public: public var cfg:Object = { };
When Wildfire loads, it expects to find a a "ModuleID" parameter, the value of this parameter is used to get to a configuration object in the hosting swf. Actual configuration of the Wildfire is done by assigning values to different attributes of this configuration object. See in line 64 - the value of the ModuleID parameter is the actual name of the configuration variable: wfLoader.load(new URLRequest('http://cdn.gigya.com/wildfire/swf/wildfireInAS3.swf?ModuleID=cfg'));
Step 3 - Setting up Security to allow your Widget to Interact with Wildfire (lines 17-18):These lines must be executed before you load Wildfire. Security.allowDomain("cdn.gigya.com");
Security.allowInsecureDomain("cdn.gigya.com");
The purpose: Because your widget loads from a different domain than that of Wildfire you have to explicitly allow the two to interact. Step 4 - Setting the Configuration Parameters and UI Design (lines 26-29):The values of these parameters are based on your selections in the wizard. You may manually change the values of these parameters and many more parameters which Wildfire supports. Please refer to the Configuration Parameters page, for a full reference guide to the various parameters supported by Wildfire. In our example, we set the following parameter: Setting the size of Wilfire:cfg['width']='200'; cfg['height']='250'; Setting your Partner ID:If you use one of the Wizards to generate your code, your partner ID is automatically injected to the generated code by the wizard. cfg['partner']='000'; //Set your partner ID (will automatically be assigned by the wizard) Setting the UI Configuration Parameters:The UIConfig parameter defines the UI design of Wildfire. It is assigned with an XML which is generated by the Wizard, according to your selected UI design. cfg['UIConfig']='<config><display showEmail="true" showBookmark="true" ></display></config>'; To learn how to customize the UI of Wildfire, please read the UI Configuration page in the Developer's Guide. Step 5 - Defining the Content of the Post (line 32):Place your content to post here! Depending on your widget you can choose to either set this as a literal string like in our simple example: cfg['defaultContent']= 'Hello from Gigya!!! (Post content)'; // <-- YOUR EMBED CODE GOES HERE If your widget can generate dynamic code based on user interaction (e.g. selecting a color) you can use a function instead of a string. Wildfire will call the function when it needs the content. cfg['defaultContent']= function() { return 'Hello from Gigya!!!'; }
Step 6 - Setting up an Event Handler (lines 36-40):This is not an obligatory step. See Wildfire Events reference, to learn more about the events that Wildfire generates. Step 7 - Loading Wildfire (lines 46-69):Load Wildfire or re-initialize if already loaded. The following method Loads wildfire: wfLoader.load(new URLRequest('http://cdn.gigya.com/wildfire/swf/wildfireInAS3.swf?ModuleID=cfg'));
Note that the parameter "ModuleID" is pointing to the configuration object "cfg" which we prepared in previous steps. Step 8 - Calling WFInit() (line 77):"WFInit()" method should be called when you want Wildfire to load. In Our example - we define a button, that when clicked "WFInit()" method is called.
Note - the Blue Italian text highlight the parts of code that you should add.
Tags:
Files (0) |
||||
|