Fiori2.0学习笔记-UI5 Demo Of FixFlex & Form

最新推荐文章于 2021-07-08 09:50:47 发布

宕机高手

最新推荐文章于 2021-07-08 09:50:47 发布

阅读量919

点赞数

分类专栏： SAP UI5 文章标签： Fiori

本文链接：https://blog.csdn.net/weixin_41012753/article/details/78549709

版权

SAP UI5 专栏收录该内容

33 篇文章 8 订阅

订阅专栏

FixFlex

需要引入xmlns:l=”sap.ui.layout”

<l:FixFlex>
    <l:fixContent>
        <Image width="150px" src="img/haibaoda.png" densityAware="true"/>
    </l:fixContent>//类似独占一行 固定布局
        <l:flexContent>
        <Text class="column1" text="Hello World"></Text>
    </l:flexContent>//类似向左浮动  柔性布局
</l:FixFlex>

justifyContent & alingnItems

justifyContent 水平方向位置

Start End Center SpaceAround分散分布

alingnItems 竖直方向位置

Start End Center SpaceAround


<FlexBox height="400px" justifyContent="Center" alignItems="Center">
    <items>
        <Button text="1" type="Emphasized"/>
        <Button text="2" type="Reject"/>
        <Button text="3" type="Accept"/>
    </items>
</FlexBox>

justifyContent

SpaceAround 水平靠两侧分散分布
SpaceBetween 水平中心分散分布

<FlexBox height="400px" justifyContent="SpaceAround">
    <items>
        <Text text="1"></Text>
        <Text text="2"></Text>
        <Text text="3"></Text>
        <Text text="4"></Text>
        <Text text="5"></Text>
    </items>
</FlexBox>

direction & renderType

direction item方向
Row
Column
ColumnReverse

renderType 给予类型
Bare Div

额外的还有三种button类型首字母ear 打一个基本就出来了

<FlexBox height="400px" renderType="Bare" direction="Row" alignItems="Start">
    <items>
        <Button text="1" type="Emphasized"/>
        <Button text="2" type="Accept"/>
        <Button text="3" type="Reject"/>
    </items>
</FlexBox>

FlexBox 里还有一个wrap 属性，wrap=“wrap” 我看了加了去掉没有任何变化，暂记住这个东西

<Button icon="sap-icon://download">//下载按钮

<FlexBox renderType="Bare">
    <items>
        <Button text="Some text" type="Emphasized" class="sapUiSmallMarginEnd">
            <layoutData>
                <FlexItemData growFactor="1"/>
            </layoutData>
        </Button>
        <Input value="Some value" width="auto" class="sapUiSmallMarginEnd">
            <layoutData>
                <FlexItemData growFactor="2"/>
            </layoutData>
        </Input>
        <Button icon="sap-icon://download">
            <layoutData>
                <FlexItemData growFactor="3"/>
            </layoutData>
        </Button>
    </items>
</FlexBox>

下面这个demo厉害了，他有一个整的DIV，里面分四块，其中第三块又分为上一块下两块，注意这个不是自适应

