Post on 15-Jun-2015
description
Personalizar una Red Social en Elgg sin perder la paciencia
Diego Gallardo - Elgg Developer@demege
Agenda
1. Introducción
2. Conceptos
3. Puesta en practica
4. Preguntas
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 ...
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.
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.
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
Trabajar con vistas
Hay 3 formas de trabajar con vistas: - Sobreescribiendo - Extendiendo - Creando nuevas
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
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.
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']
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 urlhttp://local/elggbase/pg/blog/?view=rss
Definiendo el tipo de vista:elgg_set_viewtype('mobile');
Tipos de vistas (view type)
Vistas por defecto:
elgg views default/ canvas/ page_elements/ json php rss/ canvas/ page_elements/ xml
Nos arremangamos y arrancamos!
Puesta en Practica
Desarrollo de un theme base
- Creamos un directorio dentro de mod "mytheme"
- Creamos el archivo manifest.xml
- Creamos un archivo mytheme/start.php con:
<?phpfunction 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
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');
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.
Puesta en Practica
Tarea: Extender la vista de miembros recientes con un banner.
Puesta en Practica
<?phpfunction mytheme_init() {elgg_extend_view('riverdashboard/newestmembers', 'page_elements/left_banner');}?>
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.
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
¡Dudas o preguntas ?
GRACIAS
http://docs.elgg.org/wiki/Main_Page
http://community.elgg.org/
http://community.elgg.org/pg/profile/demege
Diego Gallardo - @demege