在Android程序上，创建你的第一个基于AIR的Flex

Adobe Flash Builder 4 简体中文正式版 Windows版点击下载:http://g.csdn.net/5134151

Adobe Flash Builder 4 简体中文正式版 Mac版点击下载 ：http://g.csdn.net/5134152

Adobe 在线课堂：http://adobev.csdn.net/zx/index.html 
Adobe平台技术峰会课程视频：http://adobev.csdn.net/

 

Flex Builder Burrito 终于来了。我知道急于开始在Android 程序上，创建你的第一个Flex 。这篇指南会带着你了解，如何在Android 程序上，为你的Adobe AIR 创建你的第一个Flex Multi Screen 程序。

让我们来一起看看如何创建你的第一个程序。

下载Flash Builder Package and Source - AIRFlexonAndroid.fxp

第一步：选择File -> New -> Flex Mobile Project

 

第二步：输入项目名称；AIRFlexonAndroid

 

第三步：确保选择了Google Android 和 Mobile Application 。

第四步：保持debug path 的现有状态，点击next ，因为我们不会使用程序服务器。

 

第五步：直接点击Finish.

这样创建了一个新的Flex 移动程序。注意，缺省文件和初始视图都是自动生成的。

 

好了，现在我们有了项目，就开始更新代码。为了做这个简单的演示，我们会创建一个导航系统和几个屏幕。

创建主页导航

打开名为AIRFlexonAndroid.mxml 的缺省文件，在. 之后添加以下代码。这样会添加一个按钮，按钮被点击后，会告诉内置导航器到popToFirstView 。你会问了，哪个是第一个视图？Android 导航上的Flex AIR 是基于ViewNavigators 的，所以要改变视图，你只要告诉导航器该做什么，导航系统会做出相应反应。注意，在标签里，firstView 属性设置到views.AIRFlexonAndroidHome 上，这文件在你创建项目时，自动生成。所以，当你点击主页按钮时，你认为会发生什么呢？是的， views.AIRFlexonAndroidHome 视图会上载。

view plain

1. <s:navigationContent>           
2.         <s:Button label="Home" click="navigator.popToFirstView()"/>         
3.     </s:navigationContent>  

 

你的AIRFlexonAndroid.mxml 文件应该有以下代码；

  
  
  
  

   
   
   
   
 
    

      view plain 
    
 
   
   
   
   
   
 
    
<?xml version="1.0" encoding="utf-8"?>  
 
    
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"   
 
    
                     xmlns:s="library://ns.adobe.com/flex/spark"   
 
    
                     firstView="views.AIRFlexonAndroidHome">  
 
    
    <fx:Declarations>  
 
    
        <!-- Place non-visual elements (e.g., services, value objects) here -->  
 
    
    </fx:Declarations>  
 
    
      
 
    
    <s:navigationContent>           
 
    
        <s:Button label="Home" click="navigator.popToFirstView()"/>         
 
    
    </s:navigationContent>  
 
    
      
 
    
</s:MobileApplication>  
 
   
  
  
  
  






添加屏幕： 

下一步，我们向AIRFlexonAndroidHome.mxml 文件添加一些内容。从视图包内打开这个文件，在：之后添加下面的代码：

view plain

1. <s:Button label="Go To Screen 1"   
2.         click="navigator.pushView(views.Screen1)"  
3.         horizontalCenter="0"  
4.         verticalCenter="0"/>  

 

你的AIRFlexonAndroidHome.mxml 文件应该如下所示：

view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.         xmlns:s="library://ns.adobe.com/flex/spark" title="Home">  
4.     <fx:Declarations>  
5.         <!-- Place non-visual elements (e.g., services, value objects) here -->  
6.     </fx:Declarations>  
7.       
8.     <s:Button label="Go To Screen 1"   
9.               click="navigator.pushView(views.Screen1)"  
10.               horizontalCenter="0"  
11.               verticalCenter="0"/>  
12.       
13. </s:View>  

 

注意，在AIRFlexonAndroidHome.mxml 文件里，我们有一个按钮，具有navigator.pushView 的点击动作(views.Screen1) 。它会告诉导航仪更改到views.Screen1 。但是，我们还没有创建这个文件。为了创建一个新的视图，右击视图包，选定New -> MXML Component 。提供名称Screen1 ，点击Finish 。

 

 

现在，使用下面的代码更新Screen1 。注意，我们现在有两个按钮，一个使用navigator.popToFirstView()函数设置到Go Home ，另外一个调用navigator.pushView(views.Screen2) 函数设置到Go To Screen 2 。注意，标题属性设置到Screen1 。这点对导航来说很重要。

view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.         xmlns:s="library://ns.adobe.com/flex/spark" title="Screen 1">  
4.     <fx:Declarations>  
5.         <!-- Place non-visual elements (e.g., services, value objects) here -->  
6.     </fx:Declarations>  
7.        
8.     <s:VGroup horizontalCenter="0" verticalCenter="0">  
9.         <s:Label text="I am screen 1"/>  
10.           
11.         <s:Button label="Go Home"   
12.                   click="navigator.popToFirstView()"/>  
13.           
14.         <s:Button label="Go To Screen 2"   
15.                   click="navigator.pushView(views.Screen2)"/>      
16.     </s:VGroup>  
17.       
18. </s:View>  

 

重复该过程，创建Screen2.mxml ，更新到下列代码。Screen 2 也有两个按钮，一个标题设置到Screen 2 。

 

view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.         xmlns:s="library://ns.adobe.com/flex/spark" title="Screen 2">  
4.     <fx:Declarations>  
5.         <!-- Place non-visual elements (e.g., services, value objects) here -->  
6.     </fx:Declarations>  
7.       
8.     <s:VGroup horizontalCenter="0" verticalCenter="0">  
9.         <s:Label text="I am screen 2"/>  
10.           
11.         <s:Button label="Go Home"   
12.                   click="navigator.popToFirstView()"/>  
13.           
14.         <s:Button label="Go To Screen 1"   
15.                   click="navigator.pushView(views.Screen1)"/>      
16.     </s:VGroup>  
17.        
18. </s:View>  

 

在模拟器中运行：

在这点，我们现在可以在模拟器中运行程序。打开AIRFlexonAndroid.mxml 文件，点击play 按钮，选择Run As -> Mobile Application ，下面的窗口会打开。

 

在桌面上选定作为Launch 方法，然后选择模拟的设备。点击Apply ，然后是Run.

模拟器会打开，你就能使用程序内的按钮或顶部的Home 按钮在程序里“ 遨游了” 。注意顶部导航栏中的home按钮的右边的屏幕名称。这由我之前提到的View 标题属性控制。

 

好了。一个运行在模拟器上的，以Android 程序构建的基于AIR 的Flex 程序完成了。

 

运行在设备上

你有一个Android 设备? 很好。你可以继续读下去了。将你的设备插入USB 端口，点击Run -> Run Configurations 。

 

这次，更改 Launch 方法到 On device ，点击 Run 。（你可能会看到一个屏幕跳出来，让你刷新，以找到你的设备，但是更有可能你的程序会直接发送到设备上，如下所示，Droid2 ）。

 

 

 

本文译自：http://insideria.com/2010/10/create-your-1st-flex-based-air.html