<HBox>//水平放置DIV
    <items>
        <core:HTML content="&lt;h2&gt;1&lt;/h2&gt;">
            <core:layoutData>
                <FlexItemData growFactor="5" styleClass="item1"/>// growFactor按在整个比例的大小，数字越大比例越大，在HBox和VBox都可以使用
            </core:layoutData>
        </core:HTML>
        <core:HTML content="&lt;h2&gt;2&lt;/h2&gt;">
            <core:layoutData>
                <FlexItemData growFactor="3" styleClass="item2"/>
            </core:layoutData>
        </core:HTML>
        <VBox fitContainer="true">
            <layoutData>
                <FlexItemData growFactor="7"/>
            </layoutData>
            <items>
                <core:HTML content="&lt;h2&gt;3&lt;/h2&gt;">
                    <core:layoutData>
                        <FlexItemData growFactor="2" styleClass="item3"/>
                    </core:layoutData>
                </core:HTML>
                <HBox fitContainer="true" alignItems="Stretch">
                    <layoutData>
                        <FlexItemData growFactor="5"/>
                    </layoutData>
                    <items>
                        <core:HTML content="&lt;h2&gt;4&lt;/h2&gt;">
                            <core:layoutData>
                                <FlexItemData growFactor="1" styleClass="item4"/>
                            </core:layoutData>
                        </core:HTML>
                        <core:HTML content="&lt;h2&gt;5&lt;/h2&gt;">
                            <core:layoutData>
                                <FlexItemData growFactor="2" styleClass="item5"/>
                            </core:layoutData>
                        </core:HTML>
                    </items>
                </HBox>
            </items>
        </VBox>
        <core:HTML content="&lt;h2&gt;6&lt;/h2&gt;">
            <core:layoutData>
                <FlexItemData growFactor="5" styleClass="item6"/>
            </core:layoutData>
        </core:HTML>
    </items>
</HBox>

下面介绍一个也是sap.ui.layout库里的一个玩应——Grid。
这玩应其实和那个栅格结构差不多，我们在这里就注重一下他的写法就OK。

defaultIndent="L1 M2 S4" 
hSpacing  0, 0.5 , 1 or 2 块与块之间的间距
vSpacing 0, 0.5, 1 and 2.行间距

Grid 里面设置好整体的属性然后内容还是放在content中，一个块用一个ObjectListItem

<l:Grid defaultSpan="L2 M6 S12" hSpacing="2"  vSpacing="2" class="sapUiSmallMarginTop">
    <l:content>
        <!-- Third / Half width items -->
        <ObjectListItem id="productitem-small-0" title="{Name}" intro="{Category}"
            icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
        <ObjectListItem id="productitem-small-1" title="{Name}" intro="{Category}"
            icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
        <ObjectListItem id="productitem-small-2" title="{Name}" intro="{Category}"
            icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
        <ObjectListItem id="productitem-small-3" title="{Name}" intro="{Category}"
            icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
        <ObjectListItem id="productitem-small-4" title="{Name}" intro="{Category}"
            icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
        <ObjectListItem id="productitem-small-5" title="{Name}" intro="{Category}"
            icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }"></ObjectListItem>
        <!-- Half/Full width items -->
        <ObjectListItem id="productitem-large-0" title="{Name}" intro="{Category}"
            icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }">
            <layoutData>
                <l:GridData span="L6 M12 S12"/>
            </layoutData>
        </ObjectListItem>
        <ObjectListItem id="productitem-large-1" title="{Name}" intro="{Category}"
            icon="{ path: 'Category', formatter: 'sap.ui.layout.sample.GridTiles.Formatter.categoryIcon' }">
            <layoutData>
                <l:GridData span="L6 M12 S12"/>
            </layoutData>
        </ObjectListItem>
    </l:content>
</l:Grid>

以上就是Flex的全部内容，下面我们走进Form的世界

整个Form要放在form里，表单内容要放在formContainers里，一组Form放在formContainer，可以在后面加单个Form标题,所有表单元素要卸载FormElements，一个表单元素可以写在FormElement中，后面加一个Label标签可以给单组元素命名，在FormElement标签里，加一个Text标签可以完整单条Form数据

