Introduction
Most applications today utilizes some kind of messagebox to either give feedback to the user or halt the execution of the application, until the user performs a choice. Typically Ok, Yes, No or Cancel. Creating such a control for the web can be a daunting task, but it doesn't have to be. By using Gaia Ajax we can pop out a fairly feature rich MessageBox in a short amount of time. In this blog I am going to create the MessageBox and use it in a simple sample. The code will be provided for download if you find it useful.
Gaia Ajax never had a messagebox and that's mostly because it has always been so easy to create one yourself. We've had a few requests for such a control so that's why we're mocking up this little tutorial on how you can do it. Hopefully this serves as a great learning experience for you to see how easy you can extend Gaia yourself to suit your needs.
There are a couple of key points to remember when creating such a component. The first is simple usage and the second is to build upon existing knowledge. The latter means that as many key concepts as possible should be taken out of the traditional modal dialog box we use in Windows Forms programming.
Therefore I've decided on the following API
- Caption -> This is the Title
- Description -> Descriptive text
- Buttons -> Which buttons are we presenting
- MessageBoxType -> What kind of a messagebox will you use ( Warning, Error, Info, etc )
After the user has performed a selection, we can get access to the DialogResult on the EventArgs for the OnClosing event of the dialog box. The MessageBox is of course fully ajaxified and modal thanks to Gaia Ajax. We'll add the messagebox declaratively in markup with the following code
Usage
1: <msg:MessageBox
2: ID="msgboxYesNoInfo"
3: Caption="Question"
4: MessageBoxType="Ok"
5: Buttons="YesNo"
6: OnClosing="msgboxYesNoInfo_Closing"
7: Description="Are you a programmer?"
8: runat="server" />
The messagebox can be made visible in any eventhandler with a simple call to Show() like shown here
1: protected void buttonShowMessage_Click(object sender, EventArgs e)
2: {
3: msgboxYesNoInfo.Show();
4: }
This will popup the Informative MessageBox asking you if you are a programmer.
Then we can put
up the conditional logic in the Closing event handler. In this case we just set the Text
property of
1: protected void msgboxYesNoInfo_Closing(object sender, MessageBox.MessageBoxEventArgs e)
2: {
3: if (e.DialogResult == MessageBox.MessageBoxButtonDialogResultEnum.Yes)
4: {
5: info.Text = "We love programmers here at Gaiaware :-)";
6: }
7: else
8: {
9: info.Text = "A career in programming offers excellent opportunites";
10: }
11:
12: new Effect(info, Effect.TypeOfEffect.Pulsate);
13: }
You can either reuse the existing messagebox by modifying the properties or add more instances
to the page. This mostly depends on your usage needs. Declaring controls statically lessens
the ViewState load since properties doesn't have to be marked dirty so it's really up to you
to decide what you want. For this example I am declaring three different MessageBoxes.
Implementation
Let's move over to something far more exciting. How do you go ahead and create such a control
yourself? In this example I am going to create it as an ASCX. That means the MessageBox will
have an associated file that you can use to type the markup. In this ASCX we're declaring an
Instance of the Gaia Ajax Window component. The code looks like this
1: <%@ Control
2: Language="C#"
3: AutoEventWireup="true"
4: CodeBehind="MessageBox.ascx.cs"
5: Inherits="MessageBoxExample.UserControls.MessageBox" %>
6:
7: <gaia:Window
8: Visible="false"
9: ID="msg"
10: runat="server"
11: Caption="Error"
12: IconCssClass="messagebox-icon-error"
13: Width="320"
14: Height="150"
15: Animation="0"
16: OpacityWhenMoved="1"
17: CenterInForm="true"
18: Resizable="false"
19: Draggable="false"
20: Maximizable="false"
21: Closable="true"
22: Minimizable="false" OnClosing="windowError_Closing">
23: <p><gaia:Label ID="titleLabel" runat="server"></gaia:Label></p>
24: <gaia:Button
25: ID="buttonOk"
26: Visible="true"
27: Text="Ok"
28: runat="server"
29: OnClick="buttonOk_Click" />
30:
31: <gaia:Button
32: ID="buttonYes"
33: Visible="false"
34: Text="Yes"
35: runat="server"
36: OnClick="buttonYes_Click" />
37:
38: <gaia:Button
39: ID="buttonNo"
40: Visible="false"
41: Text="No"
42: runat="server"
43: OnClick="buttonNo_Click" />
44: </gaia:Window>
Here we can set all the properties we expect for our messagebox and define all the buttons we
need. We're not going to use all of them at once, but we will just toggle visibility to get
the ones we need. InVisible Gaia Controls are never rendered to the page anyway.
If we switch to Design Mode in Visual Studio you can see that Gaia Ajax has full WYSIWYG support in the Design Time Experience.
Then we forward all the properties we are interessted in giving the user. For example to set
the Title/Caption we just declare the Caption property in Codebehind and forward the setter
and getter to the Window instance.
We also declare a method called show that displays the
Window and brings it to front
1: public void Show() { msg.Visible = true; msg.BringToFront(); }
2:
3: public string Caption
4: {
5: get { return msg.Caption; }
6: set
7: {
8: msg.Caption = value;
9: }
10: }
Then we define the enums we are going to offer the user to simplify usage of the MessageBox.
We're limiting ourselves to our basic needs, but feel free to extend this demo further if you
need.
1: public enum MessageBoxTypeEnum
2: {
3: Error,
4: Warning,
5: Ok
6: }
7:
8: public enum MessageBoxButtonsEnum
9: {
10: Ok,
11: YesNo,
12: }
13:
14: public enum MessageBoxButtonDialogResultEnum
15: {
16: Ok,
17: Yes,
18: No,
19: Cancel
20: }
We toggle the state of the buttons by using the visibility of the buttons in the Property
which defines the buttons the developer wants. Here's a quick example of how it can be done
1: public MessageBoxButtonsEnum Buttons
2: {
3: get
4: {
5: return buttonOk.Visible ? MessageBoxButtonsEnum.Ok :
6:
7: MessageBoxButtonsEnum.YesNo;
8: }
9: set
10: {
11: buttonOk.Visible = (value == MessageBoxButtonsEnum.Ok);
12: buttonYes.Visible = (value != MessageBoxButtonsEnum.Ok);
13: buttonNo.Visible = (value != MessageBoxButtonsEnum.Ok);
14: }
15: }
The next thing I am going to do is wire up all the event handling. We need a Custom EventArgs
class, the EventHandler where T is this custom class. And then we define a little helper
method to fire the events.
Here's the code
1: public event EventHandler<MessageBoxEventArgs> Closing;
2:
3: public class MessageBoxEventArgs : EventArgs
4: {
5: public MessageBoxButtonDialogResultEnum DialogResult { get; internal set; }
6: }
7:
8: private void FireClosing(MessageBoxButtonDialogResultEnum resultEnum)
9: {
10: if (Closing != null)
11: Closing(this, new MessageBoxEventArgs {DialogResult = resultEnum});
12:
13: msg.Visible = false;
14: }
Then we dispatch the events in the different button click handlers
1: protected void buttonOk_Click(object sender, EventArgs e)
2: {
3: FireClosing(MessageBoxButtonDialogResultEnum.Ok);
4: }
Summary
And that's basically it. You've created yourself a MessageBox that you can use throughout all
your projects. Once again, here's the resources. The project includes css files, skins, images, the user control and the sample page with usage.