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?

¿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
Controlador
Vista Modelo

MVC
Servidor web
Navegador Ruteo
Ejecución
Controlador
Vista Modelo

MVC
Servidor web
Navegador Ruteo
Ejecución
Controlador
Vista Modelo

MVC
Servidor web
Navegador Ruteo
Ejecución
Controlador
Vista Modelo

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

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

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

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 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

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
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

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Desarrollando Con RoR - Vistas

Diunggah oleh

Hak Cipta:

Format Tersedia

Vistas en Rails 3.

Mario Alberto Chávez Cárdenas

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

Rails utiliza ERB

sábado 28 de agosto de 2010

Rails utiliza ERB

Son una mezcla de

sábado 28 de agosto de 2010

Rails utiliza ERB

Son una mezcla de

sábado 28 de agosto de 2010

Rails utiliza ERB

Son una mezcla de

<%= “Hola mundo” %>

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010

sábado 28 de agosto de 2010