Elggcampba 2010 - Customize a Social Network in Elgg without losing patience

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

description

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

Transcript of Elggcampba 2010 - Customize a Social Network in Elgg without losing patience

Page 1: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience

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

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

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

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

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

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

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

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

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

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

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

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

Nos arremangamos y arrancamos!

Page 14: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience

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

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

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

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

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

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

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

¡Dudas o preguntas ?

Page 22: Elggcampba 2010 - Customize a Social Network in Elgg without losing patience

GRACIAS

http://docs.elgg.org/wiki/Main_Page

http://community.elgg.org/

http://community.elgg.org/pg/profile/demege

Diego Gallardo - @demege