Applying MVC to SAPUI5 application

Question

So basically I have a Split page in SAPUI5 and have few master pages and detail pages attach to it. I have no problem to do the whole thing in one javascript file, but since the file is getting too big and too hard to read I want to apply MVC design to this application and separate every page into one view and control file. Here is my example:

var oSplitApp = new sap.m.SplitApp({

    masterPages : [ page1, page4, page5],
    detailPages : [ page0, page2, page3 ],
    initialMaster : "page1",
    initialDetail : "page0"
});

and pages are like:

var page0 = new sap.m.Page("initialPage", {});
var page1 = new sap.m.Page({
    enableScrolling : true,
    footer : new sap.m.Bar({
        id : 'page1_footer',
        contentMiddle : [ new sap.m.Button({
            text: "Add"
        })]
    }),
    content : [ oTable = new sap.m.Table("items", {
        inset : true,
        visible : true,
        getIncludeItemInSelection : true,
        showNoData : false,
        columns : [ new sap.m.Column({
            styleClass : "name",
            hAlign : "Left",
            header : new sap.m.Label({
                text : "something"
            })
        }) ]
    }) ]
});
var template = new sap.m.ColumnListItem({
    type : "Navigation",
    visible : true,
    selected : true,
    cells : [ new sap.m.Label({
        text : "{name}"
    }) ]
});

and so on ... and also each page has its on attachPress function so when you click on the buttons or links something happen and some other pages fire up. please show me in details how to do so?

thank you for your help in advance.

Tim Gerlach Tim Gerlach · Accepted Answer · 2014-03-31T07:35:15

You can do this by creating own View/Controller for every Master/Detail. In your View, where your oSplitApp is built you can then instantiate your Master/Details Views like this:

// load your external view/controller:
var page1 = sap.ui.jsview("path-to.DetailView1");

var oSplitApp = new sap.m.SplitApp({
    masterPages : [ page1, page4, page5],
    detailPages : [ page1, page2, page3 ],
    initialMaster : "page1",
    initialDetail : "page0"
});

Your external View file for example could return the sap.m.Page object in createContent.

Hopefully this helps you. If you have more questions about this just let me know.

Applying MVC to SAPUI5 application

1 Answers