Logo de Kopernik. La idea era que el sistema sea usado por escolares y por lo tanto, no debia ser tan serio.

Aprovechando la experiencia que adquiri trabajando y estudiando en universidades decidi crear desde cero un sistema que se ajustara a los requerimientos especiales que cada institucion pudiera tener. Como recien estaba empezando pense que mejor seria comenzar con modulos para colegios pero… resulta que he olvide como funcionan!

Cuando estaba en el colegio no pensaba en procesos y en maneras de como mejorarlos como lo hago ahora. Por eso es que los modulos que ya he creado almacenan datos como el valor en creditos de cada asignatura o que permiten a un alumno matricularse en asignaturas distintas que el resto de sus companeros. De hecho el proceso que los administradores deben realizar para matricular de un alumno esta pensado usando los requerimientos universitarios o de institutos.

En los colegios todos los alumnos llevan lo mismo. Solo hay dos opciones:

• No te matriculas un año o…
• Estas matriculado y llevas todas las asignaturas de tu año (con algunas excepciones como no asistir al curso de religion por solicitud de los padres).

Es algo en lo que hay que trabajar.

Por el momento me quedan algunos modulos importantes por desarrollar, como el control de evaluaciones, asistencias y materiales de clase.

A continuacion explico algunos detalles del software y al final puedes encontrar un enlace para que lo puedas ver en accion.

Caracteristicas generales

• Es modular, de tal forma que sea facil reutilizar los modulos comunes y adecuarlos a lo que necesite.
• Permite el trabajo colaborativo (tiempo real).
• Solo hace uso del puerto 80. No es necesario habilitar la salida puertos adicionales en una red controlada.
• El cliente solo necesita tener Adobe Flash instalado.
• No requiere de licencias adicionales.
• Es multiplataforma. Corre en Windows, Mac, Linux y cualquier otro sistema operativo que tenga soporte para Adobe Flash (talvez Android?)
• Es multitarea. Las aplicaciones y modulos son cargados dentro de contenedores visibles como ventanas. Por lo tanto, no es necesario salir de un modulo para entrar a otro. Puedes tener varios modulos abiertos al mismo tiempo compartiendo el escritorio visible o minimizar algunos de ellos para usarlos luego.
• Al instalarlo en un servidor web con un IP publico es accesible desde cualquier parte del mundo.
• Control de acceso, a modulos y acciones, por grupos de usuarios. Se define que grupos tienen acceso a que modulos y las operaciones que realizan estos.
• El sistema cuenta con algunas herramientas como el administrador de tareas (clic secundario sobre el fondo) y un explorador de directorios (del servidor).

Tres aplicaciones abiertas: el explorador de alumnos, el explorador de archivos y el administrador de tareas

Tecnologias usadas

• Flex 4: Empece el proyecto con la version 3 pero las nuevas caracteristicas (en especial la capacidad de trabajar con archivos localmente y el skining) resultaron muy tentadoras y tuve que hacer la migracion ya casi a mitad del proyecto (y acepto que no fue una decision muy inteligente. Me retraso todo el calendario pero espero haya valido la pena).
• Zend Framework: Elegi este framework por la empresa que hay detras (Zend creadora de PHP) y por que ya me encuentro familiarizado con el. Ademas podia usar el paquete Zend_Amf para conectar Flex con el servidor. Tuve que migrar desde AMFPHP por lo que perdi el explorador de servicios y el control de acceso en cada clase. Realmente fue una migracion dura porque las clases del sistema (no academicas) ya estaban empezadas y funcionaban perfecto con AMFPHP. La gran ventaja de usar Zend_Amf es que tienes a tu disposicion todo el framework de Zend y ademas es el unico soporte para AMF que tiene la venia de Adobe sin ser desarrollado por Adobe (y la version actual de AMFPHP se encontraba abandonada en una version beta).
• PHP: Como es obvio, por ser un lenguaje fantastico y porque casi todo servidor Apache lo tiene instalado.
• MySQL: Necesitaba una base de datos transaccional y confiable. Que mejor que MySQL usada en la mayoria de servicios de hosting.

Requisitos

• Del lado del cliente
  • Flash Player 10.0.0 o una version mayor.
• Del lado del servidor
  • PHP 5.2
  • Apache
  • MySQL

Acceso a la demo

Antes de ingresar por favor, lee las siguientes instrucciones:

