elggcampba 2010 - customize a social network in elgg without losing patience
DESCRIPTION
Presentation Elggcampba 2010.Customize a social network in Elgg without losing patience / Personalizar una Red Social en Elgg sin perder la paciencia.TRANSCRIPT
![Page 1: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/1.jpg)
Personalizar una Red Social en Elgg sin perder la paciencia
Diego Gallardo - Elgg Developer@demege
![Page 2: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/2.jpg)
Agenda
1. Introducción
2. Conceptos
3. Puesta en practica
4. Preguntas
![Page 3: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/3.jpg)
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 ...
![Page 4: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/4.jpg)
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.
![Page 5: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/5.jpg)
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.
![Page 6: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/6.jpg)
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
![Page 7: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/7.jpg)
Trabajar con vistas
Hay 3 formas de trabajar con vistas: - Sobreescribiendo - Extendiendo - Creando nuevas
![Page 8: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/8.jpg)
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
![Page 9: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/9.jpg)
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.
![Page 10: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/10.jpg)
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']
![Page 11: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/11.jpg)
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');
![Page 12: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/12.jpg)
Tipos de vistas (view type)
Vistas por defecto:
elgg views default/ canvas/ page_elements/ json php rss/ canvas/ page_elements/ xml
![Page 13: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/13.jpg)
Nos arremangamos y arrancamos!
![Page 14: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/14.jpg)
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
![Page 15: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/15.jpg)
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');
![Page 16: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/16.jpg)
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.
![Page 17: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/17.jpg)
Puesta en Practica
Tarea: Extender la vista de miembros recientes con un banner.
![Page 18: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/18.jpg)
Puesta en Practica
<?phpfunction mytheme_init() {elgg_extend_view('riverdashboard/newestmembers', 'page_elements/left_banner');}?>
![Page 19: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/19.jpg)
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.
![Page 20: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/20.jpg)
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
![Page 21: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/21.jpg)
¡Dudas o preguntas ?
![Page 22: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience](https://reader034.vdocuments.net/reader034/viewer/2022052621/557e749ed8b42a4d108b4806/html5/thumbnails/22.jpg)
GRACIAS
http://docs.elgg.org/wiki/Main_Page
http://community.elgg.org/
http://community.elgg.org/pg/profile/demege
Diego Gallardo - @demege