AEMのクラシックからタッチUIへの移行:からのその他のヒント経験

(Liubou Masiuk)(2019年10月17日)

前回(クラシックからTouchUIへの移行に関する投稿)では、クラシックUIコンポーネントライブラリ全体をタッチUIに移行するための全体的な「ハイブリッドモード」アプローチについて説明しました。 AEMの互換モード。投稿では、私たちが遭遇したいくつかの「癖」をほのめかしました。この新しい投稿では、これらの癖とそれらの癖のいくつかに対処する方法についてさらに詳しく説明します。

ハイブリッドモードは非常に便利ですが、開発チームが採用するのを妨げる可能性のあるいくつかの制限があります。大規模なプロジェクトに追加の労力をかけずにTouchUI。これが私たちが遭遇した問題のいくつかと私たちの開発チームが思いついた解決策です。

作成者はコンポーネントの編集中に

ドロップ画像をドラッグできません

h2>

ClassicUI ウィジェットライブラリは、画像をアップロードおよび処理するためのSmartImageコンポーネントを提供します。デフォルトでは、画像アセットは2つの異なる方法でアップロードできます。

  • ファイルシステムから
  • ページコンテンツファインダーから画像をドラッグしてDAM(デジタルアセットマネージャー)から左側のパネル
DAMアセットパネル(TouchUIインターフェイス)
DAMアセットパネル(TouchUIインターフェース)

TouchUI実装の技術的な詳細を詳しく見ていきましょう。互換モードでは、iframe内にClassicUIダイアログが表示されます。何らかの理由で、互換モードには、ドラッグ&ドロップイベントをすぐに追跡するためのロジックがありません。これにより、作成者はアセットパネルから画像をドラッグできなくなります(ClassicUIエクスペリエンス内でのドラッグに慣れているため)。これは、画像をコンポーネントに配置する方法がないことを意味します。さらに、画像フィールドが必要な場合、必須フィールドが空であるため、作成者はコンポーネントの構成を完了するオプションがありません。

解決策

この問題を解決するために、次のことを決定しました。標準のSmartImageコンポーネントを拡張して、既存の機能に加えてパスフィールドをレンダリングします。その結果、作成者はパスフィールドを使用して画像を選択できるようになり、画像はSmartImage領域内に表示され、必要に応じて画像をプレビューまたは変更できます。存在しないパス(または非画像パス)の場合、フィールドは無効として強調表示されます。

コンポーネント内の必要な画像領域
  1. 元のhtmlsamartimagextypeを、元のhtmlsamartimagextypeを元の拡張する固有のカスタムに再登録しますCQHtmlSmartImageウィジェット。新しいウィジェットの初期化時に、コンポーネントコンテナにPathFieldウィジェットを追加します。さらに、ExtJSベースのUIの一般的なUIアップデートであるデフォルトのウィジェットレイアウトに少しアップデートを提供します。
  2. すべてのHTMLSmartImageのバインディングコントロール(PathFields)。まず、PathPickerから値を取得および設定するためのメソッドと、元のコンポーネントの同じメソッドを作成することにより、ヘルパーを準備します。最初のペアは、PathFieldのsetValueとgetValueです。これは簡単な部分です。トリッキーな部分は、元のコンポーネント値を処理することです。 HTMLSmartImageは、その値をアクセス可能な状態で保存しません。

現在の画像パスを取得するには、this.fileReferenceField.getValue()メソッドを使用して簡単に実行できます。ただし、値を元のウィジェットに設定するには、コンポーネントの画像リソースドロップをエミュレートする必要があります。これは次の方法で管理できます。

これで、必要なすべてのバリューアクセサーができました。元の値とパスフィールド値がいつ変更されるかを把握します。パスフィールドの変更を追跡するには、「ぼかし」イベントを使用できます。元のウィジェットの場合、「imagestate」イベントが最適です。 originalremovedと originalavailableの2種類の画像状態の変化を追跡する必要があるため、リスナーは次のようになります。

これで、バインドの準備が整いました。新しい実装で検証メカニズムを維持するために、埋め込みパスフィールドインスタンスの元の検証ロジックをオーバーライドします。

すべてのスキャフォールディングフィールドダイアログが無効になります

AEM スキャフォールディングモードを使用すると、作成者は特定のスキャフォールドフォーム構造に基づいてページを簡単に作成できます。スキャフォールドは、明確に定義された構造化コンテンツ(記事、ブログ投稿など)を作成するのに非常に便利です。

ハイブリッドモードでは、すべてのスキャフォールディングフォームフィールドが無効になります。つまり、編集できません。

スキャフォールディングフォームの例

解決策

cq.securityライブラリをページのJSPに含めると問題が解決し、スキャフォールディングフォームが正しく機能し始めました。

クリックするとデータを保存せずにハイブリッドダイアログが閉じますダイアログ領域の外側

すべてのコンポーネントは、編集モードでポップアップするコンポーネント構成ダイアログウィンドウ内で編集されます。

AEM(TouchUIインターフェース)でのコンポーネントの編集

AEM(TouchUIインターフェース)でのコンポーネントの編集

ありますハイブリッドダイアログとTouchUIダイアログのユーザーエクスペリエンスのわずかな違い:

  • ユーザーがTouchUIダイアログから離れてクリックしても、何も起こりません。
  • ユーザーがハイブリッドから離れてクリックした場合ダイアログでは、入力したデータを保存せずに閉じます。

これは、保存されていないすべてのデータがgであることを意味します。コンポーネントの外側で誤ってクリックした場合に失われる可能性があります。言うまでもなく、これは作成者にとって非常に煩わしいものです。

解決策

幸いなことに、解決策は非常に単純です。最初、ダイアログの背景は「モーダル」モードです。ダイアログの背景モードを変更するには、ダイアログのJSPファイルをオーバーレイし、ダイアログの背景モードを「静的」値に設定する必要があります。

一部のダイアログフィールドがダイアログウィンドウ領域に適合しません

前に説明したように、UIダイアログはTouchUIダイアログウィンドウ内のiframeでレンダリングされます。このダイアログウィンドウは、すべての動的コンテンツに適合しない場合があり、ダイアログ内に余分なスクロールバーが表示される奇妙なレイアウトが発生する場合があります。

ハイブリッドモードのコンポーネントの追加のスクロール要素

ソリューション

この不便さを克服するために、互換モードでダイアログを適切にレンダリングするためのすべての構成設定を含むJSPファイルをオーバーレイします。このJSPファイルは、次のパスの下の次の場所に配置されます。

apps/cq/gui/components/authoring/compat/components/dialog/dialog.jsp

ウィンドウの幅と高さを変更して、元のパスと見なします。ダイアログのサイズとブラウザのウィンドウサイズ。

この状況は、タッチUI(コーラル)ラッパーとiframeに埋め込まれたクラシックダイアログの間のバインドを実際に提供するスクリプトを介して処理されます。イベント「dialogwrapper-ready」+ nsは、ハンドラー関数パラメーターとして事前に計算された幅と高さを持つイベントに必要です。独自の再計算を行ってから、幅と高さをコーラルダイアログのコンテンツに設定することもできます:

一部のコンポーネントはTouchUIで(簡単に)編集できません

オーサリングの経験は、AEMでコンポーネントを実装する際に考慮すべき最も重要なポイントの1つです。多数のスライドを含むカルーセルコンポーネントを想像してみてください。編集モードでは、作成者がスライドを簡単に並べ替えて、スライドを切り替えることなくすべてのスライドに同時にアクセスできるように、すべてのカルーセルスライドを列としてレンダリングすることをお勧めします。 ClassicUIとTouchUIには重要な違いが1つあります。

  • ClassicUIでは、オーサリング要素(編集バーなど)は、編集モードのコンポーネントでレンダリングされるマークアップの一部です。
  • TouchUIでは、オーサリング要素はオーバーレイでレンダリングされます。最終的なコンポーネントのマークアップはiframeでレンダリングされます。これらの条件の組み合わせにより、作成者は編集モードでコンポーネントをまったく操作できない状況になります(たとえば、ボタンをクリックしたり、カルーセルのスライドをめくったりします)。

そのため、ユーザーが編集プロセスを開始する前に、ライブラリ内のいくつかのコンポーネントで何らかの操作が必要になる場合がありますが、これはTouchUIでは簡単に実現できません。

解決策

ただし、考えられる解決策と見なされる可能性のある修正がいくつかあります。

  1. 開発作業を必要としない迅速で簡単な回避策があります。編集可能なすべてのコンポーネントはコンテンツツリーにあります。それぞれの横に編集ダイアログを開くレンチアイコンがあります。

TouchUIのページコンテンツツリーインターフェイス

TouchUIインターフェイスのページコンテンツツリー

2。サブコンポーネントが多数ある複雑なコンポーネントの場合、編集モードのコンポーネントのマークアップを変更して、すべての「非表示」コンポーネント領域を作成者の「目」に公開できます。これは、すべてが表示され、編集モードでアクセスできることを意味します。

3。ベストプラクティスとして、アドビは AEMコアコンポーネント内でこのようなオーサリングエクスペリエンスケースをサポートするソリューションを提供します。カルーセルコンポーネント

タブコンポーネントは、コンポーネントツールバーの[パネルの選択]オプションを使用して、スライドを並べ替えます現在プレビューされている要素を表示および変更します。

オーサリングから隠されたコンテンツに到達するためのすぐに使えるソリューション

「ページのロック解除」ボタンが機能しない

変更のためにページを

ロックおよびロック解除するための標準のAEMオプションがあります。 TouchUI移行アプローチを検証しているときに、作成者が「ロックされた」ページを初期状態に戻すことができない状況を発見しました。幸い、この機能はAEMサイトコンソールを介して正しく機能します。

TouchUIインターフェイスの[ロック]オプション

TouchUIインターフェースの「ロック」オプション

同様の問題が

こことここ

解決策

ブラウザコンソールのエラーメッセージには、「未定義のプロパティ「共有」を読み取れません」と表示されます。 」。根本的な原因は、クライアントライブラリ「cq.shared」が見つからないことにあります。

「ロック/ロック解除」機能の処理中にエラーメッセージが表示されます

「ロック/ロック解除」機能の処理中のエラーメッセージ

ページのJSPに「cq.shared」ライブラリを含めると解決します問題が発生し、[ページのロック解除]ボタンが期待どおりに機能し始めます。

作成者: Volha Lunkova Liubou Masiuk、 Aliaksei Stsefanovich

元々は https://exadel.com 、2019年10月17日。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です