HTML5移动应用开发工具AppCan-SDK 2.0 官方最新版

AppCan SDK是专为AppCan平台开发者提供的全方位的集成调试环境，可以帮助开发者使用HTML5快速的构建iOS/Android手机应用。

AppCan移动快速开发平台是基于HTML5技术的跨平台快速开发解决方案。开发者利用HTML5+CSS3+JavaScript技术可以快速的开发与本地应用相媲美的应用。AppCan平台提供了UI快速开发框架、手机本地功能调用Api接口、AppCan应用打包系统、AppCan集成开发IDE环境和AppCan模拟器。完善的框架接口，强大的服务支持，使开发者可以快速的进入移动开发领域。

AppCan是国内Hybrid App混合模式开发的倡导者，AppCan应用引擎支持Hybrid App的开发和运行。并且着重解决了基于HTML5的移动应用目前"不流畅"和"体验差"的问题。使用AppCan应用引擎提供的Native交互能力，可以让HTML5开发的移动应用基本接近Native App的体验。

与Phonegap支持单一webview使用div为单位开发移动应用不同。AppCan支持多窗口机制，让开发者可以像最传统的网页开发一样，通过页面链接的方式灵活的开发移动应用。基于这种机制，开发者可以开发出大型的移动应用，而不是只能开发简易类型的移动应用。

AppCan提供强大的设备调用能力，电话、短信、相机、LBS、传感器、数据库等常用的手机功能，开发者可以通过JS接口调用，轻松构建移动应用。

UI2.0与UI1.0的对比：

2012年初，我们发布了AppCan移动应用开发平台，在这个版本中，我们内置了基于JQMobile方案的CSSUI框架。这个框架可以帮助开发者遵循一套规则下，快速的开发应用。这套方案中主要采用了组合的概念。例如对一个按钮的描述，可以通过多个CSS类来组合进行定义。这样通过不同的组合可以生成多变的效果。在实际商用应用开发过程中，他极大的帮助我们加快了开发进度。但是在开发过程中，我们还是遇到了一些问题，JQMobileCSS框架在这些问题上，比较乏力。

1.自动填充宽度

上图中同样一个编辑框加上一个刷新按钮的组合。在不同分辨率下，如果希望，刷新按钮保持一个基本宽度，编辑框自动填充剩余区域，在不使用JS的情况下是很难做到的，如果使用百分比控制刷新钮的宽度，那么在低分辨率和高分辨率之间将会有非常大的偏差。

2.类名称过长

JQMobile方案中，为了帮助开发者能够更直观的了解代码，每一个功能类的名称都比较长。例如ui-pageui-mobile-viewport等。但这造成了网页代码大小变大，降低了解析速度。

3.类功能拆分度低

在JQMobile方案中，很多类定义，代码重复较多，例如预制的多种色彩方案。同时由于拆分度低，经常需要重复定义类来覆盖其他类中的属性。

4.控件组合复杂

JQMobile方案中，控件的实现代码量很大，一个按钮需要多个divspan嵌套配合多个类才能实现。这造成开发中，界面代码量增大，不好控制界面。

我们综合各个项目中的开发经验，整理汇总了AppCanUI2.0架构，它在继承了UI1.0的优点之上，极大地解决了UI1.0的问题，可以使开发能够更加的简单。UI2.0框架图如下

上图中，我们可以看到AppCanUI2.0框架在基础的屏幕适配(RESOLUTIONADAPTERCLASS)基础上，对元素基本属性进行了拆分。通过如下步骤来设定一个元素。

l定位-对元素进行布局，确定元素的现实位置大小等[LAYOUTCLASS]

l描边-对元素基础属性进行设定，例如边框圆角等[BASECLASS]

l添色-对元素的边框、文字和背景进行设定[COLORCLASS]

l插图-如果元素中需要图片，从资源中引入图片类[RESCLASS]

基于基础元素之上，为了方便开发者，我们重新定义了控件，包含BUTTON、LIST、FOLD、INPUT、TAB、RADIO、CHECK、SWITCH。这些控件可以认为是UI2.0框架的具体事例。通过UI2.0完成的控件，代码大小和复杂度，有极大的降低，如下例。

UI1.0框架实现的按键

UI2.0框架实现的按钮

从上述代码中可以看到，同样功能和效果的控件可以减少三分之二的代码，嵌套减少到一层，代码复杂度极大降低。

接着我们详细介绍如何使用UI2.0框架。

AppCan应用框架：

基于JQueryMobile UI方案的具有强大扩充性的UI控件组（包含列表、按钮、编辑框、等分网格、单选、复选按钮等），高效的窗口管理系统，窗口消息系统、数据视图映射库，构成了强大的AppCan应用开发框架。 通过我们提供的AppCan集成开发环境，结合内置的UI界面控件向导，利用丰富的平台调用接口和各种扩展功能，用户可以利用HTML5技术快速的开发功能强大的富客户端应用。利用定制的UI适配方案，开发者可以用极少的工作量完成各种终端的适配工作。强大的插件系统，使开发者可以随时集成用户自定义的插件并发布给最终用户。

公司开发人员的UI设计规则：

1.制作前先考虑好如何组织页面，需要如何布局，在什么地方需要几个容器来进行排版。然后构建架子，使用默认效果类进行排版定位和美化

2.如果需要使用颜色，请在ui-color.css中根据文本、背景、遮盖、边框等分别扩展自己的类定义

3.如果需要调整圆角、边距等附加属性请在ui-base.css中进行添加。

4.如果需要资源，请在ui-res.css中进行扩展

5.如果需要布局，请在ui-box.css中进行调整

6.所有调整要遵循默认的命名规则。