AEM form workspaceは、プレゼンテーションセマンティックとインターフェイスの機能を変更する機能を提供します。 スタイル、レイアウト、書式設定、ブランド、およびコア機能を変更するカスタマイズのタイプについては、以下に説明します。
カスタマイズされた Workspace の例
AEM Forms Workspace では、幅広く様々なカスタマイズをサポートしてユーザーインターフェイスのレイアウト、その表示方法、機能などを更新します。カスタマイズでは以下のうちの 1 つ以上を更新します。
AEM Forms Workspace の表示方法、レイアウト、およびその他のプレゼンテーションセマンティックを変更できます。CSS、HTML テンプレートおよび JavaScript™ ファイルをカスタマイズすることによって、Workspace を変更します。すべてのデフォルトファイルはデフォルトのインストレーションで提供されます。
最も一般的な手順は、AEM Formsワークスペースのカスタマイズの一般的な手順で説明しています。 詳細な手順を含む、カスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。
Workspace をカスタマイズする前に、/libs/ws/css/style.css にある AEM Forms 付属のデフォルトスタイルシートを理解しておいてください。
Workspace をカスタマイズするには、/libs/ws/css フォルダー内にある既存のスタイルシート style.css を理解しておくことをお勧めします。新しい主なコンポーネントを以下に説明します。
CSS 要素 |
変更されたユーザーインターフェイスコンポーネント |
---|---|
#ヘッダー |
AEM Formsワークスペースのヘッダー |
.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ワークスペースの外観は、CSSからの外観を借用します。 CSS をカスタマイズすることにより、フォント、色、ブランド、レイアウトなどの Workspace のプレゼンテーションセマンティックを変更することができます。
CSS カスタマイズのためのトップレベルの手順を以下に示します。
html.jsp
の参照を更新します。これらのカスタマイズを行う正確な手順については、AEM Formsワークスペースのカスタマイズの一般的な手順を参照してください。 AEM Formsワークスペースに付属のCSSファイルは、/libs/ws/css/にあります。 CSS 関連のカスタマイズの場合は、出荷パッケージを使用します。CSS 関連のカスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。
AEM Formsのワークスペースをカスタマイズして、ユーザーのアバターを追加したり、組織のロゴを追加したりできます。 これらのカスタマイズの場合は、出荷パッケージを使用します。
画像をカスタマイズするためのトップレベルの手順を以下に示します。
html.jsp
ファイル内の新しい CSS ファイルにリンクします。AEM Formsワークスペースの画像のカスタマイズを開始するには、AEM Formsワークスペースのカスタマイズの一般的な手順に従います。 画像に関係するカスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。
HTMLテンプレートは、Workspaceユーザーインターフェイスの外観とレイアウトを定義するのに役立ちます。 デフォルトの HTML テンプレートを更新することによって、デフォルトのユーザーインターフェイスのレイアウトをカスタマイズできます。
HTML テンプレートをカスタマイズするためのトップレベルの手順を以下に示します。
このようなカスタマイズの特殊な例については、この記事の最後にある関連項目を参照してください。カスタマイズするテンプレートに応じて、Ship パッケージまたは Dev パッケージのいずれかを選択します。
AEM Formsワークスペースの機能を変更するには、JavaScriptソースコードを変更します。 コア機能の変更は、セマンティックの変更としてラベル付けされます。AEM Forms Workspace のソースコードの一部として、モデル、ビュー、およびテンプレートを変更します。
セマンティックの変更を行ってAEM Formsワークスペースの機能を変更するためのトップレベルの手順は、次のとおりです。
ソースコードの一部であるコンポーネントに関する概念的詳細については、「再利用可能なコンポーネントの詳細」を参照してください。これらのカスタマイズの場合は、Dev パッケージを使用します。
AEM Formsワークスペースはコンポーネントベースのソフトウェアなので、簡単にカスタマイズして再利用できます。 Workspace コンポーネントを Web アプリケーションで容易に統合できます。
概念的な情報については、「再利用可能なコンポーネントの説明」を参照してください。コンポーネントの使用方法については、「WebアプリケーションでのAEM Formsワークスペースコンポーネントの統合」を参照してください。
パッケージには AEM Forms Workspace のソースコードが含まれます。パッケージは[LC root]\sdk\html-workspace\adobe-lc-workspace-src.zip
で入手できます。
これは主としてカスタマイズ向けで、
client-pkg:
client-html:
assembly -AEM FormsワークスペースSDKを作成するスクリプトで使用されるzip.xmlを含みます。
src/main/webapp -
css - AEM Forms Workspace のスタイルシートを含みます。
images - AEM Forms Workspace で使用する画像を含みます。
js:
libs - AEM Forms Workspace で使用されているすべてのサードパーティライブラリを含みます。
licenses - HTML および JS ファイルのライセンス、およびこれらのライセンスをそれぞれのソースファイルの前に置くコードを含みます。
minifier - customizedJavaScriptコードの組み合わせ、縮小、および醜怪化に使用されます。
resourcejs_optimizer - JavaScriptソースの組み合わせ、縮小、および醜怪化に使用されます。
resource_generator - register.js および modelcontrollerpath.js の生成に使用されます。
runtime:
main.js
router.js
libs/ws:pdf.htmlとpluginPing.pdfはAEM FormsのワークスペースにPDF formsを読み込むために使用され、WSNextAdapter.swfはAEM FormsのワークスペースにSWFフォームとガイドを読み込むために使用されます。
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:
runtime:
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:
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 および jqueri-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