○ 데이터의 상세 정보를 확인하기 위해 해당 정보를 클릭하면 앱 사이즈가 작아지며 상세 페이지로 이동한다.
- [ Detail.view.xml ]
<mvc:View
xmlns:mvc="sap.ui.core.mvc">
</mvc:View>- [ App.view.xml ]
<mvc:View
...
>
<FlexibleColumnLayout id="flexibleColumnLayout" backgroundDesign="Solid">
...
<midColumnPages>
<mvc:XMLView id="detailView" viewName="sap.ui.demo.fiori2.view.Detail"/>
</midColumnPages>
</FlexibleColumnLayout>
</mvc:View>1) 'midColumnPages'를 'FlexibleColumnLayout' 하위 페이지로 추가한다.
2) 'id'는 'detailView'로 지정해두고, [ manifest.json ]에 설정해 두었던 'rootView'로 경로 이동이 가능토록 view 설정
- [ List.view.xml ]
<!-- DynamicPage Content -->
...
...
<items>
<ColumnListItem type="Navigation" press=".onListItemPress">
<cells>
<ObjectIdentifier title="{products>Name}" text="{Prodects>ProductId}"/>
<ObjectNumber
number="{
parts:[
{path:'products>Price},
{path:'products>CurrencyCode'}
],
type: 'sap.ui.model.type.Currency',
formatOptions: {showMeasure: false}
}"
unit="{products>CurrencyCode}"/>
</cells>
</ColumnListItem>
</items>1) 'press' 이벤트 핸들러를 추가한다.
2) 컨트롤러에서 기능이 구현될 매개로 'press' 형식을 '.onListItemPress'로 지정해둔다.
- [ List.controller.js ]
sap.ui.define([
...,
'sap/f/library'
], function(JSONModel, ..., fioriLibrary)
...
...
onSort: function() {
this._bDescendingSort = !this._bDescendingSort;
var oBinding = this.oProductsTable.getBinding("items"),
oSorter = new Sorter("Name", this._bDescendingSort);
oBinding.sort(oSorter);
},
onListItemPress: function() {
var oFCL = this.oView.getParent().getParent();
oFCL.setLayout(fioriLibrary.LayoutType.TwoColumnsMidExpanded);
}
});
});1) 종속성 정의에 'sap/f/library' 추가한 후, 'fioriLibrary'를 파라미터로 추가한다.
2) onListItemPress
* oFCL : 내장돼 있는 메서드의 부모 요소를 불러와 view를 구현한다(?)
TISTORY
나를 표현하는 블로그를 만들어보세요.
www.tistory.com
* 'fioriLibrary'를 매개로 'TwoColumnsMidExpanded'를 'LayoutType'으로 가지는 'oFCL'로 생성한다.
* 첫 번째 열이 두 번째 열보다 크게 표현된다.
