Blog Personal: jQueryMobile en Rails

En este post veremos como usar jQuerymobile en Rails.

Procedemos a crear un proyecto llamado, para este caso lo llamaremos "jqmoblog", hacemos lo siguiente:
> rails new jqmoblog

Ahora nuestro proyecto ha sido creado, y ahora nos ubicamos en nuestro proyecto creado
> cd jqmoblog
> rails server

Luego creamos el scaffold que usaremos para nuestro proyecto:
> rails generate scaffold Post title:string body:text

Ahora ejecutaremos el siguiente comando para la migración de nuestra base de satos
> rake db:migrate

Luego procedemos a inicializar nuestro proyecto
> rails server

cargamos nuestro proyecto en nuestro browser: http://localhost:3000

En este paso veremos que nos carga por defecto el: public/index.html

Por lo tanto, procedemos a eliminar el archivo:
> rm public/index.html

Y procedemos a editar el archivo config/routes.rb con el siguiente código:
Jqmoblog::Application.routes.draw do
resources :posts
root :to => "posts#index"
end

Ahora cargamos nuevamente http://localhost:3000 y vemos que cargará una lista vacía de Posts.

Luego procedemos a importar las librerias de jquery y jquerymobile en el acrhivo app/views/layouts/application.html.erb que es como nuestro master template, el archivo tiene que quedar de la siguiente manera:

< head >
< title >Prueba
< link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
< %= stylesheet_link_tag "application", :media => "all" % >
< %= javascript_include_tag "application" % >
< script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js ">
< script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js ">
<%= csrf_meta_tags %>
< / head >

Además por mi cuenta creo conveniente eliminar el archivo app/assets/stylesheets/scaffolds.css.css debido a que contiene estilos que afectan los estilos que aplica la librería de jQuerymobile

Luego aplicamos el atributo data-role al contenedor de la pagina para que aplique los elementos de jQuerymobile

< body >
< div data-role="page" >
<%= yield %>
< /div >
< /body >

Luego, editamos nuestra vista index.html.erb de la siguiente manera:

< div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner" >
< h1 >Listing posts
<%= link_to 'Add', new_post_path, "data-transition" => "slide", "data-direction" => "reverse","data-icon" => "plus", "class" => "ui-btn-right" %>
< /div >

< div data-role="content" >
< ul data-role="listview" data-divider-theme="b" data-inset="true" >
< li data-role="list-divider" role="heading">Lista de Posts

<% @posts.each do |post| %>
< li data-theme="c" >
<%= link_to post.title, post, "data-transition" => "slide" %>
<%= link_to 'edit post', edit_post_path(post), "data-icon" => "gear" %>
< /li >
<% end %>
<% if @posts.empty? %>
< li >No hay Posts< /li >
<% end %>
< /ul >
< /div >

La página index ahora se verá de la siguiente manera:

Luego editamos nuestra pagina new.html.erb

< div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner" >
< h1>New Post
< /div>

< div data-role="content" class="rounded-content" >
<%= render 'form' %>
< /div >

Ahora podemos darle click al botón +Add y veremos que la pagina se mostrará de la siguiente manera:

Ahora editamos el archivo show.html.erb

< div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner" >

< h1><%= @post.title %>

< %= link_to 'Home', posts_url, "data-icon" => "home", "class" => "ui-btn-right" % >

< /div>

< div data-role="content" class="rounded-content" >

<%= @post.body % >

< /div >

Y luego de crear un post lo veremos de la siguiente manera:

Ahora para la actualización de paginas editamos el archivo "edit.html.erb", el cual quedará d ela siguiente manera:

< div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner" >

< h1>Editing Post

<%= link_to 'Delete', @post, :method => :delete, "data-icon" => "delete", "class" => "ui-btn-right" %>

< /div >

< div data-role="content" class="rounded-content" >

<%= render 'form' %>

< /div >

Ahora veremos la página de la siguiente manera:

Como se habrán dado cuenta los archivos edit.html.erb, new.html.erb y show.html.erb tienen una clase llamada "rounded-content" en el div contenedor del contenido principal de las páginas.

Esta es una clase que yo he definido para contener los contenidos y para que puede ser legible con el fondo que usaremos.

agregue estilos a el archivo app/assets/stylesheets/posts.css.scss, de la siguiente manera:

.ui-page {
background: url(/assets/background.png) repeat center 0 #dfdfdf;
}

.ui-content.rounded-content {
background: #fff;
margin: 30px 20px 15px 20px;
-moz-border-radius: 0.6em 0.6em 0.6em 0.6em;
-webkit-border-radius: 0.6em;
border-radius: 0.6em;
}

Ahora las paginas se verán de la siguiente manera, en los cuales obervamos un contender de fondo con bordes redondeado blanco y un background tipo cesped:

Index