RJS templates

16 05 2007

Desde la versión 1.1 de Rails, contamos con las plantillas RJS. Si alguien se pregunta en qué consisten, la definición más clara es: “JavaScript written in Ruby”, pues eso, JavaScript escrito en Ruby. Nos resultará de gran utilidad cuando trabajamos con AJAX, ya que nos permite modificar múltiples elementos de una página como respuesta a una llamada AJAX.

Métodos RJS

< < < <(javascript)
Escribe Javascript sin procesar en la página.
alert alert (mensaje)
Muestra un cuadro de diálogo con el mensaje dado.
assign assign (variable, valor)
Asigna a la variable JavaScript el valor dado.
call call (funcion, *argumentos)
Llama a una función JavaScript, opcionalmente puede pasar argumentos.
delay delay (segundos)
Ejecuta el contenido del bloque, pasado el tiempo indicado en segundos.
draggable draggable (id, opciones = {})
Crea un elemento arrastrable script.aculo.us. Ver ActionView::Helpers::ScriptaculousHelper para más información.
drop_receiving drop_receiving (id, opciones = {})
Crea un elemento receptor del arrastre script.aculo.us. Ver ActionView::Helpers::ScriptaculousHelper para más información.
hide hide (*ids)
Oculta los elementos DOM visibles, cuyos ids se han dado.
insert_html insert_html (posición, id, *opciones_para_renderizar)
Inserta código HTML en una posición dada relativa al elemento DOM identificado por el id dado. Las posiciones pueden ser las siguientes:

  • :top El HTML se inserta dentro del elemento, antes del contenido existente en el elemento.
  • :bottom El HTML se inserta dentro del elemento, después del contenido existente en el elemento.
  • :before El HTML se inserta precediendo al elemento.
  • :after El HTML a continuación del elemento.

Las opciones_para_renderizar pueden ser cualquier cadena HTML a insertar, o un “hash” de opciones para ActionView::Base#render.

redirect_to redirect_to (posición)
Redirecciona el navegador a la posición indicada, de igual manera que url_for.
remove remove (*ids)
Suprime de la página los elementos DOM cuyos ids se han dado.
replace replace (id, *opciones_para_renderizar)
Remplaza el HTML generado por el elemento DOM (esto es, el elemento entero, no solo su contenido) por el del id dado.

*opciones_para_renderizar pueden ser cualquier cadena HTML a insertar, o un “hash” de opciones para ActionView::Base#render.

replace_html replace_html (id, *opciones_para_renderizar)
Remplaza el HTML interno del elemento DOM por el del elemento dado.

*opciones_para_renderizar pueden ser cualquier cadena HTML a insertar, o un “hash” de opciones para ActionView::Base#render.

select select (patrón)
Retorna una referencia de la colección buscándola a través de un patrón CSS en el DOM. Esta colección puede usarse por futuras llamadas del método.
show show (*ids)
Muestra los elementos DOM ocultos cuyas ids se han dado.
sortable sortable (id, options = {})
Crea un elemento “ordenable” de script.aculo.us. Resulta útil para reconstruir elementos “ordenables” después de que los elementos hayan sido agregados o suprimidos. Ver ActionView::Helpers::ScriptaculousHelper para más información.
toggle toggle (*ids)
Modifica el estado de visibilidad de los elementos de DOM cuyas ids se han dado.
visual_effect visual_effect (nombre, id = nil, opciones = {})
Inicia un efecto visual de script.aculo.us Listado de efectos. Ver ActionView::Helpers::ScriptaculousHelper para más información.
[] [] (id)
Retorna una referencia al elemento mediante la búsqueda de su id en el DOM.Este elemento puede usarse para futuras llamadas del método.

fuente: Ruby on Rails Manual

utilizando_rjs

NOTA: No puede existir en el mismo directorio ningún fichero “.rhtml” con el mismo nombre que asignemos al fichero “.rjs”

Efectos visuales de script.aculo.us (por categorías)

Sintaxis básica: Effect.NombreEfecto(‘id_DOM’)
Sintaxis con opciones: Effect.NombreEfecto(‘id_DOM’,{opción: valor, opción: valor})

NOTA: Todos los efectos fx disponen de opciones por defecto.

Efectos de entrada y salida

  • Effect.Appear / Effect.Fade
  • Effect.BlindUp / Effect.BlindDown
  • Effect.SlideUp / Effect.SlideDown
  • Effect.Grow / Effect.Shrink
  • Efectos de salida

  • Effect.DropOut
  • Effect.Fold
  • Effect.Puff
  • Effect.Squish
  • Effect.SwitchOff
  • Effect.toggle
  • Efectos de resaltado

  • Effect.Highlight
  • Effect.Opacity
  • Effect.Pulsate
  • Effect.Parallel
  • Effect.Scale
  • Effect.ScrollTo
  • Effect.Shake
  • Otros

  • Effect.Move
  • Effect.MoveBy
  • Effect.KeepFixed
  • Effect.Queues
  • Effects.TreasureChest
  • fuente: scriptaculous

    NOTA: Listado a fecha: 14/08/06

    rjs_scriptaculous

    NOTA: Tres ejemplos de acceso a efectos “scriptaculous” desde un fichero “rjs”.

    Add to Technorati Favorites

    Anuncios

    Acciones

    Information

    3 responses

    24 05 2007
    cXea

    Buena explicación, gracias por hacerla.

    3 08 2007
    Markos

    Buena documentacion, que hiciste justo lo que estaba buscando para inicarme a ruby on rails..
    saludos

    9 05 2008
    yeni

    Estos apuntes son lo que uno necesita para empezar, Gracias!

    Responder

    Introduce tus datos o haz clic en un icono para iniciar sesión:

    Logo de WordPress.com

    Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

    Imagen de Twitter

    Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

    Foto de Facebook

    Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

    Google+ photo

    Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

    Conectando a %s




    A %d blogueros les gusta esto: