(UI5) 대화 상자 및 조각

by

뷰를 구성하는 데 사용할 수 있는 다른 요소를 살펴보겠습니다.

버튼을 클릭하면 대화 상자가 열립니다.

HelloPanel.view.xml

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

대화 상자를 여는 뷰의 집계 콘텐츠 아래에 버튼을 추가합니다.

SmallMargin은 기존 버튼에 약간의 간격을 추가합니다.

HelloDialog.fragment.xml

조각에서 대화를 선언적으로 정의하는 새 XML 파일을 만듭니다.

재사용성을 높이기 위해 보기에서 분리됩니다.

<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>

조각 자산은 핵심 네임스페이스에 있으므로 xml 네임스페이스를 FragmentDefinition 태그에 추가합니다.

부분
Fragment는 화면을 그리는 기능과 구문에서 View와 매우 유사하지만 View는 1:1로 컨트롤러가 있고 Fragment는 컨트롤러가 없기 때문에 controllerName 속성이 존재하지 않습니다.

재사용성을 높이는 용기입니다.

HelloPanel 컨트롤러에서 대화 상자에 액세스하려면 대화 ID를 추가하십시오.

i18n_en.properties

openDialogButtonText=Dialog

버튼의 텍스트는 대화 상자입니다.

HelloPanel.controller.js

기존 논리의 정의에서 배열에 "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 
            }
        }

    });
});

대화 버튼을 누르면 Hellodialog.fragment.xml이 호출됩니다.

if 문이 없으면 버튼을 처음 클릭할 때 창이 열리지만 두 번째에는 열리지 않습니다.

this.byId()괄호 안의 ID를 찾는 방법입니다.

fragment.xml이 로드되었으므로 로드된 파일에서 ID를 찾습니다.


load파일을 읽고, fragment 객체를 얻어 load라는 메서드를 실행하는 메서드입니다.


name경로에서 .fragment.xml 파일만 읽으므로 확장자를 생략합니다.


then 이 메서드는 이전 메서드가 완료되면 then 메서드를 실행합니다.

로드가 완료되는 순간 로드된 개체에서 실행되고 호출됩니다.

컨트롤러가 연결된 보기에 로드된 오디오 대화 상자 개체를 표시합니다.

UI 트리에 추가되지 않은 경우에도 항상 대화 연결을 사용하여 뷰의 데이터 바인딩 및 수명 주기를 관리합니다.

종속성 추가 지침

두 번째 클릭에서 else 문을 실행합니다.

not 연산자를 사용하지 않고 true 및 false 문을 서로 바꿔서 사용할 수 없습니까?
이 작업을 수행할 수 있지만 일반적으로 첫 실행 또는 새로 생성된 문에 대해 true로 설정됩니다.

사용자는 확실히 어느 시점에서 대화 상자를 닫고 싶어할 것입니다.


따라서 대화 상자를 닫고 이벤트 핸들러를 할당하는 버튼을 추가하십시오.

HelloDialog.fragment.xml

닫기 버튼을 추가합니다.

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

대화상자의 beginButton 집계에 버튼을 추가합니다.

press handler는 이벤트 핸들러입니다.

onCloseDialogHelloPanel 컨트롤러에 대한 참조를 전달하여 버튼을 누를 때 메서드가 실행되도록 합니다.

시작 버튼
대화 상자에는 집합적인 beginButton 및 endButton이 있습니다.

“시작”은 무슨 뜻인가요?
현재 언어의 텍스트 방향에 따라 “start”와 “end”는 “left”와 “right”의 동의어로 사용됩니다.

왼쪽에서 오른쪽으로 쓰는 언어에서는 왼쪽에 beginButton을 그리고 오른쪽에 endButton을 그립니다.

일부 언어에서는 오른쪽에서 왼쪽 모드에서 순서가 반대로 되어 있습니다.

i18n_en.properties

dialogCloseButtonText=OK

버튼의 텍스트는 괜찮습니다.

HelloPanel.controller.j

fragment.load 메서드에서 controller : this프레이즈 추가하기 앞서 언급했듯이 Fragment에는 컨트롤러가 없습니다.

버튼을 클릭하면 close 함수가 실행되기 때문에 close 함수 문도 추가된다.

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

Related Posts: