MsgBox component with TypeScript, Bootstrap and RequireJS – Part 1

Let’s go further while learning #TypeScript, RequireJS and Bootstrap, a topic I am enjoying a lot, and now, let’s create some code for a message box component that you can use and reuse in your projects. The component will be similar to the alert command in Javascript, but customizable, and a better ones. For the form design, I will be using Bootstrap, and for the example, I will be using the template I already talked about in other post: plantilla de TypeScript, RequireJS, jQuery, Bootstrap y HandleBarsJS.

The fact of creating this component is for reusing it in future projects, because the code is available on GitHub. The component will sere a form for alers, other for a login, for a password changer, and another one that allow the user to choose between two options.

Preparing the code for testing the new component

The HTML code I will be using in the index page is very simple: just create a few buttons with the distinct functionalitiesof the msgbox component.

<div id="contenedor" class="container">
<a href="#" class="btn btn-default" id="simple">Simple</a>
<a href="#" class="btn btn-info" id="timer5sec">Simple con 5 seg timer</a>
<a href="#" class="btn btn-info" id="yesno">Si-No</a>
<a href="#" class="btn btn-info" id="login">Login</a>
<a href="#" class="btn btn-info" id="cambiapass">Cambia Pass</a>
</div>

Easy.

If you go deeper in this project, you can see that I am using Bootstrap-extra.css, extra properties for Bootstrap forms that I found here: http://www.bootply.com/s6x5oKLiDG.

Using interfaces

Working this TypeScript made me change my opinon about interfaces, and in order to control all aspect of our componet, it is a good idea to create an interfaces.ts file. Within this file, let’s define IAlert with several options when an alert is created, other for password changer, and a third one for for yes-no-cancel form.

Also, this file is needed in case you need to create new properties for jQuery object.

Preparing the templates

Templates will be stored under a template dir, and I have created this files: cambiapass.hbs, login.hbs, msgbox.hbs and yesno.hbs. I will be showing the code of one of them only, because the others can be changed by the user. The fact that templates will be read by HandleBarsJS makes this component very flexible for reusing it.

<div id="msgbox" class="modal fade">

<div class="modal-dialog modal-md">

<div class="modal-content">

<div class="modal-header {{ modal_header_class }}">
{{#if boton_cerrar}} <button type="button" class="close" data-dismiss="modal">&times;</button>{{/if}}

<h3 class="modal-title">{{ titulo }}</h3>

</div>

<div class="modal-body">{{ mensaje }}</div>
<div class="modal-footer"><a href="#" class="btn {{ btn_class }}" data-dismiss="modal" id="btn_login">{{ txt_boton_cerrar }}</a></div>

</div></div></div>

Config.ts and app.ts

The configuration for RequireJS will be stored on config.ts and it is not more complex that you aready use, and the component is not neede to be included on the config file, and app.ts makes a call fora MenuApp, as I will be showing in part 2 of this series.

Events

One feature I would like to analize in deep is events, because it is very important for the component to fire events and send back information to the object that is using the component. As an example, iI would like to receive the login values in order to prepare the querystring to ask the server.

The code I am using for the event is explained here http://stackoverflow.com/questions/12881212/does-typescript-support-events-on-classes. It is needed to define a class that allows to use the on, off and trigger functions. If you review the codem you can check that it is using generics in TypeScript. The interface ILiteEvent<T> has been added also to interfaces.ts. while the class has been stored in LiteEvent.ts. For using the classm, you just need to set up the refeerncies and use the require.

Inside msgobx.ts, I defined a privated property and a public property (that used the privated value) for using LiteEvent in order to improve the behaviour of events. I am using one for each functionality, and whenever you need to fire an event, just use the trigger function, with the value to transfer (in case you need to send a value).

Maybe you can think that using the class LiteEvent can be messy, but it does its job, and it’s very useful.

Too much stuff for now, so let’s wait to part 2 where I will explain msgbox.ts, and also the code of menu.ts.

Happy coding!