• Los datos de acceso se encuentran pre-escritos en los campos de texto, solo es cuestion de logearse.
• El usuario de prueba pertenece al grupo de administradores, por lo que tendras acceso sin restriccion sobre los modulos y acciones que puedan estos realizar. Ten cuidado de eliminar aplicaciones, volver a registrarlas te puede resultar complicado si no sabes donde se encuentran almacenadas.
• La falta de acentos se debe a que uso en teclado en ingles. Lo corregire muy pronto. Las fallas ortograficas se deben a mi falta de atencion a las clases de lengua (junto con la eficiencia del corrector ortografico de Word). Cuando tenga tiempo aplicare las correcciones necesarias.
• La primera vez que cada aplicacion es solicitada puede demorarse unos segundos en cargarse (dependiendo de tu velocidad de salida a Internet). La aplicacion queda almacenada en la cache de tu navegador y es cargada de alli en las solicitudes posteriores.
• Y por ultimo, te recuerdo que esta es una version en desarrollo y por ello puede tener errores. Si encuentras alguno, por favor ayudame a corregirlo comentandolo en este post. Gracias.

Eso es todo. La direccion de acceso es la siguiente: http://kopernik.danielzegarra.net/. Espero tus comentarios.

Entradas posiblemente relacionadas con este post:

1. Transfiriendo valores NaN entre Zend AMF y Flex
2. Decidirse entre Zend AMF, AMFPHP, WebORB, …

La gran versatilidad es un punto a favor de Eclipse, el IDE elegido por Adobe para Flex Builder y Flash Builder. Eclipse te permite tener varios compiladores y elegir con cual compilar cada proyecto.

Instrucciones para instalar Flex SDK4 en Flex Builder 3

1. Descargar el .zip con el SDK 4 de Flex desde Adobe Open Source.
   

   Contenido del SDK de Flex 4

2. Crea una carpeta con el nombre 4.0 en el directorio sdks ubicado en la raiz de tu instalacion de Adobe Flex Builder (usualmente C:\[Program Files]\Adobe\Flex Builder 3). Asi como la siguiente imagen:
   

   Los SDKs de Flex

3. Extraer todo el contenido del .zip en el directorio que acabas de crear.
4. Abres Flex Builder y te diriges al menu Window > Preferences > Flex > Installed Flex SDKs.
   

   SDKs instalados

5. Le das un clic al boton Add, para registrar un nuevo SDK, y completas el formulario.
   

   Registrando el nuevo SDK

Con esto ya puedes compilar con el nuevo SDK.

La nueva version de Flex trae algunos cambios en la plantilla mxml y si nos vamos a poner a compilar un proyecto ya existente tendremos errores. Entonces tenemos dos opciones: actualizar nuestro codigo para compilar sin problemas o activar la compatibilidad con Flex 3 y dejar nuestro codigo tal como esta. Si ya tienes un proyecto iniciado con Flex 3 te recomiento tan solo activar el modo de compatibilidad y aprovechar los nuevos metodos y clases que incluye este nuevo SDK sin tener que actualizar codigo.

Habilitando compatibilidad con Flex 3

1. Abre un proyecto y ve a las propiedades del mismo (clic secundario > Properties) y elige la ficha Flex Compiler (ve el screenshot).
   

   Configurando el compilador en cada proyecto

2. Elije como SDK el que ultimo que has registrado y pega la siguiente linea como argumentos adicionales para el compilador:-compatibility-version=3.5 -theme=${flexlib}/themes/Halo/halo.swc

Veamos que hace cada argumento:

-compatibility-version=3.5

Activa la compatibilidad con la version 3.5 del SDK de Flex. Si quieres puedes reemplaza el 3.5 por 3.3 o simplemente 3. La diferencia (si es que hay alguna) sera insignificante.

-theme=${flexlib}/themes/Halo/halo.swc

Define a Halo como tema por defecto. Flex 4 usa Spark como tema predeterminado que en su forma silvestre es mas feo que el carajo. Me recuerda a las aplicaciones java de JCreator. Si deseas mantener el aspecto de tus componentes tal y como eran antes de usar este nuevo SDK entonces manten este argumento en tu proyecto.

Listo, eso es todo. Ya tienes el nuevo Flex 4.

Entradas posiblemente relacionadas con este post:

1. Instalar Blueprint desde Adobe Labs
2. Flex: Clase datagridColumnSelector
3. Compartir internet usando adaptadores WiFi
4. Enviar y recibir SMS’s usando el modem 3G
5. Transfiriendo valores NaN entre Zend AMF y Flex

Blueprint example

Usualmente cuando tienes dudas de como conseguir el resultado esperado (o te da flojera hacerlo tu mismo)  buscas en la web por ejemplos. Esto simplemente te ahorra el trabajo. Tan solo marca el nombre de la clase y presiona Alt+B (Ctrl+B en Mac) para buscar ejemplos relacionados. Puedes mejorar el resultado agregando palabras clave al campo de busqueda. La verdad, es mas comodo que usar el browser.

Para instalarlo dirigete a labs.adobe.com/wiki/index.php/Blueprint:Installation_Instructions y sigue los pasos. Las instrucciones usan screenshots de Flex Builder 3 pero la manera de hacerlo en Flash Builder 4 no es muy distinta (ambos son eclipse).

Visitar la pagina de Blueprint en Adobe Labs

Entradas posiblemente relacionadas con este post:

1. Usando Flex 4 SDK sobre Flex Builder 3
2. Flex: Clase datagridColumnSelector

Menu contextual del DataGrid

Se puede implementar en solo una linea de codigo:

new datagridColumnSelector(datagridInstance, [campoignorado1]);

El primer argumento es obligatorio y debe ser una instancia de DataGrid. El segundo argumento es opcional y debe recibir un Array con los nombres de las columnas a ignorar.

Cambiando algunas propiedades por defecto:

datagridColumnSelector.label_hide = "Ocultar";
datagridColumnSelector.label_show = "Mostrar";
var selector:datagridColumnSelector = new datagridColumnSelector(data_dg);
selector.hidden = ["col3"];

En el siguiente ejemplo la columna 4 y 5 estan ocultas por defecto. Tambien se decide ignorar la columna 3 para que el usuario no pueda ocultar todas las columnas.
Nota que el valor del atributo headerText en cada DataGridColumn es usado en el menu contextual para que el usuario pueda identificar la columna.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" creationComplete="init()"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #E7E7E7]"
	paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" horizontalAlign="left" viewSourceURL="srcview/index.html">

	<mx:Script>
		<![CDATA[
			import net.danielzegarra.utils.datagridColumnSelector;

			protected function init():void{
				new datagridColumnSelector(data_dg, ["col3"]);
			}
		]]>
	</mx:Script>

	<mx:Label text="Haga un clic secundario sobre el DataGrid para mostrar u ocultar columnas."/>
	<mx:DataGrid id="data_dg" width="100%" height="100%">
		<mx:columns>
			<mx:DataGridColumn headerText="Columna 1" dataField="col1"/>
			<mx:DataGridColumn headerText="Columna 2" dataField="col2"/>
			<mx:DataGridColumn headerText="Columna 3" dataField="col3"/>
			<mx:DataGridColumn headerText="Columna 4" dataField="col4" visible="false"/>
			<mx:DataGridColumn headerText="Columna 5" dataField="col5" visible="false"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

Y el resultado:

Ver la fuente | Descargar datagridColumnSelector Class

Nota: Funciona tambien con Air aunque es preferible usar las clases nativas de Adobe Air.

Entradas posiblemente relacionadas con este post:

1. Usando Flex 4 SDK sobre Flex Builder 3

Cuando Zend AMF devuelve una clase con variables nulas AS3 lo recibe asi, pero para AS3 las variables Number no pueden ser null y para salir de este problema convierte el null en 0 (cero). Y es asi como terminas teniendo variables con valores en cero en lugar del esperado NaN.

La manera mas facil de arreglarlo es hacerle un puente al problema utilizando setters para recibir el valor entregado por el servidor, validarlo y decidir si es un aceptarlo o no.

Se puede entender mejor viendo el siguiente ejemplo:

package DTO{
	[RemoteClass(alias="claseDTO")]
	[Bindable]
	public class claseDTO{
		/**
		 * Solo se tiene acceso a esta variable a travez de su getter/setter
		 */
		private var _numero:Number;

		/*
		 * Definiendo el getter/setter para la variable privada _numero.
		 * Recordar que Number es una subclase de Object.
		 */
		public function get numero():Object{
			return _numero;
		}
		public function set numero(val:Object):void{
			//Si el valor dado es un numero
			if(val is Number)
				_numero = val as Number;
		}

	}
}

