Top > Ruby on Railsあれこれ > 1-8 複雑なメニューの画面

内容

1-8-0 事前準備

Eclipseプロジェクトの準備を行います。

Eclipseプロジェクトの準備

AptanaプラグインのRadRailsでEclipseプロジェクト"ror-supersample1-8"を作成します。
設定項目を以下のようにして作成しましょう。
ror-sample1-8_1.jpg

1-8-1 概要

 Railsでは、複数の構成要素で統合的に画面を作成できるレイアウトが使えます。本サンプルでは、レイアウトを用いてサイドメニューやヘッダ、フッタなどのついた画面の作成を行います。
■入力画面(index.html.erb)
ror-sample1-8_2.jpg

■入力表示画面(next.html.erb)
ror-sample1-8_3.jpg

参考サイト:優しいRailsの育て方

1-8-2 サンプルの説明

 このサンプルは、ユーザID、パスワード、氏名、年齢を入力し、サブミットボタンを押すと、入力した内容をそのまま画面表示するRailsアプリケーションです。

 次の図に示すようなヘッダ、フッタ、サイドメニュー(左)、サイドメニュー(右)を持った画面で構成され、2つの画面とも、この画面レイアウトが利用されます。

ror-sample1-8_4.jpg

■画面の遷移
ror-sample1-8_5.jpg

1-8-3 サンプルのポイント

 レイアウトは、複数のページで構成される要素を組み合わせて、1つのページとして容易に構成・管理できる機能を提供します。レイアウトの構成要素は次の通りです。

■レイアウトの構成要素

構成要素説明本サンプルのファイル
レイアウト対応付け定義ファイルどのレイアウトに対してどのコンテンツファイルを紐付けるかを記述したERBファイルindex.html.erb,next.html.erb
テンプレートファイルコンテンツファイルをどのように配置するかを定義するERBファイルtiles.html.erb
部分テンプレート画面を構成する部品となるERBファイル。共通画面部品となる。_header.html.erb, _footer.html.erb, _menu.html.erb, _info.html.erb, _entry.html.erb, _result.html.erb

部分テンプレートのファイル名は先頭に"_"が付きます。

1-8-4 サンプルの動かし方

サンプルはあらかじめ用意していないので、以降の項目を参照にして、自分で作成しなければいけません。作成した暁に、ブラウザかhttp://127.0.0.1:3000/tilesにアクセスしましょう(ポート番号"3000"は適宜、環境に応じて読み替えて下さい)。

上記のURLにより、TilesControllerクラスのindexメソッドを呼び出します。

1-8-5 ファイル構成

今回、作成、自動生成、もしくは変更するファイルを以下に示します。

ファイル名種別作成/自動生成/変更
tiles_controller.rbコントローラークラス作成
index.html.erbERB作成
next.html.erbERB作成
_header.html.erb部分テンプレートERB作成
_menu.html.erb部分テンプレートERB作成
_entry.html.erb部分テンプレートERB作成
_info.html.erb部分テンプレートERB作成
_footer.html.erb部分テンプレートERB作成
_result.html.erb部分テンプレートERB作成

すると、こんな感じになるはずです。
ror-sample1-8_6.jpg

1-8-6 サンプルの画面遷移と画面情報の入出力

未稿

1-8-7 設定ファイル

設定する必要はありません。

1-8-8 レイアウト定義に従って表示された入力画面

index.html.erbは、レイアウト対応付け定義ファイルです。各コンテンツファイル読み込まれて、ユーザID、パスワード、氏名、年齢を入力できる画面が表示されます。レイアウト定義は以下になります。

■レイアウト定義

入力画面(ror-supersample1-8\app\views\tiles\index.html.erb)
テンプレートファイルror-supersample1-8\app\views\layouts\tiles.html.erb
headerAror-supersample1-8\app\views\tiles\_header.html.erb
menuBror-supersample1-8\app\views\tiles\_menu.html.erb
mainCror-supersample1-8\app\views\tiles\result.html.erb
infoDror-supersample1-8\app\views\tiles\_info.html.erb
footerEror-supersample1-8\app\views\tiles\_footer.html.erb

ソースコードではtilesタグライブラリを利用し、レイアウト情報ファイルとコンテンツファイルの指定を行っています。<tiles:insert>タグでレイアウト情報を、<tiles:put>タグでコンテンツファイルを指定します。

"ror-supersample1-8\app\views\tiles\index.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
  4
  5
<%# テンプレートファイルのどの部位にどの部品をあてはめるか指定します%>
<% @header = "header" %>
<% @menu = "menu" %>
<% @main = "entry" %>
<% @info = "info" %>
<% @footer = "footer" %>

1-8-9 テンプレートファイル

tiles:insert>タグを用いて挿入されるレイアウト情報ファイルです。このテンプレート画面では、HTMLの<table>タグなどを用いて、レイアウトの定義を行っています。

"ror-supersample1-8\app\views\layouts\tiles.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tilesのサンプル</title>
</head>
<body>
<table cellspacing="2" cellpadding="3" border="0" width="100%">
  <tr>
    <td colspan="3">
      <%= render :partial=>@header %>
    </td>
  </tr>
  <tr>
    <td width="20%">
      <%= render :partial=>@menu %>
    </td>
    <td>
      <%= render :partial=>@main %>
    </td>
    <td width="30%">
      <%= render :partial=>@info %>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <%= render :partial=>@footer %>
    </td>
  </tr>
</table>
</body>
</html>

※部分テンプレート"render :partial"へ渡すパラメータ

  0
<%= render :partial=>'header' %>

となっていれば、"_header.html.erb"が使用されます。

