Documentando código javascript

Si ya llevas un tiempo en el desarrollo de aplicaciones web, te darás cuenta la evolución e importancia que esta pegando la parte de FrontEnd. Antes se usaba código javascript para lo justo, pero poco a poco ha ido ganando muchas importancia, lo cual genera archivos de js grandes y algunos hasta complejos, con lo que viene bien tenerlos documentados para que la gente que use tu función pueda ver de que se trata y que parámetros necesita.

Para documentar las funciones javascript es casi tan simple como lo haciamos en c#, pero en lugar de poner los comentarios arriba del método o función como lo haciamos en c#, se tiene que hacer dentro de ella.

Ejemplo: Como se comenta el código en c#

Ejemplo: Como se comenta el código en javascript

Es más, si te das cuenta podemos indicarles al parámetro el tipo de valor que tendrá. Con esto, cada vez que llames a tu función js, en mi caso, SaveCustomer, verás que te sale la documentación de la función.

Espero que les sea útil, hasta la próxima :)

Mostrar el número de lineas en el editor de Visual Studio

Hola, les dejo un post cortito que puede ser útil sobre todo para gente nueva que empieza con Visual Studio, aunque valido tambien para gente como nosotros, que llevamos mucho tiempo en ello y se nos olvidó como era.

Personalmente me gusta tener el número de líneas al lado de mi código, entonces al lío.

- Vamos al menú Tools/ Options (Herramientas/Opciones si tienes el VS en español)
- Seleccionamos Text Editor y desplegamos, luego seleccionamos All Languages y por ultimo damos check a Line Numbers.

Damos aceptar y eso es todo.

Editor si números de líneas en el código:

Editor con números de líneas en el código:

Espero les sirve de algo, hasta la próxima :)

Activando el Intellisense de Javascript en Visual Studio 2012 - un poco de kendo

Ya que he empezado a usar habitualmente Visual Studio 2012 en los últimos días, me he topado con características muy interesantes como es el Intellisense para Javascript. A lo mejor este artículo va algo tarde (ya que VS2012 lleva mucho tiempo entre nosotros), pero de seguro mucha gente aún no ha tenido la oportunidad de trabajar con él como hasta poco era mi caso. Pero bueno, para no extenderme más, empezamos!

Cuando creamos un proyecto de MVC4 en Visual Studio 2012, en la carpeta Scripts de tu proyecto web hay un js llamado _references.js

Si abrimos este archivo nos toparemos con algo parecido a esto:

 
/// 
/// 
///  
/// 
/// 
/// 

Este js lo que hace es indicar al Visual Studio que archivos js tendrán Intellisense cuando los referenciemos. Pero ¿qué pasa si queremos tener Intellisense en un js que no está referencia en este archivo? como por ejemplo si queremos tener Intellisense si queremos usar Kendo. La solución es simple, sólo editamos el archivo _references.js y añadimos la referencia a los archivos de js de Kendo que querramos que hagan uso del Intellisense cuando los referenciemos. En mi caso añadimos tres referencias más:

• kendo/jquery.js
• kendo/kendo.web.js
• kendo.aspnetmvc.js

Entonces el _references.js quedaría de la siguiente manera (linea 7, 8 y 9 del código)

 
/// 
/// 
///  
/// 
/// 
/// 
/// 
/// 
/// 

A continuación muestro un par de imagenes de un js, una sin el intellisense js de Kendo, y otra cuando ya por fin el reference.js ya ha sido configurado.

Js llamando a función Kendo sin el Intellisense:  como vemos el intellisense de Javascript nisiquiera reconoce la función.

Js llamando a función Kendo con el Intellisense: al fin el intellisense de Javascript reconoce a la función js de Kendo y nos muestra todos sus parámetros.

En el siguiente artículo mostraré la manera en la que se tiene que documentar los métodos en un js para que cuando se accedan a ellos puedas ver la información del método y la documentación de cada parámetro como se hace en c# con el summary, espero les sirva, hasta la próxima :)

