[UI5 常用控件] 01.Text

2024-01-23 17:44
文章标签 01 常用 控件 text ui5

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

文章目录

  • 前言
  • 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. 长文本:

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

在这里插入图片描述

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

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

在这里插入图片描述

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

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

在这里插入图片描述

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

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

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

	<TextwrappingType="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’ )

	<TextemptyIndicatorMode="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绑定:

	<Textbinding="{/st}"text="{city}"/>

别名binding绑定:

	<Textbinding="{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()

在这里插入图片描述

这篇关于[UI5 常用控件] 01.Text的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/637037

相关文章

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在

Java常用注解扩展对比举例详解

《Java常用注解扩展对比举例详解》:本文主要介绍Java常用注解扩展对比的相关资料,提供了丰富的代码示例,并总结了最佳实践建议,帮助开发者更好地理解和应用这些注解,需要的朋友可以参考下... 目录一、@Controller 与 @RestController 对比二、使用 @Data 与 不使用 @Dat

Mysql中深分页的五种常用方法整理

《Mysql中深分页的五种常用方法整理》在数据量非常大的情况下,深分页查询则变得很常见,这篇文章为大家整理了5个常用的方法,文中的示例代码讲解详细,大家可以根据自己的需求进行选择... 目录方案一:延迟关联 (Deferred Join)方案二:有序唯一键分页 (Cursor-based Paginatio

Python实现常用文本内容提取

《Python实现常用文本内容提取》在日常工作和学习中,我们经常需要从PDF、Word文档中提取文本,本文将介绍如何使用Python编写一个文本内容提取工具,有需要的小伙伴可以参考下... 目录一、引言二、文本内容提取的原理三、文本内容提取的设计四、文本内容提取的实现五、完整代码示例一、引言在日常工作和学

Redis中的常用的五种数据类型详解

《Redis中的常用的五种数据类型详解》:本文主要介绍Redis中的常用的五种数据类型详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Redis常用的五种数据类型一、字符串(String)简介常用命令应用场景二、哈希(Hash)简介常用命令应用场景三、列表(L

python中time模块的常用方法及应用详解

《python中time模块的常用方法及应用详解》在Python开发中,时间处理是绕不开的刚需场景,从性能计时到定时任务,从日志记录到数据同步,时间模块始终是开发者最得力的工具之一,本文将通过真实案例... 目录一、时间基石:time.time()典型场景:程序性能分析进阶技巧:结合上下文管理器实现自动计时

C#中的 Dictionary常用操作

《C#中的Dictionary常用操作》C#中的DictionaryTKey,TValue是用于存储键值对集合的泛型类,允许通过键快速检索值,并且具有唯一键、动态大小和无序集合的特性,常用操作包括添... 目录基本概念Dictionary的基本结构Dictionary的主要特性Dictionary的常用操作

Python中常用的四种取整方式分享

《Python中常用的四种取整方式分享》在数据处理和数值计算中,取整操作是非常常见的需求,Python提供了多种取整方式,本文为大家整理了四种常用的方法,希望对大家有所帮助... 目录引言向零取整(Truncate)向下取整(Floor)向上取整(Ceil)四舍五入(Round)四种取整方式的对比综合示例应

C#中读取XML文件的四种常用方法

《C#中读取XML文件的四种常用方法》Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具,下面我们就来看看C#中读取XML文件的方法都有哪些吧... 目录XML简介格式C#读取XML文件方法使用XmlDocument使用XmlTextReader/XmlTextWr

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re