[UI5 常用控件] 08.Wizard，NavContainer

2024-02-09 08:12
文章标签 常用 控件 08 ui5 wizard navcontainer

本文主要是介绍[UI5 常用控件] 08.Wizard，NavContainer，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 前言
  • 1. Wizard
    • 1.1 基本结构
    • 1.2 属性
      • 1.2.1 Wizard：complete
      • 1.2.2 Wizard：finishButtonText
      • 1.2.3 Wizard：currentStep
      • 1.2.4 Wizard：backgroundDesign
      • 1.2.5 Wizard：enableBranching
      • 1.2.6 WizardStep：validated
      • 1.2.7 WizardStep：complete
    • 1.3 跳转函数
      • 1.3.1 goToStep
      • 1.3.2 discardProgress
  • 2. NavContainer
    • 2.1 基本组成
    • 2.2 Page跳转
  • 3. 示例代码

前言

本章节记录常用控件 Wizard，NavContainer。

  • Wizard控件是一种用于分步导航和指导用户完成多步骤任务的界面控件。它通常用于创建复杂的表单或流程，其中用户需要按照一定的顺序完成多个步骤。Wizard控件可以将整个过程分解为一系列步骤，并允许用户逐步完成每个步骤。
  • NavContainer 是 SAPUI5 中用于实现页面导航的容器控件。它允许在同一个页面上管理多个子页面，并支持页面之间的导航。

其路径是：

  • sap.m.Wizard
  • sap.m.NavContainer

1. Wizard

1.1 基本结构

<Wizard>
<WizardStep></WizardStep>
<WizardStep></WizardStep>
<WizardStep></WizardStep>
</Wizard>

1.2 属性

1.2.1 Wizard：complete

  • 当所有Step完成时提供Preview按钮绑定事件

在这里插入图片描述

	<Wizardid="CreateProductWizard"complete="wizardCompletedHandler">

wizardCompletedHandler:function(){this._oNavContainer.to(this.byId("wizardReviewPage"));},

1.2.2 Wizard：finishButtonText

  • 更改最后一个步骤的按钮文本。默认是Preview

在这里插入图片描述

1.2.3 Wizard：currentStep

  • 指定初始化时显示的步骤

在这里插入图片描述

1.2.4 Wizard：backgroundDesign

  • 共有4种属性Standard,Solid,List,Transparent。 具体效果差异不大

1.2.5 Wizard：enableBranching

  • 可以分配Step中的分支，并指定需要的Step作为下一步
  • 要配合WizardStep中的subsequentSteps,nextStep使用.
  • 必须初始化时指定subsequentSteps对应组建的nextStep （onAfterRendering）
  • View
   <Button text="更换为A-C-B" press="ChangeStep"></Button><Wizard id="customStep" enableBranching="true" backgroundDesign="Solid"><WizardStep id="A" title="A" subsequentSteps="B,C"></WizardStep><WizardStep id="B" title="B" nextStep="D"></WizardStep><WizardStep id="C" title="C" nextStep="D"></WizardStep><WizardStep id="D" title="D" ></WizardStep></Wizard>
  • Controller
	onAfterRendering: function () {var stepA = this.byId("A")var stepB = this.byId("B")stepA.setNextStep(stepB)    },ChangeStep:function(){var wizard2 = this.byId("customStep")wizard2.discardProgress(wizard2.getSteps()[0]);var stepA = this.byId("A")var stepC = this.byId("C")stepA.setNextStep(stepC)    },

1.2.6 WizardStep：validated

  • 判断当前页面有无错误。如果没有错误则显示下一步按钮，否则不显示下一步按钮
  • 再控制器中使用validateStep,invalidateStep控制属性
  • 结合activate属性一起使用，activate事件绑定控制validated属性的逻辑

在这里插入图片描述

	<WizardStepid="ProductInfoStep"validated="false"title="基本信息"activate="additionalInfoValidation">

	additionalInfoValidation: function () {var name = this.byId("ProductName").getValue();var unit = this.byId("ProductUnit").getValue();if (unit != "EA") {this._wizard.setCurrentStep(this.byId("ProductInfoStep"));this.model.setProperty("/productUnitState", "Error");} else {this.model.setProperty("/productUnitState", "None");}if (name.length < 6) {this._wizard.setCurrentStep(this.byId("ProductInfoStep"));this.model.setProperty("/productNameState", "Error");} else {this.model.setProperty("/productNameState", "None");}if (name.length < 6 || unit != "EA") {this._wizard.invalidateStep(this.byId("ProductInfoStep"));} else {this._wizard.validateStep(this.byId("ProductInfoStep"));}},

