CN102831190B - 一种在低端设备上浏览cml文件的方法 - Google Patents

Abstract

一种在低端设备上浏览CML文件的方法，其特征在于包括如下步骤：步骤一、在服务器端预先通过WebKit渲染引擎将CML网页标签内容针对不同类型终端设备的分辨率生成不同的静态排版位置，并再次写入页面中生成针对不同类型终端设备的分辩率的网页；步骤二、通过CMMB通道下发步骤一所生成的针对不同类型终端设备的分辩率的网页到相应类型的终端设备；步骤三、终端设备根据网页中的静态排版位置对网页中图文进行渲染显示。本发明终端设备解析和渲染都非常简单，大大简化了终端浏览富文本内容的技术结构，使得资源开销大幅降低。

Description

一种在低端设备上浏览CML文件的方法

技术领域

本发明涉及CMMB(中国移动多媒体广播)多媒体广播领域，尤其涉及一种在低端设备上浏览CML文件的方法。

背景技术

现有技术中通常使用互联网浏览器作为浏览器基础，如IE，WebKit浏览器等，这种浏览器支持功能强大，可以支持JavaScript，但缺点在于极其笨重，程序包最少都有10M以上，更不用说对RAM和CPU的占用，同时由于复杂度极高，这种浏览器也基本上不可能被移植到低端设备上。

事实上，由于CMMB信道的特点，CMMB实际业务中也不会发送像互联网那样动辄数十M的网页资源，另外，CMMB是单向网络，因此互联网浏览器的很多强大功能根本无从发挥。

所以CMMB业务非常需要一种符合自身信道和业务特点的轻量浏览器。CML：英文名称为CMMB Markup Language，是CMMB可扩展描述语言。CML是一种基于XML的可扩展描述语言，它以互联网技术标准HTML/CSS/JavaScript为基础，作为富媒体的传输和显示技术标准。CML包括三个核心部分：XHTML-CP、C-CSS、ECMAScript-CMMB，实际上这个规范与移动互联网的技术标准HTML、CSS、JavaScript分别只有非常小的差异，可以将其理解为HTML技术在CMMB的一个分支。在多媒体广播领域中，CML语言规范描述和约定了中国移动多媒体广播(China Mobile Multimedia Broadcast)数据业务的描述方法，该方法既可以用来构建基于网页技术的各种数据业务服务，包括各种普通的信息查询类业务，也可以用于构建业务导航框架；同时，规范对如何在终端设备上将数据业务与其他CMMB应用进行集成的方法做了描述和约定。图1是现有技术中CML解决方案的示意图；如图所示，CMMB服务器通过CML协议传输数据业务到CMMB终端，CMMB终端浏览器根据CML协议对数据业务进行CML解析，并基于WebKi t进行显示。CMMB采用HTML技术做为终端富媒体技术的原因主要是可以适配不同种类的终端和屏幕类型，但这在实际应用中有几个主要问题：

多种中低端设备无法运行CML所需的WebKit环境，即使能运行，运行效率又差异很大，难以保证用户体验。

CML的动态排版能力被过高的估计了，在实际应用中，多种屏幕下还是需要后台数据制作为不同屏幕设计不同的网页分别适配，而并不是像原先设想的可以一种页面自动适配所有终端类型。

由于CMMB是单向通道，CML的互动能力在没有上行通道的情况下意义不大，实际上大多终端需要的只是静态图文浏览，CML的强大AJAX能力无从发挥，白白浪费了终端资源。

发明内容

鉴于现有技术存在的问题，本发明提供一种浏览CML文件的方法，其特征在于包括如下步骤：

步骤一、在服务器端预先通过WebKit渲染引擎将CML网页标签内容针对不同类型终端设备的分辨率生成不同的静态排版位置，并再次写入页面中生成针对不同类型终端设备的分辩率的网页；

步骤二、通过CMMB通道下发步骤一所生成的针对不同类型终端设备的分辩率的网页到相应类型的终端设备；

步骤三、终端设备根据网页中的静态排版位置对网页中图文进行渲染显示。

进一步，本发明所述的浏览CML文件的方法，其特征在于所述步骤一中通过javasrcipt在CML网页中搜索包含文本和图片的div D0M节点来获得文本块和图片块的位置，并将位置信息以约定的形式写入针对不同类型终端设备的分辩率的页面内的DIV标签。

