1. Toy模板网首页
  2. > Toy博客

【SAP UI5 控件学习】DAY04 Input组Part IV 完结&&List组Part I

7月前 作者：lyx7762 分类：Toy博客 阅读(32) 违法举报

这篇具有很好参考价值的文章主要介绍了【SAP UI5 控件学习】DAY04 Input组Part IV 完结&&List组Part I。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.时间选择器Time Picker

和Data Picker类似，Time Picker允许用户选择相应的时间。
【SAP UI5 控件学习】DAY04 Input组Part IV 完结&&List组Part I,学习,list,数据结构,SAPUI5,前端框架
它有以下一些比较常用的属性。

  • value用于显示Input中的时间的值，这个属性只能接受字符串的值，如果是UI5.getInstance()获取到的时间，需要转化成相应的字符串才可以
  • valueFormat用于设置显示日期的格式，这个格式会影响Input框中的格式，也会影响Time Picker显示的格式
  • placeholder用于显示提示信息
  • maskMode这个通常设置为true，这样用户就只能在输入框中输入指定格式的时间，如果输入字母等其他字符，是不可以输入进去的。

关于valueFormat的格式

  • HH24小时制的小时
  • hh12小时制的小时
  • mm分钟
  • ss秒
  • a12小时制的情况下使用，用于显示上午还是下午

相关事件change
当用户选择了日期后，会触发这个事件，可以在这个事件中获取到用户选择的事件

handleChange: function (oEvent) {
	var sValue = oEvent.getParameter("value"),
	MessageToast.show("The selected time is  " + sValue);
}

具体代码如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:form="sap.ui.layout.form"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<Panel
		width="auto"
		class="sapUiResponsiveMargin"
	>
		<headerToolbar>
			<OverflowToolbar>
				<Title text="maskMode"/>
			</OverflowToolbar>
		</headerToolbar>
		<content>
			<HBox alignItems="Center">
				<Text
					renderWhitespace="true"
					text="maskMode is  "
				/>
				<Switch state="{/maskMode/state}"/>
				<Text
					renderWhitespace="true"
					text="  for all TimePickers below"
				/>
			</HBox>
			<Text
				class="sapUiSmallMarginTop"
				visible="{/maskMode/state}"
				text="When maskMode is 'On', the TimePicker field accepts only the time format predefined by the mask."
			/>
			<Text
				class="sapUiSmallMarginTop"
				visible="{= !${/maskMode/state}}"
				text="When maskMode is 'Off', the users can enter anything in the TimePicker field. The field is still validated. The 'change' event returns two parameters - 'value' (that is entered) and 'valid' (true or false depending on the validity of the 'value')
					."
			/>
		</content>
	</Panel>
	<VBox class="sapUiSmallMargin">
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP1/format}"
		/>
		<TimePicker
			id="TP1"
			value="{/timePickers/TP1/value}"
			valueFormat="{/timePickers/TP1/format}"
			displayFormat="{/timePickers/TP1/format}"
			change="handleChange"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP1/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP2/format}, showCurrentTimeButton: {/timePickers/TP2/showCurrentTimeButton}"
		/>
		<TimePicker
			id="TP2"
			valueFormat="{/timePickers/TP2/format}"
			displayFormat="{/timePickers/TP2/format}"
			showCurrentTimeButton="true"
			change="handleChange"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP2/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="hh:mm a,
				value: {/timePickers/TP3/value}"
		/>
		<TimePicker
			id="TP3"
			change="handleChange"
			value="{/timePickers/TP3/value}"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP3/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP4/format}"
		/>
		<TimePicker
			id="TP4"
			valueFormat="{/timePickers/TP4/format}"
			displayFormat="{/timePickers/TP4/format}"
			change="handleChange"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP4/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP5/format}, initialFocusedDateValue: {/timePickers/TP5/initialFocusedDateValue}"
		/>
		<TimePicker
			id="TP5"
			valueFormat="{/timePickers/TP5/format}"
			displayFormat="{/timePickers/TP5/format}"
			change="handleChange"
			initialFocusedDateValue="{/timePickers/TP5/initialFocusedDateValue}"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			placeholder="{/timePickers/TP5/placeholder}"
		/>
		<Label
			class="sapUiSmallMarginTop"
			text="{/timePickers/TP6/format}, support2400: {/timePickers/TP6/support2400} (for cases where 24:00:00 indicates the end of the day)"
		/>
		<TimePicker
			id="TP6"
			valueFormat="{/timePickers/TP6/format}"
			displayFormat="{/timePickers/TP6/format}"
			change="handleChange"
			support2400="{/timePickers/TP6/support2400}"
			maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
			value="{/timePickers/TP6/value}"
			placeholder="{/timePickers/TP6/placeholder}"
		/>
		<Toolbar class="sapUiSmallMarginTop">
			<content>
				<Title text="change event result"/>
			</content>
		</Toolbar>
		<Text
			id="T1"
			class="sapUiSmallMarginTop"
		/>
	</VBox>
