Desarrollando con RoR - Vistas

Vistas en Rails 3.0
Desarrollando en Ruby On Rails

Mario Alberto Chávez Cárdenas
http://www.decisionesinteligentes.com
@mario_chavez

sábado 28 de agosto de 2010

¿Quien soy?


¿Quien soy?
De Tijuana, Baja
California


¿Quien soy?
De Tijuana, Baja
California
Ingeniero en Sistemas
Computacionales


¿Quien soy?
De Tijuana, Baja
California
Computacionales
Consultor
Independiente TI en
decisionesinteligentes.com


¿Quien soy?
De Tijuana, Baja
California
Computacionales
Consultor
Independiente TI en
decisionesinteligentes.com
Entre a Rails hace 2
años


¿Quien soy?
Iniciador de la
comunidad tijuana.rb


¿Quien soy?
Iniciador de la
Google groups
tijuanarb y @tijuanarb


¿Quien soy?
Iniciador de la
Google groups
Iniciador de los
SHDHTJ en Tijuana


¿Quien soy?
Iniciador de la
Google groups
Iniciador de los
SHDHTJ en Tijuana
Blog http://mario-
chavez.blogspot.com


MVC


MVC
Servidor web
Navegador Ruteo
Ejecución

Controlador

Vista Modelo


MVC
Servidor web
Navegador Ruteo
Ejecución

Vista
Controlador

Modelo


Vistas


Vistas
Son la UI de nuestra
aplicación


Vistas
aplicación

Rails utiliza ERB


Vistas
aplicación

Rails utiliza ERB

Son una mezcla de
HTML y Ruby


Vistas
aplicación

Rails utiliza ERB

Son una mezcla de
HTML y Ruby

Son plantillas


Vistas
aplicación

Rails utiliza ERB

Son una mezcla de
HTML y Ruby

Son plantillas

<%= “Hola mundo” %>


Relación VC


Relación VC
Acciones en un
controlador


Relación VC
Acciones en un
Vistas
controlador
index index.html.erb
show show.html.erb
new new.html.erb
create
edit edit.html.erb
update
destroy


Estructura


Estructura
Las vistas están en el
directorio views


Estructura
directorio views
Hay un directorio con
el nombre de cada
controlador


Estructura
directorio views
el nombre de cada
controlador
Layout contiene
plantillas de estructura


Estructura
directorio views
el nombre de cada
controlador
Layout contiene
plantillas de estructura
Shared contiene
plantillas compartidas


Layouts


Layouts
Html de la estructura
compartida de la
aplicación


Layouts
Html de la estructura
compartida de la
aplicación

<html>
<head />
<body>
<div id=”header”> ... </div>
<div id=”content”>
<%= yield %>
</div>
<div id=”sidebar”>
<%= yield :sidebar %>
</div>
<div id=”footer”> ... </div>
</body>
</html>


Configurar layout


Configurar layout
A nivel aplicación
class ApplicationController <
ActionController::Base
layout ‘main’
end


Configurar layout
A nivel aplicación
layout ‘main’
end

A nivel controlador
class PublicationsControler <
ApplicationController
layout ‘main’
end


Configurar layout
A nivel aplicación
layout ‘main’
end

A nivel controlador
layout ‘main’
end

A nivel controlador
condicional
layout ‘main’, :except => [:new]
end


Trabajar con vistas


Trabajar con vistas
Html y Ruby
conforman el
contenido de la vista


Trabajar con vistas
Html y Ruby
conforman el
contenido de la vista
<div id="publication">
<div class="publidate">
<h4><span><%=@publication.created_at.day%></
span> <%=@publication.created_at.strftime
('%b').downcase!%></h4>
</div>
<div class="publititle">
<h3><%= @publication.title %></h3>
<p>por: <%= @publication.user.display_name
%></p>
</div>
<div class="publitype">
<%=image_tag get_category_image
(@publication), :alt => get_category_name(@publication)
%>
</div>
<div class="publicontent">
<p><%= @publication.body %></p>
</div>
</div>


