Step 18: Icons

step 설명

dialog 여전히 횡하게 비어있습니다. SAPUI5는 500 이상의 아이콘이 포함된 아이콘 클꼴을 제공되므로 dialog를 열 때 사용자들이 마주치는 아이콘을 추가합니다.

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"
            icon="sap-icon://world"
            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를 열기 위한 버튼에 아이콘을 추가합니다. sap-icon:// 프로토콜은 아이콘 폰트의 아이콘을 로드해야 함을 나타냅니다. 실별자 world 는 아이콘 폰에 읽을 수 있는 이름입니다. 

Tip

Demo Kit에 Icon Explorer 툴을 사용하여 다른 아이콘을 찾을 수 있습니다.

아이콘을 호출하기 위해 sap-icon://<iconname>.의 Icon Explorer에 나열된 이름을 사용하십시오.

webapp/view/HelloDialog.fragment.xml

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      id="helloDialog"
      title ="Hello {/recipient/name}">
      <content>
         <core:Icon
            src="sap-icon://hello-world"
            size="8rem"
            class="sapUiMediumMargin"/>
      </content>
      <beginButton>
         <Button
            text="{i18n>dialogCloseButtonText}"
            press="onCloseDialog"/>
      </beginButton>
   </Dialog>
</core:FragmentDefinition>

dialog fragment에서 dialog의 content aggregation에 아이콘 컨트롤을 추가합니다. 아이콘 폰트는 또한 "Hello World" 아이콘이 붙어있어서 여기에 적합합니다. 아이콘 사이즈를 정의하고 중간 margin으로 설정합니다.

Conventions

- 가능하면 항상 이미지들보다 아이콘 폰트를 사용하십시오. 퀄리티 손실없이 (vector graphics) 가변(확장·축소하여도 난조가 생기지 않는)가능하고 개별적으로 읽어들일 필요가 없습니다.