SAP UI5 - प्रमुख घटक

SAP UI5 में कई घटक हैं जो UI5 अनुप्रयोग में स्वतंत्र और पुन: प्रयोज्य ऑब्जेक्ट हैं। इन घटकों को विभिन्न लोगों द्वारा विकसित किया जा सकता है और विभिन्न परियोजनाओं में उपयोग किया जा सकता है।

एक आवेदन विभिन्न स्थानों से घटकों का उपयोग कर सकता है और इसलिए आप आसानी से एक आवेदन की संरचना प्राप्त कर सकते हैं। आप SAP UI5 विकास के तहत विभिन्न प्रकार के घटक बना सकते हैं।

फेसलेस घटक

बैकएंड सिस्टम से डेटा प्राप्त करने के लिए फेसलेस घटकों का उपयोग किया जाता है और उनमें यूजर इंटरफेस नहीं होता है।

Example- वे वर्ग sap.ui.core.component का एक हिस्सा हैं

UI घटक

यूआई घटकों का उपयोग रेंडरिंग कार्यक्षमता को जोड़ने और उपयोगकर्ता इंटरफ़ेस पर एक स्क्रीन क्षेत्र या तत्व का प्रतिनिधित्व करने के लिए किया जाता है।

Example- यूआई घटक कुछ कार्य करने के लिए सेटिंग्स के साथ एक बटन हो सकता है। यह कक्षा का एक हिस्सा है: sap.ui.core.UIComponent

Note- sap.ui.core.component फेसलेस और यूआई घटकों के लिए बेस क्लास है। एक्स्टेंसिबिलिटी फ़ंक्शन को परिभाषित करने के लिए, घटक बेस क्लास से या यूआई विकास में अन्य घटकों से इनहेरिट कर सकते हैं।

किसी घटक का मॉड्यूल नाम पैकेज नाम के रूप में जाना जाता है, और .component जहां पैकेज नाम को घटक कंस्ट्रक्टर को दिए गए पैरामीटर के नाम के रूप में परिभाषित किया गया है।

SAP UI5 घटकों को सिस्टम परिदृश्य के अनुसार भी विभाजित किया जा सकता है -

  • ग्राहक पक्ष घटक: इसमें शामिल हैं,
    • नियंत्रण पुस्तकालयों sap.m, sap.ui.common, आदि।
    • कोर जावास्क्रिप्ट
    • परीक्षण में HTML और जावास्क्रिप्ट शामिल हैं
  • सर्वर साइड घटक
    • गामक जनक
    • ग्रहण में नियंत्रण और अनुप्रयोग विकास उपकरण
    • संसाधन हैंडलर

एक घटक की संरचना

प्रत्येक घटक को एक फ़ोल्डर के रूप में दर्शाया जाता है और इसमें घटक को प्रबंधित करने के लिए आवश्यक घटक और संसाधनों का नाम होता है।

प्रत्येक घटक में निम्न फाइलें होनी चाहिए -

  • Component.json फ़ाइल जिसमें डिज़ाइन समय के लिए मेटाडेटा है और इसका उपयोग केवल डिज़ाइन समय टूल के लिए किया जाता है।

  • Component.js गुण, घटनाओं और घटकों के तरीकों को परिभाषित करने के लिए उपयोग किया जाता है जो रनटाइम मेटाडेटा के लिए जिम्मेदार हैं।

नया SAP UI5 घटक कैसे बनाएँ?

एक नया घटक बनाने के लिए, आपको नया फ़ोल्डर बनाना होगा। इसको हम नाम देंbutton

अगला बनाने के लिए है component.js file

फिर, आपको यूआई घटक आधार वर्ग sap.ui.core.UIComponent.extend को विस्तारित करना होगा और घटक और पैकेज पथ का नाम दर्ज करना होगा।

बाद में, एक नए घटक को परिभाषित करने के लिए, आपको इसके साथ शुरू करना होगा require कथन इस प्रकार है -

// defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

अगला चरण आपके फ़ोल्डर में कंपोनेंट को परिभाषित करना है। इस प्रकार है -

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

एक घटक का उपयोग कैसे करें

एक घटक का उपयोग करने के लिए, आपको घटक को घटक कंटेनर में लपेटना होगा। आप सीधे किसी पृष्ठ में UI का उपयोग नहीं कर सकते हैं। एक अन्य तरीका है घटक को घटककंटेनर कंस्ट्रक्टर को पास करना।

PlaceAt विधि का उपयोग करना

इसमें घटक को कंटेनर में जोड़ना और उपयोग करना शामिल है placeAt घटक को पृष्ठ पर रखने की विधि।

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

कॉम्पोनेन्ट कंस्ट्रक्टर का उपयोग करना

एक घटक कंटेनर विशिष्ट सेटिंग्स को वहन करता है और इसमें नियमित नियंत्रण के जीवन चक्र के तरीके भी शामिल हैं। निम्न कोड खंड से पता चलता है कि घटक को घटककंटेनर निर्माणकर्ता को कैसे पास किया जाए।

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");