Create  Edit  Diff  FrontPage  Index  Search  Changes  History  Source  RSS  Note  wikifarm  Login

日程調整アプリを拡張しよう-2-

今回分拡張済みのサンプル:adjuster.zip

rails-widgetsを使いタブメニュー化する

日程調整アプリをつくろう-8-終了時点のコードに対して拡張を行っています。

拡張内容

今の日程調整アプリは、実際の日程調整画面までの画面遷移が多く不便です。

そこで、メニューをタブ化し、各イベントの日程調整画面へのリンクをメニューに表示することにします。

rails-widgetsというプラグインのタブナビゲーション化する機能を使ってみましょう。

手順

手順を、以下に示します。

  1. rails-widgetsプラグインをインストール
  2. タブ用のviewを生成する
  3. タブ化するコードをレイアウトに記述
  4. タブの修正
  5. タブに各日程調整画面へのリンクを追加する

rails-widgetsプラグインをインストール

InstantRailsのメニューから”Rails Applications→Open Ruby Console Window”と選択、クリックします。

ir105.gif

adjusterプロジェクトのディレクトリに移動して、”ruby script/plugin install http://rails-widgets.googlecode.com/svn/widgets”と入力して実行します。

vendor/pluginsにインストールされます。

ex02-001.gif

タブ用のviewを生成する

"ruby script/generate tabnav main"と入力して実行します。

ex02-002.gif

タブ化するコードをレイアウトに記述

app/views/layouts/application.rhtmlに以下のように記述します。

ex02-003.gif

と、流れと関係ありませんが、日本語化を忘れた部分を直しておきます。app/views/layouts/application.rhtmlです。

ex02-008.gif

確認してみましょう。

ex02-004.gif

タブ化されましたね。しかし、スケジュールや日程調整をクリックするとエラーとなってしまいます。これは、タブ化のメソッド中でコントローラをeachして、コントローラ名からタブ化を行っているからです。スケジュールや日程調整はイベントIDがないといけません。

ex02-005.gif

タブの修正

修正していきます。まずはメニュー、ユーザ、イベントから。app/views/widgets/_main_tabnav.rhtmlを以下のように修正します。なお、日本語化もついでに行っています。

ex02-006.gif

確認してみましょう。

ex02-007.gif
  1. タブに各日程調整画面へのリンクを追加する

日程調整画面へのリンクをタブに追加していきます。最新から3件表示することにしましょう。まずはapp/models/event.rbに以下の記述し、3件取得するメソッドを追加します。

ex02-009.gif

app/views/widgets/_main_tabnav.rhtmlに以下のように記述します。3件取得したイベントをeachで回し、タブを作成しています。なお、日本語化も行っていますので、適宜翻訳を行って下さい。Monthの所だけです。

ex02-010.gif

確認してみましょう。OKですね。

ex02-011.gif

メニューにも各日程調整画面へのリンクを表示する

せっかくなので、メニュー画面にも各日程調整画面へのリンクを表示しましょう。 app/views/menu/index.rhtmlに以下のように追加します。

ex02-012.gif

確認してみます。OKですね。

ex02-013.gif

終了

お疲れ様でした。

目次

Last modified:2008/07/29 16:52:41
Keyword(s):
References:[日程調整アプリを作ろう]