1 IV Congreso Spanish Sakai, Barcelona 2010 Otras maneras de desarrollar herramientas para Sakai ASIC - UdL Alex Ballesté ([email protected])[email protected]
2 IV Congreso Spanish Sakai, Barcelona 2010 DataCollector ASIC - UdL Alex Ballesté ([email protected])[email protected]
3 IV Congreso Spanish Sakai, Barcelona 2010 DataCollector ● DataCollector es una herramienta / framework para Sakai, que ayuda en la creación de aplicaciones con acceso a datos dispersos y heterogéneos.
4 IV Congreso Spanish Sakai, Barcelona 2010 DataCollector ● Pensada para la construcción de aplicaciones con gran número de pantallas, que aceden y guardan datos. ● Modificación de las pantallas en caliente.
5 IV Congreso Spanish Sakai, Barcelona 2010 DataCollector ● Motivación ● Requerimientos cambiantes. ● Alto grado de reutilización de código. ● Alto grado de detalle. ● Mejora de la usabilidad con tecnologías JS. ● Mejoras en el acceso a datos.
6 IV Congreso Spanish Sakai, Barcelona 2010 DataCollector ● ¿Que ofrece DataCollector? ● Motor de acceso de datos basado en proveedores (BD, LDAP, PDI), que los ofrece como servicio web REST. ● Motor de render que permite pintar los datos usando plantillas. ● Tool de Sakai para añadir aplicaciones “datacollector”.
7 IV Congreso Spanish Sakai, Barcelona 2010 DataCollector Preinscripción Evaluación docente Actas Directorio DataCollector Templat e Dir 2 Templat e Dir 1 Templat e Exp 1 DataCollectorTool Site:My Workspace Expediente académico
8 IV Congreso Spanish Sakai, Barcelona 2010 DataCollector Templat e Dir 2 Templat e Dir 1 Templat e Exp 1
9 IV Congreso Spanish Sakai, Barcelona 2010 DataCollector ● Primera aplicación de la UdL: DPPA (Documento de Política de Personal Académico): ● 1050 Usuarios (PAS/PDI). ● Usa 4 orígenes de datos diferentes. ● Aplicación con 118 pantallas. ● DEMO
10 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo funciona?
11 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo funciona? Block MyBlock-1 Section MySecondSection Section MyFirstSection DataSource MyDataSource1 DataSource MyDataSource2 DataSource alumnos LDAP BD MySql BD Oracle t1 t2 t3 ● Estructura:
12 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo funciona? DataCollector se divide en dos componentes separados: ● Servicio de acceso a datos. ● Motor de render, gestión de eventos y validación de formularios. SAKAI FRAMEWORK TOOL DataCollectorTool DataCollector SERVICE WSDataProvider DataCollectorProvider DataCollect or Component
13 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo funciona? ● Las aplicaciones podrán utilizar DataCollector para: ● Acceder a los datos y descripción de Sections mediante servicios web REST. ● Utilizar el motor de render para procesar plantillas asociadas al descriptor de Section, y mostrar el resultado.
14 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo funciona? ● El flujo básico de acción sería: Aplicación Solicita section Section DataSources plantilla Procesa Aplicación Solicita pintar Section HTML Final DataCollector Retorna Section
15 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación?
16 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? 1. Configurar los proveedores de datos. 2. Crear ficheros de definición de block y sections. 3. Preparar realms para sections (Establecer permisos). 4. Crear una aplicación “launcher” js que utilice el motor de render 5. Crear plantillas para las sections.
17 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? #1 Configuración del proveedor
18 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Configuración del proveedor ● Los proveedores de datos son sistemas que implementan el acceso a datos (BD,LDAP,...) ● Podemos crear tantos proveedores como necesitemos. ● Se configuran de forma centralizada. ● El archivo donde se configura es el components.xml de la herramienta DataCollector.
19 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? #2 Crear ficheros de definición
20 IV Congreso Spanish Sakai, Barcelona 2010 Block Intranet Section actas Section busqueda_directorio DataSource alumnos DataSource profesores DataSource liniaacta DataSource cordinadores DataSource expediente Block Evaluacion Section expediente ¿Cómo crear una aplicación? Crear ficheros de definición { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_20.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 Block Intranet Section actas Section busqueda_directorio DataSource alumnos DataSource profesores DataSource liniaacta DataSource cordinadores DataSource expediente Block Evaluacion Section expediente ¿Cómo crear una aplicación.", "description": "Crear ficheros de definición .", "width": "800" } 21 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? #3 Establecer permisos { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_21.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación #3 Establecer permisos", "description": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación #3 Establecer permisos", "width": "800" } 22 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Establecer permisos ● DataCollector utiliza el sistema de autorización de Sakai para dar acceso a los usuarios a las Sections definidas. ● Cada Section tiene un Realm asociado que contiene los Roles y permisos que se aplicarán. – /section/ – /site/ /section/ { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_22.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Establecer permisos ● DataCollector utiliza el sistema de autorización de Sakai para dar acceso a los usuarios a las Sections definidas. ● Cada Section tiene un Realm asociado que contiene los Roles y permisos que se aplicarán. – /section/ – /site/ /section/.", "width": "800" } 23 IV Congreso Spanish Sakai, Barcelona 2010 ( Acceso a datos ) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_23.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ( Acceso a datos )", "description": "IV Congreso Spanish Sakai, Barcelona 2010 ( Acceso a datos )", "width": "800" } 24 IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● El acceso a los datos puede hacerse con peticiones REST (HTTP GET, POST, PUT y DELETE) a las URL del servicio DataCollector. ● Presenta 3 servicios: ● /direct/blockdata ● /direct/section ● /direct/.../datasource BROWSER Sakai DataCollector Http REST { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_24.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● El acceso a los datos puede hacerse con peticiones REST (HTTP GET, POST, PUT y DELETE) a las URL del servicio DataCollector.", "description": "● Presenta 3 servicios: ● /direct/blockdata ● /direct/section ● /direct/.../datasource BROWSER Sakai DataCollector Http REST.", "width": "800" } 25 IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● dataSource: Gestionado por (DataSource Provider ) ● Operaciones: ● URL: /direct/section/ /datasource/. ● Valor de un DataSource para la sesión de usuario actual ● GET: Obtener registros ● PUT: Si es tipo simple, guarda el valor. ● Si es tipo compuesto insiere un nuevo registro ● DELETE: Si es simple borra el valor ● URL: /direct/section/ /datasource/ /. ● Valor de una fila del DataSource para la sesión del usuario actual ● GET: Obtener una fila ● PUT: Guarda el valor de la fila. ● DELETE: Borra la fila Es deducible el mismo comportamiento intercalando /site/ entre el y el prefijo datasource. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_25.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● dataSource: Gestionado por (DataSource Provider ) ● Operaciones: ● URL: /direct/section/ /datasource/.", "description": "● Valor de un DataSource para la sesión de usuario actual ● GET: Obtener registros ● PUT: Si es tipo simple, guarda el valor. ● Si es tipo compuesto insiere un nuevo registro ● DELETE: Si es simple borra el valor ● URL: /direct/section/ /datasource/ /. ● Valor de una fila del DataSource para la sesión del usuario actual ● GET: Obtener una fila ● PUT: Guarda el valor de la fila. ● DELETE: Borra la fila Es deducible el mismo comportamiento intercalando /site/ entre el y el prefijo datasource..", "width": "800" } 26 IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● Consultas dinámicas, basadas en parámetros: http://sakai.udl.cat:8080/direct/section/section- 31/datasource/vendes.json?page=2&rows=5&orderby=numvenededor&ordertype=des c&searchable=nombre:apellidos&contains=Daniel { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_26.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● Consultas dinámicas, basadas en parámetros: http://sakai.udl.cat:8080/direct/section/section- 31/datasource/vendes.json page=2&rows=5&orderby=numvenededor&ordertype=des c&searchable=nombre:apellidos&contains=Daniel", "description": "IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● Consultas dinámicas, basadas en parámetros: http://sakai.udl.cat:8080/direct/section/section- 31/datasource/vendes.json page=2&rows=5&orderby=numvenededor&ordertype=des c&searchable=nombre:apellidos&contains=Daniel", "width": "800" } 27 IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● Ejemplo de formato de salida json: { "id": "intercanvi", "properties": null, "reference": "http:\/\/cv2.udl.cat\/access\/section\/section-1-05-write\/datasource\/intercanvi", "sectionId": "section-1-05-write", "url": "http:\/\/cv2.udl.cat\/access\/section\/section-1-05-write\/datasource\/intercanvi", "value": { "f47c6703-ce03-436b-b056-cae1407440e0": { "id": "f47c6703-ce03-436b-b056-cae1407440e0", "properties": null, "reference": "http:\/\/cv2.udl.cat\/access\/section\/null\/datasource\/f47c6703-ce03-436b-b056-cae1407440e0", "sectionId": null, "url": "http:\/\/cv2.udl.cat\/access\/section\/null\/datasource\/f47c6703-ce03-436b-b056-cae1407440e0", "value": { "num_setmanes": 3, "data_mod": 1269876335000, "num_alumnes": 2, "nom_prof": "PROF. MC CARRET", "dni": "4444333", "desc": " Prova" }, "updatable": false }, { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_27.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● Ejemplo de formato de salida json: { id : intercanvi , properties : null, reference : http:\/\/cv2.udl.cat\/access\/section\/section-1-05-write\/datasource\/intercanvi , sectionId : section-1-05-write , url : http:\/\/cv2.udl.cat\/access\/section\/section-1-05-write\/datasource\/intercanvi , value : { f47c6703-ce03-436b-b056-cae1407440e0 : { id : f47c6703-ce03-436b-b056-cae1407440e0 , properties : null, reference : http:\/\/cv2.udl.cat\/access\/section\/null\/datasource\/f47c6703-ce03-436b-b056-cae1407440e0 , sectionId : null, url : http:\/\/cv2.udl.cat\/access\/section\/null\/datasource\/f47c6703-ce03-436b-b056-cae1407440e0 , value : { num_setmanes : 3, data_mod : 1269876335000, num_alumnes : 2, nom_prof : PROF.", "description": "MC CARRET , dni : 4444333 , desc : Prova }, updatable : false },.", "width": "800" } 28 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? #4 Creación de la aplicación de lanzamiento { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_28.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "#4 Creación de la aplicación de lanzamiento.", "width": "800" } 29 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación aplicación lanzamiento ● El desarrollador tiene que crear una pequeña aplicación Javascript. ● Dos componentes a disposición del desarrollador: ● Cargador de plantillas (TemplateLoader). ● Gestor de acceso a datos. (dataAcces). ● Para cargar el contenido de una section: – $("#idcontenidor").TemplateLoader(sectionId, templateId); { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_29.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación aplicación lanzamiento ● El desarrollador tiene que crear una pequeña aplicación Javascript. ● Dos componentes a disposición del desarrollador: ● Cargador de plantillas (TemplateLoader). ● Gestor de acceso a datos. (dataAcces). ● Para cargar el contenido de una section: – $( #idcontenidor ).TemplateLoader(sectionId, templateId);.", "width": "800" } 30 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación aplicación lanzamiento ● La aplicación se puede depositar como un recurso de Sakai en un site determinado. ● En la configuración de la herramienta de Sakai se indicará la URL donde se encuentra esta aplicación. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_30.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación aplicación lanzamiento ● La aplicación se puede depositar como un recurso de Sakai en un site determinado. ● En la configuración de la herramienta de Sakai se indicará la URL donde se encuentra esta aplicación..", "width": "800" } 31 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación aplicación lanzamiento { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_31.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación aplicación lanzamiento.", "width": "800" } 32 IV Congreso Spanish Sakai, Barcelona 2010 #5 Creación de plantillas { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_32.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 #5 Creación de plantillas", "description": "IV Congreso Spanish Sakai, Barcelona 2010 #5 Creación de plantillas", "width": "800" } 33 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ${row.value.nombre} Section 1.-03 publicaciones científicas Section 1.-05 publicaciones revistas Section 1.-06 publicaciones empresariales... { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_33.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ${row.value.nombre} Section 1.-03 publicaciones científicas Section 1.-05 publicaciones revistas Section 1.-06 publicaciones empresariales....", "width": "800" } 34 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● El motor de render utiliza otros frameworks para pintar el contenido de forma semiautomática. ● jQuery ● Trimpath (JST) ● Fluid ● Las plantillas son ficheros html con elementos extra para definir pantallas, eventos, acciones y validadores. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_34.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● El motor de render utiliza otros frameworks para pintar el contenido de forma semiautomática. ● jQuery ● Trimpath (JST) ● Fluid ● Las plantillas son ficheros html con elementos extra para definir pantallas, eventos, acciones y validadores..", "width": "800" } 35 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas......... { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_35.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas..........", "width": "800" } 36 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Acceso a los datos: ● Se utiliza elementos, sus atributos son: – json: Indica el datasource que queremos recibir en formato json. – local: Indica un origen de datos cargados en una variable local. – ref: Identificador que utilizaremos para referenciar el valor recibido. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_36.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● Acceso a los datos: ● Se utiliza elementos, sus atributos son: – json: Indica el datasource que queremos recibir en formato json. – local: Indica un origen de datos cargados en una variable local. – ref: Identificador que utilizaremos para referenciar el valor recibido..", "width": "800" } 37 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Cuando se tiene una referencia se puede utilizar: ● Número de horas Horas totales: ${hours.value['simple.value']} Ok Numero de horas Horas totales: 40 ok { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_37.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● Cuando se tiene una referencia se puede utilizar: ● Número de horas Horas totales: ${hours.value[ simple.value ]} Ok Numero de horas Horas totales: 40 ok.", "width": "800" } 38 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Cuando se tiene una referencia se puede utilizar: ● {for fila in reflib.value} ${fila.value.titulo} ${fila.value.editorial} ${fila.value.autores} {/for} Ok ok { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_38.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● Cuando se tiene una referencia se puede utilizar: ● {for fila in reflib.value} ${fila.value.titulo} ${fila.value.editorial} ${fila.value.autores} {/for} Ok ok.", "width": "800" } 39 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Operacions Trimpath (JST): ● Control de flujo: ● Loops: {if testExpr} {elseif testExpr} {else} {/if} {for varName in listExpr} {/for} {for varName in listExpr}...main body of the loop... {forelse}...body when listExpr is null or listExpr.length is 0... {/for}... { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_39.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● Operacions Trimpath (JST): ● Control de flujo: ● Loops: {if testExpr} {elseif testExpr} {else} {/if} {for varName in listExpr} {/for} {for varName in listExpr}...main body of the loop... {forelse}...body when listExpr is null or listExpr.length is 0... {/for}....", "width": "800" } 40 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas Gestión de eventos { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_40.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas Gestión de eventos.", "width": "800" } 41 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● DataCollector permite definir eventos y acciones, en cada una de las pantallas que forman la plantilla. 42 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Tipos de eventos: ● Cualquier tipo que trate jQuery (click,mouseup,load,etc) ● exec : Se ejecuta inmediatamente al tratar el elemento. ● hover: suma de eventos jQuery el cual ejecutará las acciones impares al entrar ratón y las pares al salir. ● validForm: Se ejecuta al comprobar que los datos son válidos. ● invalidForm: Se ejecuta al comprobar que los datos no son válidos. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_42.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● Tipos de eventos: ● Cualquier tipo que trate jQuery (click,mouseup,load,etc) ● exec : Se ejecuta inmediatamente al tratar el elemento. ● hover: suma de eventos jQuery el cual ejecutará las acciones impares al entrar ratón y las pares al salir. ● validForm: Se ejecuta al comprobar que los datos son válidos. ● invalidForm: Se ejecuta al comprobar que los datos no son válidos..", "width": "800" } 43 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Origen dels eventos (src): ● Trata los orígenes como selectores de jQuery – $('table').parent().find('.myclass'); – $('.row').filter(':has('.extension')'); – #myid –.myclass – table tr td –... { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_43.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● Origen dels eventos (src): ● Trata los orígenes como selectores de jQuery – $( table ).parent().find( .myclass ); – $( .row ).filter( :has( .extension ) ); – #myid –.myclass – table tr td –....", "width": "800" } 44 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas Tipos de actions: ● applyClass ● removeClass ● setFromVariable ● setFromSelector ● setFromDataRow ● save ● delete ● customFunction ● showScreen ● close ● La ejecución de actions de un evento se hace de forma secuencial y síncrona. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_44.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas Tipos de actions: ● applyClass ● removeClass ● setFromVariable ● setFromSelector ● setFromDataRow ● save ● delete ● customFunction ● showScreen ● close ● La ejecución de actions de un evento se hace de forma secuencial y síncrona..", "width": "800" } 45 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas Validación { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_45.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas Validación.", "width": "800" } 46 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● El motor de render incorpora un mecanismo de validación de campos de una pantalla. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_46.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● El motor de render incorpora un mecanismo de validación de campos de una pantalla. .", "width": "800" } 47 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Existe dos eventos que se disparan cuando se comprueba que el resultado es válido o inválido. ● Event: validForm ● Event: invalidForm ● El tipos de validadores disponibles son aquellos que dispone de serie el plugin jQuery.validate. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_47.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● Existe dos eventos que se disparan cuando se comprueba que el resultado es válido o inválido. ● Event: validForm ● Event: invalidForm ● El tipos de validadores disponibles son aquellos que dispone de serie el plugin jQuery.validate..", "width": "800" } 48 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● required: ● minlength ● maxlength ● min ● max ● range ● email ● Url ● Number ● date ● Lista de validadores más importantes: { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_48.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación.", "description": "Creación de plantillas ● required: ● minlength ● maxlength ● min ● max ● range ● email ● Url ● Number ● date ● Lista de validadores más importantes:.", "width": "800" } 49 IV Congreso Spanish Sakai, Barcelona 2010 Futuro del DataCollector { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_49.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 Futuro del DataCollector", "description": "IV Congreso Spanish Sakai, Barcelona 2010 Futuro del DataCollector", "width": "800" } 50 IV Congreso Spanish Sakai, Barcelona 2010 Futuro del Datacollector ● Próximas características: ● I18n de etiquetas y contenidos. ● Más proveedores – SQL Avanzado – Entidades existentes en Sakai. ● Transmisión de datos binarios (imagen/audio). ● Más actions, y validadores. ● Reutilización de partes de plantillas ● Simplificación de las plantillas { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.es/41/11300706/slides/slide_50.jpg", "name": "IV Congreso Spanish Sakai, Barcelona 2010 Futuro del Datacollector ● Próximas características: ● I18n de etiquetas y contenidos.", "description": "● Más proveedores – SQL Avanzado – Entidades existentes en Sakai. ● Transmisión de datos binarios (imagen/audio). ● Más actions, y validadores. ● Reutilización de partes de plantillas ● Simplificación de las plantillas.", "width": "800" } 51 IV Congreso Spanish Sakai, Barcelona 2010 Gracias por su atención ¿Preguntas?
21 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? #3 Establecer permisos
22 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Establecer permisos ● DataCollector utiliza el sistema de autorización de Sakai para dar acceso a los usuarios a las Sections definidas. ● Cada Section tiene un Realm asociado que contiene los Roles y permisos que se aplicarán. – /section/ – /site/ /section/
23 IV Congreso Spanish Sakai, Barcelona 2010 ( Acceso a datos )
24 IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● El acceso a los datos puede hacerse con peticiones REST (HTTP GET, POST, PUT y DELETE) a las URL del servicio DataCollector. ● Presenta 3 servicios: ● /direct/blockdata ● /direct/section ● /direct/.../datasource BROWSER Sakai DataCollector Http REST
25 IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● dataSource: Gestionado por (DataSource Provider ) ● Operaciones: ● URL: /direct/section/ /datasource/. ● Valor de un DataSource para la sesión de usuario actual ● GET: Obtener registros ● PUT: Si es tipo simple, guarda el valor. ● Si es tipo compuesto insiere un nuevo registro ● DELETE: Si es simple borra el valor ● URL: /direct/section/ /datasource/ /. ● Valor de una fila del DataSource para la sesión del usuario actual ● GET: Obtener una fila ● PUT: Guarda el valor de la fila. ● DELETE: Borra la fila Es deducible el mismo comportamiento intercalando /site/ entre el y el prefijo datasource.
26 IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● Consultas dinámicas, basadas en parámetros: http://sakai.udl.cat:8080/direct/section/section- 31/datasource/vendes.json?page=2&rows=5&orderby=numvenededor&ordertype=des c&searchable=nombre:apellidos&contains=Daniel
27 IV Congreso Spanish Sakai, Barcelona 2010 Acceso a datos ● Ejemplo de formato de salida json: { "id": "intercanvi", "properties": null, "reference": "http:\/\/cv2.udl.cat\/access\/section\/section-1-05-write\/datasource\/intercanvi", "sectionId": "section-1-05-write", "url": "http:\/\/cv2.udl.cat\/access\/section\/section-1-05-write\/datasource\/intercanvi", "value": { "f47c6703-ce03-436b-b056-cae1407440e0": { "id": "f47c6703-ce03-436b-b056-cae1407440e0", "properties": null, "reference": "http:\/\/cv2.udl.cat\/access\/section\/null\/datasource\/f47c6703-ce03-436b-b056-cae1407440e0", "sectionId": null, "url": "http:\/\/cv2.udl.cat\/access\/section\/null\/datasource\/f47c6703-ce03-436b-b056-cae1407440e0", "value": { "num_setmanes": 3, "data_mod": 1269876335000, "num_alumnes": 2, "nom_prof": "PROF. MC CARRET", "dni": "4444333", "desc": " Prova" }, "updatable": false },
28 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? #4 Creación de la aplicación de lanzamiento
29 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación aplicación lanzamiento ● El desarrollador tiene que crear una pequeña aplicación Javascript. ● Dos componentes a disposición del desarrollador: ● Cargador de plantillas (TemplateLoader). ● Gestor de acceso a datos. (dataAcces). ● Para cargar el contenido de una section: – $("#idcontenidor").TemplateLoader(sectionId, templateId);
30 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación aplicación lanzamiento ● La aplicación se puede depositar como un recurso de Sakai en un site determinado. ● En la configuración de la herramienta de Sakai se indicará la URL donde se encuentra esta aplicación.
31 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación aplicación lanzamiento
32 IV Congreso Spanish Sakai, Barcelona 2010 #5 Creación de plantillas
33 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ${row.value.nombre} Section 1.-03 publicaciones científicas Section 1.-05 publicaciones revistas Section 1.-06 publicaciones empresariales...
34 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● El motor de render utiliza otros frameworks para pintar el contenido de forma semiautomática. ● jQuery ● Trimpath (JST) ● Fluid ● Las plantillas son ficheros html con elementos extra para definir pantallas, eventos, acciones y validadores.
35 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas.........
36 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Acceso a los datos: ● Se utiliza elementos, sus atributos son: – json: Indica el datasource que queremos recibir en formato json. – local: Indica un origen de datos cargados en una variable local. – ref: Identificador que utilizaremos para referenciar el valor recibido.
37 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Cuando se tiene una referencia se puede utilizar: ● Número de horas Horas totales: ${hours.value['simple.value']} Ok Numero de horas Horas totales: 40 ok
38 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Cuando se tiene una referencia se puede utilizar: ● {for fila in reflib.value} ${fila.value.titulo} ${fila.value.editorial} ${fila.value.autores} {/for} Ok ok
39 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Operacions Trimpath (JST): ● Control de flujo: ● Loops: {if testExpr} {elseif testExpr} {else} {/if} {for varName in listExpr} {/for} {for varName in listExpr}...main body of the loop... {forelse}...body when listExpr is null or listExpr.length is 0... {/for}...
40 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas Gestión de eventos
41 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● DataCollector permite definir eventos y acciones, en cada una de las pantallas que forman la plantilla.
42 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Tipos de eventos: ● Cualquier tipo que trate jQuery (click,mouseup,load,etc) ● exec : Se ejecuta inmediatamente al tratar el elemento. ● hover: suma de eventos jQuery el cual ejecutará las acciones impares al entrar ratón y las pares al salir. ● validForm: Se ejecuta al comprobar que los datos son válidos. ● invalidForm: Se ejecuta al comprobar que los datos no son válidos.
43 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Origen dels eventos (src): ● Trata los orígenes como selectores de jQuery – $('table').parent().find('.myclass'); – $('.row').filter(':has('.extension')'); – #myid –.myclass – table tr td –...
44 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas Tipos de actions: ● applyClass ● removeClass ● setFromVariable ● setFromSelector ● setFromDataRow ● save ● delete ● customFunction ● showScreen ● close ● La ejecución de actions de un evento se hace de forma secuencial y síncrona.
45 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas Validación
46 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● El motor de render incorpora un mecanismo de validación de campos de una pantalla.
47 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● Existe dos eventos que se disparan cuando se comprueba que el resultado es válido o inválido. ● Event: validForm ● Event: invalidForm ● El tipos de validadores disponibles son aquellos que dispone de serie el plugin jQuery.validate.
48 IV Congreso Spanish Sakai, Barcelona 2010 ¿Cómo crear una aplicación? Creación de plantillas ● required: ● minlength ● maxlength ● min ● max ● range ● email ● Url ● Number ● date ● Lista de validadores más importantes:
49 IV Congreso Spanish Sakai, Barcelona 2010 Futuro del DataCollector
50 IV Congreso Spanish Sakai, Barcelona 2010 Futuro del Datacollector ● Próximas características: ● I18n de etiquetas y contenidos. ● Más proveedores – SQL Avanzado – Entidades existentes en Sakai. ● Transmisión de datos binarios (imagen/audio). ● Más actions, y validadores. ● Reutilización de partes de plantillas ● Simplificación de las plantillas
51 IV Congreso Spanish Sakai, Barcelona 2010 Gracias por su atención ¿Preguntas?