Adobe Experience Manager タッチ操作対応 UI の概念 concepts-of-the-aem-touch-enabled-ui

Adobe Experience Manager（AEM）は、のタッチ操作対応 UI を備えています レスポンシブデザイン タッチデバイスとデスクトップデバイスの両方で動作するように設計されたオーサー環境の場合。

タッチ対応 UI は以下で構成されます。

タッチ操作対応 UI は、複数のAdobe間で一貫性のあるユーザーエクスペリエンスを提供するために、製品ごとに設計されています。 基準は次のとおりです。

タッチ操作対応 UI の基本原則は次のとおりです。

タッチ操作対応 UI の構造の概要については、を参照してください。 AEM タッチ操作対応 UI の構造.

AEM テクノロジースタック aem-technology-stack

AEMは Granite プラットフォームをベースとして使用し、Granite プラットフォームには Java™ コンテンツリポジトリなどが含まれます。

Granite granite

Granite は、Adobeのオープン web スタックで、次のような様々なコンポーネントを提供します。

Granite UI granite-ui

Granite エンジニアリングプラットフォームは、基盤 UI フレームワークも提供します。 この主な目標は次のとおりです。

これらは、次の要件に従います。

GraniteUI.pdf

ファイルを取得
Granite UI は次のようになります。

クライアントサイドとサーバーサイド client-side-vs-server-side

Granite UI のクライアントサーバー通信は、オブジェクトではなくハイパーテキストで構成されているので、クライアントがビジネスロジックを理解する必要はありません

クライアント側 client-side

これは、HTMLの語彙を拡張したもので、作成者がインタラクティブな web アプリを構築する意図を表すことができます。 これは、次に対する同様のアプローチです ワイアリア および マイクロフォーマット.

主に、クライアント側で実行される JS コードと CSS コードで解釈されるインタラクションパターンのコレクション（フォームの非同期送信など）で構成されます。 クライアントサイドの役割は、インタラクティブ機能のマークアップ（サーバーによるハイパーメディアアフォーダンスとして指定）を強化することです。

クライアントサイドは、サーバーテクノロジーとは無関係です。 サーバーが適切なマークアップを提供すれば、クライアントサイドはその役割を果たすことができます。

現在、JS コードと CSS コードは Granite として配信されています clientlibs カテゴリで次の操作を行います。

granite.ui.foundation and granite.ui.foundation.admin

これらはコンテンツパッケージの一部として提供されています。

granite.ui.content

サーバー側 server-side

sling コンポーネントのコレクションによって形成され、作成者は Web アプリケーションを迅速に構成できるようになります​ 。 ​開発者がコンポーネントを開発し、作成者がそのコンポーネントを Web アプリとして組み立てます。 サーバーサイドの役割は、ハイパーメディアアフォーダンス（マークアップ）をクライアントに提供することです。

現在、コンポーネントは次の場所にある Granite リポジトリーにあります。

/libs/granite/ui/components/foundation

これはコンテンツパッケージの一部として提供されています。

granite.ui.content

クラシック UI との違い differences-with-the-classic-ui

Granite UI と ExtJS （クラシック UI に使用）の違いも参考になります。

Granite UI 基盤コンポーネント granite-ui-foundation-components

この Granite UI 基盤コンポーネント の UI の構築に必要な基本的な構成要素を提供する。 例えば、次のようなものがあります。

基盤コンポーネントは、次の場所にあります。

/libs/granite/ui/components/foundation

このライブラリには、各 Coral 要素の Granite UI コンポーネントが含まれています。 コンポーネントはコンテンツ駆動型で、設定はリポジトリに格納されます。 これにより、手動でHTMLマークアップを記述することなく Granite UI アプリケーションを作成することが可能になります。

目的：

実装：

この基盤コンポーネントライブラリは他のライブラリで使用または拡張できます。

ExtJS と対応する Granite UI コンポーネント extjs-and-corresponding-granite-ui-components

Granite UI を使用するように ExtJS コードをアップグレードする際には、ExtJS の xtype とノードタイプを、同等の Granite UI リソースタイプにアップグレードする際に役立つ便利な概要を、次のリストで示します。

Granite UI 管理コンポーネント granite-ui-administration-components

この Granite UI 管理コンポーネント 基盤コンポーネントを基に構築し、管理アプリケーションが実装できる一般的な構築ブロックを提供します。 その他の点では、

目的：

実装：

Coral UI coral-ui

CoralUI.pdf

ファイルを入手
Coral UI （CUI）は、タッチ操作対応 UI 用にAdobeのビジュアルスタイルを実装したもので、複数の製品間で一貫性のあるユーザーエクスペリエンスを提供するように設計されています。 Coral UI には、オーサリング環境で使用されるビジュアルスタイルを採用するために必要なすべてが用意されています。

Coral UI は、web アプリケーションを開発するための構成要素のコレクションです。

各モジュールは最初からモジュール式に設計されており、主要な役割に基づいて個別のレイヤーを形成します。 レイヤーは互いにサポートするように設計されていますが、必要に応じて個別に使用することもできます。 これにより、Coral のユーザーエクスペリエンスをあらゆるHTML対応の環境に実装することが可能になります。

Coral UI では、特定の開発モデルやプラットフォームを使用する必要はありません。 Coral の主な目標は、このマークアップの実際の出力方法に依存せずに、統一されたクリーンなHTML5 マークアップを提供することです。 これはクライアント側やサーバ側のレンダリング、テンプレート、JSP、PHP、あるいはAdobeFlashの RIA アプリケーションなどに使われます。

HTML要素 – マークアップレイヤー html-elements-the-markup-layer

HTML要素は、すべてのベース UI 要素（ナビゲーションバー、ボタン、メニュー、パネルなど）に共通のルックアンドフィールを提供します。

最も基本的なレベルでは、HTML要素は、専用のクラス名を持つHTMLタグです。 複数のタグを（特定の方法で）相互にネストし、より複雑な要素を構成することができます。

実際のルックアンドフィールは CSS で指定します。 ルックアンドフィールを簡単にカスタマイズできるように（ブランド設定を行う場合など）、実際のスタイル値は、で展開される変数として宣言します。 より小さい 実行時のプリプロセッサー。

目的：

実装：

例えば、次のようなマークアップが表示されます。

<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>

このマークアップは次のように表示されます。

ルックアンドフィールは LESS で定義し、専用のクラス名によって要素に関連付けます（次の抜粋は短縮され、簡潔に示されています）。

.btn {
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    .buttonBackground(@btnBackground,
                                @btnBackgroundHighlight,
                                @grayDark, 0 1px 1px rgba(255,255,255,.75));

実際の値は LESS 変数ファイルで定義します（次の抜粋は短縮され、簡潔に示されています）。

@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;

要素プラグイン element-plugins

多くのHTML要素は、ポップアップメニューの開閉などの何らかの動的動作を示す必要があります。 これは、JavaScript を使用して DOM を操作することでこのようなタスクを実行する要素プラグインの役割です。

プラグインは次のいずれかです。

プラグインの動作は、次のいずれかの方法で、パラメーターを使用してカスタマイズできます。

開発者はどのプラグインにも最適なアプローチを選択できますが、経験則では以下のように使用します。

フォームの検証を実装する場合も同じ概念を使用します。要素を検証する場合、必要な入力フォームをカスタムの data-* 属性として指定する必要があります。その後、この属性は検証プラグインのオプションとして使用されます。

目的：

実装：

次にマークアップの例の抜粋を示します（data-* 属性として指定されたオプションに注意）。

<ul data-column-width="220" data-layout="card" class="cards">
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png">
      <div class="caption">
        <h4>Toolbar</h4>
          <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png">
      <div class="caption">
        <h4>Toolbar</h4>
        <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>

次に jQuery プラグインの呼び出しを示します。

$('.cards').cardlayout ();

これは次のように表示されます。

この cardLayout プラグインは、囲まれた UL 要素はそれぞれの高さに基づいており、また親の幅を考慮に入れています。

HTML 要素ウィジェット html-elements-widgets

ウィジェットは、1 つ以上の基本要素を JavaScript プラグインと組み合わせて、「上位レベル」の UI 要素を形成します。 これらは、1 つの要素で実現できるよりも複雑な動作、さらにはより複雑なルックアンドフィールを実装できます。 タグピッカーやパネルウィジェットがよい例です。

ウィジェットは、カスタムイベントをトリガーしたりリッスンしたりして、ページ上の他のウィジェットと連携できます。 一部のウィジェットは、Coral HTML要素を使用するネイティブの jQuery ウィジェットです。

目的：

実装：

マークアップの例は次のとおりです。

<input type="text" name="tags" placeholder="Tags" class="tagManager"/>

jQuery プラグインの呼び出し（オプション付き）:

$(".tagManager").tagsManager({
        prefilled: ["Pisa", "Rome"] })

プラグインがHTMLのマークアップを生成する（このマークアップは基本的な要素を使用し、内部で他のプラグインを使用する場合があります）:

<span>Pisa</code>
<a title="Removing tag" tagidtoremove="0"
   id="myRemover_0" class="myTagRemover" href="#">x</a></code>

<span id="myTag_1" class="myTag"><span>Rome</code>
<a title="Removing tag" tagidtoremove="1"
   id="myRemover_1" class="myTagRemover" href="#">x</a></code>

<input type="text" data-original-title="" class="input-medium tagManager"
       placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
       autocomplete="off">

これは次のように表示されます。

ユーティリティライブラリ utility-library

このライブラリは、次のような JavaScript ヘルパープラグインや関数のコレクションです。

これには、XSS 処理とイベントバスが含まれます。

HTML要素のプラグインとウィジェットは、ユーティリティライブラリが提供する機能に依存している場合がありますが、ユーティリティライブラリは、要素やウィジェット自体に強い依存を持つことはできません。

目的：

実装：