UI5 Simpleform 字段布局答案

【问题标题】：UI5 Simpleform Field LayoutUI5 Simpleform 字段布局
【发布时间】：2018-02-26 06:38:56
【问题描述】：

我在 SimpleForm 控件中设置布局时遇到了一些问题。这是 XML 代码：

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
    <f:content>
        <Toolbar>
            <ToolbarSpacer/>
            <Button icon="sap-icon://phone" tooltip="Client Numbers"/>
        </Toolbar>
        <Title text="Business Phone" level="H5" titleStyle="H5"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
            placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
        <Label text="Business Extension" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <Input id="businessPhoneExtension" value="{business_phone_extension}">
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </Input>
        <Title text="Business Fax" level="H5"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
    </f:content>
</f:SimpleForm>

我希望第三个字段（商务传真）显示在“商务电话”字段下方。相反，它显示为：

我确定我错过了一些简单的东西。也许我需要改用“表单”控件？我尝试将一个空标签作为下一个元素，但这似乎也不起作用。如果有第四个字段（即商务传真分机），则布局将对齐。

任何帮助将不胜感激！谢谢！

更新：

我已采纳答案中给出的建议。我能够让布局更好地工作，但仍然不是我想要的。这可能就足够了：

我在两个“组”中都添加了“core:Title”，但我仍然注意到布局中有一些奇怪之处。我删除了“GridData”标签，最终得到了上图中的内容。我还尝试使用具有相同效果的“工具栏”。我尝试使用“core:Toolbar”，但它抱怨说库不存在，尽管文档显示“core:Toolbar”是 SimpleForm 控件的聚合。这是最终代码：

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
    <f:content>
        <core:Title text="Business Phone"/>
        <Label text="Number" design="Bold"/>
        <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
            placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
        </MaskInput>
        <Label text="Business Extension" design="Bold"/>
        <Input id="businessPhoneExtension" value="{business_phone_extension}"/>
        <core:Title text="Business Fax"/>
        <Label text="Number" design="Bold"/>
        <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
        </MaskInput>
    </f:content>
</f:SimpleForm>

感谢您的回答！如果有任何其他方式来获得我最初想要的布局，额外的输入会很棒！

【问题讨论】：

标签： sapui5

【解决方案1】：

编辑：之前的答案并不完全准确。

即使title 聚合多重性为 0..1，文档也确实说 新标题或工具栏在表单中启动新组 (FormContainer)。

因此，有几种选择：

选项 1： 使用 sap.ui.core.Title 而不是 sap.m.Title（@fabiopagoti）
选项 2： 删除第二个标题
选项 3：添加第二个 SimpleForm

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
  <f:content>
    <Toolbar>
        <ToolbarSpacer/>
        <Button icon="sap-icon://phone" tooltip="Client Numbers"/>
    </Toolbar>
    <Title text="Business Phone" level="H5" titleStyle="H5"/>
    <Label text="Number" design="Bold">
        <layoutData>
            <l:GridData span="XL2 L2 M2 S6"/>
        </layoutData>
    </Label>
    <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
        placeholderSymbol="_">
        <rules>
            <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
        </rules>
        <layoutData>
            <l:GridData span="XL4 L4 M4 S6"/>
        </layoutData>
    </MaskInput>
    <Label text="Business Extension" design="Bold">
        <layoutData>
            <l:GridData span="XL2 L2 M2 S6"/>
        </layoutData>
    </Label>
    <Input id="businessPhoneExtension" value="{business_phone_extension}">
      <layoutData>
          <l:GridData span="XL4 L4 M4 S6"/>
      </layoutData>
    </Input>
  </f:content>
</f:SimpleForm>
<f:SimpleForm id="faxFormSimple" editable="true" layout="ResponsiveGridLayout">
  <f:content>
    <Title text="Business Fax" level="H5"/>
    <Label text="Number" design="Bold">
        <layoutData>
            <l:GridData span="XL2 L2 M2 S6"/>
        </layoutData>
    </Label>
    <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
        <rules>
            <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
        </rules>
        <layoutData>
            <l:GridData span="XL4 L4 M4 S6"/>
        </layoutData>
    </MaskInput>
  </f:content>
</f:SimpleForm>

【讨论】：

一个 SimpleForm 可以有多个标题 - 使用时它们变成了部分/组。 A new Title or Toolbar starts a new group (FormContainer) in the form
文档中的多重性说 0..1。然而，文档还说 一个新的标题或工具栏在表单中启动一个新的组 (FormContainer) 是真的。让我仔细检查一下
是的，但是在标题聚合中 - 好点。文档中也没有明确说明 sap.ui.core.Title 在内容聚合中具有不同的效果。这是相当通用的，当事情不是那样时，假设它会是 sap.m.Title 是公平的。

【解决方案2】：

我相信您的表单有问题，因为您使用的是 sap.m.Title 而不是 sap.ui.core.Title。

尝试像这样替换它们

// as is
<Title text="Business Phone" level="H5" titleStyle="H5"/>
// to be
<core:Title text="Business Phone" level="H5" />

像这样，您的表单中会有不同的部分。检查所有控件中没有 GridData 的结果。

不要忘记将核心命名空间添加到您的 xml 文件中

<mvc:View 
 controllerName="your.controller.name"  
 displayBlock="true" 
 xmlns:mvc="sap.ui.core.mvc"
 xmlns:f="sap.ui.layout.form" 
 xmlns:l="sap.ui.layout" 
 xmlns:core="sap.ui.core"
 xmlns="sap.m" >

【讨论】：

【解决方案3】：

我最终找到了如何做我想做的事。通过将 'columnsM' 和 'columnsL' 属性添加到 SimpleForm 控件，它现在以我想要的格式显示：

<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers" columnsM="1" columnsL="1">
    <f:content>
        <core:Title text="Business Phone"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
            placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
        <Label text="Extension" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <Input id="businessPhoneExtension" value="{business_phone_extension}">
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </Input>
        <core:Title text="Business Fax"/>
        <Label text="Number" design="Bold">
            <layoutData>
                <l:GridData span="XL2 L2 M2 S6"/>
            </layoutData>
        </Label>
        <MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
            <rules>
                <MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
            </rules>
            <layoutData>
                <l:GridData span="XL4 L4 M4 S6"/>
            </layoutData>
        </MaskInput>
    </f:content>
</f:SimpleForm>

现在表单显示如下：

感谢所有回答的人，这很有帮助，我现在对表单布局的工作原理有了更好的了解！

干杯！

【讨论】：