用托管C++编写自定义Web组合控件

　　作者：谢启东编译

　　什么是自定义的组合控件

　　自定义的Web组合控件正如它名字说的那样：在单个控件中集成了一个或多个服务端程序及HTML控件。自定义的组合控件在功能上与用户控件非常类似，最大的不同之处是，它只存在于它自己的程序集中（或与其他控件共享），能被放在工具条中，并可提供它所包含控件的所见即所得视图方式。

　　另一方面，自定义Web组合控

件比用户控件（user control）更加难创建，因为Visual Studio.NET的设计者们并没有提供可视化创建它们的任何工具，因此，问题是：为什么要用组合控件取代用户控件呢？当分发控件到多个Web程序或系统中时，如果使用自定义Web组合控件，情况要好得多，而用户控件最好用在不重视复用的地方，例如，如果只准备在你自己的网站中使用控件，那么用户控件可能会是更好的选择。基本上来说，你不得不在创建它所花的额外努力与从中所得到的可复用次数之间，作一权衡；同时，因为自定义组合控件只存在于它自己的程序集中，所以在每台电脑上，只需要一份拷贝，而用户控件则放置于Web程序集内，因此，必须存储在每一个使用它的Web网站上。

　　创建一个自定义Web组合控件

　　创建一个自定义Web组合控件的步骤，实质上与创建一个自定义的超类Web控件一样，本例中为SearchControl，第一件要做的事，是设计控件的外观，完成之后，看起来大致如图1所示。

图1：设计器中的控件外观

　　SearchControl，正如上面所看到的，由三个服务端控件组成（实际上有四个，后面将会说到）：一个标签控件、一个文本框控件、一个按钮。另外，自定义Web组合控件中比较棘手的部分是它们并没有一个很好的拖放设计工具以支持创建控件，而需要以老方式--手工编写代码来完成。但是，也不完全正确，在此不必手工编写服务端或HTML控件代码，那怎样创建SearchControl的外观呢？

　　首先，在SearchControl类中写出三个服务端控件的定义：

Label *label; TextBox *textbox; Button *button;

　　接下来，在类的构造函数中创建它们的实例：

SearchControl::SearchControl() { 　label = new Label(); 　textbox = new TextBox(); 　button = new Button(); }

　　最后，在类的CreateChildControls()方法中，把它们添加到一个自定义Web组合控件的子控件集合里：

void SearchControl::CreateChildControls() { 　Controls->Add(label); 　Controls->Add(textbox); 　Controls->Add(button); }

　　CreateChildControls()方法是从Control类继承来的一个虚方法，而WebControl也正是从Control类继承而来。

　　注意，在此并不需要Render()方法，因为组成组合控件的服务端与HTML控件能绘制自身，所以，你完全不用考虑此方法，或者在Render()方法中调用基类：

void SearchControl::Render(HtmlTextWriter *output) { 　__super::Render(output); }

　　现在，有了基本的外观了，还可以添加一些功能。首先，需要一些属性，用于更新标签及文本框内的值，以下是属性的定义：

[Bindable(true), Category("Appearance"), DefaultValue("")] __property void set_Value(String *value); __property String *get_Value(); [Bindable(true), Category("Appearance"), DefaultValue("")] __property void set_LabelText(String *value); __property String *get_LabelText(); [Bindable(true), Category("Appearance"), DefaultValue("")] __property void set_ButtonText(String *value); __property String *get_ButtonText();

　　代码如下：

String *SearchControl::get_LabelText() { 　this->EnsureChildControls(); 　return label->Text; } void SearchControl::set_LabelText(String *value) { 　this->EnsureChildControls(); 　label->Text = value; } String *SearchControl::get_Value() { 　this->EnsureChildControls(); 　return textbox->Text; } void SearchControl::set_Value(String *value) { 　this->EnsureChildControls(); 　textbox->Text = value; } String *SearchControl::get_ButtonText() { 　this->EnsureChildControls(); 　return button->Text; } void SearchControl::set_ButtonText(String *value) { 　this->EnsureChildControls(); 　button->Text = value; }

　　上述代码最棘手的部分就是EnsureChildControls()方法，其保证了子控件在之前已经被创建，如果你不添加这个，设计器将会显示一个空白的自定义控件。 当你运行上述代码时，将会发现一些设计上的缺陷。首先，文本框总是同样大小，并且不能排列多于一个SearchControl实例的标签。为进行修正，要添加第四个服务端控件到自定义Web组合控件中，在此，表格（Table）可能是处理所有控件布局问题最好的方法：

void SearchControl::CreateChildControls() { 　System::Web::UI::WebControls::Table *table = new Table(); 　TableRow *row = new TableRow(); 　TableCell *cell1 = new TableCell(); 　TableCell *cell2 = new TableCell(); 　TableCell *cell3 = new TableCell(); 　cell1->Controls->Add(label); 　cell2->Controls->Add(textbox); 　cell3->Controls->Add(button); 　row->Cells->Add(cell1); 　row->Cells->Add(cell2); 　row->Cells->Add(cell3); 　table->Rows->Add(row); 　Controls->Add(table); }

　　为处理排列问题，需再再添加两个属性：LabelWidth和LabelAlign。LabelWidth保证了标签控件为一特定的单位长度，而LabelAlign允许标签使用HorizontalAlign枚举进行排列：

[Bindable(true), Category("Appearance")] __property void set_LabelWidth(Unit value); __property Unit get_LabelWidth(); [Bindable(true), Category("Appearance")] __property void set_LabelAlign(HorizontalAlign value); __property HorizontalAlign get_LabelAlign();

　　现在问题又有些棘手了，为指定标签的宽度与排列，可对表格单元格属性进行修改，但在单元格中并不包含标签自身。为简化起见，创建一个名为cellLabel的私有类变量，由其取代CreateChildControls()方法中的cell1，以下是LabelWidth与LabelAlign属性的实现代码：

Unit SearchControl::get_LabelWidth() { 　this->EnsureChildControls(); 　return cellLabel->Width; } void SearchControl::set_LabelWidth(Unit value) { 　this->EnsureChildControls(); 　cellLabel->Width = value; } HorizontalAlign SearchControl::get_LabelAlign() { 　this->EnsureChildControls(); 　return cellLabel->HorizontalAlign; } void SearchControl::set_LabelAlign(HorizontalAlign value) { 　this->EnsureChildControls(); 　cellLabel->HorizontalAlign = value; }

　　处理文本框的缩放时，可使它完全充满包含其的单元格，这样，当表格缩放时，文本框也会跟着缩放。于是，当控件缩放时，文本框会随控件变化，或者你可以指定标签为控件的一个百分比，如30%，这样一来，当控件缩放时，标签与文本框都会基于百分比进行调整，以下是修改后的CreateChildControls()方法：

void SearchControl::CreateChildControls() { 　System::Web::UI::WebControls::Table *table = new Table(); 　TableRow *row = new TableRow(); 　TableCell *cell2 = new TableCell(); 　TableCell *cell3 = new TableCell(); 　cellLabel->Controls->Add(label); 　textbox->Width = Unit::Percentage(100); 　cell2->Controls->Add(textbox); 　cell3->Controls->Add(button); 　row->Cells->Add(cellLabel); 　row->Cells->Add(cell2); 　cell3->Width = Unit::Percentage(1); 　row->Cells->Add(cell3); 　table->Rows->Add(row); 　table->Width = Unit::Percentage(100); 　Controls->Add(table); }

　　另外，别忘了在构造函数中创建labelCell的实例，要不然可要花点时间找出为什么设计器会给你一个大大的错误提示框了。

　　处理事件

　　现在，有关控件的外观已经全部完成，是时候对控件加入一点功能了。在此，你想做的第一件事，可能就是让按钮控件能处理单击事件了，我们在此使用一个事件处理函数，它就和普通的Windows与Web程序中的一样。以下是在单击事件中添加的事件处理函数：

button->Click += new EventHandler(this, buttonClicked);

　　接着，创建一个处理此事件的方法：

void SearchControl::buttonClicked(Object *sender, EventArgs *e) { 　OnClick(e); }

　　看到了吧，没有多深的科学道理，很简单。

　　引发事件

　　如果想让控件的用户访问到单击事件，那该怎么做呢？我们需要创建一个公共的__event，在此之上，用户可提供他们自己的事件处理函数：

__event EventHandler* Click;

　　或许，你还想提供一个受保护的OnClick()方法，这样，如果有人从SearchControl继承，在传回控件给SearchControl自定义Web组合控件之前或之后，他可为单击事件提供一些额外的功能。另外，如果你很专心，那一定注意到了buttonClick()事件处理函数实际上是调用了OnClick()方法，由其把控件从按钮传递到任意事件处理函数，而事件处理函数则可被附加于控件的单击事件之上。

void SearchControl::OnClick(EventArgs *e) { 　if (Click != 0) 　　Click(this, e); }

　　因为单击事件是默认也是唯一的事件，也许，再添加一个DefaultEvent("Click")属性，指定单击为控件的默认事件，会是一个不错的主意：

[DefaultProperty("Value"), DefaultEvent("Click"), ToolboxData("<{0}:SearchControl runat=server></{0}:SearchControl>")] public __gc class SearchControl : public System::Web::UI::WebControls::WebControl {}

　　请记住，如果你修改了元数据（属性），那必须删除并重新引用程序集，以便元数据可被重新识别。一般而言，如果要使用此控件，只需在设计器中双击SearchControl控件，以创建一个事件处理函数。（下面假定使用者的代码为C#代码）：

private void SearchControl1_Click(object sender, System.EventArgs e) { 　WebCustomControl1.Text = SearchControl1.Value; }

　　在本文结束时，作一下简单的小结，在托管C++中开发自定义Web控件，涉及了一些比较有意思的事情：首先，它创建了一个由四个服务端控件所组成的自定义Web组合控件，并演示了怎样使用属性来操作控件；其次，还说明了怎样处理由控件产生的事件；最后，演示了怎样传递事件给使用自定义组合控件的Web应用程序。