[UI5 常用控件] 01.Text

news2024/11/25 14:22:54

文章目录

  • 前言
  • 1. 普通文本
  • 2. 长文本:
  • 3. 设置最大显示行数 ( maxLines='3' )
  • 4. 单行显示 ( wrapping='false' )
  • 5. 显示空白符 ( renderWhitespace='true' )
  • 6. 使用 - 连接单词:只适用于英文 ( wrappingType='Hyphenated' )
  • 7. 空白时使用 - 代替 ( emptyIndicatorMode='On' )
  • 8. JSON数据绑定 - 静态
  • 9. JSON数据绑定 - 动态
  • 10. 动态添加Text
  • 11. 获取Text的值


前言

Text是UI5中最常用的控件之一。 记录Text常用的功能。
控件路径是sap.m.Text


1. 普通文本

	<Text text="这是一段普通的Text" />

在这里插入图片描述

2. 长文本:

	<Text
		text="SAPUI5是一款用于构建企业级Web应用程序的JavaScript框架。其提供丰富的UI控件和强大的数据绑定功能,支持模块化开发和灵活的主题定制。通过使用MVC(Model-View-Controller)模式,开发者能够更轻松地组织和管理代码。UI5还与后端服务无缝集成,提供了一体化的开发体验。无论是在桌面还是移动设备上,SAPUI5都能够提供一致且响应式的用户界面,为企业应用程序的开发提供了便利和效率。"
	/>

在这里插入图片描述

3. 设置最大显示行数 ( maxLines=‘3’ )

	<Text
	    maxLines="3"
	    text="SAPUI5是一款用于构建企业级Web应用程序的JavaScript框架。其提供丰富的UI控件和强大的数据绑定功能,支持模块化开发和灵活的主题定制。通过使用MVC(Model-View-Controller)模式,开发者能够更轻松地组织和管理代码。UI5还与后端服务无缝集成,提供了一体化的开发体验。无论是在桌面还是移动设备上,SAPUI5都能够提供一致且响应式的用户界面,为企业应用程序的开发提供了便利和效率。"
	/>

在这里插入图片描述

4. 单行显示 ( wrapping=‘false’ )

	<Text
	     wrapping="false"
	     text="SAPUI5是一款用于构建企业级Web应用程序的JavaScript框架。其提供丰富的UI控件和强大的数据绑定功能,支持模块化开发和灵活的主题定制。通过使用MVC(Model-View-Controller)模式,开发者能够更轻松地组织和管理代码。UI5还与后端服务无缝集成,提供了一体化的开发体验。无论是在桌面还是移动设备上,SAPUI5都能够提供一致且响应式的用户界面,为企业应用程序的开发提供了便利和效率。"
	 />

在这里插入图片描述

5. 显示空白符 ( renderWhitespace=‘true’ )

	<Text
	     renderWhitespace="true"
	     text="SAPUI5是         一款用于构建企业级Web应用程序的JavaScript框架。其提供丰富的UI控件和强大的数据绑定功能,支持模块化开发和灵活的主题定制。通过使用MVC(Model-View-Controller)模式,开发者能够更轻松地组织和管理代码。UI5还与后端服务无缝集成,提供了一体化的开发体验。无论是在桌面还是移动设备上,SAPUI5都能够提供一致且响应式的用户界面,为企业应用程序的开发提供了便利和效率。"
	 />

6. 使用 - 连接单词:只适用于英文 ( wrappingType=‘Hyphenated’ )

	<Text
	     wrappingType="Hyphenated"
	     text="An aggregation is a special relation between two UI element types. It is used to define the parent-child relationship within the tree structure. The parent end of the aggregation has cardinality 0..1, while the child end may have 0..1 or 0..*. The element's API offers convenient and consistent methods to deal with aggregations (e.g. to get, set, or remove target elements). Examples are table rows and cells, or the content of a table cell."
	 />

7. 空白时使用 - 代替 ( emptyIndicatorMode=‘On’ )

	<Text
	     emptyIndicatorMode="On"
	     text=""
	 />

