Creating Composite Controls


To this point, you've built custom controls from scratch. However, in some cases, creating a new control out of existing controls is much easier. For example, imagine that you want to create a custom control that displays a login form. You want the control to display both username and password text boxes. This control is a good candidate for a composite control.

Listing 28.28 contains the code for a composite Login control.

Listing 28.28 Login.vb
 Imports System Imports System.Web Imports System.Web.UI Imports System.Web.UI.WebControls Namespace myControls Public Class Login Inherits Control Implements INamingContainer Public Property Username As String Get   Me.EnsureChildControls()   Return CType( Controls( 2 ), TextBox ).Text End Get Set   Me.EnsureChildControls()   CType( Controls( 2 ), TextBox ).Text = Value End Set End Property Public Property Password As String Get   Me.EnsureChildControls()   Return CType( Controls( 5 ), TextBox ).Text End Get Set   Me.EnsureChildControls()   CType( Controls( 5 ), TextBox ).Text = Value End Set End Property Protected Overrides Sub CreateChildControls()   Me.Controls.Add( New LiteralControl( "<div style=""border: 5px " & _     "inset #cccccc;background-color:#eeeeee;width:50%;padding:10px"">" ) )   ' Add Username   Me.Controls.Add( New LiteralControl( "<b>Username:</b> " ) )   Me.Controls.Add( New TextBox )   Me.Controls.Add( New LiteralControl( "<p>" ) )   ' Add Password   Dim txtPass As New TextBox   Me.Controls.Add( New LiteralControl( "<b>Password:</b> " ) )   txtPass.TextMode = TextBoxMode.Password   Me.Controls.Add( txtPass )   Me.Controls.Add( New LiteralControl( "<p>" ) )   ' Add Submit Button   Dim btnButton As New Button   btnButton.Text = "Login!"   Me.Controls.Add( btnButton )   Me.Controls.Add( New LiteralControl( "</div>" ) ) End Sub End Class End Namespace 

The C# version of this code can be found on the CD-ROM.

The bulk of Listing 28.28 is contained in the CreateChildControls subroutine. This subroutine adds username TextBox , password TextBox , and Button controls to the Controls collection of the Login control.

Notice that the Login control does not contain a Render method. It isn't necessary because all the rendering is taken care of by the child controls. The child controls even automatically handle preserving view state. If you enter a username in the username control, the username is preserved between form posts.

The current values of the username and password TextBox controls are exposed through two properties: Username and Password . Because these properties are declared with the Public modifier, you can read and set them from within an ASP.NET page.

There's one final thing you should notice about Listing 28.28. The control implements the INamingContainer interface, which does not define any methods that you must implement. This interface creates a new ID namespace within a page's control hierarchy; it prevents naming conflicts when the Login control is instantiated more than once. You should always implement the interface when building compositional controls.

The page in Listing 28.29 illustrates how you can use the Login control within an ASP.NET page.

Listing 28.29 DisplayLogin.aspx
 <%@ Register TagPrefix="myControls" Namespace="myControls" Assembly="Login"%> <Script Runat="Server"> Sub Page_Load   If IsPostBack Then     lblMessage.Text = "Hi " & ctrlLogin.Username     lblMessage.Text &= ", your password is: "     lblMessage.Text &= ctrlLogin.Password   End If End Sub </Script> <html> <head><title>DisplayLogin.aspx</title></head> <body> <form Runat="Server"> <myControls:Login   ID="ctrlLogin"   Runat="Server"/> <p> <asp:Label   ID="lblMessage"   EnableViewState="False"   Font-Size="18pt"   Runat="Server" /> </form> </body> </html> 

The C# version of this code can be found on the CD-ROM.

The page in Listing 28.29 displays the values of the Username and Password properties of the Login control. When the form containing the Login control is submitted, the values of these properties are displayed in a Label control (see Figure 28.3).

Figure 28.3. Displaying the Login control.

graphics/28fig03.jpg

Handling Events in a Composite Control

In the preceding section, you created a control that displays a simple login form. You can use the Login control to submit a username and password combination. In this section, you learn how to extend the Login control to handle events, such as the button Click event that occurs when the login form is submitted.

The trick to handling events in a composite control is to use the Visual Basic AddHandler statement, which enables you to associate a subroutine with an event. Listing 28.30 demonstrates how you can use the AddHandler statement with the Login control to associate a subroutine with the button Click event.

Listing 28.30 LoginEvent.vb
 Imports System Imports System.Web Imports System.Web.UI Imports System.Web.UI.WebControls Namespace myControls Public Class LoginEvent Inherits Control Implements INamingContainer Sub CheckPassword( s As Object, e As EventArgs )   Dim strUsername, strPassword As String   Dim lblLabel As Label   strUsername = CTYPE( Controls( 2 ), TextBox ).Text   strPassword = CTYPE( Controls( 5 ), TextBox ).Text   lblLabel = CTYPE( Controls( 9 ), Label )   If strUsername = "joe" and strPassword = "secret" Then     lblLabel.Text = "Welcome Joe!"   Else     lblLabel.Text = "Invalid Password!"   End If End Sub Protected Overrides Sub CreateChildControls()   Me.Controls.Add( New LiteralControl( "<div style=""border: 5px " & _     "inset #cccccc;background-color:#eeeeee;width:50%;padding:10px"">" ) )   ' Add Username   Me.Controls.Add( New LiteralControl( "<b>Username:</b> " ) )   Me.Controls.Add( New TextBox )   Me.Controls.Add( New LiteralControl( "<p>" ) )   ' Add Password   Dim txtPass As New TextBox   Me.Controls.Add( New LiteralControl( "<b>Password:</b> " ) )   txtPass.TextMode = TextBoxMode.Password   Me.Controls.Add( txtPass )   Me.Controls.Add( New LiteralControl( "<p>" ) )   ' Add Submit Button   Dim btnButton As New Button   btnButton.Text = "Login!"   AddHandler btnButton.Click, AddressOf CheckPassword   Me.Controls.Add( btnButton )   Me.Controls.Add( New LiteralControl( "</div>" ) )   ' Add Label Control   Dim lblLabel As New Label   lblLabel.EnableViewState = False   Me.Controls.Add( lblLabel ) End Sub End Class End Namespace 

The C# version of this code can be found on the CD-ROM.

In Listing 28.30, the AddHandler statement associates the login form's button Click event with a subroutine named CheckPassword .

The CheckPassword subroutine compares the username and password entered into the form to the username joe and password secret . If you enter joe and secret , the string Welcome Joe! is assigned to a Label control. Otherwise, the string Invalid Password! is assigned to the Label control.

You can test the new Login control, named LoginEvent , by using the page in Listing 28.31.

Listing 28.31 DisplayLoginEvent.aspx
 <%@ Register TagPrefix="myControls" Namespace="myControls" Assembly="LoginEvent"%> <html> <head><title>DisplayLoginEvent.aspx</title></head> <body> <form Runat="Server"> <myControls:LoginEvent   Runat="Server"/> </form> </body> </html> 

The C# version of this code can be found on the CD-ROM.



ASP.NET Unleashed
ASP.NET 4 Unleashed
ISBN: 0672331128
EAN: 2147483647
Year: 2003
Pages: 263

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net