进一步，本发明所述的浏览CML文件的方法，其特征在于所述步骤一还包括根据终端设备类型的不同将引用的图片转换成单一图片格式，并采用图像处理技术抖动(Dither)进行处理，保持色彩效果。

进一步，本发明所述的浏览CML文件的方法，其特征在于所述步骤一和步骤二之间还包括在通过CMMB发布前利用人工对所产生的针对不同类型终端设备分辩率的网页显示效果进行校对，查看是否与原始的CML显示效果基本一致。

本发明在后台将CML通过预先渲染的方法，从中提取CML内容中关键的图文混排的位置信息，将其转换为针对特定设备(屏幕)静态图文混排描述文件，将其通过服务端发布，图文信息已经得到固化，因此终端的解析和渲染都非常简单，大大简化了终端浏览富文本内容的技术结构，使得资源开销大幅降低，更可以为不同的终端类型进行定制。

附图说明

图1是现有技术中CML解决方案的示意图；

图2是本发明所述在低端设备上浏览CML文件的方案的示意图。

具体实施方式

为使本发明的上述目的、特征和优点更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

由于传统CML浏览器需要在终端侧进行CML解析，而该解析过程占用了终端比较多的资源，因此，本发明采用了设计了一种自定义的轻量的终端富媒体技术规范MiniCML，其在后台(服务器端)预先通过工具将CML针对不同类型的终端分别处理成不同的MiniCML包，进行下发。而终端只需要一个非常小的解析渲染引擎就可以完成MiniCML的浏览。使用这套方案，后台可以根据终端类型的硬件能力将MiniCML中的图片资源进行处理，以得到最大化的优化。

MiniCML的设计目标是设计一套以XML为基础的移动设备图文混排描述语言，只要能满足图文的静态排版功能即可。

本发明之所以能够支持低端设备关键在于在后台将CML转成一种自定义格式(即MiniCML)，并以这种格式进行发布应用的过程，并且这个过程针对于每种设备类型都是独立进行的。MiniCML是应用和设备相关的，这与CML独立于应用和设备完全不同。这种专一性使得相对于CML的通用性在性能和资源开销上有很大的优势。这种专一性使得MiniCML不用考虑同一个页面去适配不同分辨率的终端屏幕(这需要使用复杂的动态排版技术)，而MiniCML只需要静态的排版(因为在生成MiniCML时已经将静态排版位置生成并写入页面中)。MiniCML并无意设计为一种标准化的类似CML的标签语言，只是根据应用的需要借用CML的一些基础标签和语法规则，根据应用不同会有一些变化。以下列出MiniCML的一些核心标签，另会根据应用不同可能增加一些其他CML标签。

MiniCML核心功能标签

静态排版信息被写入到了DIV的style属性中(如下)

分区：DIV标签(与HTML DIV类同，构造整个版面的大矩形块)

范例：〈DIV style＝’x＝100；y＝50；width＝300；height＝300；’〉textcontent〈/DIV〉

通过style进行定位

段落：P标签(与HTML P相同)

范例：〈P〉text content〈/P〉

文字块：SPAN标签(与HTML SPAN相同)

范例：〈SPAN〉text content〈/SPAN〉

换行：BR标签(与HTML BR相同)

范例：〈BR/〉

图片：IMG标签(与HTML IMG相同)

范例：〈IMG src＝″tt.png″style＝’x＝100；y＝50；’width＝″20″height＝″20″/〉：在指定位置插入图片

通过style中的x，y，width，height进行定位

链接：A标签((与HTML A相同))

范例：〈A href＝″value″〉

图2是本发明所述在低端设备上浏览CML文件的方案的示意图。如图所示，本发明所述在低端设备上浏览CML文件的系统包括如下模块：

MiniCML转换模块，用于在服务器端预先通过WebKit渲染引擎将CML网页标签内容针对不同类型终端设备的分辨率生成不同的静态排版位置，并再次写入页面中生成针对不同类型终端设备的分辩率的网页；在服务器端将CML内容转换为MiniCML(MiniCML为一种静态图文混排描述方式，具体标签上面有描述)。的图文混排方式的具体的步骤以下面的CML/HTML为例进行说明：

〈html〉〈body〉〈div〉〈div〉Test Page〈/div〉〈imgsrc＝‘test.png’/〉〈/div〉〈/body〉〈/html〉

首先：MiniCML转换模块根据最终目标设备的分辨率将CML通过WebKit(WebKit为已知技术，在此不详细阐述)渲染引擎(目前的Chrome，iPhone，Android浏览器都是基于WebKit开源内核)进行渲染Layout。；

经过渲染后，CML(HTML)中的基本图文要素(主要指叶子级别的DIV，P，IMG等要素)的排版位置即确定，即可提取叶子级别的图文要素，转换为MiniCML的对应标签(基本上叶子级别的图文要素在MiniCML中有对应，没有对应无法转换的可抛弃)。即生成MiniCML文件。

实际转换时，可以将CML/HTML传给一个PC上运行的WebKit浏览器，这个浏览器的页面输出尺寸被设定为MiniCML将要适配的终端分辨率。WebKit在加载完HTML后，文本和图片的最终排版位置就可以通过Javascript脚本的方式从WebKit中获取(此为通用技术不阐述)，通过javascipt搜索包含文本和图片的div DOM节点，来获得文本块和图片块的位置，并将位置以MiniCML约定的style形式写入DIV标签中，

例如以上例子获得〈div〉Test Page〈/div〉的输出位置为x＝100，y＝200，width＝20，height＝20.则输出的MiniCML为〈div style＝’x＝100；y＝200；width＝20；height＝20；’/〉最终输出的范例：

〈html〉〈body〉〈div’x＝100；y＝200；width＝20；height＝20；’〉TestPage〈/div〉〈div’x＝100；y＝300；width＝20；height＝20；’〉〈img src＝‘test.png’/〉〈/div〉〈/body〉〈/html〉输出最终只包含文本和图片节点的DIV节点。其他的DIV节点都被略去。

此外，本发明还对引用的图片资源进行处理。具体来说，根据目标设备要求，将资源转换成在终端使用占用资源小的图片格式(如256色png)，另外，由于在转换为MiniCML时就把CML中的各种图片格式都转换为单一格式：如256色PNG，这样可以使得终端引擎可以不必加载多个图像支持模块，大大减少资源占用。真彩图片在转换为256色时，出现色彩失真，因此采用图像处理里通用的技术抖动(Dither)进行处理，保持色彩效果。

此外，由于是后台处理，因此可以在通过CMMB发布前利用人工对MiniCML的显示效果进行校对。查看是否与原始的CML显示效果基本一致。

转换处理完毕之后，通过CMMB通道将所生成的针对不同类型终端设备的分辩率的网页下发到相应类型的终端设备；

终端设备接收到相应网页内容之后，根据网页中的静态排版位置对网页中图文进行渲染显示。具体来说，终端设备通过MiniCML浏览模块进行渲染显示，改浏览模块包含了MiniCML解析子模块、MiniCML渲染子模块和MiniCML页面控制子模块。

MiniCML解析子模块：用于在XML解析的基础上，将XML解析生成的XML DOM节点转化为下一步渲染可识别的渲染对象，例如，标签为DIV的DOM节点转化为类名为XXDIV的对象。对应于XML解析生成的DOM节点树，渲染对象组成了一棵同样结构的渲染对象树。解析步骤的作用在于将XML转换为下一步可识别的中间结果数据结构。

例如对于上面提到的那个CML例子

解析步骤将上面的XML解析成为一颗DOM树，这颗树的根节点是html节点，其下是body节点，body节点有一个div子节点，这个div节点下面有两个子节点，其中之一为包含一个文本对象的div节点，还有一个是图片节点。每个节点在对应的语言实现里，都有一个对应的节点对象。

MiniCML渲染子模块：用于按照深度优先遍历整个渲染树，以此调用对应渲染对象的渲染方法，例如，XXDIV对象调用XXDIV的渲染函数Render_XXDIV。诸如DIV这样的排版节点本身是不绘制内容的，它的作用在于确定子节点的相对位置。实际绘制的是TEXT节点和IMG节点，即渲染树的叶子节点。当TEXT和IMG节点的渲染方法被调用时，即完成了图文在指定位置的绘制。例如：渲染模块会对DOM节点对象树进行遍历，对于每一个节点对象，根据DIV中存储的style信息来获得在屏幕上的实际位置，并获取其中包含的TEXT和IMG对象在屏幕上绘制。

