AEM Forms Workspace では、プレゼンテーションセマンティックおよびインターフェイスの機能を変更することが可能です。スタイル、レイアウト、書式設定、ブランド、およびコア機能を変更するカスタマイズのタイプについては、以下に説明します。
カスタマイズされた Workspace の例
AEM Forms workspace は、様々なカスタマイズをサポートし、ユーザーインターフェイスのレイアウト、外観、機能などを更新します。 カスタマイズには、次の 1 つ以上を更新する必要があります。
AEM Forms Workspace の外観、レイアウト、およびその他の表示セマンティクスを変更できます。 CSS、ワークスペーステンプレートおよび JavaScript™ファイルをカスタマイズして、HTMLを変更します。 すべてのデフォルトファイルは、デフォルトのインストール環境で提供されます。
最も一般的な手順については、AEM Forms Workspace カスタマイズの一般的な手順を参照してください。詳細な手順など、このようなカスタマイズの具体的な例については、この記事の最後にある関連記事を参照してください。
Workspace をカスタマイズする前に、AEM Forms(/libs/ws/css/style.css?lang=ja) に付属するデフォルトのスタイルシートについて理解しておいてください。
ワークスペースをカスタマイズするには、/libs/ws/css フォルダー内の既存のスタイルシート (style.css) に慣れておくことをお勧めします。 以下では、主なコンポーネントの一部を説明します。
CSS 要素 |
ユーザインターフェイスコンポーネントが変更されました |
---|---|
#ヘッダー |
AEM Forms Workspace のヘッダー |
.categoryList |
カテゴリリスト |
.categoryList .header |
カテゴリリストのヘッダー |
.categories, .filters |
カテゴリリストの下のスペース |
.category, .filter |
カテゴリ |
.category:hover, .category.selected, .filter:hover, .filter.selected |
選択したカテゴリとカテゴリのスタイルにマウスを移動 |
categoryListBar .tool、categoryListBar .content |
プロセスページを開始(閉じたカテゴリリスト) |
filterListBar .tool, filterListBar .content |
To Do ページ(閉じたフィルターリスト) |
processNameListBar .tool, processNameListBar .content |
トラッキングページ(閉じられたプロセス名リスト) |
.startPointList, .tasklist |
スタートポイントリストまたはタスクリスト |
.startPointList .header, .tasklist .header |
スタートポイントリストまたはタスクリストのヘッダー |
.startpoint.selected, .task.selected |
選択した開始点またはタスク |
.startpoint.selected .description, .task.selected .description |
選択したスタートポイントまたはタスクの説明 |
#taskarea |
「タスク」領域 |
#header .dropdown |
ヘッダーのユーザードロップダウン |
.sortDrop dd ul |
並べ替えタスクドロップダウン |
AEM Forms Workspace の表示方法は、CSS の表示方法を使用しています。CSS をカスタマイズすることで、フォント、色、ブランディング、レイアウトなど、ワークスペースのプレゼンテーションセマンティクスを変更できます。
CSS カスタマイズの最上位の手順は次のとおりです。
html.jsp
の参照を更新します。これらのカスタマイズを行うための正確な手順については、AEM Forms Workspace カスタマイズの一般的な手順を参照してください。AEM Forms Workspace に付属している CSS ファイルは、/libs/ws/css/ にあります。CSS 関連のカスタマイズの場合は、 出荷パッケージ. CSS 関連のカスタマイズの具体的な例については、この記事の最後にある関連するヘルプトピックを参照してください。
AEM Forms Workspace をカスタマイズしてユーザーのアバターを追加したり、組織のロゴを追加することができます。これらのカスタマイズの場合は、 出荷パッケージ.
画像をカスタマイズするための最上位の手順は次のとおりです。
html.jsp
ファイル内の新しい CSS ファイルにリンクします。AEM Forms Workspace の画像のカスタマイズを開始するには、AEM Forms Workspace カスタマイズの一般的な手順に従います。画像関連のカスタマイズの具体的な例については、この記事の最後にある関連するヘルプトピックを参照してください。
HTML テンプレートは、Workspace ユーザーインターフェイスの表示方法とレイアウトを定義するのに役立ちます。デフォルトのHTMLテンプレートを更新することで、レイアウトのデフォルトのユーザインターフェイスをカスタマイズできます。
テンプレートをカスタマイズするための最上位の手順は、次のとおりです。HTML
このようなカスタマイズの具体的な例については、この記事の最後にあるヘルプトピックを参照してください。 次の中から選択: 出荷パッケージ または 開発パッケージ(カスタマイズするテンプレートに応じて)
AEM Forms Workspace の機能を変更するには、JavaScript ソースコードを変更します。コア機能の変更は、セマンティックの変更としてラベル付けされます。 AEM Forms Workspace のソースコードの一部として提供されているモデル、表示、テンプレートを変更します。
セマンティックの変更を行って AEM Forms Workspace の機能を変更するためのトップレベルの手順を次に示します。
ソースコードの一部であるコンポーネントの概念について詳しくは、 再利用可能なコンポーネントの説明. これらのカスタマイズの場合は、開発パッケージを使用します。
AEM Forms Workspace は容易にカスタマイズや再利用が可能なコンポーネントベースのソフトウェアです。Workspace コンポーネントを Web アプリケーションで容易に統合できます。
概念的な情報について詳しくは、再利用可能なコンポーネントの詳細を参照してください。コンポーネントを使用する手順について詳しくは、Web アプリケーションでの AEM Forms Workspace コンポーネントの統合を参照してください。
このパッケージには、AEM Forms Workspace のソースコードが含まれています。 パッケージは、[LC root]\sdk\html-workspace\adobe-lc-workspace-src.zip
に格納されています。
これは主にカスタマイズを目的としており、次の機能を生成できます。
client-pkg:
client-html:
assembly - AEM Forms Workspace SDK を作成するスクリプトが使用する zip.xml を含みます。
src/main/webapp -
css - AEM Forms Workspace のスタイルシートを含みます。
images - AEM Forms Workspace で使用する画像を含みます。
js:
libs - AEM Forms Workspace で使用されるすべてのサードパーティライブラリを含みます。
licenses -HTMLファイルと JS ファイルのライセンス、およびこれらのライセンスの先頭に各ソースファイルを置くコードが含まれます。
minifier - カスタマイズされた JavaScript コードの結合、縮小および醜怪化に使用されます。
resourcejs_optimizer - JavaScript ソースの結合、縮小および醜怪化に使用されます。
resource_generator - register.js および modelcontrollerpath.js の生成に使用されます。
runtime:
main.js
router.js
libs/ws:pdf.html および pluginPing.pdf は、PDF フォームを AEM Forms Workspace に読み込むのに使用されます。WSNextAdapter.swf は、SWF フォームおよび Guide を AEM Forms Workspace に読み込むのに使用されます。
locales:
html.jsp
GET.jsp
CRX パッケージは CRX™リポジトリにデプロイできます。 これは、[LC root]\crx-repository\install\adobe-lc-workspace-pkg.zip
に格納されています。
このパッケージは、以下の 3 つのプロフィルを使用して構築することができます。
プロファイル | 説明 | 使用方法 |
---|---|---|
出荷プロファイル | このプロファイルは、縮小化を使用して、可能な限り小さいサイズの CRX パッケージを作成します。 このパッケージは最も効率的です。 すべての JavaScript™ファイルが結合され、縮小されて 1 つの JS ファイルになります。 | JS ファイルでさらにセマンティックの変更が必要ない場合は、このプロファイルを使用します。 |
プロファイルをデバッグ | このプロファイルは、適度に効率的な CRX パッケージを作成します。 パッケージのサイズは、Ship プロファイルを使用して作成したパッケージより少し大きくなります。 このパッケージには、ほとんどの JavaScript ファイルが単一の JS ファイルに結合されています。 | このプロファイルをデバッグに使用します。 |
開発プロファイル | このプロファイルは、可能な限り大きいサイズの CRX パッケージを作成します。 すべての JavaScript ファイルは SDK パッケージ内にあるので、個別に使用できます。 | セマンティックの変更を組み込む場合は、このプロファイルを使用します。 |
css - style.css、ie.css および jquery-ui.css を含みます。
images — すべての画像を含みます。
js:
libs:
runtime:
main.js (組み合わせ、縮小および醜怪化)。
registry.js
libs:
Locale - .content.xml を含みます。
locales:
Index - .content.xml を含む
profile - offline.jsp を含みます。
GET.jsp
html.jsp
content.xml
_rep_policy.xml
css - style.css、ie.css および jquery-ui.css を含みます。
images — すべての画像を含みます。
js:
libs:
runtime:
main.js (組み合わせ)
registry.js
libs:
Locale - .content.xml を含みます。
locales:
Index - .content.xml を含む
profile - offline.jsp を含みます。
GET.jsp
html.jsp
content.xml
_rep_policy.xml
client-pkg への mvn clean -P Dev install
css - style.css、ie.css および jquery-ui.css を含みます。
images — すべての画像を含みます。
js:
libs - AEM Forms Workspace で使用されるすべてのライブラリを含みます。
require - require.js を含みます。
jqueryui - jquery.ui.datepicker.ja.jsを含む
runtime:
main.js
registry.js
router.js
libs:
Locale - .content.xml を含みます。
locales:
Index - .content.xml を含む
profile - offline.jsp を含みます。
GET.jsp
html.jsp
content.xml
_rep_policy.xml