Clipboard Copy And Paste in Flex web Application

Sometime we may  need to access clipboard data for our Applications. In flex we can easily save our data to System clipboard by using System.setClipboard() method. For security reasons getting clipboard data from flex code is not allowed.

An alternate way to get the clipboard data to flex Application is through java script by ExternalInterface.call(). Once control was transferred to javaScript we can access the clipboard data and return it to flex Application. below is the attached code

CopyAndPaste.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml ” layout=”absolute”>
<mx:TextArea id=”copyData” x=”70″ y=”96″ width=”272″ height=”65″/>
<mx:TextArea id=”pasteData” x=”70″ y=”195″ width=”272″ height=”65″/>
<mx:Button x=”417″ y=”118″ label=”Copy To Clipboard” width=”126″  click=”CopyToClipboard()”/>
<mx:Button x=”417″ y=”213″ label=”Paste From Clipboard” width=”126″ click=”PasteFromClipboard()”/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function CopyToClipboard():void{
System.setClipboard(copyData.text);
}

public function PasteFromClipboard():void{
var str2:String=ExternalInterface.call("PasteFromClipboard");
pasteData.text=str2;
}
]]>
</mx:Script>
</mx:Application>

In index.template.html (flex generated html wrapper ) place the following code inside <script> . . . </script>

function PasteFromClipboard()
{
var str=”"
var browser=navigator.appName;
if(browser==”Microsoft Internet Explorer”)
{
return (window.clipboardData.getData(‘Text’));
}
else if (window.netscape)
{
netscape.security.PrivilegeManager.enablePrivilege( ‘UniversalXPConnect’ );
this.clipboardid = Components.interfaces.nsIClipboard;
this.clipboard = Components.classes['@mozilla.org/widget/clipboard;1'].getService( this.clipboardid );
this.clipboardstring = Components.classes['@mozilla.org/supports-string;1'].createInstance( Components.interfaces.nsISupportsString );
netscape.security.PrivilegeManager.enablePrivilege( ‘UniversalXPConnect’ );
var transfer = Components.classes['@mozilla.org/widget/transferable;1'].createInstance( Components.interfaces.nsITransferable );
transfer.addDataFlavor( ‘text/unicode’ );
this.clipboard.getData( transfer, this.clipboardid.kGlobalClipboard );
var str = new Object();
var strLength = new Object();
transfer.getTransferData( ‘text/unicode’, str, strLength );
str = str.value.QueryInterface( Components.interfaces.nsISupportsString );
return str+”";
}
}

Note : The above program will work only in Internet explorer and morzilla firefox

copy to clipboard flex

Way to find Flash Debugger was installed in the system

    Some times we may not be sure whether normal flash player or Flash player debugger version was installed in our system. Flash Debugger version was required for Flash tracer, flex profiler and to capture run time flash errors

The Simple way to confirm that flash debugger version was installed in you system is by right click on a Launched SWF file in the browser and you should get the following Option as shown below

Flash Debugger Options

Flex HttpService HelloWorld

I have done a sample Http-Service HelloWorld Program . This Program illustrates  data transfer from flex to java using Http service. Data are transferred in xml format.

Step 1: Define Http Service in mxml file

<mx:HTTPService id=”reg” method=”POST” url=”reg” result=”loginres()”>
<mx:request xmlns=”">
<myname>{myname.text}</myname>
<passwd>{passwd.text}</passwd>
</mx:request>
</mx:HTTPService>

Step 2: Map the HTTPService url in web.xml

<servlet-mapping>
<servlet-name>test</servlet-name>
<url-pattern>/reg</url-pattern>
</servlet-mapping>

step 3: Call HTTPService’s send method on some event

step 4: The data Defined in HTTPService will be available in servlet that was mapped in web.xml

Step 5: Process the data in servlet  and send back to front end using  as xml string (e.g outputXML=”<status>” + name + “</status>”)

step 6: Retrieve the returned data from java in flex as shown below

<mx:ComboBox id=”resultData” dataProvider=”{reg.lastResult.status}” visible=”false” selectedIndex=”0″>
</mx:ComboBox>

The below is the deployment structure

Deployment Structure

Login.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” cornerRadius=”20″ alpha=”0.38″ themeColor=”#00ff40″ backgroundGradientColors=”[#0080ff, #0080ff]” backgroundGradientAlphas=”[0.84, 0.5]” fontFamily=”Times New Roman” fontSize=”14″ borderColor=”#00ff80″ borderStyle=”solid” >

<mx:HTTPService id=”reg” method=”POST” url=”reg” result=”loginres()”>
<mx:request xmlns=”">
<myname>{myname.text}</myname>
<passsword>{passwd.text}</passsword>
</mx:request>
</mx:HTTPService>

<mx:ComboBox id=”resultData” dataProvider=”{reg.lastResult.status}” visible=”false” selectedIndex=”0″>
</mx:ComboBox>

<mx:Label x=”157″ y=”184″ text=”login” width=”107″/>
<mx:Label x=”157″ y=”250″ text=”passwd” width=”107″/>
<mx:TextInput id=”myname” x=”318″ y=”182″/>
<mx:TextInput id=”passwd” x=”318″ y=”248″/>
<mx:Button x=”318″ y=”302″ label=”submit” click=”onsubmit()” height=”26″/>

<mx:Script>
<![CDATA[
import mx.controls.Alert;

public function onsubmit(): void{

if(myname.text=="" || passwd.text=="")

{

Alert.show("please enter the values");
}
else
{
reg.cancel();
reg.send();
}
}

public function loginres():void{
Alert.show("HelloWorld " +  "Welcome " + resultData.text);

}

]]>
</mx:Script>

</mx:Application>

loginController.java

package com.sample;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class loginController extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
doPost(request,response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException

{

String name=request.getParameter(“myname”);
String password=request.getParameter(“passwd”);

System.out.println(“\n name ” + name);
System.out.println(“\n password ” + password);

PrintWriter writer = null;
String outputXML = “”;
writer = response.getWriter();
outputXML=”<status>” + name + “</status>”;

writer.println(outputXML);

writer.flush();

writer.close();

}
}

web.xml

<?xml version=”1.0″ encoding=”ISO-8859-1″?>

<web-app xmlns=”http://java.sun.com/xml/ns/j2ee&#8221;
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221;
xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd&#8221;
version=”2.4″>

<servlet>
<servlet-name>test</servlet-name>
<servlet-class>com.sample.loginController</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>test</servlet-name>
<url-pattern>/reg</url-pattern>
</servlet-mapping>

<welcome-file-list> <welcome-file>login.swf</welcome-file> </welcome-file-list>

</web-app>

Output

BlazeDs – HelloWorld Example

BlazeDS is a server-based Java remoting technology that allows you to connect to back-end distributed data and push data in real-time to Adobe Flex and Adobe AIR rich Internet applications (RIA).

You can get more information on BlazeDs on the following link “http://livedocs.adobe.com/blazeds/1/blazeds_devguide/”>

Below Are the steps to configure and run a Sample Program Using BlazeDS

Requirement:

Apache-tomcat-6.0.18 (download zip (pgp, md5) )

FlexBuilder

Step1:
Create a folder named BlazeDs in ${Tomcat}/webapps

Step2:
Download the BlazeDS Binaries from the following link
Download the BlazeDS binary distribution and extract it to ${Tomcat}/webapps/BlazeDs

step3:
Create a java Program “HelloWorld.java” in ${tomcat}\webapps\BlazeDs\WEB-INF\classes location

public class HelloWorld

{
public HelloWorld(){}
public String sayHello()
{
return “Hello World. It’s Working”;
}
}
compile and create the class file in the same location

step4:

Add the Following node in ${tomcat}\webapps\BlazeDs\WEB-INF\flex\remoting-config.xml

<service id=”remoting-service”  class=”flex.messaging.services.RemotingService”>
. . .
. . .

<destination id=”HelloWorld”>
<properties>
<source>HelloWorld</source>
</properties>
</destination>

. . .
. . .

</service>

Step5:
Create a new Project(name “BlazeDS”) using Flex Builder.

Copy and Paste the below code in BlazeDs.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”horizontal” >
<mx:RemoteObject id=”ro” destination=”HelloWorld” result=”resultHandler(event)” fault=”faultHandler(event)”/>
<mx:Panel x=”10″ y=”10″ width=”604″ height=”643″ layout=”absolute” backgroundColor=”#DFE8EC” cornerRadius=”6″ alpha=”1.0″ backgroundAlpha=”0.52″ borderStyle=”inset” fontWeight=”bold” themeColor=”#1611EF” color=”#1B3DE8″>
<mx:TextArea id=”text” text=”initial text” x=”240″ y=”61″ width=”273″ height=”56″/>
<mx:Text x=”62″ y=”10″ text=”Blaze DS Example” width=”431″ height=”28″ fontFamily=”Georgia” fontSize=”15″ alpha=”0.58″ color=”#389AAF” textAlign=”center” fontWeight=”bold” fontStyle=”italic”/>
<mx:Button x=”244″ y=”152″ label=”Click Me” fontStyle=”italic” themeColor=”#0B0BF6″ borderColor=”#291AE6″ click=”ro.sayHello()” />
<mx:Label x=”32″ y=”62″ text=”Data Returned from the server ” width=”189″ color=”#5BA9BA”/>
<mx:Button x=”338″ y=”152″ label=”Reset” fontStyle=”italic” themeColor=”#0B0BF6″ borderColor=”#291AE6″ click=”reset()”  width=”62″/>
</mx:Panel>

<mx:Script>
<![CDATA[

import mx.controls.Alert;

import mx.rpc.events.ResultEvent;

import mx.rpc.events.FaultEvent;

import mx.utils.ObjectUtil;

import mx.utils.StringUtil;

var str:String

private function resultHandler(event:ResultEvent):void

{

text.text= ObjectUtil.toString(event.result)

}

private function faultHandler(event:FaultEvent):void

{

Alert.show( ObjectUtil.toString(event.fault) );

}

public function reset():void{

text.text="initial text";

}

]]>
</mx:Script>

</mx:Application>

set the Additional compiler arguments for Flex Compiler

-services ${tomcat}\webapps\BlazeDS\WEB-INF\flex\services-config.xml -context-root /BlazeDs

Clean and build the Project again

now copy and paste the generated output files BlazeDS.html , BlazeDS.swf and AC_OETags files to ${tomcat}\webapps\BlazeDS\

Step6:

Stop and Start your tomcat server

Hit The Following URL

http://localhost:8080/BlazeDs/BlazeDS.swf  (or)

http://localhost:8080/BlazeDs/BlazeDS.html