TypeScript (1)

Parece ser que JavaScript es un lenguaje donde meter la pata es muy sencillo. Así que muchos han optado por utilizar un lenguaje intermedio menos propenso a errores.

En Angular 2 han optado por TypeScript y Dart. Yo como buen "borrego informático" voy a seguir al rebaño del pastor llamado TypeScript.

Pero para mi sorpresa, hay que instalar previamente el instalador npm. Algunos recomiendan instalar Node.js y con ello se consigue instalar tambien "npm".

Instalar Nodejs

En Ubuntu, he seguido las instrucciones de nodej.org y he tecleado las siguientes instrucciones:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs 

sudo apt-get install -y build-essential

Instalar TypeScript

Ahora, ya sigo las instrucciones de TypeScript.org

npm install -g typescript

Y parece ser que se instala. Pero nos hace falta un buen editor. Yo he elegido Sublime Text

Instalar Sublime Text

Para ello he seguido las instrucciones en este enlace

sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer

Una vez instalado necesito instalar el conector (plugin) de typescript y para ello he seguido las instrucccones de este enlace de cmatskas . Pero como trabajo en Ubuntu, hay que retocar un poco el proceso y tener al lado las instruccione oficiales del plugin.

Pero las instrucciones de cmatskas referente al compilado a javscript haciendo control+B no funcionan, para ello hay que seguir los pasos de Sivaprabu Ganesan y hacer

Tools > Build System > New Build System... y guardar el siguiente código en MyTypeScriptBuild.sublime-build

Después hacer

Tools>Build System >MyTypeScriptBuild

Y si hacemos control+ B ya crea el javascript.

Ejecutar el código Javascript generado

Pero si queremos ejecutar el javascript generado nos vamos a la consola de unix y nos situamos en la carpeta donde están los fichero "*.js" y tecleamos 

node fichero.js  

donde fichero.js es nuestro fichero js generado y podemos ver el resultado.

Hay otra manera de hacerlo con Sublime Text que se indica en el siguiente enlace de Caleb Grove que no tiene desperdicio. Pero hay que conocer un poco el Sublime Text.

Spark Framework (III) Corriendo en Tomcat

Si se utiliza Tomcat como servidor de aplicaciones y hacemos referencia a una peticion REST que se ejecuta en Jetty, vamos a tener un problema de cruce de dominios que se puede resolver de 2 maneras:

1. Utilizando CORS (que no va a proceder ahora)
2. Utilizando Tomcat como servidor tanto de REST como de WEB

Vamos pues a seguir el 2º punto que es migrar todo a Tomcat.

Migración del proyecto Spark a Tomcat

Primeramente se crearán los WebServices en REST tal como se indicó en una entrada anterior.

Para ello he creado el paquete org.ximodante.spark que se encuentra en src/main/java

En este paquete he creado la clase HelloWord que es la del ejemplo de la documentación de Spark
(Ojo le he añadido el package org.ximodante.spark)

 package org.ximodante.spark

 import static spark.Spark.*;

public class HelloWorld {
    public static void main(String[] args) {
        get("/hello", (req, res) -> "Hello World");
    }
}

Se prueba que todo funcione correctamente, llamando a

http://localhost:4567/hello

Sustituir la libreria del BuildPath spark-core-2.5.jar por spark-core-2.1.jar ya que Tomcat parece ser que no funciona muy bien sobre la versión 2.5.

La librería spark-core-2.1.jar se puede conseguir del proyecto en git  del brasileño Leonan Luppi al que hay que agradecer su inestimable ayuda.

Ahora se crea un proyecto Dynamic Web

File->New_>Dynamic Web Project

y por si las moscas escogemos la version 3.0 en vez de 3.1 para no tener problemas con el web.xml

1. Ahora hay que colocar el paquete org.ximodante.spark en src (y no en src/main/java)

2. Dentro de la carpeta WebContent/WEB-INF/lib hay que incluir los ficheros:

