CN101615121A - Bs平台信息发布系统的样式编辑器 - Google Patents

Bs平台信息发布系统的样式编辑器 Download PDF

Info

Publication number
CN101615121A
CN101615121A CN200910112223A CN200910112223A CN101615121A CN 101615121 A CN101615121 A CN 101615121A CN 200910112223 A CN200910112223 A CN 200910112223A CN 200910112223 A CN200910112223 A CN 200910112223A CN 101615121 A CN101615121 A CN 101615121A
Authority
CN
China
Prior art keywords
pattern
data
drafting
editor
responsible
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN200910112223A
Other languages
English (en)
Inventor
余富
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
FUZHOU STARNET EVIDEO INFORMATION SYSTEM Co Ltd
Original Assignee
FUZHOU STARNET EVIDEO INFORMATION SYSTEM Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by FUZHOU STARNET EVIDEO INFORMATION SYSTEM Co Ltd filed Critical FUZHOU STARNET EVIDEO INFORMATION SYSTEM Co Ltd
Priority to CN200910112223A priority Critical patent/CN101615121A/zh
Publication of CN101615121A publication Critical patent/CN101615121A/zh
Pending legal-status Critical Current

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

BS平台信息发布系统的样式编辑器
【技术领域】
本发明涉及信息及通信领域，尤其涉及计算机软件。
【背景技术】
Flex是一种基于标准编程模型的高效RIA(富互联网应用系统)开发产品集，最初由Macromedia公司在2004年发布，后被Adobe公司冠以商标。Flex最大的特点是基于全球流行的网络动画平台--Macromedia Flash。
SilverLight是一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验与富交互(RIA，Rich Interface Application)的网络交互程序；但其运行时浏览器需要安装Microsoft
Figure G2009101122236D00011
 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元素到指定位置，从而构成相应的图形。
所述样式渲染引擎包括四个模块：数据解析模块、数据预处理模块、样式渲染器、事件响应模块。
所述数据解析模块：负责解析样式的JSON(JavaScript Object Notation，是一种轻量级的数据交换格式)数据，并将解析后的样式数据保存在客户端的cache(缓存)里，充当其它模块的输入数据，数据解析模块在获取到样式的JSON数据后，将其转化成javascript的对象，再根据特定的名称来匹配该对象的属性名，并将该属性所对应的值作为所要解析的目标数据；逐个解析出样式名称、样式分类以及各个播放区域的名称、大小、宽度、高度、位置等信息，并将其保存在cache里；
所述数据预处理模块：负责将cache中的样式原始数据进行相应的处理和运算，生成样式渲染器所需要的数据，数据预处理模块读取cache中的样式数据，对于每一条的样式区域数据根据指定的缩放比率、宽高比率重新计算区域的大小、宽度等信息，并检查一些字段，若该字段为空，则给该字段添加缺省的数据；
所述样式渲染器：负责样式的渲染绘制操作，根据指定的样式及其播放区域的类型，调用相应的区域绘制方法，生成指定的HTML(超文本标记语言)元素，展现在用户的浏览器上；
所述事件响应模块：负责响应前台各界面组件的各种样式编辑事件，提供一系列的方法，每个方法对应一个特定的功能。
本发明的优点在于：采用符合ECMA v3的javascript操作文档对象模型(DOM)来模拟实现图形的绘制工作，以及样式编辑中的拖拽等各种操作的整体实现方案。既不需要安装播放插件，又能够支持不同的浏览器，而且维护方便。
【附图说明】
下面参照附图结合实施例对本发明作进一步的描述。
图1是本发明中样式编辑界面组件与样式渲染引擎关系示意图。
图2是本发明中样式渲染引擎中的样式渲染器与样式区域的模拟绘制关系示意图。
【具体实施方式】
JavaScript是一种广泛应用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，如响应使用者的各种动作。它是一种动态、弱型式、基于原型的语言。文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展置标语言的标准编程接口。HTML(HyperTextMarkup 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里，这样就能够在页面上显示各个组件。
对于前台的用户编辑样式的操作，界面组件将相应的事件委托给样式渲染引擎处理，渲染引擎处理后更新样式到界面的绘制区，如图1所示。
样式渲染引擎：负责接收样式数据输入，并将原始数据转换成绘制输出时需要的数据，并根据输入的条件，载入不同的绘制方法，绘制指定的图形到界面的绘制区(如图2)；同时也处理前台界面传回的各种编辑样式事件，并根据事件的处理结果进行更新样式。
样式渲染引擎主要划分为四个模块：数据解析模块、数据预处理模块、样式渲染器、事件响应模块。
数据解析模块：负责解析样式的JSON数据，并将解析后的样式数据保存在客户端的cache里，充当其它模块的输入数据。解析模块在获取到样式的JSON数据后，将其转化成javascript的对象，再根据特定的名称来匹配该对象的属性名，并将该属性所对应的值作为所要解析的目标数据，如styleName属性的值解析为样式名称。
以此方式逐个解析出样式名称、样式分类以及各个播放区域的名称、大小、宽度、高度、位置等信息，并将其保存在cache里。
数据预处理模块：负责将cache中的样式原始数据进行相应的处理和运算，生成样式渲染器所需要的数据。数据预处理模块读取cache中的样式数据，对于每一条的样式区域数据根据指定的缩放比率、宽高比率重新计算区域的大小、宽度等信息；并检查一些字段，若该字段为空，则给该字段添加缺省的数据。如区域的背景颜色等。
样式渲染器：负责样式的渲染绘制操作，根据指定的样式及其播放区域的类型，调用相应的区域绘制方法，生成指定的HTML元素，展现在用户的浏览器上。如：接收到播放区类型的数据时，则渲染器调用播放区的绘制方法，该方法会根据所给定的坐标位置和大小在指定区域绘制相应的播放区。
事件响应模块：负责响应前台各界面组件的各种样式编辑事件，提供一系列的方法，每个方法对应一个特定的功能。如用户调整重叠的播放区时，则在页面收到用户的点击操作时，触发click事件，该事件将调用渲染器的调整重叠区域方法，该方法使用计算几何的算法，判断不同区域间是否已经重叠，并将重叠的区域自动分开，使相互间不会重叠。
样式区域的模拟绘制方法：该模拟绘制方法主要是通过HTML的div元素与CSS相结合来实现的。
使用带背景色的DIV元素，通过限定其宽度和高度，充当图形的点或线。通过javascript生成特定的一组DIV元素，绘制该DIV元素到指定位置，从而构成相应的图形。如要绘制背景网格时，则系统生成一组高度为1px，而宽度为指定宽度的DIV和一组宽度为1px，而高度为指定高度的DIV，由两组DIV元素构成直线垂直相交，构成网格点阵。
样式编辑除上述功能模块外，还附带一些其他的功能：拖拽功能，允许直接拖拽工具栏的播放区、日期区等区域到样式的绘制区，系统将在释放鼠标的位置，自动添加一个播放区，达到所见即所得的效果，并允许直接在绘制区对已生成的样式播放区进行位置及大小调整。区域选择功能，允许用户通过拖拽鼠标来生成一个选择区域，系统同时选中该选择区域中的所有样式区域，也支持通过按住SHIFT键(上档键)，然后再逐个选择播放区来同时选择多个区域。
本发明采用符合ECM v3的javascript操作DOM(文档对象模型)来模拟实现图形的绘制工作，以及样式编辑中的拖拽等各种操作的整体实现方案。既不需要安装播放插件，又能够支持不同的浏览器，而且维护方便。

Claims (3)

1、BS平台信息发布系统的样式编辑器，其特征在于：包括样式编辑界面组件、样式渲染引擎、样式区域的模拟绘制三个部分；样式编辑界面组件包括菜单栏、工具栏、控制栏、属性框、绘制区；样式渲染引擎负责接收样式数据输入，并将原始数据转换成绘制输出时需要的数据，并根据输入的条件，载入不同的绘制方法，绘制指定的图形到界面的绘制区，同时也处理前台界面传回的各种编辑样式事件，并根据事件的处理结果进行更新样式；样式区域的模拟绘制使用带背景色的DIV元素，通过限定其宽度和高度，充当图形的点或线，通过javascript生成特定的一组DIV元素，绘制该DIV元素到指定位置，从而构成相应的图形。
2、如权利要求1所述的BS平台信息发布系统的样式编辑器，其特征在于：所述样式渲染引擎包括四个模块：数据解析模块、数据预处理模块、样式渲染器、事件响应模块。
3、如权利要求2所述的BS平台信息发布系统的样式编辑器，其特征在于：所述数据解析模块：负责解析样式的JSON数据，并将解析后的样式数据保存在客户端的cache里，充当其它模块的输入数据，数据解析模块在获取到样式的JSON数据后，将其转化成javascript的对象，再根据特定的名称来匹配该对象的属性名，并将该属性所对应的值作为所要解析的目标数据；逐个解析出样式名称、样式分类以及各个播放区域的名称、大小、宽度、高度、位置等信息，并将其保存在cache里；
所述数据预处理模块：负责将cache中的样式原始数据进行相应的处理和运算，生成样式渲染器所需要的数据，数据预处理模块读取cache中的样式数据，对于每一条的样式区域数据根据指定的缩放比率、宽高比率重新计算区域的大小、宽度等信息，并检查一些字段，若该字段为空，则给该字段添加缺省的数据；
所述样式渲染器：负责样式的渲染绘制操作，根据指定的样式及其播放区域的类型，调用相应的区域绘制方法，生成指定的HTML元素，展现在用户的浏览器上；
所述事件响应模块：负责响应前台各界面组件的各种样式编辑事件，提供一系列的方法，每个方法对应一个特定的功能。
CN200910112223A 2009-07-22 2009-07-22 Bs平台信息发布系统的样式编辑器 Pending CN101615121A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN200910112223A CN101615121A (zh) 2009-07-22 2009-07-22 Bs平台信息发布系统的样式编辑器

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN200910112223A CN101615121A (zh) 2009-07-22 2009-07-22 Bs平台信息发布系统的样式编辑器

Publications (1)

Publication Number Publication Date
CN101615121A true CN101615121A (zh) 2009-12-30

Family

ID=41494780

Family Applications (1)

Application Number Title Priority Date Filing Date
CN200910112223A Pending CN101615121A (zh) 2009-07-22 2009-07-22 Bs平台信息发布系统的样式编辑器

Country Status (1)

Country Link
CN (1) CN101615121A (zh)

Cited By (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102096593A (zh) * 2011-02-16 2011-06-15 上海普元信息技术股份有限公司 基于Flex技术的Web端业务流程图形化编辑框架系统及方法
CN102196000A (zh) * 2010-03-11 2011-09-21 新奥特（北京）视频技术有限公司 一种基于b/s结构的业务流程可视化方法及系统
CN102340698A (zh) * 2011-10-12 2012-02-01 福建新大陆通信科技股份有限公司 一种基于svg的机顶盒界面的表现方法
CN103310473A (zh) * 2013-06-27 2013-09-18 苏州创智宏云信息科技有限公司 一种绘制卡通图系统
CN103634358A (zh) * 2012-08-27 2014-03-12 深圳中兴网信科技有限公司 一种浏览器适配方法和装置
CN105141992A (zh) * 2015-07-21 2015-12-09 草地音悦（北京）文化传播有限公司 移动终端视频播放方法及装置
CN105354013A (zh) * 2014-08-18 2016-02-24 阿里巴巴集团控股有限公司 应用界面渲染方法及装置
CN105373520A (zh) * 2015-10-13 2016-03-02 金蝶软件（中国）有限公司 设置控件样式属性的方法和装置
CN106162302A (zh) * 2015-04-22 2016-11-23 Tcl集团股份有限公司 一种Launcher主界面的编排方法、装置及智能电视
CN106484370A (zh) * 2015-08-24 2017-03-08 阿里巴巴集团控股有限公司 一种视图体系的生成方法、装置及系统
CN107480278A (zh) * 2017-08-22 2017-12-15 南京焦点领动云计算技术有限公司 一种实时生效的调整网页样式的方法
CN109445780A (zh) * 2018-09-19 2019-03-08 平安科技（深圳）有限公司 一种样式编辑方法及设备
CN111475161A (zh) * 2019-01-24 2020-07-31 华为技术有限公司 一种访问组件的方法、装置及设备
CN111831192A (zh) * 2020-07-23 2020-10-27 北京思特奇信息技术股份有限公司 一种绘制流程图的方法、系统及电子设备

Cited By (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102196000A (zh) * 2010-03-11 2011-09-21 新奥特（北京）视频技术有限公司 一种基于b/s结构的业务流程可视化方法及系统
CN102196000B (zh) * 2010-03-11 2015-08-19 新奥特（北京）视频技术有限公司 一种基于b/s结构的业务流程可视化方法及系统
CN102096593A (zh) * 2011-02-16 2011-06-15 上海普元信息技术股份有限公司 基于Flex技术的Web端业务流程图形化编辑框架系统及方法
CN102096593B (zh) * 2011-02-16 2013-11-27 普元技术股份有限公司 基于Flex技术的Web端业务流程图形化编辑框架系统及方法
CN102340698A (zh) * 2011-10-12 2012-02-01 福建新大陆通信科技股份有限公司 一种基于svg的机顶盒界面的表现方法
CN102340698B (zh) * 2011-10-12 2013-12-11 福建新大陆通信科技股份有限公司 一种基于svg的机顶盒界面的表现方法
CN103634358A (zh) * 2012-08-27 2014-03-12 深圳中兴网信科技有限公司 一种浏览器适配方法和装置
CN103310473A (zh) * 2013-06-27 2013-09-18 苏州创智宏云信息科技有限公司 一种绘制卡通图系统
CN105354013B (zh) * 2014-08-18 2019-07-23 阿里巴巴集团控股有限公司 应用界面渲染方法及装置
CN105354013A (zh) * 2014-08-18 2016-02-24 阿里巴巴集团控股有限公司 应用界面渲染方法及装置
CN106162302A (zh) * 2015-04-22 2016-11-23 Tcl集团股份有限公司 一种Launcher主界面的编排方法、装置及智能电视
CN105141992A (zh) * 2015-07-21 2015-12-09 草地音悦（北京）文化传播有限公司 移动终端视频播放方法及装置
CN106484370A (zh) * 2015-08-24 2017-03-08 阿里巴巴集团控股有限公司 一种视图体系的生成方法、装置及系统
CN106484370B (zh) * 2015-08-24 2020-01-31 阿里巴巴集团控股有限公司 一种视图体系的生成方法、装置及系统
CN105373520A (zh) * 2015-10-13 2016-03-02 金蝶软件（中国）有限公司 设置控件样式属性的方法和装置
CN107480278A (zh) * 2017-08-22 2017-12-15 南京焦点领动云计算技术有限公司 一种实时生效的调整网页样式的方法
CN109445780A (zh) * 2018-09-19 2019-03-08 平安科技（深圳）有限公司 一种样式编辑方法及设备
CN109445780B (zh) * 2018-09-19 2022-07-08 平安科技（深圳）有限公司 一种样式编辑方法及设备
CN111475161A (zh) * 2019-01-24 2020-07-31 华为技术有限公司 一种访问组件的方法、装置及设备
CN111475161B (zh) * 2019-01-24 2021-10-22 华为技术有限公司 一种访问组件的方法、装置及设备
CN111831192A (zh) * 2020-07-23 2020-10-27 北京思特奇信息技术股份有限公司 一种绘制流程图的方法、系统及电子设备

Similar Documents

Publication Publication Date Title
CN101615121A (zh) Bs平台信息发布系统的样式编辑器
CN101446938B (zh) 生成表格的方法和处理装置
US8429521B2 (en) Scrolling in large hosted data set
US8176417B2 (en) Constructing and maintaining web sites
CN102663056A (zh) 一种图片元素显示方法和装置
CN107451296A (zh) 一种基于组件的网站模块化渲染方法
CN104685466B (zh) 用于提供多个视图的浏览器级背景页面
CN102141985B (zh) 一种文稿在线编辑器
US20100037168A1 (en) Systems and methods for webpage design
CN110968944B (zh) 在Web前端展示并操作CAD图纸的方法
JP6866551B2 (ja) 数式処理方法、装置、デバイス及びプログラム
CN103870558A (zh) 页面渲染方法和遮罩层创建方法
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
CN109815435A (zh) 一种网站页面生成方法、装置及电子设备
US20130117657A1 (en) Designing interactive web templates
CN104267949A (zh) 表单设计器及表单设计方法
JP2024038342A (ja) ウェブサイトコンポーネント相互間におけるスマートインタラクションのためのシステム及び方法
CN102053987A (zh) 用于显示和修改数据数组的统一接口
JPWO2007132568A1 (ja) データ処理サーバ及びデータ処理方法
Nolan et al. Interactive and animated scalable vector graphics and R data displays
CN103049430A (zh) 一种基于idf格式文件的页面显示方法
AU2009279439A1 (en) System and method for designing and generating online stationery
KR20080010614A (ko) 웹브라우저상에서 동작하는 웹 어플리케이션의 제공 방법및 그 기록매체
Freeman Pro jQuery 2.0
JP2007183849A (ja) 文書処理装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C12 Rejection of a patent application after its publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20091230