El objetivo de este curso es mostrar la manera como integrar los componentes, irá enfocado a arquitectura con ejemplos más aterrizados y prácticos, los tutoriales no se enfocarán tanto en configuraciones y componentes, más bien irá enfocado a la manera como se integran y comunican entre ellos.

Introducción

• Presentación del curso (Temario)
• Instalación del framework

Sistema de clases

• Creación de clases
• Herencia simple
• Herencia múltiple (Mixins)
• Definición del Alias y xtype
• Configuraciones, Estáticos y Singleton

Loader

• Convención de nombres y archivos
• Carga de clases dinámicamente con ExtJS 4

Paquete de datos

• Model
• Proxys
• Readers
• Writers
• Associations
• Validations
• Store
• Sorters, Filters y Grouping

DataView

• Template y XTemplate
• Desplegar información en un DataView

Arquitectura MVC

• Definiendo aplicaciones con Ext
• Modelos, Vistas, Controladores
• ComponentQuery y los Selectores

Desktop con CodeIgniter

• Instalación del Bleextop
• Características
• Apis disponibles
• Seguridad
• Utilizar el desktop con otra tecnología (Java, Grails, Ruby, Phyton, etc…)

Sistema de ejemplo: Bug traking

• Módulo de usuarios
• Módulo de equipos
• Módulo de proyectos
• Módulo de componentes asociados a proyectos
• Módulo de versiones
• Módulo de “issues”
• Dashboard con reportes

Al día de hoy ya tengo algunos tutoriales listos, estos se irán publicando cada dos días, así que sigue visitandonos frecuentemente o bien seguirnos en twitter o facebook para estar al tanto de las actualizaciones.

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
• Campos Compuestos

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
• Grid con columnas dinámicas

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
• Guardar los cambios del Grid editable usando Ajax
• Agrupado y Sumatoria de Columnas
• CRUD de un catálogo de contactos

Á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

Ejemplos variados

• Integración del FormPanel y el GridPanel
• Creando un Wizard
• Editando una Imagen
• Una encuesta dinámica
• Integración del TreePanel y TabPanel
• ExtJS Desktop – Creación de módulos