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 水平中心分散分布
"400px" justifyContent="SpaceAround">
<Text text="1">Text>
<Text text="2">Text>
<Text text="3">Text>
<Text text="4">Text>
<Text text="5">Text>
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” 我看了加了去掉没有任何变化，暂记住这个东西
<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" alignItems="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>
<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>
<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舒服
"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">
text="Office" class="T1"/>