开发基于Web的CSS设计器

原创 2004年05月19日 13:21:00

这半年参与了一个基于asp.net的中型应用系统开发,其间经历种种,收获不少。前段时间做了一个基于Web的CSS设计器,虽然技术不算复杂,不过综合了C#/XML/HTC等技术,对于大家应该有一定参考价值;而且该设计器相对于系统比较独立,因此在这里和大家共享,供大家参考,并请多提意见!

设计器的主要功能就是在web界面上设计操作CSS样式表,目的是方便用户自定义系统界面。

相信做过Web开发的人大多用过Dreamweaver或者做asp.net开发也应该用过vs.net,那么应该熟悉里面的样式(style)设计器,这里就是在Web上实现这个设计器。


1.系统流程

下面我们先来了解一下整个系统流程

css设计器系统流程

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

流程再简单说明一下

·先传入参数包括文件名/样式名/操作方法/可视化样式元素;其中可视化样式元素是要在设计器中即时显现,供效果预览的,同时也是承载样式定义内容的要素(样式就加载在元素的style属性上)。

·然后设计器根据传入参数操作,根据操作方法-新建文件/新建样式/修改样式,前两者在初始化时不用读取样式文件,最后者需要读取样式进行初始化;利用一个设计的C#类来对样式文件和样式类进行操作。

·在客户端利用Javascript操作XmlDocument对象读取XML定义的样式文件,进行设计器构建。

·利用Javascript通过样式元素的cssText属性读取样式值,对设计器初始化。

·用户操作设计器,利用HTC组件操作设计样式。

·保存,利用C#类操作。

2.CSS设计器之样式表操作类

下面,我们来详细察看流程的每个环节。

为了操作样式表,设计了一个简单的样式表操作类。功能主要是解析操作指定样式表文件,实现对样式类的添加、修改、删除、保存。

机制:读取Web服务器上某样式表文件,将文本转化为一个ArrayList,数组元素为自定义的ClassItem对象,包含Name和Text属性(Name即样式名称,Text即样式的内容);然后通过对ArrayList操作,控制样式,最后保存。

由于在服务器段我们不作具体样式定义,因此该类只操作到样式类级别,不涉及样式属性和值。

下面提供该类的UML图 ClassItem 是一个结构体,仅包含两个属性;




3.CSS设计器之XML样式属性定义

CSS样式中包含很多属性设置,设计器中当然要包含相应的属性;那么这些属性信息从哪里来呢?

采用XML定义是一种很自然就会想到的方式。

经常使用DW和VS.NET,所以在交互设计上采用了类似的模式;先将样式属性按应用分类,再设置详细属性。

CSS属性是比较复杂的,如果要完全按照DW或VS.NET的模式,实现会比较复杂。为了简化,我把值的输入简化为两种形式,选择和文本输入。对于选择,直接在XML文件中定义;对于文本输入,抽象几种输入类型,在设计器生成时根据类型设定不同的HTC组件操作。这样就将一些复杂的属性输入封装到HTC组件中,整个构架就简洁起来。


XML文件描述

首先是属性分类


  
       文字
       
       
           ......
  

  
       背景
       
        ......
  

系统分为文字、背景、文本、位置、布局、方框、边框和其他,每种类型有一个Name子元素和若干Style子元素。

每个Style子元素表示一个Style属性,结构如下


Name 为该属性的描述名称,在设计器中为文本描述;

CssName 为属性名,在设计器中即输入字段的ID,初始化时也据此赋值;

ActionType 为属性设置方法,在设计器中为输入字段的样式类名,该样式中含有Behavior属性,制定HTC组件;

SelectItems 为选择项,如果ActionType为Select,将会在此列出选择项;其子元素Item如果含有Name属性,将显示在设计器中,否则直接显示该元素的文本内容


框架图

此为缩略图,请点击打开

 

4.CSS设计器之界面交互

整个操作交互过程,除了最后保存文件外,其他都是由javascript完成。

首先DesignerBuild函数通过XmlDocumnet读取XML样式属性定义文件,构建整个设计器界面。然后Init函数读取服务器端赋给设计元素的Style.cssText属性,并把属性作为输入控件ID在设计器中查找并赋值,完成初始化。

