Message Boxes a la carte

• Download DialogBoxes.zip - 1.1 MB

Introduction

We present here a small library example that show how to create message box style windows with Kendo and Typescript.  The article describe the use of windows control and kendo template to construct the type of message box that we need. some examples are implemented.

Background

  Kendo does not give us message box controls, but give us two powerful tools to develop they. The kendo window and the kendo templates. The first give us all that need to have a windows and the second give us the possibility to put inside it the content that we want in the form that we want.

In this case we use a simple template  in a base control to put a image and text inside our window, and also manipulate the background property.

Typescript for other side, give us the possibility to organize the some chaotic JavaScript in a better structured program, more close to the format that oriented object language as C# or Java developers are more comfortable. 

To construct the boxes we simply use a Kendo Windows and put a kendo template inside s is showed in the image. You can configure your kendo template s you wish, and the possibility of how you configure your windows are infinite In this case w put a simple template that hold a text and a image. Also exists the tag to change the background.

In the following code we show the template:  

<!--Template for messageBox.-->
 <script type="text/x-kendo-template" id="MessageBoxBasic">
   <div style="height:100%; width:100%; margin:0, padding:4; background-color:#= color #">
   <article>
     <span class=#= icono # />
     <p>#= content #</p>
   </article>
  </div>
 </script>

The template is a script tag with the type defined as text/x-kendo-template. The more important here, is the syntaxes to give the opportunity to the developer to enter parameters;

#= parameter #  this syntax gives the opportunity to substitute the text inside this with the content of a variable with the same name. That is if we defined in typescript a variable named parameter, the content of parameter should be passed to substitute parameter in #= parameter #


The following code create the windows and puts the template inside the windows. This code goes in the constructor of our base Message Box class. You can se how we assign to the template the values. observe that the properties in the declaration of the template are the same as in the html code.

          // Create the windows
            this.messageBox = $(this.messageHtmlName).kendoWindow({
 
                title: this.title,
                width: this.width,
                modal: this.modal,
                visible: false
            });
 
            //Put the template inside
            var templat = kendo.template($(templateHtmlName).html());
            $(this.messageHtmlName).html(templat({
                color: this.color,
                icono: this.icono,
                content: this.content
            }));

 The other code in the classes is simple, we create a enum to select the internal kendo icon for the application.

Also for our demonstration purpose we create a html tag for each windows that we go to create. The complete code for the message box class and the four created windows in the following code segment:

///<reference path="..\DialogBoxes\Scripts\KendoTypescript\kendo.web.d.ts"/>
///<reference path="..\DialogBoxes\Scripts\KendoTypescript\jquery.d.ts"/>

module MessageBoxSamples {
 
    // Enum to make easy the creation of different type of message boxs
    export enum BoxesEnum { Error, Info, InfoBlue, Warning }
 
    // Basic class to derive other from here..............
    export class MessageBox {
 
        // Internal configuration parameters
        private title: string;
        private boxType: BoxesEnum;
        private templateHtmlName: string;
        private messageBox: JQuery;
        private content: string;
        private icono: any;
        private width: number;
        private modal: boolean;
        private color: string;
        private messageHtmlName: string;
 
        //Initialize the class....................................
        constructor(
 
            thetitle: string
            , content: string
            , boxType: BoxesEnum = BoxesEnum.Info
            , isRezisable: boolean = false
            , isModal: boolean = true
            , thewidth: number = 300
            , templateHtmlName: string = "#MessageBoxBasic"
            , messageHtmlName: string = "#messageBoxError"
            ) {
 
            this.title = thetitle;
            this.content = content;
            this.width = thewidth;
            this.modal = isModal;
            this.boxType = boxType;
            if (messageHtmlName.charAt(0) != "#") {
                messageHtmlName = "#" + messageHtmlName;
            }
 
            this.messageHtmlName = messageHtmlName;
            if (templateHtmlName.charAt(0) != "#") {
                templateHtmlName = "#" + templateHtmlName;
            }
 

            this.templateHtmlName = templateHtmlName;
 
            // Prepersonalization of type of dialog....
            switch (this.boxType) {
                case BoxesEnum.Error:
                    this.color = "red";
                    this.icono = '"k-icon k-i-cancel"';
                    break;
 
                case BoxesEnum.Info:
                    this.color = "white";
                    this.icono = '"k-icon k-i-note"';
                    break;
 
                case BoxesEnum.InfoBlue:
                    this.color = "PowderBlue";
                    this.icono = '"k-icon k-i-note"';
                    break;
 
                case BoxesEnum.Warning:
                    this.color = "Gold";
                    this.icono = '"k-icon k-i-note"';
                    break;
 
                default: this.color = "white";
                    this.icono = '"k-icon k-i-note"';
                    break;
            }
 

 
            // Create the windows
            this.messageBox = $(this.messageHtmlName).kendoWindow({
                title: this.title,
                width: this.width,
                modal: this.modal,
                visible: false
            });
 

 
            //Put the template inside
            var templat = kendo.template($(templateHtmlName).html());
 
            $(this.messageHtmlName).html(templat({
                color: this.color,
                icono: this.icono,
                content: this.content
            }));
 
            //Center the dialog
            var dialog = $(this.messageHtmlName).data("kendoWindow");
            dialog.center();
        }
 
