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

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="<h2>1</h2>">
<core:layoutData>
<FlexItemData growFactor="5" styleClass="item1"/>// growFactor按在整个比例的大小，数字越大比例越大，在HBox和VBox都可以使用
</core:layoutData>
</core:HTML>
<core:HTML content="<h2>2</h2>">
<core:layoutData>
<FlexItemData growFactor="3" styleClass="item2"/>
</core:layoutData>
</core:HTML>
<VBox fitContainer="true">
<layoutData>
<FlexItemData growFactor="7"/>
</layoutData>
<items>
<core:HTML content="<h2>3</h2>">
<core:layoutData>
<FlexItemData growFactor="2" styleClass="item3"/>
</core:layoutData>
</core:HTML>
<HBox fitContainer="true" alignItem
10654
s="Stretch">
<layoutData>
<FlexItemData growFactor="5"/>
</layoutData>
<items>
<core:HTML content="<h2>4</h2>">
<core:layoutData>
<FlexItemData growFactor="1" styleClass="item4"/>
</core:layoutData>
</core:HTML>
<core:HTML content="<h2>5</h2>">
<core:layoutData>
<FlexItemData growFactor="2" styleClass="item5"/>
</core:layoutData>
</core:HTML>
</items>
</HBox>
</items>
</VBox>
<core:HTML content="<h2>6</h2>">
<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>