How to render a view in OpenUI5 if I have a controller, view, a Js file and html?

Question

so in below link I have a walkthrough tutorial of OpenUi5 and I am trying to implement it as I am going through each chapter. The folder structure is Root folder --> WebContent --> webApp --> [all the files in the link]. AS I am trying to modularize code I have defined

1. Controller (with pre-defined functions)
2. A View: Where I will define components to display over webpage
3. JS file: Where I am initializing my app and placing it into.
4. Index.html.

As I am going through the tutorial I got confused as they are using an XML based views and I thought to try by JS views. How would I insert the components defined in my View.js file into the body part and later add the functionality in the controller. How to define the dependencies in this case?

sap.ui.controller('Demo.controller',{
 onInit : function(){},
 onBeforeRendering : function(){},
 onAfterrendering : function(){},
 onExit : function(){},
})

Is this my view ??? if I want to call any function from this view and define in my controller how would I do that? And In controller how should I declare the dependency and where should I write my function?

var oCore = sap.ui.getCore();
oCore.attachInit(function(){
    new sap.m.Text({
        text: "Hello and Welcome to SAP"
    }).placeAt("content1"),
    new sap.m.Button({
        text:"Press Me!!",
        press: function(){
            
            alert("Hello there");
            // I need to call a function onShowPress() over here 
        }
    }).placeAt("content2")
}); 

https://plnkr.co/edit/2n0BTOtjCXpssAXNAoY6 Any suggestions or tips will really helpful to put me on right track. Thanks in advance.

Answer 1

Update your Demo.view.js as follows:

createContent: function(oController){
        console.log("This is where UI VIEW goes");

        var oText = new sap.m.Text({
            text: "Hello and How are you doing today ??"
        });


        return new sap.m.Page({
            title: "Page Title",
            content: [
                oText
            ]
        });
    }

Here is your updated code.