        // Methode Show: Show the windows.
        public Show() {
            $(this.messageHtmlName).data("kendoWindow").open();
        }
 
        // Alternate Show, here you can change the message any time,
        // and also the windows title.

        public ShowNewMessage(newtitle: string, newcontent: string) {
            $(this.messageHtmlName).data("kendoWindow").title(newtitle);
            var templat = kendo.template($(this.templateHtmlName).html());
            $(this.messageHtmlName).html(templat({
                color: this.color,
                icono: this.icono,
                content: newcontent
            }));
 
            $(this.messageHtmlName).data("kendoWindow").open();
        }
    }
 
    // Example of derived messages boxes .....................................................

    export class MessageError {
        private vm: MessageBox;
 
        constructor(title: string, content: string) {
            this.vm = new MessageBoxSamples.MessageBox(title, content, BoxesEnum.Error, false, true, 300);
        }
 
        public Show() {
            this.vm.Show();
        }
 
        public ShowNewMessage(newtitle: string, newcontent: string) {
            this.vm.ShowNewMessage(newtitle, newcontent);
        }
    }
 

 
    export class MessageInfo {
 
        private vm: MessageBox;
        constructor(title: string, content: string) {
            this.vm = new MessageBoxSamples.MessageBox(title, content, BoxesEnum.Info, false, true, 300, undefined, "messageBoxInfo");
 
        }
 
        public Show() {
            this.vm.Show();
        }
    }
 

 
    // This example show the message box with info symbol snd blue background.

 
    export class MessageInfoBlue {
        private vm: MessageBox;
        constructor(title: string, content: string) {
            this.vm = new MessageBoxSamples.MessageBox(title, content, BoxesEnum.InfoBlue, false, true, 300, undefined, "messageBoxInfoBlue");
 
        }
 
        public Show() {
            this.vm.Show();
        }
    }
 

 
    // This is configurated to show a yelow background and info image.
    export class MessageWarning {
        private vm: MessageBox;
 
        constructor(title: string, content: string) {
            this.vm = new MessageBoxSamples.MessageBox(title, content, BoxesEnum.Warning, false, true, 300, undefined, "messageBoxWarning");
 
        }
 
        public Show() {
            this.vm.Show();
        }
    }
}

Download the rest of the project to see how to invoke the method and use it.

Using the code

  To use the code you need to have installed the followings frameworks:

• Kendo UI Web with Typescript Map: Community Edition Kendo WEB
• The JQuery map for typescript: JQuery map file
• Typescript framework.: Download Typescript
• Optional: Windows essential 2012  if you are working with Visual Studio 2012.

1. 
   Download the code and open with visual studio. The application comes with the necessary files for Kendo (we use Telerik kendo UI web open source).
2. Build the application and open with a browser the page default.htm.

  That is all.

The application display the following windows for each pressed button:

Points of Interest

  You can use the code library included in this article as is, or you can use it as a begin point of your proper message box. Here is illustrated the combination of the Telerik kendo Windows with the Telerik kendo template, and how can you use it to produce message box in your application.

Type Script has a syntaxes slight different as JavaScript and does exists many examples in the web about this thematic, for that I selected it to create the windows instead the normal JavaScript code. In the reference of typescript you can found more information about this language that give you the possibility to get a more easy to debug client code, without loses the universality of JavaScript.

History

  First version.