`
lz726
  • 浏览: 335909 次
  • 性别: Icon_minigender_2
  • 来自: 福建,福州
社区版块
存档分类
最新评论

关于flex渐进学习的

阅读更多

*Flex 的基础架构

关于 flex 基本上常被问到的不外乎就是“如何可以学好它?”,要了解这个问题的答案基本上只要看懂下面这个图就OK了。

Flex 的基础架构

*Actionscript 该学的重点

从最底层看起,最下面的 actionscript 3是一切的基础,它是 flash/flex 编程使用的唯一程式语言,因此任何人想学好 flex 第一件事绝对是先摸熟 actionscript 这个语言,包含:

  1. 它的基本语法与结构(array, hash, loop, if else…)
  2. DisplayList (DisplayObject, DisplayObjectContainer)与 Event system(bubbling, propagating…)
  3. Sound, Video, NetConnection 与 Graphics class

掌握 as3 的精华后,接下来就可以进入 flex framework。

*Flex framework 的重点

基本上 flex framework 就是用 actionscript 写成的框架,因此也可以把它看成是 as3的最好示范,看着 framework source 学 actionscript 也是挺不错的,只是路会变很长。

Flex Framework 整个体系非常博大精深,通常一般人不太可能完整把它学完,只需要针对最常用到的部份熟悉就好,图中列出的那三块(component, managers, style/skin)就是我个人认为所有初学者最优先该学会的。

*Component 该学些什么

Component 是整个 flex framework 的基础,几乎80% 的元素都是由 UIComponent 继承而来,例如最根本的它本身就是一个 UIComponent,因此,熟悉 component 就成为学好 flex framework 最根本也最重要的基本功

Flex 内建了 二十几个 UI controls, 例如 Button, DataGrid, HBox等,以种类来分,这些 components 可以概分为三大类:

  • Controls: Button, DateChooser, Slider…
  • Containers: Box, DividedBox, Panel…
  • List: DataGrid, Tree, TileList…

初学者第一步至少该学会怎么用这些元件,了解每个元件的 properties, events, styles, effects…,知道怎么在手册里查它的 API 文件,以及何时该用何种元件。

进一步,则是学会怎么修改这些元件,例如继承一个 Button 下来加上不同的功能,或是写不同的 skin border 来改变它的外观。

再进一步,则是开始研究元件的生命周期,了解每个元件是何时初始化,元件内部有那些关键指令与它们个别的功能,然后可以试着建立自已的 custom component。

这一关看起来容易但实际上最困难,因为 flex 的 component framework 写的非常庞大,虽然乱中有序但要在混沌中看出隐藏的架构然后抓住重点整串提起,就非得有人带着指引正确的途径才比较可能完成。

*manager 是什么

图中最上方的第二块就是 manager。

flex 里有很多的 managers,负责做各种不同的工作(废话…),几个比较重要的包含:

  • SystemManager:
    它是每个 flex 程序的根源,最先被下载,也最早启动,由它进行一连串的 app boot流程
  • StyleManager:
    它负责整支app 的 css style 套用与 skin 生成,如果想玩动态 css 载换也靠它
  • DragManager:
    Flex最大的卖点就是 drag and drop(拖放),这个 manager 就是背后的英雄,初学者至少要学会怎么处理 drag 行为的五个事件,以及如何在不同元件间做拖放;进阶的玩家则应该深入研究这支 manager 是怎么写成的,详细阅读它的 source 会得到意想不到的无穷乐趣(如果你读完却没有这种感觉,呃,那代表你该再多读几次,如果还是没有,那请私下联络我 :D )
  • ModuleManager:
    使用 Flex 开发大型应用程式时,往往会将程式切割成许多小的 module, 这个 manager 就是负责载入并管理所有的 module (包含它的 class partition),初心者或许用不到,但有志深入的玩家一定要很熟。
  • CursorManager:
    这个用到的时机不是很多,但偶尔要换一下 cursor 时还是会用到,初学者至少要知道怎么用指定的图案去换掉系统cursor。

*Style/Skin 的重点

CSS style 与 skinning 是 Flex 最大的卖点之一,也是开发过程中较为麻烦也最耗时的部份。

初学者应该要彻底了解如何使用 CSS style 来打点一支 flex app 的外观,换颜色、素材,使用外部 assets 修饰介面。

中阶玩家则应该了解 skinning 的系统,包含 programmatic skinning 与 graphical skin,它们俩的差别?使用时机?如何客制化(zrong注1)?

更高阶的玩家则应该熟悉整个 Styling system 的运作模式,外加如何动态载入 css 在 runtime 换掉整个介面。

简而言之,flex app 写的好不好,外行人其实看不太出来,但一支 app UI 美不美则是一翻两瞪眼,比较漂亮的那就先加十分

(当然,有一种情况是刻意用心去美化了介面结果弄巧成拙搞的怨声载道人人喊打,但那种比较不多见,也不是每家公司都会搞到这步田地,就先不讨论)

*学完基本功后下一步

在我的标准里,当一个 developer 对上图内每一块都有中等程度的了解后,就算是完成 flex 养成教育,可以迈向下一个阶段。

也就是开始熟悉 application 的制作手法,这包含

  • 了解至少一种以上的开发框架,例如 Cairngorm,老实说我对这个框架没什么好感(因为手法太复杂,只适合超复杂登月计画或火星探勘时使用),但它结构设计良好,又是业界公认的圣杯,等于是专家们共通的语言,因此至少要先了解它在做什么,将来在专业场合才好沟通(俗话说 know the rules so you know what you are breaking, 就是指这情况)
  • 接着可以看看比较简单的手法,像 Riawave, Model-Glue:Flex, PureMVC…等,基本上这些框架设计方式都大同小异,每个都有不同的应用场合,可以挑一个喜欢的再自行修改。
  • 了解基本的概念,例如 Value Object, DAO, MVC 等,它们在大部份的程式框架里都会出现,早点学会日子比较轻松。
  • 接着就是开始实际 coding,写一个中小型规模的app,不论是单纯的 CRUD (zrong注2)程序,或是留言版、电话簿、进销存管理都可以,籍由多写来强化编程的概念,然后透过大量的 peer code review 来找出可改进的地方。

*结论

结论还是老话一句:要入门 flex 超级简单,只要不是白痴应该一小时就行,但要成为可独当一面的专业开发者,路就很长,如果没有走对方向很容易就迷失甚至最后放弃。

换句话说,要能成为职场上真正需要的 professional developer,并不如表面上想象的容易(其实我想每种技术领域跟产业都一样吧),这也是我过去半年来协助很多公司做 recruiting 后的感想。

分享到:
评论

相关推荐

    Flex-超级学习资料集锦

    权威之作,和,精品之作,两本书都: 按照Flex技术点,由浅入深、循序渐进地对Flex的开发工具、基本语法、基本的容器和控件的语法及使用、高级编程、自定义的各类组件、页面的风格和主题、Flex与HTML的通信、共享...

    [Flex与ActionScript.3程序开发].陈爽,付凯.扫描版

    《Flex与ActionScript 3程序开发》由易到难、由浅人深、循序渐进地介绍了Flex与ActionScript 3程序开发的一般步骤与常用的程序技巧,内容通俗易懂,使用大量实例贯穿全书,力求以实战的形式让读者快速掌握知识点。...

    《Flex与ActionScript程序开发》[PDF]

     本书由易到难、由浅人深、循序渐进地介绍了Flex与ActionScript3程序开发的一般步骤与常用的程序技巧,内容通俗易懂,使用大量实例贯穿全书,力求以实战的形式让读者快速掌握知识点。相信读者在学习完本书后,在...

    Flex.4.0.RIA开发详解讲义

    本书由浅入深,循序渐进地讲解了如何使用Flex技术开发RIA应用程序。全书内容包括Flex简介、安装和配置Flex开发运行环境、熟悉Flex开发工具、ActionScript. 3.0语法、Flex组件开发、CSS布局、美化界面、数据传输与...

    flex3精通预览版

    该书分为三个阶段,对应学习的渐进过程,为读者提供了一个系统而全面的学习路径。 第一阶段是入门阶段,这部分内容可能涵盖了Flex的基础概念和环境搭建。包括安装Flex Builder IDE,理解MXML和ActionScript 3.0之间...

    Flex4实战-Flex in Action

    本书从基础入手,循序渐进地介绍了Flex的核心概念和技术要点,无论对于初学者还是有一定经验的开发者来说都非常友好。 - **基础篇**:首先介绍了Flex的基本概念、安装配置以及如何使用MXML和ActionScript进行简单的...

    CSS3Flexbox演示

    Vue2是JavaScript的一个渐进式框架,用于构建用户界面。它允许组件化开发,使得与Flexbox的结合更加顺畅。在Vue2中,我们可以: - **在模板中使用CSS类**:在Vue组件的模板中,可以直接应用Flexbox相关的CSS类,如`...

    Java学习路线图,专为新手定制的Java学习计划建议.pdf

    总结来说,Java学习是一个循序渐进的过程,从J2SE的基础知识开始,逐步进入J2EE的深度学习,再结合数据库技术和设计模式,最后通过实践项目巩固和提升。在这个过程中,不断探索新的技术和趋势,如Web Services、SOA...

    JAVA学习路线图.doc

    Java学习路线图主要涵盖三个核心领域:J2SE(Java 2...总之,Java学习是一个循序渐进的过程,需要从基础扎实做起,逐步扩展到更高级的企业级开发。同时,不断学习新的框架和技术,适应行业的发展,提升自己的综合能力。

    modular

    同时,可以考虑使用`swfobject`等库来实现渐进式增强,让不支持Flash的用户也能访问部分内容。 6. **版本控制与部署**: 模块化开发还意味着可以独立更新模块,而不必重新发布整个应用程序。这在版本控制和持续集成...

    AcitionScript_3.0游戏开发基础与范例(免费版)

    - **ActionScript3.0从入门到精通学习教程**:循序渐进地引导学习者从基础知识到高级技巧的全面掌握。 - **Flex从入门到实践_完全学习教学**:虽然Flex和ActionScript紧密相关,但该教程专注于Flex框架,适合希望...

    My-Learning-Tracker:在一个地方跟踪我的Web开发技能和学习以及资源,重点,兴趣以及与学习相关的一切

    渐进增强 辅助功能 使用API 骨干 CSS网格和Flex-box jQuery的 触控笔 网站建设 出版网站 Netlify 引导程序 命令行 Node.js 沙哑 开源贡献 角4 学习 地位 年 课程 导师 2019年12月 Redux入门

    css 学习教程 基础篇

    学习CSS的渐进增强和优雅降级策略也是必要的,这能确保在不同浏览器和设备上的兼容性。 总之,CSS的基础篇涵盖了从选择器、盒模型到布局和各种视觉效果的广泛内容。掌握这些基础知识,是成为一名熟练的前端开发者的...

    ActionScript开发技术大全

    讲解由浅入深,循序渐进,读者即使没有任何基础,也可轻松入门。 避免大段的理论讲解,每个技术点都配典型示例进行讲解,加深读者理解 全面讲解ActionScript 3.0语言基础、面向对象编程、可视化编程。 重点讲解...

    html+css入门到实战源码

    总之,HTML和CSS的学习是一个循序渐进的过程,从基础标签和样式规则开始,逐渐过渡到更高级的概念和技巧。通过这个"html+css入门到实战源码"的学习资源,你将能够逐步掌握前端开发的基础,为未来的网页设计和开发...

    ArcServer开发系列讲座

    这套讲座涵盖了从基础概念到高级应用的多个层次,确保学习者能够按照由浅入深、循序渐进的方式进行系统学习。 ArcGIS Server是Esri公司提供的一个强大的地理信息系统(GIS)服务器产品,它允许用户发布、管理和共享...

    css3响应式网格蜂巢排版样式代码

    因此,使用前缀(如`-webkit-`、`-moz-`等)和渐进增强策略可以帮助确保在较旧浏览器中的基本功能。 综上所述,"css3响应式网格蜂巢排版样式代码"涉及到的关键知识点包括CSS3的响应式设计原理、flexbox和grid布局、...

    Hello-World:学习编程

    总的来说,学习编程是一个循序渐进的过程。从“Hello, World!”开始,逐步深入HTML、CSS、Python和JavaScript,积累实践经验,你将逐渐具备构建和运营技术产品的能力。在这个过程中,持续学习、实践和创新是通向成功...

    图片列表流

    5. **浏览器兼容性**:虽然现代浏览器对Flexbox和Grid的支持已经很好,但仍然需要关注老版本浏览器,可能需要借助JavaScript库或者采用渐进增强的策略。 在名为"jiaoben2090"的压缩包文件中,可能包含了实现图片...

Global site tag (gtag.js) - Google Analytics