Sample Kendo UI Custom Widget : A Login widget with 3 views : login , logout and "waiting"

appLoginWidget.js

module createAppLoginWidget {

    declare var kendo;
    declare var ui;
    declare var $;

    var ui = kendo.ui, Widget = ui.Widget

    var appLoginWidget = {

        options: {
            name: "AppLogin",
            currentUserName: ""
        },

        showView: function ($showView) {
            // simple view handler
            this.ViewArray.forEach(function ($view) { if ($view != $showView) $view.hide() });
            $showView.show();
        },

        refreshCustomBindings: function () {
            this.$CurrentUserName.text(this.options.currentUserName);
        },

        doLogout: function (evt) {
            var widget = $(evt.target).parents("[data-role]").first().data("handler");
            // some async logout
            widget.showView(widget.$StatusView);
            setTimeout(function () {
                widget.options.currentUserName = "";
                widget.showView(widget.$LoginView);
            }, 1000);
        },

        doTryLogin: function (evt) {

            var widget = $(evt.target).parents("[data-role]").first().data("handler")

            // some async login
            widget.showView(widget.$StatusView);
            setTimeout(function () {

                widget.options.currentUserName = widget.$UserName.val();

                widget.$UserName.val("");
                widget.$Password.val("");

                widget.refreshCustomBindings();
                widget.showView(widget.$LoggedInView);

            }, 1000);

        },

        $UserName: null,
        $Password: null,
        $CurrentUserName: null,
        $LoginView: null,
        $LoggedInView: null,
        $StatusView: null,
        ViewArray:null,
        

        init: function (element, options) {

            if (typeof (options) == "undefined") options = this.options;
            // base call to widget initialization
            Widget.fn.init.call(this, element, options);

            // Create HTML elements
            // Some are public ("this.$name")

            // Elements are separated into "views" which can be hidden/shown

            //
            // Login view:
            //

            this.$UserName = $("<input>").attr({ type: 'text', placeholder: 'Username' });
            this.$Password = $("<input>").attr({ type: 'password', placeholder: 'Password' });
            var buttonLogin = $("<input>").attr({ type: 'button', value: 'Login' });

            // Attach event
            buttonLogin.on("click", this.doTryLogin);

            this.$LoginView = $("<div>").append([this.$UserName, this.$Password, buttonLogin]);

            //
            // Logged in view:
            //

            this.$CurrentUserName = $("<span>");
            var loggedInAs = $("<span>").text("Logged in as ").append(this.$CurrentUserName);

            var buttonLogout = $("<input>").attr({ type: 'button', value: 'Logout' });
            buttonLogout.on("click", this.doLogout);

            this.$LoggedInView = $("<div>").append([loggedInAs, buttonLogout]);

            //
            // Status view:
            //

            this.$StatusView = $("<div>").text("Wait...");

            // Add views to array and hide all but one
            this.ViewArray = [this.$LoginView, this.$LoggedInView, this.$StatusView];
            this.showView(this.$LoginView);

            // Append to DOM
            $(element).append(this.ViewArray);

        }

    }

    ui.plugin(Widget.extend(appLoginWidget));

}