Step 18: Icons

SAPUI5에는 500 개 이상의 아이콘이 제공된다. 이번 튜토리얼에선 다이얼로그가 열릴 때 아이콘을 추가 한다.

Preview

Coding

Walkthrough - Step 18.

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>

다이얼로그를 여는 버튼에 아이콘을 추가한다. sap-icon://icon-name 프로토콜로 아이콘을 로드한다.
식별자 world는 아이콘 글꼴에서 읽을 수 있는 아이콘 이름이다.

Tip: sap icon explorer 참고 url

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>

다이얼로그 fragment에서 Dialog Class의 Conetent aggregation을 사용하여 Icon 컨트롤을 추가한다.
아이콘의 크기를 정의하고 CSS class를 이용하여 중간 여백을 설정한다.

Conventions

• 가능하면 image Control보다는 icon 글꼴을 사용하면 Vector graphic이라 품질 저하없이 크기 확장 할 수 있고 별도로 로드할 필요가 없다.

Related Information

Icon Explorer

API Reference: sap.ui.core.Icon

Samples: sap.ui.core.Icon