正文

ui5-文档-4.3-controls(代码片段)

ricoo  ricoo  2023-02-01  474

关键词：

现在是时候构建我们的第一个小UI了，将HTML主体中的“Hello World”文本替换为SAPUI5控件sap.m.Text。首先，我们将使用JavaScript控件接口来设置UI，然后将控件实例放入HTML体中。

Preview

技术分享图片

The "Hello World" text is now displayed by a SAPUI5 control

Coding

你可以在此查看和下载所有文件Walkthrough - Step 3.

webapp/index.html

<!DOCTYPE html>

<html>

   <head>

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <meta charset="utf-8">

      <title>Walkthrough</title>

      <script

         id="sap-ui-bootstrap"

         src="/resources/sap-ui-core.js"

         data-sap-ui-theme="sap_belize"

         data-sap-ui-libs="sap.m"

         data-sap-ui-compatVersion="edge"

         data-sap-ui-preload="async" >

      </script>

      <script>

         sap.ui.getCore().attachInit(function () 

            new sap.m.Text(

               text : "Hello World"

            ).placeAt("content");

         );

      </script>

   </head>

   <body class="sapUiBody" id="content">

   </body>

</html>

　　在上面的例子中，init事件的回调是我们实例化SAPUI5文本控件的地方。控件的名称以其控件库sap.m的名称空间为前缀，选项被传递给带有JavaScript对象的构造函数。对于控件，我们将文本属性设置为值“Hello World”。我们想要使用一个简单的SAPUI5控件，而不是使用原生JavaScript来显示对话框。控件用于定义屏幕部分的外观和行为。

　　我们将控件的构造函数调用链接到标准方法placeAt，该方法用于将SAPUI5控件放置在文档对象模型(DOM)或任何其他SAPUI5控件实例的节点内。我们将DOM节点的ID作为参数传递。作为目标节点，我们使用HTML文档的body标记并为其提供ID content。类sapUiBody添加了额外的主题相关样式来显示SAPUI5应用程序。

　　SAPUI5的所有控件都有一组用于配置的固定属性、聚合和关联。您可以在演示工具包中找到它们的描述。此外，每个控件都附带一组公共函数，您可以在API引用中查找这些公共函数。

不要忘记删除“Hello World”p。

　　请注意：只有sap.ui.core的实例。控件或其子类可以独立呈现并具有placeAt函数。每个控件扩展sap.ui.core。只能在控件内部呈现的元素。查看API参考以了解更多关于控件继承层次结构的信息。每个控件的API文档引用直接已知的子类。

Parent topic: Walkthrough

Previous: Step 2: Bootstrap

Next: Step 4: XML Views

Related Information

Working with Controls

API Reference:sap.m.Text

Samples:sap.m.Text

API Reference:sap.ui.core.Control

API Reference:sap.ui.core.Element

API Reference:sap.ui.base.ManagedObject

ui5-文档-4.20-aggregationbinding(代码片段)

现在我们已经为我们的应用建立了一个良好的结构，是时候添加更多的功能了。通过添加一些JSON格式的发票数据，我们开始探索数据绑定的更多特性，这些发票数据显示在面板下面的列表中。 Preview Alistofinvoicesisdisplayedbe... 查看详情

ui5-文档-4.35-responsiveness(代码片段)

在这一步中，我们将改进应用程序的响应能力。SAPUI5应用程序可以在手机、平板电脑和桌面设备上运行，我们可以对应用程序进行配置，以便为每个场景充分利用屏幕空间。幸运的是，SAPUI5控件类似于sap.m.Table已经提供了许多我... 查看详情

ui5-文档-4.21-datatypes(代码片段)

发票清单已经很好看了，但是没有指定价格的发票是什么?通常价格以技术格式存储，并带有‘。数据模型中的分隔符。例如，我们的菠萝发票上的计算价格是87.2，没有货币。我们将使用SAPUI5数据类型正确地格式化价格，使用一... 查看详情

ui5-文档-4.19-reusedialogs(代码片段)

在此步骤中，我们将扩展重用概念，并在组件级别调用对话框。在步骤16中，我们创建了一个对话框作为片段，以使其可跨视图或跨整个应用程序重用。但是我们将检索对话框实例和分别打开和关闭对话框实例的逻辑放置在HelloPa... 查看详情

ui5-文档-2.1-使用openui5开发应用(代码片段)

