New Flash Builder 4 WSDL and HTTP Connectors


Published on

MAX 2009 tutorial on how to use the new WSDL and HTTP Connectors built into Flash Builder 4

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

New Flash Builder 4 WSDL and HTTP Connectors

  1. 1. New  Flash  Builder  4  WSDL  and   HTTP  Connectors     Java  SDK:     To  run  a  Tomcat  server,  you  must  download  a  Java  SDK  and   setup  a  JAVA_HOME  environmental  variable.     Windows:     • Right click on the My Computer icon on your desktop and select properties • Click the Advanced Tab • Click the Environment Variables button • Under System Variable, click New • Enter the variable name as JAVA_HOME • Enter the variable value as the install path for the Development Kit (Ex: C:j2sdk1.4.2) • Click OK • Click Apply Changes
  2. 2.     MAC  OS  X     • Open Terminal. • First confirm you have JDK by typing “which java”. It should show something like /usr/bin/java. • Check you have the needed version of Java, by typing “java -version”. My setup shows java version “1.5.0_13″ • JAVA_HOME is essentially the full path of the directory that contains a sub-directory named bin which in turn contains the java. • For Mac OSX – it is /Library/Java/Home (There are other directories too, but this is the simplest!)
  3. 3. • Set JAVA_HOME using this command in Terminal: export JAVA_HOME=/Library/Java/Home • echo $JAVA_HOME on Terminal to confirm the path • You should now be able to run your application   Start  the  Server:     Before  we  can  use  Flash  Builder  to  access  our  services,  we   need  to  start  up  the  Tomcat  server.  To  do  so  please  follow   the  steps  below:     WINDOWS:   Open  console  window  and  navigate  to  your  BlazeDS  install   directory:      cd  <BlazeDS  Root>BlazeDStomcatbin   Now  enter  cataina  run  to  start  up  the  Tomcat  server.        
  4. 4. MAC:     Open  terminal  window.  Navigate  to  your  install  directory,   in  my  case  it  is  located  in  my  Applications  folder:      cd    <BlazeDS  Root>/BlazeDS/tomcat/bin   Now  enter  ./  to  start  up  the  Tomcat  server.       TEST  the  Server:   Test  to  make  sure  your  server  is  running  by  opening  a   browser  and  navigating  to:   http://localhost:8400/xml/Wines.xml   http://localhost:8400/json/Wines.json  
  5. 5. http://localhost:8400/axis/MyWebService.jws?wsdl   http://localhost:8400/crossdomain.xml   Notice  the  last  of  the  URL’s  listed  above  is  titled   crossdomain.xml.  This  file  is  required  for  the  FlashPlayer  to   access  data  services  hosted  on  remote  domains.    How  does   it  work?   When  a  Flash  document  attempts  to  access  data  from  another   domain,  Flash  Player  automatically  attempts  to  load  a  policy   file  from  that  domain.  If  the  domain  of  the  Flash  document   that  is  attempting  to  access  the  data  is  included  in  the  policy   file,  the  data  is  automatically  accessible.   Policy  files  must  be  named  crossdomain.xml,  and  can  reside   either  at  the  root  directory  or  in  another  directory  on  the   server  that  is  serving  the  data  with  some  additional   ActionScript.  Policy  files  function  only  on  servers  that   communicate  over  HTTP,  HTTPS,  or  FTP.  The  policy  file  is   specific  to  the  port  and  protocol  of  the  server  where  it   resides.           A  very  simplified  example  of  a  crossdomain.xml  file  is:   <cross-­‐domain-­‐policy>   <allow-­‐access-­‐from  domain="*"/>   <site-­‐control     permitted-­‐cross-­‐domain-­‐policies="master-­‐only"/>   </cross-­‐domain-­‐policy>  
  6. 6. For  more  information  on  crossdomain.xml  please  visit: cy_file_spec.html     Lab  0:  Creating  a  Flash  Builder  Project     We  will  be  creating  multiple  Flash  Builder  projects  within   this  lab,  so  before  we  start  integrating  data,  lets  create  our   first  Flash  Builder  project.     Step  1:  Create  a  new  Flash  Builder  project       Select  File  >  New  Flex  Project  from  the  main  menu         Title  the  project  Lab1  and  choose  Web  (runs  in  Adobe   Flash  Player)  within  the  Application  type.     Set  the  Application  server  type  to  J2EE  and  select  the   BlazeDS  radio  button  and  click  Next.    
  7. 7.   Click  Next  and  fill  in  the  necessary  information  to  connect   to  your  BlazeDS  server.  Note  that  your  Root  folder  may  be   different  than  what  is  shown  below.       In  my  case  the  Root  folder  is   /Applications/BlazeDS/tomcat/webapps/blazeds  and  the   Root  URL  is  http://localhost:8400/blazeds  and  the  Context   root  is  /blazeds.  Click  Validate  Configuration.  
  8. 8.   Now  click  Finish.            
  9. 9. Lab  1:  Code  View     (MXML  and  AS3  to  get  REST  Data)     Section  1:  Connect  to  data  using  MXML     Open  the  project  created  above  named  Lab1.     To  define  the  service,  we  need  to  add  an  <fx:Declarations>   block  to  wrap  the  HTTPService.  Note:  this  is  something  that   is  new  to  Flex  4.  Within  the  declarations  nested  tags,  you   will  notice  the  <mx:HTTPService/>  tag.  This  tag  defines  the   service  operation.  The  attributes  define  the  id,  expected   result  format,  URL  of  the  service,  whether  or  not  to  use  the   proxy  (more  on  this  later),  and  the  callback  functions  for   successful  or  failed  operations.     <fx:Declarations> <mx:HTTPService id="wines" resultFormat="e4x" url="http://localhost:8400/xml/Wines.xml" useProxy="false" result="parseXML(event)" fault="trace(event.fault)"/> </fx:Declarations>     Next,  add  the  <fx:Script>  block  defined  below.     <fx:Script> <![CDATA[ import mx.collections.XMLListCollection; import; private function parseXML(event:ResultEvent):void{ var xml:XML = event.result as XML; dg.dataProvider = xml["Vintage"];
  10. 10. } ]]> </fx:Script>   If  you  look  at  the  script  block  above  you  will  notice  the   parseXML()  function.  This  is  the  callback  function  that  we   previously  discussed  which  will  parse  out  the  XML  that  is   returned  on  a  successful  service  call.     Finally  we  need  some  UI  elements  to  trigger  the  call  and  to   display  the  data.  Add  the  component  declarations  below  to   your  application.     <mx:VBox horizontalCenter="0"> <mx:DataGrid id="dg"> <mx:columns> <mx:DataGridColumn headerText="Vintner" dataField="Vintner" /> <mx:DataGridColumn headerText="Name" dataField="Name" /> <mx:DataGridColumn headerText="Vintage" dataField="Vintage" /> <mx:DataGridColumn headerText="ParkerNotation" dataField="ParkerNotation" /> <mx:DataGridColumn headerText="Price" dataField="Price" /> </mx:columns> </mx:DataGrid> <mx:HBox> <s:Button click="wines.send()" label="Get Wines MXML"/> </mx:HBox> </mx:VBox>     Examining  the  code  above  you  will  notice  that  we  have  a   DataGrid  with  an  id  of  dg  that  contains  five  columns  that   match  the  XML  nodes.  There  is  also  a  Button  that  is  used  to   trigger  the  wines  service.  
  11. 11.   Save  you  file  and  run  the  application  and  you  should  see   the  following  after  clicking  the  Get  Wines  button.         Section  2:  Connect  to  data  using  AS3     In  Section  1  of  Lab  1  we  utilized  MXML  to  call  our  service,   we  can  also  call  the  service  using  ActionScript.       Add  the  function  below  to  the  <fx:Script>  block  of  Lab1.     private function getWines():void{ var service:HTTPService = new HTTPService(); service.resultFormat = "e4x"; service.url="http://localhost:8400/xml/Wines.xml"; service.useProxy=false; service.addEventListener(ResultEvent.RESULT,parseXML); service.send(); } Notice  that  we  have  many  of  the  same  properties  set  as   were  declared  within  the  MXML  component.  By  setting  the  
  12. 12. event  listener  for  the  successful  call,  we  are  able  to  reuse   the  parseXML()  function.       Now,  simply  add  a  few  buttons  below  the  Get  Wines  MXML   to  call  the  getWines()  function  and  clear  the  data  button:   <s:Button click="getWines()" label="Get Wines AS3"/> <s:Button click="dg.dataProvider=null" label="Clear Datagrid"/> Save  your  file,  run  the  project,  and  click  on  the  new  Get   Wines  AS3  button  and  you  should  see  the  results  shown   below.                      
  13. 13. Lab  2:  Code  View     (MXML  and  AS3  to  get  WSDL  Data)     Create  a  new  project  named  Lab2  (as  demonstrated   previously  in  Lab0)     Add  the  following  declarations  tag  to  define  the  connection   to  the  WSDL:   <fx:Declarations> <mx:WebService id="myWebService" wsdl="http://localhost:8400/axis/MyWebService.jws?wsdl" useProxy="false" result="parseResult(event)" fault="trace(event.fault)"/> </fx:Declarations>     Next  add  a  script  block  below  the  declarations  block  to   handle  the  service  result.     <fx:Script> <![CDATA[ import; private function parseResult(event:ResultEvent):void{ lbl.text = event.result as String; } ]]> </fx:Script> Finally,  add  a  Label  component  to  display  the  service   results.     <mx:Label id="lbl" fontSize="36" creationComplete="myWebService.hello()" horizontalCenter="0" verticalCenter="0"/>
  14. 14.   Run  the  project  and  you  should  see  the  message  shown   below:                                          
  15. 15. Lab  3:  Design  View     (Using  Flash  Builder  to  get  REST  data)   Now  that  we  have  looked  at  several  ways  to  connect  to  data   services,  lets  take  a  look  at  how  the  new  Flash  Builder   tooling  creates  data  connections.       Create  a  new  project  named  Lab3  (as  demonstrated   previously  in  Lab0)     Next,  click  on  the  Connect  to  Data  /  Services  link  within  the   Data  /  Services  view.         Select  HTTPService  from  the  New  Flex  Service  window.    
  16. 16.   Click  Next  and  you  will  see  the  Configure  HTTP  Service   form.     Enter  getWines  for  the  Operation  name  and   http://localhost:8400/xml/Wines.xml  for  the  URL  within  the  
  17. 17. Operations  Grid.  Then  enter  WinesService  for  the  Service   Name  and  click  Finish.       You  should  now  see  the  new  service  defined  within  the   Data  /  Services  view.    
  18. 18.     Switch  your  project  to  Design  View  and  drag  a  DataGrid   component  from  the  Components  view  onto  the  stage.     Right  click  on  the  DataGrid  component  and  select  Bind  To   Data.         The  Bind  To  Data  window  will  open.    
  19. 19.     Before  you  can  select  the  service,  you  need  to  configure  the   return  type.  Click  on  the  Configure  Return  Type  button  and   the  Configure  Operation  Return  Type  window  will  open.      
  20. 20.   Leave  the  radio  button  set  to  Auto  detect  and  click  Next.     In  Step  2,  leave  the  radio  button  set  to  Enter  parameter   values  and  click  Next.    
  21. 21.   Within  Step  3,  select  Vintage  from  the  Select  Node  drop   down  menu  and  click  Finish.    
  22. 22.     Now  click  OK  to  close  the  Bind  To  Data  window  and  you   should  see  the  DataGrid  now  has  the  column  names   defined.    
  23. 23.   Run  the  project  and  you  will  see  your  data!                      
  24. 24. Lab  4:  Design  View     (Using  Flash  Builder  to  get  WSDL  data)     Create  a  new  project  named  Lab4  (as  demonstrated   previously  in  Lab0)     Section  1:  Connect  to  a  WSDL  within  Design   View     Next,  click  on  the  Connect  to  Data  /  Services  link  within  the   Data  /  Services  view.         Select  WSDL  from  the  New  Flex  Service  window.    
  25. 25.   Click  Next  and  the  Specify  WSDL  to  Introspect  form  will   open.  Enter  a  WSDL  URI  of   http://localhost:8400/axis/MyWebService.jws?wsdl  and  if   it  doesn’t  automatically  create  one,  enter  a  Service  Name  of   MyWebService.    
  26. 26.   Click  Next  and  the  Configure  Code  Generation  form  will   open.  Click  Select  All  to  generate  the  code  for  the  hello()   and  personalHello()  web  service  operations.  Now  click   Finish.  
  27. 27.   Switch  the  editor  to  Design  View  and  from  within  the   Properties  panel,  change  the  applications  layout  to   sparks.layouts.VerticalLayout.  
  28. 28.   Now  drag  a  TextInput  component  onto  the  stage,  right  click   on  it  and  select  Bind  To  Data.       Select  the  MyWebService  /  hello()  from  the  New  Service   Call  combo  boxes    and  click  OK.    
  29. 29.   You  should  now  see  the  following:         Run  the  application  and  you  should  again  see  a  welcome   message.      
  30. 30. Section  2:  Connect  to  a  WSDL  with  Form   Generation     When  we  created  the  service  connection  to  the   MyWebService  WSDL,  there  were  two  operations.  In   Section  1  above  we  connected  to  the  simple  hello()  method   which  did  not  have  any  required  arguments.     The  second  method  personalHello()  has  two  incoming   String  arguments.  Flash  Builder  has  another  new  feature   that  will  do  some  quick  code  generation  to  connect  to  this   WSDL.     To  create  a  form  to  access  the  WSDL,  right  click  on  the   personalHello()  method  and  select  Generate  Form.    
  31. 31.     The  Generate  Form  window  will  open.  You  can  leave  all  as   is  and  just  click  Next.  
  32. 32.   The  next  screen  is  the  Property  control  mapping  screen.   Again  for  the  purposes  of  this  demo,  you  can  leave  it  all  as   is  and  just  click  Finish.    
  33. 33.     You  should  now  see  a  new  form  that  has  been  generated  on   stage.    
  34. 34.   Go  ahead  and  run  the  application,  fill  in  you’re  first  and  last   name  and  click  the  PersonalHello  button  and  you  should   see  something  like  what  is  shown  below.             Lab  5:  Accessing  a  Proxy  Defined   Service  
  35. 35.   To  use  a  proxy  configuration  rather  than  hard  coding  the   service  URL  within  the  application,  we  will  need  to  make   some  edits  to  the  BlazeDS  configuration  files.     Navigate  to:     Install directory/BlazeDS/tomcat/webapps/blazeds/WEB- INF/flex Open the proxy-config.xml file within a text editor. (TextEdit on Mac or NotePad on Windows) To define the web service, you will need to add the following within the <service> node right above the last </service> tag: <destination id="MyWebService" adapter="soap-proxy"> <properties> <wsdl> http://localhost:8400/axis/MyWebService.jws?wsdl </wsdl> <soap> http://localhost:8400/axis/MyWebService* </soap> </properties> </destination> You will now need to restart the BlazeDS server so that the newly defined service is available to FlashBuilder. Now, as we have done previously done, click on Connect to Data/Service within the Data/Service panel.
  36. 36.     Select  WSDL  from  the  New  Flex  Service  window.    
  37. 37.       Next  select  the  Through  a  LCDS/BlazeDS  proxy  destination   and  after  a  few  second  you  should  be  able  to  select  the   MyWebService  destination  from  the  Destination  combo   box.      
  38. 38.   Click  Next  and  the  Configure  Code  Generation  form  will   open.  Click  Select  All  to  generate  the  code  for  the  hello()   and  personalHello()  web  service  operations.  Now  click   Finish.  
  39. 39.       Switch  the  editor  to  Design  View  and  from  within  the   Properties  panel,  change  the  applications  layout  to   sparks.layouts.VerticalLayout.  
  40. 40.   Now  drag  a  TextInput  component  onto  the  stage,  right  click   on  it  and  select  Bind  To  Data.       Select  the  MyWebService  /  hello()  from  the  New  Service   Call  combo  boxes    and  click  OK.    
  41. 41.   You  should  now  see  the  following:         Run  the  application  and  you  should  again  see  a  welcome   message.      
  42. 42. Section  2:  Connect  to  a  WSDL  with  Form   Generation     When  we  created  the  service  connection  to  the   MyWebService  WSDL,  there  were  two  operations.  In   Section  1  above  we  connected  to  the  simple  hello()  method   which  did  not  have  any  required  arguments.     The  second  method  personalHello()  has  two  incoming   String  arguments.  Flash  Builder  has  another  new  feature   that  will  do  some  quick  code  generation  to  connect  to  this   WSDL.     To  create  a  form  to  access  the  WSDL,  right  click  on  the   personalHello()  method  and  select  Generate  Form.    
  43. 43.     The  Generate  Form  window  will  open.  You  can  leave  all  as   is  and  just  click  Next.  
  44. 44.   The  next  screen  is  the  Property  control  mapping  screen.   Again  for  the  purposes  of  this  demo,  you  can  leave  it  all  as   is  and  just  click  Finish.    
  45. 45.     You  should  now  see  a  new  form  that  has  been  generated  on   stage.    
  46. 46.   Go  ahead  and  run  the  application,  fill  in  your  first  and  last   name  and  click  the  PersonalHello  button  and  you  should   see  something  like  what  is  shown  below.                
  47. 47. Lab  6:  Enable  Paging  (Bonus)     One of the coolest new features of Flash Builder 4 is the Enable Paging option. We will demonstrate this by using a Java class defined as a remote object within the remoting-config.xml file. Create a new project named Lab6. Click on Connect to Data/DService     Choose BlazeDS and click Next
  48. 48. If prompted, check No password required
  49. 49.   Check the MyService checkbox and click Finish
  50. 50. Right click on the getItems_paged method within the MyService and choose Enable Paging
  51. 51.     Check Index from the Enable Paging window and click Next
  52. 52. Enter 20 as the Number of Items to fetch and set the Count operation to count() and click Finish
  53. 53. Now switch to design view, drag a DataGridto the workspace. Right click on the DataGrid and choose Bind To Data
  54. 54. Select the MyService with the Operation getItems_paged() and click OK
  55. 55. Now run the project and you will see the following. You will also notice that as you scroll the DataGrid, your data will be retrieved.
  56. 56.     Lab  7:  JSON  HTTPService  (extra  credit)     The  BlazeDS  server  also  included  a  JSON  sample  at   http://localhost:8400/json/Wines.json.   For  extra  credit,  attempt  to  connect  to  this  file  and  output   the  contents  to  a  DataGrid.  As  we  have  seen  throughout  the   examples  in  this  document,  there  are  several  ways  to   accomplish  this.     You  have  your  choice  of  manually  connecting  and  parsing   the  file  (Note:  you  will  need  to  utilize  the  JSON.decode()   function  located  in  the  com.adobe.serialization.json   package  within  the  as3corelib  located  at    
  57. 57. Or,  you  can  use  the  HTTPService  Wizard  to  connect  to  a   JSON  file,  just  as  we  had  previously  done  with  the  XML   example.   You  can  see  the  completed  solutions  in  the  Lab7A  and   Lab7B  projects.               Conclusion   If  I  have  done  my  job  properly  you  should  be  able  to  see  the   benefits  of  the  new  tooling  within  FlashBuilder  for   connecting  to  data  services.  Not  only  does  it  make  you  job  a   lot  easier,  you  also  wind  up  with  nicely  documented  and   structured  code.   It  is  also  worthwhile  to  point  out  that  although  we  didn’t   cover  it  within  this  session,  there  are  also  FlashBuilder  data   wizards  to  connect  to  BlazeDS,  ColdFusion,  LCDS,  and  PHP   services.   If  you  still  don’t  see  the  benefits  of  using  FlashBuilder  as   your  development  tool,  you  can  still  go  the  route  of  
  58. 58. manually  connecting  and  parsing  the  results  and  compiling   your  code  via  the  Free  SDK.