¿Dónde está el 'unshelve' en Visual Studio 2012?

Para los que venimos de Visual Studio 2010 o anterior, pasar al entorno de Visual Studio 2012 a veces puede ser un poquito complicado. Hoy me encontré con la necesidad de recuperar un shelve que realicé hace ya un tiempo y busco el unshelve de la manera en la que buscaba antiguamente. Así que pongo el cursor en la solución, doy click derecho y no encuentro la opción de UNSHELVE  :S:S:S

Entonces para los que se encuentren con la misma situación que yo,  aquí les muestro como encontrar la tan preciada opción de unshelve.


1. Te vas al TeamExplorer -> Pending Changes.

2. Una vez que estés en la parte de Pending Changes, le das click al menú de Actions y le das click a la opción de Find Shelvesets.

3. Esta opción te redigirá a todos los shelves que tengas.

4. Finalmente pones el curso sobre el shelve que quieras recuperar, le das click derecho y ahi encontrarás la opción de unshelve.

Y ya lo tienes, espero les sirva, hasta la prox !

Notificaciones no bloqueantes y bonitas: Usando ToastR

Muchas veces queremos que nuestra aplicación web muestre alertas, notificaciones, avisos y errores de una manera personalizada. El problema de las típicas notificaciones que nos ofrece js son feas y bloqueantes. Felizmente hay una libreria js que nos permite hacer estas notificaciones agradables a la vista del usuario de una manera fácil. Esta librería se llama ToastR y la puedes descargar desde Github. Desde aquí nos bajamos el js y el css y lo integramos a nuestro proyecto. En esa página puedes ver también toda la documentación pero en este post te lo resumo un poco :).

- Una vez añadidos los archivos .js y .css de Toasr (ojo, este librería hace uso de jquery, asi que tambien es necesario que esta librería este en nuestro proyecto) a tu proyecto creamos una nueva página html y referenciamos a la hoja de estilos, a jquery y a toastr.js:

-Lo siguiente es crear unos cuantos botones dentro del body de nuestra página para ver los diferentes tipos de notificación que nos ofrece toastr.

 

Usando ToastR

-Y por ultimo escribir el siguiente script en la parte final de la página (aunque puedes escribirla donde quieras, pero por temas de optimización post que espero escribir más adelante se recomienda poner los scripts al final del todo.

Resumiendo,

• Descargamos el js y css de ToastR y lo añadimos al proyecto. 
• Luego creamos una nueva página y lo referenciamos al proyecto. 
• Creamos cuatro botones, cada con una función onclick() diferente.
• Y por ultimo creamos el script necesario para ejecutar la aplicación. En el documento.ready() de la página ponemos el siguiente código:

 
 toastr.options.closeButton = true;

Esto nos indica que las notificación podrán mostrar el boton de Cierre. En caso no lo quieras mostrar, le pones false y ya está :).

Y bueno el resultado es el siguiente:

Notificación Info

Notificación Warning

Notificación Succcess

Notificación Error

Como vean Toasr nos permite mostrar notificaciónes bonitas de una manera fácil. Además tambien ofrece otras propiedas para mostrar tu notificación de diferentes maneras, posiciones y animaciónes. Todo esto lo puedes ver en la documentación. Aquí te dejo un ejemplo

http://codeseven.github.io/toastr/demo.html

Que lo disfrutes, hasta la próxima.

LLamar a una función js desde un controllador en Asp .Net MVC

Al fin tengo el blogspot libre y sin bloqueos desde el curro =)... Este post va para responder la pregunta a alguién que me pregunto hace un tiempo como hacer esto.

Aunque la verdad es raro querer ejecutar una funcion js desde un controlador, aquí muestro la manera en que "yo" como lo haría.

1. Crearia una clase que tendra como propiedad un string que tendra el código js que queremos ejecutar:

 
    public class DemoJs
    {
        public string JsFunction { get; set; }
    }

