上一篇 下一篇 列表

表单设计器—HTML元素操作

悦车日记 DATE:2015-04-13



表单设计器界面图为:   查看原图(大图)   主编辑区域的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内容

相关阅读