(cache) ページ内にウィンドウを表示してみる。

2007-03-02

■[Ruby on Rails]ページ内にウィンドウを表示してみる。

Spinelz(スピネルズ)というJavaScriptのライブラリがある。これを使うとタブやメニューバー等々のインターフェースが簡単に実現できるようだ。デモページで試してみると、とっても楽しい！Railsで開発するアプリケーションにも是非、取り入れてみたい。機能の一つにブラウザのページ内にウィンドウを表示する機能があるので、それを試してみた。

インストール

ダウンロードして解凍したspinelz/srcフォルダの中身を、publicフォルダのimages、javascripts、stylesheets以下にそれぞれコピーした。

spinelz_0.4.1.zipを解凍したフォルダ

spinelz/
  |-- src/
        |-- images/
        |     |-- spinelz/
        |
        |-- javascripts/
        |     |-- spinelz/
        |     |-- spinelz_lib/
        |
        |-- stylesheets/
              |-- spinelz/

上記フォルダ構成のオレンジ色の部分をpublicフォルダにコピーした。以下のような構成になった。

インストール後のpublicフォルダ

RAILS_ROOT/
  |-- public/
        |-- images/
        |     |-- spinelz/
        |     |-- rails.png
        |
        |-- javascripts
        |     |-- spinelz/
        |     |-- spinelz_lib/
        |     |-- application.js
        |     |-- controls.js
        |     |-- dragdrop.js
        |     |-- effects.js
        |     |-- prototype.js
        |
        |-- stylesheets
              |-- spinelz/
              |-- scaffold.css

javaスクリプトとスタイルシートの取り込み

javascript_include_tagで利用したいjavaスクリプトを指定した。（関連が分からないので、spinelz_libフォルダの全てと、spinelzフォルダのwindowを含むファイル名のjavaスクリプトを、全て取り込んでしまった。）
同じようにスタイルシートも取り込む。とりあえずwindowを含むファイル名のスタイルシート一つだけ。

app/views/layouts/softwares.rhtml

<html>
<head>
  <title>Softwares: <%= controller.action_name %></title>
  <%= javascript_include_tag "spinelz_lib/builder" %>
  <%= javascript_include_tag "spinelz_lib/controls" %>
  <%= javascript_include_tag "spinelz_lib/dragdrop" %>
  <%= javascript_include_tag "spinelz_lib/effects" %>
  <%= javascript_include_tag "spinelz_lib/json.js" %>
  <%= javascript_include_tag "spinelz_lib/prototype" %>
  <%= javascript_include_tag "spinelz_lib/resize" %>
  <%= javascript_include_tag "spinelz_lib/scriptaculous" %>
  <%= javascript_include_tag "spinelz_lib/slider" %>
  <%= javascript_include_tag "spinelz_lib/spinelz_util" %>
  <%= javascript_include_tag "spinelz_lib/unittest" %>
  <%= javascript_include_tag "spinelz/window" %>
  <%= javascript_include_tag "spinelz/window_resizeEx" %>
  <%= stylesheet_link_tag "spinelz/window" %>

  <%= stylesheet_link_tag 'scaffold' %>
</head>
...（以下省略）...

ウィンドウを表示するビューの設定

前回の画像ファイルをアップロードして表示するテストプロジェクトに、ウィンドウ表示の機能を追加してみた。

app/views/softwares/_show_window.rhtml

Spinelzデモのソースを参考に、ウィンドウ表示用のパーシャルファイルを作成した。このファイルがウィンドウを表示するコードになる。
divで階層化されているのと、ちょっとしたjavaスクリプトが含まれているだけで、構成はとても単純だ。
コードの中で、以下のidが一致しないとウィンドウが表示されない。
- ＜div id="window<%= @software.id %>"＞
- new Window("window<%= @software.id %>",{width:800, height: 600,modal:false});
ウィンドウを複数開く必要が無ければ、以下のようにidを固定してしまってOK。
- ＜div id="window"＞
- new Window("window",{width:800, height: 600,modal:false});

<div id="window<%= @software.id %>">
  <div>
    <%# ウィンドウのタイトル %>
    <%= url_for_file_column(@software, :image) %>
  </div>
  <div>
    <%# ウィンドウの中身 %>
    <% for column in Software.content_columns %>
    <p>
      <b><%= column.human_name %>:</b> <%#=h @software.send(column.name) %>
      <%= image_tag url_for_image_column(@software, "image", :large) %>
    </p>
    <% end %>

    <%= link_to 'Edit', :action => 'edit', :id => @software %> |
    <%= link_to 'Back', :action => 'list' %>
  </div>
</div>

<script type="text/javascript">
    normal_win = new Window("window<%= @software.id %>",{width:800, height: 600,modal:false});
    normal_win.open();
    normal_win.center();
</script>

app/views/softwares/list.rhtml

Showリンクをクリックすると、ink_to_remoteで更新して、ウィンドウを表示するようにしてみた。
リストも表示されているので、次々と選択して内容を確認することが出来る。

<h1>Listing softwares</h1>
<div id="update_window">
  <%# ここにウィンドウが追記される %>
</div>
...（途中省略）...
   <td><%= link_to_remote 'Show', 
                           :update => "update_window", 
                           :url => {:action => 'show_window', 
                                    :id => software} %></td>
...（途中省略）...

app/controllers/softwares_controller.rb

link_to_remoteで呼び出されるコントローラー。showメソッドにrender :partial => 'show_window'を追記した。

class SoftwaresController < ApplicationController
...（途中省略）...
  def show_window
    @software = Software.find(params[:id])
    render :partial => 'show_window'
  end
...（途中省略）...