</mvc:View>

值得注意的两个细节

1. TP3的value为什么需要使用格式化器？

根据提供的代码和JSON Model，Id为TP3的元素的value属性为UI5Date.getInstance()，这里使用的是一个UI5的日期实例。然而，UI5的日期实例并不能直接在界面上显示，因为它不是一个可显示的字符串。

要在界面上显示日期值，需要将日期实例转换为字符串格式，以便TimePicker能够正确显示。你可以使用格式化器（Formatter）或者绑定到另一个字符串属性来实现。

使用格式化器的示例：
在控制器中定义一个格式化函数：

formatDate: function(value) {
    if (value instanceof Date) {
        var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({ pattern: "yyyy-MM-dd" });
        return oDateFormat.format(value);
    }
    return value;
}

然后在XML视图中的TimePicker控件中使用格式化器：

<TimePicker
    id="TP3"
    change="handleChange"
    value="{
        path: '/timePickers/TP3/value',
        formatter: '.formatDate'
    }"
    maskMode="{= ${/maskMode/state} ? 'On' : 'Off'}"
    placeholder="{/timePickers/TP3/placeholder}"
/>

这样可以将日期实例转换为指定格式的字符串，并显示在界面上。

另一种方法是在JSON Model中添加一个新的属性，用于存储日期的字符串格式。在更新日期时，同时更新这个字符串属性，并绑定到TimePicker的value属性。

希望这能帮到你解决问题。如果还有其他疑问，请随时提问。

2. 那TP5对应的VALUE也是UI5Date.getInstance()，为什么不需要格式化器

TP5对应的VALUE也是UI5Date.getInstance(2017, 8, 9, 10, 11, 12)，在这种情况下不需要使用格式化器的原因是因为TP5指定了initialFocusedDateValue属性，该属性接受一个UI5日期实例作为初始值，并且TimePicker控件会自动将其转换为正确的显示格式。

initialFocusedDateValue属性用于在打开TimePicker时设置初始的选定日期和时间。UI5会自动将UI5日期实例转换为适当的显示格式，并在TimePicker控件中显示。

因此，对于TP5，你无需使用格式化器，因为TimePicker会自动处理日期实例的显示。

希望这解答了你的疑问。如果还有其他问题，请随时提问。

2.Action List控件

Action List控件可以用于显示一系列的按钮操作聚合在一起，方便用户选择和使用。
【SAP UI5 控件学习】DAY04 Input组Part IV 完结&&List组Part I,学习,list,数据结构,SAPUI5,前端框架
具体代码如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:form="sap.ui.layout.form"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<Button
		text="Open Action Sheet"
		class="sapUiSmallMargin"
		press=".onButtonPress"
		ariaHasPopup="Menu" >
		<dependents>
			<core:Fragment
				fragmentName="sap.ui5.walkthrough.view.ValueHelpDialog"
				type="XML" />
		</dependents>
	</Button>
</mvc:View>

<ActionSheet id="actionSheet"
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	core:require="{ MessageToast: 'sap/m/MessageToast' }"
	title="Choose Your Action"
	showCancelButton="true"
	placement="Bottom"
	showScrollbar="false">
	<Button
		text="Accept"
		icon="sap-icon://accept"
		press="handleButtonPress" />
	<Button
		text="Reject"
		icon="sap-icon://decline"
		press="handleButtonPress" />
	<Button
		text="Email"
		icon="sap-icon://email"
		press="handleButtonPress" />
	<Button
		text="Forward"
		icon="sap-icon://forward"
		press="handleButtonPress" />
	<Button
		text="Delete"
		icon="sap-icon://delete"
		press="handleButtonPress" />
	<Button
		text="Other"
		press="handleButtonPress" />
</ActionSheet>

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/Core",
	"sap/ui/core/library",
	"sap/ui/unified/DateTypeRange",
	"sap/ui/core/date/UI5Date",
	'sap/m/MessageToast',
	"sap/ui/core/Fragment",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
], function (Controller,
	JSONModel,
	Core,
	library,
	DateTypeRange,
	UI5Date,
	MessageToast,
	Fragment,
	Filter,
	FilterOperator,
	) {
	"use strict";

	return Controller.extend("sap.ui5.walkthrough.controller.App", {
	
		onButtonPress: function(oEvent) {
			var oButton = oEvent.getSource();
			this.byId("actionSheet").openBy(oButton);
		},

		handleButtonPress: function(oEvent) {
			var oButton = oEvent.getSource();
			var sButtonText = oButton.getText();
			MessageToast.show('Selected action is ' + sButtonText);
		}
		
	});
});