1.2.7 WizardStep：complete

  • 当点击下一步按钮之后触发事件
  • View
	<WizardStepid="PricingStep"complete="inputComplete"validated="true"title="最后确认">
  • Controller
	inputComplete: function () {this.model.setProperty("/complete", true)debugger},

1.3 跳转函数

1.3.1 goToStep

  • pageno是需要跳转的Step
this._wizard.goToStep(this._wizard.getSteps()[pageno]);

在这里插入图片描述

1.3.2 discardProgress

  • 撤回所有Step并跳转
this._wizard.discardProgress(this._wizard.getSteps()[pageno]);

在这里插入图片描述

2. NavContainer

2.1 基本组成

  • 默认会显示第一个Page，之后会通过事件进行Page之间的跳转
<NavContainer><pages><Page></Page><Page></Page></pages>
</NavContainer>

2.2 Page跳转

  • 跳转到指定Page
	this._oNavContainer = this.byId("wizardNavContainer");this._oNavContainer.to(this.byId("wizardReviewPage"));
  • 跳转到之前Page
	this._oWizardContentPage = this.byId("wizardContentPage");this._oNavContainer.backToPage(this._oWizardContentPage.getId());
  • 绑定跳转事件
	var fnAfterNavigate = function () {this._wizard.goToStep(this._wizard.getSteps()[pageno]);this._oNavContainer.detachAfterNavigate(fnAfterNavigate);}.bind(this);this._oNavContainer.attachAfterNavigate(fnAfterNavigate);

3. 示例代码

  • View
<mvc:ViewcontrollerName="c080.controller.Main"xmlns:form="sap.ui.layout.form"xmlns:mvc="sap.ui.core.mvc"xmlns:core="sap.ui.core"displayBlock="true"xmlns="sap.m"
><NavContainer id="wizardNavContainer"><pages><Pageid="wizardContentPage"title="{i18n>title}"><Wizardid="CreateProductWizard"complete="wizardCompletedHandler"finishButtonText="最后确认"currentStep="LastStep"><WizardStepid="ProductTypeStep"title="物料类型"validated="true"><MessageStripclass="sapUiSmallMarginBottom"text="请选择物料类型，并点击下一步"showIcon="true"type="Information"/><HBoxalignItems="Center"justifyContent="Center"width="100%"><SegmentedButtonwidth="320px"selectionChange="setProductTypeFromSegmented"><items><SegmentedButtonItemicon="sap-icon://database"text="成品"/><SegmentedButtonItemicon="sap-icon://technical-object"text="原料"/><SegmentedButtonItemicon="sap-icon://tags"text="其他"/></items></SegmentedButton></HBox></WizardStep><WizardStepid="ProductInfoStep"validated="false"title="基本信息"activate="additionalInfoValidation"><MessageStripclass="sapUiSmallMarginBottom"text="通过validated属性控制下一步按钮的显示。具体调用validateStep(Step) / invalidateStep(Step)  "showIcon="true"/><form:SimpleFormeditable="true"layout="ResponsiveGridLayout"><Labeltext="物料描述"required="true"/><InputvalueStateText="请输入6位以上的文字"valueState="{/productNameState}"id="ProductName"liveChange="additionalInfoValidation"placeholder="请输入6位以上的文字"value="{/productName}"/><Labeltext="基本单位"required="true"/><InputvalueStateText="基本单位只能输入EA"valueState="{/productUnitState}"id="ProductUnit"liveChange="additionalInfoValidation"type="Text"placeholder="请输入单位"value="{/productUnit}"/><Label text="物料组" /><Select selectedKey="{/productGroup}"><core:Itemkey="10"text="笔记本"/><core:Itemkey="20"text="台式机"/><core:Itemkey="30"text="一体机"/></Select><Label text="备注" /><TextAreavalue="{/productDescription}"rows="5"/></form:SimpleForm></WizardStep><WizardStepid="OptionalInfoStep"title="额外信息"><MessageStripclass="sapUiSmallMarginBottom"text="请输入额外信息"showIcon="true"/><VBox><form:SimpleFormeditable="true"layout="ResponsiveGridLayout"><Label text="采购类型" /><CheckBoxid="inStock"text="内部生产"valueState="Information"selected="{/inStock}"select="onCheckBoxSelect"/><CheckBoxid="outStock"text="外部采购"valueState="Information"selected="{/outStock}"select="onCheckBoxSelect"/><Label text="其他信息" /><TextAreavalue="{/optionalDescription}"rows="5"/></form:SimpleForm></VBox><!-- <HBox justifyContent="Start"><Button text="Save" type="Emphasized" width="100px"></Button></HBox> --></WizardStep><WizardStepid="LastStep"complete="inputComplete"validated="true"title="最后确认"><MessageStripclass="sapUiSmallMarginBottom"text="使用previousStep() 和 nextStep() 方法跳转wizard步骤. 另外 GoToStep(step) 方法可以跳转指定步骤"showIcon="true"/></WizardStep></Wizard><Button text="更换为A-C-B" press="ChangeStep"></Button><Wizard id="customStep" enableBranching="true" backgroundDesign="Solid"><WizardStep id="A" title="A" subsequentSteps="B,C"></WizardStep><WizardStep id="B" title="B" nextStep="D"></WizardStep><WizardStep id="C" title="C" nextStep="D"></WizardStep><WizardStep id="D" title="D" ></WizardStep></Wizard><footer><Bar><contentRight><Buttontext="Cancel"press="handleWizardCancel"/></contentRight></Bar></footer></Page><Pageid="wizardReviewPage"showHeader="false"><form:SimpleFormtitle="1. 物料类型"editable="false"layout="ResponsiveGridLayout"><Label text="物料类型" /><HBox renderType="Bare"><core:Iconsrc="{/productTypeIcon}"class="sapUiSmallMarginEnd"/><Textid="ProductTypeChosen"text="{/productType}"/></HBox><Linkpress="editStep1"text="Edit"/></form:SimpleForm><form:SimpleFormtitle="2. 基本信息"editable="false"layout="ResponsiveGridLayout"><Label text="物料描述" /><Text text="{/productName}" /><Label text="基本单位" /><Text text="{/productUnit}" /><Label text="物料组" /><Text text="{/productGroup}" /><Label text="备注" /><Text text="{/productDescription}" /><Linkpress="editStep2"text="Edit"/></form:SimpleForm><form:SimpleFormtitle="3. 额外信息"editable="false"layout="ResponsiveGridLayout"><Label text="采购类型" /><Texttext="{= ${/inStock} ? ${/outStock} ? '内部生产，外部采购' : '内部生产' : ${/outStock} ? '外部采购' : '无'}"/><Label text="其他信息" /><Text text="{/optionalDescription}" /><Linkpress="editStep3"text="Edit"/></form:SimpleForm><footer><Bar><contentRight><Buttontext="提交"press="handleWizardOk"/><Buttontext="取消"press="handleWizardCancel"/></contentRight></Bar></footer></Page></pages></NavContainer></mvc:View>
  • Controller
