Build a Message Box the AJAX Way: Part II

The Finishing Touches





Build a Message Box the AJAX Way: Part II

The Finishing Touches


By Bipin Joshi


In Part I of this series we started developing the MessageBox AJAX client control. The MessageBox client control displays message boxes with all the standard features (such as caption, icon, and buttons) of the Windows message box. We developed various enumerations required by the MessageBox control, properties of the MessageBox class, and a few helper methods. This installment builds on what we developed earlier. Specifically, we ll complete the helper methods and various ShowXXXX methods, as well as package our control in an assembly for easy deployment.


Adding Buttons

One of the main functions of the MessageBox control is to display specific buttons as indicated by MessageBoxButtons enumerations. The _AddButtons private method accepts the message, the buttons to be displayed, and the default button. It then creates the required buttons on the fly and adds them to the message box panel. The _AddButtons method is shown in Figure 1.






   var ptr=Function.createDelegate(this,this._HideMessageBox);

   var btnAbort = document.createElement('input');





   var btnRetry = document.createElement('input');





   var btnIgnore = document.createElement('input');






















Figure 1: Adding buttons to the message box.


The _AddButtons method first decides how many buttons to create. Once a user clicks on a button we must invoke a callback method so the message box can be hidden and our calling script is notified about the user selection. To do this, first create a delegate for the _HideMessageBox private function. Then various buttons are created using the createElement method of the document object. Notice the use of the Sys.UI.DomElement and Sys.UI.DomEvent classes. The DomElement class represents an HTML DOM element and its addCssClass method allows us to apply a CSS class to a specified element. The DomEvent class represents an HTML DOM event and its addHandler method allows us to wire an event handler with a DOM event. In our case we wire the click event of the buttons to the _HideMessageBox function. The dynamically added buttons are then added to the message box. Finally, focus is set to one of the buttons using the JavaScript focus method. The code fragment in Figure 1 shows Abort, Retry, and Ignore buttons being added. The other button variations follow a similar pattern.


Making the Message Box Visible

When a message box is ready with the message, caption, icon, and buttons you can show it to the user. The actual job of showing a message box is done by various ShowXXXX methods discussed later in this article, but all the ShowXXXX methods make use of a helper method (_MakeVisible; see Figure 2).







 if(this._left==-1 && this._top==-1)


   this._left = (screen.availWidth - this._width) / 2;

   this._top = (screen.availHeight - this._height) / 2;



Figure 2: Making the message box visible.


The _MakeVisible method essentially sets the left and top coordinates of the message box and makes it visible. The setVisible method of the DomElement class sets the visibility of the message box to true. The addCssClass method applies the CSS class to the message box. If the Left and Top properties are not specified, we set default values to them. The style attributes width, height, left, and top are then set.


Hiding the Message Box

The _HideMessageBox method is called when a user clicks on any of the message box buttons. The complete code of _HideMessageBox is shown in Figure 3.




































Figure 3: Hiding the message box.


The _HideMessageBox method first removes the CSS class applied to the page body and hides the message box. Depending on the button clicked by the user (as indicated by the event.srcElement property), the DialogResult property of the MessageBox class is set. Finally, the callback method as indicated by the CloseCallback property is invoked. This way you can wire a custom operation once the message box is closed. Note that the callback function receives a parameter of type DialogResult.


Showing the Message Box

Now that we ve completed all the helper methods, let s add various ShowXXXX methods. The ShowXXXX methods prepare the message box and show it to the user. Figure 4 shows the complete list of ShowXXXX methods.





Displays the message box with only an OK button, but without any additional features such as caption, icon, or additional buttons.


Displays a message box with a message, caption, and OK button.


Displays a message box with a message, caption, and buttons, as indicated by the MessageBoxButtons enumeration.


Displays a message box with a message, caption, buttons, and icon, as indicated by the MessageBoxIcon enumeration.


Displays a message box with a message, caption, buttons, icon, and default button, as indicated by the MessageBoxDefaultButton enumeration.

Figure 4: List of ShowXXXX methods.


Because most of them do similar jobs we won t discuss every ShowXXXX method. Figure 5 shows the code for the _ShowDefaultButton method.





 var msgbox=this._element;







Figure 5: Showing a message box with caption, buttons, icon, and default button.


The _ShowDefaultButton method is the most expansive method in that it accepts all the parameters (message, caption, buttons, icon, and default button). It then gets a reference of the base element that indicates the message box. It then calls various helper methods to attach required features. For example, the code from Figure 5 calls the _AddCaption method to set a caption, the _AddIcon method to specify an icon, and the _AddButtons method to add the required buttons. The _MakeVisible method makes the message box visible to the user. This completes our MessageBox control; we are ready to use it in our Web forms.


Using the MessageBox Control

Now that our MessageBox control is ready, let s put it to use in our Web form. Begin by adding a new CSS style sheet into your Web site, adding to it the CSS classes shown in Figure 6.


The modalBackground CSS class is intended for the background body when the message box is being displayed. The msgbox, caption, and button CSS classes are meant for the message box, caption of the message box, and buttons of the message box, respectively. Refer to the style sheet we just created in the Web form using a tag. Next, add an HTML button and a

tag inside the
tag, as shown in Figure 7.


Figure 7: Markup of a Web form that uses the message box.


When clicked, the HTML button calls the JavaScript function ShowMsgBox (we ll write the ShowMsgBox function in a moment). The

with ID of divMsgBox acts as the message box. This
acts as the outermost container for the message, caption, icon, and buttons that we add dynamically. The ShowMsgBox function, which you can add in a