正文

sapui5里flexbox控件使用的一个例子(代码片段)

JerryWangSAP  JerryWangSAP  2023-03-25  755

关键词：

SAP UI5 中的 sap.ui.layout.VerticalLayout 是一个布局控件，用于垂直排列其他控件。它允许您将控件放置在单独的行中，以便在纵向方向上排列它们。以下是使用 sap.ui.layout.VerticalLayout 控件的说明：

创建 sap.ui.layout.VerticalLayout 控件
您可以使用以下代码行创建一个 sap.ui.layout.VerticalLayout 控件：

var oLayout = new sap.ui.layout.VerticalLayout();

向 sap.ui.layout.VerticalLayout 控件中添加控件
您可以使用以下代码将控件添加到 sap.ui.layout.VerticalLayout 控件中：

oLayout.addContent(oControl);

其中 oControl 是要添加到布局中的控件对象。

设置 sap.ui.layout.VerticalLayout 控件属性

以下是一些可以设置的 sap.ui.layout.VerticalLayout 控件属性：

width: 控件的宽度。例如：oLayout.setWidth("100%");
visible: 控件是否可见。例如：oLayout.setVisible(true);
enabled: 控件是否启用。例如：oLayout.setEnabled(true);
content: 控件包含的内容。例如：oLayout.setContent(oControl);
allowWrapping: 指定是否允许控件折行。例如：

oLayout.setAllowWrapping(false);

将 sap.ui.layout.VerticalLayout 控件添加到 UI5 页面

将 sap.ui.layout.VerticalLayout 控件添加到页面的方法因您使用的方法而异。如果您使用 XML 视图，则可以在视图文件中添加以下代码行：

<vc:VerticalLayout id="myLayout"  allowWrapping="false" />

其中， vc 是指定 sap.ui.layout 命名空间的 XML 命名空间前缀。

如果您使用 JavaScript 视图，则可以使用以下代码将布局添加到视图：

var oLayout = new sap.ui.layout.VerticalLayout(id: "myLayout", width: "100%", allowWrapping: false);
this.getView().addContent(oLayout);

看一个例子：

如果把 direction 属性改成 column：

界面更改为如下：

direction 属性的类型：sap.m.FlexDirection

column 代表从上到下垂直方向布局：

Flexbox 包含两个 text 控件：

这两个都在 items 的 aggregation 里：

items 的聚合类型是 sap.ui.core.Control

在 SAP UI5 中，aggregation（聚合）是一种控件属性，用于指定控件中包含的其他控件的集合。控件可以有一个或多个聚合，这些聚合是按名称定义的，并在控件的元数据中进行了声明。

例如，sap.m.List 控件有一个 items 聚合，用于指定列表项的集合。在使用 sap.m.List 控件时，您可以通过添加列表项来填充此聚合。

以下是 sap.ui.core.Element 类的一部分定义，其中定义了聚合的语法：

metadata : 
    aggregations : 
        "aggregationName1" : type : "sap.ui.core.Control", multiple : true, singularName : "aggregationName1",
        "aggregationName2" : type : "sap.ui.core.Control", multiple : false, singularName : "aggregationName2"

在这里，aggregations 属性定义了控件的聚合列表。每个聚合都用一个名称和一组属性来定义。在此示例中，aggregationName1 聚合是一个具有多个控件的集合，而 aggregationName2 聚合则只包含一个控件。

使用sap云平台portal服务将sapui5应用部署到portal上

...padmodule，已经成功部署到SAPCloudPlatform上：该HTML5module里的SAPUI5应用，已经能够通过FioriLaunchpad访问了：MTA应用的approuterurl是整个组件的访问入口。在我的例子里approuter的url如下：https://digital-innovation-space-jerry-subdomain-dev-mta-fiorid1946... 查看详情

在kubernetes上运行sapui5应用(下):一个例子体会kubernetes内容器的高可用性和弹性伸缩

上一篇文章在Kubernetes上运行SAPUI5应用(上)，我介绍了如何在Docker里运行一个简单的SAPUI5应用，并且已经成功地将一个包含了这个UI5应用的docker镜像上传到Dockerhub上。这篇文章作为这个主题的下半部分，将会介绍如何在Kubernete... 查看详情

sapui5里响应式表格的minscreenwidth属性讲解

...格内容，以获得可接受的视觉显示。为了解决这个问题，SAPUI5框架提供了基于列的解决方案（列隐藏）和基于行的解决方案（弹出行为）以响应式显示表格，并且这两个选项同时适用。这听起来可能相当复杂，让我们通过一个具... 查看详情

SAPUI5 将下拉框的值绑定到另一个控件的属性

】SAPUI5将下拉框的值绑定到另一个控件的属性【英文标题】：SAPUI5bindingavalueofadropdownboxtoanattributeofanothercontrol【发布时间】：2015-08-1110:38:48【问题描述】：我是sapui5的新手，我正在尝试根据表达式绑定中下拉框的选定项/键设置文... 查看详情

如何在sapui5应用里添加使用摄像头拍照的功能

...头拍照的web应用。而我同事遇到的实际情况是，需要使用SAPUI5这个前端框架来开发web应用。在有了前一篇文章的知识储备后，在SAPUI5里完成这个功能，可以采取同样的思路。我们先回忆前一篇文章里提到的技术实现的要点：(1)在... 查看详情

sapui5navpopoverfactory的使用方法介绍

...omp/navpopover/Factory首先，命名空间sap.ui.comp下面包含的都是SAPUI5SmartControls集合。此库中的控件仅支持ODataV2和默认模型（名为undefined）。复杂类型的属性（用于OData实体类型）不能被此库的控件绑定或使用。此库中的大多数控件不... 查看详情

SAPUI5 何时将初始过滤器绑定到控件

】SAPUI5何时将初始过滤器绑定到控件【英文标题】：SAPUI5whentobindaninitialfiltertoacontrol【发布时间】：2017-05-1019:04:41【问题描述】：我希望将xml视图的控制器中的过滤器动态绑定到视图中的控件。我知道该怎么做，但我一开始没有... 查看详情

sapui5使用了哪些开源技术

我们知道SAPUI5已经开源了，共享给了Apache开源组织后的名字叫OpenUI5,虽然从API的长度上看，OpenUI5比SAPUI5要短，但是两者的核心并没有多大区别，SAPUI5多了一些SAP产品所用到的控件，而开源时这部分也就没有必要提交了，当然，SAP... 查看详情

使用minscreenwidth调整sap.m.table某一列动态显示与否的例子(代码片段)

对于SAPUI5响应式表格来说，不应隐藏名称和状态列是列的默认行为，所以让我们让默认值（minScreenWidth:""和demandPopin:false）发挥作用。下图是一个例子：如果visible设置成false后，column从屏幕上消失：对于小型设备，型号列(ModelNumbe... 查看详情

sapui5form控件的columnlayout布局特性

...程序可以使用S、M、L和XL尺寸的各种布局之一。本文介绍SAPUI5Form的ColumnLayout布局特性。ColumnLayout控件以基于列的响应方式呈现表单组。根据其大小，该组被分为一列或多列。ColumnLayout控件以基于列的响应方式呈现表单控件。根据... 查看详情

使用 flexbox 的 3 列流体布局第三列向左推

】使用flexbox的3列流体布局第三列向左推【英文标题】：3columnfluidlayoutusingflexbox3rdcolumnpushingtotheleft【发布时间】：2017-05-2406:21:48【问题描述】：我正在尝试使用CSSflexbox属性来创建一个完整的布局。我正在尝试设计一个3列的流体... 查看详情

sapui5应用manifest.json文件里routes数组元素的相对顺序，不可忽视的试读版

SAPUI5应用manifest.json文件里Routes数组元素的相对顺序，不可忽视的试读版本教程第77篇文章发表之后，一位学习非常仔细的朋友发现了一个问题：SAPUI5应用开发教程之七十七-SAPUI5动态页面路由的高级用法：路由记... 查看详情

SAPUI5 在 JSON 模型 2 中使用来自 JSON 模型 1 的值

】SAPUI5在JSON模型2中使用来自JSON模型1的值【英文标题】：SAPUI5usevaluefromJSONModel1inJSONModel2【发布时间】：2021-03-1809:09:28【问题描述】：我可以在第二个JSON模型中使用/绑定来自第一个JSON模型的值吗？在下面的示例中，第二个模型(... 查看详情

reactnative-2控件flexbox

...ion模拟器，比AVD速度快，功能强大。 1. flexDirectionFlexbox是连续布局，它有主轴（primaryaxis）和交叉轴（crossaxis）组成，使用flexDirection属性来确定主轴的方向，它包括水平（row）和垂直（column）两个值，默认是column。 1.... 查看详情

flexbox布局的最简单表单

作者|阮一峰来源|http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html 弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写CSS布局真是太方便了。三年前，我写过Flexbox的介绍（上，下），但是有些地方写得不清楚。今天，我看到... 查看详情

windows环境下，如何在docker里运行sapui5应用

...站在巨人肩膀上的牛顿：Kubernetes和SAPKyma在Kubernetes上运行SAPUI5应用(上)在Kubernetes上运行SAPUI5应用(下)当时查看详情

浅谈sapui5odata模型构造函数的输入参数

我们可以在SAPUI5应用里使用如下的代码来创建一个OData模型实例：this.oVocabularyModel=newODataModel("/sap/opu/odata/SAP/vocabulary_srv/");这里传入一个OData服务的url作为ODataModel构造函数的输入参数。ODataModel的依赖，通过如下代码引入... 查看详情

sapui5smarttable控件本地运行时进行excel导出的单步调试(代码片段)

点击SmartTable控件生成的表格控件的ExporttoExcel时，遇到如下错误消息：SmartTable基于的是ODataV4的模型了：Excelexport操作，触发的是一个batch请求：--batch_aaedc4df-e8bd-48e9-8f7b-daf23bd75db4Content-Type:application/httpContent-Transfer-Encoding:b 查看详情

正文