Top > 開発ガイド > コンポーネント開発チュートリアル > 01 コンポーネント開発の概要

01 コンポーネント開発の概要

Hello Worldコンポーネントの作成

まずは、Hello Worldコンポーネントを作成してコンポーネント開発の雰囲気を掴みます。

コンポーネントジェネレータ

コンポーネントジェネレータを用いることで、コンポーネントの雛型を作成することができます。 

 > ruby script/generate rubricks_component hello_world greet main
      create  components/hello_world
      create  components/hello_world/greet
      create  components/hello_world/languages
      create  components/hello_world/preload
      create  components/hello_world/_install
      create  components/hello_world/_install/db
      create  components/hello_world/_install/images
      create  components/hello_world/_install/javascripts
      create  components/hello_world/_install/stylesheets
      create  components/hello_world/greet_controller.rb
      create  components/hello_world/greet_helper.rb
      create  components/hello_world/greet/main.rhtml
      create  components/hello_world/languages/japanese.rb
      create  components/hello_world/languages/english.rb
      create  components/hello_world/preload/_preload.rhtml
      create  components/hello_world/_install/component_info.rb
      create  components/hello_world/_install/db/001_hello_world_schema_001.rb
      create  components/hello_world/_install/images/hello_world.gif
      create  components/hello_world/_install/images/hello_world_active.gif
      create  components/hello_world/_install/javascripts/hello_world.js
      create  components/hello_world/_install/stylesheets/style.js
     created  install/hello_world.rzip
   installed  hello_world

動作確認

これだけでも、一応動作するコンポーネントができています。Rubricksを起動して動作を確認して下さい。

ビューの実装

「Hello World」と表示するためにビューを編集します。Rubricksにおいてはシステム全体でヘッダやフッタ、そしてブロック等のレイアウトが既に表示されているため、コンポーネント側では<html>や<body>等のタグは記述しないで下さい。今回の場合は下記のように詳細表示エリアを編集してみましょう。 

<div class="rubricks_general_frame_borderless">
  <% render_operation_bar do %>
    Operation Bar
  <% end %>
  <% render_content_body do %>
    <% render_list_frame('01') do %>
      <% render_list('01', '[_Common_List]') do %>
        List Area
      <% end %>
    <% end %>
    <% render_detail_frame('01') do %>
      <% render_detail('01', '[_Common_Details]') do %>
        Hello World
      <% end %>
    <% end %>
  <% end %>
</div>

▲ /components/hello_world/greet/main.rhtml

動作確認

編集の結果を確認して下さい。

Attachments