CC-lib无线跨平台web页面自动化生成技术的设计实现-阿里云开发者社区

开发者社区> 技术小美> 正文

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

 











本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/742976,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WEB-UI自动化测试实践
为了满足多页面功能及流程的需求及节省工时,设计了这款UI 自动化测试程序,旨在提供接口,集成到蜗牛自动化测试框架,方便用例的设计。
2524 0
Mac OS下应用Python+Selenium实现web自动化测试
在Mac环境下的自动化测试环境搭建这里有一篇亲测通过的文《mac下怎么搭建selenium python环境?》。 不过在这个过程中要注意两点: 1.在终端联网执行命令“sudo pip install –U selenium”如果失败了的话,可以尝试用命令“sudo easy_install selenium”来安装selenium; 2.安装好PyCharm后新建project,Interpreter一定要选对,默认给出的两个可选项很有可能是不对的。
1202 0
使用cfengine来实现服务器的自动化配置
http://os.51cto.com/art/200711/60043_3.htm
567 0
+关注
4435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载