Step 16: Dialogs and Fragments

step 설명

이번 스텝에서는 view를 구성하는데 사용할 수 있는 또 다른 요소를 자세하게살펴볼 것 입니다.

Fragments는 재사용 할 수 있지만 controller를 가지지 않는 경량(light-weight) UI parts(UI subtrees)입니다. 즉, 여러 view들에서 재사용 할 수 있는 UI의 특정 부분을 정의하기 윈할 때 또는 특정 상황(다른 User Role, 편집모드 vs 읽기 전용 모드)에서 view의 일정 부분을 교환하기 원할 때를 의미합니다. fragment는 특히 추가 controller 로직이 필요하지 않은 경우에 좋은 후보입니다.

fragment는 '1 to n' 컨트롤로 구성할 수 있습니다.런타임 시 view에 위치한 fragment들은 "normal" view 컨텐츠와 비슷하게 동작합니다. fragment에 있는 컨트롤들은 렌더링 될 때 view의 DOM에 포함된다는 걸 의미합니다. 몰론 dialogs와 같이 view의 일부가 되도록 설계되지 않는 컨트롤들이 있습니다.

이러한 컨트롤들도  fragment들은 곧 보게될 것처럼 특히 유용할 수 있습니다.

We will now add a dialog to our app. Dialogs are special, because they open on top of the regular app content and thus do not belong to a specific view. That means the dialog must be instantiated somewhere in the controller code, but since we want to stick with the declarative approach and create reusable artifacts to be as flexible as possible, and because dialogs cannot be specified as views, we will create an XML fragment containing the dialog. A dialog, after all, can be used in more than only one view of your app.(번역을 잘 못해서 원문을 남겨놓습니다.)

app에 dialog를 추가 할 것 입니다. dialog들는 특별한데 왜냐하면 그것들은 일반적인 app 컨텐츠 맨 위에 열리고 상세 view에 속하지 않기 때문입니다. 이는 dialog가 controller 코드 어딘가에 인스턴스화 해야만 한다는걸 의미하지만 선언적 접근 방식을 고수하고 가능한한 유연하게 재사용 할 수 있는 결과물을 만들거기 때문에 dialog를 가지는 XML fragment를 만들 것 입니다. 어쨌든 dialog는 app의 하나 이상의 view에서 사용할 수 있습니다.

webapp/view/HelloPanel.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto" >
      <content>
      <Button
         id="helloDialogButton"
         text="{i18n>openDialogButtonText}"
         press="onOpenDialog"
         class="sapUiSmallMarginEnd"/>

      <Button
         text="{i18n>showHelloButtonText}"
         press="onShowHello"
         class="myCustomButton"/>
      <Input
         value="{/recipient/name}"
         valueLiveUpdate="true"
         width="60%"/>
      <FormattedText
         htmlText="Hello {/recipient/name}"
         class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      </content>
   </Panel>
</mvc:View>

dialog를 열기 위해 view에 새로운 button을 추가합니다. panel의 컨텐츠 view의 controller에서 event handler 함수를 호출하기만 하면 됩니다.  새로운 id="helloDialogButton"가 필요합니다 in Step 29: Integration Test with OPA

webapp/view/HelloDialog.fragment.xml (New)

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      id="helloDialog"
      title="Hello {/recipient/name}">
   </Dialog>
</core:FragmentDefinition>

fragment에 dialog를 선언적으로 정의하기 위해 새로운 XML 파일을 추가합니다. fragment assets(자산)dms 코어 네임스페이스에 있습니다. 그래서 FragmentDefinition  태그에 xml 네임스페이스를 추가합니다.

구문은 view와 비슷합니다. 그러나 fragments가 controller를 가지고 있지 않기 때문에 이 속성이 누락되었습니다. 또한 fragment는 app DOM 트리에서 어떤 흔적(footprint)도 가지고 있지 않습니다.그리고 fragment 자신의 컨트롤 인스턴스가 없습니다(단지 포함된control들만) 재사용 컨트롤들의 설정하기 위한 container 입니다.

HelloPanel  controller에서 dialog로 접근하기 위한 Dialog id를 추가합니다.

webapp/controller/HelloPanel.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {
      onShowHello : function () {
         …
      },
      onOpenDialog : function () {
         var oView = this.getView();
         var oDialog = oView.byId("helloDialog");
         // create dialog lazily
         if (!oDialog) {
            // create dialog via fragment factory
            oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.walkthrough.view.HelloDialog");
            oView.addDependent(oDialog);
         }


         oDialog.open();
      }

   });
});

fragment에 dialog는 아직 존재하지 않으면 fragment는 다음과 같이 sap.ui.xmlfragment 메소드를 호출해 인스턴스화 합니다.

• HelloPanel view의 ID

이 파라미터는 fragment에서 ID 접두어로 사용됩니다. Dialog  컨트롤에 ID helloDialog 를 정의했습니다. 그리고 oView.byId("helloDialog")를 호출해서 view를 통해 dialog에 접근할 수 있습니다. 이렇게 하면 동일한 방법으로 다른 views에 동일한 fragment를 인스턴트화 하더라도 각각의 dialog는 view ID와 dialog ID에서 연결된 고유 ID를 가집니다.

고유 ID 사용은 중요합니다. 왜냐하면 중복 ID는 framework(SAPUI%)에서 에러로 처리됩니다.

• fragment 정의의 경로

view모델의 lifecycle을 연결시킬 view에 "dependent"로써 dialog를 추가합니다. 편리한 side-effect는 view가 소멸될 때 dialog가 자동으로 삭제되는 것입니다. 그렇지 않으면 resource를 확보하기 위해 dialog를 수동으로 삭제해야 합니다.

webapp/i18n/i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

텍스트 bundle은 open 버튼과 dialog 닫기 버튼, 이 두개의 새로운 텍스트로 확장됩니다.

Conventions

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

- private한 함수와 변수들은 항상 밑줄로 시작해야 합니다.