Trabajar con vistas
Layout
<html>
<head />
<body>
<div id=”header”> ... </div>
<div id=”content”>
<%= yield %>
</div>
<div id=”sidebar”>
<%= yield :sidebar %>
</div>
<div id=”footer”> ... </div>
</body>
</html>


Trabajar con vistas
Layout
<html>
Vista (show)
<head />
<body> <div>
<div id=”header”> ... </div> <h1>Contenido principal</h1>
<div id=”content”> <div> ... </div>
<%= yield %> </div>
</div>
<div id=”sidebar”> <% content_for :sidebar %>
<%= yield :sidebar %> <h2>Contenido del sidebar</h2>
</div> <div> ... </div>
<div id=”footer”> ... </div> <% end %>
</body>
</html>


Render de vistas


Render de vistas
Render implícito
def show
@publication = Publication.find
(params[:id])
respond_with @publication
end


Render de vistas
Render implícito
def show
(params[:id])
end

Render explícito
def show
(params[:id])
render :show, :layout => ‘coolone’
end


Render de vistas
Render implícito
def show
(params[:id])
end

Render explícito
def show
(params[:id])
render :show, :layout => ‘coolone’
end

Redireccionar a acción
def create
@publication = ...
if @publication.save
redirect_to publications_path
else
render :new
end
end


Simplificar vistas


Simplificar vistas
Vistas grande y complejas
se pueden “romper en
pedazos”


Simplificar vistas
pedazos”
Parciales privados o
compartidos


Simplificar vistas
pedazos”
compartidos
<div class="publidate">
<h4><span><%=@publication.created_at.day%></span> <
%=@publication.created_at.strftime('%b').downcase!%></h4>
</div>
<div class="publititle">
<h3><%= @publication.title %></h3>
<p>por: <%= @publication.user.display_name %></p>
</div>
<div class="publitype">
<%=image_tag get_category_image(@publication), :alt
=> get_category_name(@publication) %>
</div>
<div class="publicontent">
<p><%= @publication.body %></p>
</div>
</div>


Simplificar vistas
pedazos”
compartidos
<%= render “content” %>

<%= render “shared/attachments” %>
</div>

<div id=”comments”>
<%= render “comments” %>
</div>

<div id=”form”>
<%= render “add_comment” %>
</div>


Parciales


Parciales
A los parciales se les
antepone _ en el
nombre:
_menu.html.erb


Parciales
antepone _ en el
nombre:
_menu.html.erb
Rails puede inferir el
nombre del parcial


Parciales
antepone _ en el
nombre:
_menu.html.erb
nombre del parcial
Manejan su propio
alcance en las variables


Parciales
antepone _ en el
nombre:
_menu.html.erb
nombre del parcial
Manejan su propio
En colecciones no
tenemos que hacer .each


Parciales
Pasar variables
<%= render :partial => “menu”, :locals
=> { :myvar => @myvar } %> A los parciales se les
antepone _ en el
nombre:
_menu.html.erb
nombre del parcial
Manejan su propio
En colecciones no


Parciales
Pasar variables
antepone _ en el
Pasar un objeto nombre:
<%= render :partial => _menu.html.erb
“publication”, :object => @publication
%>
<%= render @publication %>
nombre del parcial
Manejan su propio
En colecciones no


Parciales
Pasar variables
antepone _ en el
Pasar un objeto nombre:
<%= render :partial => _menu.html.erb
“publication”, :object => @publication
%>
<%= render @publication %>
nombre del parcial
Pasar una colección Manejan su propio
<%= render :partial =>
“publications”, :collection =>
@publications, :as => :publication %>

<%= render
En colecciones no
@publications, :spacer_template =>
“publication_rule” %>


Helpers


Helpers
Métodos que
“escriben” HTML por
nosotros


