Fiori2.0学习笔记-UI5 Demo Of FixFlex & Form
来源：互联网 发布：算法导论22.4 2 编辑：程序博客网 时间：2024/05/16 08:47
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" 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> <!-- 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>阅读全文
0 0
- Fiori2.0学习笔记-UI5 Demo Of FixFlex & Form
- Fiori2.0学习笔记-UI5 of Table & List
- Fiori2.0学习笔记-GATEWAY
- Fiori2.0学习笔记-controller
- Fiori2.0学习笔记-modules
- Fiori2.0学习笔记-splitApp
- Fiori2.0学习笔记-Fragment
- Fiori2.0学习笔记-JSONModel
- Fiori2.0学习笔记-Manifest
- Fiori2.0学习笔记-路由导航
- Fiori2.0学习笔记-Pages&panels
- Fiori2.0学习笔记-事件的处理
- Fiori2.0学习笔记-dialog应用
- Fiori2.0学习笔记-OData(new)
- Fiori2.0学习笔记-数据绑定
- Fiori2.0学习笔记-OData的应用
- Fiori2.0学习笔记-Ajax数据请求
- Fiori2.0学习笔记-问题汇总
- 不得了！日本出版社竟是这样吸引死宅学编程的
- N 次跳票后，Fedora 27 正式版终于发布了
- Android | FragmentManager
- Go 语言开源发布 8 周年，成 2017 年增长最快语言
- laravel-admin学习笔记之文件管理
- Fiori2.0学习笔记-UI5 Demo Of FixFlex & Form
- onTextChanged使用详解
- Java 9 模块化（Modularity）
- MapReduce操作Hbase 进行单词数量统计Demo
- 从《王者荣耀》来聊聊游戏的帧同步
- time.After 在select-case中使用的正确姿势
- Scala 与Java 简单交互方式2
- List概述
- 一些Linux常用命令（学习笔记）