• sparc-core-2.1.jar
• slf4j-api-1.7.7.jar

que se pueden conseguir del enlace citado anteriormente de Leonan Luppi.

3. En eclipse nos situamos encima de estos dos ficheros en la carpeta indicada y con el botón derecho se añaden al buid-path.

4. Cambiar la clase HelloWorld de manera que:

• Debe implementar la interfaz SparkApplication.
• Hay que sustituir el método main() por el init() que aporta la interfaz

quedando así

package org.ximodante.spark

import static spark.Spark.*;
public class HelloWorld implements SparkApplication{

     @override

     public void init() {

        get("/hello", (req, res) -> "Hello World");
    }
}

5. El web.xml debe ser el siguiente, tal com se indica en la documentación de Spark.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name>SparkTomcat</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  
  <filter>
    <filter-name>SparkFilter</filter-name>
    <filter-class>spark.servlet.SparkFilter</filter-class>
    <init-param>
        <param-name>applicationClass</param-name>
        <param-value>com.ximodante.spark.HelloWorld</param-value>
    </init-param>
  </filter>

  <filter-mapping>
    <filter-name>SparkFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

6. Verificar que <display-name> apunta a la ruta que deseais, en principio será igual al nombre del proyecto, en este caso "SparkTomcat".

7. Comprobar que vuestra clase con la ruta del paquete se encuentra en <param-value> en este caso "com.ximodante.spark.HelloWorld".

8. Crear en fichero simple "html" por ejemple prueba.html y comprovar con Run as -> Run on Server (Tomcat) que se ve bien y no hay ningún problema. (La ruta que se muestra es http://localhost:8080/SparkTomcat/prueba.html)

9. Ahora en el navegador colocar la NUEVA ruta (en vez de http://localhost:4567/hello) :

http://localhost:8080:/SparkTomcat/hello

10. Ya está.

HTML5 stuff

Marin Ivanov HTML5, CSS3 and JS

Chuletario de Angularjs

1. Enlaces de interés.

Agradecer a las personas que han credo estos recursos.

• Tutoriales Scotch.io
• W3Schools
• Cursos Thinkster
• Tutorials Point
• Video Tutorial de Codedamn (coleccion de videos)

2. Depuración de errores.

Cuando algun ejemplo no funciona bien, sobre la página abierta en Chrome se aprieta el boton derecho y se selecciona inspeccionar. Aparece los detalles de errores y tambien se pueden cambiar variables como document.location.hash para provar como funciona el ng-route

Imagen de la inspeccion

La explicación de los errores para ángular se hacen mediante una refencia a una url de angular que es muy explícita.

3. Introducción

ng-app: Para crear una nueva aplicacion. Esta es la aplicación clásica de ejemplo.

ng-model: Establece una variable i le establece un "bind" o acople. Esta variable (en el ejemplo antrior "nombre"se puede mostrar con {{nombre}}. Ojo esta directiva solo funciona en elementos HTML de enttrada de datos tipo input, texarea etc. No funciona en divs con contenteditable=true !!

ng-class:Establece una clase CSS a un apartado como el <div>, pero con la ventaja que esta clase se puede asignar dinámicamente y se ven los cambios al instante.

ng-bind: es equivalente a {{}} cuando hace referencia a una variable. Pero {{}} va más alla.

{{expresión}}: Sirve para indicar expresiones, pudiendo utilizar variables junto con operadores ej: {{1+2}}

<!DOCTYPE html>
<html lang="en-US">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <body>

        <div ng-app="">
            <p>Name : <input type="text" ng-model="nombre"></p>
            <h1>Hello {{nombre}}</h1>
        </div>

    </body>
</html>

ng-init: Inicializa una variabe ej: <div ng-init="mivariable='hola'> {{mivariable}} </div>

ng-repeat: para repetir elementos de un array ej: <p ng-repeat="x in aArray"> x.name </p>

ng-controller: Se debe definir dentro de un objeto application referenciado en el ng-app. Como su nombre indica es el controlador dentor del esquema MVC (modelo-vista-controlador). Veamos un ejemplo:
    var application=angular.module('app01', []);
application.controller('crtl01',function($scope){
    $scope.myFavLang='None';
    });

ng-include: Incluye un fichero (ojo: no funciona abriendo con file://. Funciona con protocolo http y similares. Por tanto debe probarse abriendo un servidor http)  ej: ng-include="'file01.html'". Tener presente que requiere comillas dobles seguidas de comillas simples !!

ng-route: Para enrutar.
  Ojo: cuando definamos un controlador, necesita la dependencia "ngRoute" en la creación de la aplicación.
  Ojo: Requiere que se adjunte su referencia
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

filter: ej {{name | upercase }} Para filtrar el contenido


Las variables:
  $route
  $routeProvider

y las palabras:
  template (tiene preferencia a templateUrl)
  templateUrl
  redirectTo

se utilizan en una aplicación en la función config:

  var app=angular.module('myApp',['ngRoute']);

  app.config(function($routeProvider) {
     $routeProvider
     .when("/", {
        template="Welcome user"
     })
     .when("/bis", {
        templateUrl="welcomeagain.html"
     })
     .otherwise({
        redirectTo="/"
     })
  });

http service: lo utilizamos en un controlador de la siguiente manera:
  var app=angular.module('myApp',[]);

  app.controller('myHttpCrtl',function($scope, $http) {
    $http.get("http://127.0.0.1/AngularJS/data.json")
      .success( funtion (respose){
        $scope.persons=response.records;
      });
  });

para ver como varia nuestras variables se utiizan trucos como este
$scope.watch('myVariable',function(newValue, oldValue) {
  console.log(oldValue);
  console.log(newValue);
});


Para actualizar variables
$scope.digest(

Ver eventos que hay que meterle el digest
document.querySelector('myInput').addEventListener('click', function(){
  $scope.myValue='el que sea';

service
factory
provider

Desarrollando en Web. Enlaces interesantes (1)

Veamos algunos enlaces organizados por temas

AngularJS

• W3 Schools (web de aprendizaje muy buena y clara para principiantes)
• Angular Material (Muy buen repositorio de lo que se puede hacer. Espectacular)

Jugando con Spark web framework (I). Utilizar FreeMarker

Introducción

Primeramente debemos crear un proyecto Maven y Spark según la entrada anterior.

El principal problema que tendremos es como definir la ruta de los recursos a utilizar la plantilla FreeMarker.

Modificación del pom.xml

El fichero pom.xml hay que añadirle lo que se indica en esta pantalla de la documentación de Spark

Quedando

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.ximodante</groupId>
  <artifactId>WebSpark01</artifactId>
  <version>0.0.1-SNAPSHOT</version>

  <name>WebSpark01</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
   
    <!-- SPARK 2.2 dependencies -->
    <dependency>
      <groupId>com.sparkjava</groupId>
      <artifactId>spark-core</artifactId>
      <version>2.2</version>
    </dependency>
  
    <!-- FreeMaker template Engine -->
    <dependency>
      <groupId>com.sparkjava</groupId>
      <artifactId>spark-template-freemarker</artifactId>
      <version>2.0.0</version>
    </dependency>
   
   
  </dependencies>
</project>

Definición de la jerarquía de carpetas de trabajo

Veamos la jerarquia de carpetas de trabajo

src
|--->main
       |---> java (Paquetes y Fuentes de Java *.java)
       |
       |---> resources (Recursos diversos de Spark)
                  |
                  |---> views (Plantillas de FreeMarker *.ftl)
                          |
                          |---> css (Archivos *.css)


Cabe destacar la carpeta "resources" (que debe de colgar de la carpeta "main"), que contendrá los diversos recursos de Spark.  Se ha optado por meter las plantillas de freemarker en la subcarpeta "views" y las plantillas de estilo css en la subcarpeta "css". Tal y como se indica en el esquema anterior.

Creación de la plantilla FreeMarker

Se creará el siguiente archivo  "hello1.ftl" en la carpeta:
 "src/main/resources/views"

<html>
    <head>
        <link rel="stylesheet" href="/css/main.css" />
    </head>
    <body>
        <h1>Freemarker template served by Spark</h1>
        <p>Hello ${name}!</p>
    </body>
</html>

Creación de la plantilla css

 Se creará el archivo "main.css" que es la que se referencia en el archivo de la plantilla freemarker (mostrado en azul"). Se guardará en:
"src/main/resources/views/css"

h1{ color: red; } 

Codigo fuente java

Para que la plantilla freemarker en esta línea:

<link rel="stylesheet" href="/css/main.css" />

pueda localizar la plantilla main.css, es necesario que la carpeta "views" sea accesible como si fuera la raíz. Para ello en java se utiliza:

staticFileLocation("/views");

Por otra parte para abrir las plantillas freemarker desde java conviene indicar las siguientes líneas:

Configuration viewDir = new Configuration();
viewDir.setClassForTemplateLoading(FreeMarkerExampleGood.class, "/views");

 
Ahora solo queda definir la negociación tipo REST. Veamos el código:

import static spark.Spark.*;



import java.util.HashMap;



import spark.ModelAndView;
import spark.template.freemarker.FreeMarkerEngine;
import freemarker.template.Configuration;


public class FreeMarkerExampleGood {

    public static void main(String[] args)

    {



        // Configure that static files directory.

        staticFileLocation("/views");



        // This will configure the view directory. /src/main/resources/views

        Configuration viewDir = new Configuration();

        viewDir.setClassForTemplateLoading(FreeMarkerExampleGood.class, "/views");



        get("/ping", (req, res) -> "pong\n");


        // Creates a very simple model and 
        // returns the template ‘hello1.ftl’ when
        // http://localhost:4568/hello1 is called.

        get("/hello1", (request, response) -> {

            HashMap<String, Object> model = new HashMap<>();

            model.put("name", "Liuardo");

            return new ModelAndView(model, "hello1.ftl");

        }, new FreeMarkerEngine(viewDir));

    }

}

Prueba

 Dar al navegador la dirección:

http://localhost:4567/hello1

Y aparece la pantalla que hemos definido en "hello1.ftl"

Agradecimientos

• Demetrious Taylor Wilson's blog.
• mswiggs blog.

Crear un proyecto Maven en Eclipse para utilizar el framework web de Java "SPARK"

Introducción.

Primeramente no debemos confundir el nombre de Spark que se aplica a manejo de clusters con el framework ligero para crear aplicaciones web.

Este framework no es nada pretencioso, pero por ello te deja mucho margen de libertad. Se dice que es una implementación de Sinatra (que va sobre ruby) hecha en Java. La versión 2 ya utiliza la sintaxis de Java 8.

Creación del proyecto.

Sigamos los siguientes pasos:

Abrimos eclipse y hacemos  File -> New  -> Other -> Maven -> Maven Project

Le damos siguiente

Aceptamos valores por omisión y indicamos que filtre por "quickstart"

Le damos siguiente y damos nombres de organización y aplicación y damos finish

Con eso nos crea el fichero. Ahora tenemos que incluir las dependencias de Spark en el pom.xml tal y como dice en la web de Spark que aquí mostramos la pantalla

Y queda el pom.xml así:

Ahora en nuestro proyecto creamos la clase "HelloWorld" como dicen las instrucciones

import static spark.Spark.*;

public class HelloWorld {
    public static void main(String[] args) {
        get("/hello", (req, res) -> "Hello World");
    }
}

y ejecutamos la clase como un java application y a funcionar (abrir una ventana del navegador y meter la URL

http://localhost:4567/hello