S4/HANA

SAP UI5 Step 1: Hello World!

유부사모 2017. 3. 23. 09:09

SAP UI5 Refrence Site

의 예제를 Google 번역기를 돌려서 옮겨 정리할려고 합니다.
번역은 전적으로 구글의 책임 입니다. ㅎㅎ

Step 1: Hello World!

여러분도 알다시피 SAPUI5는 HTML5에 관한 모든 것입니다. HTML만으로 첫 번째 "Hello World"를 만들어 봅니다.


Preview


Coding

아래의 site 데모 키트에서 여기서 작성하는 응용 프로그램의 모든 파일을보고 다운로드 할 수 있습니다. 

Walkthrough - Step 1.



webapp/index.html (New)

<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
   </head>
   <body>
      <p>Hello World</p>
   </body>
</html>


이 튜토리얼을 통해 만드는 모든 앱 소스를 포함하는 새 폴더 webapp를 만듭니다. 따라서이 폴더를 "App folder"라고합니다. => eclipse를 통해서 project를 만들게 되면 "WebContent" 라고 만들어진다.


이제 app 폴더에 index.html이라는 새로운 루트 HTML 파일을 만듭니다. HTML 문서는 기본적으로 Head와 Body의 두 섹션으로 구성됩니다. Head 부분은 브라우저에서 문서를 처리하는 데 사용됩니다. meta tag를 사용하여 브라우저의 동작에 영향을 미칠 수 있습니다.


이 경우 Microsoft Internet Explorer에 최신 rendering engine (edge)을 사용하고 document character set은 UTF-8이되도록 지시합니다. 우리는 또한 브라우저에 표시 될 Title을 앱에 제공 할 것입니다. Google의 하드 코딩 된 제목은 예를 들어 사용자의 언어로 제목을 표시하는 것과 같이 앱에 의해 무효화 될 수 있습니다.


body 부분은 페이지 레이아웃을 설명합니다. 여기서는 p 태그를 사용하여 "Hello World"를 표시합니다.



Tip

일반적으로 webapp 폴더의 내용은 응용 프로그램 패키지로 웹 서버에 배포됩니다. webapp 폴더 자체를 배포 할 때 index.html 파일을 액세스하기위한 URL path에 webapp가 포함되어 있습니다.

Conventions

index.html 응용 프로그램의 루트 HTML 파일 이름을 지정하고 webapp 폴더에서 찾으십시오.