flex框架（flex和fpc的区别）

本文目录

• flex和fpc的区别
• WEBGIS系统开发常用的技术框架有哪些,从前端到后端_比较常用的webgis实现技术
• flex是哪家公司
• Flex和Java快速开发的Flamingo项目
• 布局&栅格

flex和fpc的区别

1、Flex是一个高效、免费的开源框架，可用于构建具有表现力的Web应用程序。
2、FPC是柔性线路板，简称"软板"，也称"软性线路板、挠性线路板"或"软性电路板、挠性电路板"，英文是"FPC"或"FlexPCB"。

WEBGIS系统开发常用的技术框架有哪些,从前端到后端_比较常用的webgis实现技术

前端：

1、老一代两大富应用（RIA）框架（目前已经停止更新）：flex、silverlight

2、其他开源（早期项目较多）：openlayer2、amap、bmap、（3系列版本）

3、较新框架：openlayer3、cesiums、（4.0之后版本）、

4、轻型框架（需要二次封装）：WebGL(例如d3.js、three.js)

后端：、geoserver、mapserver

部分效果如下

flex:

openlayers:

cesiums:

flex是哪家公司

flex是Macromedia公司。

flex指Adobe Flex，基于其专有的Macromedia Flash平台，它是涵盖了支持RIA的开发和部署的一系列技术组合。Flex是一个高效、免费的开源框架，可用于构建具有表现力的Web应用程序，这些应用程序利用Adobe Flash Player和Adobe AIR，可以实现跨浏览器、桌面和操作系统。

虽然只能使用Flex框架构建Flex应用程序，但Adobe Flash Builder软件可以通过智能编码、交互式遍历调试以及可视设计用户界面布局等功能加快开发。

成长历史

Flex最初是作为一个J2EE应用，或者可以说是JSP标签库而发布的。它可以把运行中的MXML和ActionScript编译成FLASH应用程序。最新版的FLEX支持创建静态文件，该文件使用解释编译方式并且不需要购买服务器许可证就可以在线部署。

Flex的目标是让程序员更快更简单地开发RIA应用。在多层式开发模型中，Flex应用属于表现层。Flex采用GUI界面开发，使用基于XML的MXML语言。相对于基于HTML的应用在每个请求时都需要执行服务器端的模板，由于客户端只需要载入一次，FLEX应用程序的工作流被大大改善。FLEX的语言和文件结构，也试图把应用程序的逻辑从设计中分离出来。

以上内容参考：百度百科—flex

Flex和Java快速开发的Flamingo项目

　　Exadel的Flamingo项目是一个快速启动后台使用Java构建的RIA应用的工具 在中间层 该工具对Seam和Spring都提供了支持 在 展现层 Flamingo既支持Flex也支持JavaFX 该工具启动应用程序开发的方式与AppFuse项目类似 后者可用于更传统的Java Web层框架 InfoQ与Exadel的Igor Polevoy和Fima Katz进行了交谈以了解更多关于Flamingo的信息

　　Igor和Fima以分享Flamingo的特性细节作为开场白 现在的特性可以被划分为三个逻辑分组

　　 工具

　　Flamingo提供了快速启动简单功能项目的能力 把一个项目组装在一起是一个费时费力的过程 这不是什么秘密了 此外 在Java界有许多不同的方法 来开发项目 我们意识到了这个问题并创造出了Flamingo工具作为解决方案 使用Flamingo工具 你不但可以快速地创建一个新项目 还能在开发 周期过程中随时产生应用的各个部分

　　 集成类库

　　它就像是客户端和服务器代码间的粘合剂 我们只使用二进制协议 因为它们更加有效 所有配置（不管有多小）在项目创建时就已经配好了 因此 开发者只需将注意力集中在手头的业务问题上

　　 客户端组件

　　Fiamingo有一些非可视化组件 它们通过提供校验 将多个请求捆绑到一个请求中等等来简化开发过程 Flamingo中比较有意思的特性之一是动态 持久化方法 这些方法可以使开发者以直观的 类英语的方式来查询数据库 而不是使用SQL（实际上SQL是由Flamingo在运行时创建出来的） 这一 特性本身就可以极大地推进开发效率

　　Igor和Fima继续论述了它是如何工作的 我们用Maven来组织和创建项目 我们的Maven启动向导会询问关于项目不同方面的几个问题 比 如 服务器端技术（Seam/Spring） 客户端技术（Flex/JavaFX） 数据库类型 位置 证书 以及基于前面选项的一些其他问题 接着 一个Maven项目就被创建了 这一项目包含了一个小项目必须的所有组件 如单元测试 持久化单元 以及工作屏（working screen） 这里使用的是标准Maven命令 这样 在几分钟之内 一个新的全配置项目诞生了

　　InfoQ询问了在结合RIA技术时Spring和Seam的对比

　　Spring/Hibernate和Seam/JPA组合都是使用Flamingo和 Flex/JavaFX实现RIA应用的可行解决方案 选择哪一种后台技术通常取决于给定组织的文化及基础架构以及开发团队的偏好 而不取决于某些特定特 性 通常 Seam和Spring是难于比较的 即使它们在某些方面是相互重叠的 它们被设计用于不同的目标 Flamingo试图保持中立 无论选择了 哪种后台技术 Flamingo都尽力给于同等的支持 我要说的是如果一个组织在选择Java企业平台的时候考虑的是丰富的支持 他们有选择Seam的自 由 否则 Spring/Hibernate组合应当被考虑在内

　　Igor和Fima评述了谁应该考虑使用Flamingo

　　目标客户是企业及企业级应用开发者 我们看到了RIA技术在企业级得到了广泛采用——比如不同风格的 AJAX 通常 AJAX技术与基于Java的后台系统能够很好的集成 我们开发了一个这样的企业解决方案——RichFaces 它结合了JSF （JavaServer Faces）和AJAX 可是 虽然没有探究AJAX的利弊 我们还是明确地看到了企业开发组织中对另一套解决方案如Flex的巨大需求 Flamingo使得企业中从事Java工作的人们可以很容易地使用Flex和Java创建一个新的应用 而且 在开源方面

　　我们已经从事开源事业很长时间了 已经看到了这一社区及这一方法的巨大力量 InfoQ询问了关于Flamingo如何支持敏捷开发的更多细节

　　 集成

　　这是今天我们所拥有的 它提供了使用Flex或JavaFX与Seam或Spring相结合的无缝开发过程 消除了不使用Flamingo时所需的所有手工编码 其结果是 开发过程更加容易 快捷及廉价

　　 敏捷RIA平台包括一套高级工具

　　为了迎接 敏捷 或 快速 开发的挑战 像Ruby on Rails和Grails这样的技术解决方案出现了 尽管这些都是非常好的框架 但是它们对于RIA应用开发并不擅长 而这正是能产生项目及简单工作屏 （screen）的Flamingo代码向导的长项 Flamingo的下一版将公布更加强大的工具 同样 所有由Flamingo产生的服务器和客户端 组件立马就可使用 减少了项目启动时间 Flamingo第三个敏捷方面的内容是其客户端组件 这些组件有可以用客户端上极其简单的编码模式来创建访问数 据库的运行时请求 这一能力本身节约了大量时间 如果你将Flamingo的所有这些方面结合在一起 它绝对会为组织提供一个称心如意的敏捷开发平台 随取随用RIA开发平台

布局&栅格

先聊聊布局方面的知识，先列据一个实现三栏水平布局（左右定宽，中间自适应）案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。

相同点：

差异点：

DOM节点结构：

双飞翼布局比圣杯布局多使用了一个div，少用大致4个css属性，比圣杯布局思路更直接和间接一点。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局， Flex 布局将成为现代浏览器的首选方案。

绝对定位 position: absolute 使元素的位置与文档流无关，因此不占据空间。PS：这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

栅格

以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，通俗一点的就是在一个特定区域内划分出有规律的格子，并依靠这些格子进行有规律的版面布局。

栅格布局的作用

栅格布局的使用

现大多数UI框架设计上都会设计栅格化系统，比如 bootstrap(jquery) 、 element(vue) 、 antD(react) 等。

Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例（宽度百分比）的思想，实现响应式布局。

Bootstrap将屏幕大小分为4类，主要关键点是媒体查询 @media 。

官网中对Layout 布局的定义是： 通过基础的 24 分栏，迅速简便地创建布局.Element是基于 vue.js 开发的UI框架，其设计的栅格系统也与 Bootstrap 类似，可选 flex 方式满足现代浏览器，组件开发的目的都是为了解决基本布局定位的问题。

主要组件为 Row 与 Col , 其中 Row 为行布局容器, Col 为列布局容器.

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：

antD 是Ant Design 团队基于 React 开发的一套企业级后台UI框架，其栅格整个设计建议区域按照 24 等分的原则进行划分

支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序

参照 Bootstrap 的 响应式设计，预设六个响应尺寸：

怎么实现一个基本栅格化？

通常一个基本的栅格化系统包括：

为了给整个栅格系统设置宽度，我们需要一个容器。容器的宽度通常为100%，但你可能希望为更大的显示器设置最大宽度 max-width 。

行元素用于防止里面的列（ column ）溢出到其他的行。通常会使用 clearfix 来清除浮动，因为我们是通过浮动来制作栅格系统的。

列元素是栅格系统的核心，也是最复杂的一部分。因为列的定位可以有很多实现方式，同时还需要考虑它的宽度以及响应式设计等因素。

列的位置

Floats 、 inline-blocks 、 display-table 、 display-flex 他们都可以实现栅格布局中，列的定位。先选取使用 float ，如果列都是空的，浮动的列都会贴在彼此的顶部。为了避免这种情况：

列的宽度

由于容器总宽度是100%，我们想要6列，所以每列宽度为：100 / 6 = 16.66

这里我们把一行分成六列，通过简单的计算，还可以定义列的多种宽度。

列的间隙 (Column Gutters)

由于列的宽度单位是响应式的百分比(%)，我们给列元素的间距是固定单位的 padding（px单位） ，为了避免复杂的计算，我们规定所有的盒子模型为 border-box 类型。

为了适配更多分辨率的布局，我们只需改变列的宽度。

比如当屏幕宽度小于1000px时，为了布局更简洁，我们使用两倍列的宽度，一行六列变为了一行三列。

当屏幕宽度比1000px还小时