해당 기능은 2019년 5월 정기버전 ( 17. 0. 0. 2000) 이후 부터 사용하 실 수 있습니다.
참고화면
Project : EDU_nexacro17_Design > TEMP > functionRTL.xfdl
아랍권 같이 화면의 표시기준이 오른쪽인 환경을 지원하는 기능
RTL
속성
undefined, true, false 값 중 하나를 설정합니다.
분류 | 값 | 설명 |
|---|---|---|
Action | undefined | 사용자가 rtl 속성값을 설정하지 않거나 삭제했을 경우 설정 |
true | • 내부 컨텐츠 또는 컴포넌트 표시되는 기준을 오른쪽으로 설정 • 내부 좌표계의 기준을 오른쪽으로 설정 • 텍스트 표시기준을 오른쪽으로 설정 • 수직스크롤바가 있을 경우 왼쪽으로 표시 | |
false | • 내부 컨텐츠 또는 컴포넌트 표시되는 기준을 왼쪽으로 설정 • 내부 좌표계의 기준을 왼쪽으로 설정 • 텍스트 표시 기준을 왼쪽으로 설정 • 수직스크롤바가 있을 경우 오른쪽에 표시 |
undefined 설정 시 Environment 의 locale 속성에 설정된 국가 및 언어 설정값을 기준으로 rtl 속성이 적용됩니다.
Environment의 locale 속성값을 설정하지 않았을 경우 스시템의 국가 및 언어 설정값이 적용됩니다.
특징
프로젝트가 실행 중 일 때는 값을 변경 할 수 없습니다.
RTL 관련 속성은 미 설정시 부모 설정값을 상속받습니다.
RTL 적용 시 좌표기준이 오른쪽으로 변경되며 좌표값도 변경됩니다.
RTL 적용 시 좌우구분이 있는 Style 관련 속성도 오른쪽 기준으로 변경됩니다.
스타일속성
RTL 상태 일 때 적용할 이미지를 설정하는 속성들을 추가했습니다.
-nexa-rtl-background-image
rtl 속성이 true로 적용될 때 배경에 표시될 이미지를 설정하는 속성
-nexa-rtl-edge-image
rtl 속성이 true로 적용될 때 테두리 안쪽에 표시될 edge 이미지를 설정하는 속성
-nexa-rtl-icon
rtl 속성이 true로 적용될 때 표시될 아이콘 이미지를 설정하는 속성
• rtl 속성에 의해 표시기준이 변경되면 반전되 이미지를 적용하려 할 때 사용하는 속성입니다.
• XCSS에서만 설정할 수 있는 속성이며 스크립트로 값을 변경할 수 없습니다.
• 해당 속성값을 설정하지 않으면 원래 속성에 해당하는 이미지가 적용됩니다.
스타일적용
RTL 기능이 적용된 코드를 Generate를 하려면 Nexacro Studio 의 옵션값을 설정하여야 합니다.
Tool > Option > Generate
적용 예
텍스트는 아랍권 문자가 아닌 영어로 사용한 점 이해부탁드립니다.
방향성이 있는 이미지를 사용한 경우
- 변경한 화면 속성
Action > rtl - true
- 해당 버튼 소스
방향성이 있는 이미지가 필요하므로 추가된 속성에 방향에 맞는 이미지를 작업하여 적용한 경우의 소스
.Button.btn_RTL_logout
{
-nexa-icon : url('theme://images/btn_LTR_logout.png');
font : bold 28px "Malgun Gothic";
-nexa-text-padding : 0px 15px;
-nexa-rtl-icon : url('theme://images/btn_RTL_logout.png');
}방향성을 구분하지 않아 이미지를 따로 사용하지 않은 경우
동일한 이미지를 보여준다