Step 1: Set Up the Initial App

이 단계에서 작성된 구조 및 데이터 모델을 바탕으로 앞으로 탐색 및 라우팅 기능을 계속해서 확장할 것이다.

Preview

Code

Navigation and Routing - Step 1.

The Initial App

우리가 다운로드한 디렉토리에 관한 정보는 아래와 같다.

• Home Page

우리의 홈 페이지는 webapp > index.html에 정의되어 있다. 여기서 SAP UI5를 bootstrap하고 런타임에 사용자 정의 자원을 찾을 위치를 알려준다.
src에 설정한 경로로 sap-ui-core.js의 파일을 로드하여 원하는 모듈들을 쓸 수 있다.
우리의 경우 실제 백엔드 서비스가 없으므로 시뮬레이션으로 MockServer를 사용할 것이다. 따라서 oninit에서 목업서버를 초기화한다.

• Data

  webapp>localService>mockServer.js 파일에서 mock 서버를 구성한다. mock 서버를 사용하면 네트워크 연결없이 데이터를 json 파일로 주고 받을 수 있다.

  1)Employee
  webapp > localService > mockdata > Employees.json에 있는 직원 데이터
  
  2)Resume
  webapp > localService > mockdata > Employees.json에 있는 직원 이력서 데이터

• Configuration of the App

  webapp/manifest.json은 descriptor(설명자) 파일에서 모든 앱 구성을 설정한다. 이전 walkthroug에 설명했지만 간단하게 살펴본다

  1) sap.app
  해당 섹션은 i18n.properties 파일을 참조하고 title 및 description 정보를 설정한다.
  dataSources 부분은 우리가 사용할 OData(프로토콜) 서비스인 employeeRemote의 위치를 설정한다 자세한 셋팅은 이후에 다룬다.
  
  2) sap.ui5
  해당 섹션은 sap.ui5에서 rootView 매개 변수로 sap.ui.demo.nav.view.App View가 로드되어 App의 rootView를 선언한다.
  또란 i18n properties와 기본 모델 ""을 인스턴스호하여 바인딩을 정의한다.