Surf ページの導入

この情報を使用して、Spring Surf ページの簡単な紹介をします。

古い学校の Surf ページフレームワークで Hello World のページを実装する方法を見てみましょう。

Surf ページを追加するには、以下の手順が必要です。

• Surf ページ定義ファイル (XML) の追加
• テンプレートインスタンス (XML) の追加
• 物理テンプレートファイル (FTL) の追加
• プロパティファイル (.properties) の追加 - オプションですが良い習慣です
• 表示するコンテンツを取得する Webスクリプトの追加 ( page スコープの領域があり、既存のテンプレートを使用している場合)

まず、ページ定義ファイルから helloworldhome.xml というファイルを alfresco/tomcat/shared/classes/alfresco/web-extension/site-data/pages ディレクトリに作成します。site-data と pages ディレクトリを作成する必要があります。 我々は Surf だけに焦点を当てることができるビルドプロジェクトを使用していません。

次のXMLをファイルに追加します。

<?xml version='1.0' encoding='UTF-8'?>
<page>
   <title>Hello World Home</title>
   <title-id>page.helloworldhome.title</title-id>
   <description>Hello World Home Description</description>
   <description-id>page.helloworldhome.description</description-id>
   <template-instance>helloworldhome-three-column</template-instance>
   <authentication>none</authentication>
</page>

ここでは定義でハードコードされたページのタイトルと説明を定義しています。ラベル付きのプロパティファイル（ title-id と description-id 要素）への参照として定義しています。 このページには認証は必要ありません。つまり Alfresco Repository からコンテンツを取得できません。 また、3つの列のテンプレートを使用する予定です。つまり、テンプレートインスタンスに任意の名前を付けることができます。

次に alfresco/tomcat/shared/classes/alfresco/web-extension/site-data/template-instances ディレクトリに helloworldhome-three-column.xml というテンプレートインスタンスファイルを作成します。 template-instances ディレクトリを作成する必要があります：

<?xml version='1.0' encoding='UTF-8'?>
<template-instance>
   <template-type>org/alfresco/demo/helloworldhome</template-type>
</template-instance>

このファイルはこのページの FreeMarker テンプレートが保存される場所を指しています。したがって alfresco/tomcat/shared/classes/alfresco/web-extension/templates/org/alfresco/demo ディレクトリパスを作成してください。helloworldhome.ftl テンプレートファイルを追加します：

This is just a test page. Hello World!

ページのタイトルと説明のプロパティファイルを続行します。alfresco/tomcat/shared/classes/alfresco/web-extension/messages ディレクトリに helloworldhome.properties というファイルを作成します。messages ディレクトリを作成する必要があります：

page.helloworldhome.title=Hello World 
page.helloworldhome.description=Hello World Home Description

Then define the following bean:

このファイルはこのページの FreeMarker テンプレートが保存される場所を指しています。また Alfresco Share に新しいリソースファイルについて伝え、custom-slingshot-application-context.xml.sample の名前を web-extension ディレクトリにある custom-slingshot-application-context.xml に変更する必要があります。そして次の bean を定義します。

<bean id="org.alfresco.demo.resources" class="org.springframework.extensions.surf.util.ResourceBundleBootstrapComponent">
  <property name="resourceBundles">
     <list>
        <value>alfresco.web-extension.messages.helloworldhome</value>
     </list>
  </property>
</bean>

このページをテストするには Alfresco を再起動する必要があります。http://localhost:8080/share/page/helloworldhome からアクセスできます。 ページはあまり面白く見えません。

簡単に含めることができるグローバルなコンポーネントであることが判明した Share のヘッダーとフッターの両方が欠けているので、テンプレートファイルを少し変更する必要があるだけです。helloworldhome.ftl ファイルを開き、次のように変更します。

