Friday, January 20, 2012

Spring Surf紹介 - ページの作成とページリンク -

とたにです。

  前回から間が空いてしまいましたが、今回はいよいよSpring Surfで新しいページを作成してみます。(前回予告でファイル構成について説明、と書いたのですが実際に操作しながら同時に説明することにしました) 

 Spring SurfではSpring Rooを使ってさまざな操作を行えます。せっかくなのでrooを使ってページの作成もやってみましょう。 まずは現在のページ一覧を取得してみます。
roo> surf page list
Id: calendar Path: pages/calendar/calendar.xml
Id: home Path: pages/home/home.xml
Id: products Path: pages/products/products.xml

初期に用意されるひな形サイトでは3つのページがあることが分かります。 
 ここに新しいページを作ってみましょう。
roo> surf page create --id services --template home
Created SRC_MAIN_WEBAPP/WEB-INF/pages/services
Created SRC_MAIN_WEBAPP/WEB-INF/pages/services/services.xml

引数idは文字通りページidです。templateはページを描画する際に使用されるtemplateを指しています。homeという名前のtemplateは初期から用意されているものなので、ここではそれを使うことにします。 この状態で一度surfを起動してみます。
$ mvn jetty:run

http://localhost:8180/services とすると、以下のような中身が空のページが表示されます。

ただ残念なことに http://localhost:8180/ にアクセスしても新しく作成したservicesページがタブに表示されない状態です。

次はこのタブにservicesページを追加してみましょう。 

タブに表示されるページの一覧は、ページhomeからのアソシエーションとして設定されています。ではservicesもhomeのアソシエーション先に設定していきましょう。 まずはhomeの現在のアソシエーションを表示してみます。
roo> surf page association list --sourceId home
Page: products Type: child
ではservicesにアソシエーションを設定してみましょう。
roo> surf page association create ----sourceId home --destId services      
Managed SRC_MAIN_WEBAPP/WEB-INF/pages/home/home.xml
もう一度アソシエーションを確認するとservicesが増えていることが確認できます。
roo> surf page association list --sourceId home
Page: products Type: child
Page: services Type: child
この状態でもう一度サイトにアクセスしてみましょう。
 servicesがタブに追加されていることがわかりますね。

ここでページやアソシエーションがsurf上でどのように記述されているかを確認してみます。 
まずはservicesページですが、ページの本体は src/main/webapp/WEB-INF/pages/services/services.xml にあります。 
中身は以下のようになっていると思いますが、template-instanceがhomeになっているのが作成時のパラメータと対応していることが分かると思います。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <page>
    <id>services</id>
    <title>services</title>
    <template-instance>home</template-instance>
    <authentication>none</authentication>
    <components/>
</page>

次にアソシエーションですがアソシエーションはhomeページのxmlファイル上に定義されています。

src/main/webapp/WEB-INF/pages/home/home.xml
<page>
  <id>home</id>
  <title>Home Page</title>
  <template-instance>home</template-instance>
  <authentication>none</authentication>
  <order-id>0</order-id>
  <components>
    <component>
      <region-id>main</region-id>
      <url>/home/main</url>
    </component>
    <component>
      <region-id>side</region-id>
      <url>/home/side</url>
    </component>
  </components>
  <associations>
    <page-association>
      <dest-id>products</dest-id>
      <assoc-type>child</assoc-type>
    </page-association>
    <page-association>
      <dest-id>services</dest-id>
      <assoc-type>child</assoc-type>
    </page-association>
  </associations>
</page>
productsとservicesが両方ともタイプchildのアソシエーションとして定義されていることが分かります。 実はrooのcreate page associationでtype引数を省略するとchildとしてアソシエーションが作成されます。 

 現時点ではここで定義されたアソシエーションがあるとなぜタブ上にページが表示されるのか、そもそもあのタブはどこで定義されているのか、謎は残っていますが、長くなったので今回はここまでにして、次回そのあたりを探ってみます。

No comments: