AppCan移动应用开发框架.doc

《AppCan移动应用开发框架.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、1、概述AppCan应用使用HTML5、CSS3和JavaScript语言编写，通过AppCanIDE提供的本地打包工具或在线编译系统生成可在Android、iOS、Symbian平台安装运行的本地应用。每一个应用安装后在系统中都能够独立运行，互不干扰。有各自独立的进入点和运行沙盒。AppCan应用通过封装的JavaScriptUEX对象，访问移动终端的各种硬件资源和各种附加服务。例如发送短信、条码识别、LBS服务等。一个AppCan应用由如下部分组成:▶HTML页面用来定义应用的界面框架▶CSS文件定义应用的界面皮肤▶JavaScript定义应用的处理逻辑

2、▶Config定义应用的基本参数▶图片、声音等资源▶AppCan运行环境用于解析处理页面通过AppCan，可以快速的开发适用于多个平台的应用，更可以完成为独立机型定制的复杂效果。简单高效的UEX平台扩展层，使应用与平台紧密衔接。强大的扩展能力，使应用可以随时对接各种插件，完成各种需求。AppCan应用的UI框架体系是由"窗口"、"页面"、"控件"和"JSON2View"组合而成。1.1、窗口一个AppCan窗口对应于独立的HTML文件。是由一个或多个页面的有机组合。通过多个Window的组合来完成AppCan整体的架构，通过开放得窗口控制接口，实现窗口间的切

3、换效果、参数传递、创建和销毁。通过Window极大地减少了一个页面中编写过多页面造成的加载缓慢，处理效率低的问题。1.2、页面在一个AppCan窗口中，可以包含多个页面，每个页面代表一个面向用户的独立界面，例如上图中登录界面、分组好友界面和访客界面。一个页面一般由页眉、内容区和页脚组成。多个页面也可以共用一个页眉和页脚。通过页面的组合可以在一个窗体中完成多个界面的操作，减少新建窗口造成的资源占用。1.3、控件一个AppCan页面，由众多控件组成。分为布局控件、容器控件和窗体控件。AppCan整合了JQueryMobile风格的控件组，作为基础控件。基础控件使

4、用CSS类进行效果定义，通过CSS类的组合实现效果的组合，开发者可以在现有基础上增加自定义的效果定义类，来扩展控件组。1.4、JSON2ViewAppCan提供了高效的JSON2View处理接口，能够快速的把JSON数据转换为与用户交互的可视界面。极大地减少了JavaScript代码的处理难度，方便开发者能够更好地维护软件代码，使代码结构更清晰且更易于调整。1.5、UEX平台扩展接口AppCan平台提供了高效、简洁且丰富的平台控制接口框架，开发者可以通过JavaScript方便的调用平台功能。这套接口在Android、Iphone和Symbian平台保持高度

5、的统一性，开发者编写的调用代码，不需要再进行任何调整即可完美运行。1、AppCan的页面1.1、页面的创建AppCan的页面使面向用户的最小屏幕单元，它只是一种推荐的页面管理方案，是一种使用HTML处理界面布局的参考，用来划分用户进行交互操作的UI界面。当然开发者也可以自己定义页面管理方案。如下图的网页大纲显示的是一个名字叫page_0的页面。创建AppCan页面可以通过AppCan集成开发IDE中的页面创建向导进行创建。1.2、页面的布局AppCan的页面一般由标题、内容区域和页脚组成。常见的布局方式有固定标题页脚和自适应布局两种。▶固定标题页脚标题和页脚

6、位置固定，当内容进行滚动时标题和页脚不随之滚动。当内容区域内容不能撑满一屏时，标题和页脚依然固定在最上部和最下部。如图：如下图网页大纲所示，在页面page_0中，包含标题fixheader、页脚fixfooter和内容content部分标题和页脚不一定必须包含于页面中，当多个页面共用一个标题或页脚时可以定义在页面外部，如下图大纲所示，两个页面page_0和page_1共用一个标题和页脚。▶自适应布局自适应布局中，标题和页脚在屏幕中位置不固定，标题保持在整个网页的最上边，页脚在整个网页的最下边，随着内容区的扩大自动排列。当滚动时，标题和页脚随之滚动。如下图网页

7、大纲所示页面Page_1中包含headerfooter和content三个部分，与固定布局方案框架保持一致，只是对应的CSS属性稍有差别。1.3、页面间的切换一个窗体可以由多个页面组成，AppCan提供了一组基于页面切换动画效果的接口，这些页面间可以通过调用这些预制接口实现切换效果。接口封装在zy_anim.js中，开发者可引用这个文件，来实现动画效果调用。页面间的切换类型如下▶左右滑入切换▶上滑入/下滑出切换调用可参考如下代码onclick="zy_anim_slide('page_0','page_1','slide_left')"如果希望在动画结束后执

8、行某项定制操作，可以在动画调用函数里指定回调函数，供