欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

Flex开发入门

星期二, 2016-12-06 17:18 — adminshiping1
1.环境部署
eclipse-jee-indigo-SR1-win32.zip  http://www.eclipse.org/downloads/
apache-tomcat-7.0.23-windows-x86.zip
 
安装完FlashBuilder后，可以将其作为插件安装到eclipse中，方法是执行D:\Program Files\adobe\Adobe Flash Builder 4.6\utilities\Adobe Flash Builder 4.6 Plug-in Utility.exe。eclipse 中安装flash builder 4.6后变中文了，解决方法：
找到Eclipse目录下的eclipse.ini文件，在首行添加一句、
 -nl
 en_US
 成功解决问题，注意不能写在一行。
blazeds解压备用，tomcat作为服务器。
 
 
2.创建FlexDemo工程
创建一个Flex工程，关键步骤如下

 
 
写两个简单的java类，为前端的Flex提供数据，flex通过RemoteObject对像与java通信 
Customer.java
[java] view plain copy
 
 print?
  1. package com.sample;  
  2.   
  3. public class Customer {  
  4.        private String name;  
  5.        private int age;  
  6.        private String email;  
  7.          
  8.        public Customer(String name, int age, String email) {  
  9.               this.name = name;  
  10.               this.age = age;  
  11.               this.email = email;  
  12.        }  
  13.          
  14.        public String getName() {  
  15.               return name;  
  16.        }  
  17.   
  18.        public void setName(String name) {  
  19.               this.name = name;  
  20.        }  
  21.   
  22.        public int getAge() {  
  23.               return age;  
  24.        }  
  25.   
  26.        public void setAge(int age) {  
  27.               this.age = age;  
  28.        }  
  29.   
  30.        public String getEmail() {  
  31.               return email;  
  32.        }  
  33.   
  34.        public void setEmail(String email) {  
  35.               this.email = email;  
  36.        }  
  37. }  
CustomerService.java
[java] view plain copy
 
 print?
  1. package com.sample;  
  2.   
  3. import java.util.ArrayList;  
  4.   
  5. public class CustomerService {  
  6.   
  7.        public CustomerService() {  
  8.               // TODO Auto-generated constructor stub  
  9.        }  
  10.          
  11.        public ArrayList<Customer> getList() {  
  12.               ArrayList<Customer> tempList = new ArrayList<Customer>();  
  13.                 
  14.               for (int i = 1; i<=5; i++) {  
  15.                      tempList.add(new Customer("Tom"+i, 20+i, "tom"+i+"@163.com"));  
  16.               }  
  17.               return tempList;  
  18.        }  
  19. }  
 
修改WebContent/WEB-INF/Flex/remoting-config.xml文件，增加一个destination结点，建立Flex与java类之间的联系
[html] view plain copy
 
 print?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <?xml version="1.0" encoding="UTF-8"?>  
  3. <service id="remoting-service" class="flex.messaging.services.RemotingService">  
  4.   
  5.        <adapters>  
  6.               <adapter-definition id="java-object"  
  7.                      class="flex.messaging.services.remoting.adapters.JavaAdapter"  
  8.                      default="true" />  
  9.        </adapters>  
  10.   
  11.        <default-channels>  
  12.               <channel ref="my-amf" />  
  13.        </default-channels>  
  14.   
  15.        <destination id="customerServiceDest">  
  16.               <properties>  
  17.                      <source>com.sample.CustomerService</source>  
  18.               </properties>  
  19.        </destination>  
  20.   
  21. </service>  
 
FlexDemo.mxml中添加一个DataGrid组件，使用RemoteObject对象获取远程java类中的数据，并填充到DataGrid组件中 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
[html] view plain copy
 
 print?
  1.                         xmlns:s="library://ns.adobe.com/flex/spark"  
  2.                         xmlns:mx="library://ns.adobe.com/flex/mx"  
  3.                         minWidth="955" minHeight="600" creationComplete="init();  
  4.                         ">    
  5.        <fx:Declarations>  
  6.               <!-- Place non-visual elements (e.g., services, value objects) here -->  
  7.               <mx:RemoteObject id="customerServiceR" destination="customerServiceDest"  
  8.                                           fault="faultHandler(event);" result="resultHandler(event);"  
  9.                                           endpoint="http://localhost:8080/FlexDemo/messagebroker/amf"/>  
  10.        </fx:Declarations>  
  11.        <fx:Script>  
  12.               <![CDATA[ 
  13.                      import mx.collections.ArrayCollection; 
  14.                      import mx.controls.Alert; 
  15.                      import mx.rpc.events.FaultEvent; 
  16.                      import mx.rpc.events.ResultEvent; 
  17.                                           
  18.                      [Bindable] 
  19.                      private var customerList:ArrayCollection ; 
  20.                       
  21.                      private function init():void { 
  22.                            customerServiceR.getList(); 
  23.                      } 
  24.                       
  25.                      private function resultHandler(event:ResultEvent):void { 
  26.                            customerList = (event.result as ArrayCollection); 
  27.                      } 
  28.                       
  29.                      private function faultHandler(event:FaultEvent):void { 
  30.                            Alert.show(event.toString(), "Error"); 
  31.                      } 
  32.               ]]>  
  33.        </fx:Script>  
  34.        <s:DataGrid x="62" y="58" dataProvider="{customerList}">  
  35.               <s:columns>  
  36.                      <s:ArrayList>  
  37.                            <s:GridColumn dataField="name" headerText="name"></s:GridColumn>  
  38.                            <s:GridColumn dataField="age" headerText="age"></s:GridColumn>  
  39.                            <s:GridColumn dataField="email" headerText="email"></s:GridColumn>  
  40.                      </s:ArrayList>  
  41.               </s:columns>  
  42.        </s:DataGrid>  
  43. </s:Application>  
 
现在运行程序Run As ->Web Application
 
 
需要注意的是，在FlexDemo.mxml的mx:RemoteObject标签中，需要添加属性endpoint="http://localhost:8080/FlexDemo/messagebroker/amf",否则可能会提示以下错误
 
3.关于调试
如果要flex调试,需要安装debug版本的flash插件
下载地址： http://www.adobe.com/support/flashplayer/downloads.html
在chrome中输入：chrome://plugins/，打开插件列表，停用非Debuger的flash版本

来自  http://blog.csdn.net/gavinr/article/details/7253478
 
普通分类: 
flash
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2