Skip to Content

Component concept

Hi,

I have got a requirement of creating a component for my application but i could not able to find a neat example of creating the same.Instead i could only able to see the explanation of creating the component

can anyone help me in understanding the concept of component and share me an example code of component for a better understanding?

thanks in Advance!!!!

Regards

Raghu M

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • Best Answer
    author's profile photo Former Member
    Former Member
    Posted on May 18, 2015 at 01:49 PM
    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on May 18, 2015 at 03:03 PM

    Hello,

    components explaination is given in the below link,

    component.js File - UI Development Toolkit for HTML5 (SAPUI5) - SAP Library

    the component container present in the index.html file looks out for the component.js file in the root folder,

    Using UI Components in Applications - UI Development Toolkit for HTML5 (SAPUI5) - SAP Library

    the Component.js consists of the component class which provides specific metadata for components by extending the "ManagedObject" class "or" UIComponent class which provides additional metadata for configuration of user interfaces or the navigation between views.

    Below is the small example snippet on some applns,

    inside index.html

    new sap.ui.core.ComponentContainer({
    name:"sap.ui.demo"
    });
    

    inside the Component.js

    jQuery.sap.declare("sap.ui.demo.Component");  /* (sap.ui.demo) is the name given in the componentContainer present in the index.html*/
    sap.ui.core.UIComponent.extend("sap.ui.demo.Component",{  /* we are extending the controls of the UIComponent by definig the metadata and other controls*/
    metadata:{
    routing{
    config:{
    viewType:"JS",
    viewPath:"sap.ui.demo.view" /*specifies the views and controller present in the view folder*/
    targetControl:"id Present in the app.view.js file", /* its the id present while defining sap.m.App() or sap.m.SplitApp() controls*/
    clearTarget:false,
    targetAggregation:"pages", /*"pages" if its a full view, or else masterPages for splitView*/
    
    
    },
    routes:[
    {
    
    
    pattern:"",
    name:"page1",
    view:"Page1" , /*Page1.view.js and Page1.controller.js present in the view folder*/
    },
    
    
    {
    ........
    }
    ]
    }
    },
    
    init:function(){
      jQuery.sap.require("sap.ui.demo.MyRouter");
      jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
    
      sap.ui.core.UIComponent.prototype.init.apply(this,arguments);
    
    
      var router = this.getRouter();
      this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
      router.initialize();
    
    
    },
    
    createContent:function(){
      var oView = sap.ui.view({
      id:"app",
      viewName:"sap.ui.demo.view.App",
      type:"JS",
      viewData:{component:this},
      });
    },
    
    })
    
    

    below is the flow of the

    1. when it calls the Components init method,

    2. By calling sap.ui.core.UIComponent.prototype.init.apply(this,arguments);

    a new view specified in the rootView property in instantiated, and root control of the controller in initiated.

    3. in other words, "createContent" method is called, and calls the sap.ui.view (in the above example sap.ui.demo.view.App is the location of the view and controller in a folder called "view").

    4. at this stage App.controller.js is called and init method and onBeforeRendering is called,

    5. it further continues the execution, by coming back to the init method of the Component.js, it initialise the router by calling this.getRouter();

    6. when once it calls this, It calls the constructor of the router, and further router is injected into the sap.m.routing.RouteMatchedHandler(router);

    7. when the router is initialize by calling router.initialize(); it calls its "config" present in the metadata of the component.js file. Now the complete set of configuration of the routes present in the metadata is present in the router, We can access this router in all the controllers.,,

    8. It looks for the views with no pattern and that particular controller is called and respective view is rendered.

    below is the link, look into the skeleton or structure of the appln.

    Demonstration code for Navigation and Routing in SAPUI5

    Navigation between views using Routing and parameter passing between views

    Hope it helps,

    regards,

    Nagarjun

    Add a comment
    10|10000 characters needed characters exceeded

    • Hi,

      I went through the documents that you people have provided.But in my scenario i need to create a reusable component to which i just simply pass the data, the component gets created just like a custom control.

      i know with fragments we can do it...but is this can be done with component concept?

      If so can you please share me an example code for understanding it??

      Regards

      Raghu M

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.