Crea schermate personalizzate

Crea il file < Nome schermo> .js

Accertarsi che la sintassi del file <Screen name>.js sia conforme agli standard Dojo versione 1.8 . Lo schermo personalizzato deve estendere sc/plat/dojo/widgets/Screen. Inoltre, è possibile utilizzare i seguenti standard forniti dall'applicazione:

• È possibile utilizzare scDefine invece di define.
• È possibile far precedere i moduli JavaScript importati dalla stringa scbase/loader! . La stringa scbase/loader è un plug-in del programma di caricamento Dojo fornito dall'applicazione. Far precedere un percorso file html da una stringa dojo/text! in base alla sintassi Dojo.

Assicurarsi di creare tutti i file di schermo personalizzati nella cartella <INSTALL_DIR>/extensions/wsc/webpages . In WAR, poiché i file sono presenti nella cartella extn , anteporre al package extn.

Esempio di file MyOrderScreen.js

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);
		}
	});
});

ignoreStaticBindingsForAddressCapture:function(){
			var ignoreList = [{
				sourceBinding: {
					path: 'PersonInfo.AddressLine3',
					namespace: 'screenInput'
				},
n				targetBinding: {
					path: 'PersonInfo.AddressLine3',
					namespace: 'verifyAddress_input'
				}
			}];
			scScreenUtils.ignoreStaticBindings(this,ignoreList)
		}

La seguente tabella descrive alcuni attributi importanti di uno schermo.

Crea il file template / < nome schermo> .html

Il file templates/<Screen name>.html esegue il rendering della UI per una schermata. Contiene tutti i widget presenti nello schermo e aderisce alla sintassi Dojo 1.8 . Viene utilizzato per creare i widget in modo dichiarativo utilizzando un file HTML.

Assicurarsi di creare il file HTML di schermo nella cartella templates relativo al file JS di schermo personalizzato.

Esempio di file MyOrderScreen.html

<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>

In base allo standard dell'applicazione, data-dojo-props contiene l'attributo della funzione scParamDataFn . Questo attributo restituisce un oggetto JSON con qualsiasi valore valutato dinamicamente come etichetta, titolo o bindingData per il widget.

Poiché i seguenti widget vengono utilizzati nell'applicazione, supportano i bind e il framework di evento fornito dall'applicazione:

Widget modificabili

• 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

Widget non modificabili

• dijit.form.Button
• sc.plat.dojo.widgets.DataLabel
• dijit.form.TextBox (utilizzare come widget nascosto)
• sc.plat.dojo.widgets.Image
• sc.plat.dojo.widgets.Link
• sc.plat.dojo.widgets.Label

Container

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

Widget speciali

• sc.plat.dojo.widgets.Screen - il widget della schermata di base
• sc.plat.dojo.widgets.ControllerWidget - utilizzato per conservare gli schermi all'interno di uno schermo
• sc.plat.dojo.widgets.IdentifierControllerWidget - utilizzato per conservare gli schermi all'interno di uno schermo
• gridx.Grid - griglia
• sc.plat.dojo.widgets.IdentifierScreen - utilizzato per i pannelli Address
• sc.plat.dojo.widgets.IFrame - Widget IFrame
• sc.plat.dojo.widgets.Editor - Widget Editor
• sc.plat.dojo.widgets.Wizard - procedura guidata

• saveCurrentPage - Questo evento viene emesso per salvare i dati non salvati nella pagina della procedura guidata corrente.
• reloadScreen - Questo evento viene emesso facendo clic su Indietro per ricaricare la pagina precedente nella procedura guidata.
• handleTabClose - Questo evento viene generato quando un editor viene chiuso. Prima di chiudere la procedura guidata, viene visualizzato un messaggio di avvertenza che richiede all'utente di salvare i dati non salvati nella pagina. Accertarsi di definire il sottoscrittore eventi handleTabClose per le nuove procedure guidate, in modo che all'utente venga chiesto di salvare i dati alla chiusura dell'editor.

Visualizza la schermata delle attività correlate

È possibile visualizzare la schermata delle attività correlate in un editor o in una procedura guidata. Per visualizzare la schermata delle attività correlate in un editor, impostare il valore di showRelatedTask su true. Per visualizzare la finestra delle attività correlate in una procedura guidata, impostare il valore di showRelatedTaskInWizard su true.

Integra la schermata delle attività correlate

La procedura per creare la schermata delle attività correlate è uguale alla creazione di una schermata personalizzata. Integrare la schermata delle attività correlate nel corrispondente file HTML dell'editor.

Dopo aver incorporato la schermata delle attività correlate, è possibile nascondere o visualizzare le attività correlate. Per nascondere o visualizzare le attività correlate, nelle schermate personalizzate aggiungere un sottoscrittore e un gestore per l'evento afterScreenLoad . Ad esempio, nella schermata personalizzata, il gestore eventi updateEditorHeader contiene il metodo updateTitle che consente di nascondere o visualizzare le attività correlate.

Aggiungere e visualizzare la schermata personalizzata nell'applicazione

È possibile aggiungere e visualizzare lo schermo personalizzato nell'applicazione in un editor, in una procedura guidata, in una finestra a comparsa e in altri. Di solito, i programmi di utilità utilizzati per aggiungere e visualizzare le schermate personalizzate sono ControllerUtils, BaseUtilse WizardUtils. Ad esempio, per aprire le schermate in un editor, utilizzare i metodi forniti in ControllerUtils. Per aprire le procedure guidate in un editor, utilizzare WizardUtilse per aprire una finestra a comparsa, utilizzare BaseUtils. I metodi più comunemente utilizzati sono openScreenInEditor, openWizardInEditor, continueOpeningInEditore UIUtils.openSimplePopup. Per ulteriori informazioni sull'utilizzo di altri metodi, consultare la documentazione JavaScript .

Riutilizza un editor