×
Namespaces

Variants
Actions

如何提高Nokia Asha Web Apps运行性能---充分利用MWL

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

兼容于
平台:
Series 40

文章
renlin 在 03 Nov 2011 创建
最后由 hamishwillee 在 22 Nov 2013 编辑


Contents

综述

MWL介绍一文中大致介绍了MWL的主要功能和特性,MWL运行在浏览器客户端,减少了应用程序和服务器的通信,这样不仅减少了通信的数据流量,同时更重要的是大大提高了人机相互的时间,使得应用程序的用户体验得到提升。

MWL提供的方法

MWL提供的方法可以大致分为四类。

第一类就是对元素的CSS类属性的修改:

  • addClass, 添加一个指定的CSS类到指定的元素中.
  • removeClass,移除元素中一个CSS类.
  • toggleClass,在有和无两个状态中切换元素的CSS类,有则移动,无则添加,在 File:CarouselSlideshow.wgt 中运用这个方法实现了图片如幻灯片一样的浏览方式。
  • switchClass,移除指定元素的CSS类,并添加另一个CSS类到该元素上。
  • iterateClass,指定元素的CSS类属性在一组相似类名的CSS类中按照给定的顺序进行迭代,可以指定是否循环进行。
  • setGroupTarget,使一组元素中的某个指定元素具有区别其兄弟元素的CSS类属性,在例程 File:PhotoAlbum.wgt 中结合运用了switchClass方法和setGroupTarget方法。
  • setGroupNext,在一块区域中按指定顺序迭代一组元素,将当前节点的CSS类属性设为参数中指定的默认类,同时将下一个兄弟节点设为参数指定的目标类,可以向后迭代或者向前迭代。
  • show,显示某元素
  • hide,隐藏某元素
  • toggle,使某元素在显示和隐藏间切换。


第二类是对一些合成事件的响应,分为滑动事件,按键事件以及长按事件。 响应滑动事件的方法为:addSwipeLeftListener, addSwipeRightListener,addSwipeUpListener,addSwipeDownListener,当在目标元素中有直线方向的滑动时触发这些响应事件。 例如:

mwl.addSwipeLeftListener('#indexpad', "mwl.switchClass('#contents', 'im2','im1')");

该方法使得如果在id为indexpad的元素区域内有SwipeLeft事件发生,则第二个参数中提供的方法响应该事件。

响应按键事件的方法为:addNavLeftListener, addNavRightListener, addNavUpListener, addNavDownListener,当有水平或垂直方向的键盘导航事件发生时触发这些响应事件。 MWL也提供了对长按事件的响应:addLongPressListener,目前该方法响应2s以上的长按事件。

这些响应事件方法的存在不仅可以使开发者用一行代码实现事件响应,也不会使得在有事件发生后UI挂起而造成不好的用户体验。

第三类方法则是MWL的Timers,ovi浏览器本身并不支持定时器的使用,但MWL提供的方法timer和stopTimer方法避免了不便。

  • timer方法将新建的定时器加入到MWL定时器数组中,在指定的时间间隔发出定时器事件,并执行指定的方法,页面卸载后定时器自动停止,也可以通过调用stoptimer来停止定时器。


第四类则是一些其他方法:

  • setInputValue, 根据给定的元素id用来设置HTML中输入元素的值,MWL中支持的输入元素有:text,radio和checkbox.
  • insertHTML, 根据给定的元素id来设置元素的HTML内容,而原来的内容将会被覆盖。
  • replaceChild,用新节点代替一组节点中某个节点。
  • scrollTo,页面滚动到指定元素所在的区域,同时焦点也会被设置到该元素上。如果元素已经完全显示在屏幕则不会有滚动动作发生。
  • loadURL,中断当前的web应用,将载入的内容显示在浏览器窗口中。例如:
<div> <a id="link" onclick="mwl.loadURL('http://www.google.com'); return false;" href="#"> Click here to load Google.com </a> /div>
  • callback,用来根据异步的HTTP POST请求的结果执行命令,请求成功响应参数给定的onSuccess方法,请求失败响应参数给定的onFail方法。
  • updateGroup,与callBack相似,但它将根据请求结果插入到指定的元素中。

MWL新功能的扩展

MWL在不断的扩展中,目前加入了Geolocation API ,它根据终端所在的Cell来获得CellId从而提供地理位置信息,详情可参考*Geolocation API介绍.

总结

直接使用MWL提供的方法和通过其他Javascipt方法来进行UI的人机交互相比较,在网络状况良好的情况下,可以提高10倍以上的效率。MWL的运用可以节省开发者的时间,提升用户体验,在开发中建议充分运行MWL以提高S40 Web Apps的运行性能。


相关链接

This page was last modified on 22 November 2013, at 08:46.
165 page views in the last 30 days.
×