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

एचएमबी क्या है? 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 ईसीसी, सीआरएम, और बीडब्ल्यू आदि जैसे कोर सिस्टम…व्यावसायिक तर्क को इसका उपयोग करके लागू किया जा सकता है SAP कार्यक्रम और फ़ंक्शन मॉड्यूल. SAP लेन-देन और मास्टर डेटा यहाँ रहते हैं SAP सिस्टम की इस परत को 'डेटाबेस परत' या 'स्थिरता परत' कहा जाता है।

SAPUI5 घटक

घटक कार्यशील कोड का एक टुकड़ा है जिसे जहाँ भी आवश्यकता हो, पुनः उपयोग किया जाता है। घटक 2 प्रकार के होते हैं SAPUI5

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

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

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

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

SAPUI5 सेटअप

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

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

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

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

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

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

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

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

फ़ाइल->नया->अन्य-> पर जाएँSAPUI5 अनुप्रयोग विकास->अनुप्रयोग परियोजना.

के लिए एक एप्लिकेशन प्रोजेक्ट बनाएं SAPUI5 पर जाने के लिए विज़ार्ड का अनुसरण करें। नीचे स्क्रीनशॉट देखें।

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

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

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

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

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

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

विज़ार्ड के अंत में, एक नया प्रोजेक्ट बनाया जाएगा और प्रोजेक्ट एक्सप्लोरर विंडो पर प्रदर्शित किया जाएगा 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 कोड

इसके बाद, हम Component.js को लोड करने के लिए index.html फ़ाइल बताते हैं SAPUI5 जब ब्राउज़र से एप्लीकेशन एक्सेस की जाती है। तो 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() कोड ही चिपकाया गया है। फ़ाइल का बाकी हिस्सा फ्रेमवर्क द्वारा जेनरेट किया गया है।

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 नेटवीवर गेटवे सर्वर

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

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

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

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

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

मूल घटक परियोजना का नाम है पासनंबर. और तैनाती के बाद उत्पन्न बीएसपी अनुप्रयोग का तकनीकी नाम SAPABAP फ्रंटएंड सर्वर के लिए UI5 घटक है zपासनम. परियोजना संरचना नीचे की तरह दिखाई देगी

आइए अब index.html, Component.js और PassNum.view.xml और PassNum.controller.js फ़ाइलों में कोड लिखें

चरण 2) पैरेंट घटक के 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 फ्रंटएंड सर्वर पर एप्लिकेशन को तैनात करें और इसे चलाएं। आपको प्रोजेक्ट पर राइट-क्लिक करके और 'ABAP सर्वर पर चलाएँ' विकल्प पर क्लिक करके इसे चलाने में सक्षम होना चाहिए।

नीचे दिया गया यूआरएल एक्लिप्स ब्राउज़र में खुल जाएगा।
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

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

उत्पादन

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

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

सारांश

इस में SAPUI5 ट्यूटोरियल से हमने सीखा:

SAPUI5 का अन्वेषण: SAPUI5 इस श्रृंखला में नवीनतम है SAP यूआई विकास प्रौद्योगिकियां.
एचएमबी क्या है? SAP यूआई5: SAPUI5 लाइब्रेरीज़ का एक सेट है जिसका उपयोग रिस्पॉन्सिव वेब एप्लिकेशन बनाने के लिए किया जाता है
के घटक SAPUI5 आर्किटेक्चर में डिवाइस, क्लाइंट, नेटवीवर गेटवे, पर्सिस्टेंस लेयर शामिल हैं
A SAPUI5 घटक कार्यशील कोड का एक टुकड़ा है जिसे आवश्यकतानुसार पुनः उपयोग किया जाता है
के प्रकार SAPUI5 घटक हैं 1) UI घटक, 2) फेसलेस घटक
हमने एक sapui5 घटक को दूसरे sapui5 घटक में उपयोग करने और दो घटकों के बीच डेटा पास करने के बारे में सीखा