Los comentarios son bienvenidos.

Entradas posiblemente relacionadas con este post:

1. Decidirse entre Zend AMF, AMFPHP, WebORB, …
2. Tips sobre Class mapping con Zend AMF
3. Flex: Clase datagridColumnSelector
4. Nace Kopernik, un sistema académico
5. Usando Flex 4 SDK sobre Flex Builder 3

En si tenemos tres o cuatro candidatos potenciales y estos son: Zend AMF, AMFPHP y WebORB. A continuacion comento las caracteristicas de cada uno.

AMFPHP es creo, sin lugar a dudas, la mejor alternativa si deseas conectar tu aplicacion Flex o Flash con un servidor PHP (y este a su vez con la BD) y no deseas tener que pasar por una larga curva de aprendizaje. AMFPHP es ligero, incluye una gestion de roles bastante simple, no es necesaria su instalacion, soporta mapeo de clases (VOs) y por ultimo, incluye un navegador de servicios para que puedas probar los mismos rapidamente. Ademas, soporta AMF0 y AMF3 (por si usas AS2 o AS3) de forma transparente. Ademas, viene preparado para comsumir Web services. Entre sus desventajas estaba la falta de soporte. La persona detras del proyecto lo abandono dejandolo en una version beta (y sin la nueva documentacion completa) durante un par de años  pero recientemente su desarrollo acaba de ser retomado y gracias a ello, se acaba de lanzar, por fin, la version 1.9 oficial.

El siguente es Zend AMF, desarrollado por Zend (la empresa detras de PHP) es el mas apoyado de todas las alternativas debido a que tiene la venia de Adobe y, obviamente, es desarrollado por Zend. A pesar de esto, carece de caracteristicas que AMFPHP o WebORB ya ofrecen (como seguridad integrada y un navegador de servicios) obligandote a implementarlas tu mismo o, lo que es mas facil, a vivir sin ellas. Pero su gran ventaja es que al ser una parte de Zend Framework (aunque se puede descargar de manera independiente) se acopla perfectamente a su arsenal de herramientas lo que es muy util, creeme. Hoy acabo de enterarme que el problema de la lenta serializacion de datos que Zend AMF tenia en versiones anteriores acaba de ser solucionada de manera oficial en la version 1.10.4.

El tercero es WebORB. Si tuviera que definirlo en una sola palabra esa seria “Completo”. Tiene tantas caracteristicas que impresiona. Un administrador de servicios decente junto con opciones pensadas para ahorrarle al desarrollador la necesidad de escribir codigo, incluye su propio administrador de acceso a servicios y metodos ademas de un administrador centralizado para el mapeo de clases. Sin lugar a dudas es el que ofrece mas opciones a simple vista. El problema de WebORB es justo eso, ofrece tantas opciones que pueden confundir al novato, darle una sensacion de demasiada complejidad.

Escribo este post porque hace poco he pasado de AMFPHP a Zend AMF. Me costo hacer la mudanza debido a que tenia muchas clases que recibian matrices asociativas como parametros (AMFPHP mapeaba los objetos de Flash en arrays asociativos y Zend AMF lo hace como objetos) y basaba casi toda la implementacion de seguridad en el metodo beforeFilter de cada clase/servicio.

Entradas posiblemente relacionadas con este post:

1. Transfiriendo valores NaN entre Zend AMF y Flex
2. Tips sobre Class mapping con Zend AMF
3. Nace Kopernik, un sistema académico
4. La directiva date.timezone de PHP
5. AMFPHP 1.9 y la llegada de PHP 5.3

Yo uso Loader para cargar la data y luego lo agrego a una instancia del componente Image usando addChild(). De esta forma evito el tener que detectar cuando Loader termina de cargar los datos para recien poder usar la imagen.

En el siguiente ejemplo la imagen de la derecha es copiada y puesta en un ByteArray. Luego, los datos son comprimidos a JPEG, cargados usando Loader y por ultimo asignados a el componente Image de la derecha. El resultado: una copia de la imagen original. Incluso me parece que la copia tiene colores mas brillantes
No, mentira. Es una copia identica.

Entradas posiblemente relacionadas con este post:

1. Flex: Clase datagridColumnSelector