设为首页 | 添加收藏
首 页 走进石竹 石竹动态 产品中心 解决方案 服务体系 知识中心 招贤纳士
 
K 知识中心  
数据治理
元数据
数据质量
技术讲坛
下载
 
C 联系方式  
北京:(8610)68707181
西安:(8629)89181329
销售联系:
info@
技术支持:
support@
 
 
  当前位置: 首页 >> 知识中心 >> Web前端技术
Web前端技术
发布日期: 2017-03    阅读次数: 8067

Ext js

  ExtJS是一种主要 用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。

  功能丰 富,无人能出其右。

  无论是 界面之美,还是功能之强,ext的表格控件 都高居榜首。

  单选行 ,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现 。

  自动生 成行号,支持checkbox全选,动态 选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。

  再加上 可编辑grid,添加新行 ,删除一或多行,提示多行数据,推拽改变grid大小,grid之间拖拽一 或多行,甚至可以在treegrid之间进行拖 拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里 实现了。

其实从ext3开始就支持 各种方式的统计,且有控件支持excel导出。

 

Ext学习及应用 经验小结

  一、理 解Html DOMExt ElementComponent

  要学习 及应用好Ext框架,需要 理解Html DOMExt ElementComponent三者的区别 。

  Ext是基于Web的富客户端 框架,其完全是基于标准W3C技术构建设 的,使用到的都是HTMLCSSDIV等相关技术 。Ext最杰出之处 ,是开发了一系列非常简单易用的控件及组件,我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。

  无论组 件有多少配置属性、还是事件、方法等等,其最终都会转化为HTML在浏览器上 显示出来,而每一个HTML页面都有一 个层次分明的DOM树模型,浏 览器中的所有内容都有相应的DOM对象,动态 改变页面的内容,正是通过使用脚本语言来操作DOM对象实现。

  仅仅有 DOM是不够的, 比如要把页面中的某一个节点移到其它位置,要给某一个节点添加阴影效 果,要隐藏 或显示某一个节点等,我们都需要通过几句 javascript才能完成。 因此,ExtDOM的基础上, 创建了Ext Element,可以使用 Element来包装任何 DOMElement对象中添加 了一系列快捷、简便的实用方法。

  对于终 端用户来说,仅仅有Element是不够的, 比如用户要显示一个表格、要显示一棵树、要 显示一个弹 出窗口等。因此,除了Element以外,Ext 还建立了一 系列的客户端界面组件Component,我们在编 程时,只要使用这些组件Componet即可实现相 关数据展示及交互等,而 Component是较高层次 的抽象,每一个组件在渲染render的时候,都 会依次通过ElementDOM来生成最终※※ 的页面效果。

  在使用 Ext开发的应用 程序中,组件Component是最高层次 的抽象,是直接给用户使用 的,Ext ElementExt的底层API,主要是由 Ext或自定义组 件调用的,而DOMW3C标准定义的 原始APIExtElement通过操作DOM 来实现页面 的效果显示。

  在Ext中,组件渲 染以后可以通过访问组件的el属性来得到 组件对应的Element,通过访 Elementdom属性可以得 到其下面的DOM对象。另外 ,我们可以通过通过Ext类的快捷方 法getCmpgetgetDom等方法来得 组件 ComponentExt元素ElementDOM节点。比如 :

  var view=new Ext.Viewport();//创建了一个 组件Component

  view.el.setOpacity(.5);//调用ElementsetOpacity方法

  view.el.dom.innerHTML="Hello Ext";//通过Elementdom属性操作DOM对象

  再看下 面的代码:

  var win=new Ext.Window({id:"win1",title:"我的窗口",width:200,height:200});

  win.show();

  var c=Ext.getCmp("win1");//得到组件win

  var e=Ext.get("win1");//根据id得到组件win相应的Element

  var dom=Ext.getDom("win1");//得到idwin1DOM节点

  二、熟 悉ext组件体系

  Ext2.0对整个框架 进行了重构,最为杰出的是推出了一个以Component类为基础的 组件体系,在Component类基础上, 使用面向对象的方法,设计了一系列的组件及控件。因此,要能游刃有余地使用Ext,熟悉Ext组件体系是 最基本的。

  在《ExtJS实用开发指 南》中,有如下面一幅组件图:

  通过组 件结构图我们可以一目了然的看出整个Ext组件继承及 组成体系,当使用一个组件的时间,了解他的继承体系,这样可以便于我们掌握组件的各种特性。

  三、掌 握核心控件 

  控件其 实也是组件,比如用于显示树信息的TreePanel、用于显示 表格的 GridPanelEditorGridPanel,还有代表 应用程序窗口的Ext.Window等都属于Ext控件。在使 用Ext的时候,一 定要掌握 一些核心控 件,特别是处于基类的控件。比如上面提到的几个控件,他们都是继承于面板Panel,所以我们 要重点掌握面板这个核心控件的特性。比如面板由以 下几个部分 组成:一个顶部工具栏(tbar) 一个底部工 具栏(bbar)、面板头部 (header)、面板尾部 (bottom)、面板主区 域(body)几个部分组 成。面板类中还内置了面板展开、关 闭等功能, 并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为,面板可以放入其它任何容器中,面板本身是一个容器,他里面又可以包含各种其它 组件。只要 掌握了Panel的应用,那 么学习TreePanelWindow等就会变得 简单得多。

  同样的 道理,对于Ext的表单字 段来说,不 管是ComboBoxNumberField、还是DateField,他们其它 都是 Ext.form.Field类的子类, 在他上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时,一定要重点研究Field这个类,掌 握 他的主要方 法、事件等,就能有助于更好的学习使用其它的字段。

  四、学 习及研究示例

  由于javascript语言非常灵 活,不像静态强类型语言(比如Java)那样有固 定的代码设计模式,而往往是不同的人就有不同的编程风格。在实际应用开发中,只有见多识广,才能在自己的在脑中建立一个开发库。

  学习别 人的示例对于我们开发帮助会非常大,示例包括基本组件的应用、综合应用等多个方面。在此,简单推荐几个。

  1Ext官方示例, 在ext项目下载包 的examples目录中,包 括各个控件的基本应用演示,同时还有一些比较复杂的组合示例,有简有繁,非常适合初学者认真研究。

  2Vifir推出的示例 ,Vifir推出的一些 示例主要包括两类,一种是开源的示例应用,另 外一种是针 对VIP用户的实用 示例。开源的示例主要是指 wlr单用户blog系统,这个 一个集合了前后台技术的ext综合示例, 而针对VIP用户的实用 示例则是可以作为开发骨架或扩展组件的示例。

  3、其它示例 ,在ext社区中还有 很多比较优秀的ext应用示例, 有些只是一个应用演示,虽然没有提供源码下载,但我们可以直接下载引用的js文件来得到 这些示例的ext应用代码, 同样能取起到非常好的学习效果。

  五、多 运用

  Ext看起来是非 常简单的东西,稍有点编程知识的人,按照《ExtJS实用开发指 南》中的入门 指南,半小 时就能学会使用Ext。然而,当 准备使用Ext开发一个项 目时,却不知道从何处入手,或者是在使用Ext的时候,出 了一点小问题自己不知道该如 何解决。编 程是一门实践性的科学,仅仅靠看书、看别人写的代码是远远不够的,因此,必须多做实践才行,只有通过不断的练习,大量的使用,才能对Ext的组 件特性、事 件、事件处理机制以及与服务器端交互接口等深入的掌握,只有多做运用,深入了解ext的组件的工 作原理及机制,才能编写出高级的Ext的应用。

  六、熟 读Ext项目的源代 码

  如果要 想深入应用Ext,那么阅读 Ext项目的源代 码这是必不可少的环节,Ext的代码质量 非常高,通过阅读他的代码我们可以更加深刻的了解 javascript面向对象编 程,Ext代码中包含 了很多高级的js技巧以及设 计模式。在使用Ext的过程中, 我们经常根据项目的需要对Ext组件进行扩 展,设计自己的组件或控件,而如何实现一个自定义的Ext组件,我们 可以从Ext的各个组件 源代码中找到答案。

  Ext的源代码在 Ext项目的source目录。读Ext源码,并不 一定非要从某一个地方开始,而组件核心代码Component.js、容器组件 代码 Container.js、面板Panel.js等这些是必 看的; core目录中的Element.jsExt.js等也是必看 的。当需要从一个控件进行扩展的时候,最好能简单看一看这个控件的源代码。

  七、理 解,熟悉,掌握Json