在操作过程中,根据输入控件的样式类Class,触发绑定的HTC组件,做相应的客户端操作。

最后再读取设计元素的style属性,保存。


设计器界面




不同的设计元素



不同输入控件的不同class属性(根据XML中ActionType生成)触发不同HTC组件,实现不同输入模式。








由于商业原因,这里不便提供源代码;我将在后面提供部分关键代码供参考。

由于时间有限,无法一次完成,请见谅。

谢谢大家捧场看了这么久 :)

SpringMVC与Activiti网页流程设计器整合

忙活了一个星期左右,查找各种资料,终于将Activiti的流程设计器分离出来,与SpringMVC,spring整合了起来,先把工程分享出来,等有时间了在慢慢讲解具体的整合步骤。工程下载之后直接可以运...
  • xinqing623
  • xinqing623
  • 2015年09月18日 09:25
  • 24511

web设计器--设计流程图(raphael)(二)

这里介绍一下如何新增删除按钮: 如上图:右侧属性表格中有个“”删除“”按钮,可以进行删除节点。 解决方法: 1.打开myflow.js文件,该文件被压缩了,你需要格式化一下js,可以通过网上...
  • lilinoscar
  • lilinoscar
  • 2016年08月16日 09:59
  • 2949

web设计器--设计流程图(raphael)(一)

案例是采用raphael的js文件进行画图,适用web设计,可以下载案例,里边是一些html的案例,下载后自己研究一下数据格式引入到自己的项目里。 Demo下载地址:http://download...
  • lilinoscar
  • lilinoscar
  • 2015年01月06日 16:40
  • 25109

ESTBPM3 --- Activiti 5 在线流程设计器开发

博客分类: JBPM应用开发     jbpm4的开发成员tom离开了jboss后,加入afresco公司,并且才有activiti5的项目,这开源项目继承了jbpm4的所有优点,同时将其...
  • nyuxia
  • nyuxia
  • 2013年04月11日 21:25
  • 508

Activiti5在线Web流程设计器

Activiti5工作流引擎提供了Eclipse插件形式的流程设计器,但使用它来进行流程开发时在流程部署和管理方面感觉不是很方便。不过Activiti5也提供了一个Web版的流程设计器,它基本可以使用...
  • xiezunjin
  • xiezunjin
  • 2015年08月04日 14:01
  • 9093

activiti工作流的web流程设计器整合视频教程 SSM和独立部署

本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1...
  • zeming8705
  • zeming8705
  • 2017年03月25日 09:30
  • 223

web工作流管理系统开发之三 可视化流程设计器

在工作流管理系统中,引擎的所有的活动,驱动,和流转,都是以流程定义为基础而展开的。流程定义文件是流程能运行的先决条件,同时流程定义文件又是工作流引擎的设计基础,引擎必须要能生成,解释和获取到任意流程定...
  • hello_simon
  • hello_simon
  • 2014年02月19日 17:58
  • 1590

activiti 网页流程设计器 的使用

使用activiti 网页流程设计器可以方便的画流程图。可以导出为xml。 当然也可以直接在eclipse安装activiti-designeer也可以画流程设计图,参见我的另一篇博文,点击查看。 ...
  • jenyzhang
  • jenyzhang
  • 2017年08月03日 14:21
  • 2072

不容错过的17款面向CSS开发人员的实用框架及工具

几乎每一天我们都以找到值得分享的实用工具,帮助大家在CSS开发这条探索之路上找到新的光明前景与几乎无尽的可能性。遥想当初,我们一路见证了CSS的成长,而如今我们能够不容置疑地断言,CSS已经成为Web...
  • zhang_Red
  • zhang_Red
  • 2015年06月27日 10:28
  • 1026

Web自定义表单工具和协同办公系统之集成(1)

提起“协同办公”,随便在百度或者Google搜索一下,就能让你看到眼花缭乱的信息,国内的各大协同办公软件厂商都在鼓吹着自己对协同的理解和自己的协同办公软件产品如何能实现协同办公管理,但从众多的信息中我...
  • LikeLaura
  • LikeLaura
  • 2016年10月14日 19:45
  • 1225
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:开发基于Web的CSS设计器
举报原因:
原因补充:

(最多只允许输入30个字)