现在的位置: 首页 > 综合 > 正文

Ext设计师面面观

2013年09月11日 ⁄ 综合 ⁄ 共 2910字 ⁄ 字号 评论关闭

前一段时间,小弟去收邮件的时候,就会发现有来自extjs.com的温馨提示,被告知Ext设计师(Ext Designer)正在测试,不日将会发布云云。上个礼拜,设计师终于结束RC测试,以1.0正式版本面世于人了。虽不说千呼万唤始出来,但也引起了不小的骚动,何以见得?君不见Javaeye上计数器12100~,排名竟第一呵呵,对Ext
IDE感兴趣、争相一睹设计师风采的朋友可谓络绎不绝。


在得知extjs正式发布后,小弟我便第一时间下载和安装。前一段时间,我已小译过一篇介绍设计师,估计到此时的版本已变化良多。果不其然,连底层AIR都拿掉了,换上Qt GUI的跨平台方案——这样,该写的就很多了。这次动笔说说在下对Ext设计师的一点感受,可能还有一些不妥之处,冒昧请看官们姑且评之。

借此机会,首先要澄清一个称谓的问题。大家可能不太注意Ext/Ext JS的区别。一般说Ext是大家族的意思,底下extjs便是拳头产品,同时也是公司名称 Ext JS, Inc.一部分。除了ext js外, Ext JS, Inc.公司还有extcore/ext direct/gxt/ext designer的产品一起构成ext的产品体系。我们没有看到 ExtJSDesigner设计师这样的称谓的。ExtJS公司持有Ext这个品牌,有权利围绕这个品牌发布不同类型的产品,不过一般大家说ext时候心里都明白指的是Ext
JS本身。

Ext的代码难搞的说几乎是众口一调,路人皆知;当然也有人如此说:“以前觉得js是噩梦 自从搞了extjs就觉得js很爽”(by QQ网友 蓝天白云16:27:43)。嘿嘿,深知初学者的心态和对接产品的缺位,老奸巨猾的Ext公司便瞄准这个日渐庞大的市场,搞起了Ext设计师,不是开源的,更是商业软件。

先不说这个设计师贵不贵,值不值,本文的重点则是怎么用好Ext设计师。Ext设计师用途何在?

很多人认为设计师远不够言之成为一个IDE开发环境,至多算是一个设计原型的工具。在同类型IDE产品(Bespin,
CodeMirror
, or
Ares
?)不多的情况下,如果设计师可以提供一个针对Ext组件优化的原型设计器,也是值得借鉴和学习的。

Ext设计师的使用者不仅仅可以是程序员本身,项目经理或系统分析师也是采用设计师,为他们的应用程序来创建界面的原型,然后才让开发者去修修改改,进而增强界面。在刚开始的时候,我们的界面往往脱胎自从我们脑海中朴素的想法,只是制作一种原型(prototype)。要把朴素的界面反映出来,不一定先通过代码来实现。IDE的工具可以说为界面原型提供了一个易于实施GUI场所,用户只要花费几分钟的时间便可以掌握IDE的使用,快速创建自己界面的“草稿”。Ext设计师中,支持拖放(Darg &Drop)便是一个亮点,甚至可以零代码写配置。由于可视化(WYSIWYG)的设计环境,组件的设计(外观元素、大小、布局)都可以透过鼠标的操作完成,组件的属性也是一目了然的。特别的,设计师提供Screenshots(截图)的功能,把自己创作好的“劳动杰作”瞬间转为图片,供客户或开发人员演示。

如上图所示,假设开发工具分为Ext Dsigner和你所使用的IDE两种。BusinessManager业务经理和交互设计师(呵呵还有专门的搞交互滴,咱们连界面程序员都没有,,,)经过商量没问题后,UserInterface方面就这样拍板了。然后就是用Aptana、VSS、Eclipse等的这样专业开发环境去实现。——Ext设计师第一阶段的任务完成!

如果用户有使用过”表单设计器“的经验,可能立论的基础、出发的观点会有所不同。参照的对象都不一样。欢迎路过的高人发表一下建议或心得。

实作DataGrid、DataView、Trees的UI之后,如果没有绑定数据源UI只是一副皮囊而已。Ext设计师中允许我们使用和SDK中一模一样的数据源支持:JsonStore、XmlStore、JS数值包括Ext.Direct等等(如下图)。好比IDE中(如笔者经常使用VisualWeb Developer)的数据库连接,设计师可以把实体数据与UI绑定一起,这里所不同的是供客户端使用的数据源。

调整好和绑定数据后,UI组件就应该脱离设计师,生成代码输出。设计师也支持浏览器预览(perview)的功能,一般没什么问题,我们接着要做是把代码放进自己的项目中,跟整个项目做整合,也就是放进控制后台代码的IDE中了。如下,Ext设计师支持Class类和JSON的输出UI方式。JSON的就相当于ExtJS里面的XType概念。

以上的一番介绍不知算不算是Ext设计师的工作流程?呵呵,笔者不敢说得那么绝对。我们介绍过了UI的原型设计、数据绑定、代码生成输出,当然是非常简单的,而且Ext设计师是第一个正式版,玩家熟悉程度有限。要切合实际描述开发的各个环节之类的问题,感觉应该有一套工作流的步骤去跑,笔者接触的还是不多。有兴趣的看官可以到WorkflowLab这里,相信会有不少收获。

再说一下笔者的个人意见,制作原型的工具不等于是尚在毛胚的产品,工具的品质好自然做出来的原型跑着也顺,——有两下子的话还是值得称许的。

上述一堆文字就算是设计师例行公事般的介绍。另外一个不得不提的就是设计师其售价:$219美刀,折合人民币卖1,500~。俺这里所在的小公司,根本不会购买一个设计师的Lisence。Ext引发的版权问题由来而久,自他更改协议那天起该问题连连绵不会断,而且被评为,带一个不好的先例的”开源项目“,凡是涉及到收费的大家都敏感起来那是不用说的——这次设计师尽管先百分百声明是商业软件,试用期才只有13天这么多,决不可能会绕开收费问题的非议,然而总体而言大家也对设计师口下留人,在这一个问题上显得理性多——可见还是莫要搞太多的暧昧问题好!

P.S:另一边厢,fins兄已看出了里面的门道,“原理和以前的那个AIR版本是一样的但是AIR版本显然不利于代码的保护.这个是QT+webkit+一堆js”,详见讨论的帖子;另外,我也曾经在试用过程中遇到一个bug,如下图,没想到这个bug“透露”了设计师骨子里还是js,AJAX
AIR-->Qt换汤不换药呀。

对于正在使用Ext开发的用户而言,如果仅仅是好奇的下载一个设计师玩玩,自然没有问题。俺只是觉得,千万别指望可以为你的工作立刻带来多少的帮忙,手写代码仍是最佳的建议。其实再一些“微调”控件的时候手写代码的效率会更高。如果入门的话,由于可视化带来的感观不是代码所能比拟的,所以透过设计师快速了解Ext组件也是不错的途径,进一步降低Ext入门门槛。

末了,引用上一篇设计师文章的最后部分:

译注:关于可视化控件部分,我个人还有一点的建议,如果要锻炼自己,请不要使用现成的控件,特别是Designer的出现,完全把程序变成了一种搭积木的方式,如果不是快速开发产品的话,本人是不赞成这样做的,因为那样只会让你迟钝,而学不到任何东西。要学会自己写组件,真的写不出,就看看一些Ext源代码,这样你的进步会更加地快。Edit:2010-01-05

抱歉!评论已关闭.