GWT开发效率困境与解决之道

GWT开发效率困境与解决之道

GWT初学的人员都觉得GWT学习曲线高,开发慢,你可能一气之下把这个IDE给扔掉冲动。根据以往的GWT培训来看,GWT的开发效率主要集中在以下几点:

编译时间过长
– 每修改了一次,我就编译一次。然后每次就傻等着编译器转圈啥都干不了

报错信息不准
– 有些报错信息看到不知所云,也不知道该如何点击定位该错误

样式布局困难
– 我希望像纯JSP开发那样自由的定义组件的样式。不知道该如何下手?有时候组件自动布局出来的又有问题。

组件不够丰富
–我希望有更多的组件来方便我的开发和使用。GWT自带的那些根本不够

如果你感觉到了以上的困难,请你继续向下看,如果没有感觉,可能你的开发感觉良好,或者已经有了自己的解决方案。

针对这些问题,我有分享一些个人在开发过程的解决之道:

编译时间过长

如果一个更改需要被看到,可以进行全量编译或调试的两种模式。全量编译需要的时间比较长,而调试模式需要的内存比较高。

解决之道

  1. 减少全量编译
    在使用DEBUG模式前,需要一次编译。但是并不是每次都需要,只需要client目录下有一个该浏览器的html文件即可,是否和目前的代码对应没有必然关系。在DEBUG时,会自动根据最新的代码进行显示和执行。

  2. 有效的配置内存
    GWT的debug模式一定要配置内存及GC模式,建议的策略是使用G1(jdk8默认)。在某机器上,默认的512M内存编译GWT使用了32s,在配置内存为2048M后,编译时间缩短到24s效果显著。而在debug模式,配置内存的也可以令你可以更快的进入页面。且目前DevMode方式的debug模式进入到首页的时间不随着你的代码量增加而减少,不用担心后续代码多了变慢。

报错信息不准

报错信息不准是很多情况导致的,有一些是很难避免需要小心踩雷的,例如GWT调试模式本身的尿性。但是大多数找到方法还是可以提高找错误的效率。

解决之道

  1. 注意看Caused by
    一般GWT由于封装程度较高,错误会由其它错误包装而成。因此在看StackTrace的时候,需要看下Caused By,然后在最近的项目包下的类找问题。

  2. 常使用断点
    发现问题的错误不一定就在报错那行,因此需要在debug模式下找对应的调用关系。向上一层层的找你的错误。比方说某个行代码是A.toString报一个nullPointer错,那么你要找是什么地方导致A没有传值。一层层的找过去。

    3. 使用FIREBUG定位是界面还是后端的问题
    在出现传值导致的错误时,建议先用FIREBUG或GOOGLE DEV TOOL检查下请求在传递或返回的时候,数据有没有错。这样就能把问题一分为二定位是在GWT里找问题还是在你的后端代码里找问题,节约开发时间。

样式布局困难

样式布局需要解决的问题很多,有些是对组件的不熟悉,有些是没有掌握设置样式的方法。下面以GXT3.1为例,列出一些常遇到的布局困难的解决方法。

  1. 掌握HBoxLayoutContainer和VBoxLayoutContainer
    无论再复杂的布局,也可以通过横向和纵向布局来解决,因此需要完全掌握这两种的布局。对于布局内部对象拉伸要掌握LayoutAlign的STRETCH方式。GWT3.1的VBoxLayoutContainer在每次重新布局的时候会出现高度计算的BUG,详见我 [这篇文章]。

  2. 强制样式设置
    可通过以下几种方式来强制设置样式:

    • 给对象用addStyleName或addStyleNames添加你的样式,然后在你的样式里覆盖样式(可能要用!important强制指定),此方式是静态的导入样式。
    • 这里写图片描述

    • 给对象用styleName导入你自己的样式,然后在ui-binder的XML里指定,此方式是静态的导入样式。
      这里写图片描述
      这里写图片描述
      注意某些样式例如button可能在当前element内部的element已经添加了样式,你在导入样式时,可能需要根据最终渲染的结构需要控制内部元素的大小。例如GXT的button这样来变大文本,注意样式是控制到内部的div:

    <ui:style>
        .searchBtn div{font-size:20px}
    </ui:style>


<button:TextButton ui:field="searchBtn" text="搜索" height="40" width="103" styleName="{style.searchBtn}"/>
  • 通过对象的getElement().getStyle()得到Style对象,然后通过Style对象来设置各类样式,此方式是动态导入样式。
    这里写图片描述

组件不够丰富

  1. 使用GXT或类似组件库
    GWT的组件是不够的,因此可考虑采用GXT进行开发。GXT包括几乎常用的所有组件。SmartGWT也是一个可考虑的方向,但是它的组件OO程度没有GXT高,在某些关键地方必须用javascript实现组件功能,扩展很难。

    2. 掌握JSNI的机制来扩展
    GWT组件的底层机制大部分都是使用JSNI,通过JSNI机制让JAVA和JavaScript对象互相调用。该部分涉及的深度和难度较大,不建议开发初期掌握,在开发过程中,对GWT渐渐熟悉了,就可以逐步开始深入GWT和Javascript交互底层接口。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值