3.NavigationList控件

这个控件用于实现导航栏，还提供了各种特效。
【SAP UI5 控件学习】DAY04 Input组Part IV 完结&&List组Part I,学习,list,数据结构,SAPUI5,前端框架
【SAP UI5 控件学习】DAY04 Input组Part IV 完结&&List组Part I,学习,list,数据结构,SAPUI5,前端框架
具体代码如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:tnt="sap.tnt"
	height="100%"
>
	<OverflowToolbar>
		<Button
			text="Toggle Collapse/Expand"
			icon="sap-icon://menu2"
			press=".onCollapseExpandPress"
		/>
		<Button
			text="Show/Hide SubItem 3"
			icon="sap-icon://menu2"
			press=".onHideShowSubItemPress"
		/>
	</OverflowToolbar>
	<tnt:NavigationList
		id="navigationList"
		width="320px"
		selectedKey="subItem3"
	>
		<tnt:NavigationListItem
			text="Item 1"
			key="rootItem1"
			icon="sap-icon://employee"
		>
			<tnt:NavigationListItem text="Sub Item 1" select="onPress"/>
			<tnt:NavigationListItem text="Sub Item 2" />
			<tnt:NavigationListItem
				text="Sub Item 3"
				id="subItemThree"
				key="subItem3"
			/>
			<tnt:NavigationListItem text="Sub Item 4"/>
			<tnt:NavigationListItem
				text="Invisible Sub Item 5"
				visible="false"
			/>
			<tnt:NavigationListItem
				text="Invisible Sub Item 6"
				visible="false"
			/>
		</tnt:NavigationListItem>
		<tnt:NavigationListItem
			text="Invisible Section"
			icon="sap-icon://employee"
			visible="false"
		>
			<tnt:NavigationListItem text="Sub Item 1"/>
			<tnt:NavigationListItem text="Sub Item 2"/>
			<tnt:NavigationListItem text="Sub Item 3"/>
			<tnt:NavigationListItem text="Sub Item 4"/>
		</tnt:NavigationListItem>
		<tnt:NavigationListItem
			text="Item 2"
			icon="sap-icon://building"
		>
			<tnt:NavigationListItem text="Sub Item 1"/>
			<tnt:NavigationListItem text="Sub Item 2"/>
			<tnt:NavigationListItem text="Sub Item 3"/>
			<tnt:NavigationListItem text="Sub Item 4"/>
		</tnt:NavigationListItem>
	</tnt:NavigationList>
</mvc:View>

如果想实现点击某一个Item会执行某一个事件，请使用select事件
例如文章来源地址https://www.toymoban.com/news/detail-548359.html

<tnt:NavigationListItem text="Sub Item 1" select="onPress"/>

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/Core",
	"sap/ui/core/library",
	"sap/ui/unified/DateTypeRange",
	"sap/ui/core/date/UI5Date",
	'sap/m/MessageToast',
	"sap/ui/core/Fragment",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
], function (Controller,
	JSONModel,
	Core,
	library,
	DateTypeRange,
	UI5Date,
	MessageToast,
	Fragment,
	Filter,
	FilterOperator,
) {
	"use strict";

	return Controller.extend("sap.ui5.walkthrough.controller.App", {

		onCollapseExpandPress: function () {
			var oNavigationList = this.byId("navigationList");
			// 获取导航栏是否是Expand，然后取反即可
			var bExpanded = oNavigationList.getExpanded();

			oNavigationList.setExpanded(!bExpanded);
		},

		onHideShowSubItemPress: function () {
			var oNavListItem = this.byId("subItemThree");
			oNavListItem.setVisible(!oNavListItem.getVisible());
		},

		onPress: function (oEvent) {
			var text = oEvent.getSource().getText();
			MessageToast.show(text + " is selected");
		}

	});
});

