传统平台

向导窗口小部件

在线编辑

在客户机端，向导窗口小部件包含向导行为 JavaScript 类和 HTML UI 模板。

向导 JavaScript 类扩展 sc.plat.dojo.widgets.Wizard 类，进而扩展 sc.plat.dojo.widgets.Screen 类。 向导 JavaScript 类提供了用于在任何 UI 操作上与页面进行通信的框架。 它可以侦听向导实例上的 WizardUI 引发的事件，并提供相应的逻辑。

要创建定制向导窗口小部件，请确保存在以下包含完整 JavaScript 向导定义的 JavaScript 文件。

  • <Wizard name>.js -与向导对应的 JS 文件。 您可以在此文件中定义所有行为逻辑。
  • templates/<Wizard name>.html -包含所有 UI 信息的 HTML 文件。
  • <Wizard name>BehaviorController.js -包含针对向导上的某些操作或行为调用的 mashuprefs 详细信息的 JS 文件。
  • <Wizard name>InitController.js -包含启动向导时调用的 mashuprefs 详细信息的 JS 文件。

除了 JavaScript 文件外，请确保 <Wizard name>BehaviorController.xml 和 <Wizard name>InitController.xml Controller XML 文件也存在。

有关创建 <Wizard name>BehaviorController.js 和 <Wizard name>BehaviorController.xml以及 <Wizard name>InitController.js 和 <Wizard name>InitController.xml的更多信息，请参阅《 自定义控制器》。

注: 向导不支持 InitController 和 BehaviorController 中定义的聚合调用。

创建 <向导名称>.js 文件

确保 <Wizard name>.js 文件语法符合 Dojo V 1.8 标准。 定制向导必须扩展 sc.plat.dojo.widgets.Wizard。 此外，您可以使用以下应用程序提供的标准:

  • 您可以使用 scDefine 而不是 define。
  • 可以在导入的 JavaScript 模块之前使用 scbase/loader! 字符串。 scbase/loader 字符串是应用程序提供的 Dojo 装入器插件。 根据 Dojo 语法，在 html 文件路径前添加 dojo/text! 字符串。

确保至少导入 Wizard.js 文件，模板 HTML 文件和 Dojo 声明库。

以下样本 CustomWizard.js 文件说明了如何导入这些文件。

样本 1- CustomWizard.js 文件
scDefine(["dojo/text!./templates/CustomWizard.html", "scbase/loader!dijit/form/Button", "scbase/loader!dojo/_base/declare", "scbase/loader!dojo/_base/kernel", "scbase/loader!dojo/_base/lang", "scbase/loader!dojo/text", "scbase/loader!idx/layout/ContentPane", "scbase/loader!sc/plat",  "scbase/loader!sc/plat/dojo/utils/BaseUtils", "scbase/loader!sc/plat/dojo/utils/ControllerUtils", "scbase/loader!sc/plat/dojo/utils/EditorUtils", "scbase/loader!sc/plat/dojo/utils/EventUtils", "scbase/loader!sc/plat/dojo/utils/ModelUtils", "scbase/loader!sc/plat/dojo/utils/ResourcePermissionUtils", "scbase/loader!sc/plat/dojo/utils/ScreenUtils", "scbase/loader!sc/plat/dojo/utils/WidgetUtils", "scbase/loader!sc/plat/dojo/utils/WizardUtils", "scbase/loader!sc/plat/dojo/widgets/Wizard"], function(
templateText, _dijitButton, _dojodeclare, _dojokernel, _dojolang, _dojotext, _idxContentPane, _scplat,  _scBaseUtils, _scControllerUtils, _scEditorUtils, _scEventUtils, _scModelUtils, _scResourcePermissionUtils, _scScreenUtils, _scWidgetUtils, _scWizardUtils, _scWizard) {
    return _dojodeclare("extn.wizards.CustomWizard", [_scWizard], {
        templateString: templateText,
        uId: "customWizard",
        packageName: "extn.wizards",
        className: "CustomWizard",
        showRelatedTaskInWizard: false
        title: "CustomWizard",
        namespaces: {
            targetBindingNamespaces: [],
            sourceBindingNamespaces: [{
                value: 'getEnterpriseDetails'
            }]
        },
		staticBindings: [{
            targetBinding: {
                path: 'Item.CallingOrganizationCode',
                namespace: 'getCompleteItemList_input'
            },
            sourceBinding: {
                path: 'Order.EnterpriseCode',
                namespace: 'getCompleteOrderDetails_output'               
            }
        }],
        events: [{
            name: 'onSaveSuccess'
        }],
        subscribers: {
            local: [{
                eventId: 'nextBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleNext"
                }
            }, {
                eventId: 'prevBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handlePrevious"
                }
            }, {
                eventId: 'closeBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleClose"
                }
            }, {
                eventId: 'nextBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleNext"
                }
            }, {
                eventId: 'prevBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handlePrevious"
                }
            }, {
                eventId: 'closeBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleClose"
                }
            }
            ],
        },
        handleMashupOutput: function(
        mashupRefId, modelOutput, modelInput, mashupContext) {
           
        },

        handleClose: function(
        uiEvent, businessEvent, control, args) {
           
        },
        handleNext: function(
        uiEvent, businessEvent, control, args) {
            this.sendEventForSavePage("NEXT");
        },
        handleWizardCloseConfirmation: function(
        res) {

        },
        handlePrevious: function(
        uiEvent, businessEvent, control, args) {

        },
        onSaveSuccess: function(
        uiEvent, businessEvent, control, args) {
           
        },
        afterPrevious: function(
        uiEvent, businessEvent, control, args) {

        },
        afterSaveSuccessOnConfirm: function(
        uiEvent, businessEvent, control, args) {
            _scWizardUtils.confirmWizard(
            this);
        }
    });
});

<!-- handler functions for the events -->
handleNext: function( uiEvent, businessEvent, control, args) { 
//Code to open next page or buisness logic that must be executed when a user clicks on the Next button }, 
//Similar methods are applicable for Previous and Cancel buttons.
样本 2- CustomWizard.js 文件
scDefine(["dojo/text!./templates/CustomWizard.html", "scbase/loader!dijit/form/Button", "scbase/loader!dojo/_base/declare", "scbase/loader!dojo/_base/kernel", "scbase/loader!dojo/_base/lang", "scbase/loader!dojo/text", "scbase/loader!idx/layout/ContentPane", "scbase/loader!sc/plat",  "scbase/loader!sc/plat/dojo/utils/BaseUtils", "scbase/loader!sc/plat/dojo/utils/ControllerUtils", "scbase/loader!sc/plat/dojo/utils/EditorUtils", "scbase/loader!sc/plat/dojo/utils/EventUtils", "scbase/loader!sc/plat/dojo/utils/ModelUtils", "scbase/loader!sc/plat/dojo/utils/ResourcePermissionUtils", "scbase/loader!sc/plat/dojo/utils/ScreenUtils", "scbase/loader!sc/plat/dojo/utils/WidgetUtils", "scbase/loader!sc/plat/dojo/utils/WizardUtils", "scbase/loader!sc/plat/dojo/widgets/Wizard"], function(
templateText, _dijitButton, _dojodeclare, _dojokernel, _dojolang, _dojotext, _idxContentPane, _scplat,  _scBaseUtils, _scControllerUtils, _scEditorUtils, _scEventUtils, _scModelUtils, _scResourcePermissionUtils, _scScreenUtils, _scWidgetUtils, _scWizardUtils, _scWizard) {
    return _dojodeclare("extn.wizards.CustomWizard", [_scWizard], {
        templateString: templateText,
        uId: "customWizard",
        packageName: "extn.wizards",
        className: "CustomWizard",
        showRelatedTaskInWizard: false
        title: "CustomWizard",
        namespaces: {
            targetBindingNamespaces: [],
            sourceBindingNamespaces: [{
                value: 'getEnterpriseDetails'
            }]
        },
		        events: [{
            name: 'onSaveSuccess'
        }],
        subscribers: {
            local: [{
                eventId: 'nextBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleNext"
                }
            }, {
                eventId: 'prevBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handlePrevious"
                }
            }, {
                eventId: 'closeBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleClose"
                }
            }, {
                eventId: 'nextBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleNext"
                }
            }, {
                eventId: 'prevBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handlePrevious"
                }
            }, {
                eventId: 'closeBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleClose"
                }
            }
            ],
        },
        handleMashupOutput: function(
        mashupRefId, modelOutput, modelInput, mashupContext) {
           
        },

        handleClose: function(
        uiEvent, businessEvent, control, args) {
           
        },
        handleNext: function(
        uiEvent, businessEvent, control, args) {
            this.sendEventForSavePage("NEXT");
        },
        handleWizardCloseConfirmation: function(
        res) {

        },
        handlePrevious: function(
        uiEvent, businessEvent, control, args) {

        },
        onSaveSuccess: function(
        uiEvent, businessEvent, control, args) {
           
        },
        afterPrevious: function(
        uiEvent, businessEvent, control, args) {

        },
        afterSaveSuccessOnConfirm: function(
        uiEvent, businessEvent, control, args) {
            _scWizardUtils.confirmWizard(
            this);
        }
    });
});

