SAPUI5 개발자 가이드 문서 번역 - 제2편 Get Started - Introduce

Get Started - Introduction

HTML5를 지원하는 UI 개발 도구

HTML5기반의 SAPUI5는 자바스크립트 오픈에이젝스와 호환되는 RIA(Rich internet Application) 라이브러리이다. SAPUI5는 SAP 제품 표준을 완벽하게 지원하는 클라이언트 기반 RIA 요소를 포함하고 있다. 이것과 별개로, 확장성 있는 커스텀 컨트롤러와 어플리케이션 서비스, 기본 테마 또는 사용자가 개발한 테마도 지원한다. 해당 프레임워크는 경량 프레임웍이며 사용하기 쉽기 때문에 다양한 외부 어플리케이션 및 서버 플랫폼과 쉽게 연동할 수 있다.

프레임웍이 지원하는 아티팩트

최상위 레벨의 오브젝트 단위를 'UI 라이브러리'라고 부른다. 라이브러리는 확장성 개념의 오브젝트라고 할 수 있다. 라이브러리는 컨트롤러와 관계된 타입들을 카테고리로 묶어줌으로써 웹 어플리케이션에서 쉽게 사용할 수 있도록 해준다.

'sap.ui.commons'와 같이 많이 사용되는 컨트롤러들을 이미 개발해 놓은 표준 라이브러리가 있다. 동시에 SAPUI5는 커스텀 UI라이브러리들을 손쉽게 개발할 수 있도록 지원한다.

UI 엘리멘트는 SAPUI5의 기본 요소이다. UI엘리먼트는 재사용이 가능한 요소이며 등록정보, 이벤트, 메소드 등이 포함되어 있다. 대부분 중요한 요소들은 다른 요소들과 관계를 맺을 수 있으며 이러한 이유로 요소들을 트리 구조로 만들 수 있다.

개발자 관점에서, 버튼, 레이블, 텍스트 필드 등의 컨트롤러는 가장 중요한 요소이다. 해당 오브젝트들은 어플리케이션의 모양과 사용자의 입력과 관련된 요소들이다.

이것은 해당 트리 구조의 어플리케이션을 구성하는 특별한 종류의 유저인터페이스 요소이다.

이러한 이유로, 해당 컨트롤러들은 화면을 구성하는데 있어서 엔트리 포인트 역할을 한다.

컨트롤러의 종류 중 하나로 컨트롤러가 아닌 요소도 있다. 해당 요소는 트리 구조의 기본 요소로 사용될 수 없으며 보조 요소로만 사용된다(TableRow, TableCell).

프로펄티는 이름과 데이터타입이 정해져있다. 프로펄티는 상수로 정해진 디폴트 값을 가지고 있다. 프로퍼티는 게터 세터 API를 이용해 값을 가지고오고 설정할 수 있다. 또한 읽기 전용으로 사용할 수도 있다.

데이터 타입은 메타 데이터 모델에서 기본이 되는 클레스 요소이다. 데이터 타입을 라이브러리 전체의 재사용성이 가능하며 타입 시스템의 확장성도 가진다. 코어 라이브러리(기술적으로 이것은 sap.ui. core라이브러리다)는 다른 라이브러리에서 사용할 수 있는 기본 타입 셋을 포함하고 있다.

'집합'은 두개의 UI 요소 타입 간의 특별한 관계이다. 집합은 위에서 이야기한 트리 구조의 부모/자식 관계를 선언하는데 사용한다. 집합의 끝에 있는 부모는 자식이 0...1의 원소 또는 0...의 값을 갖는 동안 0...1의 원소를 갖는다.

SAPUI5로 만든 엘레멘트 API는 집합을 사용하기 위한(예를 들어 대상 오브젝트를 GET한다던지 SET한다던지 지운다던지 할 때) 메소드를 제공한다. 예를 들어 table row라던가 table cells 또는 table cell의 내용 같은것들이다.

'연계'는 위에서 이야기한 부모/자식간에 종속적인 두개의 UI 엘레멘트 타입과 관계를 맺어주는 또 다른 타입이다. 지원된 대상 요소 외부 연계를 가리킨다. 연계는 대상 엘리먼트의 인스턴스 아이디를 대상으로한 느슨한 연관성을 보여준다. 가장 중요한 예제는 레이블과 레이블의 필드의 관계다.

이벤트는 이름 뿐만 아니라 파라메터의 번호를 가지고 있다. 엘리먼트의 API는 이벤트예약어를 지원한다.

어플리케이션을 어떻게 만들 것인가?

어플리케이션 개발자로서, 당신은 프레임웍 초기화 스크립트를 포함한 UI라이브러리 리스트를 만들 필요가 있다. 이후에, 하나 또는 그 이상의 컨트롤러 트리를 만들고 HTML페이지에 해당 트리를 넣으면 된다. 또한 해당 라이브러리가 지원하는 모든 컨트롤러를 이용할 수 있다.

해당 프레임웍은 컨트롤러를 초기화하는데 또한 JSON을 지원함으로써 타이핑 하는 일을 줄였다. 물론, 이벤트 핸들러에서 컨트롤러의 상태를 수정하는 것도 가능하다.

렌터링은 프레임웍이 알아서 해준다.

다음 방법을 이용할 경우 간단 어플리케이션을 20초만에 만들 수 있다.

이클립스용 SAPUI5 도구는 SAPUI5어플리케이션을 쉽게 만들 수 있는 마법사를 제공한다, 해당 도구는 어플리케이션을 만들 수 있는 기본적인 틀을 만들어준다.

UI 컨트롤을 만드는 방법

컨트롤러 개발자로서, 당신은 UI라이브러리나 해당 라이브러리의 일부분을 추가하거나 수정할 수 있다. 당신은 프로퍼티, 컨트롤, 이벤트, 집합 등을 만들 수 있습니다. 가장 기본적인 작업은 특정 컨트롤러에 대한 구현체를 만들수 있다는 것입니다. 해당 기능은 주어진 컨트롤러 인스턴스를 만드는 기능입니다.

해당 구현체는 자바스크립트로 작성 되었으며 HTML로 구현됩니다. 이러한 이유로 해당 구현체는 CSS로 스타일을 적용할 수 있습니다. 해당 스타일 시트는 UI라이브러리의 중요한 부분입니다.