8. JSON数据绑定 - 静态

  • Controller
	 var json = {
	     "name": "Hello",
	     "st":{
	         "city":"Beijing"
	     }
	 }
	 var jsonalias = {
	     "name2": "World",
	     "st2":{
	         "city2":"Shanghai"
	     }
	 }
	
	 this.getView().setModel(new JSONModel(json))
	 this.getView().setModel(new JSONModel(jsonalias),"aliasName")
  • View

普通绑定:

	<Text text="{/name}" />

别名绑定:

	<Text text="{aliasName>/name2}" />

binding绑定:

	<Text
	    binding="{/st}"
	    text="{city}"
	/>

别名binding绑定:

	<Text
	    binding="{aliasName>/st2}"
	    text="{aliasName>city2}"
	/>

9. JSON数据绑定 - 动态

  • bindText
	this.byId("text1").bindText('/name')
  • bindText with alias
	this.byId("text2").bindText('aliasName>/name2')
  • bindProperty
	this.byId("text3").bindProperty('text','/name')	
  • bindElement
	this.byId("text4").bindElement("aliasName>/st2")
	this.byId("text4").bindText('aliasName>city2')
  • setText
	this.byId("text5").setText('我是setText绑定的文本')

10. 动态添加Text

	// 获取Panel控件的引用
	var panel = this.getView().byId("panel010");
	
	// 创建Text控件
	var text = new sap.m.Text({
	    text: "动态添加的文本"
	});
	
	// 将Text控件添加到Panel控件中
	panel.addContent(text);

11. 获取Text的值

  • getText
this.byId("text999").getText()

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1405518.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux之权限(内容详细,细节满满)

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 数据结构初阶 Linux 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力 目录 一.前言 二.权限修改的两种方法 …

爬虫入门到精通_基础篇1(爬虫基本原理讲解, Urllib库基本使用)

01 爬虫基本原理讲解 1.什么是爬虫:请求网站并提取数据的自动化程序 2.爬虫基本流程&#xff1a; 发起请求&#xff1a;通过HTTP库向目标站点发起请求&#xff0c;即发送一个Request,请求可以包含额外的headers等信息&#xff0c;等待服务器响应。获取响应内容&#xff1a;如…

python实现归并排序

归并排序 归并排序是采用分治法的一个非常典型的应用。归并排序的思想就是先递归分解数组&#xff0c;拍好各数组的顺序&#xff0c;再合并数组。 将数组分解最小之后&#xff0c;然后合并两个有序数组&#xff0c;基本思路是比较两个数组的最前面的数&#xff0c;谁小就先取…

银行常用操作指引:浦发

文章目录 引言浦发2.1 设置查询密码2.2 微信公众号绑定2.3 查询卡转账额度II 其他银行常用操作see also引言 浦发 2.1 设置查询密码 2.2 微信公众号绑定 入口:点击菜单的微信通知 用途:查询余额和明细 口令:解除绑定 2.3 查询卡转账额度 II 其他银行常用操作

06 栈

目录 1.栈 2.实现 3.OJ题 1. 栈 1. 栈的概念和结构 栈: 这一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&…

OSS存储引擎如何使用以及如何添加图片【建议收藏】

Aliyun OSS对象存储&#xff0c;可以用来做文件服务器&#xff0c;存放一些文件&#xff0c;图片等资源&#xff0c;那么我们使用OSS&#xff0c;需要经历以下步骤&#xff1a; 这里就从如何开通OSS服务开始进行&#xff0c;到如何上传一个资源文件到OSS结束。 1、阿里云注册 …

最新AI系统ChatGPT网站系统源码,支持AI绘画,GPT语音对话,ChatFile文档对话总结,DALL-E3文生图,MJ绘画局部编辑重绘

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…

Python中==和is有什么区别

是比较两个对象的内容是否相等&#xff0c;即两个对象的“值”是否相等&#xff0c;不管两者在内存中的引用地址是否一样。 is 比较的是两个实例对象是不是完全相同&#xff0c;它们是不是同一个对象&#xff0c;占用的内存地址是否相同。即is比较两个条件&#xff1a;1.内容相…

LeetCode670.最大交换

我真的怀疑他是不是难度等级评错了&#xff0c;因为感觉没到中级&#xff0c;总之先看题吧 给定一个非负整数&#xff0c;你至多可以交换一次数字中的任意两位。返回你能得到的最大值。 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7。示例 2 : 输入: 9973 输出:…

