Data exchange between flex and java script, 2007

475 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
475
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Data exchange between flex and java script, 2007

  1. 1. Data  exchange  between  Flex  and  JavaScript    There  are  few  ways  to  manage  data  exchange  between  Adobe  Flex  and  JavaScript:  Method  1:   XMLHTTP   Fetch  Data   Process  Data   JavaScript  Data   Request  To   with  Flex   on  Server   Server   from  Server    This  method  obtains  data  from  JavaScript  source,  for  example  mxGraph  application,  posts  this  data  via  XMLHTTP  to  server  side,  on  server  side  data  converted  into  our  application  format  with  XSLT  transformation  and  send  back  to  our  Flex  via  Flex  Sockets  or  any  other  notification  services.  Pros   • Support  for  XSL-­‐T  v.2.0,     • templates  can  be  extended  with  custom  XSL-­‐T  objects,     • browser  independent  transformation  capabilities  Cons   • Low  interaction  speed.     • Every  operation  requires  at  least  two  connections  server.  One  is  for  JavaScript  XMLHTTP  post,   one  for  retrieving  data  from  server  after  transformation.  Method  2:   Transform  data  on   Send  Data  Directly   JavaScript  Data   Cleint  Side   to  Flex    This  method  is  way  flexible  and  much  faster  since  all  operations  done  in  real  time.  This  method  uses  Flex  Externals  interface  for  direct  communication  between  Flex  and  JavaScript.    More  detailed  with  scripting  examples  you  can  read  below.  Pros   • Instant  communication  between  Flex  and  JavaScript.     • No  server  side  required  for  data  transformation.  Cons   1   • Browser  dependency  for  data  transformation  via  XSL-­‐T.  Very  few  implementations  of  XSL-­‐T   available  for  existed  browsers.  Future  browser  upgrades,  new  versions  could  affect   Evgenios  Skitsanos,  Skitsanos  Inc.  |  info@skitsanos.com    
  2. 2. functionality.  Unfortunately  there  are  no  Flex/ActionScript  XSLT  transformers  available;  this  is   the  reason  of  using  JavaScript  based  libraries  to  transform  data.   • There  is  no  way  to  extend  XSL-­‐T  templates  with  custom  objects  that  is  might  be  required  in  the   future.  Data  exchange  Sample      Requirements   • Adobe  Flex  2;   • Google  AXSLT  JavaScript  Library;   • Web  browser  with  JavaScript  Support;  First  thing  we  have  to  do  is  to  create  little  Flex  Application  that  would  handle  our  requests  from  JavaScript  side.  To  do  that  we  can  create  empty  application  instance  in  Flex  and  in  mx:Script  section  we  need  to  add  imports  for  Flex  Externals:   import  flash.external.*;  Next,  we  need  to  create  functions  that  would  handle  our  Flex/JavaScript  application  functionality:   public  function  PassEmptyModel():String     {          return  <Model><MyModelData/></Model>;    }    public  function  receiveModel(s:String):void      {          txtSource.text  =  s;    }  Additionally  we  need  to  register  these  functions  as  External  Interface  Callbacks:   public  function  initApp():void     {          //getEmptyModel  would  be  JavaScript  function            ExternalInterface.addCallback("getEmptyModel",PassEmptyModel);          ExternalInterface.addCallback("sendModel",receiveModel);    }  Basically  that’s  all  that  we  need  on  Flex  side.  Now  we  need  to  switch  into  JavaScript  side  and  make  our  page  “talking”  to  Flex  application.   2  First  we  need  to  add  SWFObject  handler  to  automate  our  Flex  application  embedding  (see  Evaluating  Flex  Accessibility  document  for  more  information).  To  do  that,  add  in  to  HTML  <head/>  section:   Evgenios  Skitsanos,  Skitsanos  Inc.  |  info@skitsanos.com    
  3. 3. <!-­‐-­‐  SWF  Object  Support  -­‐-­‐>     <script  type="text/javascript"  src="ria/swfobject.js"></script>      Another  major  library  we  need  to  include  into  our  html  page  is  Google’s  XSL-­‐T  support  that  we  would  use  for  data  transformation:   <!-­‐-­‐  Google  XSLT  Support  -­‐-­‐>     <script  src="ria/misc.js"  type="text/javascript"></script>    <script  src="ria/dom.js"  type="text/javascript"></script>    <script  src="ria/xpath.js"  type="text/javascript"></script>   <script  src="ria/xslt.js"  type="text/javascript"></script>  Now  we  need  to  initialize  our  Flex  application,  add  onload="ini  ();”  into  <body/>  and  actutal  init()  function  is  below:   function  init()   {   //render  Flex  Application   var  so  =  new  SWFObject("flex_bin/jetstream.swf",  "mxjsapp",  "300",  "250",  "9",  "transparent");       so.write(mxContainer);     logging  =  true;   xsltdebug  =  true;   };  Last  two  variables  are  coming  from  Google  XSL-­‐T  library  and  allow  us  to  log  library  activity  and  have  some  debug  output  on  processing.  Next  thing  we  have  to  do  is  to  add  our  JavaScript  functions  that  will  handle  data  and  send  it  to  Flex:   //define  data  source:   var  modelSource  =  <mxGraphModel><root><Workflow  label="MyWorkflow"  description=""   id="0"/><Layer  label="Default  Layer"  description=""><mxCell   parent="0"/></Layer></root></mxGraphModel>;   function  showEmptyModel()   {          document[mxjsapp].sendModel(modelSource);     };         3   function  sendModel()   {   /*   Evgenios  Skitsanos,  Skitsanos  Inc.  |  info@skitsanos.com    
  4. 4.  *  send  data  back  to  flex  application    */   document[mxjsapp].sendModel(transformXml(modelSource));   }   function  transformXml(xmlSource)   {   var  xml  =  xmlParse(xmlSource);   var  xslt  =  xmlParse(Waml.Utils.el(xslt).value);   var  html  =  xsltProcess(xml,  xslt);     Waml.Utils.el(htmldisplay).innerHTML  =  html;   return  html;   }                Full  source  code    Flex  Side  <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()"layout="absolute" borderColor="#0080ff" cornerRadius="7" width="100%" height="100%"backgroundGradientColors="[#004080, #64b1ff]"> <mx:Script> <![CDATA[ import flash.external.*; public function initApp():void { //getEmptyModel would be JavaScript function ExternalInterface.addCallback("getEmptyModel",PassEmptyModel); ExternalInterface.addCallback("sendModel",receiveModel); } public function PassEmptyModel():String { return <Model><MyModelData/></Model>; } public function receiveModel(s:String):void { txtSource.text = s; } ]]> </mx:Script> 4   <mx:Panel width="426" height="200" layout="absolute" title="Flex/JavaScriptConsole" horizontalCenter="0" verticalCenter="-20" backgroundColor="#0080c0"> Evgenios  Skitsanos,  Skitsanos  Inc.  |  info@skitsanos.com    
  5. 5. <mx:TextArea x="0" y="0" width="100%" height="100%" id="txtSource"cornerRadius="11" borderColor="#004080"/></mx:Panel></mx:Application>  HTML/JavaScript  Side  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Flex/JavaScript Data Exchange</title> <!-- Google XSLT Support --> <script src="ria/misc.js" type="text/javascript"></script> <script src="ria/dom.js" type="text/javascript"></script> <script src="ria/xpath.js" type="text/javascript"></script> <script src="ria/xslt.js" type="text/javascript"></script> <!-- SWF Object Support --> <script type="text/javascript" src="ria/swfobject.js"></script> <script type="text/javascript" src="waml-utils.js"></script> <link type="text/css" href="mx.css" rel="stylesheet"/> </head> <body onload="init();"> <div id="mxContainer" style="float:left;"></div> <script type="text/javascript"> //create empty model var modelSource = <mxGraphModel><root><Workflowlabel="MyWorkflow" description="" id="0"/><Layer label="Default Layer"description=""><mxCell parent="0"/></Layer></root></mxGraphModel>; function init() { //render Flex Application var so = new SWFObject("flex_bin/jetstream.swf", "mxjsapp", "300", "250", "9","transparent"); so.write(mxContainer); logging = true; xsltdebug = true; }; function showEmptyModel() { document[mxjsapp].sendModel(modelSource); }; function sendModel() { /* * send data back to flex application */ document[mxjsapp].sendModel(transformXml(modelSource)); 5   } function transformXml(xmlSource) { Evgenios  Skitsanos,  Skitsanos  Inc.  |  info@skitsanos.com    
  6. 6. var xml = xmlParse(xmlSource); var xslt = xmlParse(Waml.Utils.el(xslt).value); var html = xsltProcess(xml, xslt); Waml.Utils.el(htmldisplay).innerHTML = html; return html; } </script> <div id="containerControls" style="margin-left:30px;"> <a href="javascript:showEmptyModel();">Send empty model to Flex</a> <a href="javascript:sendModel();">Transform Model and send it to Flex</a> </div> <div id="htmldisplay"></div> <hr/> <div id="containerTemplate" style="float:left; margin-left:30px;"> <textarea id="xslt" rows="10" style="width:600px; border:solid 2px #666666;"> <xsl:stylesheet> <xsl:template match="/"> <Application> <xsl:attribute name="title"> <xsl:value-of select="//Workflow/@label"/> </xsl:attribute> </Application> </xsl:template> </xsl:stylesheet> </textarea> </div> </body></html>     6   Evgenios  Skitsanos,  Skitsanos  Inc.  |  info@skitsanos.com    

×