flex手机应用开发初步

利用flex开发手机项目的优势就是“一次开发，多处应用”而不必根据不同平台开发不同版本，因为flex手机应用时应用在air手机客户端基础上的，air运行环境就是flex程序的虚拟机，所以只要你的手机能装对应版本的air运行环境就可以运行flex手机程序。

flex开发工具flashbuilder下载:http://www.adobe.com/go/try_flashbuilder/

下载最新的flashbuilder4.6版本。

下载安装后，打开flashbuilder建立我们第一个flex的手机应用程序。

 首先选择新建选择flex手机项目，进入到新建flex手机项目的配置页面：

输入相应项目名称和目录后点击下一步，进入手机设置页面：

在此页面我们会看到平台选择，应用程序模板，手机权限，应用程序设置等。
目标平台：是指我们的应用运行在那个平台上，目前flex支持苹果的ios，谷歌的andriod和黑莓系统。
应用程序模板：flex默认提供了几种常用的模板，我们可以选择其一，或选择空白自己开发样式。
权限：目前只有安卓平台可以设置权限。

选项卡：在选择了选项卡式应用模板时，会出现这个设置页面，我们可以添加选项卡导航即在应用下方显示的切换按钮。
应用程序设置：可以设置应用的分辨率、全屏等配置。
全部配置好后，点击下一步，进入服务器设置页面：

 可以根据服务器端技术选择相应的实现，如果你用的是java，可以看下我博客中的另一篇文章：http://g21121.iteye.com/blog/1067305《Flex通过Blazeds与java结合》，http://g21121.iteye.com/blog/1074223《spring与flex结合》。
配置完成进入最后一步，构建路径的设置：

 在这里可以配置一些项目属性，如源代码文件夹，主程序，类库等等，最后点击完成，进入项目工程目录。
 

 首先我们熟悉下目录结构：
src：源文件目录，跟eclipse开发习惯一样。默认包内的flexmobile.mxml是主程序入口，view包下几个文件是flashbuilder为我们创建的选项卡视图，view类似于安卓开发中的activity。
flexmobile-app.xml：是这个项目的总体设置。
Flex4.6.0：是flex sdk的类库，版本是4.6，我们看到其中都是swc格式的，flex中类库是以swc命名的，类似于.jar。
bin-debug：是输出目录，类似于build目录，编译后的可执行内容放在这个目录中。
libs：其他引用的类库。
下面开始我们的第一个flex手机应用吧！
首先打开flexmobile.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
								  xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="240">
	<s:ViewNavigator label="首页" width="100%" height="100%" firstView="views.View1"/>
	<s:ViewNavigator label="互动" width="100%" height="100%" firstView="views.View2"/>
	<s:ViewNavigator label="设置" width="100%" height="100%" firstView="views.View3"/>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
</s:TabbedViewNavigatorApplication>

 这其中代码还比较简单，有三个选项卡导航，ViewNavigator是选项卡导航。
Label是显示名称，即选项卡的名字。
firstView是此选项卡的第一个导航view，即第一次点击此选项卡后显示的内容。
未列出来且经常使用的还有：
Title：即此选项卡标题，此标题会被具体实现view覆盖。
Icon：即此选项卡的图标，此图标尽量使用嵌入式，这样不会影响加载。例如：icon="@Embed('图片全路径')"。

然后看看第一个view中的内容：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="首页">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
</s:View>

 这里面也有个title，这里就是前面说的title，可以覆盖掉选项卡的title。

我们看到此时的界面还比较简单，如果想在右上角加入个回退或者搜索按钮呢？
上面显示首页的部分被称作actionBar。

actionscript api 写道

ActionBar 控件定义三个不同区域：

· 导航区域
  包含能使用户导航该部分的组件。例如，您可以在导航区域定义主按钮。使用 navigationContent 属性定义在导航区域中显示的组件。使用 navigationLayout 属性定义导航区域的布局。

· 标题区域
  包含提供标题文本的字符串或组件。如果您指定组件，则您无法指定标题字符串。使用 title 属性指定要在标题区域中显示的字符串。使用 titleContent 属性定义在标题区域中显示的组件。使用 titleLayout 属性定义标题区域的布局。如果您为 titleContent 属性指定值，则 ActionBar 外观会忽略 title 属性。

· 操作区域
  包含用于定义操作（用户可以在视图中执行相应的操作）的组件。例如，您可以将搜索或刷新按钮定义为操作区域的一部分。使用 actionContent 属性定义在操作区域中显示的组件。使用 actionLayout 属性定义操作区域的布局。



  对于具有一个部分的手机应用程序（意味着一个手机应用程序具有一个 ViewNavigator 容器），所有视图共享相同的操作栏。对于具有多个部分的手机应用程序（意味着一个手机应用程序具有多个 ViewNavigator 容器），每个部分定义其自己的操作栏。

 原来actionBar是由三部分组成的， navigationContent位于actionBar最左侧；actionContent位于actionBar最右侧；titleContent位于中间位置。
我们添加几个实例来证实并看下效果：

<s:titleContent>
		<s:Label color="#FFFEFE" fontSize="28" text="首页"/>
	</s:titleContent>
	<s:actionContent>
		<s:Button label="搜索" icon="@Embed('imgs/search (3).png')"/>
	</s:actionContent>

 当然这只是一个静态的demo，没有什么具体功能，想要实现业务功能还是需要你来编写actionscript。
下面详细讲讲flexmobile-app.xml配置文件，在开发air桌面应用时，也会有一个类似的配置文件，里面存储着程序的相关配置信息，这个也例外。