Archive for octubre 12th, 2010

0 12
10
2010

Crea diagramas UML online con yUML

Martes, octubre 12th, 2010

Navegando por la red, y de casualidad (como la mayoría de los grandes descubrimientos), encontré yUML.

yUML es una aplicación web que nos permite crear diagramas UML totalmente on-line y de una forma rápida y sencilla.

yUML: create UML diagrams online

Lejos de las típicas pesadas aplicaciones de escritorio que solemos utilizar a la hora de crear un diagrama UML, podremos generar con yUML diagramas sencillos (y agradables a la vista) en pocos minutos; y lo que es mejor y más importante, es una herramienta gratuita y no requiere ningún tipo de registro.

Al tratarse por lo tanto de una herramienta online, podemos a partir de ahora compartir nuestros diagramas en blogs, foros, emails, wikis, etc con un simple enlace de imagen, que como veremoa a continuación, incorpora el código del diagrama.

Lejos además también de los entornos gráficos del estilo drag & drop con los que solemos trabajar, yUML trabaja con un entorno de texto en el que indicaremos cada acción o relación existente en el diagrama UML.

A día de hoy, la herramienta yUML nos permite crear hasta 3 tipos de diagramas UML (que normalmente son los más utilizados):

La idea es sencilla, veámoslo con un ejemplo de diagrama de clases UML.

Conceptos básicos:

  • – las clases se identifican entre corchetes [].
  • – el orden de la relación con flechas ->
  • – la cardinalidad con números y asteriscos *
  • – los colores de fondo con la indicación: {bg: coloreninglés}, ejemplo: {bg: orange}

Aquí os dejo un diagrama de clases muy sencillo generado a partir el siguiente código:

# Travel UML Diagram
[Transport]^-[Train]
[Transport]^-[Flight]
[Transport]^-[Bus]

y su resultado final

diagramas UML online con yUML

Para los curiosos, fijaros en la URL de la imagen:

<img class="aligncenter" src="http://yuml.me/diagram/scruffy/class/%23%20Cool%20UML%20Diagram,%20%5BTransport%5D%5E-%5BTrain%5D,%20%5BTransport%5D%5E-%5BFlight%5D,%20%5BTransport%5D%5E-%5BBus%5D" alt="uml class diagram" width="323" height="235" />

Efectivamente, el código que habíamos creado inicialmente se incrusta dentro del html para poder generar nuestro diagrama final.

0 12
10
2010

ReplaceAll en JavaScript

Martes, octubre 12th, 2010

Javascript cuenta con múltiples funciones relacionadas con el objeto string, entre las que podemos encontrar el método replace.

El método replace de javascript nos permite buscar una subcadena en un String para ser sustituida por otra subcadena. Tal y como conocemos y solemos utilizar este método, replace() únicamente nos reemplazará la primera ocurrencia que haya encontrado en la caden original.

La primera idea que puede venirse a la cabeza para implementar una función replaceAll con javascript es recorrer la cadena original y reemplazar el subcadena deseada tantas veces como apariciones puedan existir en la misma. Este código quedaría algo así:

        /**
         * Función que permite reemplazar TODAS las subcadenas encontradas
         * en un string por otra nueva subcadena.
         */
        function replaceAll(text, search, newstring ){
            while (text.toString().indexOf(search) != -1)
                text = text.toString().replace(search,newstring);
            return text;
        }

Sin embargo, esto no es necesario.
Lo que mucha gente no sabe o simplemente pasamos por alto, es que la función replace de javascript soporta expresiones regulares (suele pasar también con la mayoría de lenguajes).
Esta funcionalidad, nos permite implementar un nuevo método replaceAll mucho más sencillo utilizando nuestras queridas expresiones regulares.

El código quedaría ahora algo como:

        /**
         * Función que permite reemplazar TODAS las subcadenas encontradas
         * en un string por otra nueva subcadena.
         */
        function replaceAll(text, search, newstring ){
            var out = text.replace(new RegExp(search, 'g'), newstring);
            return out;
        }

o simplemente:

// El texto a reeplazar deberá indicarse entre barras
text = text.replace(/find/g,”replace”)

NOTA: No es ninguna errata, cuando queramos indicar una expresión regular en el primer parámetro de la función replace de javascript, el texto irá indicado entre barras y SIN comillas.

Veamos algunos ejemplos:

        // Resultado: a234ea234ea234e
        var ejemplo1 = "abcdeabcdeabcde".replace(/bcd/g, "234");
        // Resultado: 323232409121
        var ejemplo2 = "3232,32409,121".replace(/,/g, "");
        // Resultado: sn notcas del mundo
        var ejemplo3 = "sin noticias del mundo".replace(/i/g, "");

Hemos visto por lo tanto 2 formas para implementar nuestro propio método replaceAll en javascript utilizando 2 fórmulas diferentes:

  • – Utilizando un bucle para recorrer y reemplazar tantas veces como sea necesario la cadena original
  • – Haciendo uso de expresiones regulares

En próximas entradas, veremos más en profundidad cómo utilizar expresiones regulares en javascript.