开始之前先谈我对Flex的理解
学习Flex也有一段时间了,当最近对Ext js有一定的了解,对其他javascript库也有了一定的认识,对Flex的理解也有了进一步的认识,就表现形式来说Flex和Ext js有很多相同的地方,首先他们都是一种RIA技术(富互联网应用),也都建立了类似于java swing的类库和相应component(组件)。而且界面表现能力一流,所达到的效果也差不多,但是对于这两种技术,我更亲睐于Flex,不仅仅是Flex提供了一套界面化编程(这个是Ext js不能相比的),还有Flex对底层的可操作性:Flex能够调用底层的东西,比如可以调用摄像头实现视频,而且视频本身就嵌入在Flex应用中,由Flex player直接播放。
Flex简介
1.Flex是一种客户端技术,同时也属于Flash平台。Flex代码最终被编译成SWF文件运行在Flash Player中,编译是通过Flex SDK实现的,Flex SDK包括Flex编译器,文档工具和用户组件库。
2.Flex是基于MXML的,大家都知道之前学习的web体系都是基于HTML,在HTML体系中有Javascript,jsp等等,而Flex是基于MXML,使用的是ActionScript脚本语言(可以说mxml更加规范化、标准化)。
Flex的开发环境
一般每掌握一种技术首先做的第一件事就是在自己的电脑上搭建好开发环境,对于搭建Flex的开发环境真是让我纠结了好久。
1.下载Flex SDK
一般的话是不用下载的,因为安装开发工具Flash Builder时会自带SDK,但是我还是建议大家去官网下载最新的SDK,我最近去下的时候是4.6,而自带的sdk好像是4.1的,所以建议还是用最新SDK。
2.安装开发工具Flex Builder
(到了第四版之后改名叫Flash Builder,我安装的是Flash Builder 4,建议大家安装最新的版本的)
(1)独立安装
直接去Adobe官网下载Flash Builder 4,然后安装,破解的话自己想办法。
(2)插件安装
以Eclipse插件安装,对于我们来说什么东西只有在eclipse中才用的顺手,Flex可以作为eclipse插件的形式安装,首先要下载一个插件安装包,然后以eclipse插件安装(由于篇幅有限,这里就不详细其中具体的问题,下次博客详细分享一下我的经验)。
Flex的知识框架
(1)MXML语法基础(这个类似于HTML)
(2)Actionscript语法基础
(3)文本设计
(4)按钮设计
(5)图表设计
(6)布局和导航
(7)数据和通信
我的学习经验
1.还是要多看官方文档和官方示例。
2.要对比学习,Actionscript和Javascript,MXML和HTML,他们基本上都差不多
3.要熟悉Flex的界面化编程,善于运用界面编程。
4.多写多看多调试。
看一段MXML代码
<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\ListToListShowFeedback.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp();">
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
private function initApp():void {
firstList.dataProvider = new ArrayCollection([
{label:"第一列", data:"1"},
{label:"第二列", data:"2"},
{label:"第三列", data:"3"},
{label:"第四列", data:"4"}
]);
secondList.dataProvider = new ArrayCollection([]);
}
private var tempBorderColor:uint;
private var borderColorSet:Boolean = false;
private function dragOverHandler(event:DragEvent):void {
event.preventDefault();
// 调用showDropFeedback(event)来显示放置标记。
event.currentTarget.showDropFeedback(event);
if (event.dragSource.hasFormat("items"))
{
if (borderColorSet == false) {
tempBorderColor =
event.currentTarget.getStyle('borderColor');
borderColorSet = true;
}
// 设定拖动回复的标记,并改变放置目标外框为红色。
event.currentTarget.setStyle('borderColor', 'red');
if (event.ctrlKey) {
DragManager.showFeedback(DragManager.COPY);
return;
}
else if (event.shiftKey) {
DragManager.showFeedback(DragManager.LINK);
return;
}
else {
DragManager.showFeedback(DragManager.MOVE);
return;
}
}
// 标记不能放置。
DragManager.showFeedback(DragManager.NONE);
}
private function dragDropHandler(event:DragEvent):void {
dragExitHandler(event);
}
// 恢复外框的颜色。
private function dragExitHandler(event:DragEvent):void {
event.currentTarget.setStyle('borderColor', tempBorderColor);
borderColorSet = true;
}
]]>
</mx:Script>
<mx:Panel
title="改变放置目标属性示例" width="90%" height="90%"
horizontalAlign="center"
verticalAlign="middle">
<mx:HBox id="myHB">
<mx:List id="firstList"
dragEnabled="true"/>
<mx:List id="secondList"
borderThickness="2"
dropEnabled="true"
dragMoveEnabled="true"
dragOver="dragOverHandler(event);"
dragDrop="dragExitHandler(event);"
dragExit="dragExitHandler(event);"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
看一个Flex实现的实例
- 大小: 146.1 KB
- 大小: 84 KB
分享到:
相关推荐
Flex入门教程汇编.pdf
flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门flex精通 flex入门
FLEX 入门培训FLEX 入门培训FLEX 入门培训FLEX 入门培训FLEX 入门培训FLEX 入门培训
Flex 入门 Flex 入门 Flex 入门 Flex 入门 Flex 入门
Flex 入门.pdf Flex 入门.pdf
flex入门整合教程,包含flex的登录验证demo,以及开发环境的搭建和flex的综合教程
flex大纲 对于初接触flex的学生来说 可帮助他尽快的了解flex
flex 入门介绍 flex 如何结合 j2ee 开发应用程序以及 flex 的国际化等
flex入门 到精通flex 包含丰富实例教程,非常适合flex入门和精通flex
Adobe+Flex编码指南.pdf chart.rar--java+flex图表 ...Flex入门培训资料及PPT.rar flex中文帮助.pdf InfoQ Flex与JSON及XML的互操作.mht 结合java做的flex图表例子 - 点点滴滴 - JavaEye技术网站.mht
包含一些关于flex入门级的知识,包含怎么配置,新建项目等,对初学者很有用!
Flex入门实例教程,flex简介,控件,布局等介绍。有2个实例Flex入门实例教程,flex简介,控件,布局等介绍。有2个实例
flex 入门教材,简单易学flex 入门教材
本教程通过图文介绍和对一些关键性的地方进行解释,让大家了解如何新建Flex的LCDS工程,并利用工具快速整合和部署J2EE项目和LCDS项目,掌握了简单的请求RemoteObject和配置的方法,初步掌握LCDS的应用之一。...
Flex入门培训资料及PPT.构建并运行Flex 应用程序等九章内容.
flex入门指南 英文版 比较简单 flex入门指南 英文版 比较简单
Flex 事件机制,flex入门学习的好帮手
flex入门 java sping 介绍
FLEX入门知识介绍及语法知识的详细教程
java flex入门实例 MyEclipse7+flex bulider 3+ blazeds 整合的一个简单的实例。