表单设计器—HTML元素操作


表单设计器界面图为:

  查看原图(大图)

  主编辑区域的TabControl分为设计模式和编码模式两个页,设计模式页包含dhtml edit control,实例名称为:axDHTMLEdit;编码模式页包含多行文本框,实例名称为:txtCode。可以在设计模式和编码模式之间进行切换,来展示不同内容,类似于Dreamweaver的功能。

  为了标识着两种模式,定义枚举类型EditorMode:

/// <summary> 
/// 编辑器的模式 
/// </summary> 
public enum EditorMode { Design, Code} 

  模式之间切换代码为:

if (tabControl.SelectedIndex ==(int)EditorMode.Code) 
{ 
GlobalStatus.CurrentMode = EditorMode.Code; 
txtCode.Text = axDHTMLEdit.DocumentHTML; 
} 
else if (tabControl.SelectedIndex ==(int)EditorMode.Design) 
{ 
GlobalStatus.CurrentMode = EditorMode.Design; 
axDHTMLEdit.DocumentHTML = txtCode.Text; 
} 

  可以在空白面板区点击鼠标,然后点击工具中的按钮,即可在空白面板上增加相应的HTML控件。相应的代码为:

/// <summary> 
/// 插入控件的处理函数 
/// 1.如果是设计模式 
/// 1.1如果当前焦点在控件上,那么不允许插入 
/// 1.2如果当前焦点不在控件上 
/// 1.2.1如果插入之前需要预设信息,那么弹出属性窗口进行设置,然后插入控件信息 
/// 1.2.2如果插入之前不需要预设信息,直接插入控件信息 
/// 2.如果是编辑模式,直接插入控件信息 
/// </summary> 
/// <param name="type"></param> 
private void insertControl(string type) 
{ 
//设计模式 
if (GlobalStatus.CurrentMode == EditorMode.Design) 
{ 
IHTMLSelectionObject range = axDHTMLEdit.DOM.selection; 
if (range.type == RangeType.CONTROL) 
{ 
MessageBox.Show(ErrorMessage.E_FOCUS_ON_CONTROL_CANNOT_ADD_CONTROL); 
} 
else 
{ 
IHTMLTxtRange obj = (IHTMLTxtRange)range.createRange(); 
//判断是否需要预设信息 
if(NeedShowPropertyForm(type)) 
{ 
//根据元素类型获取html对象,类型为:button,text,password,table,checkbox,radio等 
IHTMLElement element = HtmlControlFactory.getHtmlElement(type,axDHTMLEdit); 
//获取元素的属性窗口并显示,待用户设置属性信息后生成html增加到设计视图中 
Form propForm = getPropertyForm(element); 
DialogResult result= propForm.ShowDialog(); 
if (result == DialogResult.OK) 
{ 
obj.pasteHTML(HtmlControlFactory.getHtmlElementString(element)); 
} 
} 
else 
{ 
obj.pasteHTML(HtmlControlFactory.getHtmlElementString(type,axDHTMLEdit)); 
} 
} 
} 
else 
{ 
txtCode.Paste(HtmlControlFactory.getHtmlElementString(type,axDHTMLEdit)); 
} 
} 
 
/// <summary> 
/// 点击增加控件按钮后,是否需要弹出属性窗口进行初始化设置 
/// </summary> 
/// <param name="type">控件类型</param> 
/// <returns>是:需要进行初始化设置;否:不需要进行初始化设置</returns> 
private bool NeedShowPropertyForm(string type) 
{ 
if (HtmlControlType.TABLE == type) return true; 
return false; 
} 
/// <summary> 
/// HTML控件类型 
/// </summary> 
public class HtmlControlType 
{ 
public const string BUTTON = "button"; 
public const string CHECK_BOX_LIST = "checkboxlist"; 
public const string SELECT = "select"; 
public const string DATE_TIME = "datetime"; 
public const string PICTURE = "picture"; 
public const string TABLE = "table"; 
public const string CHECK_BOX = "checkbox"; 
public const string RADIO_BOX = "radio"; 
public const string PASSWORD = "password"; 
public const string HIDDEN = "hidden"; 
public const string TEXT = "text"; 
public const string INPUT = "input"; 
} 
/// <summary> 
/// DHTML控件选中区域类型 
/// </summary> 
public class RangeType 
{ 
/// <summary> 
/// 选中控件 
/// </summary> 
public const string CONTROL = "Control"; 
/// <summary> 
/// 未选中 
/// </summary> 
public const string NONE = "None"; 
} 

主要知识点:

  axDHTMLEdit.DocumentHTML:将一段Html文档赋值给该属性,DHTMLEdit控件可以显示控件布局,即设计模式视图;同时也可以从该属性获取设计模式视图的HTML代码。

  IHTMLSelectionObject 对象获取当前控件选中区域的类型,该对象可以通过axDHTMLEdit的DOM属性的selection属性获取。 IHTMLSelectionObject包含一个type属性,type的属性值有Control、Text、None三种分别代表选中控件,文本,未选中任何对象。

  IHTMLTxtRange 对象,该对象表示与当前选中区域(selection)相关的文本域对象,可以通过、 range.createRange()来获取该对象。可以通过text、htmlText属性获取该区域中的文本字符串;或者通过 pasteHTML(string)方法将一段HTML文本字符串添加到当前选中的文本区域中,再设计模式下向编辑区增加控件即是通过该方法完成的。

  IHTMLElement类型是HTML控件的基类型,通过属性outerHTML可以获取对象的HTML内容



相关阅读:
在Linux环境下安装JSP
对于访问IIS元数据库失败的解决
第6课:学习更多元素
Windows7操作系统无法玩魔兽3的问题
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
掌握XML实例演练ASP+XML编程
B/S开发中常用javaScript技术与代码
Oracle的dual虚拟表介绍
php引用地址改变变量值的问题
简洁的一个实现网页全屏代码
不用组件实现Ajax效果
关于分页查询和性能问题
php5 mysql分页实例代码
php 各种应用乱码问题的解决方法
快速导航

Copyright © 2016 phpStudy |