Ruby on Rails - Visualizações
Um Rails View é um programa ERb que compartilha dados com controladores por meio de variáveis mutuamente acessíveis.
Se você olhar no diretório app / views do aplicativo de biblioteca, verá um subdiretório para cada um dos controladores que criamos: book. Cada um desses subdiretórios foi criado automaticamente quando o controlador com o mesmo nome foi criado com o script de geração.
O Rails informa que você precisa criar o arquivo de visualização para cada novo método. Cada método que você define no controlador precisa ter um correspondenteerb arquivo, com o mesmo nome do método, para exibir os dados que o método está coletando.
Então, vamos criar arquivos de visão para todos os métodos que definimos no book_controller.rb. Ao executar essas visualizações, verifique simultaneamente se essas ações são aplicáveis ou não ao banco de dados.
Criando Arquivo de Visualização para Método de Lista
Crie um arquivo chamado list.html.erbusando seu editor de texto favorito e salve-o em app / views / book. Depois de criar e salvar o arquivo, atualize seu navegador da web. Você deve ver uma página em branco; se não o fizer, verifique a ortografia do seu arquivo e certifique-se de que é exatamente igual ao método do seu controlador.
Agora, exiba o conteúdo real. Vamos colocar o seguinte código em list.html.erb.
<% if @books.blank? %>
<p>There are not any books currently in the system.</p>
<% else %>
<p>These are the current books in our system</p>
<ul id = "books">
<% @books.each do |c| %>
<li><%= link_to c.title, {:action => 'show', :id => c.id} -%></li>
<% end %>
</ul>
<% end %>
<p><%= link_to "Add new Book", {:action => 'new' }%></p>O código a ser executado é para verificar se o array @books contém algum objeto. o.blank?o método retorna verdadeiro se a matriz está vazia e falso se contém algum objeto. Este objeto @books foi criado no controlador dentro do método list.
O código entre as tags <% =%> é um link_tochamada de método. O primeiro parâmetro de link_to é o texto a ser exibido entre as tags <a>. O segundo parâmetro é a ação chamada quando o link é clicado. Nesse caso, é o método show. O parâmetro final é o id do livro que é passado por meio do objeto params.
Agora, tente atualizar seu navegador e você deverá obter a tela a seguir, porque não temos nenhum livro em nossa biblioteca.
Criando arquivo de visualização para o novo método
Até agora, não temos nenhum livro em nossa biblioteca. Temos que criar alguns livros no sistema. Então, vamos projetar uma visão correspondente aonew método definido no book_controller.rb.
Crie um arquivo chamado new.html.erb usando seu editor de texto favorito e salve-o em app / views / book. Adicione o seguinte código ao arquivo new.html.erb.
<h1>Add new book</h1>
<%= form_tag :action => 'create' do %>
<p><label for = "book_title">Title</label>:
<%= text_field 'books', 'title' %></p>
<p><label for = "book_price">Price</label>:
<%= text_field 'books', 'price' %></p>
<p><label for = "book_subject_id">Subject</label>:
<%= collection_select(:books, :subject_id, @subjects, :id, :name, prompt: true) %></p>
<p><label for = "book_description">Description</label><br/>
<%= text_area 'books', 'description' %></p>
<%= submit_tag "Create" %>
<% end -%>
<%= link_to 'Back', {:action => 'list'} %>Aqui form_tagmétodo interpreta o código Ruby em uma tag HTML <form> regular usando todas as informações fornecidas a ele. Esta tag, por exemplo, produz o seguinte HTML -
<form action = "/book/create" method = "post">O próximo método é text_fieldque produz um campo de texto <input>. Os parâmetros para text_field são o nome do objeto e do campo. Nesse caso, o objeto é o livro e o nome é o título .
Método Rails chamado collection_select, cria um menu de seleção HTML construído a partir de um array, como @books. Existem cinco parâmetros, que são os seguintes -
:book- O objeto que você está manipulando. Nesse caso, é um objeto de livro.
:subject_id - O campo que é preenchido quando o livro é salvo.
@books - A matriz com a qual você está trabalhando.
:id- O valor armazenado no banco de dados. Em termos de HTML, este é o parâmetro de valor da tag <option>.
:name- A saída que o usuário vê no menu suspenso. Este é o valor entre as tags <option>.
O próximo usado é submit_tag, que produz um botão <input> que envia o formulário. Finalmente, existe oend método que simplesmente se traduz em </form>.
Vá para o seu navegador e visite http://localhost:3000/book/new. Isso lhe dará a seguinte tela.
Insira alguns dados neste formulário e clique no botão Criar. Aqui, adicionei os seguintes detalhes aos campos -
Title: Advance Physics
Price: 390
Subject: Physics
Description: This is test to create new bookQuando você clica no Create botão, ele irá chamar o create método, que não precisa de nenhuma visualização porque este método está usando list ou newmétodos para visualizar os resultados. Portanto, quando você clica no botão Criar, os dados devem ser enviados com sucesso e redirecioná-lo para a página da lista, na qual agora você tem um único item listado como segue -
Se você clicar no link, verá outro erro de modelo ausente, já que ainda não criou o arquivo de modelo para o método show.
Criando arquivo de visualização para método show
Este método exibirá os detalhes completos sobre qualquer livro disponível na biblioteca. Crie um arquivo show.html.erb em app / views / book e preencha-o com o seguinte código -
<h1><%= @book.title %></h1>
<p>
<strong>Price: </strong> $<%= @book.price %><br />
<strong>Subject :</strong> <%= @book.subject.name %><br />
<strong>Created Date:</strong> <%= @book.created_at %><br />
</p>
<p><%= @book.description %></p>
<hr />
<%= link_to 'Back', {:action => 'list'} %>Esta é a primeira vez que você aproveita todas as vantagens das associações, que permitem extrair facilmente dados de objetos relacionados.
O formato usado é @variable.relatedObject.column. Neste caso, você pode obter o valor do nome do assunto por meio da variável @book usando obelongs_toassociações. Se clicar em qualquer registro listado, a tela a seguir será exibida.
Criando arquivo de visualização para método de edição
Crie um novo arquivo chamado edit.html.erb e salve-o em app / views / book. Preencha-o com o seguinte código -
<h1>Edit Book Detail</h1>
<%= form_for @book, :url =>{:action => "update", :id =>@book} do |f| %>
<p>Title: <%= f.text_field 'title' %></p>
<p>Price: <%= f.text_field 'price' %></p>
<p>Subject: <%= f.collection_select :subject_id, Subject.all, :id, :name %></p>
<p>Description<br/>
<%= f.text_area 'description' %></p>
<%= f.submit "Save changes" %>
<% end %>
<%= link_to 'Back', {:action => 'list' } %>Este código é muito semelhante ao new método exceto ação a ser atualizado em vez de criar e definir um id.
Neste cenário, usamos form_fortag para a ação do formulário. Terá um desempenho melhor do queform_tag. Porque, porque criará interação com o modelo facilmente. Portanto, é melhor usar a tag form_for sempre que precisar de interação entre o modelo e os campos do formulário.
Neste ponto, precisamos de algumas modificações no list method'svisualizar arquivo. Vá para o elemento <li> </li> e modifique-o para se parecer com o seguinte -
<li>
<%= link_to c.title, {:action => "show", :id => c.id} -%>
<b> <%= link_to 'Edit', {:action => "edit",
:id => c.id} %></b>
</li>Agora, tente navegar pelos livros usando o http://localhost:3000/book/list. Ele lhe dará a lista de todos os livros junto com Editopção. Ao clicar na opção Editar, você terá a próxima tela da seguinte maneira -
Agora, você edita essas informações e clica no botão Salvar alterações . Isso resultará em uma chamada paraupdatedisponível no arquivo do controlador e atualizará todos os atributos alterados. Observe que oupdate método não precisa de nenhum arquivo de visualização porque está usando show ou edit métodos para mostrar seus resultados.
Criação de arquivo de visualização para método de exclusão
Remover informações de um banco de dados usando Ruby on Rails é quase fácil demais. Você não precisa escrever nenhum código de visualização para o método delete porque este método está usandolistmétodo para exibir o resultado. Portanto, vamos apenas modificar list.html.erb novamente e adicionar um link de exclusão.
Vá para o elemento <li> </li> e modifique-o para se parecer com o seguinte -
<li>
<%= link_to c.title, {:action => 'show', :id => c.id} -%>
<b> <%= link_to 'Edit', {:action => 'edit', :id => c.id} %></b>
<b> <%= link_to "Delete", {:action => 'delete', :id => c.id},
:confirm => "Are you sure you want to delete this item?" %></b>
</li>o :confirmparâmetro apresenta uma caixa de confirmação de JavaScript perguntando se você realmente deseja executar a ação. Se o usuário clicar em OK, a ação prossegue e o item é excluído.
Agora, tente navegar nos livros usando http://localhost:3000/book/list. Ele lhe dará uma lista de todos os livros junto com Edit e Delete opções da seguinte forma -
Agora, usando a opção Excluir, você pode excluir qualquer registro listado.
Criando arquivo de visualização para o método show_subjects
Crie um novo arquivo, show_subjects.html.erb, no diretório app / views / book e adicione o seguinte código a ele -
<h1><%= @subject.name -%></h1>
<ul>
<% @subject.books.each do |c| %>
<li><%= link_to c.title, :action => "show", :id => c.id -%></li>
<% end %>
</ul>Você está aproveitando as associações ao iterar as várias listagens de livros de um único assunto.
Agora modifique a linha Assunto: de show.html.erb para que a lista de assuntos mostre um link.
<strong>Subject: </strong> <%= link_to @book.subject.name,
:action => "show_subjects", :id => @book.subject.id %><br />Isso produzirá uma lista de assuntos na página de índice, para que os usuários possam acessá-los diretamente.
Modificar list.html.erb para adicionar o seguinte ao topo do arquivo -
<ul id = "subjects">
<% Subject.find(:all).each do |c| %>
<li><%= link_to c.name, :action => "show_subjects", :id => c.id %></li>
<% end %>
</ul>Agora tente navegar nos livros usando http: // localhost: 3000 / book / list. Ele exibirá todos os assuntos com links para que você possa navegar por todos os livros relacionados a esse assunto.
O que vem a seguir?
Espero que agora você esteja se sentindo confortável com todas as operações do Rails.
O próximo capítulo explica como usar Layoutspara colocar seus dados de uma maneira melhor. Mostraremos como usar CSS em seus aplicativos Rails.