How to integrate XML fragments in SAP UI5?

I've tried to implement one example of the UI5 SDK in my App but it doesn't work. Does anybody have experience with UI5 fragments?

Thanks in advance. Matt

Here is the code of the SDK: http://ift.tt/1vViGhF

Here is my structure:


WebContent
-model
-view
--Display.fragment.xml
--App.controller.js
--App.view.js
--Master.controller.js
--Master.view.xml
Component.js
index.html

Here is my code:

Index.html


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <script
            id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-resourceroots='{
                "matt.ui": "./"
            }' >
        </script>
        <script>
            new sap.ui.core.ComponentContainer({
                name : "matt.ui"
            }).placeAt("content");
        </script>
    </head>
    <body class="sapUiBody" id="content">
    </body>
</html>

Component.js


jQuery.sap.declare("matt.ui.Component");
sap.ui.core.UIComponent.extend("matt.ui.Component", {
    createContent : function() {
        var oView = sap.ui.view({
            id : "app",
            viewName : "matt.ui.view.App",
            type : "JS",
            viewData : { component : this }
        });
        var oModel = new sap.ui.model.json.JSONModel("model/mock.json");
        oView.setModel(oModel);
        return oView;
    }
});

App.js


sap.ui.jsview("matt.ui.view.App", {
    getControllerName: function () {
        return "matt.ui.view.App";
    },
    createContent: function (oController) {
        // to avoid scroll bars on desktop the root view must be set to block display
        this.setDisplayBlock(true);
        // create app
        this.app = new sap.m.App();
        // load the master page
        var master = sap.ui.xmlview("Master", "matt.ui.view.Master");
        master.getController().nav = this.getController();
        this.app.addPage(master, true);
        // done
        return this.app;
    }
});

Master.view.xml


<core:View
    controllerName="matt.ui.view.Master"
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core" >
    <Page
        id="idFormContainer"
        showHeader="false" >
        <ObjectHeader
            title="Test">
        </ObjectHeader>
        <footer>
            <Bar>
                <contentRight>
                    <Button id="idButtonEdit" text="Edit" press="handleFooterBarButtonPress" />
                    <Button id="idButtonSave" text="Save" type="Emphasized" visible="false" press="handleFooterBarButtonPress" />
                    <Button id="idButtonCancel" text="Cancel" visible="false" press="handleFooterBarButtonPress" />
                </contentRight>
            </Bar>
        </footer>
    </Page>
</core:View>

Master.controller.js


sap.ui.controller("matt.ui.view.Master", {
    _fragments: {},
    _getFormFragment: function (sName) {
        if (!this._fragments[sName]) {
            this._fragments[sName] = sap.ui.xmlfragment("matt.ui.view." + sName, this);
        }
        return this._fragments[sName];
    },

    onExit : function () {
        jQuery.each(this._fragments, function (i, oFrag) {
            oFrag.destroy();
        });
    },

    onInit: function (oEvent) {
        // Set the initial form to be the change one
        //var oForm = this._getFormFragment("Display.fragment");
        var oForm = "matt.ui.view.Display.fragment";
        this.getView().byId("idFormContainer").insertContent(oForm);
        //this.getView().bindElement("/SupplierCollection/0");
    }
});

Display.fragment.xml


<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core">
    <l:Grid
        defaultSpan="L12 M12 S12"
        width="auto">
        <l:content>
            <f:SimpleForm id="SimpleFormMatt"
                minWidth="1024"
                maxContainerCols="2"
                editable="false"
                layout="ResponsiveGridLayout"
                title="Address"
                labelSpanL="4"
                labelSpanM="4"
                emptySpanL="0"
                emptySpanM="0"
                columnsL="2"
                columnsM="2">
                <f:content>
                    <core:Title text="Office" />
                    <Label text="Name" />
                </f:content>
            </f:SimpleForm>
        </l:content>
    </l:Grid>
</core:FragmentDefinition>

How to integrate XML fragments in SAP UI5?

No comments:

Post a Comment