Togglई मेनू बंद करें

⚡ स्मार्ट सारांश

SAPUI5 है SAPयह फ्रेमवर्क डेस्कटॉप, मोबाइल और टैबलेट डिवाइसों पर चलने वाले एंटरप्राइज वेब एप्लिकेशन को संचालित करने वाला रिस्पॉन्सिव HTML5 फ्रेमवर्क है। यह विस्तृत गाइड MVC आर्किटेक्चर, कंपोनेंट मॉडल, लाइब्रेरी और इसके अंदर पैरेंट और चाइल्ड कंपोनेंट बनाने का तरीका समझाता है। Eclipse.

???? उत्तरदायी यूआई: SAPUI5 sap.m लाइब्रेरी का उपयोग करता है, इसलिए एक ही कोडबेस डेस्कटॉप, टैबलेट और मोबाइल स्क्रीन के लिए स्वचालित रूप से अनुकूलित हो जाता है।
🧩 घटक मॉडल: पुन: प्रयोज्य, मॉड्यूलर कोड के लिए UI कंपोनेंट्स sap.ui.core.UIComponent को विस्तारित करते हैं जबकि फेसलेस कंपोनेंट्स sap.ui.core.Component को विस्तारित करते हैं।
⚙️ एमवीसी पैटर्न: मॉडल डेटा रखते हैं, व्यू XML या JSON में मार्कअप प्रस्तुत करते हैं, और कंट्रोलर स्वतंत्र रूप से इवेंट लॉजिक को संभालते हैं।
️ नेटवीवर परिनियोजन: Eclipse साथ में SAP विकास उपकरण पैकेज SAPUI5 ऐप्स को ABAP फ्रंटएंड सर्वर पर होस्ट किए गए BSP एप्लिकेशन के रूप में उपयोग किया जाता है।
✅ इवेंट बस संदेश: पैरेंट और चाइल्ड कंपोनेंट sap.ui.getCore().getEventBus() पब्लिश और सब्सक्राइब चैनलों के माध्यम से डेटा का आदान-प्रदान करते हैं।

विस्तार में पढ़ें

एचएमबी क्या है? SAPयूआई5?

SAPUI5 डेस्कटॉप, मोबाइल और टैबलेट जैसे कई उपकरणों पर चलने वाले उत्तरदायी वेब अनुप्रयोगों को बनाने के लिए पुस्तकालयों का एक सेट है। SAPUI5 पर काम करता है एमवीसी अवधारणा डेटा, व्यावसायिक तर्क और डेटा का प्रतिनिधित्व अलग-अलग दृश्य पर बनाकर विकास चक्र को गति प्रदान करना। इसलिए मॉडल (डेटा कंटेनर) बनाने के लिए दृश्य और नियंत्रक का विकास स्वतंत्र रूप से हो सकता है।

SAPUI5 इस श्रृंखला में नवीनतम है SAP यूआई विकास प्रौद्योगिकियां। अंतर्निहित के लिए वेब एकीकरण प्रदान करने के लिए SAP ईआरपी प्रणाली, SAP BSP (बिजनेस सर्वर पेज), PDK (पोर्टल डेवलपमेंट किट), वेब डायनप्रो जैसी कई UI विकास तकनीकें लेकर आए Java, वेब डायनप्रो ABAP. और वेब डायनप्रो ABAP का उत्तराधिकारी है SAPयूआई5।

SAPUI5 Archiटेक्चर

SAPUI Archiटेक्चर आरेख

ऊपरोक्त में Archiसंरचना में, प��ला बॉक्स 'डिवाइस' उन डिवाइसों को दर्शाता है जिन पर UI5 एप्लिकेशन चलते हैं। UI5 एप्लिकेशन को मोबाइल ऐप या किसी भी ब्राउज़र के माध्यम से एक्सेस किया जा सकता है। इस लेयर को 'प्रेजेंटेशन लेयर' कहा जाता है।

SAPUI5 एप्लिकेशन और oData सेवाएं इस पर स्थित हैं SAP नेटवीवर गेटवे सर्वर। आर्किटेक्चर की इस परत को 'एप्लिकेशन लेयर' कहा जाता है।

वास्तविक व्यावसायिक तर्क का क्रियान्वयन किया जाता है SAP ECC, CRM और BW जैसे कोर सिस्टम। व्यावसायिक तर्क को लागू किया जा सकता है। SAP कार्यक्रम और फ़ंक्शन मॉड्यूल. SAP लेन-देन और मास्टर डेटा यहाँ रहते हैं SAP सिस्टम। इस परत को 'डेटाबेस परत' या 'परसिस्टेंस परत' कहा जाता है।

SAPUI5 घटक

कंपोनेंट पुन: उपयोग योग्य कोड का एक भाग है। कंपोनेंट दो प्रकार के होते हैं। SAPयूआई5:

यूआई घटक – ये यूआई तत्वों से युक्त उपयोगकर्ता इंटरफ़ेस का प्रतिनिधित्व करते हैं। ये निम्न पर आधारित होते हैं: SAPsap.ui.core.UIComponent नामक UI5 क्लास
फेसलेस कंपोनेंट्स – इनमें यूजर इंटरफेस नहीं होता है। ये इस पर आधारित होते हैं। SAPUI5 वर्ग जिसे sap.ui.core.Component कहा जाता है

मूलतः, एक घटक एक फ़ोल्डर है। जब आप एक नया घटक बनाते हैं SAPUI5 अनुप्रयोग में, आप अपने प्रोजेक्ट एक्सप्लोरर में नीचे दी गई तरह बनाई गई फ़ोल्डर संरचना देख पाएंगे।

इस UI5 एप्लिकेशन में, PassNum एक कंपोनेंट है। UI5 एप्लिकेशन के कंपोनेंट की तरह व्यवहार करने के लिए Component.js फ़ाइल अनिवार्य है।

इसमें आगे SAPUI5 Eclipse ट्यूटोरियल, हम सीखेंगे कि कैसे सेटअप करें SAPयूआई5।

SAPUI5 सेटअप

शुरू करने से पहले, आपको यह सुनिश्चित करना होगा कि:

Eclipse (लूना संस्करण) आपके लैपटॉप पर स्थापित है
SAP विकास उपकरण Eclipse लूना आपके सिस्टम पर स्थापित हैं Eclipse (SAP विकास उपकरण Eclipse लूना - https://tools.hana.ondemand.com/luna/)
SAP लॉगऑन पैड इंस्टॉल हो चुका है, और अब आपके पास इसका एक्सेस है। SAP इस ब्लॉग में हम जिस एप्लिकेशन को बनाने जा रहे हैं, उसके परिनियोजन और परीक्षण के लिए नेटवीवर गेटवे सिस्टम का उपयोग किया जाएगा।

एप्लिकेशन पूरी तरह से बन जाने के बाद, यह नीचे दिए गए अनुसार दिखाई देना चाहिए:

इस में SAPUI5 ट्यूटोरियल गाइड में, हम पैरेंट कंपोनेंट और चाइल्ड कंपोनेंट नामक दो कंपोनेंट बनाएंगे। सबसे पहले, ��म चाइल्ड कंपोनेंट बनाएंगे और फिर उसे पैरेंट कंपोनेंट में उपयोग करेंगे।

आइये, हम अपने हाथों को गंदा करना शुरू करें।

भाग 1) चाइल्ड एप्लीकेशन बनाएं

हमारा लक्ष्य एक चाइल्ड कंपोनेंट बनाना है जो 1 से 12 तक की संख्या स्वीकार करे और महीने का नाम प्रदर्शित करे। उदाहरण के लिए, जब इसे 3 प्राप्त हो, तो इसे 'मार्च' प्रदर्शित करना चाहिए।

चरण 1) UI प्रोजेक्ट बनाएं

फ़ाइल->नया->अन्य-> पर जाएँSAPUI5 एप्लिकेशन डेवलपमेंट -> एप्लिकेशन प्रोजेक्ट।

के लिए एक एप्लिकेशन प्रोजेक्ट बनाएं SAPनीचे दिए गए स्क्रीनशॉट को देखें। आप विजार्ड का अनुसरण करके UI5 में बदलाव कर सकते हैं।

प्रोजेक्ट का नाम दर्ज करें, और अन्य विकल्पों को विजार्ड द्वारा सुझाए गए अनुसार ही रहने दें।

ऊपर दिए गए स्क्रीनशॉट में, रेडियो बटन के रूप में 2 प्रकार की लाइब्रेरी प्रदर्शित की गई हैं:

sap.m
sap.ui.कॉमन्स

