BS平台信息发布系统的样式编辑器技术方案

ＢＳ平台信息发布系统的样式编辑器，包括样式编辑界面组件、样式渲染引擎、样式区域的模拟绘制三个部分；样式编辑界面组件包括菜单栏、工具栏、控制栏、属性框、绘制区；样式渲染引擎负责接收样式数据输入，并将原始数据转换成绘制输出时需要的数据，并根据输入的条件，载入不同的绘制方法，绘制指定的图形到界面的绘制区，同时也处理前台界面传回的各种编辑样式事件，并根据事件的处理结果进行更新样式；样式区域的模拟绘制使用带背景色的ＤＩＶ元素，通过限定其宽度和高度，充当图形的点或线，通过ｊａｖａｓｃｒｉｐｔ生成特定的一组ＤＩＶ元素，绘制该ＤＩＶ元素到指定位置，从而构成相应的图形。本发明专利技术既不需要安装播放插件，又能够支持不同的浏览器，而且维护方便。

【技术实现步骤摘要】
B S平台信息发布系统的样式编辑器
本专利技术涉及信息及通信领域，尤其涉及计算机软件。
技术介绍
Flex是一种基于标准编程模型的高效RIA (富互联网应用系统)开发产 品集，最初由Macromedia公司在2004年发布，后被Adobe公司冠以商标。 Flex最大的特点是基于全球流行的网络动画平台—Macromedia Flash。SilverLight是一个跨浏览器、跨客户平台的技术，能够设计、开发和发 布有多媒体体验与富交互(RIA,Rich Interface Application)的网络交互程序；但 其运行时浏览器需要安装Microsoft Silverlight插件。SVG(Scalable Vector Graphics)指可缩放矢量图形，是基于可扩展标记语言 (XML)，用于描述二维矢量的图形的一种图形格式.SVG普及的最大障碍是不 是所有的浏览器都支持SVG。VML(Vector Markup Language)是一种XML语言,用于绘制向量图形。 1998年VML建议书由微软、Macromedia等向W3C (万维网联盟)提出审核， 但VML遭到拒绝。现在只有IE5.0 (微软公司推出的一款网页浏览器)以上 版本对VML提供支持。若是使用Flex或Silverlight技术，则用户在使用时就必须安装指定的播 放插件；若是使用SVG或VML,则因为不同浏览器所支持的图形接口相互 间不兼容。如Firefox (火狐浏览器)和Opera (挪威欧普拉软件公司推出 的一款网页浏览器)支持SVG,而IE支持VML,要同时支持多款浏览器， 就必须为每款浏览器所支持图形接口编写一套样式编辑器,不仅增加工作 量，而且以后维护也不方便。
技术实现思路
本专利技术所要解决的问题是提供一个样式编辑器，使其既不需要安装播放插件，又能够支持不同的浏览器，而且维护方便。本专利技术采用以下技术方案解决上述技术问题BS (Browser/Server,即浏览器和服务器架构)平台信息发布系统的样式 编辑器，其特征在于包括样式编辑界面组件、样式渲染引擎、样式区域的 模拟绘制三个部分；样式编辑界面组件包括菜单栏、工具栏、控制栏、属性 框、绘制区；样式渲染引擎负责接收样式数据输入，并将原始数据转换成绘 制输出时需要的数据，并根据输入的条件，载入不同的绘制方法，绘制指定 的图形到界面的绘制区，同时也处理前台界面传回的各种编辑样式事件，并 根据事件的处理结果进行更新样式；样式区域的模拟绘制使用带背景色的 DIV (可定义文档)元素，通过限定其宽度和高度，充当图形的点或线，通 过javascript生成特定的一组DIV元素，绘制该DIV元素到指定位置，从而 构成相应的图形。所述样式渲染引擎包括四个模块数据解析模块、数据预处理模块、样 式渲染器、事件响应^f莫块。所述数据解析模块负责解析样式的JSON ( JavaScript Object Notation,是 一种轻量级的数据交换格式)数据，并将解析后的样式数据保存在客户端的 cache (緩存)里，充当其它模块的输入数据，数据解析模块在获取到样式的 JSON数据后，将其转化成javascript的对象，再根据特定的名称来匹配该对 象的属性名，并将该属性所对应的值作为所要解析的目标数据；逐个解析出 样式名称、样式分类以及各个播放区域的名称、大小、宽度、高度、位置等 信息，并将其保存在cache里；所述数据预处理模块负责将cache中的样式原始数据进行相应的处理 和运算，生成样式渲染器所需要的数据，数据预处理模块读取cache中的样 式数据，对于每一条的样式区域数据根据指定的缩放比率、宽高比率重新计 算区域的大小、宽度等信息，并检查一些字段，若该字段为空，则给该字段 添加缺省的数据；所述样式渲染器负责样式的渲染绘制操作，根据指定的样式及其播放 区域的类型，调用相应的区域绘制方法，生成指定的HTML (超文本标记语言)元素，展现在用户的浏览器上；所述事件响应模块负责响应前台各界面组件的各种样式编辑事件，提供一系列的方法，每个方法对应一个特定的功能。本专利技术的优点在于采用符合ECMA v3的javascript操作文档对象模型 (DOM)来模拟实现图形的绘制工作，以及样式编辑中的拖拽等各种操作的整体实现方案。既不需要安装播放插件，又能够支持不同的浏览器，而且维护方便。附图说明下面参照附图结合实施例对本专利技术作进 一 步的描述。图l是本专利技术中样式编辑界面组件与样式渲染引擎关系示意图。图2是本专利技术中样式渲染引擎中的样式渲染器与样式区域的模拟绘制关系示意图。具体实施方式JavaScript是一种广泛应用于客户端Web开发的脚本语言，常用来给 HTML网页添加动态功能，如响应使用者的各种动作。它是一种动态、弱型 式、基于原型的语言。文档对象模型(Document Object Model,简称DOM)， 是W3C组织推荐的处理可扩展置标语言的标准编程接口 。 HTML ( HyperText Markup Language )指超文本标记语言，是为"网页创建和其它可在网页浏览 器中看到的信息"设计的一种标记语言。HTML被用来结构化一信息例如标 题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。CSS (Cascading Style Sheets)指层叠样式表，是一种标记语言，用来定义如何显 示HTML元素。本专利技术采用符合ECMAv3的javascript操作DOM (文档对象模型)来模 拟实现图形的绘制工作，以及样式编辑中的拖拽等各种操作；用户界面采用 所见即所得的方式来负责系统与用户的交互。本专利技术样式编辑器主要分为三个部分样式编辑界面组件、样式渲染引 擎、样式区域的模拟绘制方法。样式编辑界面组件主要包括菜单栏、工具栏、控制栏、属性框、绘制区等。菜单栏新建样式、重新加载、清空样式、保存、另存为等功能菜单， 菜单栏下还带有菜单小工具栏，包含有各种对齐、排列的按钮；工具栏包含播放区、LOGO区、日期区、星期区、时间区、字幕区、 天气区；快捷工具栏包含缩放样式、设置满屏、设置背景、设置文本属性、设 置播放区长宽比例、设置主播放区、显示/隐藏网格、左对齐、水平中齐、右 对齐、顶对齐、垂直中齐、底对齐、匹配宽度、匹配高度、匹配宽度和高度、 水平等间距、垂直等间距离、自动调整重叠的播放区等快捷功能菜单；控制栏以树型结构分层显示每个区域，并允许对该区域进行"上移一 层"、"下移一层"、"置于底层"、"置于顶层"、"删除"等操作；属性框显示选中区域的各种属性，如区域名称、类型、X坐标、Y坐 标、宽度、高度等，并允许对这些属性进行编辑；绘制区用于绘制当前的样式。对于界面的组件生成主要是通过HTML和CSS配合实现的.首先，将HTML的BODY的style设置为position: relative,然后，通过使用DIV元素，并设置相应的style属性，如width: 60px; left: 5px;top: 0px;,在每一个指定的位置生成固定大小的区域；再将其它各个特定的功能元素的相应HTML元素放在原先设置好的DIV 里，这样就能够在页面上显示各个组件。对于前台的用户编辑样式的操作，界面组件本文档来自技高网...

【技术保护点】
ＢＳ平台信息发布系统的样式编辑器，其特征在于：包括样式编辑界面组件、样式渲染引擎、样式区域的模拟绘制三个部分；样式编辑界面组件包括菜单栏、工具栏、控制栏、属性框、绘制区；样式渲染引擎负责接收样式数据输入，并将原始数据转换成绘制输出时需要的数据，并根据输入的条件，载入不同的绘制方法，绘制指定的图形到界面的绘制区，同时也处理前台界面传回的各种编辑样式事件，并根据事件的处理结果进行更新样式；样式区域的模拟绘制使用带背景色的ＤＩＶ元素，通过限定其宽度和高度，充当图形的点或线，通过ｊａｖａｓｃｒｉｐｔ生成特定的一组ＤＩＶ元素，绘制该ＤＩＶ元素到指定位置，从而构成相应的图形。

【技术特征摘要】

【专利技术属性】
技术研发人员：余富，
申请(专利权)人：福州星网视易信息系统有限公司，
类型：发明
国别省市：35[中国|福建]