ExtJS – Primeros pasos: Hola Mundo

Que seria de un curso de programación sin el «Hola Mundo». Os lo dije en la presentación, y no es posible evitarlo. Estoy de acuerdo que puede que este pequeño programa no aporte nada al final del aprendizaje, pero…cuando se empieza es muy agradable descubrir que haces cosas que funcionan, y ademas tiene el valor añadido que te permite comprobar que todo lo que tenias que descargar, lo has descargado y funciona bien…luego: vamos a por ello.

Para nuestro primer programa, nos saltaremos la estructura de directorios aconsejada, aunque posteriormente, la tendremos en cuenta.

Para esta primera toma de contacto, podemos crear dentro de nuestro directorio una carpeta que he llamado “prueba1”

ExtJS. Nuestro HolaMundo

 

Y dentro he creado dos ficheros: el index.html y el app.js

Sencha ExtJS-Preparando Hola Mundo

Veremos que es una estructura muy frecuente.

La versión 3 minutos

La forma mas sencilla para hacer que nuestra maquina salude, en este mundo ExtJS, lo podemos hacer con solo un fichero html. Solo tenéis que escribir:

 

Realmente, es lo mínimo que se puede despachar en programas de «Hola Mundo», pero lo comento porque este será el HTML básico que emplearemos en todos los ejercicios.

Index HolaMundo con ExtJS

La incorporación de la libreria ExtJS se hace con:

2015-06-08_22h22_23

Que incorpora la hoja de estilos

2015-06-08_22h23_09
Que incorpora la librería principal, en su versión completa/debug

2015-06-08_22h24_04

Que incluye una librería auxiliar dependiente del tema elegido. Estas lineas, o semejantes, las deberemos incluir en los HTML que tengan que trabajar con ExtJS.

Luego, el pequeño script que incorporamos, lo que hace  es declarar una funcion anónima, que se ejecutara en el evento OnReady (documento DOM cargado), y que llama una ventana de «alert» de la libreria ExtJS. (viene a ser como el «alert» de javascript», pero respetando los colores del tema activo.

Vamos, lo que conseguimos es:

Hola Mundo con Sencha ExtJS

Hola Mundo con ExtJS básico

Como supongo que os ha sabido a poco, vamos a subir un peldaño. Como os podéis imaginar, en cualquier aplicación web, empezaremos por un fichero html, y ya que no hay ningún motivo para que no sea así, nosotros empezaremos con el «index.html».

Aunque el que hemos escrito antes estaba bien, vamos a realizar una pequeña modificación.

fichero index para Sencha ExtJS

  1. Declaración viewport que ExtJs nos invita a realizar siempre
  2. La hoja de estilos a usar para los componentes de ExtJs.  Si miráis en «../build/packages» vereis que hay otras, podéis escoger la que queráis, pero acordaros de cambiar también el «js» de estilosSencha ExtJS. Estilos disponibles
  3. Según vimos anteriormente, incorporamos la rutina que contiene todo en Framework, con la opción debug. Posteriormente ya tendremos ocasión de optimizarlo

  4. la librería javascript correspondiente al tema. Aunque esto dependerá si el tema requiere la librería o no.

  5. Incluimos el fichero javascript que contendrá el código de nuestra aplicación, y que hemos creado anteriormente, aunque todavía está vació.

Si visualizamos nuestro trabajo, veremos aparecer una pagina en blanco, ya que dentro de “body” no hemos añadido nada.

Una de las características de ExtJS es que está pensado para generar código directamente, y eso es lo que vamos a hacer a continuación.

Para ello, abrimos el fichero app.js, y este es el código que debemos añadir:

Ext Sencha. Version 2

En la línea (1), utilizamos la clase “Ext.application” para definir nuestra aplicación, y establecemos:

  • el nombre (línea 2-name=’prueba1’
  • la función que se ejecutara al inicio (línea 3- launch), que la creamos como función anónima, y la cumplimentamos en las líneas 5 a 12

Para la presentación, utilizamos la clase “Ext.create”, que nos permite crear un objeto desde un modelo, en este caso “Ext.Panel”, y durante la creación le indicamos:

  • donde se mostrará (línea 6);
  • el ancho (7) y
  • el alto(8),
  • el padding que se aplicara al cuerpo del Panel(9);
  • el titulo que tendrá (10),
  • y el contenido del mismo (11)

Si ahora probáis de volver a ejecutarlo, veréis aparecer

Hola mundo con ExtJS - Panel

 

Y nuestro mundo, ya tiene un saludo mas.

Mejorándolo un poco.

Aunque ha cumplido su misión, supongo que esperabais algo mas de este framework, por ejemplo, podríamos intentar que se centrara en pantalla

No lo hemos visto, pero ExtJS ha creado un contenedor especial que ocupa todo el body, pero a utilizado valores por defecto; ha llegado la hora de controlar nosotros esa generación, para ello modificamos nuestro app.js, indicándole:


2015-06-08_22h25_21

Si os fijáis , lo que he hecho ha sido añadir la definición de “viewport”, al que le he asignado un layout y una alineación que provoca que el panel, vaya a parar justo al centro de la pantalla.Lo único que he tenido que hacer en el panel definido, aparte de asignarlo a una variable para poderlo utilizar luego, ha sido cancelar la orden “renderTo”, ya que nosotros escogemos donde renderizarlo.Hay otros muchos parámetros que podéis ir probando, por ejemplo:

       border: true,
       draggable: true,

Que os pondrá un borde alrededor, y permitirá que arrastréis la ventana (respectivamente)

Por ultimo, podéis convertirlo en una verdadera ventana, básicamente creándola desde Ext.Window, en lugar de Ext.Panel.

Aquí está el código de app.js:

 

2015-06-08_22h27_14Hemos prescindido del Viewport, y le hemos añadido un poco de estilo; aquí os dejo la clase que he utilizado:

2015-06-08_22h28_02

Realmente es alucinante. ¿no?

Y en el siguiente articulo, empezaremos a hablar de clases.

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Framework Sencha ExtJS. Guarda el enlace permanente.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.