CC-lib无线跨平台web页面自动化生成技术的设计实现

winston

标签： CC-lib , web前端 , 无线 , 浏览器兼容 , 自动化生成 , 跨平台    分类：前端技术, 贴吧技术

摘要：前端开发通常需要开发多套web页面代码，从而为不同的移动终端浏览器开发不同的web页面，例如低端手机需使用wml，高端手机则支持html和javascript等。本文介绍了一种跨平台web页面自动化生成技术，该技术利用php设计了一个中间层（CC-lib），可以屏蔽底层的web展示语言的差异，程序运行时动态生成各个UI组件的wml/xhtml/html代码，从而可以有效降低前端开发人员的页面开发维护成本。

关键词：浏览器兼容，跨平台，无线，web前端，自动化生成，CC-lib

技术领域：无线，web前端

一、背景

在无线领域，通常要为不同的机型，使用不同的编程语言（wml/xhtml/html）编写网页，往往存在下面几个问题：

（1）维护3份代码，开发效率低、维护成本高。

（2）应用开发人员需要关注不同平台的语言差异，调试、自测繁琐。

（3）业务展现逻辑代码和wml/xhtml/html的标签容易混杂在php模板页面里，使代码编写不便，可读性差。

二、技术实现原理

本文介绍一种名为CC-lib的web页面自动化生成工具（实际是一个php实现的组件库），它通过设计实现一个php中间层，来屏蔽底层平台的编程语言差异。

CC-lib形成一套php下的组件库：如panel,form等可视组件或控件；模板开发人员基于这个库来编写PHP程序；

实现编写一套php代码，可分别生成3套(wml/xhtml/html)模板（运行时生成不同的语法标签）。

解决了html标签与程序代码逻辑混杂在一起的问题。

三、CC-lib的设计

1，CC-lib支持的平台

（1）低端手机：wml，古老的手机、低端山寨机

（2）普通手机：xhtml，各种大中小屏的手机

（3）高端手机：html，如iphone/android

2，CC-lib的特点

（1）在组件库的底层内部，在程序运行时自动生成对应的wml或xhtml或html标签来输出，最终形成网页。

（2）组件库底层来决定使用特定平台的哪些特定标签来绘制组件，上层应用开发人员可以不关心底层实现细节。

（3）一些xhtml支持，但是wml不支持的特性，例如左右布局、颜色、锚点等，可以通过底层来进行模糊容错处理。

（4）可支持全局的样式、风格的统一，换肤方便。

（5）是独立的php库，可以单独使用。

（6）新的需求，可以通过增加新的UI组件来扩展。例如iphone手机上的一些动画特效。

（7）采用类似jquery的链式的代码风格：$cc->class_name(‘head_title’)->html(‘hello’)->render();

3，CC-lib的整体设计

CC-lib设计一套公共的接口，不同平台(wml/xhtml/html)下分别使用不同的子类去实现这些接口。例如：CCForm接口，分别由3个平台下的CCFormWML类、CCFormXHTML类、CCFormHTML类实现。

CCIPanel面板接口是CC-lib的核心API接口。CCIPanel是最基础的元素，它代表一个网页区域，xhtml版中采用div或span实现，其它的元素都继承自这个类。

可以往面板中添加各种网页元素，如图片、链接、文本、子面板、表单等。

四，CC-lib需处理的一些兼容性问题

不同平台间的细小差异是很多的，下面列出常见的几点：

1，块状元素与行内元素在不同平台下的不同展现。例如：xhtml下可以使用div/span来分别模拟块状元素和行内元素，然而wml平台下没有div和span元素，只能使用br来模拟。

2，左右布局的支持。xhtml下可以支持使用table来做左右两列布局，而wml下则无法支持，只能进行退化处理。

3，form表单的差异。 wml的表单是用anchor+go标签来做的，一个提交按钮一个anchor+go;而xhtml里，表单是用form实现的，一个form里可以直接有多个提交按钮，且多个按钮间是可以共用一批hidden等input表单参数的。

五、CC-lib使用实例

下面是基于CC-lib编写的一个简单页面代码，运行之后将生成使用wml标签来编写的web页面。

六、小结
CC-lib可以用于实现wml/xhtml/html等平台的兼容性处理，当不同平台版本之间的产品功能差异不大时，可以实现一套代码同时为多个平台浏览器进行web页面展示。

by yangzuncheng