Hace un par de semanas, publiqué en mi github, un plugin de Rails llamado rails_jqtouch para facilitar el uso de jQTouch con Rails. jQTouch es un plugin de jQuery que facilita el desarrollo de aplicaciones web para dispositivos móviles con navegador Mobile Webkit, como por ejemplo un iPhone de Apple, HTC G1 o Palm Pre.
Hace como un mes, estaba viendo que demostración hacía para el FLISOL Paraguaná 2009, obviamente, por ser desarrollador en Ruby, el tema era algo de Rails (además de poder hacer publicidad para los cursos de Rails!!), pero no es fácil mostrarle a jóvenes (no es que yo me sienta viejo!!, tengo 26 años!!) que están comenzando en este mundo de desarrollo de software las bondades de Rails, así que decidí colocarle un aderezo interesante a la demostración... incluir la participación de mi flamante iPhone 3G :p
El asunto era ¿cómo?, comencé a adentrarme en el desarrollo de aplicaciones web para estos dispositivos, probé varias alternativas que incluían: iUI, rails_iui y tank_engine (los dos últimos cortesía de Noel Rappin (Por cierto me acabo de enterar que ha escrito como 3 libros!!!). Para resumir, ninguno me complació del todo, de repente, me encontré con jQTouch en Ajaxian, el asunto era que no era fácil hacer la demostración de Rails y jQTouch sin un plugin, así que me animé a crearlo y tenerlo listo para el FLISOL. Además era algo importante para mí, ya que nunca había liberado un código fuente y era algo que simplemente debía hacer (antes tenía una camisa de fuerza cuando trabajaba en PDVSA).
Ok... basta de reseñas históricas, vamos a mostrar algunas funcionalidades de jQTouch.
Instalación
Para instalar rails_jqtouch, lo único que hay que hacer es descargarlo desde mi github, o más fácilmente, instalarlo directamente con script/plugin install desde un proyecto de Rails:
script/plugin install git://github.com/rrodrigu3z/rails_jqtouch.git
rails_jqtouch incluye varias tareas rake que facilitan, por ejemplo, la copia de los archivos de jQTouch (javascripts, imágenes, stylesheets, etc) dentro de los directorios correctos del proyecto. En este sentido, el siguiente paso es ejecutar:
rake rails_jqtouch:install
Algunas de las otras tareas disponibles son (ejecutar rake -T para ver todas):
rake rails_jqtouch:jqtouch_version # Show jQTouch version included
rake rails_jqtouch:clean # Delete all installed files
Uso: Controladores
Al igual que rails_iui, rails_jqtouch puede reconocer los requests provenientes de navegadores Mobile Safari, para ello se debe incluir en el controlador deseado o en el ApplicationController lo siguiente:
acts_as_iphone_controller
Con esto, habilitamos al controlador para que pueda incluirse la opción :iphone dentro de bloques respond_to, por lo que podemos crear templates con nombres tipo xxxx.iphone.erb.
Ejemplo:
class TareasController < ApplicationController
acts_as_iphone_controller
# GET /tareas
# GET /tareas.iphone
# GET /tareas.xml
def index
@tareas = Tarea.all
respond_to do |format|
format.html # index.html.erb
format.iphone # index.iphone.erb
format.xml { render :xml => @tareas }
end
end
# Otras acciones ...
end
Uso: Helpers y Vistas
rake rails_jqtouch:install también copia un layout de ejemplo en app/views/layouts/application.iphone.erb, el cual puede ser ser personalizado según las necesidades:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rails JQTouch</title>
<%= stylesheet_link_tag "jqt/jqtouch" %>
<%= javascript_include_tag "jquery-1.3.2.min", "jqtouch.min" %>
<%= jqtouch_init :status_bar => "black-translucent" %>
</head>
<body>
<%= yield %>
</body>
</html>
Con jqtouch_init se puede configurar el comportamiento de jQTouch, para detalles de las opciones soportadas, ver la documentación de jQTouch (aunque no hay mucha que se diga aún).
Jqtouch::MobileHelper define helpers que son incluidos de manera automática, y que facilitan la escritura de los templates, los detalles están en la documentación del código. Algunos ejemplos de uso también se pueden ver en los tests. De todas formas colocaré algunos ejemplos y formas de uso aquí en el blog.
<% mobile_page 'home', :selected => true do %>
<% mobile_toolbar 'jQTouch' do %>
<%= mobile_button_to "About", '#about', :effect => 'slideup' %>
<% end %>
<%= mobile_list [
{:name => "Features", :url => "#features"},
{:name => "Demos", :url => "#demos"},
{:name => "Docs", :url => "docs.html"},
{:name => "License", :url => "#license"},
{:name => "Download »", :url => "http://www.jqtouch.com/", :target => "_self"} ] %>
<% end %>
<% mobile_panel 'about' do %>
<% mobile_pad :style => 'padding-top: 80px' do %>
<p>jQTouch was created by David Kaneda as a means of easily creating iPhone-styled websites.
It is released open source, under the MIT license. It is still in its early stages of development
and is currently lacking in documentation.
For more information about jQTouch, please contact
<a href="http://twitter.com/davidkaneda/">David on Twitter, @davidkaneda.</a></p>
<%= mobile_back_button 'Close', :class => "grayButton" %>
<% end %>
<% end %>
El listado anterior es un fragmento adaptado con rails_jqtouch del index.html incluido como ejemplo con jQTouch. Algunos de los helpers incluidos en rails_jqtouch son:
- mobile_page: Genera el wrapper para una página, referenciada por un id.
- mobile_pad: Genera un div con la clase pad, que sirve de contenedor de elementos de formulario, texto, entre otros.
- mobile_panel: Es como mobile_page, pero le agrega al div resultante la clase panel.
- mobile_fieldset: Genera un fieldset, que sirve de contenedor de mobile_rows.
- mobile_row: Genera un div con la clase row que se utiliza como contenedor de elementos de formulario.
- mobile_toolbar: Genera la barra de herramientas.
- mobile_button_to: Genera un botón con los estilos deseados.
- mobile_back_button_to: Genera un botón para devolverse, útil para ser usado en el toolbar.
- mobile_list: Genera una lista, típica de aplicaciones para móviles, se puede especificar el nombre y url de cada item.
Como mencioné antes, la documentación está mucho mejor en el código, por lo que pueden generarla con rdoc. Si tengo tiempo, la subo en estos días a algún subdominio para que esté en línea.
Bueno, espero que este plugin sea de utilidad, no soy un experto en desarrollo para dispositivos móviles, pero espero sus comentarios, sugerencias, mejoras, etc. Además, es mi primer código que libero, así que sean gentiles!!! (por si ven algún mamarracho...).
Saludos! y estén pendientes para la siguiente parte de Rails + iPhone.
; "Ricardo Rodríguez")
Escribir un comentario