[UI5] Routing Detail Page

항목을 선택하고 Detail 버튼을 클릭하면 Detail Page로 이동해 해당 데이터를 보여준다.

🌞 이전 게시물에서 다 했던 내용들을 종합적으로 다시 해본거기때문에 자세한 설명은 생략한다.

1. manifest.json 수정 (라우팅 설정)

        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "viewPath": "product.view",
                "controlId": "app",
                "controlAggregation": "pages",
                "async": true
            },
            "routes": [{
                "pattern": "",
                "name": "list",
                "target": "list"
            }, {
                "pattern": "detail",
                "name": "detail",
                "target": "detail"
            }],
            "targets": {
                "list": {
                    "viewId": "list",
                    "viewName": "List"
                },
                "detail": {
                    "viewId": "detail",
                    "viewName": "Detail"
                }
            }
        }

2. Component.js에서 router 초기화

this.getRouter().initialize();

3. App.view.xml 수정

기존 App 뷰에 있었던 내용을 밑에서 새로 생성하는 뷰로 옮기고 manifest.json에서 설정해준 controlId에 부여한 id를 App모듈에 지정한다.

<mvc:View 
   controllerName="product.controller.App"
   xmlns:html="http://www.w3.org/1999/xhtml" 
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:core="sap.ui.core"
   xmlns="sap.m">
   <App id="app" />    
</mvc:View>

4. List 뷰 생성

<mvc:View
    controllerName="product.controller.List" 
    xmlns="sap.m"
    xmlns:table="sap.ui.table"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc">
         <Page title="{i18n>title}">
            <content>
               <!--sap.ui.table 네임스페이스에 있는 테이블-->
               <table:Table
                    id="productTable"
                    selectionMode="Single"
                    rowSelectionChange=".onRowSelectionChange"
                    fixedBottomRowCount="2"
                    selectionBehavior="Row"
                    rows="{product>/ProductCollection}"> 
                  <table:extension>
                     <OverflowToolbar>
                        <Title text="Product List" />
                        <ToolbarSpacer />
                        <Select
                           change=".onSelect">
                           <items>
                              <core:ListItem key="A" text="Manager"/>  
                              <core:ListItem key="B" text="Casher"/>
                           </items>
                        </Select>
                     </OverflowToolbar>
                  </table:extension>
                  <table:columns>
                     <table:Column width="12rem" sortProperty="Name" filterProperty="Name"> <!--sort, filter-->
                        <Label text="Product Name" />
                        <table:template>
                           <Text text="{product>Name}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="11rem">
                        <Label text="Product Id" />
                        <table:template>
                           <Link text="{product>ProductId}" press=".onDetailDialog"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="6rem" hAlign="Right">
                        <Label text="Quantity" />
                        <table:template>
                           <Text text="{product>Quantity}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="9rem">
                        <Label text="Status" />
                        <table:template>
                           <Text text="{product>Status}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="8rem">
                        <Label text="Price" />
                        <table:template>
                           <!--<Text text="{product>Price}"/>-->
                           <Text text="{
                                parts: [{path: 'product>Price'}, {path:'product>CurrencyCode'}],
                                type: 'sap.ui.model.type.Currency',
                                formatOptions: {
                                    showMeasure: true
                                }
                            }" />
                        </table:template>
                     </table:Column>
                     <table:Column width="10rem">
                        <Label text="Supplier" />
                        <table:template>
                           <Text text="{product>SupplierName}"/>
                        </table:template>
                     </table:Column>
                     <table:Column width="11rem">
                        <Label text="Category" />
                        <table:template>
                           <Text text="{product>Category}"/>
                        </table:template>
                     </table:Column>
                        <table:Column width="11rem" hAlign="Center">
                        <Label text="Delivery Date" />
                        <table:template>
                           <Text text="{product>DateOfSale}"/>
                        </table:template>
                     </table:Column>
                  </table:columns>
               <table:footer>
                       <OverflowToolbar>
                           <ToolbarSpacer />
                           <Button text="Delete" />
                           <Button text="Detail" press=".onGoDetail"/>
                       </OverflowToolbar>
                   </table:footer>    
               </table:Table>
            </content>
         </Page>
</mvc:View>

4-1. List 컨트롤러 생성

