레거시 플랫폼

사용자 정의 편집기 작성

온라인 편집

편집기는 애플리케이션에서 태스크를 여는 로직을 포함하는 특수 Dojo 컨테이너 위젯입니다. 편집기에는 유사한 태스크에 대해 일관된 모양을 제공하는 일부 UI 컴포넌트가 포함되어 있습니다. 예를 들어, 오더 수정 작업입니다.

사용자 정의 편집기를 작성하려면 JavaScript 화면 정의를 포함하는 다음 JavaScript 파일이 있어야 합니다.
  • <Editor Name.js> -편집기에 해당하는 JS 파일입니다. 이 파일에서 모든 동작 로직을 정의할 수 있습니다.
  • templates/<Editor name>.html -모든 UI 정보를 포함하는 HTML 파일입니다.
  • <Editor name>BehaviorController.js -편집기에서 일부 조치 또는 동작에 대해 호출되는 mashuprefs 세부사항을 포함하는 JS 파일입니다.
  • <Editor name>InitController.js -편집기를 시작할 때 호출되는 mashuprefs 세부사항을 포함하는 JS 파일입니다.

JavaScript 파일 외에 <Editor name>BehaviorController.xml 및 <Editor name>InitController.xml Controller XML 파일도 있는지 확인합니다.

, <Editor name>InitController.js <Editor name>BehaviorController.xml,, <Editor name>BehaviorController.js <Editor name>InitController.xml및 생성 방법에 대한 자세한 내용은 컨트롤러 사용자 지정을 참조하십시오.

사용자 정의 편집기의 경우 마법사 또는 화면에서 다음 이벤트가 발생합니다.
  • setScreenTitle -이 이벤트는 편집기 제목 패널에서 제목 및 부제를 설정하기 위해 실행됩니다. 예를 들어, 오더 생성 마법사에서 제목은 오더 생성이고 부제는 마법사 페이지의 첫 번째 화면인 고객 검색입니다.
  • setEditorInput -이 이벤트는 기존 편집기에서 마법사 또는 화면을 여는 데 사용되는 편집기 입력을 업데이트하기 위해 실행됩니다. 예를 들어, 오더 생성 마법사에서 고객을 선택하면 고객 식별 페이지에서 setEditorInput 이벤트가 발생하여 편집기 입력에서 고객 정보를 업데이트합니다.

< Editor name> .js 파일 작성

<Editor name>.js 파일 구문이 Dojo 버전 1.8 표준을 준수하는지 확인하십시오. 사용자 정의 편집기는 sc/plat/dojo/widgets/Editor를 확장해야 합니다. 또한 다음과 같은 애플리케이션 제공 표준을 사용할 수 있습니다.

  • define대신 scDefine 를 사용할 수 있습니다.
  • 가져온 JavaScript 모듈 앞에 scbase/loader! 문자열을 추가할 수 있습니다. scbase/loader 문자열은 애플리케이션에서 제공하는 Dojo 로더 플러그인입니다. Dojo 구문에 따라 html 파일 경로 앞에 dojo/text! 문자열을 추가하십시오.

MyOrderEditor 파일 샘플

