Nilesh W's Blog

Custom events in jQuery/Javacript

Simple code to create your own custom events in jQuery/Javascript

Write the sample code in jQuery ready function – This will assign the function to be invoked on thecustom event. Here taken event name as ‘CUSTOM_CLICK’.

$(document).ready(function() {

$(document).bind(‘CUSTOM_CLICK’, callFun);

}

Write the function defination

function callFun()
{
// Function behaviour

}

Now to explicitly call this event, use trigger method wherever you want as below.

$(document).trigger(‘CUSTOM_CLICK’);

Custom events are useful in background processing and also give control to developer to fire an event based on state of an application.

May 3, 2012 Posted by Nilesh Walkoli | HTML5/CSS/jQuery | Web Development | Leave a Comment

Creating IFrame in Flex : Embedding HTML in Flex

Including IFrame in Flex – Including html page in Flex application. IFrame solution provides a way to show the HTML Iframe in Flex application.

There is no HTML rendering engine in Flash player. It just make a call to Javascript and show and hide HTML Iframe, uses wmode parameter . Flex uses ExternalInterface to call the js functions to show and hide IFrame.
PSB steps to include IFrame in Flex.

1 Create a new Flex project. Paste below code in main application file.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:comp=”comp.*” creationComplete=”init”>

<mx:Script>

<![CDATA[

import comp.IFrame;

public var newIframe:IFrame;

public function init():void{

}

//Function to show the Iframe comp

private function showIFrame():void{

newIframe = new IFrame();

newIframe.source="http://nilesh22.wordpress.com";

newIframe.x = 20;

newIframe.y = 20;

newIframe.percentWidth=100;

newIframe.percentHeight=100;

vs.addChild(newIframe);

}

//Function to hide the Iframe comp

private function hideIFrame():void{

newIframe.visible = false;

}

]]>

</mx:Script>

<mx:VBox>

<mx:HBox width=”100%” height=”100%”>

<mx:Button label=”Load IFrame” click=”showIFrame()”/>

<mx:Button label=”Remove IFrame” click=”hideIFrame()”/>

</mx:HBox>

<mx:ViewStack id=”vs” x=”10″ y=”10″ width=”500″ height=”400″/>

</mx:VBox>

</mx:Application>

2 Copy paste the code in IFrame.mxml (mxml component file) in side src->Comp package in Flex project

?xml version=”1.0″ encoding=”utf-8″?>

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml“

resize=”callLater( moveIFrame )”

move=”callLater( moveIFrame )”>

<mx:Script>

private var __source: String;

public function moveIFrame(): void

{

var pt:flash.geom.Point= new Point(0,0);

pt = this.localToGlobal(pt);

ExternalInterface.call( “moveIFrame”, pt.x, pt.y, this.width, this.height );

}

public function set source(source: String): void

{

if (source)

{

__source = source;

}

public function get source(): String

{

return __source;

}

override public function set visible(visible: Boolean): void

{

super.visible=visible;

if (visible)

{

ExternalInterface.call( “setIFrameContent”, source );

moveIFrame();

ExternalInterface.call( “showIFrame”);

}

else

{

//ExternalInterface.call( “setIFrameContent”, “about:blank” );

ExternalInterface.call( “hideIFrame” );

}

</mx:Script>

</mx:Canvas>

3 open the html wrapper file in the html folder in flex project(generally have name index.template.html). Paste the below code in that HTML page.

function moveIFrame(x,y,w,h) {

var frameRef=document.getElementById(“content”);

frameRef.style.left=x;

frameRef.style.top=y;

frameRef.width=w;

frameRef.height=h;

}

function setIFrameContent( contentSource )

{

document.getElementById(“content”).src = contentSource;

}

function hideIFrame()

{

document.getElementById(“content”).style.visibility=”hidden”;

}

function showIFrame()

{

document.getElementById(“content”).style.visibility=”visible”;

}

</script>

4 At the end of wrapper file inside body tag, paste the below code

frameborder=”0″

style=”position:absolute;background-color:transparent;border:0px;visibility:hidden;”></iframe>

Reference sites for above are given below, step by step development approach is given.

http://www.themidnightcoders.com/blog/2006/12/mixing-html-and-flex-using-iframe.html

Also few limitations on using this approach

http://www.deitte.com/archives/2008/07/dont_use_iframe.htm

This is just a basic IFrame component. You can add your own custom behavior to the IFrame component based on your application requirement.

April 18, 2010 Posted by Nilesh Walkoli | Client Side techonologies, Flex | Leave a Comment

Flex Component LifeCycle: Initialization Phase

Flex component goes through several phases during its life cycle.

Below section describe one of the phase called Initialization in the component life cycle. Before the Initialization phase component goes through construction, configuration and attachment phases. After Initialization phase the component goes through Invalidation, Validation, Interaction, detachment and the Garbage collection phases. In this post we will deal with only Initialization phase.

Below is the example of the each of the phases before Initialization

For example :

The newSprite object construction phase – Var newSprite:Sprite = new Sprite();

Configuration phase – newSprite.width = 100; newSprite.height = 100;

Attachment phase – ParentDispObj.addChild(newSprite);

After this phase the initialization phase occurs.

Below steps are performed in this phase.

Flex dispatch the preInitialize event for the component.

CreateChildrens() method is called and adds the subcomponent if any.

Flex dispatches the Initialize command for the component.

Flex dispatched the creationComplete event.

The structure of the application is

Main Application –

Main App – Comp_LifeCycle

Vbox container – MainVB

Hbox container -HBox1

Custom Component – CustomComp1

Below code example gives detail of Initialization phase in the component life cycle.

If you trace the Initialization phase events on the above components it will give the output as below

This is the PreInitialization of Comp_LifeCycle0

This is the PreInitialization of Comp_LifeCycle0.MainVB

This is the PreInitialization of Comp_LifeCycle0.MainVB.Hbox1

This is the Initialization of Comp_LifeCycle0.MainVB.Hbox1 Read more »

June 22, 2009 Posted by Nilesh Walkoli | Flex | 1 Comment

Communication with wrapper in Flex – ExternalInterface example : Video Player Detection

This example uses ExternalInterface Class in Flex to communicate with the wrapper(e.g. html page).

Below is the main mxml file code – VideoPlayerDetection.mxml

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”fnInit()”>
<mx:Script source=”Functions/globalFun.as”/>

<mx:Panel title=”Video Player” width=”448″ height=”225″ layout=”absolute”>
<mx:VBox x=”135.5″ y=”27″>
  <mx:RadioButtonGroup id=”radGrp” />
  <mx:RadioButton groupName=”radGrp” id=”quickTime” label=”Quick Time Player” value=”QuickTime”/>
  <mx:RadioButton groupName=”radGrp” id=”realOne” label=”Real One Player” value=”RealPlayer” />
  <mx:RadioButton groupName=”radGrp” id=”winMedia” label=”Windows Media Player” value=”Windows Media Player”/>
</mx:VBox>
<mx:Button id=”chkBtn” x=”119″ y=”121″ label=”Is Selected Player Installed?” click=”fnCallJS()”/>
</mx:Panel>
</mx:Application>

Create a folder named Functions in your root project folder.
Create a Actionscript file (File Menu->new->Actionscript file) named globalFun.as in the folder Functions just created above. Place the below code inside that AS file.



import mx.controls.Alert;

import flash.external.*;

public function fnInit():void

{

Alert.show("Created the Main App on Creation Complete","Message");

}

public function fnCallJS():void{

var vPlayerName:Boolean;

if (ExternalInterface.available) {

var wrapperFunction:String = "fnInJavascript";

vPlayerName = ExternalInterface.call(wrapperFunction,radGrp.selectedValue);

} else {

vPlayerName = false;

}

if(vPlayerName)

{

Alert.show("You have "+radGrp.selectedValue+" Installed on your machine", "Installed!");

}

else

{

Alert.show("You have no "+radGrp.selectedValue+" Installed on your machine", "Not Installed!");

}

}

Locate your bin folder in your local flex workspace for this project.
Put the below code in the VideoDetection.html file

function fnInJavascript(videoPlayerName)

{

var name;

var i;

name = videoPlayerName;

if (pluginlist.indexOf(name)!=-1)

{

return true;

}

else

{

return false;

}

}

body { margin: 0px; overflow:hidden }

<!-- // Version check for the Flash Player that has the ability to start Player Product Install (6.0r65) var hasProductInstall = DetectFlashVer(6, 0, 65);


// Version check based upon the values defined in globals

var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback

if ( hasProductInstall && !hasRequestedVersion ) {

// MMdoctitle is the stored document.title value used by the installation process to close the window that started the process

// This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed

// DO NOT MODIFY THE FOLLOWING FOUR LINES

// Location visited after installation is complete if installation is required

var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";

var MMredirectURL = window.location;

document.title = document.title.slice(0, 47) + " - Flash Player Installation";

var MMdoctitle = document.title;
AC_FL_RunContent(

"src", "playerProductInstall",

"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",

"width", "100%",

"height", "100%",

"align", "middle",

"id", "VideoPlayerDetection",

"quality", "high",

"bgcolor", "#869ca7",

"name", "VideoPlayerDetection",

"allowScriptAccess","sameDomain",

"type", "application/x-shockwave-flash",

"pluginspage", "http://www.adobe.com/go/getflashplayer"

);

} else if (hasRequestedVersion) {

// if we've detected an acceptable version

// embed the Flash Content SWF when all tests are passed

AC_FL_RunContent(

"src", "VideoPlayerDetection",

"width", "100%",

"height", "100%",

"align", "middle",

"id", "VideoPlayerDetection",

"quality", "high",

"bgcolor", "#869ca7",

"name", "VideoPlayerDetection",

"flashvars",'historyUrl=history.htm%3F&lconid=' + lc_id + '',

"allowScriptAccess","sameDomain",

"type", "application/x-shockwave-flash",

"pluginspage", "http://www.adobe.com/go/getflashplayer"

);

} else { // flash is too old or we can't detect the plugin

var alternateContent = 'Alternate HTML content should be placed here. '

+ 'This content requires the Adobe Flash Player. '

+ 'Get Flash';

document.write(alternateContent); // insert non-flash content

}

// -->

The above code in your wrapper(html) file will use to detect the video player installation status.

Create a javascript file named plugins.js on the same path of your wrapper file. Paste the below code in the that plugins.js.



var agt=navigator.userAgent.toLowerCase();

var ie = (agt.indexOf("msie") != -1);

var ns = (navigator.appName.indexOf("Netscape") != -1);

var win = ((agt.indexOf("win")!=-1) || (agt.indexOf("32bit")!=-1));

var mac = (agt.indexOf("mac")!=-1);

if (ie && win) { pluginlist = detectIE("rmocx.RealPlayer G2 Control.1","RealPlayer") + detectIE("QuickTimeCheckObject.QuickTimeCheck.1","QuickTime") + detectIE("MediaPlayer.MediaPlayer.1","Windows Media Player"); }

if (ns || !win) {

nse = ""; for (var i=0;i<navigator.mimeTypes.length;i++) nse += navigator.mimeTypes[i].type.toLowerCase();

pluginlist = detectNS("audio/x-pn-realaudio-plugin","RealPlayer") + detectNS("video/quicktime","QuickTime") + detectNS("application/x-mplayer2","Windows Media Player");

}

function detectIE(ClassID,name) { result = false; document.write('\n on error resume next \n result = IsObject(CreateObject("' + ClassID + '"))\n'); if (result) return name+','; else return ''; }

function detectNS(ClassID,name) { n = ""; if (nse.indexOf(ClassID) != -1) if (navigator.mimeTypes[ClassID].enabledPlugin != null) n = name+","; return n; }

pluginlist += navigator.javaEnabled() ? "Java," : ""; if (pluginlist.length > 0) pluginlist = pluginlist.substring(0,pluginlist.length-1); .

You have done with a simple video detection script. Please make sure that if you are using Flex SDK to generate the wrapper file, the code in the prev old html will be replaced. So save the wrapper html file with diff name to avoid the same.

June 10, 2009 Posted by Nilesh Walkoli | Flex | Leave a Comment