深入浅出Web Page Editor之二:布局引擎的四个层次

1. 简介 既然WPE是个html可视化编辑器,那么必然也会像浏览器一样有一个排版引擎之类的东西存在着。WPE的排版引擎主要可分为这么四个层次:  CSS层  HTML层  Tag Converter层  Edit层 给各层的命名可能与它们真实的作用稍微有点出入,但也一时找不到其它命名了。下面就对各层分别说明。 2. CSS层 CSS层决定了控件是如何绘制在Desinger视图的画布上的。其大部分类都在org.eclipse.jst.pagedesigner.css2这个包里。 2.1. ICSSStyle ICSSStyle是CSS层的核心接口,它实际上就是对html标签中style=””部分的建模。 2.2. Figure和Layout 在WPE中的Figure继承关系可如下图所示。 其中需要注意的是FlowPage、CSSFigure,CSSTextFigure。如果您...阅读全文

Web Page Editor中绝对定位(absolute)问题的解决

既然有所谓“问题的解决”,那么必然就意味着原来是有问题的。原生态的Web Page Editor中默认的absolute开关是关着的(是的,虽然很费解,但它的确是关着的)。所以即使你在代码里写了带有position:absolute,它也会直接将其忽略掉。 打开这个开关的方法是,来到类PDPreferences中,将static属性DEFAULT_CSS_ENABLE_ABSOLUTE_POSITIONING设为true; 但是如果仅仅设其为true,若你在一个空文档里写入一行: <div style=’”position:absolute;left:10,;top10;”。 然后用web page editor打开此文档,你会发现Console视图下会发现报了一堆NullPointerException错误,且整个视图都比较混乱。跟踪调试一段时间后,我发现其根本原因在于CSSLayout...阅读全文

为 Web Page Editor 定制控件

Web Page Editor本身就自带了HTML和JSP的两大组控件,但是这些控件功能太简单了,你拖一个div控件出来,也就生成一个<div></div>,拖一个a控件出来,就生成一个<a></a>。有那拖的功夫,还不如自己拿键盘敲呢。比起Dreamweaver和Myeclipse的控件来说,差了不知道几个数量级。 想要定制控件,先得看看Palette(就是控件面版)上的每一项是怎么新建出来的。HTML和JSP控件最终都利用了以下代码在Palette中新建条目。 private TagToolPaletteEntry internalCreateTagEntry(final TaglibPaletteDrawer category, final String id, final String tagName, final String label, String desc, final ImageDescriptor ...阅读全文