[UI5] Dialogs and Fragments

view를 구성하는데 사용할 수 있는 또 다른 요소를 살펴본다.

버튼이 클릭되었을 때 dialog를 open한다.

HelloPanel.view.xml

<content>
    <Button id="helloDialogButton"
            text="{i18n>openDialogButtonText}"
        press=".onOpenDialog"
        class="sapUiSmallMarginEnd" />

dialog를 열기 위해 view의 어그리게이션 content 하위에 버튼을 하나 추가해준다. 기존의 버튼과 약간의 간격을 위해 SmallMargin을 추가한다.

HelloDialog.fragment.xml

fragment에 dialog를 선언적으로 정의하기 위해 새로운 XML 파일을 생성한다. 재사용성을 높이기 위해 view와 분리한다.

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <Dialog
        id="HelloDialog"
        title="Hello {/recipient/name}"
        contentWidth="50%"
        contentHeight="40%">
    <VBox>
      <Text text="First Dialog" />        
    </VBox>
    </Dialog>
</core:FragmentDefinition>

fragment assets은 코어 네임스페이스에 있기 때문에 FragmentDefinition 태그에 xml 네임스페이스를 추가한다.

Fragment
fragment는 화면을 그려주는 기능면과 구문면에서 view와 매우 흡사하지만 view는 controller를 1대1로 가지고 있고 fragments는 controller를 가지고 있지 않아서 controllerName이라는 프로포티가 존재하지 않는다. 재사용성을 높이기 위한 container이다.

HelloPanel 컨트롤러에서 dialog로 접근하기 위한 Dialog id를 추가한다.

i18n_ko.properties

openDialogButtonText=Dialog

버튼의 텍스트는 Dialog.

HelloPanel.controller.js

기존 로직의 define에서 배열에 "sap/ui/core/Fragment"를 추가하고 매개변수에도 Fragment을 추가한다. 이후 아래 구문도 추가한다.

        onOpenDialog : function () { 
            var oView = this.getView();

            if(!this.byId("helloDialog")) { 
                Fragment.load({     
                    id: oView.getId(),
                    name: "sap.ui.demo.walkthrough.view.HelloDialog",
                        controller: this
                }).then(function (oDialog) {    
                    oView.addDependent(oDialog);
                    oDialog.open();
                });
            } else {
                this.byId("HelloDialog").open(); //Dialog ID 
            }
        }

    });
});

Dialog 버튼 눌렀을때 Hellodialog.fragment.xml 불러온다.

만약 if문을 사용하지 않으면 처음 버튼눌렀을때 창 잘 열리지만 두번째부턴 창이 뜨지 않는다.

this.byId()는 괄호안의 id를 찾는 메소드이다. fragment.xml을 불러왔기 때문에 불러온 파일에서 id를 찾는다.
load는 파일을 읽어오는 메소드이고, fragment 객체를 가져와서 load라는 메소드를 실행한다.
name에서 경로는 .fragment.xml파일만을 읽어오기 때문에 확장자는 생략한다.
then 메소드는 이전의 메소드가 끝나면 then 메소드를실행한다. load가 끝나는순간 then이 실행되고, load한 객체를 불러온다. 불러온 odialog 객체를 컨트롤러가 연결되있는 뷰에 보여준다.

UI 트리에 추가되지 않더라도 항상 view의 데이터 바인딩과 lifecycle 관리를 위해 dialog 연결은 addDependent 메소드를 사용한다.

두번째 클릭부터는 else구문을 타게된다.

not 연산자를 사용하지 않고 true 구문과 false 구문을 바꿔서 사용하면 안되나?
그렇게 해도 되긴 하지만, 보통 첫번째 실행이거나 새로 생성하게 되는 구문은 true에 넣는다.

---

사용자는 반드시 어느 순간에 dialog를 닫길 원할 것이다.
그래서 dialog를 닫는 버튼을 추가하고 event handler에 할당한다.

HelloDialog.fragment.xml

닫는 버튼을 추가해준다.

<beginButton>
    <Button text="{i18n>dialogCloseButtonText}"
        press=".onCloseDialog" />
</beginButton>

dialog의 beginButton aggregation에 버튼을 추가한다. press handler는 event handler onCloseDialog를 참조하고 HelloPanel controller에 참조를 전달했으므로 메소드는 버튼이 눌릴 때 실행된다.

beginButton
dialog는 endButton뿐만 아니라 aggregation beginButton도 가지고 있다. "begin"이라는 의미는
현재 언어의 텍스트 방향에 따라 달라지는데, "begin"과 "end"는 "left"와 "right"의 동의어로 사용된다. 왼쪽에서 오른쪽으로 진행되는 언어에서 beginButton은 왼쪽으로 그려지고 endButton은 오른쪽으로, 특정 언어에 대해 오른쪽에서 왼쪽 모드에서 순서는 바뀐다.

i18n_ko.properties

dialogCloseButtonText=OK

버튼의 텍스트는 ok.

HelloPanel.controller.j

fragment.load 메소드에 controller : this구문을 추가한다. 이전 설명에서처럼 fragments는 controller를 가지지 않는다.

버튼을 클릭했을 때 닫는 함수를 실행하므로 닫는 함수 구문도 추가해준다.

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