my journey with flex: Adobe Flex 3

Showing posts with label Adobe Flex 3. Show all posts

Monday, September 3, 2012

Detecting the Operating System

Detecting the Operating System: Use the flash.system.Capabilities.os property

package{

  import flash.display.Sprite;

  import flash.system.Capabilities;

  

  public class Main extends Sprite{

    public function Main(){



        var os:String = flash.system.Capabilities.os.substr(0, 3);

        if (os == "Win") {

          trace("Windows-specific code goes here");

        } else if (os == "Mac") {

          trace("Mac-specific code goes here");

        } else {

          trace("Must be Unix or Linux");

        }



    }

  }

}

ref : -
http://www.java2s.com/Code/Flash-Flex-ActionScript/Development/DetectingtheOperatingSystemUsetheflashsystemCapabilitiesosproperty.htm

Tuesday, March 1, 2011

Calling a javascript function

Main File

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical"
                verticalAlign="middle"
                backgroundColor="white"
                viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            private function callJavaScript():void
            {
                ExternalInterface.call("sayHelloWorld");
            }
        ]]>
    </mx:Script>

    <mx:Button label="Say 'Hello World'"
               click="callJavaScript();"/>

</mx:Application>

Add the javascript code to the html file in the output folder

<script language="JavaScript" type="text/javascript">
    function sayHelloWorld() {
        alert("Hello World, from JavaScript");
    }
</script>

also refer :

http://stackoverflow.com/questions/477768/calling-flex-application-from-php-files

Sunday, February 6, 2011

Minimize to System tray (AIR application)

This example describes how to dock an AIR application to the system tray and then undock it again.

The minimize and close actions of the WindowedApplication are caught, so that we can introduce our own actions.

A simple systray menu is presented, to show the usage of that.

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute"

creationComplete="initApplication()">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.events.CloseEvent;

private var dockImage:BitmapData;

/**

* Initialize the application to the default values.

* This method is called upon creationComplete from the Windowed

* application

public function initApplication():void

{

/**

* Use the loader object to load an image, which will be used for

* the systray

* After the image has been loaded into the object, we can

* prepare the application for docking to the system tray

var loader:Loader=new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, prepareForSystray);

loader.load(new URLRequest("http://www._____.com/sample16.png"));

/**

* Catch the closing event so that the user can decide if it wants to

dock or really

* close the application

this.addEventListener(Event.CLOSING, closingApplication);

}

/**

* Check if the user wants to close the application or dock it

private function closingApplication(evt:Event):void

{

/**

* Don't close, so prevent the event from happening

evt.preventDefault();

/**

* Check what the user really want's to do

Alert.yesLabel="Close";

Alert.noLabel="Minimize";

Alert.show("Close or minimize?", "Close?", 3, this, alertCloseHandler);

}

/**

* Event handler function for displaying the selected Alert button.

private function alertCloseHandler(event:CloseEvent):void

{

if (event.detail == Alert.YES)

{

closeApp(event);

}

else

{

dock();

}

/**

* Check to see if the application may be docked and set basic properties

public function prepareForSystray(event:Event):void

{

//Retrieve the image being used as the systray icon

dockImage=event.target.content.bitmapData;

/**

* For windows systems we can set the systray props

* (there's also an implementation for mac's, it's similar and you

* can find it on the net... ;) )

if (NativeApplication.supportsSystemTrayIcon)

{

setSystemTrayProperties();

/**

* Set some systray menu options, so that the user can

* right-click and access functionality

* without needing to open the application

SystemTrayIcon(NativeApplication.nativeApplication.icon).menu=createSystrayRootMenu();

}

/**

* Create a menu that can be accessed from the systray

private function createSystrayRootMenu():NativeMenu

{

/**

*Add the menuitems with the corresponding actions

var menu:NativeMenu=new NativeMenu();

var openNativeMenuItem:NativeMenuItem=new NativeMenuItem("Open");

var exitNativeMenuItem:NativeMenuItem=new NativeMenuItem("Exit");

/**

* What should happen when the user clicks on something...

openNativeMenuItem.addEventListener(Event.SELECT, undock);

exitNativeMenuItem.addEventListener(Event.SELECT, closeApp);

//Adding a submenu Status

var submenu:NativeMenu=new NativeMenu();

var onlineNativeMenuItem:NativeMenuItem=new NativeMenuItem("Online");

var disturbNativeMenuItem:NativeMenuItem=new NativeMenuItem("Do Not Disturb");

var invisibleNativeMenuItem:NativeMenuItem=new NativeMenuItem("Invisible");

var offlineNativeMenuItem:NativeMenuItem=new NativeMenuItem("Offline");

//Add Items to a sub-menu "Status"

submenu.addItem(onlineNativeMenuItem);

submenu.addItem(disturbNativeMenuItem);

submenu.addItem(invisibleNativeMenuItem);

submenu.addItem(offlineNativeMenuItem);

//Add the menuitems to the menu

menu.addItem(openNativeMenuItem);

menu.addSubmenu(submenu, "Status");

menu.addItem(new NativeMenuItem("", true));

//separator

menu.addItem(exitNativeMenuItem);

return menu;

}

/**

* To be able to dock and undock we need to set some eventlisteners

private function setSystemTrayProperties():void

{

/**

* Text to show when hovering of the docked application

* icon

SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip="Systray test application";

/**

* We want to be able to open the application after it has been

* docked

SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, undock);

/**

* Listen to the display state changing of the window, so that we

* can catch the minimize

stage.nativeWindow.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, nwMinimized);

/**

* Catch the minimize event

}

/**

* Do the appropriate actions after the windows display state has changed.

* E.g. dock when the user clicks on minize

private function nwMinimized(displayStateEvent:NativeWindowDisplayStateEvent):void

{

/**

* Do we have an minimize action?

* The afterDisplayState hasn't happened yet, but

* only describes the state the window will go to, * so we can prevent it!

if (displayStateEvent.afterDisplayState == NativeWindowDisplayState.MINIMIZED)

{

/**

* Prevent the windowedapplication minimize action

* from happening and implement our own

* minimize

* The reason the windowedapplication minimize

* action is caught, is that if active we're not able to

* undock the application back neatly. The

* application doesn't become visible directly, but

* only after clicking on the taskbars application link.

* (Not sure yet what happens exactly with standard

* minimize)

* /

displayStateEvent.preventDefault();

//Dock (our own minimize)

dock();

}

/**

* Do our own 'minimize' by docking the application to the systray (showing

* the application icon in the systray)

public function dock():void

{

//Hide the applcation

stage.nativeWindow.visible=false;

//**

* Setting the bitmaps array will show the application icon in the

* systray

NativeApplication.nativeApplication.icon.bitmaps=[dockImage];

}

/**

* Show the application again and remove the application icon from the

* systray

public function undock(evt:Event):void

{

/**

* After setting the window to visible, make sure that the

* application is ordered to the front,

* else we'll still need to click on the application on the taskbar to

* make it visible

* /

stage.nativeWindow.visible=true;

stage.nativeWindow.orderToFront();

/**

* Clearing the bitmaps array also clears the applcation * icon from the systray

* /

NativeApplication.nativeApplication.icon.bitmaps=[];

}

/**

* Close the application

private function closeApp(evt:Event):void

{

stage.nativeWindow.close();

}

]]>

</mx:Script>

</mx:WindowedApplication>

Friday, January 21, 2011

Passing arguments to SWC using flashVars

· If you are using the generated wrapper from Flash Builder, then you add flashVars variables by creating an object called flashvars,

· Setting properties on that object, and then passing that object to the swfobject.embedSWF() method of SWFObject.

Main Topics

· Normal Method.

· Passing through JSP page (two cases).

· Passing through PHP page.

· Passing via browser.

· Retrieval from Flex end.

Normal Method.

· Here I explain an example which add two properties to flashvars object (name,home) directly.

· Then passes that object to the embedSWF() method.

var swfVersionStr = "10.0.0";

var xiSwfUrlStr = "playerProductInstall.swf";

var flashvars = {};

flashvars.name = "Rohit";

flashvars.home = "Sunshine";

var params = {};

params.quality = "high";

params.bgcolor = "#ffffff";

params.allowscriptaccess = "sameDomain";

var attributes = {};

attributes.id = "TestProject";

attributes.name = "TestProject";

attributes.align = "middle";

swfobject.embedSWF("FlashVarTest.swf", "flashContent", "100%", "100%",
swfVersionStr,xiSwfUrlStr, flashvars, params, attributes);

swfobject.createCSS("#flashContent", "display:block;text-align:left;");

</script>

· If your wrapper uses the <object> and <embed> tags, you can pass variables to your applications by using the flashVars properties in the <object> and <embed> tags in your wrapper.

· You do this by adding ampersand-separated sets of name-value pairs to these properties.

· Here is an example with the flashvars properties mentioned above.

<html>

<head>

<title>code/wrapper/SimplestFlashVarTestWrapper.html</title>

<style>

    body {

        margin: 0px;

        overflow:hidden

</style>

</head>

<body scroll='no'>

<table width='100%' height='100%' cellspacing='0' cellpadding='0'><tr><td valign='top'>

<h1>Simplest FlashVarTest Wrapper</h1>

    <object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' height

='100%' width='100%'>

        <param name='src' value='FlashVarTest.swf'/>

        <param name='flashVars' value='name=Rohit&home=Sunshine'/>

        <embed name='mySwf' src='FlashVarTest.swf' height='100%' width='100%'

        flashVars='name=Rohit&home=Sunshine'/>

    </object>

</td></tr></table>

</body>

</html>

Passing through JSP page (case 1).

· In this case we are passing the value via JSP page. (ie, use JSP to return the wrapper)

· The value of the flashVars properties do not have to be static.

· Here we add the property ‘variableInFlexSide’ to flashvars object.

· In this case JSP expression for the value of the flashVars properties that can be evaluated to a String.

var swfVersionStr = "10.0.0";

var xiSwfUrlStr = "playerProductInstall.swf";

var flashvars = {};

flashvars.variableInFlexSide = ${variableName};

var params = {};

params.quality = "high";

params.bgcolor = "#ffffff";

params.allowscriptaccess = "sameDomain";

var attributes = {};

attributes.id = "TestProject";

attributes.name = "TestProject";

attributes.align = "middle";

swfobject.embedSWF("SampleProject.swf", "flashContent", "100%", "100%",
swfVersionStr,xiSwfUrlStr, flashvars, params, attributes);

swfobject.createCSS("#flashContent", "display:block;text-align:left;");

</script>

    <object id='SampleProject' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000    ' height='100%' width='100%'>

        <param name='src' value=' SampleProject.swf'/>

        <param name='flashVars' value='variableInFlexSide = ${variableName}'/>

        <embed name='SampleProject' src='SampleProject.swf' height='100%'

         width='100%' flashVars='variableInFlexSide = ${variableName}'/>

    </object>

Passing through JSP page (case 2)..

· Another case using JSP to return the wrapper.

· The following example uses the values stored in the HttpServletRequest object.

· In this case, you can use form or query string parameters

<%

  String variableName = (String) request.getParameter("firstname");

%>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>

        <title>DynamicFlashVarTestWrapper.jsp</title>

        <script type="text/javascript" src="swfobject.js"></script>

var swfVersionStr = "10.0.0";

var xiSwfUrlStr = "playerProductInstall.swf";

var flashvars = {};

    flashvars.variableInFlexSide = "<%= variableName %>";

var params = {};

params.quality = "high";

params.bgcolor = "#ffffff";

params.allowscriptaccess = "sameDomain";

var attributes = {};

attributes.id = "TestProject";

attributes.name = "TestProject";

attributes.align = "middle";

swfobject.embedSWF("SampleProject.swf", "flashContent", "100%", "100%",
swfVersionStr,xiSwfUrlStr, flashvars, params, attributes);

swfobject.createCSS("#flashContent", "display:block;text-align:left;");

</script>

</head>

    <body>

        <div id="flashContent"/>

   </body>

</html>

Passing through PHP page.

· Here we use PHP expressions to pass query string parameters in a wrapper.

<html lang="en">

<head>

<?php

    @ $variableName= $_GET['firstname'];

?>

<script type="text/javascript" src="swfobject.js"></script>

var swfVersionStr = "10.0.0";

var xiSwfUrlStr = "playerProductInstall.swf";

var flashvars = {};

    flashvars.variableInFlexSide = "<?php echo $variableName; ?>"

var params = {};

params.quality = "high";

params.bgcolor = "#ffffff";

params.allowscriptaccess = "sameDomain";

var attributes = {};

attributes.id = "TestProject";

attributes.name = "TestProject";

attributes.align = "middle";

swfobject.embedSWF("SampleProject.swf", "flashContent", "100%", "100%",
swfVersionStr,xiSwfUrlStr, flashvars, params, attributes);

swfobject.createCSS("#flashContent", "display:block;text-align:left;");

</script>

</head>

<body >

    <div id="flashContent">

</body>

</html>

Passing via browser.

· If we requests the SWF file directly in the browser, without a wrapper,

· We can access variables on the query string without providing additional code in the wrapper (because there is no wrapper).

· The following URL passes the value of variable

        http://localhost:8100/flex/SampleProject.swf?variableInFlexSide=Rohit

·         If we want to pass more than one variable.

http://localhost:8100/flex/SampleProject.swf?variableInFlexSide=Rohit&another VariableInFlexSide=Raj

Retrieval from Flex end.

· To access the values of the flashVars properties, we want to use FlexGlobals object’s topLevelApplication.parameters property.

· We want to assign the values of these properties after the Application’s creationComplete event is dispatched.

· Otherwise, the run-time properties might not be available when we try to assign their values to local variables.

· The following example defines the variableInFlexSide and binds them to the text of Label controls in the initFlashVars () method:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark"

creationComplete="initFlashVars()">

<fx:Script>

<![CDATA[

import mx.core.FlexGlobals;

/**

* Declare bindable properties in Application scope.

[Bindable]

public var localVariable:String;

/**

* Assign values to new properties.

private function initFlashVars():void

{

localVariable
=FlexGlobals.topLevelApplication.parameters.variableInFlexSide;

}

]]>

</fx:Script>

<s:HGroup>

<s:Label text="Varible Value : "/>

<s:Label text="{localVariable}"

fontWeight="bold"/>

</s:HGroup>

</s:Application>