Helpers
Métodos que
nosotros
Sintaxis de Ruby


Helpers
Métodos que
nosotros
Sintaxis de Ruby
Centrados en el uso de
modelos


Helpers
Métodos que
nosotros
Sintaxis de Ruby
modelos
Helpers genéricos _tag
y sin _tag para
modelos


Helpers
Métodos que
nosotros
Sintaxis de Ruby
modelos
y sin _tag para
modelos
Todos los helpers usan
safe code


Helpers
Métodos que
nosotros
Sintaxis de Ruby Form helpers
modelos
y sin _tag para
modelos
safe code


Helpers
Métodos que
nosotros
Centrados en el uso de Model helpers
modelos
y sin _tag para
modelos
safe code


Helpers
Métodos que
nosotros
modelos
Date and Time
Helpers genéricos _tag helpers
y sin _tag para
modelos
safe code


Helpers
Métodos que
nosotros
modelos
Date and Time
Helpers genéricos _tag helpers
y sin _tag para
modelos Custom helpers
safe code


Form helpers


Form helpers
<%= form_tag(search_path, :method =>
"get") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q) %>
<%= submit_tag("Search") %>
<% end %>


Form helpers
"get") do %>
<%= label_tag(:q, "Search for:") %>
<% end %>

<form action="/search" method="get">
<label for="q">Search for:</label>
<input id="q" name="q" type="text" />
<input name="commit" type="submit"
value="Search" />
</form>

Para obtener el valor del input “q” en
el controlador usamos params[:q]


Form helpers
"get") do %>
check_box>tag <%= label_tag(:q, "Search for:") %>
<% end %>

value="Search" />
</form>



Form helpers
"get") do %>
radio_button_tag <%= submit_tag("Search") %>
<% end %>

value="Search" />
</form>



Form helpers
"get") do %>
<% end %>
text_area_tag
value="Search" />
</form>



Form helpers
"get") do %>
<% end %>
text_area_tag
password_field_tag <label for="q">Search for:</label>
value="Search" />
</form>



Form helpers
"get") do %>
<% end %>
text_area_tag
hidden_field_tag <input name="commit" type="submit"
value="Search" />
</form>



Form helpers
"get") do %>
<% end %>
text_area_tag
hidden_field_tag <input name="commit" type="submit"
value="Search" />
</form>
select_tag


Model helpers


Model helpers
<%= form @publication do |f| %>
<%= f.label :message %>
<%= f.text_field :message %>
<%= f.submit("Crear") %>
<% end %>


Model helpers
<%= f.label :message %>
<% end %>

<form action="/publications"
method="post">
<label for="message">Message</label>
<input id="publication_message"
name="publication[name]" type="text" />
value="Crear" />
</form>

En el controlador obtenemos el objeto
con params[:publication]


Model helpers
check_box <%= f.label :message %>
<% end %>

method="post">
value="Crear" />
</form>



Model helpers
radio_button <% end %>

method="post">
value="Crear" />
</form>



Model helpers

text_area <form action="/publications"
method="post">
value="Crear" />
</form>



Model helpers

method="post">
password_field <label for="message">Message</label>
value="Crear" />
</form>



Model helpers

method="post">
hidden_field name="publication[name]" type="text" />
value="Crear" />
</form>



Model helpers

method="post">
hidden_field name="publication[name]" type="text" />
value="Crear" />
select </form>



Otros helpers


Otros helpers
Javascript
<%= javascript_include_tag
‘applications’, ‘tools’ %>

<%= javascript_include_tag :all %>

‘application’, ‘tools’, :cache => true
%>


Otros helpers
Javascript
‘applications’, ‘tools’ %>

<%= javascript_include_tag :all %>

%>

Stylesheet
<%= stylesheet_link_tag ‘application’,
‘admin’ %>

<%= stylesheet_link_tag :all %>

‘admin’, :cache => true %>