数字拆分--完全背包问题

一、题目 https://acm.ecnu.edu.cn/problem/3034/ 二、思路 本来算法就很弱&#xff0c;加上很久没刷题&#xff0c;做这道题真的是一言难尽~ 一开始我以为是找规律写递推式&#xff0c;写到f(9)的时候就觉得不对劲&#xff0c;又想了一会&#xff0c;还是没想到&#xff0…

【Linux配置yum源以及基本yum指令】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 一、yum是什么&#xff1f; 二、什么是软件包&#xff1f; 三、三种安装软件包的方式 四、yum的相关操作 4.1、搜索软件 4.2、安装软件 4.3、卸载软件 4.4、那…

Python | 七、栈 Stack、队列 Queue

栈的基础知识 是一种数据结构&#xff0c;在Python中常使用列表来模拟实现特点&#xff1a;先进后出 栈的基本操作 因为Python中通过列表模拟实现栈&#xff0c;所以以下的基本操作实际是列表的一些操作获取长度&#xff0c;使用len(stack)方法进栈&#xff0c;使用stack.app…

Element组件完整引入、按需引入、样式修改(全局、局部)、简单安装less以及npm命令证书过期等

目录 一、npm 安装二、完整引入三、按需引入四、样式修改1.按需加载的全局样式修改2. 局部样式修改1. 在 css 预处理器如 less scss 等直接使用::v-deep2. 只能用在原生 CSS 语法中:/deep/ 或者 >>> 五、 拓展&#xff1a;npm 安装less报错&#xff0c;提示证书过期六…

使用Go语言编写简单的HTTP服务器

在Go语言中&#xff0c;我们可以使用标准库中的"net/http"包来编写HTTP服务器。下面是一个简单的示例&#xff0c;展示了如何使用Go编写一个基本的HTTP服务器。 go复制代码 package main import ( "fmt" "net/http" ) …

红黑树浅浅学习

红黑树浅浅学习 红黑树概念红黑树平衡性调整 红黑树概念 二叉树&#xff1a;二叉树是每个节点最多有两个子树的树结构。二叉查找树&#xff1a;又称“二叉搜索树”&#xff0c;左孩子比父节点小&#xff0c;右孩子比父节点大&#xff0c;还有一个特性就是”中序遍历“可以让结…

机器学习实验报告——Bayes算法

目录 一、算法介绍 1.1算法背景 1.2算法假设 1.3 贝叶斯与朴素贝叶斯 1.4算法原理 二、算法推导 2.1朴素贝叶斯介绍 2.2朴素贝叶斯算法推导 2.2.1先验后验概率 2.2.2条件概率公式 2.3 独立性假设 2.4 朴素贝叶斯推导 三、算法实现 3.1数据集描述 3.2代码实现 四…

python04-变量命名规则

python需要使用标识符来给变量命名。 标识符&#xff0c;我来解释下&#xff0c;就是给程序中变量、类、方法命名的符号&#xff0c;简单理解就是起一个名字&#xff0c;这个名字必须是合法的名字&#xff0c; 对于Python来说&#xff0c;标识符必须是以字母、下划线(_)开头&…

性能优化-高通的Hexagon DSP和NPU

原文来自【 Qualcomm’s Hexagon DSP, and now, NPU 】 本文主要介绍Qualcomm Hexagon DSP和NPU&#xff0c;这些为处理简单大量运算而设计的硬件。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xf…

[足式机器人]Part2 Dr. CAN学习笔记- 最优控制Optimal Control Ch07-2 动态规划 Dynamic Programming

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记 - 最优控制Optimal Control Ch07-2 动态规划 Dynamic Programming 1. 基本概念2. 代码详解3. 简单一维案例 1. 基本概念 Richoard Bell man 最优化理论&#xff1a; An optimal policy has the …

Python + Selenium —— 常用控制方法!

Selenium 体系中用来操作浏览器的 API 就是 WebDriver&#xff0c;WebDriver 针对多种语言都实现了一套 API&#xff0c;支持多种编程语言。 Selenium 通常用来做自动化测试&#xff0c;或者编写网络爬虫。 通常我们说的 Selenium 自动化操作&#xff0c;指的就是 WebDriver …