2. Luego sigo con el controlador, en mi caso es un ejemplo simple ya que solo quiero llamar a la funcion js.

 
    public class DemoController : Controller
    {
        //
        // GET: /Demo/
        public ActionResult Index()
        {
            var demoJs = new DemoJs();
            demoJs.JsFunction = "$( window ).load(function() { DisparaAlert();}); ";
            return View(demoJs);
        }
    }    

Aquí la explicación, inicializo el objeto y en la propiedad JsFunction escribo el código js que quiero ejecutar, en este caso lo que hago es disparar la función "DisparaAlert()" cada vez que la página ha sido cargada.

3.Genero la vista de este ActionResult

@model Demo.Models.DemoJs

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


Index

La vista lo que hace es llamar a jquery y luego más abajo en la sección js de la página acceder al modelo de la vista y mostrar la propiedad que tenia la funcion js que queriamos que se ejecute en nuestra aplicación. Como la función que seteamos en esta propiedad dijimos que se ejecute la función DisparAlert cada vez que se cargue la página, en la parte de js de la vista tambien declaramos esta función y dentro de ella ponemos un alert sólo para mostrar que esto funciona.

Como ven es un artificio, aunque como dije al principio del post, me parece raro llamar una función js desde un controlador pero como en MVC no tenemos un método RegisterClientScriptBlock o parecidos, esta puede ser una manera. Espero que les sirva de algo , hasta la prox !

Aprendiendo Node.js (I)

Ya era un tiempo que tenía olvidado este blog por lo que espero volver con fuerza con nuevos temas que empiezan o ya llevan algún tiempo sonando con fuerza. Y que mejor que enseñando algo de Node.js.

Por si no saben que es, es una plataforma de programación en Javascript especializada en el manejo de eventos desde el servidor. Trabaja sobre V8, un motor de Javascript creado por Google optimizado para la web con lo cual la velocidad y escalibilidad de las aplicaciones está asegurada. Si quieres más teoría puedes pinchar aquí.

Pero bueno al lío. Empezamos instalando Node.js asi que nos dirigimos aquí

http://nodejs.org/download/

Node.js puede trabajar bajo Windows, Linux, IOS y otros sistemas operativos. En mi casa descargamoos el instalador para Windows, damos click y empieza el proceso de instalación:

Una vez instalado, para ver que Node.js ya está disponible en nuestro ordenador vamos e ejecutar (Tecla Windows + R) y escribimos cmd o te vas directamente a símbolos del sistema

Escribimos node y damos enter, debería aparecer '>' como se muestra en la imagen

Podemos poner 1+1 y enter y si bota 2 es que node.js ya está funcionando.

Hasta aquí todo bonito, pero ¿cómo mostramos algo en la web?. Seleccionas tu editor de texto favorito y copias lo siguiente:

var http = require('http');

http.createServer(function (req, res){

res.writeHead(200, {'Content-type':'text/plain'});

res.end('Hola node.js');

}).listen(200, "127.0.0.1");

console.log('Servidor activo en http://127.0.0.1:200/');

Le das a guardar como hola.js en la ruta que tu prefieras. En mi caso como en el cmd la ruta por defecto que aparece es c:\Users\Jhon1 la guardaré ahi. Una vez hecho esto, vuelves a abrir el cmd, escribes node hola.js y debería aparecer lo siguiente:

Esto quiere decir que node.js ya está activo y nuestro archivo hola.js ya puede ser utilizado.

Por último abrimos Chrome, Firefox, IE o el que te dé la gana y pones la url que pusiste en la parte de listen de tu archivo hola.js. En nuestro caso http://127.0.0.1:200 y el resultado es el siguiente:

Y ya está, espero que les sirva de utilidad para empezar con esto. En el proximo post hablaremos del gestor de paquetes de node.js y los módulos que tiene. Espero les ayude. Hasta la prox!!!