desarrollando con ror - vistas

Vistas en Rails 3.0Desarrollando en Ruby On Rails

Mario Alberto Chávez Cárdenashttp://www.decisionesinteligentes.com

@mario_chavez

sábado 28 de agosto de 2010

http://www.decisionesinteligentes.com


¿Quien soy?


¿Quien soy?De Tijuana, Baja California



Ingeniero en Sistemas Computacionales




Consultor Independiente TI en decisionesinteligentes.com




Consultor Independiente TI en decisionesinteligentes.com

Entre a Rails hace 2 años


¿Quien soy?


¿Quien soy?Iniciador de la comunidad tijuana.rb



Google groups tijuanarb y @tijuanarb




Iniciador de los SHDHTJ en Tijuana




Iniciador de los SHDHTJ en Tijuana

Blog http://mario-chavez.blogspot.com


MVC


MVCNavegador

Controlador

Modelo

Servidor webRuteo

Ejecución

Vista


Vistas


VistasSon la UI de nuestra aplicación



Rails utiliza ERB



Rails utiliza ERB

Son una mezcla de HTML y Ruby



Rails utiliza ERB


Son plantillas



Rails utiliza ERB


Son plantillas

<%= “Hola mundo” %>


Relación VC


Relación VCAcciones en un

controlador


Relación VC

index

show

new

create

edit

update

destroy

index.html.erb

show.html.erb

new.html.erb

edit.html.erb

Acciones en un controlador

Vistas


Estructura


EstructuraLas vistas están en el directorio views



Hay un directorio con el nombre de cada controlador




Layout contiene plantillas de estructura




Layout contiene plantillas de estructura

Shared contiene plantillas compartidas


Layouts


LayoutsHtml de la estructura compartida de la aplicación


LayoutsHtml 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 layoutA nivel aplicación

class ApplicationController < ActionController::Base layout ‘main’end




A nivel controladorclass PublicationsControler < ApplicationController layout ‘main’end




A nivel controladorclass PublicationsControler < ApplicationController layout ‘main’end

A nivel controlador condicional

class PublicationsControler < ApplicationController layout ‘main’, :except => [:new]end


Trabajar con vistas


Trabajar con vistasHtml y Ruby conforman el contenido de la vista


Trabajar con vistasHtml y Ruby conforman el contenido de la vista

<div id="publication"> <div class="publidate"> <h4><span><%[email protected]_at.day%></span> <%[email protected]_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 vistasLayout

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

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

<div> <h1>Contenido principal</h1> <div> ... </div></div>

<% content_for :sidebar %> <h2>Contenido del sidebar</h2> <div> ... </div><% end %>


Render de vistas


Render de vistasRender implícito

def show @publication = Publication.find(params[:id]) respond_with @publicationend




Render explícitodef show @publication = Publication.find(params[:id]) render :show, :layout => ‘coolone’end




Render explícitodef show @publication = Publication.find(params[:id]) render :show, :layout => ‘coolone’end

Redireccionar a accióndef create @publication = ... if @publication.save redirect_to publications_path else render :new endend


Simplificar vistas


Simplificar vistasVistas grande y complejas se pueden “romper en pedazos”



Parciales privados o compartidos




<div id="publication"> <div class="publidate"> <h4><span><%[email protected]_at.day%></span> <%[email protected]_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>


Parciales


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



Rails puede inferir el nombre del parcial




Manejan su propio alcance en las variables





En colecciones no tenemos que hacer .each






Pasar variables<%= render :partial => “menu”, :locals => { :myvar => @myvar } %>







Pasar un objeto<%= render :partial => “publication”, :object => @publication %>

<%= render @publication %>







Pasar un objeto<%= render :partial => “publication”, :object => @publication %>

<%= render @publication %>

Pasar una colección<%= render :partial => “publications”, :collection => @publications, :as => :publication %>

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


Helpers


HelpersMétodos que “escriben” HTML por nosotros



Sintaxis de Ruby



Sintaxis de Ruby

Centrados en el uso de modelos



Sintaxis de Ruby


Helpers genéricos _tag y sin _tag para modelos



Sintaxis de Ruby



Todos los helpers usan safe code



Sintaxis de Ruby




Form helpers



Sintaxis de Ruby




Form helpers

Model helpers



Sintaxis de Ruby




Form helpers

Model helpers

Date and Time helpers



Sintaxis de Ruby




Form helpers

Model helpers

Date and Time helpers

Custom helpers


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





check_box>tag





check_box>tag

radio_button_tag





check_box>tag

radio_button_tag

text_area_tag





check_box>tag

radio_button_tag

text_area_tag

password_field_tag





check_box>tag

radio_button_tag

text_area_tag

password_field_tag

hidden_field_tag





check_box>tag

radio_button_tag

text_area_tag

password_field_tag

hidden_field_tag

select_tag


Model helpers


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



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

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





check_box





check_box

radio_button





check_box

radio_button

text_area





check_box

radio_button

text_area

password_field





check_box

radio_button

text_area

password_field

hidden_field





check_box

radio_button

text_area

password_field

hidden_field

select


Otros helpers


Otros helpersJavascript

<%= javascript_include_tag ‘applications’, ‘tools’ %>

<%= javascript_include_tag :all %>

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


Otros helpersJavascript

<%= javascript_include_tag ‘applications’, ‘tools’ %>



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

<%= stylesheet_link_tag :all %>

<%= stylesheet_link_tag ‘application’, ‘admin’, :cache => true %>


Otros helpersEstos helpers esperan encontrar los archivos en /public

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






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



/javascripts










/javascripts

/stylesheets










/javascripts

/stylesheets

/images










/javascripts

/stylesheets

/images








Link to<%= link_to ‘Nuevo’, new_publication_path %>


Ajax en el cliente


Ajax en el clienteEs no obstructivo en Rails 3.0



Es agnósticos, podemos reemplazar prototype por jquery




Usa HTML5 para agregar atributos





No hay helpers especiales






No ajax<%= link_to ‘Mi link’, algun_path %>

<% form_for @modelo do |m| %>








Con ajax<%= link_to ‘Mi link’, algun_path, :remote => true %>

<% form_for (@modelo, :remote => true) do |m| %>










Atributos HTML5










Atributos HTML5data-remote










Atributos HTML5data-remotedata-method










Atributos HTML5data-remotedata-methoddata-confirm










Atributos HTML5data-remotedata-methoddata-confirmdata-disable-with


Ajax en el server


Ajax en el serverSi queremos jquery en lugar de prototype



Agregamos jquery a javascripts




Borramos prototype




Borramos prototype

Descargamos rails.js de http://github.com/rails/jquery-ujs/tree/master/src/ a javascript

Agregamos la referencia en javascript_include_tag


http://github.com/rails/jquery-ujs/tree/master/src/








Borramos prototype



Crear una vista <accion>.js.erb










Borramos prototype




Esta vista combina javascript y Ruby










Borramos prototype




Esta vista combina javascript y Ruby

Por seguridad usamos protect_from_forgery en ApplicationController








Recursoshttp://edgeguides.rubyonrails.org

http://rubyonrails.org/screencasts/rails3/

http://railscasts.com/

http://groups.google.com/group/tijuanarb

http://rails.mx


http://edgeguides.rubyonrails.org

http://edgeguides.rubyonrails.org





http://railscasts.com

http://railscasts.com





http://rails.mx

http://rails.mx

GraciasDesarrollando en Ruby On Rails

Mario Alberto Chávez Cárdenashttp://www.decisionesinteligentes.com

@mario_chavez




desarrollando con ror - vistas

Documents