您当前的位置: 首页 » HTML/XHTML/XML编程 » 构建自己的HTML工具
构建自己的HTML工具
论坛链接
很多开发人员都使用诸如Dreamweaver或FrontPage来设计自己的Web网页。由于需要的所有功能都集中于WYSIWY工具，这些工具显得相当优秀。然而，有些时候这些工具能够提供更多的功能与特性。
例如，假设你想为用户提供建立一个基于特定模板的数据入口窗体。即这一入口窗体工作方式类似于报表自定义(Report Builder)。这样，你可以构建自己的窗体自定义(Form Builder)工具，以能够自动地与数据源产生关联，并可以为终端用户提供数据入口窗体。在本文中，我将建立一个简单的网页，以引导读者能够通过一个<INPUT>元素和一个<SELECT>元素建立一个Web网页，并建立一个数据入口窗体。
首先，确定数据流向的目标地点。在我们的例子中，数据将流向SQL Server上的名为SALES的简单列表。这一列表的相关域为售货员(Salesperson)和数量(金钱)。Salesperson域不太适合与另一列表SALES_STAFF的关键字相联系。SALES_STAFF表包含售货员的first_name和last_name。由于SALES_STAFF表为参考列表，本文作者将使用<SELECT>来选择这一表的域，而数量域将作为一个简单的<INPUT>元素。
现在，你必须弄清楚构建这些元素的原理。我们希望作者能够选择表中的域，然后选择适合的元素。接着，作者能够将一些属性配置给这些元素。对于<SELECT>表，作者可以分配size属性和建立一系列可选择的尺寸值。对于<INPUT>元素，他们也可以分配size尺寸。除此之外，作者将可以设置一些style属性，比如在窗体上放置元素的位置。同样，作者将可以将数据域分配给元素。表A给出了页面布局的代码。
这些HTML元素位于屏幕的左边。当用户在屏幕上放置一个元素时，他们将可在屏幕下底端的属性列表中看到这些元素的属性。属性列表与相应的XML属性数据相关联。当用户改变属性列表的数据时，就会生成新的元素属性。
用户可以使用光标改变位置属性，以确定<DIV>的元素位置，或者用户可以在属性列中的输入新的值。为了使用光标在<DIV>改变位置，我将添加一个HTC以提供这一功能。表B包含了HTC的代码。
为了“绑定”数据以达到每一属性都列于表格中，我将列表“绑定”到一个单一属性的XML岛。每一次操作我都将会激活其它元素，并将元素的XML载入到数据岛，这样就可以将表中的数据关联起来。当元素失去“激活”时，新的元素XML属性就会被载入。
为了建立元素，我将在Web页面中包含JavaScript以处理这些元素，可查看表C。
同样，通过一些转换操作可以完成列表之间的关系。我将一个<IMG>键添加到行，并使用它的onload事件获得rowIndex属性。然后，我使用这些属性值以获得相关的属性节点。通过这一方式，我可以设置是否将<SELECT>元素显示到所有的数据域。
一旦你建立了所有的元素，XML数据就会被存储在一个文件或数据库中。然后，使用一个XSLT表单重新设置输出的格式，并且生成新的HTML窗体。数据将通过与页面关联的XML数据自动连接到数据域，并且XML数据将被传送以增加或更新原来的内部数据。
例如，假设你想为用户提供建立一个基于特定模板的数据入口窗体。即这一入口窗体工作方式类似于报表自定义(Report Builder)。这样，你可以构建自己的窗体自定义(Form Builder)工具，以能够自动地与数据源产生关联，并可以为终端用户提供数据入口窗体。在本文中，我将建立一个简单的网页，以引导读者能够通过一个<INPUT>元素和一个<SELECT>元素建立一个Web网页，并建立一个数据入口窗体。
首先，确定数据流向的目标地点。在我们的例子中，数据将流向SQL Server上的名为SALES的简单列表。这一列表的相关域为售货员(Salesperson)和数量(金钱)。Salesperson域不太适合与另一列表SALES_STAFF的关键字相联系。SALES_STAFF表包含售货员的first_name和last_name。由于SALES_STAFF表为参考列表，本文作者将使用<SELECT>来选择这一表的域，而数量域将作为一个简单的<INPUT>元素。
现在，你必须弄清楚构建这些元素的原理。我们希望作者能够选择表中的域，然后选择适合的元素。接着，作者能够将一些属性配置给这些元素。对于<SELECT>表，作者可以分配size属性和建立一系列可选择的尺寸值。对于<INPUT>元素，他们也可以分配size尺寸。除此之外，作者将可以设置一些style属性，比如在窗体上放置元素的位置。同样，作者将可以将数据域分配给元素。表A给出了页面布局的代码。
这些HTML元素位于屏幕的左边。当用户在屏幕上放置一个元素时，他们将可在屏幕下底端的属性列表中看到这些元素的属性。属性列表与相应的XML属性数据相关联。当用户改变属性列表的数据时，就会生成新的元素属性。
用户可以使用光标改变位置属性，以确定<DIV>的元素位置，或者用户可以在属性列中的输入新的值。为了使用光标在<DIV>改变位置，我将添加一个HTC以提供这一功能。表B包含了HTC的代码。
为了“绑定”数据以达到每一属性都列于表格中，我将列表“绑定”到一个单一属性的XML岛。每一次操作我都将会激活其它元素，并将元素的XML载入到数据岛，这样就可以将表中的数据关联起来。当元素失去“激活”时，新的元素XML属性就会被载入。
为了建立元素，我将在Web页面中包含JavaScript以处理这些元素，可查看表C。
同样，通过一些转换操作可以完成列表之间的关系。我将一个<IMG>键添加到行，并使用它的onload事件获得rowIndex属性。然后，我使用这些属性值以获得相关的属性节点。通过这一方式，我可以设置是否将<SELECT>元素显示到所有的数据域。
一旦你建立了所有的元素，XML数据就会被存储在一个文件或数据库中。然后，使用一个XSLT表单重新设置输出的格式，并且生成新的HTML窗体。数据将通过与页面关联的XML数据自动连接到数据域，并且XML数据将被传送以增加或更新原来的内部数据。