《AppCanUEX扩展之UI.docxVIP

2012正益无线(北京)科技有限公司zhaoqinghua[AppCan UEX扩展之UI]目录AppCan UEX UI扩展3AppCan UEX之窗口管理3uexWindow之生存4uexWindow Launched - uexWindow的创建5Load WEBPAGE Run Global JS网页的初始化9window.onload 网页加载解析结束9UEX Object Initliaze9window.uexOnload10uexWindow.onStateChange 0 网页激活10uexWindow.onStateChange 1 网页后台运行10uexWindow.close10UEX Object destory10UEX Window Shutdown10uexWindow之子窗口-浮动VIEW10浮动窗口的创建10浮动窗口的关闭11浮动窗口的位置变更11浮动窗口的动画11窗口间接口远程调用14窗口的弹动效果14窗口的提示16Ver0.1赵庆华2012-05-04Ver0.3赵庆华2012-06-05Ver0.4赵庆华2012-06-07AppCan UEX UI扩展目前HTML5、CSS3配合JavaScript可以在手机上实现非常绚丽的效果，但是并不是所有终端都能够有能力承担这样大的CPU消耗。虽然我们可以用HTML5完成很多功能，但很方便的原生插件将会极大地降低我们的开发成本。并且由于目前移动终端中浏览器引擎版本的不统一，对HTML5支持度的不同，很多功能也还无法使用HTML5技术来实现。AppCan平台为了解决这些问题，结合原生应用的开发经验，提供了扩展的UEX控件，来帮助开发者开发出与原生应用相媲美的HTML5应用。AppCan UEX之窗口管理在Android原生开发中，每一个功能界面都可以制作为一个Activity。在iOS中每一个功能界面可以作为一个View，在AppCan中，每一个功能界面都是一个uexWindow。他负责完成一个或一组独立的功能，并且可以启动其他uexWindow来进行其他处理。AppCan应用启动时，默认会创建一个uexWindow，这个uexWindow会加载应用中config.xml中设定的默认页面。每个uexWindow对象都有一个名字用来标识其自身，这个创建的默认uexWindow的名字是root。其他窗体不能够使用这个名字。一个应用的大致组成图如下rootwin2win1win3win4sub win1sub win4sub win2sub win3这是AppCan与PhoneGap的一个最大区别，PhoneGap提供了底层功能的封装，而上层UI推荐使用Sencha Touch、JQueryMobile等，但这些框架都是纯JS的框架，在本地应用开发时，要把众多功能融于一个Window中，开发难度会很大，处理逻辑页更加复杂。而AppCan平台提供了窗口机制，开发者可以把一个或多个功能逻辑放到一个窗口中，通过对不同功能块实现不同的页面通过窗口方式加载，会使逻辑更容易处理。同时界面间的切换使用原生接口来支持，将会使应用在低端机上有更好的表现。同时AppCan同样基于webkit浏览器引擎，Sencha Touch和JQueryMobile也是可以无缝的运行于其中的。每一个uexWindow用于实现一个功能或功能组，而应用开发中，大部分界面都是按照标题、内容、底部栏三部分组成。而使用标准的HTML5技术由于在移动终端的浏览器引擎中对position:fixed属性、DIV内部滚动属性和IFrame的支持度不够，无法只使用HTML实现中间内容区域的滚动不影响标题栏和底部栏。常见的JS解决方案中，并不能完美的解决这个问题，与原生应用有很大差距，AppCan平台中提出了浮动窗口的概念，通过使用浮动窗口分隔内容区域和导航部分，解决了这个问题。因此在一个uexWindow内部又可以分为主VIEW和浮动VIEW部分。每一个浮动View称之为Popover View，他其实也是一个uexWindow对象，同样具有uexWindow的所有功能，只是其从属于一个主uexWindow对象而已。每一个浮动View也有自己的名字用于区分。浮动窗口本身根据屏幕的硬件坐标进行定位。可以把一个浮动窗口设定在屏幕区域以外，这样其可以部分或全部不显示在界面中，通过uexWindow中提供的浮动窗口动画接口可以实现浮动view的缩放、旋转和平移。一个应用功能界面的组成如图。屏幕外区域屏幕区域屏幕外区域uexWindow浮动窗口浮动窗口浮动窗口上面介绍了AppCan平台关于窗口管理的基本信息，同时AppCan平台还为uexWindow提供了众多控制、动画、交互接口。uexWindow之生存每一个u