Otros helpers
Javascript
‘applications’, ‘tools’ %> Estos helpers esperan
<%= javascript_include_tag :all %> encontrar los archivos
en /public
%>

Stylesheet
‘admin’ %>



Image tag
<%= image_tag ‘header.png’ %>


Otros helpers
Javascript
en /public
%>
/javascripts
Stylesheet
‘admin’ %>



Image tag


Otros helpers
Javascript
en /public
%>
/javascripts
Stylesheet
‘admin’ %>
/stylesheets


Image tag


Otros helpers
Javascript
en /public
%>
/javascripts
Stylesheet
‘admin’ %>
/stylesheets
<%= stylesheet_link_tag :all %> /images

Image tag


Otros helpers
Javascript
en /public
%>
/javascripts
Stylesheet
‘admin’ %>
/stylesheets
<%= stylesheet_link_tag :all %> /images

Image tag Link to
<%= image_tag ‘header.png’ %> <%= link_to ‘Nuevo’,
new_publication_path %>


Ajax en el cliente


Ajax en el cliente
Es no obstructivo en
Rails 3.0


Ajax en el cliente
Rails 3.0
Es agnósticos, podemos
reemplazar prototype
por jquery


Ajax en el cliente
Rails 3.0
por jquery
Usa HTML5 para agregar
atributos


Ajax en el cliente
Rails 3.0
por jquery
atributos
No hay helpers
especiales


Ajax en el cliente
No ajax
<%= link_to ‘Mi link’, algun_path %> Es no obstructivo en
<% form_for @modelo do |m| %> Rails 3.0
por jquery
atributos
No hay helpers
especiales


Ajax en el cliente
No ajax
Con ajax Es agnósticos, podemos
<%= link_to ‘Mi link’,
algun_path, :remote => true %> reemplazar prototype
<% form_for (@modelo, :remote => true) por jquery
do |m| %>
atributos
No hay helpers
especiales


Ajax en el cliente
No ajax
do |m| %>
Atributos HTML5 atributos
No hay helpers
especiales


Ajax en el cliente
No ajax
do |m| %>
data-remote
No hay helpers
especiales


Ajax en el cliente
No ajax
do |m| %>
data-remote
No hay helpers
data-method especiales


Ajax en el cliente
No ajax
do |m| %>
data-remote
No hay helpers
data-confirm


Ajax en el cliente
No ajax
do |m| %>
data-remote
No hay helpers
data-confirm
data-disable-with


Ajax en el server


Ajax en el server
Si queremos jquery en lugar
de prototype


Ajax en el server
de prototype
Agregamos jquery a
javascripts


Ajax en el server
de prototype
Agregamos jquery a
javascripts
Borramos prototype


Ajax en el server
Si queremos jquery en lugar Agregamos la referencia
de prototype en javascript_include_tag
Agregamos jquery a
javascripts
Borramos prototype
Descargamos rails.js de
http://github.com/rails/
jquery-ujs/tree/master/
src/ a javascript


Ajax en el server
Agregamos jquery a Crear una vista
javascripts <accion>.js.erb
Borramos prototype
src/ a javascript


Ajax en el server
Borramos prototype Esta vista combina
javascript y Ruby
src/ a javascript


Ajax en el server
Borramos prototype Esta vista combina
javascript y Ruby
http://github.com/rails/ Por seguridad usamos
jquery-ujs/tree/master/ protect_from_forgery en
src/ a javascript ApplicationController


Recursos
http://edgeguides.rubyonrails.org
http://rubyonrails.org/screencasts/
rails3/
http://railscasts.com/
http://groups.google.com/group/
tijuanarb
http://rails.mx


Gracias
Desarrollando en Ruby On Rails

Mario Alberto Chávez Cárdenas
http://www.decisionesinteligentes.com
@mario_chavez


Desarrollando con RoR - Vistas

Recomendados

Recomendados

Más contenido relacionado

Último

Último (13)

Destacado

Destacado (20)

Desarrollando con RoR - Vistas