<f:Form id="FormDisplay354" editable="true">
    <f:title>
        <core:Title text="Address"/>
    </f:title>
    <f:layout>
        <f:ResponsiveGridLayout labelSpanXL="6" labelSpanL="6" labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" columnsXL="3"
            breakpointL="1200" breakpointM="400" columnsL="2" columnsM="2" singleContainerFullSize="false"/>
    </f:layout>
    <f:formContainers>
        <f:FormContainer title="groupd1">
            <f:formElements>
                <f:FormElement label="Name">
                    <f:fields>
                        <Text text="Richard" id="nameText"/>

                    </f:fields>
                </f:FormElement>
                <f:FormElement label="Street">
                    <f:fields>
                        <Text text="Haerbin"/>
                    </f:fields>
                </f:FormElement>
                <f:FormElement label="ZIP Code/City">
                    <f:fields>
                        <Text text="150000"/>
                    </f:fields>
                </f:FormElement>
                <f:FormElement label="Country">
                    <f:fields>
                        <Text text="China" id="countryText"/>
                    </f:fields>
                </f:FormElement>
            </f:formElements>
        </f:FormContainer>
        <f:FormContainer title="groupd2">
            <f:formElements>
                <f:FormElement label="Name">
                    <f:fields>
                        <Text text="Richard" id="richard1"/>
                    </f:fields>
                </f:FormElement>
                <f:FormElement label="Street">
                    <f:fields>
                        <Text text="Haerbin"/>
                    </f:fields>
                </f:FormElement>
                <f:FormElement label="ZIP Code/City">
                    <f:fields>
                        <Text text="150000"/>
                    </f:fields>
                </f:FormElement>
                <f:FormElement label="Country">
                    <f:fields>
                        <Text text="China" id="china1"/>
                    </f:fields>
                </f:FormElement>
            </f:formElements>
        </f:FormContainer>
    </f:formContainers>
</f:Form>

下面我们对上面那个form进行扩充和美化。
首先我们我添加一个Toolbar（工具栏），里面包括标题ADDRESS和两个按钮

<f:toolbar>
    <Toolbar id="TB1">
        <Title id="Title1" text="Address" level="H4" titleStyle="H4"/>
        <ToolbarSpacer/>
        <Button icon="sap-icon://drop-down-list"/>
    </Toolbar>
</f:toolbar>

然后我们在对整体布局进行调整

<f:layout>
    <f:ResponsiveGridLayout labelSpanXL="4" labelSpanL="3" labelSpanM="4" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="0" emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="2" columnsM="1" singleContainerFullSize="false"/>
</f:layout>

然后我们对单个Form里后面添加两端长度不一样的input输入框

<f:FormElement label="Street">
    <f:fields>
        <Input value="">
            <layoutData>
                <l:GridData span="XL2 L6 M3 S4"/>
            </layoutData>
        </Input>
        <Input value="">
            <layoutData>
                <l:GridData span="XL2 L3 M3 S4"/>
            </layoutData>
        </Input>
    </f:fields>
</f:FormElement>

然后我们在Country元素中加一个下拉选择框

<f:FormElement label="Country">
    <f:fields>
        <Select width="100%" id="country" selectedKey="">
            <items>
                <core:Item text="Germany" key="Germany"/>
                <core:Item text="USA" key="USA"/>
                <core:Item text="England" key="England"/>
            </items>
        </Select>
    </f:fields>
</f:FormElement>

下面我们在接触一个Form类型，叫做SimpleForm，就顾名思义，确实简短粗暴的语义化标签让我看着比Form舒服

<f:SimpleForm id="SimpleFormDisplay354wideDual" editable="false" layout="ResponsiveGridLayout" title="Address" labelSpanXL="4"
    labelSpanL="3" labelSpanM="4" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0"
    columnsXL="2" columnsL="2" columnsM="2" singleContainerFullSize="false">
    <f:content>
        <core:Title text="Office" class="T1"/>
        <Label text="Name"/>
        <Text text="my Name"/>
        <Label text="Street/No."/>
        <Text text="songhua street"/>
        <Label text="ZIP Code/City"/>
        <Text text="150000"/>
        <Label text="Country"/>
        <Text text="China"/>

        <core:Title text="Online"/>
        <Label text="Web"/>
        <Text text="www.sdf"/>
        <Label text="Twitter"/>
        <Text text="twitter"/>

        <core:Title text="Offline"/>
        <Label text="Web"/>
        <Text text="www.sdf"/>
        <Label text="Twitter"/>
        <Text text="twitter"/>
    </f:content>
</f:SimpleForm>