1-8-10 ヘッダ画面(共通)(A:_header.html.erb)

 このアプリケーション画面のヘッダ部分に表示されるコンテンツファイルです。このコンテンツファイルの内容は、単純にタイトル文字だけを表示する簡単なものです。

"ror-supersample1-8\app\views\tiles\_header.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
<div style="background-color : aqua;">
  <h1>1-8のサンプル</h1>
</div>

1-8-11 サイドメニュー(左)画面(共通ERB)(B:_menu.html.erb)

 このサンプルの2つの画面のサイドメニュー(左)部分に表示されるコンテンツファイルです。このコンテンツファイルの内容は、リスト形式でメニューを表示するHTMLとなっています。

"ror-supersample1-8\app\views\tiles\_menu.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
  4
  5
  6
<ul>
<li><s:link href="#">menu1</s:link></li>
<li><s:link href="#">menu2</s:link></li>
<li><s:link href="#">menu3</s:link></li>
<li><s:link href="#">menu4</s:link></li>
<li><s:link href="#">menu5</s:link></li>
</ul>

1-8-12 サイドメニュー(右)画面(共通ERB)(C:_info.html.erb)

 このアプリケーション画面のサイドメニュー(右)部分に表示されるコンテンツファイルです。このコンテンツファイルの内容は、Railsのバージョンを表示するだけです。

"ror-supersample1-8\app\views\tiles\_info.html.erb"ファイルを以下の内容で作成します。

  0
Railsのバージョンは<%= RAILS_GEM_VERSION %>

1-8-13 フッタ画面(共通ERB)(D:footer.html.erb)

このアプリケーション画面のフッタ部分に表示されるコンテンツファイルです。このコンテンツファイルの内容は、コピーライトを示す単純なHTMLになっています。

"ror-supersample1-8\app\views\tiles\_footer.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
<hr>
<div style="text-align:center;background-color:aqua;">
Copyright (C) Taipei-MaoMao 2008
</div>

1-8-14 入力画面部品(_entry.html.erb)

入力画面(index.html.erb)の中央、論理名"main"の画面部分に表示されるコンテンツファイルです。上のA〜Dのコンテンツファイルとは異なり、入力画面だけで利用されます。 text_field_tagを4つ利用し、userid、password、name、ageという名前のテキストボックスを表示し、データを入力させるようにします。

"ror-supersample1-8\app\views\tiles\_entry.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
  4
  5
  6
<% form_tag :action => 'submit' do %>
  ユーザID<%= text_field_tag 'userid' %><br>
  パスワード<%= text_field_tag 'password' %><br>
  氏名<%= text_field_tag 'name' %><br>
  年齢<%= text_field_tag 'age' %><br>
  <%= submit_tag "登録" %>
<% end %>

1-8-15 入力内容を格納する

Railsにアクションフォームはありません。

1-8-16 結果画面を表示する(TilesController)

"ror-supersample1-8\app\controllers\tiles_controller.rb"を以下の内容で作成します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
class TilesController < ApplicationController
  
  #1) レイアウトファイルを明示的に指定します。
  layout "layouts/tiles"
  
  # 入力画面表示のアクションメソッド
  def index
    render :action => 'entry.html.erb'
  end
  
  # 入力表示画面表示のアクションメソッド
  def submit
    render :action => 'result.html.erb'
  end
  
end

1)レイアウトファイルを指定します。
StrutsのTilesと違い、使用するテンプレートはコントローラークラスで指定します。ちなみに、ここでは明示的に指定していますが、"app/views/layouts/(コントローラ名).html.erb"というファイル配置になっていれば、自動的にテンプレートが割り当てられるので明示的に指定する必要はありません。試しに、

  0
layout "layouts/tiles"

をコメントオフしても動作することを確認してみましょう。

1-8-17 入力表示画面(next.html.erb)

next.html.erbは、入力された情報を表示する設定、他の部品の表示設定を行っているレイアウト対応付けファイルです。これは、入力したデータの出力時のみに使用されます。

■レイアウト定義

入力画面(next.html.erb)
テンプレートファイルror-supersample1-8\app\views\layouts\tiles.html.erb
headerAror-supersample1-8\app\views\tiles\_header.html.erb
menuBror-supersample1-8\app\views\tiles\_menu.html.erb
mainCror-supersample1-8\app\views\tiles\_result.html.erb
infoDror-supersample1-8\app\views\tiles\_info.html.erb
footerEror-supersample1-8\app\views\tiles\_footer.html.erb

"ror-supersample1-8\app\views\tiles\next.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
  4
  5
<%# テンプレートファイルのどの部位にどの部品をあてはめるか指定します%>
<% @header = "header" %>
<% @menu = "menu" %>
<% @main = "result" %>
<% @info = "info" %>
<% @footer = "footer" %>

1-8-18 入力表示画面(_result.html.erb)

 入力表示画面の論理名"main"の画面表示に表示されるコンテンツファイルです。

"ror-supersample1-8\app\views\tiles\_result.html.erb"ファイルを以下の内容で作成します。

  0
  1
  2
  3
ユーザID:<%=h params["userid"]%><br>
パスワード:<%=h params["password"]%><br>
氏名:<%=h params["name"]%><br>
年齢:<%=h params["age"]%><br>

添付ファイル: fileror-sample1-8_6.jpg 397件 [詳細] fileror-sample1-8_5.jpg 368件 [詳細] fileror-sample1-8_4.jpg 377件 [詳細] fileror-sample1-8_3.jpg 378件 [詳細] fileror-sample1-8_2.jpg 421件 [詳細] fileror-sample1-8_1.jpg 395件 [詳細]

リロード   新規 編集 凍結解除 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2012-08-08 (水) 23:25:33 (3085d)