現在表示中:

ダイアログ変換ツールは、(ExtJS に基づく)クラシック UI 用のダイアログ、または Granite UI および Coral 2 に基づくダイアログが 1 つしか定義されていない既存のコンポーネントを拡張する場合に役立ちます。このツールでは、元のダイアログを使用して、Granite UI および Coral 3 に基づく標準 UI 用の複製のダイアログを作成します。

このツールの目的は、アップグレードをできる限り自動化して効率を高め、エラーを削減することです。ただし、このツールはあらゆるシナリオに対応できるわけではないので、プロセスを完全に自動化することはできません。また、ユーザーは、変換後のダイアログを確認し、場合によっては再調整する必要があります。このツールは、変換プロセスの開始を支援するための補助用ツールですが、変換を完全に制御することを目的としていません。

このツールは、標準 UI、Granite UI および Coral 3 ベースの UI を使用して新しいダイアログを作成しますが、変換できない項目はスキップします。そのため、特定のコンポーネントに一致するルールがない場合は、作成されたダイアログに、コピー元のダイアログのノードがそのままの状態で含まれている場合があります。また、変換後のコンポーネントには変換されていないプロパティがいくつか含まれている場合があります。これは、そのプロパティの変換に適したルールが存在しなかったからです。

警告:

このツールはあらゆるシナリオに対応できるわけではありません。これは、変換ルールが包括的なものではなく、ベストエフォート型であるからです。このツールは最も頻繁に使用される要素およびプロパティを変換しますが、カスタマイズまたは非常に特殊なダイアログを処理する際は変換が不完全になります。変換後のダイアログではさらなる調整が必要になる場合があり、すべての変換を確認する必要があります。

注意:

クラシック UI の開発または強化は終了しているので、アドビのユーザーには、最新のテクノロジーを利用できるよう、デフォルトの Granite UI ユーザーインターフェイスにアップグレードすることをお勧めしています。

一般には最新プラットフォームへの移行が推奨されていますが、Coral 2 から Coral 3 への移行は重要ではありません。ただし、新しいプロジェクトは Coral 3 に基づいて開始することをお勧めします。

ダイアログ変換ツールのダウンロードとインストール

ダイアログ変換ツールはオープンソース化されており、GitHub からアクセスできます。

GitHub のコード

このページのコードは GitHub にあります

注意:

AEM にはダイアログ変換ツールが付属していません。このツールを使用するには、ダウンロードしてインストールする必要があります。

ダイアログ変換ツールをインストールするには、次の手順を実行します。

  1. Dialog Conversion Tool GitHub プロジェクトからパッケージをダウンロードします。

  2. インスタンスにパッケージをインストールします。パッケージ管理について詳しくは、パッケージの使用方法を参照してください。

ダイアログの変換

このツールでは、コンテンツツリーの元のダイアログと同じ場所に対応する Granite UI/Coral 3 ダイアログを作成することで、ダイアログを変換します。Granite UI/Coral 2 ダイアログの場合、ダイアログは上書きされないようバックアップの場所にコピーされます(ダイアログノード名には .coral2 というサフィックスが付加されます)。このツールでは、デザインダイアログおよび編集ダイアログを変換できます。

1 つ以上のダイアログを変換するには、次の手順を使用します。

  1. グローバルナビゲーション/ツール/運営からアクセス可能なダイアログ変換コンソールを開きます。

    http://<hostname>:<port>/libs/cq/dialogconversion/content/console.html

    chlimage_1
  2. 必要なパス(/apps/geometrixx/components など)を入力します。1 つのダイアログの直接パス(/apps/geometrixx/components/lead など)を入力することもできます。

    chlimage_1
  3. ダイアログを表示」を選択して、指定した場所にあるすべてのダイアログを表示します。

    chlimage_1

    入力したパスの下にある既存の従来のダイアログがすべて一覧表示されます。各ダイアログにはタイプが表示されています。タイプには以下のものがあります。

    • クラシック:ノード名が dialog または design_dialog の cq:Dialog タイプのノード
    • Coral 2:名前が cq:dialog または cq:design_dialog で、子コンテンツノードに Granite UI/Coral 2 リソースタイプを持つノード

    各行には、ダイアログを表示するためのリンクと、そのノード構造を表示するための CRXDE Lite へのリンクが含まれています。

    注意:

    クラシック UI または Coral 2 用のダイアログがまったく存在しないコンポーネント(つまり Granite UI/Coral 3 でデザインされたコンポーネント)は表示されません。

  4. 変換するダイアログを 1 つ以上選択し、「X 個のダイアログを変換」をクリックまたはタップして変換プロセスを開始します。

    chlimage_1
  5. 選択したダイアログが変換の結果と共に表示されます。変換が成功した場合、その行には、変換後のダイアログを表示するためのリンク、または CRXDE Lite でこのダイアログを開くためのリンクが表示されます。

    戻る」をクリックして、ダイアログ変換ツールに戻ります。

    chlimage_1
  6. ダイアログ変換ツールに戻ると、変換されたダイアログはリストに表示されなくなります。ただし、検出されたダイアログの合計数は、変換済みのダイアログが含まれたまま表示されていることに注意してください。つまり、表の行数が検出された数と必ずしも一致しません。

    chlimage_1
  7. 変換済みダイアログを表示」チェックボックスをオンにすると、指定したパスにある変換済みのダイアログが表示されます。

    chlimage_1

    ダイアログが変換済みの場合、変換後のダイアログへのリンクも提示されます。兄弟の Granite UI/Coral 3 ダイアログが存在する場合、ダイアログは変換済みであると見なされます。

ダイアログの書き換えルール

ダイアログ変換ツールは、グラフの書き換えの概念に基づいています。この概念では、書き換えルールを適用して対象のグラフが変換されます。書き換えルールは、パターンと置換用のグラフの組み合わせです。ルールが対象となるグラフの特定の部分グラフに一致すると、その部分グラフが置き換えられます。グラフの書き換えについて詳しくは、http://en.wikipedia.org/wiki/Graph_rewritingも参照してください。

ダイアログ変換ツールでは、この手法を使用して、従来のダイアログツリー(クラシックまたは Granite UI/Coral 2)を Granite UI/Coral 3 のダイアログツリーに書き換えます。照合が単一のノードやプロパティに対してではなく、実際のサブツリーに対しておこなわれるので、変換の柔軟性が非常に高く、複雑なコンポートも考慮できるという利点があります。

アルゴリズム

書き換えアルゴリズムでは、パラメーターとして、書き換え対象のツリーと一連の書き換えルールを受け取ります。ツリーは先行順でトラバースされ、ノードごとに、そのノードをルートとするサブツリーにルールが当てはまるかどうかがチェックされます。最初に一致したルールが、そのサブツリーを書き換えるために適用されます。次に、そのルートからトラバースが再開されます。ツリー全体がトラバースされ、サブツリーに一致するルールがなくなった時点ですぐにアルゴリズムは終了します。最適化の方法として、アルゴリズムは、最終なので以降のトラバースで一致を再確認する必要の一連のノードを追跡します。書き換えルールによって、書き換えられたツリーのどのノードが最終であるか、アルゴリズムを今後通過する際にどのノードを再確認する必要があるかを定義します。

変換のエントリポイントは DialogConversionServlet で、これは、/libs/cq/dialogconversion/content/convert.json への POST 要求に登録されます。このエントリポイントはパス要求パラメーターを受け取ります。これは、変換する必要があるダイアログへのパスが含まれる配列です。次に、サーブレットはダイアログごとに、定義されたダイアログ書き換えルールをすべて適用することで、対応するダイアログツリーを書き換えます。

書き換えルールのタイプ

書き換えルールは、次に示す 2 つの異なる方法で定義できます。

一部のルールは標準提供されていますが、独自にカスタマイズしたルールを定義することもできます。サンプルの書き換えルールも使用できます。

通常は、1 つのダイアログの書き換えルールで 1 つのダイアログ要素(pathbrowser 入力フィールドなど)を書き換えます。

警告:

書き換えのループはアルゴリズムで検出されません。したがって、書き換えルールによるツリーの書き換えが循環しないようにする必要があります

ノードベースの書き換えルール

ダイアログの書き換えルールは、ノードとプロパティの観点から定義できます。

rule
  - jcr:primaryType = nt:unstructured
  - cq:rewriteRanking = 4
  + patterns
    - jcr:primaryType = nt:unstructured
    + foo
      - ...
      + ...
    + foo1
      - ...
      + ...
  + replacement
    + bar
      - ...
      + ...

この例では、2 つのパターンfoo および foo1 をルートとするツリー)と 1 つのリプレースメントbar をルートとするツリー)を含むルールを定義します。このパターンとリプレースメントのツリーは、ノードとプロパティを含む任意のツリーです。定義済みのいずれかのパターンが一致すると、ルールがサブツリーに一致します。パターンを一致させるには、そのパターンと同じノードが対象となるツリーに含まれている(名前が一致する)必要があります。また、パターンで定義されたすべてのプロパティがツリーのプロパティに一致する必要があります。