scDefine(["dojo/text!./templates/MyOrderEditor.html", 
"scbase/loader!dojo/_base/declare", 
"scbase/loader!idx/layout/ContentPane", 
"scbase/loader!sc/plat", 
 "scbase/loader!sc/plat/dojo/binding/CurrencyDataBinder", 
 "scbase/loader!sc/plat/dojo/binding/ImageDataBinder", 
 "scbase/loader!sc/plat/dojo/layout/AdvancedTableLayout", 
 "scbase/loader!sc/plat/dojo/widgets/Editor",
 "scbase/loader!sc/plat/dojo/widgets/Image", 
 "scbase/loader!sc/plat/dojo/widgets/Label", 
 "scbase/loader!sc/plat/dojo/widgets/Link"], function(
templateText, _dojodeclare,  _idxContentPane, _scplat, _scCurrencyDataBinder, _scImageDataBinder, _scAdvancedTableLayout,  
 _scEditor,  _scImage, _scLabel, _scLink) {
    return _dojodeclare("extn.editors.MyOrderEditor", [_scEditor], {
        templateString: templateText,
        uId: "MyOrderEditor",
        packageName: "extn.editors",
        className: "MyOrderEditor",
        namespaces: {
            targetBindingNamespaces: [],
            sourceBindingNamespaces: [{
                description: 'Holds the initial editor input passed into the editor on open.',
                value: 'InitialEditorInput'
            }]
        },

// comparisonAttributes are used to create a model object (JSON Object), which is used for 
// comparing two different instances for the editor. If the model object that is created by using 
// comparisonAttributes for two instances of the editor are similar, they are identified as the 
// matching editor. This is mainly used to determine whether the new instance of the editor 
// must be opened in a new tab or focused on the matching editor. 
// This is used when using the sc.plat.dojo.utils.ControllerUtils.openScreenInEditor utility 
	      comparisonAttributes: ["Order.OrderHeaderKey"],    
        hotKeys: [],
        events: [ {
            name: 'setEditorInput'
        }],
        subscribers: {
            local: [ {
                eventId: 'setEditorInput',
                sequence: '25',
                handler: {
                    methodName: "setEditorInput"
                }
            }],
        },
      
        getScreenTitle: function() {

        },

        showOrHideRelTask: function(
        event, bEvent, ctrl, args) {
            var isWizardinitialized = null;
            var isRTscreeninitialized = null;
            isWizardinitialized = _scBaseUtils.getAttributeValue("isWizardinitialized", false, args);
            isRTscreeninitialized = _scBaseUtils.getAttributeValue("isRTscreeninitialized", false, args);
            if (!(
            _scBaseUtils.isVoid(
            isRTscreeninitialized))) {
                this.isRTscreeninitialized = isRTscreeninitialized;
            }
            if (!(
            _scBaseUtils.isVoid(
            isWizardinitialized))) {
                this.isWizardinitialized = isWizardinitialized;
            }
            if (!(
            _iasWidgetUtils.isWizardInstance(
            _scEditorUtils.getScreenInstance(
            this)))) {
                _iasBaseTemplateUtils.hideRelatedTask(
                this);
            } else {
                if (
                _scBaseUtils.and(
                _scBaseUtils.equals(
                this.isWizardinitialized, "true"), _scBaseUtils.equals(
                this.isRTscreeninitialized, "true"))) {
                    _iasBaseTemplateUtils.hideRelatedTask(
                    this);
                }
            }
        },

        updateScreenWithEditorInput: function(
			model) {

        },
        onScreenInit: function(
			event, bEvent, ctrl, args) {

        },
        setInitialEditorInput: function(
			screenInput) {

        },
        setScreenTitle: function(
			event, bEvent, ctrl, args) {

        },
        setEditorInput: function(
			event, bEvent, ctrl, args) {
		}
    });
});

Templates/< Editor name > .html 파일을 작성하십시오.

templates/<Editor name>.html 파일은 편집기의 UI를 렌더링합니다. 여기에는 편집기에 있는 모든 위젯이 포함되며 Dojo 1.8 구문을 준수합니다. HTML 파일을 사용하여 선언적으로 위젯을 작성하는 데 사용됩니다.

MyOrderEditor 파일 샘플

<div class="sc-platform-screen-default myordereditor">

	<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="spanLabel : true , 
		'class' : 'screenTitleContainer', 
		uId : 'titleMessagePanel'  
		">
		<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="	 spanLabel : true , 
			'class' : 'screenTitlePanel' , 
			uId : 'pnlTitleBar'  
			">
			<div data-dojo-type="sc/plat/dojo/layout/AdvancedTableLayout" data-dojo-props=" showLabels : false , 
				cols : 2 , 
				customClass : 'screenTitleTableContainer'  
				">
				<div data-dojo-type="sc/plat/dojo/widgets/Image" data-dojo-props="	'class' : 'icon-screen-order screenTitleImage' , 
					uId : 'lb_titleImage'  
					"></div>
				<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="	 spanLabel : true , 
					uId : 'pnlTitleContainer'  
					">
					<div data-dojo-type="sc/plat/dojo/widgets/Label" data-dojo-props="	spanLabel : true , 
						'class' : 'screenTitle' , 
						uId : 'lb_screenTitle'  
						"></div>
					<div data-dojo-type="sc/plat/dojo/widgets/Label" data-dojo-props="	spanLabel : true , 
						'class' : 'screenSubTitle' , 
						uId : 'lb_screenSubTitle'  
						,scParamDataFn :
						function() { 
						return { 
						title : this.getSimpleBundleString('blank')
						,	
						value : this.getSimpleBundleString('blank')
						}
						}
						"></div>
				</div>
			</div>
		</div>

		<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="	'class' : 'enterpriseHolder' , 
			uId : 'pnlEnterpriseHolder' , 
			'aria-label' : 'Current Enterprise'  
			" role='region'>
			<div data-dojo-type="sc/plat/dojo/widgets/Image" data-dojo-props="	'class' : 'icon-enterprise' , 
				uId : 'imgEnterprise'  
				"></div>
			<div data-dojo-type="sc/plat/dojo/widgets/Label" data-dojo-props="	'class' : 'icon-image-label groupHeader' , 
				uId : 'lblEnterprise'  
				,scParamDataFn :
				function() { 
				return { 
				bindingData : 	{
				sourceBinding : 	{
				path : 'Order.EnterpriseName'
				,
				namespace : 'enterpriseContext'
				}
				}
				}
				}
				"></div>
		</div>
	</div>
	<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="	 spanLabel : true , 
		'class' : 'csrMessagePanel' , 
		uId : 'customerMessagePanel'  
		" role='alert'>
		<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="	 spanLabel : true , 
			'class' : 'customerMessageBox' , 
			uId : 'lb_customerMessageBox' , 
			renderHidden : true  
			">
			<div data-dojo-type="sc/plat/dojo/widgets/Image" data-dojo-props="	'class' : 'customer-message' , 
				uId : 'imgCustomer'  
				,scParamDataFn :
				function() { 
				return { 
				title :this.getSimpleBundleString('CUST_ImageAlt')
				,	
				imageAlt :this.getSimpleBundleString('CUST_ImageAlt')
				}
				}
				"></div>
			<div data-dojo-type="sc/plat/dojo/widgets/Link" data-dojo-props="imageStyleClass : 'idxMessageCloseIcon' , 
				hasImage : true , 
				'class' : 'idxMessageRightAligned' , 
				uId : 'linkclose'  
				,scParamDataFn :
				function() { 
				return { 
				title : this.getSimpleBundleString('CUST_closeAlt')
				,	
				imageAlt : this.getSimpleBundleString('CUST_closeAlt')
				}
				}
				"></div>
			<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="	 'class' : 'customerMessageText' , 
				uId : 'pnlCustomerMessageText'  
				">
				<div data-dojo-type="sc/plat/dojo/widgets/Label" data-dojo-props="	uId : 'messageDescriptionText'  
					"></div>
			</div>
		</div>
	</div>
	<div data-dojo-type="idx/layout/ContentPane" data-dojo-props=" spanLabel : true , 
		uId : 'systemMessagePanel' , 
		renderHidden : true  
		"></div>
	<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="	 spanLabel : true , 
		'class' : 'editorContent' , 
		uId : 'editorContent'  
		" role='main'>
		<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="	 spanLabel : true , 
			uId : 'scScreenHolder'  
			" role='main'></div>