जब आप sap.m का चयन करते हैं, तो आप विजार्ड को एक UI5 एप्लिकेशन प्रोजेक्ट बनाने के लिए कह रहे होते हैं, जिसके बूटस्ट्रैप सेक्शन में स्वचालित रूप से sap.m लाइब्रेरी शामिल हो जाएगी, जो रिस्पॉन्सिव वेब एप्लिकेशन बनाने के लिए होती है।

इसमें आगे SAP FIORI ट्यूटोरियल में, आपको नीचे दिए गए विज़ार्ड का वह भाग दिखाई देगा जहाँ आपको प्रारंभिक व्यू बनाना होगा। प्रारंभिक व्यू वह व्यू होता है जो एप्लिकेशन एक्सेस होने पर सबसे पहले प्रदर्शित होता है।

यहां आपको व्यू का नाम देना होगा और व्यू का प्रकार चुनना होगा। SAPUI5 4 प्रकार के व्यू को सपोर्ट करता है जैसा कि ऊपर दी गई स्क्रीन पर स्पष्ट है। तो किसी भी स्क्रीन का UI SAPUI5 एप्लिकेशन का निर्माण निम्न का उपयोग करके किया जा सकता है Javaस्क्रिप्ट या XML या JSON या फिर एचटीएमएल, जिस भी भाषा में आप सहज महसूस करते हों।

विज़ार्ड के अंत में, एक नया प्रोजेक्ट बनाया जाएगा और प्रोजेक्ट एक्सप्लोरर विंडो में प्रदर्शित किया जाएगा। Eclipse नीचे की तरह.

चरण 2) Component.js कोड

अब, आइए एक Component.js फ़ाइल बनाएं और उसमें नीचे दिया गया कोड लिखें।

sap.ui.core.UIComponent.extend("DisplayMonth.Component", {

	metadata: {
	    "name": "DisplayMonth",
	    "dependencies": {
	      "components": []}
	    },

createContent: function() {
    var oViewData = {
      component: this
    };
    var oView = sap.ui.view({
      viewName: "DisplayMonth.displaymonth.DisplayMonthView",
      type: sap.ui.core.mvc.ViewType.XML,
      viewData: oViewData
    });

     return(oView);
  },

  init: function() {
    // call super init (will call function "create content")
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

    // always use absolute paths relative to our own component
    // (relative paths will fail if running in the Fiori Launchpad)
    var sRootPath = jQuery.sap.getModulePath("DisplayMonth");


  },
});

चरण 3) Index.html कोड

अब, आइए index.html फ़ाइल को बताएं कि एप्लिकेशन एक्सेस होने पर Component.js लोड हो। index.html फ़ाइल में नीचे दिया गया कोड लिखें।

<!DOCTYPE HTML>
<html>
	<head>
	// adding meta tags to tell IE browser to render the page in IE-edge mode.
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	// adding meta tag to tell eclipse to use UTF 8 as character encoding
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
	// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
		<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-resourceroots='{"DisplayMonth": "./"}'>
		</script>

		<script>

				sap.ui.getCore().attachInit(function() {
				    new sap.m.Shell({
				      app: new sap.ui.core.ComponentContainer({
				        height : "100%",
				        name : "DisplayMonth"
				      })
				    }).placeAt("content");
				  });
		</script>

	</head>
// start of body of SAPUI5 application. It contains a div element.
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

चरण 4) DisplayMonthView.view.xml कोड

अब, आइए अपने डिस्प्लेमंथ व्यू में कोड लिखें ताकि पैरेंट कंपोनेंट से प्राप्त महीने की संख्या को प्रदर्शित किया जा सके।

<html:style>
	#__xmlview1--id{
	margin-left: 30rem;
    margin-top: 9rem;
    font-size: 6rem;
    font-style: italic;
    background-color: burlywood;
	}
</html:style>
	<App id="fioricontent">
		<Page title="Child Component">
			<content>
				<Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text>
			</content>
		</Page>
	</App>

उपरोक्त कोड पेस्ट करने के बाद, आपका व्यू नीचे दिए गए उदाहरण की तरह दिखना चाहिए।

चरण 5) DisplayMonthView.controller.js कोड

और अंत में, आइए DisplayMonthView की कंट्रोलर फ़ाइल का कोड लिखें।

कोड केवल onInit() हुक मेथड में लिखा गया है, इसलिए केवल वही यहां पेस्ट क��या गया है। फ़ाइल का शेष भाग फ्रेमवर्क द्वारा जनरेट किया गया है।

onInit : function() {
		sap.ui.getCore().getEventBus().subscribe("exchange", "data",
				function(channel, event, oEventData) {
					jsonModel = new sap.ui.model.json.JSONModel({
						monthumber : oEventData,
						monthname : ''

					});

					// derive month name from month number
					switch (jsonModel.oData.monthumber) {
					case "1":
						jsonModel.oData.monthname = 'January';
						break;
					case "2":
						jsonModel.oData.monthname = 'February';
						break;
					case "3":
						jsonModel.oData.monthname = 'March';
						break;
					case "4":
						jsonModel.oData.monthname = 'April';
						break;
					case "5":
						jsonModel.oData.monthname = 'May';
						break;
					case "6":
						jsonModel.oData.monthname = 'June';
						break;
					case "7":
						jsonModel.oData.monthname = 'July';
						break;
					case "8":
						jsonModel.oData.monthname = 'August';
						break;
					case "9":
						jsonModel.oData.monthname = 'September';
						break;
					case "10":
						jsonModel.oData.monthname = 'October';
						break;
					case "11":
						jsonModel.oData.monthname = 'November';
						break;
					case "12":
						jsonModel.oData.monthname = 'December';
						break;

					}
					this.getView().setModel(jsonModel, "myModel");

				}, this);
	},

चरण 6) एप्लिकेशन का परिनियोजन SAP नेटवीवर गेटवे सर्वर

प्रोजेक्ट को डिप्लॉय करें और ABAP फ्रंटएंड सर्वर पर जनरेट किए गए BSP एप्लिकेशन का तकनीकी नाम दें। नाम यह हो सकता है: zडिस्प्लेमंथआपका प्रोजेक्ट नीचे दिए गए चित्र जैसा दिखना चाहिए।

भाग 2) पैरेंट घटक बनाना

अब समय आ गया है एक नया कंपोनेंट (पैरेंट कंपोनेंट) बनाने का जो इस ट्यूटोरियल में अब तक बनाए गए कंपोनेंट का उपयोग करेगा।

चरण १) एक नया बनाएँ SAPUI5 अनुप्रयोग

फ़ाइल->नया->अन्य-> पर जाएँSAPUI5 एप्लीकेशन डेवलपमेंट -> एप्लीकेशन प्रोजेक्ट। फिर एक नया प्रोजेक्ट बनाने के लिए विजार्ड के निर्देशों का पालन करें। SAPUI5 एप्लीकेशन प्रोजेक्ट। इसे ऊपर दिए गए ट्यूटोरियल में भाग 1 के चरण 1 में विस्तार से वर्णित किया गया है।

पैरेंट कंपोनेंट प्रोजेक्ट का नाम है पासनमतैनाती के बाद उत्पन्न होने वाले बीएसपी एप्लिकेशन का तकनीकी नाम यह है: zpassnumपरियोजना की संरचना नीचे दी गई है।

अब हम index.html, Component.js, PassNum.view.xml और PassNum.controller.js फाइलों में कोड लिखते हैं।

चरण 2) स्रोत Code पैरेंट कंपोनेंट के Index.html का

<!DOCTYPE HTML>
<html>
	<head>
// adding meta tags to tell IE browser to render the page in IE-edge mode.
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
// adding meta tag to tell eclipse to use UTF 8 as character encoding
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
		<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-resourceroots='{"PassNum": "./"}'>
		</script>
		<script>
				  sap.ui.getCore().attachInit(function() {
				    new sap.m.Shell({
				      app: new sap.ui.core.ComponentContainer({
				        height : "100%",
				        name : "PassNum"
				      })
				    }).placeAt("content");
				  });

		</script>

	</head>
// start of Body of SAPUI5 application, Contains a div tag,
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

चरण 3) पैरेंट घटक की Component.js फ़ाइल का स्रोत कोड

sap.ui.core.UIComponent.extend("PassNum.Component", {

	metadata: {
	    "name": "PassNum",
	    "dependencies": {
	      "components": []}
	    },

createContent: function() {
    var oViewData = {
      component: this
    };

// Creating Reference of a PassNum XML view
    var  myView = sap.ui.view({
      viewName: "PassNum.passnum.PassNum",
      type: sap.ui.core.mvc.ViewType.XML,
      viewData: oViewData
    });

     return(myView);
  },

  init: function() {
    // call super init (this will call function "create content")
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
    // ensure to use absolute paths relative to own component
    // (running in the Fiori Launchpad, relative paths will fail)
    var sRootPath = jQuery.sap.getModulePath("PassNum");

  },
});

चरण 4) PassNum.view.xml फ़ाइल का स्रोत कोड

<Page title="Parent Component">
		<content>

			<VBox xmlns="sap.m" id="vboxid">

			<items>
				<Button xmlns="sap.m" id="1" text="First" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="2" text="Second" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="3" text="Third" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>

				<core:ComponentContainer id="conpcontid"
					name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer>

				</items>
			</VBox>

		</content>
	</Page>

उपरोक्त कोड को अपने व्यू में उपयोग करने के बाद, आपका व्यू नीचे दि��ाए गए अनुसार दिखना चाहिए।

चरण 5) PassNum.controller.js का स्रोत कोड

इस फ़ाइल में केवल onInit() विधि में बदलाव किया गया है। बाकी सब कुछ पहले जैसा ही है।

onInit: function() {

	jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth");
	},

	clickbutton:function(oEvent)
	{
		sap.ui.getCore().getEventBus().publish("exchange",
				"data", oEvent.oSource.sId.split("--")[1]);


	}

चरण 6) पैरेंट घटक की तैनाती SAP नेटवीवर गेटवे सर्वर

एप्लिकेशन को ABAP फ्रंटएंड सर्वर पर डिप्लॉय करें और उसे चलाएं। आप प्रोजेक्ट पर राइट-क्लिक करके और 'Run on ABAP server' विकल्प पर क्लिक करके इसे चला सकते हैं।

नीचे URL इसमें खुलेगा Eclipse ब्राउज़र.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

कॉपी करें URL और इसे सीधे ब्राउज़र में चलाएँ। ऊपर दिए गए होस्टनाम (पीले रंग में चिह्नित) में आपके ABAP फ्रंटएंड सर्वर का होस्टनाम है।

उत्पादन

'फर्स्ट' बटन पर क्लिक करें, और चाइल्ड कंपोनेंट में जनवरी प्रदर्शित होना चाहिए।

का उपयोग करके सुंदर, उत्तरदायी वेब एप्लिकेशन बनाने का आनंद लें SAPयूआई5।

अक्सर पूछे जाने वाले प्रश्न

SAPUI5 एक मालिकाना व्यावसायिक संस्करण है जो इसके साथ आता है। SAP लाइसेंस। OpenUI5 ओपन-सोर्स अपाचे 2.0 का उपसमूह है, जिसमें sap.ui.comp स्मार्ट फॉर्म जैसे कुछ एंटरप्राइज कंट्रोल मौजूद नहीं हैं।

फियोरी है SAPइसका डिज़ाइन सिस्टम और ऐप कैटलॉग। SAPUI5 है Javaस्क्रिप्ट फ्रेमवर्क जो Fiori ऐप्स को रेंडर करता है, इसलिए प्रत्येक Fiori स्क्रीन इस पर आधारित है। SAPUI5 नियंत्रण।

रिस्पॉन्सिव कंट्रोल्स के लिए sap.m, ग्रिड-स्टाइल डेटा के लिए sap.ui.table और चार्ट्स के लिए sap.viz से शुरुआत करें। ये तीनों आपके द्वारा बनाए जाने वाले अधिकांश एंटरप्राइज स्क्रीन्स को कवर करते हैं।

हां. SAP बनाएँ Code और GitHub Copilot प्राकृतिक भाषा के संकेतों से XML व्यू, कंट्रोलर स्टब्स और JSONModel बाइंडिंग तैयार कर सकता है, हालांकि डेवलपर्स अभी भी जेनरेट किए गए कोड की समीक्षा करते हैं।

एआई सहायक OPA5 और QUnit टेस्ट केस तैयार करते हैं, एरिया-लेबल मान सुझाते हैं, और अनुपलब्ध कीबोर्ड हैंडलर को चिह्नित करते हैं।ping टीमें मिलती हैं SAP अभिगम्यता मानकों को तेजी से लागू करना।

SAPशुरुआती लोगों के लिए UI5 ट्यूटोरियल