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（オリジナルのライセンスバージョン）の2つの味があります。両方とも同じ技術的なコアメカニズムを持ち、まとめてUI5と呼ばれます。
UI5には、最新のユーザーインターフェイスを簡単に作成して拡張するための多くの機能が用意されています。
- JavaScriptに基づくクライアントサイドのようなRIA機能をサポートしています
- それは効果的な方法であなたの会社のブランドにテーマを適応させるCSS3をサポートしています
- コードおよびアプリケーションレベルでの拡張性のコンセプトに基づいています
- オープンソースのjQueryライブラリを基盤としています
- SAP製品標準を完全にサポート
- OpenAjaxに準拠しており、標準のJavaScriptライブラリ
- それは、より少ない労力で、プラットフォームに依存しないユーザインタフェースを作成するための広範な対応制御を提供する
- 完全な翻訳/ i18nサポートを提供します
- 豊富なUXリサーチに基づいたFiori Designの言語が特徴です
最初のUI5ページはここから始めることができます。 ：また、詳細については、各SDKの参照で利用可能な、開発者ガイドおよびAPIリファレンスを参照してくださいOpenUI5 SDK 、 SAPUI5 SDK 。デモアプリはここにあります
"こんにちは世界"
まず、アプリケーション用の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に配置してください