sapui5 ट्यूटोरियल
Sapui5 के साथ शुरुआत करना
खोज…
टिप्पणियों
SAPUI5 क्या है?
ऊपर दिए गए सिद्धांत के आधार पर, SAP ने एक HTML5- आधारित विकास टूलकिट, SAPUI5 पेश किया, जो एक सुसंगत उपयोगकर्ता अनुभव को प्रोत्साहित करता है। ऊपर दिए गए सिद्धांत का उपयोग करके, SAPUI5 का उपयोग करके बनाए गए एप्लिकेशन ब्राउज़रों और उपकरणों में उत्तरदायी हैं - वे स्मार्टफोन, टैबलेट और डेस्कटॉप पर चलते हैं। यूआई नियंत्रण स्वचालित रूप से प्रत्येक डिवाइस की क्षमताओं के लिए खुद को अनुकूलित करता है। ऐसा करने के लिए, SAPUI5 उपभोक्ता-ग्रेड, ब्राउज़र-आधारित व्यावसायिक अनुप्रयोगों के साथ एप्लिकेशन बनाने के लिए मजबूत विकास अवधारणाएं प्रदान करता है। संक्षेप में, UI5 जावास्क्रिप्ट, सीएसएस और एचटीएमएल 5 पर आधारित एक ग्राहक यूआई तकनीक है। SAPUI5 पुस्तकालयों को संग्रहीत करने, और एक डेटाबेस से कनेक्ट करने के लिए, सर्वर आपके अनुप्रयोगों को तैनात करने के लिए खेलते हैं। उस वातावरण पर निर्भर करता है जिसमें आप SAPUI5 का उपयोग कर रहे हैं, लाइब्रेरी और आपके एप्लिकेशन SAP HANA क्लाउड प्लेटफ़ॉर्म या किसी अन्य एप्लिकेशन सर्वर पर संग्रहीत हैं। आपके एप्लिकेशन के लिए व्यावसायिक डेटा तक पहुंचने का पसंदीदा साधन ओडेटा मॉडल का उपयोग करना है।
एचटीएमएल 5 के लिए एसएपी यूआई विकास टूलकिट एक उपयोगकर्ता इंटरफ़ेस तकनीक है जिसका उपयोग क्लाइंट अनुप्रयोगों के निर्माण और अनुकूलन के लिए किया जाता है। रनटाइम मानक और विस्तार नियंत्रण और एक हल्के प्रोग्रामिंग मॉडल के समृद्ध सेट के साथ क्लाइंट-साइड एचटीएमएल 5 रेंडरिंग लाइब्रेरी है।
दो फ्लेवर हैं, ओपनयूआई 5 (ओपन सॉरेड वर्जन) और एसएपीयूआई 5 (मूल लाइसेंस प्राप्त संस्करण)। दोनों में एक ही तकनीकी कोर तंत्र है और सामूहिक रूप से UI5 के रूप में जाना जाता है।
UI5 आपको आसानी से अत्याधुनिक उपयोगकर्ता इंटरफ़ेस बनाने और विस्तारित करने में सक्षम बनाने के लिए कई सुविधाएँ प्रदान करता है:
- यह जावास्क्रिप्ट के आधार पर क्लाइंट-साइड सुविधाओं की तरह RIA का समर्थन करता है
- यह CSS3 का समर्थन करता है, जो आपको प्रभावी तरीके से अपनी कंपनी की ब्रांडिंग के लिए थीम को अनुकूलित करने की अनुमति देता है
- यह कोड और एप्लिकेशन स्तर पर अंतर्निहित अंतर्निहित अवधारणाएं हैं
- यह फाउंडेशन के रूप में ओपन सोर्स jQuery लाइब्रेरी का उपयोग करता है
- यह SAP उत्पाद मानकों का पूरी तरह से समर्थन करता है
- यह OpenAjax के साथ अनुपालन करता है और मानक जावास्क्रिप्ट पुस्तकालयों के साथ एक साथ इस्तेमाल किया जा सकता है
- यह कम प्रयास के साथ मंच स्वतंत्र उपयोगकर्ता इंटरफेस बनाने के लिए व्यापक उत्तरदायी नियंत्रण प्रदान करता है
- यह पूर्ण अनुवाद / i18n समर्थन प्रदान करता है
- इसमें फियोरी डिज़ाइन भाषा है जो व्यापक यूएक्स अनुसंधान पर आधारित है
आप अपना पहला UI5 पेज यहां शुरू कर सकते हैं । इसके अलावा अधिक जानकारी के लिए संबंधित एसडीके संदर्भ में उपलब्ध डेवलपर गाइड और एपीआई संदर्भ देखें: ओपनयूआई 5 एसडीके , एसएपीयूआई 5 एसडीके । डेमो एप्स यहां देखे जा सकते हैं
नमस्ते दुनिया!
हम ऐप के लिए एक 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 क्लाउड प्लेटफ़ॉर्म पर 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>
अटैचमेंट में बूटस्ट्रैपिंग कोड रखें क्योंकि यह कोर लाइब्रेरी लोड होने के बाद चालू हो जाएगा