Objetivo

Al finalizar el curso el participante tendrá los conocimientos necesarios para desarrollar sus propias aplicaciones, la idea es brindar ejemplos prácticos y comunes, comprender como está diseñada la librería de ExtJS para poder utilizarla correctamente.

Se impartirán dos sesiones por semana, dando tiempo a los participantes para que realicen los ejercicios en los otros días, el horario se ha definido de 20 – 22 hrs (GMT-5 Ciudad de México) para dar oportunidad a las personas que trabajan durante el día y no tienen disponibilidad de tomarlo en otro horario.

Horario para España

Pensando en la diferencia de horarios, hemos decidido impartir el mismo curso en otro horario, esto significa que se estará impartiendo dos veces en el mismo día, el horario para España sería de 13:00-15:00 (GMT+2 Horario Madrid España) en los días definidos.

Requisitos

Para poder aprovechar al máximo este curso se recomienda a los participantes tener conocimiento en las siguientes áreas:

• JavaScript básico
• XHTML/CSS
• PHP y SQL

Es importante mencionar que el curso está enfocado en ExtJS, no es el objetivo del curso enseñar PHP, solamente se mostrará la manera en cómo se integra esta tecnología con ExtJS.

Temario

El curso está diseñado para un nivel intermedio – avanzado, comenzaremos con los conceptos fundamentales y concluiremos con temas más complejos como desarrollo de Extensiones y Plugins, Ext Direct, etc.

Puedes descargar el temario más detallado en formato pdf.

El curso se impartira utilizando PHP y MySQL del lado del servidor, es importante mencionar que no es el objetivo del curso enseñar PHP o SQL, simplemente se utilizan para manipular y almacenar la información que utilizaremos en ExtJS.

Inversión y promociones

La inversión a realizar es de 350 Dll + IVA (16%) por participante, el cupo es limitado ya que queremos darte la mejor atención y servicio, es necesario realizar el pago antes de iniciar el curso.

Si te registras antes del 25 de Mayo del 2010 te hacemos un 20% de descuento del total del curso, pagando únicamente 280 Dll + IVA (16%), ¡aprovecha ésta oportunidad!

Si invitas a un amigo te hacemos el 25% de descuento y un 15% de descuento a tu amigo, esta promoción no es acumulable con la anterior.

El curso incluye acceso a 8 sesiones durante el mes de Junio, acceso al foro “Premium” del sitio, donde el instructor resolverá las dudas lo más rápido posible, también se otorgará un video con el contenido de cada sesión.

Horario del curso

El curso consta de 8 sesiones de 2 horas cada una, haciendo un total de 16 horas, iniciaremos el 5 de Abril del 2010, el horario es el siguiente:

Las sesiones iniciarán de las 15:00 (3:00 pm) a las 17:00 (5:00 pm) horario central (UTC-6), a continuación se muestra el horario en algunas ciudades.

Temario

El curso está diseñado para ser tomado por personas principiantes e intermedios en JavaScript, la idea es ir desde los conceptos fundamentales hasta un nivel suficiente donde el participante pueda ser capaz de desarrollar sus propias extensiones del Framework, a continuación se muestran los temas a tratar:

También puedes descargar el temario más detallado.

Back-end

La gran mayoría de interesados que me han contactado solicitan PHP con MySQL como back-end, por lo tanto he decidido que usaremos estas herramientas para este curso, es importante aclarar que no es el objetivo del curso enseñar PHP o SQL, se da por hecho que la persona tiene los conocimientos necesarios.

Inversión y Promociones

La inversión es de 350 Dlls + IVA (16%) por persona, y es necesario que se liquide antes de que se inicie el curso, el cupo es limitado ya que nos interesa poder brindarte un excelente servicio, por lo tanto te recomendamos separar tu lugar lo antes posible.

Si recomiendas a un amigo y se inscribe tu recibirás un 30% de descuento y tu amigo un 15% de descuento, aprovecha esta promoción e inscríbete hoy mismo.

Si vives en México puedes hacer un depósito o transferencia bancaria, de lo contrario el pago se realizará a través de Paypal.

Contáctanos para más información con respecto al pago. No lo pienses más y separa tu lugar con anticipación.

Paquetes

• Paquete 1: Ext JS + Java Servlets + MySQL

  El objetivo de este taller es mostrar la integración de Ext JS con los Java Servlets, además se utiliza MySQL como servidor de Base de datos.

• Paquete 2: Ext JS + Java Spring Framework + Hibernate + MySQL

  Este taller está pensado para empresas/personas que estén familiarizados con estas herramientas ya que no se ve a detalle el uso de Spring y Hibernate, el objetivo principal es mostrar la integración de Ext JS con estos Frameworks, lo sencillo y rápido que es hacerlos funcionar en conjunto.

• Paquete 3: Ext JS + PHP + MySQL

  PHP es un lenguaje muy utilizado en Internet, este taller está pensado para las personas/empresas que trabajan con PHP, la idea es mostrar una manera sencilla de poder integrar estas herramientas.

• Paquete 4: Ext JS + Code Igniter + MySQL

  Code igniter es uno de los mejores Frameworks existentes para PHP, su excelente arquitectura nos permite desarrollar nuestros proyectos con mayor rapidez, en este taller se muestra como integrar este Framework con Ext JS.

En todos los paquetes cubrimos los componentes GUI del Framework, además mostramos como desarrollar tus propias extensiones y lo más importante como desarrollar una aplicación de gran tamaño y hacer que los componentes se comuniquen entre si.

En el taller desarrollaremos una aplicación que utilice los componentes más solicitados, de esta manera podrás comenzar a ser productivo rápidamente con Ext JS.

Duración

La duración de los talleres es de 8 sesiones y la duración de cada sesión es de 2 horas, tú decides el horario de las sesiones solo contáctate con nosotros para agendar los talleres.

Lugar

El lugar puede ser las instalaciones de tu empresa o si lo deseas puede ser realizado a través de Internet.

Inversión

El costo de los cursos es de $350.00 Dlls + IVA por persona pero puede variar dependiendo del grupo de personas a tomar el curso, aplicamos descuentos a equipos grandes, si tu empresa se encuentra fuera de Monterrey Mx y deseas que los talleres sean realizados en tus instalaciones hablaremos acerca de los viáticos.

Contrataciones

Si deseas realizar una cotización, tienes alguna duda con respecto a los cursos o deseas recibir más información puedes escribirnos training arroba quizzpot punto com y con gusto te atenderemos a la mayor brevedad posible.

Mínimo

Para impartir un curso se requiere un mínimo de tres personas. En caso de que no puedas reunir a tres de tus amigos/compañeros nosotros haremos los grupos en cuanto hayan tres personas que quieran tomar el mismo curso.

Teacher’s presentation, course objectives, scope and requirements to take the course.
• Introduction

Installation

Basic concepts and knowledge to start working in your own way; this will help us prevent future problems.
• Where can I get ExtJS? Do I have to pay? Is it free?
• Basic installation of the framework
• Themes installation and “Look and Feel” configuration
• What are the adapters? What are the benefits of using them?
• Image spacer’s definition and its importance
• Quizz: First Chapter of the Ext JS course

Localization

With ExtJS it is possible to internationalize the widgets into different languages. English is the language by default, but it is possible to make translations to other languages or even find widgets already translated.
• Language installation
• Different languages in one place

ExtJS: Object oriented

We will define terms and concepts to program object-oriented in JavaScript using some of the tools that ExtJS proportionate to have an easy implementation.
• JavaScript References
• What is the scope of a variable?
• What are the Closures?
• The context and the variable “this”
• Creating objects and public methods
• Private methods and privileged methods
• Packages and namespace
• Inheritance in JavaScript
• Quizz: Basic concepts of JavaScript (Part I)
• Quizz: Object-Oriented JavaScript (Part II)

Working with the DOM

Quick look at the Ext tools to manipulate the DOM, working with special effects and animations, search the DOM and apply events.
• Getting to know the object Element
• The class DomHelper
• Searching elements with selectors
• Apply effects to the Elements
• Quizz: Working with the DOM

Messages and Events

Explanation of how display different messages to the user and how to create events on DOM elements.
• Alerts and messages shown to the user
• Handling events on DOM elements and components
• Quizz: Messages and Events

Ajax and the object Store

Explanation on how to create Ajax requests to the server, definition of the concept Store and its importance on the information exchange.
• Ajax object, GET and POST requests
• What is a Store? How does it work?
• Reading information in XML
• Reading information in JSON format
• Quizz: Ajax and the object Store

Panels, Windows and Tabs

The panels are one of the most commonly used components of the framework, that’s why it is important to understand its functionality. Like panels, windows are very useful to store other components.
• What is a panel? What’s the functionality? How do you create one?
• Floating window
• Toolbar in panels and windows
• Status bar in panels and windows
• The tabs

The Forms

Explanation on how to create a form, validations, different controls to retrieve information and interact with the server in order to request and save information.
• ExtJS basic forms and fields
• Combo box loaded dynamically and remotely
• Linked ComboBoxes with ExtJS
• A calendar to capture dates
• Text areas and HTML editors
• Loading forms remotely
• Saving information in the server
• Simple validations in the forms
• Custom validations

Charts

• Charts with ExtJS
• Charts Series

Grids

This component is very useful to display information; it allows performing different tasks in an easy and fast way.
• Binding information from an array to a grid
• Show information from an XML file
• Show information from JSON format
• Remote grid pagination
• Formatting the information and adding HTML to the cells
• Using dates and time in a grid
• Common events on the grid

Editor Grid

Sometimes is very useful to be able to edit information directly on a grid, in this way we avoid opening a new form with the information of each field.
• Edit the cells of a Grid
• Edit the cells of a Grid using a ComboBox
• Modify a date using a calendar
• Saving the changes made in the Editable Grid with Ajax
• Creating a CRUD with REST

Tree with ExtJS

The trees are very useful to show in a visual way an organization hierarchy, for example a document directory, a family or group of people, etc. ExtJS provides the perfect component to do this task
• The component Tree Panel
• Trees generated with Ajax
• Change the icons of the nodes
• Display the file system of the server
• Modify the selected nodes
• Drag and Drop
• Edit the text of a node
• Sort nodes

Building Layouts

The layouts are used to design a site; ExtJS provides different ways to do it. In this chapter we will see some examples.
• Viewport and its regions
• Accordion
• Layout combination

Drag and Drop

In some situations is very usable to drag and drop an item in some components. In this chapter we’ll see how to it in an easy way.
• A basic drag & drop
• Multiple elements
• Sort lists

Other components

Quick view of the most outstanding components of the framework.

ExtJS with Adobe AIR

Ext has libraries that are useful to develop applications with Adobe Air; in this way we can create applications that run from the desktop.

Plug-ins and Extensions

The Ext community is very active, proof of this is the amount of plug-ins that have been developed and are offered free. In this chapter we will see some of them and how to integrate them with your project.

Developing extensions

You can’t find the extension you need? Don’t worry! You can do it yourself! We will see what you need to do to create your own extension.

Evaluation

Evaluation of the most important topics of the course. It is recommended so you can to evaluate yourself.

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)

Conceptos de ExtJS

• ¿Qué es el “xtype”?

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