Click here to Skip to main content
Click here to Skip to main content

Tagged as

Message Boxes a la carte

, 3 Feb 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Small library to explain how to create basic message boxes using kendo and Typescript.

Editorial Note

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

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. 

kendo windows and templateTo 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:


  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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

freedeveloper
Software Developer (Senior) G-SoftSolutions
United States United States
Jose A. Garcia Guirado, Electronic Engineer, graduated in Havana/Cuba 1982, MCTS, MCSD.NET, MCAD.NET, MCSE. Worked in the Institute for Cybernetics and Mathematics of Academy of Science of Cuba for 8 years; since 1995 working as free software architect, developer and advisor, first in Argentina and from 2003 to 2010, in Germany as External consultant in DWS Luxemburg, AIXTRON AG and Shell Deutschland GmbH and from 2010 to 2012 in in Mexico in Twenty Century Fox, and Mexico Stock Exchange (BMV). Actually as freelance in Florida, USA.
Follow on   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141216.1 | Last Updated 3 Feb 2014
Article Copyright 2014 by freedeveloper
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid