65.9K
CodeProject 正在变化。 阅读更多。
Home

用于HTML作为用户界面的另一组控件

周建华 (Johnson Zhou)
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2002年12月28日

4分钟阅读

viewsIcon

61032

downloadIcon

786

使用MFC在Windows中处理HTML界面的用户输入。

引言

我写了一篇关于标准 Windows UI 的文章。我们也可以使用 HTML 作为用户界面来编写 MFC 客户端。幸运的是，在 Visual Studio.NET 中，MFC 有一个名为 CdhtmlDialog 的类。我认为这比从头开始要好得多。您可以像标准 Windows 对话框一样使用该类，只是您需要使用 HTML 绘制用户界面。许多消息映射将映射到 HTML 中的元素。与标准 Windows UI 一样，用户输入存在一些问题，因为它们仍然存在于 HTML UI 中。请参阅这篇关于自动收集信息控件组的文章

https://codeproject.org.cn/useritems/cntGroup.asp

这篇文章是我们一系列文章中的一篇，旨在处理 HTML UI 中的相同问题。

参考文献

本文需要我写的以下文章支持。

Windows SDK DOM 接口的包装器类 https://codeproject.org.cn/useritems/xmlFile.asp
通用数据检查函数集 https://codeproject.org.cn/useritems/my_check.asp
使用 XML 作为字典的 ComboBox https://codeproject.org.cn/useritems/dictcomb.asp
如何使用 C++ 操作 HTML 文件中的控件 https://codeproject.org.cn/useritems/htmldocument.asp
自动收集信息控件组 https://codeproject.org.cn/useritems/cntGroup.asp

如何处理日期和时间

在标准窗口 UI 中，有一个通用的控件来处理日期/时间。在 HTML 中，没有控件可以做到这一点（参见如何使用 C++ 操作 HTML 文件中的控件）。为了完成这项任务，我们需要几个输入控件。主要的处理工作是获取日期并验证该日期是否正确。

日期可以分为 3 种信息：日期 + 时间，仅时间，仅日期。在处理日期时，我们可以将其视为 2 种情况，前两种情况已包含在内。在 HTML 中，我们使用 HTML 元素的自定义属性来定义哪个控件属于日期或时间组。例如

<input type="text" mydate="i_now_pre_pro" id="i_now_pre_pro_year" 
  name="i_now_pre_pro_year" size="5" class="bot_border" maxlength="4">
Year<input type="text" mydate="i_now_pre_pro" id="i_now_pre_pro_month" 
  name="i_now_pre_pro_month" size="3" class="bot_border" maxlength="2">
month <input type="text" mydate="i_now_pre_pro" id="i_now_pre_pro_day" 
  name="i_now_pre_pro_day" size="3" class="bot_border" maxlength="2">
  day</td>

在 HTML 的这段代码段中，“i_now_pre_pro_year"、”i_new_pre_pro_month” 和 ”i_new_pre_pro_day” 共同构成一个日期输入。对于每个 INPUT 标签，我们设置一个同名的“mydate”属性来指示这 3 个控件属于一个日期组。与日期相同，所有带有时间信息的控件都具有一个名为“mytime”的属性。总之，为了处理日期和时间，我们使用同名的“mydate”或“mytime”属性将控件分组为一个 HTML 中的控件。

如何处理单选按钮

在标准 Windows UI 中，单选按钮为一组分配一个变量，该变量以具有分组属性的单选按钮开始，其他单选按钮是其控件 ID 的连续编号。在 HTML 中，没有显式分组属性。单选按钮组中的所有单选按钮都具有相同的“name”属性值。我们必须遵守 HTML 的规则。对于我们的控件组，我们假设单选按钮组具有相同的 name 属性值，并且单选按钮的 ID 不同。但是同一组中的所有单选按钮都以 2 位数字结尾。所以，请不要将您的单选按钮 ID 命名为以数字结尾。

以下是 HTML 的示例代码段

<input type="radio" id="i_now_isclear01" name="i_now_isclear" 
  VALUE="i_now_isclear01">
<label for="i_now_isclear01" class="hand">clear</label> 
<input type="radio" id="i_now_isclear02" name="i_now_isclear" 
  VALUE="i_now_isclear02">
<label for="i_now_isclear02" class="hand">uncleare</label>
<input type="radio" id="i_now_isclear03" name="i_now_isclear" 
  VALUE="i_now_isclear03">
<label for="i_now_isclear03" class="hand"> stink </label>

对于单选按钮组，将会有另一个问题需要处理。在 Visual Studio .NET 的 CdhtmlDialog 默认情况下，它将为每个选中的单选按钮返回一个从零开始的索引号。在实际应用中，每个项可能是一个有意义的数字。将会有从该索引到有用数字的映射。

实现

为了实现这个控件组，我们编写了 4 个类。


CDhtml_Control 定义通用控件信息和变量信息。这与 CNT_Control 相反。
CDhtmlDateTime 处理日期时间控件组。
CDhtml_Radio 处理单选按钮组和值映射。
CDhtmlControlGroup 定义用户界面的初始化、数据交换和验证。

其他类，例如 CHtmlDocument 等，来自其他文章，这里不再解释。这个控件组也可以通过文件和手动（硬编码）进行初始化。文件格式与 CXMLResult 相同。您可以在我上一篇关于标准 Windows UI 控件组的文章中找到它。

如何使用这些类

要使用这些类，请按照以下步骤操作

  • 步骤 1：创建一个您想要的作为用户界面的 HTML 文件，每个元素的 ID 和名称按照您的需求命名。
  • 步骤 2：用您刚刚编写的 HTML 文件编写一个 XML 文件。
  • 步骤 3：在您派生的 CdhtmlDialog 类的声明中添加以下变量
    CXMLDict *m_pDict;
CDhtmlControlGroup *m_cntGroup;
  • 步骤 4：在派生的 CDhtmlDialog 类的构造函数中，添加以下行
    m_pDict = NULL;
m_cntControl.InitFromFile(theApp.m_Path+_T(“\\mytext.xml”));
  • 步骤 5：在 InitDialog 中添加以下行，使对话框显示滚动条，以防 HTML 无法完全显示在对话框中。
    SetHostFlags(DOCHOSTUIFLAG_NO3DBORDER);
  • 步骤 6：在派生类的 DoDataExchange 函数中，添加以下行以支持双向数据交换。
    m_cntGroup.DoDataExchange (pDX);
  • 步骤 7：重写 CDhtmlDialog 的 OnNavigateComplete，为日期/时间处理和单选按钮组处理添加以下内容
    m_cntGroup.GetAllDateTime( m_spHtmlDoc);
    m_cntGroup.GetAllRadios (m_spHtmlDoc);

    其中 m_spHtmlDoc 是 CDhtmlDialog 的成员变量，您可以直接使用它。

  • 步骤 8：在您根据代码编写的数据提交函数中，添加以下行，您可以以 CXMLCmd 格式从用户界面获取输入结果。
        CString xml;
    CXMLCmd cmd;
        UpdateData(TRUE);
    cmd.InitCmd ();
    m_cntGroup.AddToXML (&cmd);
    cmd.GetXML (xml);
  • 步骤 9：将控件组使用的所有文件添加到您的项目中。编译并享受您的旅程。
© . All rights reserved.