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

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

<
 
 
关闭窗口
 
石竹软件 版权所有 粤ICP备13017351号 | 公司月刊 | 招贤纳士 | 石竹质量 | 联系我们 | 邮箱登录 |
石竹北京 电话:(8610)58810139
石竹广州 电话:(8620)61246699
石竹上海 电话:(8621)62351222
销售联系:info@carnation.com.cn