企业信息开发平台(6)Web表单设计器开源

Web表单设计器主要是利用WebBrowser控件,对网页文件进行编辑,最后上传到IIS当中,供Web应用程序使用(Web应用程序在运行时,会对Html元素中的扩展属性进行解析,完成操作).

设计器操作网页主要是利用 IHTMLDocument2 对象,他是WebBrowser加载网页之后,从WebBrowser.Document.DomDocument属性取得的.加载网页完成后必须将IHTMLDocument2对象的designMode属性设置为:On,意思是开启对网页的设计.

下面我说明下关键点,主要是WebBrowser中Html元素获取,Html元素与控件实体转换,控件实体属性排序等

//取得当前选择的Html元素

private IHTMLElement GetElementUnderCaret()
{
IHTMLElement element = null;

IHTMLTxtRange rg = null;
IHTMLControlRange ctlRg = null;
switch (doc.selection.type)
{
case "None":
case "Text":
rg = doc.selection.createRange() as IHTMLTxtRange;

if (rg != null)
{
rg.collapse(true);
element = rg.parentElement();
}
break;
case "Control":
ctlRg = doc.selection.createRange() as IHTMLControlRange;
element = ctlRg.commonParentElement();
break;
}

return element;
}

/// <summary>
/// 将Html元素转换为控件实体
/// </summary>
/// <param name="htmlControl">当前选择的Html元素</param>
/// <returns></returns>
public IControl GetControl(IHTMLElement htmlControl)
{
if (htmlControl == null) return null;
if (!(htmlControl is HTMLButtonElement))
return null;

_htmlButton = htmlControl as HTMLButtonElement;
this._htmlControl = htmlControl;

if (this._button == null) this._button = new WebFormDesigner.ControlOperation.PropertySort.Button();

//将Html元素属性值设置到控件实体属性
if (this._htmlButton.id != null && this._htmlButton.id.Trim() != "")
{
this._button.Id = this._htmlButton.id;
this._button.Name = this._htmlButton.id;
}
if (this._htmlButton.title != null && this._htmlButton.title.Trim() != "")
this._button.Title = this._htmlButton.title;
if (this._htmlButton.value != null && this._htmlButton.value.Trim() != "")
this._button.Value = this._htmlButton.value;// this._htmlControl.getAttribute("value", 0) as string;
if (this._htmlButton.getAttribute("buttontype", 0) != null && this._htmlButton.getAttribute("buttontype", 0).ToString() != "")
this._button.ButtonType = this._htmlButton.getAttribute("buttontype", 0).ToString();
else
this._htmlButton.removeAttribute("buttontype", 0);
this._button.ToDataEx = WebFormDesigner.ControlOperation.Evaluate.Parameters.ConvertFormString(this._htmlButton.getAttribute("todataex", 0) as string);
if (this._htmlButton.accessKey != null && this._htmlButton.accessKey.Trim() != "")
this._button.AccessKey = this._htmlButton.accessKey;//.getAttribute("accesskey", 1) as string;
if (this._htmlButton.tabIndex != 0)
this._button.TabIndex = this._htmlButton.tabIndex;//Int32.Parse(.getAttribute("tabindex", 0).ToString());
if (this._htmlButton.className != null && this._htmlButton.className.Trim() != "")
this._button.Class = this._htmlButton.className;
this._button.Style = new CustomStyle(this._htmlButton.style);
return this._button;
}

/// <summary>
/// 将控件实体转换为Html元素
/// </summary>
/// <param name="control"></param>
/// <returns></returns>
public IHTMLElement GetHtmlControl(IControl control)
{
if (control == null || !(control is PropertySort.Button)) return null;
this._button = control as PropertySort.Button;

if (this._htmlControl == null || this._htmlButton == null) return null;

//将控件实体属性值设置到Html元素属性
if (this._button.Id != null && this._button.Id != "")
{
this._htmlButton.id = this._button.Id;
this._htmlButton.name = this._button.Id;
}
if (this._button.Title != null && this._button.Title.Trim() != "")
this._htmlButton.title = this._button.Title;
if (this._button.Value != null && this._button.Value.Trim() != "")
this._htmlButton.value = this._button.Value;
if (this._button.ButtonType == null)
this._htmlButton.removeAttribute("buttontype", 0);
else
this._htmlButton.setAttribute("buttontype", this._button.ButtonType, 0);
this._htmlButton.setAttribute("todataex", this._button.ToDataEx.ToString(), 0);
if (this._button.AccessKey != null && this._button.AccessKey.ToString().Trim() != "")
this._htmlButton.accessKey = this._button.AccessKey;
if (this._button.TabIndex != 0)
this._htmlButton.tabIndex = short.Parse(this._button.TabIndex.ToString());
if (this._button.Class != null && this._button.Class.Trim() != "")
this._htmlButton.className = this._button.Class;
return this._htmlControl;
}

对实体类属性进行排序显示,必须继承要排序的实体类,并实现ICustomTypeDescriptor接口

class Button : Control.Button, ICustomTypeDescriptor

其中最重要的方法就是GetProperties

public PropertyDescriptorCollection GetProperties(Attribute[] attributes)
{
string[] sortName = new string[] { "CtlType", "Id", "Title", "Value", "ButtonType", "ToDataEx", "AccessKey", "TabIndex", "Class", "Style" };
PropertyDescriptorCollection tmpPDC = TypeDescriptor.GetProperties(typeof(Control.Button), attributes);
return tmpPDC.Sort(sortName);
}

既然是开源,废话我就不说了,自己看代码.只说明一点,控件自定义属性要与前台(Web应用程序,目前不开源)结合来用,需要各位自己做前台html标签扩展,这里已有属性如果各位觉得不需要的话,可以删除,删除的时候有三个地方要改:控件类,控件解析类,控件属性排序类

源码:http://files.cnblogs.com/zdming/DHtmlDemo.rar