Ext 设计师面面观

简介: 前一段时间,小弟去收邮件的时候,就会发现有来自 extjs.com 的温馨提示,被告知 Ext 设计师(Ext Designer)正在测试,不日将会发布云云。上个礼拜,设计师终于结束 RC测试,以1.0正式版本面世于人了。

前一段时间,小弟去收邮件的时候,就会发现有来自 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的产品体系。我们没有看到  Ext JS Designer 设计师这样的称谓的。Ext JS 公司持有 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

目录
相关文章
|
11月前
|
前端开发 容器
开心档 - 软件开发入门之 Bootstrap4 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
|
UED
为什么都说UX /UI设计师是这个世界上最棒的工作?
我们默认您是一个真正热爱UX/UI设计师,所以,你拿着工资做喜欢做的事,不是很棒吗?那些还没领悟到UX/UI设计有多好设计师们,来看我们列的几点你们的优势,重新认识你们自己,好好努力工作吧!喝了这碗鸡汤。
1132 0
成为一名自由UX设计师--你“够格”吗?
和传统的朝九晚五,三点一线的生活状态相比,现在互联网时代下的年轻人更崇尚对自由的追求。“可任意支配时间”、“工作场所自由”和“收入高”是人们选择成为自由职业者的主要原因。
1002 0
|
UED
给 UX 设计师的 6 个超实用技巧指南
本文讲的是给 UX 设计师的 6 个超实用技巧指南,我们都同意中高级设计师和初级设计师处理问题的方法有着显著区别,到底是什么东西使我们能区分开新人和久经沙场的老设计师们呢?
936 0
《UX最佳实践:提高用户体验影响力的艺术 》一1.2 设计大纲模板
本节书摘来自华章出版社《UX最佳实践:提高用户体验影响力的艺术 》一书中的第1章,第1.2节,作者(德)Helmut Degen(中)袁小伟,更多章节内容可以访问云栖社区“华章计算机”公众号查看
1032 0
《UX最佳实践:提高用户体验影响力的艺术 》一1.5 设计大纲由谁来写
本节书摘来自华章出版社《UX最佳实践:提高用户体验影响力的艺术 》一书中的第1章,第1.5节,作者(德)Helmut Degen(中)袁小伟,更多章节内容可以访问云栖社区“华章计算机”公众号查看
1293 0

热门文章

最新文章