2010-06-19

Curso completo sobre Ext Js Framework JavaScript Completo en Castellano

ExtJS Framework



Author: Crysfel

I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter

A continuación se muestra el temario del curso, cada semana se estarán subiendo capitulos

Introducción

Presentación del ponente, definición de objetivos y alcance del curso, también se hacen delimitaciones, limitaciones y requisitos para tomar el curso.
Introducción (6:39 minutos).

Instalación

Conocimientos y conceptos básicos para comenzar a trabajar a tu manera, es importante saberlos para evitar problemas en el futuro.
¿Dónde conseguir ExtJS? ¿Hay que pagar? ¿es gratis? (3:49 minutos)
Instalación básica del framework (7:06 minutos)
Instalación de temas o “look and feel” (5:29 minutos)
Que son los adapters y en que me beneficia (6:03 minutos)
Definición de la imágen spacer y su importancia (5:48 minutos)
Quizz: Primer capitulo del curso de ExtJS

Localización

Mediante ExtJS, es posible internacionalizar los widgets en diferentes lenguajes, por defecto se utiliza el Ingles, pero es posible hacer traducciones a otros lenguajes o buscar si alguien mas ya la ha realizado.
Instalando tu idioma (8:54 minutos)
Varios idiomas en un mismo sitio (9:07 minutos)

JavaScript orientado a objetos

Se definen términos y conceptos para programar orientado a objetos en JavaScript utilizando algunas utilerías que ExtJS nos proporciona para una fácil implementación.
Referencias en JavaScript (9:39 minutos)
¿Que es el scope o alcance de una variable? (8:14 minutos)
¿Qué son los Closures? (12:32 minutos)
El contexto y la variable “this”
Creación de objetos y métodos públicos
Métodos privados y métodos privilegiados
Paquetes y namespace
Herencia en JavaScript
Quizz: Conceptos fundamentales de JavaScript (Parte I)
Quizz: JavaScript orientado a objetos (Parte II)

Trabajando con el DOM

Se muestran las utilerías de Ext para manipular el DOM, trabajar con efectos y animaciones, realizar búsquedas en el DOM y aplicar eventos.
Conociendo al objeto “Element” (13:17 minutos)
La clase “DomHelper” (16:11 minutos)
Buscar elementos en el DOM con selectores
Aplicar efectos visuales a Elementos (19:30 minutos)
Quizz: Trabajando con el DOM

Mensajes y eventos

Se muestra como mostrar mensajes al usuario, como crear eventos sobre elementos del DOM
Alertas y mensajes al usuario (20:55 minutos)
Manejo de eventos sobre Elementos y componentes
Quizz: Mensajes y Eventos

Ajax y el objeto Store

Se muestra como realizar peticiones Ajax al servidor, se define el concepto del store y su importancia para el intercambio de información.
El objeto Ajax, peticiones GET y POST
¿Qué es un store y cómo funciona?
Leer información de un XML
Leer información en formato JSON
Quizz: Ajax y el objeto Store

Paneles, Ventanas y Pestañas

El panel es uno de los componentes mas utilizados en el framework es de importancia comprender su funcionamiento, las ventanas son útiles para almacenar otros componentes.
¿Que es un panel, para que sirve y cómo se crean? (22:08 minutos)
Una ventana flotante (12:50 minutos)
Barras de herramientas en paneles y ventanas
Barra de status en paneles y ventanas
Las Pestañas o Tabs

Los Formularios

Se muestra como crear formularios, validaciones, diferentes controles para capturar información e interactuar con un servidor para obtener y guardar información.
Formularios y campos comunes en ExtJS
ComboBox cargados localmente y remotamente (Ajax)
Combos dependientes
Un calendario para capturar fechas
Llenar formularios con información del servidor
Guardar información en el servidor
Validaciones simples en formularios
Validaciones personalizadas

Gráficas

Uno de los nuevos componentes de ExtJS 3.0 nos permite crear gráficas de diferentes tipos, en este capítulo mostramos algunas
Gráficas en ExtJS 3
Graficando series

Las Tablas

Este componente es muy utilizado para desplegar información, permite realizar muchas tareas de manera fácil y rápida.
Una tabla básica con información cargada de un array
Mostrar información de un archivo XML
Información contenida en formato JSON
Paginado remoto en un Grid (Ajax)
Formatear la información y agregar html a las celdas
Utilizando fechas y tiempo en un Grid
Editar la fila de un Grid en un formulario

Edición de tablas

En ocasiones es conveniente poder editar la información directamente en una tabla, de esta manera evitamos abrir un formulario con la información en cada campo.
Editar las celdas de un grid
Editar una celda mediante un Combobox
• Modificar un fecha utilizando un calendario
Guardar los cambios del Grid editable usando Ajax
• Hacer un CRUD automáticamente con REST

Árboles con ExtJS

Los árboles son útiles para mostrar de forma visual una jerarquía de organización, por ejemplo un directorio de documentos, una familia o grupo de personas, etc. Ext proporciona el componente ideal para esta tarea.
El componente Tree Panel
Arboles generados con Ajax
Cambiar íconos de los nodos
Desplegar el sistema de archivos del servidor
Explorador de archivos para el servidor
Drag and Drop para ordenar los nodos (Guardarlos en MySQL)
• Modificar los nodos seleccionados

Layouts y maquetación

Los layout se utilizan para crear la maquetación de un sitio, ExtJS provee maneras diferentes para lograr este objetivo, en este capitulo se analizan algunas.
Border layout
Border layout (9:19)
Table Layout (9:31)
• El Viewport y sus regiones
• El acordeón
• Combinación de layouts

Plugins y extensiones

La comunidad de ExtJS es muy activa, prueba de ello es la cantidad de plugins que se han desarrollado y son ofrecidos de manera gratuita, aquí se muestran algunos de ellos y como integrarlos a tu proyecto.
Herencia con ExtJS

No hay comentarios: