티스토리 뷰

SAPUI5

Step 14: Custom CSS and Theme Colors

선즈반 2018. 12. 6. 10:26

Step 설명

때로는 좀 더 fine-granular(세분화된, 정교한) 레이아웃을 정의해야 필요가 있습니다. 컨트롤에 커스텀 스타일 클래스들을 추가하고 원하는대로 스타일을 지정함으로써 유연한 CSS를 사용할 수 있습니다.

webapp/css/style.css (New)
html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {
   margin-right: 0.125rem
}

html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {
   margin-left: 0.125rem
}

.myAppDemoWT .myCustomText {
   display: inline-block;
   font-weight: bold;
}

CSS 파일을 담기 위한 CSS 폴더를 생성합니다. CSS 폴더 내에 새로운 스타일을 정의한 파일에서 커스텀 네임스페이스 클래스와 묶어서 커스텀 클래스들을 생성합니다.스타일들이 app 내에서 사용된 컨트롤에만 적용됩니다.

버튼은 기본 margin '0'을 가집니다. 스타일 클래스 myCustomButton이 있는 버튼에 커스텀 margin 2px을 추가합니다.(또는 기본 폰트사이즈 16px에 상대적으로 계산된 0.125rem) 좀 더 구체적인 셀렉터를 만들기 위해  CSS 클래스 sapMBtn을 추가합니다. CSS에서 가장 구체적인 셀럭터 "wins"를 사용합니다.

아랍어 같이 오른쪽에서 왼쪽으로 진행되는(right-to-left: rtl) 언어의 경우 왼쪽 margin을 설정하고 app 화면이 거꾸로 표시될 때 오른쪽 margin을 재설정합니다. 이것에 대해서 신경쓸 필요가 없습니다. 커스텀 CSS 사용하는 경우에 이러한 정보를 추가해야 합니다.

추가 클래스 myCustomText에 bold 텍스트를 정의하고 display 'nline-block'을 설정합니다. 이 때 추가 셀렉터없이 커스텀 클래스를 정의합니다. 색상 정보를 아직 설정하지 않은 채로 view에서 이 작업을 실행합니다.

webapp/manifest.json

...
  "sap.ui5": {
	...	
	"models": {
	  ...
	},
	"resources": {
	  "css": [
		{
		  "uri": "css/style.css"
		}
	  ]
	}

  }

sap.ui5 네임스페이스의 resources 섹션에서 app의 추가 resources를 로드할 수 있습니다. component와 상대경로로 URI를 정의하여 CSS 스타일을 로드합니다. 일반적인 웹 페이지에서처럼 SAPUI5는 HTML 페이지 header에 <link>태그로 이 파일을 추가합니다. 브라우저는 자동으로 이 파일을 로드합니다.

webapp/view/App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc"
   displayBlock="true">
   <App class="myAppDemoWT">
      <pages>
         <Page title="{i18n>homePageTitle}">
            <content>
               <Panel
                  headerText="{i18n>helloPanelTitle}"
                  class="sapUiResponsiveMargin"
                  width="auto">
                  <content>
                     <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>
            </content>
         </Page>
      </pages>
   </App>
</mvc:View>

app 컨트롤에 커스텀 네임스페이스 클래스 myAppDemoWT를 적어줍니다. 이 클래스는 스타일 규칙이 없고 CSS 규칙 정의에서 이 app에만 유효한 CSS 셀렉터를 정의에 의해 사용합니다.

버튼과 input 필드 사이에 공간을 정확하게 정의하기 위해 버튼에 커스텀 CSS 클래스를 추가합니다. panel 컨텐츠에 pixel-perfect 디자인을 가지게 되었습니다.

출력 텍스를 강조하기 위해 커스텀 CSS를 사용 또는 HTML 코드를 사용해서 개별적으로 스타일링 할 수 있는 FormattedText 컨트롤을 사용합니다. 커스텀 CSS 클래스 (myCustomText)을 추가하고 테마에 정의한 강조색을 설정하기 위해 theme-dependent CSS 클래스를 추가합니다.

실제 색상은 선택된 테마에 따라 달라지므로 색상이 테마에 항상 부합하고 의미상 명확하게 표시됩니다. 사용가능한 CSS 클래스 전체 리스트는 여기를 참조하십시오.  CSS Classes for Theme Parameters.


Conventions

- 커스텀 CSS에서 색상을 지정하지 말고 스탠다드 theme-dependent를 사용하십시오.


한국에서는 스탠다드를 사용하기 어려운게 현실입니다. 특히 CSS. 거의 99% 확률로 커스텀을 해야하는데 SAPUI5를 이해하는 디자이너나 퍼블리셔를 찾기가 쉽지 않을 듯 하네요.

'SAPUI5' 카테고리의 다른 글

Step 16: Dialogs and Fragments  (0) 2018.12.19
Step 15: Nested Views  (0) 2018.12.06
Step 13: Margins and Paddings  (0) 2018.12.06
Step 12: Shell Control as Container  (0) 2018.12.06
Step 11: Pages and Panels  (0) 2018.12.06
댓글