sapui5 튜토리얼
sapui5 시작하기
수색…
비고
SAPUI5 란 무엇입니까?
위의 이론에 기반하여 SAP는 HTML5 기반 개발 툴킷 인 SAPUI5를 도입하여 일관된 사용자 경험을 제공합니다. 위의 이론을 활용하면 SAPUI5를 사용하여 구축 된 앱이 브라우저와 기기에서 응답 속도가 빨라집니다. 스마트 폰, 태블릿 및 데스크톱에서 실행됩니다. UI 컨트롤은 각 장치의 기능에 자동으로 적응합니다. 이렇게하기 위해 SAPUI5는 소비자 수준의 브라우저 기반 비즈니스 응용 프로그램으로 앱을 만드는 강력한 개발 개념을 제공합니다. 요컨대, UI5는 JavaScript, CSS 및 HTML5를 기반으로하는 클라이언트 UI 기술입니다. 서버는 응용 프로그램을 배포하고, SAPUI5 라이브러리를 저장하고 데이터베이스에 연결하는 데 효과적입니다. SAPUI5를 사용하는 환경에 따라 라이브러리 및 응용 프로그램은 예를 들어 SAP HANA Cloud Platform 또는 다른 응용 프로그램 서버에 저장됩니다. oData 모델을 사용하여 애플리케이션의 비즈니스 데이터에 액세스하는 것이 좋습니다.
HTML5 용 SAP UI 개발 툴킷은 클라이언트 응용 프로그램을 작성하고 적용하는 데 사용되는 사용자 인터페이스 기술입니다. 런타임은 다양한 표준 및 확장 컨트롤 세트와 간단한 프로그래밍 모델을 갖춘 클라이언트 측 HTML5 렌더링 라이브러리입니다.
OpenUI5 (Open Sourced 버전)와 SAPUI5 (Original licensed version)의 두 가지 맛이 있습니다. 두 가지 모두 기술적 핵심 메커니즘이 동일하며 집합 적으로 UI5라고합니다.
UI5는 최첨단 사용자 인터페이스를 쉽게 만들고 확장 할 수있는 많은 기능을 제공합니다.
- 자바 스크립트를 기반으로하는 클라이언트 측 기능과 같은 RIA를 지원합니다.
- CSS3를 사용하면 회사의 브랜드에 효과적으로 주제를 적용 할 수 있습니다.
- 코드 및 응용 프로그램 수준에서 기본 제공되는 확장 성 개념을 기반으로합니다.
- 오픈 소스 jQuery 라이브러리를 기초로 사용합니다.
- SAP 제품 표준을 완벽하게 지원합니다.
- OpenAjax를 준수하며 표준 JavaScript 라이브러리와 함께 사용할 수 있습니다.
- 적은 노력으로 플랫폼에 독립적 인 사용자 인터페이스를 생성 할 수 있도록 광범위한 대응 제어 기능을 제공합니다.
- 완전한 번역 / i18n 지원을 제공합니다.
- 광범위한 UX 연구를 기반으로하는 Fiori Design 언어를 특징으로합니다.
첫 번째 UI5 페이지를 여기에서 시작할 수 있습니다 . 자세한 내용은 해당 SDK 참조 ( OpenUI5 SDK , SAPUI5 SDK) 에서 사용할 수있는 개발자 가이드 및 API 참조를 참조하십시오. 데모 앱은 여기에 있습니다.
안녕하세요!
먼저 앱의 HTML 페이지를 만드는 것으로 시작합니다. 여기서 메타 태그, SAPUI5 라이브러리를로드하는 스크립트 태그 및 앱 내용에 대한 자리 표시자를 정의합니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Hello World App</title>
<script src="http://<<server>>:<<port>>/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m">
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
설치에 따라 리소스가있는 경로 (<> : <>)를 수정하십시오. OpenUI5의 경우 src = " https://openui5.hana.ondemand.com/resources/sap-ui-core.js "를 사용할 수 있습니다. 예를 들어, SAP HANA Cloud Platform에서 SAPUI5에 액세스하려면 src = " https://sapui5.hana.ondemand.com/resources/sap-ui-core.js "를 사용 하십시오 .
안녕하세요 세계
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>SAPUI5 Hello World</title>
<!-- Load SAPUI5 , theme and control library -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"></script>
<!-- Create a UI5 button and place it onto the page -->
<script>
new sap.m.Button({
text:"Hello world",
press: function(){
alert("hello SapUI5!");
}
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
안녕하세요 세계
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="1.24"
data-sap-ui-resourceroots='{"<projectname>": "./"}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.getCore().attachInit( function () {
new sap.ui.core.ComponentContainer ("<ComponentId(can be anyname you wish)>",{
height : "100%",
name : "<name of component>"
}).placeAt('content');
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
부트 스트래핑 코드를 코어 라이브러리가로드 된 후에 트리거되기 때문에 attachInit에 배치하십시오.