<#include "/org/alfresco/include/alfresco-template.ftl" />
<@templateHeader></@>
<@templateBody>
   <@markup id="alf-hd">
   <div id="alf-hd">
      <@region scope="global" id="share-header" chromeless="true"/>
   </div>
   </@>
   <@markup id="bd">
    <div id="bd">
        <h1>This is just a test page. Hello World!</h1>
    </div>
   </@>
</@>
<@templateFooter>
   <@markup id="alf-ft">
   <div id="alf-ft">
      <@region id="footer" scope="global" />
   </div>
   </@>
</@>

私たちがここでやっていることは、FreeMarker のテンプレートマクロを含む alfresco-template.ftl という別の FreeMarker ファイルを最初に持ってきていることです。次にこれらのマクロ（@で始まる要素）を使用して、ヘッダーとフッターでページのレイアウトを設定します。ヘッダーおよびフッターの内容は、share-header および footer グローバルスコープコンポーネント（Webスクリプト）を介して取得されます。変更結果を表示するには、サーバーを再起動する必要があります。その後、次の情報が表示されます。

すると少し良く見えます。次はページをよりダイナミックにします。現在はテンプレートのページにコンテンツをハードコードしています。表示するコンテンツを返すWebスクリプトを追加しましょう。 これにより、次のように追加の領域でテンプレートを更新する必要があります：

<#include "/org/alfresco/include/alfresco-template.ftl" />
<@templateHeader></@>
<@templateBody>
   <@markup id="alf-hd">
   <div id="alf-hd">
      <@region scope="global" id="share-header" chromeless="true"/>
   </div>
   </@>
   <@markup id="bd">
    <div id="bd">
        <@region id="body" scope="page" />
    </div>
   </@>
</@>
<@templateFooter>
   <@markup id="alf-ft">
   <div id="alf-ft">
      <@region id="footer" scope="global" />
   </div>
   </@>
</@>

新しいリージョン body を呼び出し、その page 範囲を設定しました。そのためにはこの領域の新しいコンポーネントを定義する必要があります。 これはページの XML で行うことも、site-data/components ディレクトリ内の別のファイルとして実行することもできます。 components ディレクトリを作成し、page.body.helloworldhome.xml というファイルを追加します。

<?xml version='1.0' encoding='UTF-8'?>
<component>
  <scope>page</scope>
  <region-id>body</region-id>
  <source-id>helloworldhome</source-id>
  <url>/components/helloworld/body</url>
</component>

コンポーネントファイル名は [<global | template | page>].<region-id>.[<template-instance-id | page-id>].xml の命名規則に従います。このコンポーネントの URL は Hello World メッセージを返す Webスクリプトを指します。alfresco/tomcat/shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/demodirectory にある helloworld-body.get.desc.xml というディスクリプタファイルを作成して実装を開始します。

<webscript>
    <shortname>helloworldbody</shortname>
    <description>Returns the body content for the Hello World page.</description>
    <url>/components/helloworld/body</url>
</webscript>

URLはコンポーネント定義で設定したものと同じであることに注意してください。Webスクリプト用のコントローラを実装し、ディスクリプタと同じ場所に helloworld-body.get.js というファイルを作成します。

model.body = "This is just a test page. Hello World! (Web Scripting)";

コントローラは Hello World メッセージでモデル内の1つのフィールドを設定するだけです。Webスクリプトのテンプレートを実装し、ディスクリプタと同じ場所に helloworld-body.get.html.ftl というファイルを作成します。

<h1>${body}</h1>

サーバーを再起動します。ページに再度アクセスすると、Hello Worldメッセージが「This is just a test page. Hello World! (Web Scripting)」に変わります。

要約すると、この Surf ページの作成に関わったすべてのファイルの画像は、古い学校の方法です。

あなたが今できることは、Hello World のページを YUI ライブラリを使ってより洗練されたプレゼンテーションで拡張することです。そうすれば、古い学校の Share ページのほとんどが実装されている方法のパターンになります。

次に Aikau を使って同じ Hello World ページを新しい方法で実装する方法を見ていきます。

原文：Introduction to Surf Pages