アプリケーション表示テンプレートを使用したウィジェットのスタイル設定

アプリケーション表示テンプレートを使用したウィジェットのスタイル設定

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

Lunar Resortサイトをカスタマイズしていて、ユーザーがFacebookまたはTwitterを使用して他の興味のある旅行者と通信できるようにするとします。 ADTを使用して、この機能を既存のウィジェットに追加できます。テンプレートエディターを起動し、カスタムテンプレートを作成し、そのテンプレートをホストするようにアプリを構成します。 ADTを使用すると、アプリケーションのスキンを再作成し、その外観と機能を最終的に制御できます。

ADTの作成

ADTを作成するプロセスは次のとおりです。

  1. サイト管理から、[ Site Selector ]ボタン(Compass)をクリックして、ADTを作成するサイトを選択します。

  2. ビルドアプリケーション表示テンプレート開き* 。

グローバルコンテキストを選択した場合、このページには、アプリで使用できるサンプルテンプレートのリストが表示されます。 これらのサンプルテンプレートは、アプリで既に構成されているデフォルトのテンプレートとは異なります。 テンプレートをホストするサイトを選択した場合は、そのサイトのアプリ用のカスタムテンプレートを作成する必要があります。

図1:サイトの管理ドロップダウンメニューでは、アプリケーションの表示テンプレートが存在するコンテキストを選択できます。

  1. AddAdd)ボタンをクリックすると、作成するテンプレートのタイプを選択するように求められます。
  • アセットパブリッシャー
  • ブログ
  • ブレッドクラム
  • カテゴリーナビゲーション
  • 言語セレクター
  • メディアギャラリー
  • ナビゲーションメニュー
  • RSSパブリッシャー
  • サイトマップ
  • タグナビゲーション
  • Wiki
  1. 名前を入力し、オプションで Details を開いて、使用する説明と小さな画像を提供します。 テンプレートの言語タイプを選択できます。

  2. 詳細 内で、使用するスクリプト言語を選択します。 FreemarkerまたはVelocityを使用できます。 Freemarkerをお勧めします。

  3. Script セクションを使用して、ADTを作成します。

  4. 完了したら、[ 保存 クリックします。

テンプレートエディター

テンプレートエディタの左側には、テンプレートの作成に使用される一般的な変数のパレットがあります。 これは、テンプレートを作成する際の優れたリファレンスです。 変数の1つをテンプレートエディターに配置するには、配置する場所にテキストカーソルを置き、変数名をクリックします。

各変数には、詳細な説明を表示するツールチップもあります。 ADTには複数の種類があるため、ADTごとに異なる変数もあります。 したがって、各テンプレートには、その特定のテンプレートにのみ適用可能な変数の異なるセットがあります。

図2:Liferayは、ADTをカスタマイズするための多目的なスクリプトエディターを提供します。

オートコンプリート機能を使用して、テンプレートに変数を追加することもできます。 使用可能な変数のドロップダウンメニューを開く $ { と入力して呼び出すことができます。 変数の1つをクリックすると、エディターは変数をエディターに挿入します。

同じタイプのテンプレートを他のテンプレートに埋め込むこともできます。 たとえば、既存のWiki ADTがあり、同様のWiki ADTをもう1つ作成したいとします。 ゼロから始める代わりに、既存のWiki ADTを新しいものにインポートして、それから構築することができます。 つまり、ADTを汎用テンプレートとして利用して、再利用可能なコードをシステムのVelocityまたはFreeMarkerテンプレートでインポートできます。 カスタムテンプレートを作成する方法の詳細については、 アプリケーション表示テンプレートを使用したウィジェットのスタイル設定 チュートリアルをご覧ください。

ADTの構成

ADTを保存したら、その アクションActions)ボタンを使用してADTを管理できます。 これにはいくつかのオプションがあります。

  • 編集:ADTのセットアッププロパティを変更できます。
  • 権限:あなたがアクセス権管理できます 更新権限削除、および ビュー ADTため。
  • コピー:ADTのコピーを作成します。
  • 削除:ADTを削除します。

さらに、ADTは静的URLとWebDAV URLを生成します。 これらの値は、テンプレートのXMLソースにアクセスします。 メニューからADTをクリックし、[ 詳細 セクションを展開すると、これらのURLを見つけることができます。 WebDAV URLを使用すると、サイト管理者はリモートサーバー上のADTを追加、参照、編集、および削除できます。 WebDAV URLの機能の詳細については、 WebDAVアクセスチュートリアルをご覧ください。

次に、新しいADTを使用するようにウィジェットを構成する必要があります。

  1. 変更するアプリケーションの 構成 ページに移動し、その ディスプレイ設定を開きます。

  2. Display Templateで、ドロップダウンメニューからADTを選択します。

また、アプリのサイト固有の表示テンプレートを管理することもできます。これを行うには、[ Display Template ]ドロップダウンメニューの横にある[ *[Display Templates for \ [SPECIFIC \ _SITE ]* ]リンクをクリックします。 新しいテンプレートを追加したり、既存のテンプレートを編集したりするオプションを備えた、サイトでのみ使用可能な構成済みテンプレートのリストがウィンドウに表示されます。

図3:アプリの構成メニューで、使用可能なADTを編集および管理できます。

« アプリとアセットのスタイルADTの例 »
この記事は役に立ちましたか?
3人中1人がこの記事が役に立ったと言っています