<!-- handler functions for the events -->
handleNext: function( uiEvent, businessEvent, control, args) { 
//Code to open next page or buisness logic that must be executed when a user clicks on the Next button }, 
//Similar methods are applicable for Previous and Cancel buttons.

创建模板/<向导名称>.html 文件

sc.plat.dojo.widgets.Wizard 类不会为向导提供任何模板。 模板必须由相应的窗口小部件 html template.html定义。 template.html 文件与任何其他 Dojo 窗口小部件相同。 template.html 文件必须包含使用 dojoAttachPoint 定义为 stackContainerNode的 TableContainer 元素。 在 div 元素中，框架放置向导页面。 对于向导，您可以在 template.html 文件中定义导航按钮，例如 Next， Previous或 Confirm 。 定义框架支持的每个导航按钮的订户。 将使用由模板 HTML 文件内容填充的 templateString 变量来呈现向导。

样本 CustomWizard.html 文件

<div class="">
<div data-dojo-type="idx/layout/ContentPane" data-dojo-props=" spanLabel : true ,
colspan : 1 ,
uId : 'WizardScreenPanel' ,
layoutAlign : 'top'
">
<div data-dojo-type="idx/layout/ContentPane" data-dojo-props=" 'class' :
'wizardNavigationPanelTop wizardNavigationPanel' , uId : 'navigationPanel2' ,
renderHidden : true">
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxButtonIcon' , uId : 'prevBttn2' ,
iconClass : 'dijitIcon idxPreviousPageIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Previous')
}}
"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxSpecialButton idxButtonIcon' , uId : 'nextBttn2' ,
iconClass : 'dijitIcon idxNextPageIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Next')
}}
"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxButtonIcon' , uId : 'closeBttn2' ,
iconClass : 'dijitIcon idxCloseIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Cancel')
}}
"></div>
</div>
<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
'class' : 'wizardMainContainer' ,
dojoAttachPoint : 'stackContainerNode' ,
uId : 'mainContent' "></div>
<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
'class' : 'wizardNavigationPanel wizardNavigationPanelBottom' ,
uId : 'navigationPanel' ,
renderHidden : true
">
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxButtonIcon' , uId : 'prevBttn' ,
iconClass : 'dijitIcon idxPreviousPageIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Previous')
}}
"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxSpecialButton idxButtonIcon' ,
uId : 'nextBttn' ,
iconClass : 'dijitIcon idxNextPageIcon' ,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Next')
}}
"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxButtonIcon' , uId : 'closeBttn' ,
iconClass : 'dijitIcon idxCloseIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Cancel')
}}
"></div>
</div>
</div>
</div>
在此处，
  • uid : navigationPanel2 -引用包含导航按钮的顶部导航面板，例如，上一个 (prevBttn2) ，下一个 (nextBttn2) 和取消 (closeBttn2)。
  • uId : mainContent或 dojoAttachPoint : stackContainerNode 是指 div ，其中 SDK 框架放置在向导流中打开的向导页面。
  • uId : navigationPanel -引用包含导航按钮的底部导航面板，例如上一个 (prevBttn) ，下一个 (nextBttn) 和取消 (closeBttn)。

根据应用程序标准， data-dojo-props 包含 scParamDataFn 函数属性。 此属性返回具有窗口小部件的任何动态求值值 (例如，标签，标题或 bindingData ) 的 JSON 对象。

从向导窗口小部件到向导服务器控制器的输入

以下数据将在下一次通信时从向导窗口小部件发送到向导服务器控制器并启动通信:

  • editorInput -作为服务器组件的 scControllerInput 请求属性提供给服务器。
  • wizardInput -是为打开向导而提供的初始数据。 此数据在服务器上作为 scControllerInput 请求属性提供。
  • wizard namespace data -从向导定义上的名称空间访存 TargetBinding 数据，并将 alwayspass 属性设置为 true。 每次调用向导控制器时，都会传递此数据。 要访问服务器端数据，请使用 namespace id 作为密钥。

从向导服务器控制器输出到向导窗口小部件

下一次从向导服务器控制器输出到向导窗口小部件并启动通信 (下一个屏幕或第一个屏幕) 时，将从 InitController中的聚合调用中检索输出数据。 InitController 中的数据用于填充屏幕上相应的源名称空间。