到了这里，关于【SAP UI5 控件学习】DAY04 Input组Part IV 完结&&List组Part I的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • WPF学习笔记04-控件Control_Part1

    WPF学习笔记04-控件Control_Part1

    之前我们已经学习过WPF布局了，这节我们开始简单介绍下控件。熟悉Winform的应该对控件并不陌生。WPF和Winform的渲染也是不一样的一个是基于DirectX一个是基于GDI+。 在WPF中，打交道最多的控件无非就那么几种。 1）布局控件。之前介绍过的，可以容纳多个控件或嵌套其他布局控

    2024年02月02日
    浏览(32)
  • [UI5 常用控件] 01.Text

    [UI5 常用控件] 01.Text

    Text是UI5中最常用的控件之一。 记录Text常用的功能。 控件路径是sap.m.Text Controller View 普通绑定： 别名绑定： binding绑定： 别名binding绑定： bindText bindText with alias bindProperty bindElement setText getText

    2024年01月24日
    浏览(32)
  • [UI5 常用控件] 02.Title,Link,Label

    [UI5 常用控件] 02.Title,Link,Label

    本章节记录常用控件Title,Link,Label。 其路径分别是： sap.m.Title sap.m.Link sap.m.Label Title可以结合其他控件一起使用 可以在Panel-headerToolbar-OverflowToolbar中添加Title 记录Link的5种用法： 绑定press事件，不可用状态，绑定地址，下划线，加粗 Labe一般是给Input添加标签时使用 分别是必输

    2024年01月25日
    浏览(30)
  • [UI5 常用控件] 09.IconTabBar，IconTabHeader，TabContainer

    [UI5 常用控件] 09.IconTabBar，IconTabHeader，TabContainer

    本章节记录常用控件 IconTabBar,IconTabHeader, TabContainer 其路径分别是： sap.m.IconTabBar sap.m.IconTabHeader sap.m.TabContainer 在SAP UI5中，IconTabBar 是一种用户界面控件，通常用于创建具有多个标签页的导航界面。它允许用户通过标签切换内容区域，每个标签通常与一个特定的视图或功能相关

    2024年02月20日
    浏览(31)
  • 以前编写好能够正常运行的 SAP UI5 代码，几个月后忽然不能运行了该怎么办？

    以前编写好能够正常运行的 SAP UI5 代码，几个月后忽然不能运行了该怎么办？

    以笔者本套教材为例，每一步骤的源代码都托管在本人 Github 仓库里，每次上传之前，都确保本地测试通过。 但笔者编写过程中发现，之前测试通过的代码，可能几个月之后再执行，就会遇到白屏现象，即应用无法正常加载，或者无法在调试模式下正常加载。 举个具体的例子

    2024年02月03日
    浏览(26)

  • Day30- 贪心算法part04

    题目一：860. 柠檬水找零  860. 柠檬水找零 在柠檬水摊上，每一杯柠檬水的售价为  5  美元。顾客排队购买你的产品，（按账单  bills  支付的顺序）一次购买一杯。 每位顾客只买一杯柠檬水，然后向你付  5  美元、 10  美元或  20  美元。你必须给每个顾客正确找零，也就

    2024年01月19日
    浏览(33)
  • 【随想录】Day35—第八章 贪心算法 part04

    【随想录】Day35—第八章 贪心算法 part04

    题目链接：435. 无重叠区间 贪心思路 ： 正向遍历数组，利用哈希表存储三个面额的钱的个数 ⭐ 柠檬水找零 ——题解思路 题目链接：406. 根据身高重建队列 贪心思路 ： 1. 身高降序排 ：先根据身高进行降序排序，若身高相同，则 根据 前面有多少人升序排。 2. 按照排序位置

    2024年04月27日
    浏览(29)
  • Day42｜动态规划part04： 01背包问题，你该了解这些！、滚动数组、416. 分割等和子集

    Day42｜动态规划part04： 01背包问题，你该了解这些！、滚动数组、416. 分割等和子集

    其他背包，面试几乎不会问，都是竞赛级别的了，leetcode上连多重背包的题目都没有，所以题库也告诉我们，01背包和完全背包就够用了。 而完全背包又是也是01背包稍作变化而来，即：完全背包的物品数量是无限的。 01 背包问题描述 有n件物品和一个最多能背重量为w 的背包

    2024年04月25日
    浏览(31)
  • 【日常收支账本】【Day04】优化编辑动账记录的操作——QTableWidget单元格设置QComboBox控件

    【日常收支账本】【Day04】优化编辑动账记录的操作——QTableWidget单元格设置QComboBox控件

    https://github.com/LinFeng-BingYi/DailyAccountBook 为表格中以下字段设置选项列表： 1. 需求强度（由\\\"基本需求\\\"更名） 温饱：基本维持生存且不铺张浪费的消费行为 小康：在温饱的基础上，可以使生活变得比较舒适的消费行为 奢华：可有可无的，或超出自身消费水平的消费行为 该属性

    2024年02月08日
    浏览(34)

  • 零基础学习CANoe Panel（8）—— 开关/显示控件(Input/Output Box )

    🍅 我是 蚂蚁小兵 ，专注于车载诊断领域，尤其擅长于对CANoe工具的使用 🍅 寻找组织 ，答疑解惑，摸鱼聊天，博客源码，点击加入👉【相亲相爱一家人】 🍅 零基础学习CANoe Panel设计目录汇总，点击跳转👉 🍅 Input/Output Box 控件也是一个常用控件，用来作为 单行 输入和输

    2024年02月12日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包