sap.ui.define(["sap/ui/core/mvc/Controller",'sap/ui/model/json/JSONModel'
],/*** @param {typeof sap.ui.core.mvc.Controller} Controller*/function (Controller, JSONModel) {"use strict";return Controller.extend("c080.controller.Main", {onInit: function () {this._wizard = this.byId("CreateProductWizard");this._oNavContainer = this.byId("wizardNavContainer");this._oWizardContentPage = this.byId("wizardContentPage");this.model = new JSONModel();this.model.setData({productNameState: "Error",productUnitState: "Error",productName: "测试用物料010",productUnit: "EA",productGroup: "20",productDescription: "SAP（Systems, Applications, and Products）是一套全球领先的企业管理软件解决方案，帮助企业整合各业务流程，提高效率。其包括ERP（企业资源规划）、CRM（客户关系管理）、SCM（供应链管理）等模块，涵盖财务、人力资源、生产等方面。SAP通过实时数据处理和集成，优化企业运营，提供智能决策支持。其灵活性和可扩展性使其适用于各行各业，成为全球众多企业的首选解决方案，助力业务创新和数字化转型。",optionalDescription: "UI5是SAP开发的用户界面框架，基于HTML5技术，用于构建现代、响应式、直观的企业级Web应用程序。它支持模块化、扩展性强，提供丰富的控件库，简化开发流程，实现优秀的用户体验。",productType: "成品",productTypeIcon: "sap-icon://database",inStock: false,outStock: false,complete: false});this.getView().setModel(this.model);},onAfterRendering: function () {var stepA = this.byId("A")var stepB = this.byId("B")stepA.setNextStep(stepB)    },ChangeStep:function(){var wizard2 = this.byId("customStep")wizard2.discardProgress(wizard2.getSteps()[0]);var stepA = this.byId("A")var stepC = this.byId("C")stepA.setNextStep(stepC)    },additionalInfoValidation: function () {var name = this.byId("ProductName").getValue();var unit = this.byId("ProductUnit").getValue();if (unit != "EA") {this._wizard.setCurrentStep(this.byId("ProductInfoStep"));this.model.setProperty("/productUnitState", "Error");} else {this.model.setProperty("/productUnitState", "None");}if (name.length < 6) {this._wizard.setCurrentStep(this.byId("ProductInfoStep"));this.model.setProperty("/productNameState", "Error");} else {this.model.setProperty("/productNameState", "None");}if (name.length < 6 || unit != "EA") {this._wizard.invalidateStep(this.byId("ProductInfoStep"));} else {this._wizard.validateStep(this.byId("ProductInfoStep"));}},setProductTypeFromSegmented: function (evt) {var productType = evt.getParameters().item.getText();var productTypeIcon = evt.getParameters().item.getIcon();this.model.setProperty("/productType", productType);this.model.setProperty("/productTypeIcon", productTypeIcon);},onCheckBoxSelect: function (evt) {// debuggervar oText = evt.getSource().getProperty('text');var isSelected = evt.getParameters().selected;if (oText === "内部制作") {this.model.setProperty("/inStock", isSelected);} else if (oText === "外部采购") {this.model.setProperty("/outStock", isSelected);}},wizardCompletedHandler: function () {this._oNavContainer.to(this.byId("wizardReviewPage"));},inputComplete: function () {this.model.setProperty("/complete", true)},goToPage: function (pageno) {var fnAfterNavigate = function () {this._wizard.goToStep(this._wizard.getSteps()[pageno]);this._oNavContainer.detachAfterNavigate(fnAfterNavigate);}.bind(this);this._oNavContainer.attachAfterNavigate(fnAfterNavigate);this._oNavContainer.backToPage(this._oWizardContentPage.getId());},editStep1: function () {this.goToPage(0)},editStep2: function () {this.goToPage(1)},editStep3: function () {this.goToPage(2)},handleWizardCancel: function () {// alert(11)this._oNavContainer.backToPage(this._oWizardContentPage.getId());this._wizard.discardProgress(this._wizard.getSteps()[0]);}});});

这篇关于[UI5 常用控件] 08.Wizard，NavContainer的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/693662。

相关文章

golang中reflect包的常用方法

golang中reflect包的常用方法

《golang中reflect包的常用方法》Go反射reflect包提供类型和值方法,用于获取类型信息、访问字段、调用方法等,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值... 目录reflect包方法总结类型 (Type) 方法值 (Value) 方法reflect包方法总结
阅读更多...
C# 比较两个list 之间元素差异的常用方法

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》：本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin
阅读更多...
python常用的正则表达式及作用

python常用的正则表达式及作用

《python常用的正则表达式及作用》正则表达式是处理字符串的强大工具,Python通过re模块提供正则表达式支持,本文给大家介绍python常用的正则表达式及作用详解,感兴趣的朋友跟随小编一起看看吧... 目录python常用正则表达式及作用基本匹配模式常用正则表达式示例常用量词边界匹配分组和捕获常用re
阅读更多...
gitlab安装及邮箱配置和常用使用方式

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》：本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的
阅读更多...
Python常用命令提示符使用方法详解

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,：本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安
阅读更多...
python判断文件是否存在常用的几种方式

python判断文件是否存在常用的几种方式

《python判断文件是否存在常用的几种方式》在Python中我们在读写文件之前,首先要做的事情就是判断文件是否存在,否则很容易发生错误的情况,：本文主要介绍python判断文件是否存在常用的几种... 目录1. 使用 os.path.exists()2. 使用 os.path.isfile()3. 使用
阅读更多...
Java实现本地缓存的常用方案介绍

Java实现本地缓存的常用方案介绍

《Java实现本地缓存的常用方案介绍》本地缓存的代表技术主要有HashMap,GuavaCache,Caffeine和Encahche,这篇文章主要来和大家聊聊java利用这些技术分别实现本地缓存的方... 目录本地缓存实现方式HashMapConcurrentHashMapGuava CacheCaffe
阅读更多...
Python将字符串转换为小写字母的几种常用方法

Python将字符串转换为小写字母的几种常用方法

《Python将字符串转换为小写字母的几种常用方法》：本文主要介绍Python中将字符串大写字母转小写的四种方法：lower()方法简洁高效,手动ASCII转换灵活可控,str.translate... 目录一、使用内置方法 lower()（最简单）二、手动遍历 + ASCII 码转换三、使用 str.tr
阅读更多...
WinForms中主要控件的详细使用教程

WinForms中主要控件的详细使用教程

《WinForms中主要控件的详细使用教程》WinForms(WindowsForms)是Microsoft提供的用于构建Windows桌面应用程序的框架,它提供了丰富的控件集合,可以满足各种UI设计... 目录一、基础控件1. Button (按钮)2. Label (标签)3. TextBox (文本框
阅读更多...
Spring Boot 常用注解整理(最全收藏版)

Spring Boot 常用注解整理(最全收藏版)

《SpringBoot常用注解整理(最全收藏版)》本文系统整理了常用的Spring/SpringBoot注解,按照功能分类进行介绍,每个注解都会涵盖其含义、提供来源、应用场景以及代码示例,帮助开发... 目录Spring & Spring Boot 常用注解整理一、Spring Boot 核心注解二、Spr
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2