App컨트롤러에 있던 이벤트들도 List 컨트롤러에 옮겨준다.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/UIComponent",
    "sap/ui/core/routing/History",
    "sap/ui/core/Fragment",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageToast",
    "sap/m/MessageBox"    
], function (Controller, UIComponent, History, Fragment, JSONModel, MessageToast, MessageBox) {
    "use strict";
    return Controller.extend("product.controller.List", {
               onSelect : function(oEvent) {
         var sSelectedKey = oEvent.getSource().getSelectedKey();
         var oTable = this.byId("productTable");
         var aColumns = oTable.getColumns(); /* getColumns oTable의 데이터를 배열로 가져온다 */


         if( sSelectedKey === "A") {
            aColumns[2].setVisible(true);        
            aColumns[4].setVisible(true);         
         } else {
            aColumns[2].setVisible(false);         
            aColumns[4].setVisible(false);         
         }
      },

      onDetailDialog : function (oEvent) {
              var oView = this.getView();
              var oModel = oView.getModel("product");
              var sSelectedPath = oEvent.getSource().getBindingContext("product").getPath();
              var oSelectedData = oModel.getProperty(sSelectedPath);
              // oModel.setProperty("/detailData", oSelectedData);


            var oDetailModel = new JSONModel(oSelectedData); //선택한 데이터를 모델로 생성하고 뷰에 바인딩
            this.getView().setModel(oDetailModel, "detail");

            if(!this.byId("HelloDialog")) { 
                Fragment.load({ 
                    id: oView.getId(),
                    name: "product.view.HelloDialog",    
                    controller: this
                }).then(function (oDialog) {    
                    oView.addDependent(oDialog);     
                    oDialog.open();
                });
            } else {
                this.byId("HelloDialog").open(); 
            }
        }, 

        onCloseDialog : function () {
            this.byId("HelloDialog").close();
        },

        onGoDetail : function (oEvent) {
            var oTable = this.byId("productTable");
            var aSelectedIndices = oTable.getSelectedIndices(); //배열데이터가 리턴되면서 선택된 인덱스가 넘어온다

            if( aSelectedIndices.length !== 1 ) {
                MessageBox.error("You can choose only one Data");
                return;
            }

            UIComponent.getRouterFor(this).navTo("detail");
        },

        onRowSelectionChange : function (oEvent) { //Link모듈
            var oRowContext = oEvent.getParameter("rowContext"); //체크박스 찾을때 사용(거의 대부분)
            var sPath = oRowContext.getPath(); //클릭한 row값 가지고 있음, 이벤트 어느모듈에서 일어났냐에 따라서 context 가지고 오는 경로가 달라진다
            var oModel = this.getView().getModel("product");
            var oSelectedData = oModel.getProperty(sPath);

            this.getView().getModel("detail").setData(oSelectedData);
        }
    });
});

Component.js에서 setModel을 해준다. this.setModel(new JSONModel({}), "detail");

기존에는 App이 List의 상위에 있어서 상위인 App에서 사용한걸 하위인 List, Detail에서 모두 공유가 가능했다. 근데 "detail"이라는 모델을 만들었을때는 상하관계가 아닌 동등한 관계기 때문에 Detail 뷰에서 사용을 못한다. 그래서 바인딩을 아무리 걸어도 "detail"모델을 가지고 올수 없어서 제일 상위인 container(Component.js)에서 setModel을 해준다. 그래서 자주 사용하는것들은 가장 상위에 있는 Component.js에서 구현한다.

5. Detail 뷰 생성

<mvc:View
    controllerName="product.controller.Detail"
    xmlns:m="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns="sap.ui.layout.form">
    <m:Page 
        title="Detail Page"
        showNavButton="true"
        navButtonPress=".onNavBack">
        <m:content>
            <!--<Text text="{product>/detail/ProductId}" />    -->
            <!--<m:Text text="{detail>/ProductId}" />    -->
            <core:Fragment fragmentName="product.view.DetailForm" type="XML" />
        </m:content>
        </m:Page>
</mvc:View>

5-1. DetailForm.fragment.xml 생성

<core:FragmentDefinition
    xmlns:m="sap.m"
    xmlns="sap.ui.layout.form"
    xmlns:core="sap.ui.core">
        <Form> <!--Form은 모듈 하나만 허용-->
            <layout>
               <ResponsiveGridLayout 
                labelSpanXL="2" 
                labelSpanL="4" 
                labelSpanM="4" 
                labelSpanS="12" 
                columnsXL="2" 
                columnsL="2" 
                columnsM="2"/>
            </layout>
            <formContainers> <!--formContainers 모듈 여러개 허용-->
            <FormContainer>
               <formElements>
                  <FormElement>
                     <label>
                        <m:Label text="Product Name"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Name}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Product Id"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/ProductId}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Quantity"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Quantity}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Status"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Status}"/>
                     </fields>
                  </FormElement>
               </formElements>
            </FormContainer>
            <FormContainer>
               <formElements>
                  <FormElement>
                     <label>
                        <m:Label text="Price"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Price}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="SupplierName"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/SupplierName}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Category"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Category}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Delivery Date"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/DateOfSale}"/>
                     </fields>
                  </FormElement>
               </formElements>
            </FormContainer>
           </formContainers> 
         </Form>
</core:FragmentDefinition>

5-2. Detail 컨트롤러 생성

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/UIComponent",
    "sap/ui/core/routing/History"
], function (Controller, UIComponent, History) {
    "use strict";
    return Controller.extend("product.controller.Detail", {
        onNavBack : function () {
            var oHistory = History.getInstance();
            var sPrevious = oHistory.getPreviousHash();

            if( sPrevious !== undefined ) {    //혹시나 undefined경우가 생기면 overview화면으로 보내라
                window.history.go(-1);    // 한칸 뒤로 
            } else {
                UIComponent.getRouterFor(this).navTo("list");
            }
        }
    });
});