AEM Forms Workspace では、プレゼンテーションセマンティックおよびインターフェイスの機能を変更することが可能です。スタイル、レイアウト、書式設定、ブランド、およびコア機能を変更するカスタマイズのタイプについては、以下に説明します。
カスタマイズされた Workspace の例
AEM Forms Workspace では、幅広く様々なカスタマイズをサポートしてユーザーインターフェイスのレイアウト、その表示方法、機能などを更新します。カスタマイズでは以下のうちの 1 つ以上を更新します。
AEM Forms Workspace の表示方法、レイアウト、およびその他のプレゼンテーションセマンティックを変更できます。CSS、HTML テンプレートおよび JavaScript™ ファイルをカスタマイズすることによって、Workspace を変更します。すべてのデフォルトファイルはデフォルトのインストレーションで提供されます。
最も一般的な手順については、AEM Forms Workspace カスタマイズの一般的な手順を参照してください。詳細な手順を含む、カスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。
Workspace をカスタマイズする前に、/libs/ws/css/style.css にある AEM Forms 付属のデフォルトスタイルシートを理解しておいてください。
Workspace をカスタマイズするには、/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 をカスタマイズすることにより、フォント、色、ブランド、レイアウトなどの Workspace のプレゼンテーションセマンティックを変更することができます。
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 テンプレートをカスタマイズするためのトップレベルの手順を以下に示します。
このようなカスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。カスタマイズするテンプレートに応じて、Ship パッケージまたは Dev パッケージのいずれかを選択します。
AEM Forms Workspace の機能を変更するには、JavaScript ソースコードを変更します。コア機能の変更は、セマンティックの変更としてラベル付けされます。AEM Forms Workspace のソースコードの一部として、モデル、ビュー、およびテンプレートを変更します。
セマンティックの変更を行って AEM Forms Workspace の機能を変更するためのトップレベルの手順を次に示します。
ソースコードの一部であるコンポーネントに関する概念的詳細については、「再利用可能なコンポーネントの詳細」を参照してください。これらのカスタマイズの場合は、Dev パッケージを使用します。
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 つのプロフィルを使用して構築することができます。
プロファイル | 説明 | 使用方法 |
---|---|---|
Ship プロファイル | このプロファイルは縮小を使用して最も小さい CRX パッケージを作成します。このパッケージが最も効率的です。すべての JavaScript™ ファイルは単一の JS ファイルに結合されて縮小されます。 | このプロファイルは、JS ファイルにこれ以上セマンティックの変更が必要でない場合に使用します。 |
Debug プロファイル | このプロファイルは、適度に効率的な CRX パッケージを作成します。このパッケージのサイズは、Ship プロファイルを使用して作成したパッケージよりも若干大きくなります。このパッケージにはほとんどの JavaScript ファイルが単一の JS ファイルに結合されています。 | このプロファイルはデバッグに使用します。 |
Dev プロファイル | このプロファイルは、最も大きなサイズの CRX パッケージを作成します。すべての JavaScript ファイルは SDK パッケージ内にあるため、別々に入手することができます。 | セマンティックの変更を組み込む場合はこのプロファイルを使用します。 |
css - style.css、ie.css および jquery-ui.css を含みます。
images - すべての画像を含みます。
js:
libs:
ランタイム:
main.js (combined、minified および uglified)。
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 および jqueri-ui.css を含みます。
images - すべての画像を含みます。
js:
libs:
ランタイム:
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 および jqueri-ui.css を含みます。
images - すべての画像を含みます。
js:
libs - AEM Forms Workspace で使用されているすべてのライブラリを含みます。
require - require.js を含みます。
jqueryui - jquery.ui.datepicker.ja.js を含みます。
ランタイム:
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