レガシー・プラットフォーム

カスタム画面の作成

オンラインで編集

画面は、アプリケーションで使用される特殊な Dojo コンテナー・ウィジェットです。 UI ロジックと動作ロジックの両方を含む、UI レイヤーとマッシュアップ層の間のデータの相互作用を管理します。

カスタム画面を作成するには、 JavaScript 画面定義を含む以下の JavaScript ファイルが存在している必要があります。
  • <Screen name>.js -画面に対応する JS ファイル。 このファイルでは、すべての動作ロジックを定義できます。
  • templates/<Screen name>.html -すべての UI 情報を含む HTML ファイル。
  • <Screen name>BehaviorController.js -画面上の何らかのアクションまたは動作で呼び出される mashuprefs の詳細を含む JS ファイル。
  • <Screen name>InitController.js -画面を開くときに呼び出される mashuprefs の詳細が含まれている JS ファイル。

<INSTALL_DIR>/extensions/wsc/webpages/controller/defaultJavaScript ファイルに加え、 および <Screen name>InitController.xml Controller XMLファイル <Screen name>BehaviorController.xml も ディレクトリ内に存在することを確認してください。 <Screen name>InitController.xml<Screen name>BehaviorController.xml<Screen name>InitController.js<Screen name>BehaviorController.js、、、、の作成に関する詳細については、「 コントローラーのカスタマイズ 」を参照してください。

< 画面名> .js ファイルの作成

<Screen name>.js ファイルの構文が Dojo バージョン 1.8 標準に準拠していることを確認します。 カスタム画面は sc/plat/dojo/widgets/Screenを拡張する必要があります。 さらに、以下のアプリケーション提供の標準を使用できます。

  • defineの代わりに scDefine を使用できます。
  • インポートされた JavaScript モジュールの前に scbase/loader! ストリングを付けることができます。 scbase/loader ストリングは、アプリケーションによって提供される Dojo ローダー・プラグインです。 Dojo 構文に従って、HTML ファイル・パスの前に dojo/text! ストリングを付けます。

必ず、 <INSTALL_DIR>/extensions/wsc/webpages フォルダー内にすべてのカスタム画面ファイルを作成してください。 WAR では、ファイルが extn フォルダーに存在するため、パッケージの前に extnを付けます。

注: 子画面を作成するには、 InitControllerではなく BehaviorController を使用してください。 BehaviorControllerのマッシュアップを実行するには、 afterScreenInit イベント・サブスクライバーを使用します。 画面にデータを表示するには、画面に対して setModel メソッドを呼び出します。

MyOrderScreenのサンプル

scDefine([
	"dojo/text!./templates/MyOrderScreen.html",
	"scbase/loader!dijit/form/Button",
	"scbase/loader!dojo/_base/declare",
	"scbase/loader!idx/form/TextBox",
	"scbase/loader!idx/layout/ContentPane",
	"scbase/loader!sc/plat/dojo/utils/BaseUtils",
	"scbase/loader!sc/plat/dojo/utils/EventUtils",
	"scbase/loader!sc/plat/dojo/widgets/Label",
	"scbase/loader!sc/plat/dojo/widgets/Link",
	"scbase/loader!sc/plat/dojo/widgets/Screen"
],
function(
	templateText,
	_dijitButton,
	_dojodeclare,
	_idxTextBox,
	_idxContentPane,
	_scBaseUtils,
	_scEventUtils,
	_scLabel,
	_scLink,
	_scScreen
) {
    return _dojodeclare("extn.customScreen.MyOrderScreen", [_scScreen], {
		templateString: templateText,
		uId: "customScreen",
		packageName: "extn.customScreen",
		className: "MyOrderScreen",
     showRelatedTask: true,
		namespaces: {
			targetBindingNamespaces: [{
				description: 'The input to the getOrderList mashup.',
				value: 'getOrderList'
			}],
			sourceBindingNamespaces: [{
				description: 'Initial input to screen',
				value: 'screenInput'
			}, {
				description: 'The list of organizations the current user can search for orders with.',
				value: 'getOrganizationList_output'
			}, {
				description: 'The response from the getOrderList mashup',
				value: 'getOrderList_output'
			}]
		},
		staticBindings: [{
            targetBinding: {
                path: 'Order.ApplyQueryTimeout',
                namespace: 'getOrderList'
            },
            sourceBinding: {
                sourceValue: 'Y',
                path: 'Order.ApplyQueryTimeout'
            }
        }],
		events: [{
			name: 'onPopupConfirm'
		}, {
			name: 'openOrderListPage'
		}],
		subscribers: {
			local: [{
				eventId: 'saveCurrentPage',
				sequence: '25',
				handler: {
					methodName: "save"
				}
			}, {
                eventId: 'afterScreenLoad',
                sequence: '25',
                handler: {
                    methodName: "updateEditorHeader"
                }
            },
			{
				eventId: 'bFindOrder_onClick',
				sequence: '30',
				description: '',
				handler: {
					methodName: "orderSearchAction",
					description: ""
				}
			}],
		},
		
		save: function() {
			var eventDefinition = null;
			_scEventUtils.fireEventToParent(this, "onSaveSuccess", eventDefinition);
		},

	 updateEditorHeader: function(
        event, bEvent, ctrl, args) {
            _iasBaseTemplateUtils.updateCustomerMessage(
            this, "CUST_ItemBrowsing", true);
            _iasBaseTemplateUtils.updateTitle(
            this, "blank", null);
            _scScreenUtils.focusFirstEditableWidget(
            this);
            return true;
        },

		orderSearchAction: function(event, bEvent, ctrl, args) {
			this.orderSearch();
		},
		orderSearch: function() {
			var root = null;
			root = _scBaseUtils.getTargetModel(this, "getOrderList", null);
			var eventDefinition = null;
			_scEventUtils.fireEventToParent(this, "openOrderListPage", eventDefinition);
		}
	});
});
ignoreStaticBindings メソッドは、 ScreenUtils.js ファイルに定義されています。 一部の静的バインディングからのデータを表示しない場合は、どの画面でも getTargetModel の前に呼び出すことができます。 例えば、このメソッドは、アドレス・キャプチャーを許可する任意の画面内の afterScreenInit イベントから呼び出すことができます。
ignoreStaticBindingsForAddressCapture:function(){
			var ignoreList = [{
				sourceBinding: {
					path: 'PersonInfo.AddressLine3',
					namespace: 'screenInput'
				},
n				targetBinding: {
					path: 'PersonInfo.AddressLine3',
					namespace: 'verifyAddress_input'
				}
			}];
			scScreenUtils.ignoreStaticBindings(this,ignoreList)
		}
このメソッドは、 AddressLine3 フィールドの静的バインディングを無視します。

以下の表で、画面のいくつかの重要な属性について説明します。

表 1. 画面属性
画面属性 説明
templateString 必須。 画面の UI を提供する HTML テンプレート・ファイル・パス。
uId 必須。 画面の固有 ID です。
packageName 必須。 画面のパッケージ名。
className 必須。 画面のクラス名。
ネームスペース 画面上で使用されるすべてのソースおよびターゲット名前空間を含むオブジェクト。 画面上で名前空間を使用する場合、この属性は必須です。
staticBindings 画面上で使用されるすべてのソースおよびターゲットの静的バインディング名前空間およびパスをリストするオブジェクト。 画面で静的バインディングを使用する場合、この属性は必須です。
イベント 画面によって公開されるイベントのリスト。 画面がいくつかのイベントをパブリッシュする場合、この属性は必須です。
サブスクライバー数 画面が listen するグローバル・イベントとローカル・イベントのリスト。 画面がいずれかのイベントを listen する場合、この属性は必須です。

テンプレートの作成/< 画面名> .html ファイル

templates/<Screen name>.html ファイルは、画面の UI をレンダリングします。 これには、画面に表示されるすべてのウィジェットが含まれ、Dojo 1.8 構文に従います。 これは、HTML ファイルを使用してウィジェットを宣言的に作成するために使用されます。

カスタム画面 JS ファイルに対して相対的な画面 HTML ファイルを templates フォルダーの下に作成するようにしてください。

MyOrderScreenのサンプル

<div class="sc-platform-screen-default myorderscreen">
	<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
		spanLabel: true,
		resourceId: 'WSCORD0001',
		'class': 'wscScreen portlet',
		colspan: 1,
		uId: 'portletPanel',
		layoutAlign: 'top',
		scParamDataFn: function() {
			return {
				'aria-label': this.getSimpleBundleString('Order')
			}
		}
	" role="region">
		<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
			spanLabel: true ,
			'class': 'contentSeparator portletHeader',
			uId: 'portletHeaderPanel'  
		">
			<div data-dojo-type="sc/plat/dojo/widgets/Label" data-dojo-props="
				'class': 'primaryInformation',
				uId: 'portletName',
				scParamDataFn: function() {
					return {
						value: this.getSimpleBundleString('Order')
					}
				}
			" role='heading'></div>
		</div>
		<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
			spanLabel: true,
			'class': 'PortletContent singlecolumntable',
			uId: 'findOrderPanel'
		">
			<div data-dojo-type="idx/form/TextBox" data-dojo-props="
				uId: 'txtOrderNo',
				scParamDataFn: function() {
					return {
						bindingData: {
							targetBinding: [{
								path: 'Order.OrderNo',
								namespace: 'getOrderList'
							}],
							sourceBinding: {
								path: 'Order.OrderNo',
								namespace: 'screenInput'
							}
						},
						label: this.getBundleString('OrderNo')
					}
				}
			"></div>
			<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
				'class': 'portletSearchBar',
				uId: 'pnlSearchBar'
			">
				<div data-dojo-type="dijit/form/Button" data-dojo-props="
					spanLabel: true,
					resourceId: 'WSCORD0001',
					showLabel: true,
					uId: 'bFindOrder',
					scParamDataFn: function() {
						return {
							label: this.getSimpleBundleString('FindOrder')
						}
					}
				"></div>
                <div data-dojo-type="sc/plat/dojo/widgets/Link" data-dojo-props="
					spanLabel: true,
					resourceId: 'WSCRTORD0001',
					'class': 'createLink',
					uId: 'bCreate',
					scParamDataFn: function() {
						return {
							value: this.getSimpleBundleString('CreateOrder')
						}
					}
				"></div>
            </div>
		</div>
	</div>
</div>
注:
  • 画面では、Dojo でサポートされている他の任意のウィジェットを使用できます。 ただし、バインディングおよびアプリケーション提供のイベント・フレームワークは、これらのウィジェットではサポートされていません。
  • 画面変数が配列の場合、画面の再初期化時に再初期化されません。 そのため、変数を再初期化する場合は、配列を再初期化するか配列を空にすることで、 afterScreenInit イベントを実行できます。

アプリケーション標準に従って、 data-dojo-props には scParamDataFn 関数属性が含まれています。 この属性は、動的に評価された値 (ウィジェットのラベル、タイトル、 bindingData など) を持つ JSON オブジェクトを返します。

以下のウィジェットはアプリケーションで使用されるため、バインディングおよびアプリケーション提供のイベント・フレームワークをサポートします。

編集可能なウィジェット

  • idx.form.CheckBox
  • idx.form.CheckBoxList
  • idx.form.DateTextBox
  • idx.form.FilteringSelect
  • idx.form.NumberTextBox
  • idx.form.RadioButtonSet
  • idx.form.Textarea
  • idx.form.TextBox
  • idx.form.CurrencyTextBox
注： モバイル版アプリケーションでは、ホーム・ページの「進行中のマイ・タスク」パネルやその中のパネルのようなリスト・パネルに編集可能なウィジェットを追加することはできません。 しかし、カスタマイズの一環として、パネルに編集可能なウィジェットを追加したい場合、パネルの onClick イベントに対するアプリケーション提供のサブスクライバを停止しなければなりません。 イベントに対するアプリケーション提供のサブスクライバの停止についての詳細は、 イベントとサブスクライバを参照してください。

編集不可ウィジェット

  • dijit.form.Button
  • sc.plat.dojo.widgets.DataLabel
  • dijit.form.TextBox (非表示ウィジェットとして使用)
  • sc.plat.dojo.widgets.Image
  • sc.plat.dojo.widgets.Link
  • sc.plat.dojo.widgets.Label

コンテナ―

  • idx.layout.ContentPane
  • idx.layout.MoveableTabContainer
  • idx.layout.TitlePane

特殊ウィジェット

  • sc.plat.dojo.widgets.Screen -基本画面ウィジェット
  • sc.plat.dojo.widgets.ControllerWidget -画面内の画面を保持するために使用されます。
  • sc.plat.dojo.widgets.IdentifierControllerWidget -画面内の画面を保持するために使用されます。
  • gridx.Grid -グリッド
  • sc.plat.dojo.widgets.IdentifierScreen - 「Address」 パネルに使用されます。
  • sc.plat.dojo.widgets.IFrame -IFrame ウィジェット
  • sc.plat.dojo.widgets.Editor -エディター・ウィジェット
  • sc.plat.dojo.widgets.Wizard -ウィザード
カスタム画面の場合、ウィザードによって以下のイベントが生成されます。
  • saveCurrentPage -このイベントは、現在のウィザード・ページに保存されていないデータを保存するために発生します。
  • reloadScreen -このイベントは、ウィザードの前のページを再ロードするために「前へ」をクリックすると発生します。
  • handleTabClose -このイベントは、エディターが閉じられると発生します。 ウィザードを閉じる前に、保存されていないデータをページに保存するようユーザーに求める警告メッセージが表示されます。 エディターを閉じるときにデータを保存するように求めるプロンプトがユーザーに出されるように、新規ウィザードの handleTabClose イベント・サブスクライバーを必ず定義してください。

関連タスク画面の表示

関連タスク画面は、エディターまたはウィザードのいずれかで表示できます。 エディターで関連タスク画面を表示するには、 showRelatedTask の値を trueに設定します。 ウィザードで関連タスク画面を表示するには、 showRelatedTaskInWizard の値を trueに設定します。

関連タスク画面の組み込み

以下のいずれかの方法で、関連タスク画面を組み込むことができます。
  • カスタム・エディターにウィザードがない場合は、以下の指示に従って、エディターで関連タスク画面を追加します。
    • カスタム・エディターで開いた画面の showRelatedTask 属性の値を true に設定します。 showRelatedTask 属性の詳細については、 MyOrderScreen ファイルのサンプルを参照してください。
    • エディターで開かれている画面で、サブスクライバーを afterScreenLoad イベントに追加します。 イベント・ハンドラーで、親 (エディター) のイベントを発生させます。 エディターの対応するイベント・ハンドラー ( showRelatedTask 属性の値に基づく) で、 EditorRelatedTaskUtilsの showOrHideRelatedTaskScreen メソッドを呼び出すことによって、「関連タスク」画面が動的に作成されます。
    • 「関連タスク」画面で、サブスクライバーを afterParentScreenStartup イベントに追加します。 イベント・ハンドラーで、親 (エディター) のイベントを発生させます。 エディターの対応するイベント・ハンドラーで、 EditorRelatedTaskUtilsの showRelatedTaskScreenHolder メソッドを呼び出して、関連タスクを表示します。 エディター・インスタンスを引数として渡します。 例えば、 iaseditorRelatedTaskUtils.showRelatedTaskScreenHolder(this)のようになります。

    アプリケーション提供のエディターの場合、 afterScreenLoad イベントのイベント・ハンドラーで、エディターで開いている画面から showOrHideRelatedTask イベントを発生させます。 「関連タスク」画面で、 afterParentScreenStartup イベントのイベント・ハンドラーで afterRTScreenStartup イベントを発生させます。

  • カスタム・エディターにウィザードがある場合は、以下のようにしてエディターに関連タスク画面を追加します。
    • ウィザードで showRelatedTaskInWizard 属性の値を true に設定します。 showRelatedTaskInWizard 属性について詳しくは、 サンプルの CustomWizard.js ファイルを参照してください。
    • ウィザードで、サブスクライバーを start イベントに追加します。 以下のサンプル・コードに示すように、イベント・ハンドラーでエディターのイベントを発生させます。
                  var eventDefn = null;
            eventDefn = _scBaseUtils.getNewBeanInstance();
            _scEventUtils.fireEventToParent(this, "showOrHideRelatedTask", eventDefn);
    • エディターの対応するイベント・ハンドラー ( showRelatedTaskInWizard 属性の値に基づく) で、 EditorRelatedTaskUtilsの showOrHideRelatedTaskScreen メソッドを呼び出すことによって、「関連タスク」画面が動的に作成されます。
    • 「関連タスク」画面で、サブスクライバーを afterParentScreenStartup イベントに追加します。 イベント・ハンドラーで、親 (エディター) のイベントを発生させます。 エディターの対応するイベント・ハンドラーで、 EditorRelatedTaskUtilsの showRelatedTaskScreenHolder メソッドを呼び出して、関連タスクを表示します。 エディター・インスタンスを引数として渡します。 例えば、 iaseditorRelatedTaskUtils.showRelatedTaskScreenHolder(this)のようになります。

    アプリケーション提供のエディターの場合、 start イベントのイベント・ハンドラーで、エディターで開かれているウィザードから showOrHideRelatedTask イベントを発生させます。 「関連タスク」画面で、 afterParentScreenStartup イベントのイベント・ハンドラーで afterRTScreenStartup イベントを発生させます。

関連タスク画面を作成する手順は、カスタム画面を作成する手順と同じです。 対応するエディター HTML ファイルに関連タスク画面を組み込みます。

関連タスク画面を埋め込んだら、関連タスクの非表示と非表示を切り替えることができます。 関連タスクを非表示または非表示解除するには、カスタム画面で、 afterScreenLoad イベントのサブスクライバーおよびハンドラーを追加します。 例えば、カスタム画面の updateEditorHeader イベント・ハンドラーには、関連タスクの非表示または非表示解除を可能にする updateTitle メソッドが含まれています。

カスタマイズされた画面をアプリケーションに追加して表示する

アプリケーション内のカスタマイズされた画面は、エディター、ウィザード、ポップアップ・ウィンドウなどで追加および表示することができます。 通常、カスタマイズされた画面を追加および表示するために使用されるユーティリティーは、 ControllerUtils、 BaseUtils、および WizardUtilsです。 例えば、エディターで画面を開くには、 ControllerUtilsで提供されているメソッドを使用します。 エディターでウィザードを開くには WizardUtilsを使用し、ポップアップ・ウィンドウで画面を開くには BaseUtilsを使用します。 最も一般的に使用されるメソッドは、 openScreenInEditor、 openWizardInEditor、 continueOpeningInEditor、および UIUtils.openSimplePopupです。 他のメソッドの使用について詳しくは、 JavaScript の資料を参照してください。

エディターの再利用

エディターを再利用するには、 <war_dir>/WSC/editors フォルダーから適切なエディターを選択し、比較属性を入力としてエディターに渡します。 例えば、 OrderEditorUI.js ファイルでは、 Order.OrderHeaderKey が比較属性になります。 OrderHeaderKey を入力としてオーダー・エディターに渡します。 比較属性の詳細については MyOrderEditorのサンプルを参照してください。
既存のエディターに存在するマッシュアップ呼び出しのリストを判別するには、以下のステップを実行します。
  1. <INSTALL_DIR>/WSC/editorsを参照します。
  2. 該当する BehaviorController.js ファイルを開きます。 例えば、アイテム検索エディターに適用できるマッシュアップのリストを判別するには、ItemSearchBehaviorController.js ファイルを開きます。 すべてのマッシュアップは、 mashupRefs オブジェクトの下にあります。