MiniCML页面控制子模块：用于实现点击链接，回退，滚动等MiniCML的页面控制功能。点击链接功能是根据页面提供的链接获取到下一个浏览页面的地址，然后加载这个新页面，进行解析，渲染。回退功能是存储页面浏览的历史序列，当需要回退时，从历史序列里获取链接，加载页面，渲染，即完成回退。滚动功能是在设备窗口上显示页面的不同部分，当需要滚动时，重新设置渲染模块的渲染参数(如起始位置)，进行重新渲染，即完成滚动。

本发明与传统CML浏览器不同在于，本发明将主要的终端排版适配在后台端(发布端)运行。传统的CML浏览器的所有排版适配都是在终端运行的。这存在大量的复杂状态组合，导致了终端浏览器极其复杂(WebKit有数百万行代码)，这使得对终端资源能力的要求很高，反而降低了其终端适配能力。本发明在后台将CML通过预先渲染的方法，从中提取CML内容中关键的图文混排的位置信息，将其转换为一种自定义的，静态图文混排描述文件MiniCML。将其通过服务端发布，生成的MiniCML已经针对特定设备(屏幕)进行了优化，图文信息已经得到固化，因此终端的解析和渲染都非常简单。只要将MiniCML解析为一棵渲染节点树，并根据每级节点已经存储的排版位置信息即可确定最终的叶子节点(图片，文字)的位置，最后对图文进行渲染即可。通过采用特殊根据CMMB信道和业务特征设计的MiniCML，大大简化了终端浏览富文本内容的技术结构，使得资源开销大幅降低，更可以为不同的终端类型进行定制。

最后应当说明的是：以上实施例仅用以说明本发明的技术方案而非对其限制；尽管参照较佳实施例对本发明进行了详细的说明，所属领域的普通技术人员应当理解：依然可以对本发明的具体实施方式进行修改或者对部分技术特征进行等同替换；而不脱离本发明技术方案的精神，其均应涵盖在本发明请求保护的技术方案范围当中。

Claims (3)

1.一种浏览CML文件的方法，其特征在于，包括如下步骤：

步骤一、在服务器端预先通过WebKit渲染引擎将CML网页标签内容针对不同类型终端设备的分辨率生成不同的静态排版位置，并再次写入页面中生成针对不同类型终端设备的分辩率的网页；具体地，根据最终目标设备的分辨率将CML通过WebKit渲染引擎进行渲染；经过渲染后，CML中的基本图文要素的排版位置即确定，提取叶子级别的图文要素，转化为MiniCML的对应标签，即生成MiniCML文件；其中，所述MiniCML是一种静态图文混排描述方式，其为一套以XML为基础的移动设备图文混排描述语言，其核心功能标签包括：分区，DIV标签、段落，P标签、文字块，SPAN标签、换行，BR标签、图片，IMG标签、链接，A标签；所述步骤一中通过javasrcipt在CML网页中搜索包含文本和图片的div DOM节点来获得文本块和图片块的位置，并将位置信息以MiniCML约定的形式写入针对不同类型终端设备的分辩率的页面内的DIV标签；

步骤二、通过CMMB通道下发步骤一所生成的针对不同类型终端设备的分辩率的网页到相应类型的终端设备；

步骤三、终端设备根据网页中的静态排版位置对网页中图文进行渲染显示；具体地，将MiniCML解析为一颗渲染节点树，按照深度优先遍历整个渲染树，以此调用对应渲染树对象的渲染方法。

2.根据权利要求1所述的浏览CML文件的方法，其特征在于，所述步骤一还包括根据终端设备类型的不同将引用的图片转换成单一图片格式，并采用图像处理技术抖动进行处理，保持色彩效果。

3.根据权利要求1所述的浏览CML文件的方法，其特征在于，所述步骤一和步骤二之间还包括在通过CMMB发布前利用人工对所产生的针对不同类型终端设备分辩率的网页显示效果进行校对，查看是否与原始的CML显示效果基本一致。