<!--The following div element is required to embed the Related Task screen -->
<div data-dojo-type="sc/plat/dojo/widgets/ControllerWidget" data-dojo-props="
	uId: 'RelatedTaskScreenHolder',
	packageName: 'wsc.editors',
	className: 'HomeEditorRT',
	handleInit: false,
	'class': 'relatedTaskHolder',
   dynamicLoading: true,
   renderHidden: true,
	 scParamDataFn: function() {
		return {
		}
	}">
</div>

<!--End of code to embed the Related Task screen -->
	</div>
	<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="		spanLabel : true , 
		resourceId : 'WSCFO0TER001' , 
		'class' : 'footer' , 
		uId : 'scFooterHolder'  
		" role='main'>
		<div data-dojo-type="sc/plat/dojo/widgets/Link" data-dojo-props=" uId : 'siteMapLink'  
			,scParamDataFn :
			function() { 
			return { 
			value : this.getSimpleBundleString('SiteMap')
			}
			}
			"></div>
	</div>
</div>

애플리케이션 표준에 따라 data-dojo-props 에는 scParamDataFn 함수 속성이 포함되어 있습니다. 이 속성은 위젯에 대해 동적으로 평가된 값 (예: 레이블, 제목 또는 bindingData ) 이 있는 JSON 오브젝트를 리턴합니다.

관련 태스크 화면 임베드

다음 방법 중 하나로 관련 태스크 화면을 임베드할 수 있습니다.
  • 사용자 정의 편집기에 마법사가 없는 경우 다음 지시사항에 따라 편집기에서 관련 태스크 화면을 추가하십시오.
    • 사용자 정의 편집기에서 열리는 화면에 대해 showRelatedTask 속성의 값을 true 로 설정하십시오. showRelatedTask 의 속성에 대한 자세한 정보는 Sample 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 메소드가 포함되어 있습니다.

편집기 재사용

편집기를 재사용하려면 <war_dir>/WSC/editors 폴더에서 적절한 편집기를 선택하고 비교 속성을 편집기에 입력으로 전달하십시오. 예를 들어, OrderEditorUI.js 파일에서 Order.OrderHeaderKey 는 비교 속성입니다. OrderHeaderKey 를 주문 편집기에 입력으로 전달하십시오. 비교 속성에 대한 자세한 내용은 MyOrderEditor 파일 샘플을 참고하세요.
기존 편집기에 있는 매시업 호출 목록을 판별하려면 다음 단계를 수행하십시오.
  1. <INSTALL_DIR>/WSC/editors를 찾아보십시오.
  2. 적절한 BehaviorController.js 파일을 여십시오. 예를 들어, 아이템 검색 편집기에 적용 가능한 매시업 목록을 판별하려면ItemSearchBehaviorController.js 파일을 여십시오. 모든 매시업은 mashupRefs 오브젝트 아래에 있습니다.