在项目中, Ext本身的华丽 外表就很吸引眼球了,但这仅仅是其外在的美,还有最核心的内在美, 即:JsonJson(JavaScript Object Notation) 是一种数据 交互格式,一个不能实现数据交互功能的项目是没有任何意义的,大多的Ajax框架的数据 交互都基于Json,如:jQueryExtJs等。 因此理解Json掌握Json并熟练运用 是很重要的。以目前主流的开发语言为例,.NET已经把Json封装到类中 ,无需配置,直接与数据库交互,轻松的 封装直接使 用;Java就麻烦些, 必须去下一个Json包,然后再 做一些配置,才可以使用;PHPJava差不多,也 必须下载一个Json插件(和类 相似),但是不用配置,直接封装使用。在实际的项目中,各自的取舍配置,都基于项目和需求,并不是每个项目(针对WEB)都一定要 用到。但是,如果想在项目中用到此类的Ajax框架,Json的掌握又是 必须的。

 

Flex

 

Flex 是一个高效 、免费的开放源框架,可用于构建具有表现力的 Web 应用程序,  这些应用程序利用 Adobe Flash Player Adobe AIR, 运行时跨浏 览器、桌面和操作系统实现一致的部署。虽然只能使用 Flex 框架构建 Flex 应用程序, Adobe Flash Builder™(之前称为 Adobe Flex® Builder™)软件可以 通过智能编码、交互式遍历调试以及可视设计用户界面布局等功能加快开发。

  使用 Flex 创建的 RIA 可运行于使 用 Adobe Flash Player 软件的浏览 器中,或在浏览器外运行于跨操作系统运行时 Adobe AIR® 上,它们可 以跨所有主要浏览器、在桌面上实现一致的运行。连接到 Internet 的计算机中 超过 98% 装有 Flash Player,这是一个企业级客户端运行时,它的高级矢量图形能处理要求最高、数据密集型应用程序, 同时达到桌面应用程序的执行速度。通过利用 AIRFlex 应用程序可 以访问本地数据和系统资源。

Macromedia Flash是强大的矢 量动画编辑工具,在做动画起家之后,Flash一直在谋求 RIArich internet application)富客户端 的霸主地位,最有影响的是,已经推出了面向对象的编程脚本ActionScript3.0 并且建立起 类似于java swing的类库和相 应component(组件)Flex是通过java或者.net等非Flash途径,解释 .mxml文件组织 components,并生成相 应的.swf文件。Flexcomponentflashcomponent很相似,但 是有所改进增强。目前 Macromedia公司已经被 ADOBE公司收购。 当前(201012月)的flex版本为4.1

  运用Flash是完全可以 做到flex的效果的, 为什么还需要flex呢?这里面 有两个原因:

  1:为了迎合 更多的developers(开发者) 。Flash天生是为了 designer(设计者) 设计的,界面还有flash的动画概念 和程序开发人员格格不入,为了吸引更多的jsp/asp/php等程序 员,Macromedia推出了Flex,用非常简 单的.mxml来描述界面 给jsp/asp/php程序人员使 用.(x/d)html非常相似, 而且 mxml更加规范化 、标准化。

  2:为了一个 标准。大家一定听说过微软操作系统vista(后续的win7也是同一核 心),在vista推出的同时 微软也推出了新的语言xaml,一种界面 描述语言,与之相应的就是smart clientflex非常相似的 东西(即SilverLight)。MxmlXaml的也很相似 … …这是人机交 互技术的进步的重要体现,即内部逻辑与外部界面交互相分离。

  Flexj2ee/.net其实没什么 关系,Macromediajava做出来个应 用把flash的技术融合※※※ 到J2EE里面,再用 .net的技术做出 来个.net应用把flash技术融合到 .net里面去;应 该说flex解决了J2EE里面和.net里面最繁琐 的问题那就是web 的问题。

 

  传统的 程序员在开发动画应用方面存在困难,Flex 平台最初就 是因此而产生。Flex 试图通过提 供一个程序员们已经熟知的工作流和编程模型来改善这个问题。


RIA相互之间关 系

Flex 最初是作为 一个J2EEJava 2 Platform, Enterprise Edition)应用,或 者可以说是JSPJavaServer Pages)标签库而 发布的。它可以把运行中的MXMLFlex标记语言) 和ActionScript编译成FLASH应用程序( 即二进制的SWF<SPAN style="FONT-FAMILY: 宋体; mso-ascii-font-fami

<
 
 
关闭窗口
 
石竹软件 版权所有 | 公司月刊 | 招贤纳士 | 石竹质量 | 联系我们 | 邮箱登录 |
销售联系电 话:010-68707181
销售联系邮 箱:info@
友情链接:    01彩票   那个彩票平台靠谱   易盈彩票   下载app送18元彩金   微信买彩票合法吗