使用OpenUI5和您选择的开发环境(编辑器和Web服务器)开发应用程序。您可以下载所有的源代码，也可以参考OpenUI5的在线版本。下载OpenUI5　　下载和安装OpenUI5的默认方式是从http://openui5.orgInformation的OpenUI5主页获取运行时，该主... 查看详情

html所有ui5控件的常用功能(代码片段)

查看详情

ui5-学习篇-1-开发工具及环境搭建(代码片段)

最近研究SAP-UI5好几个月了，将相关学习经历及问题点做个记录。1.先了解学习资料相关站点　　SAP官网：https://www.sap.com/china/index.html　　SAP开发工具：https://tools.hana.ondemand.com/#sapui5　　UI5 Documentation：https://openui5.hana.ondemand.co... 查看详情

vscode中sapui5版本(代码片段)

ui5.yaml缺省配置如下ui5:path:-/resources-/test-resourcesurl:https://ui5.sap.com可以根据需要修改之ui5:path:-/resources-/test-resourcesurl:https://sapui5.hana.ondemand.comverssion:1.60.1 查看详情

vscode中sapui5版本(代码片段)

ui5-文档-1-前言

主要是将SAPUI5官网文档做下了解，相关内容请查阅：https://sapui5.hana.ondemand.com/#/topic设置您的开发环境并阅读我们的教程。它们使用交互式格式中的实际示例向您介绍SAPUI5的所有主要开发范例。先决条件和设置：您应该熟悉JavaScri... 查看详情

ui5-文档-2-开发环境

这一部分将指导您安装、配置和设置SAPUI5开发环境的最常见和推荐用例。请注意：您可以在不同的平台上使用SAPUI5。各自平台的许可和维护条件也适用于SAPUI5。例如，如果在SAP云平台上使用SAPUI5工具，则适用SAP云平台的许可和维... 查看详情

sapui5本地开发如何实现xml和javascript代码的自动完成和嵌入式api文档自动显示(代码片段)

文章目录本文写作动机XML视图元素的文档显示控制器里JavaScript代码的API文档JavaScript控制器代码里方法的自动提示和补全功能UI5ExplorerXML视图里元素名称的自动提示和自动完成sap.ui.define里导入其他SAPUI5库模块的自动完成XML控件id... 查看详情

ui5sourcecodemap机制的细节介绍(代码片段)

在我的博客Adebuggingissuecausedbysourcecodemapping里我介绍了在我做SAPC4C开发时遇到的一个曾经困扰我很久的问题，最后结论是这个问题由于JavaScript的sourcecodemap机制在Chrome开发者工具里起作用，其实是workingasdesigned的一种行为。但是当... 查看详情

UI5 - XML 片段中的格式化程序只执行一次。如何再次运行它们？

】UI5-XML片段中的格式化程序只执行一次。如何再次运行它们？【英文标题】：UI5-FormattersinXMLfragmentareexecutedonlyonce.Howtorunthemagain?【发布时间】：2018-03-0515:55:36【问题描述】：当一个sap.ui.xmlfragment被UI5渲染时，格式化程序只执行一... 查看详情

将hanaxsc应用转换为移动应用？(代码片段)

是否可以将运行XSJS和OData服务的HANAXSC转换为混合应用程序？Cordova框架将UI5应用程序转换为混合应用程序。但我担心的是转换使用HANA功能的应用。任何帮助，将不胜感激！TIA。答案您实际上不会将XSC应用程序转换为本机应用程序... 查看详情

jerry的ui5框架代码自学教程

SAPUI5对View元素基于jQuery的操作方式，使得其学习曲线相对Angular/React来说比较平缓，至少对于我个人而言是这样。对于已经有jQuery经验的前端开发人员来说很容易上手。使用UI5开发SAPUI应用，在开发过程中往往会遇到各种各样的... 查看详情

如何在 SAP UI5 代码中生成 UUID？ [复制]

】如何在SAPUI5代码中生成UUID？[复制]【英文标题】：HowdoIgenerateaUUIDinSAPUI5code?[duplicate]【发布时间】：2020-09-2310:04:25【问题描述】：我知道如何在node.js中使用npm管理的库（如uuid）来做到这一点。但是在基于浏览器的SAPUI5JavaScript... 查看详情

open(sap)ui5学习入门系列之一：扫盲与热身（下）

1 UI5代码结构上一次我们一起用了20秒的时间完成一个UI5版的HelloWorld。应用打开后有一个按钮，按钮的文字是HelloWorld，点击这个按钮之后，按钮会慢慢的消失掉(Fadeout)。那我们这次就来看一看为了实现这么一个简单的功能，O... 查看详情