一致したサブツリー(元のツリー)はリプレースメントに置き換えられます。リプレースメントツリーでは、元のツリーのプロパティの値を継承するマップ先のプロパティを定義できます。このようなプロパティは String タイプにする必要があります。形式は次のようになります。

${<path>}

参照先のプロパティが元のツリーに存在しない場合、そのプロパティは省略されます。または、そのような場合のためのデフォルト値を指定できます(String タイプのプロパティの場合のみ)。

${<path>:<default>}

:」文字を含むプロパティは、単一引用符で囲むことにより、デフォルト値の指定した場合との競合を回避することができます。Boolean プロパティは、式の前に「! 」というプレフィックスを付けた場合に否定になります。マップ先のプロパティには複数の値を指定できます。この場合は、一致したツリーに存在する最初のプロパティの値が割り当てられます。

例えば、次のプロパティ one には、一致した元のツリーのプロパティ /two/three の値が割り当てられます。

...
  + replacement
    + bar
      - one = ${./two/three}
      - negated = !${./some/boolean/prop}
      - default = ${./some/prop:default}
      - multi = [${./prop1}, ${./prop2}]

ルールでは、次のオプションのプロパティもサポートされます。

  • cq:rewriteOptional(Boolean)
    パターンのノードでこのプロパティを設定すると、ツリーを一致させるためにそのノードを指定する必要はありません。

  • cq:rewriteRanking(Integer)
    ルールのノードでこのプロパティを設定すると、ルールを適用する順序に影響します。このプロパティは、より具体的な構造を処理するルールがより一般的なルールで上書きされないようにする場合に役立ちます。ランキングの低いルールがランキングの高いルールより優先されます。すべてのルールのランキングは、デフォルトで Integer.MAX_VALUE となります。

さらに、リプレースメントツリーでは以下の(名前が cq:rewrite で始まる)特殊なプロパティがサポートされます。

  • cq:rewriteMapChildren(String)
    このプロパティを含むノードは、このプロパティ値(例:cq:rewriteMapChildren=./items)で参照される元のツリー内のノードの子のコピーを受け取ります。

  • cq:rewriteFinal(Boolean)
    最適化の方法として、このプロパティを含むノードは最終であり、書き換えルールの一致を再確認する必要がないことをアルゴリズムに指示します。リプレースメントノード自体に設定すると、リプレースメントツリー全体が最終であると見なされます。

  • cq:rewriteCommonAttrs(Boolean)
    リプレースメントノード(rule/replacement)でこのプロパティを設定すると、元のルートノードの関連プロパティがコピーのルートの同等の Granite 一般属性にマップされます。データ属性は、ターゲットの granite:data サブノードをコピー/作成し、そこに data-* プロパティを書き込むことで処理されます。

  • cq:rewriteRenderCondition(Boolean)
    リプレースメントノード(rule/replacement)でこのプロパティを設定すると、任意の Granite レンダリング条件(rendercondition または granite:rendercondition)子ノードが元のルートノードからコピーのルートの granite:rendercondition 子ノードにコピーされます。

さらに、リプレースメントノードに cq:rewriteProperties ノードを追加して、結果としてマップされたプロパティに対し、文字列の書き換えを定義できます。このノードはリプレースメントから削除されます。cq:rewriteProperties ノードのプロパティには、書き換え対象のプロパティと同じ名前を付ける必要があります。また、以下の 2 つのパラメーターを持つ文字列の配列を受け取る必要があります。

  • pattern:照合する正規表現。例:"(?:coral-Icon–)(.+)"
  • replacement:Matcher の replaceAll 関数に渡されます。例:"$1"

次の例では、Coral 2 の icon プロパティを Coral 3 の同等のプロパティに書き換えています。

...
  + replacement
    + bar
      - icon = ${./icon}
      + cq:rewriteProperties
      	- icon = [(?:coral-Icon--)(.+), $1]

独自のノードベースの書き換えルールの定義

提供されている書き換えルールは次の場所で定義されます。

/libs/cq/dialogconversion/rules

この場所ではさらに、クラシック用の書き換えルールと Coral 2 用の書き換えルールが以下のフォルダーに分類されています。

/libs/cq/dialogconversion/rules/classic

/libs/cq/dialogconversion/rules/coral2

次の場所に一連のルールを指定して、これらのルールを上書きできます。

/apps/cq/dialogconversion/rules

