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

Rails' Wiki - AdjusterExtension-0002 Diff

  • Added parts are displayed like this.
  • Deleted parts are displayed like this.

{{toc}}
'''今回分拡張済みのサンプル:{{attach_anchor(adjuster.zip}}'''
!rails-widgetsを使いタブメニュー化する
日程調整アプリをつくろう-8-終了時点のコードに対して拡張を行っています。
!!拡張内容
今の日程調整アプリは、実際の日程調整画面までの画面遷移が多く不便です。

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

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

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

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

!!rails-widgetsプラグインをインストール
InstantRailsのメニューから”Rails Applications→Open Ruby Console Window”と選択、クリックします。

{{attach_view(ir105.gif,AdjusterTutorial-0004)}}


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

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


{{attach_view(ex02-001.gif)}}


!!タブ用のviewを生成する
"ruby script/generate tabnav main"と入力して実行します。


{{attach_view(ex02-002.gif)}}


!!タブ化するコードをレイアウトに記述
app/views/layouts/application.rhtmlに以下のように記述します。


{{attach_view(ex02-003.gif)}}


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


{{attach_view(ex02-008.gif)}}


確認してみましょう。

{{attach_view(ex02-004.gif)}}


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

{{attach_view(ex02-005.gif)}}


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

{{attach_view(ex02-006.gif)}}


確認してみましょう。


{{attach_view(ex02-007.gif)}}


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

{{attach_view(ex02-009.gif)}}


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


{{attach_view(ex02-010.gif)}}


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


{{attach_view(ex02-011.gif)}}


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


{{attach_view(ex02-012.gif)}}


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


{{attach_view(ex02-013.gif)}}


!!終了
お疲れ様でした。

[[目次|AdjusterTutorial]]