Presentation Elggcampba 2010. Customize a social network in Elgg without losing patience / Personalizar una Red Social en Elgg sin perder la paciencia.

1. Personalizar una Red Social en Elgg sin perder la paciencia Diego Gallardo - Elgg Developer @demege

2. Agenda 1. Introducción 2. Conceptos 3. Puesta en practica 4. Preguntas

3. Introducción - Elgg esta basado en MVC (modelo-vista-controlador) - Esta charla va a hablar de la capa de vista - Aprenderemos como modificar la parte visual de un sitio en Elgg - Cuando hablamos de personalización en Elgg hablamos de vistas. - Aprenderemos que es una vista, que es extender una vista, tipos de vistas ...

4. Que es una vista En Elgg todo se puede representar con una vista. Se puede representar elementos html, css, js. En Elgg se representan con vistas, un header, footer, input, textarea, pulldown, etc Es la salida de datos de la informacion que ve el usuario. La ventaja que todo se maneje con el mismo sitema: - Esta centralizado. - Se puede extender. - Se pueda cachear.

5. Como utilizar una vista Como llamar a una vista: elgg_view( 'page_elements/header_contents' ) Se puede pasar parametros una vista mediante un arreglo. elgg_view( 'page_elements/header_contents' , array ( 'var1' => $val1, 'var2' => $val2)) Se obtienen estos parametros en la vista a traves de $vars. $vars[ 'var1' ], $vars[ 'var2' ] La vista recibe en $vars parametros por defecto: $vars[ 'url' ] : Url del sitio. $vars[ 'user' ] : El usuario que esta logeado actualmente. $vars[ 'config' ] : el objeto configuracion de elgg.

6. Estructura de vistas Estructura de directorio de vistas por defecto de elgg: elgg views default canvas layouts two_column_left_sidebar.php page_elements header_contents.php footer.php

7. Trabajar con vistas Hay 3 formas de trabajar con vistas: - Sobreescribiendo - Extendiendo - Creando nuevas

8. Trabajar con vistas: Sobreescribiendo Para sobrescribir una vista, solo basta con declarar la vista en la misma posición a nivel estructura, respecto a la vista a sobreescribir. Ubicacion vista original (header) elgg views default page_elements header_contents.php Ubicacion vista sobreescrita (header) mytheme views default page_elements header_contents.php

9. Trabajar con vistas: Extendiendo Se pueden extiender las vistas para agregar contenido antes o despues de las mismas. Ej: Extendemos el header para agregar un menu. elgg_extend_view( 'page_elements/header_contents' , 'page_elements/menu' ); El tercer parametro de la funcion elgg_extend_view indica la prioridad por defecto 500. Ej: Extendemos el header para agregar un menu antes. Al darle menos prioridad que por defecto, se agrega antes. elgg_extend_view( 'page_elements/header_contents ', 'page_elements/menu' , 499); TIP : En la vista que extendemos se reciben en $vars los parametros de la vista extendida.

10. Layouts En elgg hay diferentes layouts para mostrar la informacion. - 2 columnas. (sidebar izq, sidebar derecha) - 1 columna - sidebar boxes (riverdashboard) - widgets (profile, dashboard) Como llamar a un layout: elgg_view_layout('two_column_left_sidebar', $area1, $area2, $area3); Las diferentes variables que se pasan al layout, se reciben como $vars['area1'], $vars['area2'] ... $vars['areaN']

11. Tipos de vistas (view type) Elgg provee diferentes formas de mostrar finalmente la informacion: rss, json, xml, php, default (estandard) Cambiando el tipo de vistas, se puede mostrar la misma informacion de diferente manera. Se podria especificar un nuevo tipo "mobile" y modificar las vistas sin tener que modificar la informacion misma. Utilizacion: A traves de la url http://local/elggbase/pg/blog/?view=rss Definiendo el tipo de vista: elgg_set_viewtype('mobile');

12. Tipos de vistas (view type) Vistas por defecto: elgg views default/ canvas/ page_elements/ json php rss/ canvas/ page_elements/ xml

13. Nos arremangamos y arrancamos!

14. Puesta en Practica Desarrollo de un theme base - Creamos un directorio dentro de mod &quot;mytheme&quot; - Creamos el archivo manifest.xml - Creamos un archivo mytheme/start.php con: <?php function mytheme_init() { elgg_extend_view( 'css' , 'mytheme/css' ); //Extendemos la vista de css } register_elgg_event_handler( 'system' , 'init' , 'mytheme_init' ); ?> - Creamos la estructura de vista default. views default mytheme

15. Puesta en Practica Archivo CSS: - En Elgg el css se encuentra en 1 solo archivo en: elgg/views/default/css.php - Podemos sobreescribirlo declarandolo en nuestro plugin: elgg/mod/mytheme/views/default/css.php - Podemos extenderlo con: elgg_extend_view( 'css' , 'mytheme/css' );

16. Puesta en Practica Importante : Los plugins en Elgg tienen jerarquias de vistas, cualquier archivo que se declare en la misma posición en la estructura, reemplazara a otro ya definido. Ej: Agregar contenido al header. El archivo: mod/mytheme/views/default/page_elements/header_contents.php Reemplazara: elgg/views/default/page_elements/header_contents.php - Podemos copiar el original y modificarlo o crear uno nuevo.

17. Puesta en Practica Tarea: Extender la vista de miembros recientes con un banner.

18. Puesta en Practica <?php function mytheme_init() { elgg_extend_view( 'riverdashboard/newestmembers' , 'page_elements/left_banner' ); } ?>

19. Puesta en Practica Funciones utiles: - get_loggedin_user(): Obtenemos el usuario logeado. - isloggedin(): Devuelve true o false si hay un usuario logeado. - isadminloggedin(): Devuelve true si hay un admin logeado. - get_context(): Devuelve el contexto. - get_input('my_var', ''): Obtiene variables input de GET/POST - set_input('my_var', 'diego'): Seteamos una variable, para obtener por get_input.

20. Puesta en Practica Recomendaciones : - Nunca modificar las vistas en /elgg/views/*, en caso de querer modificar algo, hacerlo dentro de un plugin. - Tener en cuenta el orden de los plugins en la lista de plugins al sobreescribir vistas. Ej: si sobreescribimos una vista de blog y este se encuentra debajo de nuestro plugin en la lista de plugins, no se veran los cambios. - En la configuracion del sitio, quitar cache de vistas y archivos para desarrollo. - En caso de no ver los cambios http://mysite.com/upgrade.php

21. ¡Dudas o preguntas ?

22. GRACIAS http://docs.elgg.org/wiki/Main_Page http://community.elgg.org/ http://community.elgg.org/pg/profile/demege Diego Gallardo - @demege