/libs/cq/dialogconversion/rules/apps にコピーしてから、既存のルールを変更するか、新しいルールをこの新しいインスタンスに追加できます

Java ベースの書き換えルール

com.adobe.cq.dialogconversion.DialogRewriteRule インターフェイスの OSGi サービスを公開する Java クラスとして、さらに複雑な書き換えルールを定義できます。

このようなクラスでは次のメソッドを実装する必要があります。

boolean matches(Node root) throws RepositoryException;
Node applyTo(Node root, Set<Node> finalNodes) throws DialogRewriteException, RepositoryException;
int getRanking();

指定されたルートノードをルートとするサブツリーにルールが一致する場合、matches メソッドは true を返す必要があります。ルールが一致する場合、ツリーの書き換えアルゴリズムは続いて applyTo メソッドを呼び出します。このメソッドでは、指定されたルートノードをルートとするサブツリーを書き換える必要があります。通常、このメソッドは元のツリーの名前を一時的に変更して、元のツリーの親ノードの新しい子として(元のツリーのノードとプロパティを使用して)新しいツリーを作成し、最後に元のツリーを削除します。詳しくは、com.adobe.cq.dialogconversion.DialogRewriteRule インターフェイスの Javadoc を参照してください。

その他の情報 - Javadoc

詳しくは、com.adobe.cq.dialogconversion の Javadoc を参照してください。

独自の Java ベースの書き換えルールの定義

次のクラスは、com.adobe.cq.dialogconversion.DialogRewriteRule インターフェイスを実装するカスタム書き換えルールの例を示しています。

@Component
@Service
public class CustomDialogRewriteRule implements DialogRewriteRule {
 
    public boolean matches(Node root) throws RepositoryException {
        // ...
    }
 
    public Node applyTo(Node root, Set<Node> finalNodes) throws DialogRewriteException, RepositoryException {
        // ...
    }
 
    int getRanking() {
        // ...
    }

}

または、com.adobe.cq.dialogconversion.AbstractDialogRewriteRule を次のように拡張できます。この抽象クラスは getRanking メソッドを実装し、サービスの OSGi プロパティである service.ranking を使用してルールのランキングを決定します。

@Component
@Service
@Properties({
        @Property(name="service.ranking", intValue = 10)
})
public class CustomDialogRewriteRule extends AbstractDialogRewriteRule {
 
 
    public boolean matches(Node root) throws RepositoryException {
        // ...
    }
 
    public Node applyTo(Node root, Set<Node> finalNodes) throws RewriteException, RepositoryException {
        // ...
    }
 
}

用意されている書き換えルール

cq-dialog-conversion-content パッケージには、事前定義された書き換えルールがいくつか含まれています。クラシック UI ウィジェットの場合、詳しくはxtypes の使用を参照してください。

ルール 従来のコンポーネント Granite UI/Coral 3 リプレースメント
com.adobe.cq.dialogconversion.rules.CqDialogRewriteRule  cq:Dialog タイプのノード。様々なサブ構造を処理します。

fixedcolumns または tabs レイアウトを使用した granite/ui/components/foundation/container  

ダイアログの実際のコンポーネントがコピーされ、アルゴリズムの後続のパスで書き換えられます。

com.adobe.cq.dialogconversion.rules.IncludeRule xtype = cqinclude 参照先ノードが Granite UI/Coral 3 のダイアログにコピーされ、(場合によっては)その後、アルゴリズムによって書き換えられます。
com.adobe.cq.dialogconversion.rules.MultifieldRewriteRule xtype = multifield

granite/ui/components/coral/foundation/form/multifield

 fieldConfig 子ノード(ある場合)が個別に書き換えられます。そのためサポートされるコンポーネントが制限されません。

/libs/cq/dialogconversion/rules/classic button
checkbox
colorfield
combobox
componentselector
datetime
fieldset
fileupload
hidden
numberfield
panel
password
pathfield
radio
radiogroup
select
sizefield
tabpanel
tags
textarea
textfield
 
/libs/cq/dialogconversion/rules/coral2 actionfield
autocomplete
button
checkbox
collapsible
colorpicker
container
datepicker
fieldset
fileupload
fixedcolumns
heading
hidden
hyperlink
include
multifield
nestedcheckboxlist
nestedcheckboxlist-checkbox
numberfield
password
pathbrowser
radio
radiogroup
reset
select
submit
switch
tabs
tags
text
textarea
textfield
userpicker
well
 

サンプルの書き換えルール

GitHub のコード

このページのコードは GitHub にあります

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー