第16章

カスタムレイアウトの作成

この章では、exteNd Director 開発環境を使用したカスタムレイアウトの作成方法について説明します。この章の節は次のとおりです。

 
Top of page

ポータルレイアウトウィザードとポータルレイアウト定義ウィザードについて

次のように、レイアウト定義を作成した後でレイアウト記述子を作成することで新しいレイアウトを作成してください。

使用するウィザード

使用目的

ポータルレイアウト定義ウィザード

次を指定するXMLレイアウトのレイアウト定義ファイルを作成します。

  • レイアウト内のセクション

  • メインページの幅

  • セクションの幅

  • 特定のセクションでのポートレットの流れ(左から右または上から下)

ポータルレイアウトウィザード

次を提供するレイアウト記述子ファイルを作成します。

  • 表示名

  • 説明

  • プレビューイメージファイル

  • レイアウト定義ファイルへのリファレンス

 
Top of page

XMLレイアウト定義の作成

Procedure XMLレイアウト定義を作成する

  1. exteNd Director 開発環境を起動し、対象プロジェクトを開きます。

  2. ［ファイル］>［新規］>［ファイル］の順に選択します。

    ［新規ファイル］ダイアログボックスが表示されます。

    FileNew

  3. ［ポータル］タブをクリックします。

    FileNewPortal

  4. ［詳細］を選択して、［レイアウト定義］を選択し、[OK]をクリックします。

    CustomLayoutDefinition1

    レイアウト定義エディタが表示されます。

    CustomLayoutDefinition2

  5. セクションコンテナのタイプ行と初期セクションを追加するには、[行の追加]をクリックします。

    レイアウト定義エディタはセクションコンテナを作成し、IDが1の新しいセクションを追加します。

    CustomLayoutDefinition3

    ヒント:   新しいセクションコンテナのフロー、スタイル、および幅属性を指定します( セクションまたはセクションコンテナの属性の編集を参照)。

  6. セクションコンテナのタイプカラムと初期セクションを追加するには、[カラムの追加]をクリックします。

    レイアウト定義エディタはセクションコンテナを作成し、新しいセクションを追加します。新しいセクションのIDは、追加した最後のセクションのIDより大きくなります。

    CustomLayoutDefinition4

    新しいセクションコンテナのフロー、スタイル、および幅属性を指定します(セクションまたはセクションコンテナの属性の編集を参照)。

  7. セクションコンテナ内にセクションを追加するには、ターゲットセクションコンテナを選択し、[セクションの追加]をクリックします。

    レイアウト定義エディタは新しいセクションを追加します。新しいセクションのIDは、追加した最後のセクションのIDより大きくなります。

    CustomLayoutDefinition5

    新しいセクションのフロー、スタイル、および幅属性を指定します(セクションまたはセクションコンテナの属性の編集を参照)。

  8. セクションを削除するには、セクションを選択し、[セクションの削除]をクリックします。

  9. セクションコンテナを削除するには、コンテナを選択し、[コンテナの削除]をクリックします。

  10. ［ファイル］>［保存］の順に選択します。

  11. レイアウト定義ファイルの名前を指定し、[保存]をクリックします。

    ヒント:   表記規則によって、レイアウト定義ファイルは記述子ファイルと同じ名前を持 ち、Def (定義の略)が追加されます。 たとえば、記述子ファイルの名前が HeaderContent.xmlの場合、関連するレイアウト定義ファイルはHeaderContentDef.xml となります。この命名規則をお勧めしますが、必須ではありません。

    レイアウト定義ファイルは、リソースセット内の[portal-layout]ディレクトリに保存されます。

    For more information    リソースセット内のファイル場所の詳細については、『exteNd Directorアプリケーションの開発』のリソースおよびJavaクラスのサブディレクトリに関する節を参照してください。

    For more information    レイアウト定義ファイルの要素については、レイアウト定義ファイルを参照してください。

 
Top of section

セクションまたはセクションコンテナの属性の編集

Procedure レイアウト属性を編集する

  1. レイアウト定義エディタで、編集するセクションまたはセクションコンテナを選択します。

  2. 次の[フロー]属性のいずれか1つを選択します。

    フロー属性

    説明

    horizontal

    セクションまたはセクションコンテナ内のポートレットが左から右へ流れることを示します。

    vertical

    セクションまたはセクションコンテナ内のポートレットが上から下へ流れることを示します。

  3. (オプション)[スタイル]設定を指定します。 セクションがHTMLに変換される場合、生成されたテーブル行またはカラムのstyle属性に［スタイル］設定が適用されます。

    TDセルには、次のようなあらゆるスタイルを指定できます。

    スタイル

    値

    Padding

    • padding-bottom

    • padding-top

    • padding-right

    • padding-left

    alignment

    • vertical-align

    • horizontal-align

  4. (オプション)[幅]設定を指定します。 セクションがHTMLに変換される場合、生成されたテーブル行またはカラムのwidth属性に［幅］設定が適用されます。 幅はパーセンテージまたはピクセルで表示できます。

    CustomLayoutDefinition6

次に、セクションコンテナ定義の例を示します。

  <section-container type="row">
  <s3-section flow="horizontal" id="1" style="padding-right:5px;padding-bottom:5px;vertical-align:top" width="100%"/>
  </section-container>
  <section-container type="row">
  <s3-section flow="vertical" id="2" style="padding-bottom:5px;padding-right:5px" width="25%"/>
  <s3-section flow="vertical" id="3" style="padding-bottom:5px;padding-right:5px" width="50%"/>
  <s3-section flow="vertical" id="4" style="padding-bottom:5px;padding-right:5px" width="25%"/>
  </section-container>

 
Top of page

レイアウト記述子の作成

Procedure レイアウト記述子を作成する

  1. exteNd Director 開発環境を起動し、対象プロジェクトを開きます。

  2. ［ファイル］>［新規］>［ファイル］の順に選択します。

    ［新規ファイル］ダイアログボックスが表示されます。

    FileNew

  3. ［ポータル］タブをクリックします。

    FileNewPortal

  4. ［詳細］を選択して、［レイアウト］を選択し、[OK]をクリックします。

    CustomLayoutDescriptor1

    レイアウト記述子エディタが表示されます。

    CustomLayoutDescriptor2

  5. レイアウト記述子エディタで［一般設定］タブをクリックし、次のようにレイアウト記述子ファイルの一般設定を指定します。

    一般設定

    指定する内容

    表示名

    レイアウトの名前を入力します。

    注記:   この名前はポータルアプリケーションのユーザインタフェースでレイアウトを識別します。

    説明(オプションl)

    レイアウトの説明を入力します。

    プレビューイメージ(オプション)

    プレビューイメージへのパスを入力します。このパスは、完全修飾されたURLまたはポータル置換文字列を含むURLです(を参照)。

    イメージファイルを検索するには、次の省略記号ボタンをクリックします。

    pgLayoutEllipsisButton

    イメージファイルを開くには、次の矢印ボタンをクリックします。

    pgLayoutArrowButton

    定義形式

    ドロップダウンメニューからレイアウト定義形式を選択します。

    定義ファイル

    レイアウト定義ファイルへのパスを入力します。

    レイアウト定義ファイルを検索するには、次の省略記号ボタンをクリックします。

    pgLayoutEllipsisButton

    レイアウト定義ファイルを開くには、次の矢印ボタンをクリックします。

    pgLayoutArrowButton

    For more information    レイアウト記述子ファイルの要素については、レイアウト記述子ファイルを参照してください。

  6. レイアウト記述子エディタで［セキュリティ］タブをクリックし、次のようにレイアウト記述子ファイルのセキュリティ設定を指定します。

    セキュリティ設定

    指定する内容

    リスト役割(オプション)

    ［使用できるリスト役割］のリストでリスト役割を選択し、右矢印ボタンをクリックします。 選択する各リスト役割に対して、この手順を繰り返します。

    実行役割(オプション)

    ［使用できる実行役割］のリストで実行役割を選択し、右矢印ボタンをクリックします。 選択する各実行役割に対して、この手順を繰り返します。

    重要:   レイアウトにrun-role-mapを指定した場合、対応するリスト役割を選択する必要があります。

    For more information    レイアウト記述子ファイルのセキュリティ設定については、レイアウト記述子ファイルを参照してください。

  7. ［ファイル］>［保存］の順に選択します。

    レイアウト記述子ファイルは、リソースセット内の[portal-layout]ディレクトリに保存されます。レイアウトのIDは、XML拡張子を除いたその記述子ファイルの名前です。

    For more information    リソースセット内のファイル場所の詳細については、『exteNd Directorアプリケーションの開発』のリソースおよびJavaクラスのサブディレクトリに関する節を参照してください。


Copyright © 2004 Novell, Inc. All rights reserved. Copyright © 1997, 1998, 1999, 2000, 2001, 2002, 2003 SilverStream Software, LLC. All rights reserved.  more ...