WebIDE生成的代码模板分析

前面介绍了如何把代码转移到Eclipse，本文将对WebIDE生成的master-detail模板进行代码的分析，让我们看看这些代码有什么作用。目前WebIDE版本为1.7，这个新版本生成的代码已经和1.4有了很大的不同，如果有朋友还工作在老版本的模板，最好升级一下自己的模板吧。

index.html

页面入口文件， 如果需要放到Fiori Launch Pad中，则此文件不会加载，即如果想使用一些第三方的JS代码，并且想运行在Fiori上，在此文件中加载的第三方JS将不会被加载。

主要代码：
* 页面的标题，会显示在浏览器的标签上

<title>template_md</title>

• 加载UI5组件，指定主题，加载sap.m，指定resource目录等。

<script id="sap-ui-bootstrap"    src="resources/sap-ui-core.js"    data-sap-ui-libs="sap.m"    data-sap-ui-theme="sap_bluecrystal"    data-sap-ui-xx-bindingSyntax="complex"    data-sap-ui-resourceroots='{"ZTMP_MD": "./"}'></script>

• 新建shell，放置在html content部位。

<script>    sap.ui.getCore().attachInit(function() {        new sap.m.Shell({            app: new sap.ui.core.ComponentContainer({                height : "100%",                name : "ZTMP_MD"            })        }).placeAt("content");    });</script>

2.Component.js

主要用于route定义，model绑定等等。

jQuery.sap.declare("ZTMP_MD.Component");jQuery.sap.require("ZTMP_MD.MyRouter");sap.ui.core.UIComponent.extend("ZTMP_MD.Component", {    metadata : {        name : "template_md",        version : "1.0",        includes : [],        dependencies : {            libs : ["sap.m", "sap.ui.layout"],            components : []        },        rootView : "ZTMP_MD.view.App",        config : {            resourceBundle : "i18n/messageBundle.properties",            serviceConfig : {                name: "ZCUSTOMER_SRV",                serviceUrl: "/sap/opu/odata/sap/ZCUSTOMER_SRV/"            }        },        routing : {            config : {                routerClass : ZTMP_MD.MyRouter,                viewType : "XML",                viewPath : "ZTMP_MD.view",                targetAggregation : "detailPages",                clearTarget : false            },            routes : [                {                    pattern : "",                    name : "main",                    view : "Master",                    targetAggregation : "masterPages",                    targetControl : "idAppControl",                    subroutes : [                        {                            pattern : "{entity}/:tab:",                            name : "detail",                            view : "Detail"                        }                    ]                },                {                    name : "catchallMaster",                    view : "Master",                    targetAggregation : "masterPages",                    targetControl : "idAppControl",                    subroutes : [                        {                            pattern : ":all*:",                            name : "catchallDetail",                            view : "NotFound",                            transition : "show"                        }                    ]                }            ]        }    },    init : function() {        sap.ui.core.UIComponent.prototype.init.apply(this, arguments);        var mConfig = this.getMetadata().getConfig();        // Always use absolute paths relative to our own component        // (relative paths will fail if running in the Fiori Launchpad)        var oRootPath = jQuery.sap.getModulePath("ZTMP_MD");        // Set i18n model        var i18nModel = new sap.ui.model.resource.ResourceModel({            bundleUrl : [oRootPath, mConfig.resourceBundle].join("/")        });        this.setModel(i18nModel, "i18n");        var sServiceUrl = mConfig.serviceConfig.serviceUrl;        //This code is only needed for testing the application when there is no local proxy available        var bIsMocked = jQuery.sap.getUriParameters().get("responderOn") === "true";        // Start the mock server for the domain model        if (bIsMocked) {            this._startMockServer(sServiceUrl);        }        // Create and set domain model to the component        var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, {json: true,loadMetadataAsync: true});        oModel.attachMetadataFailed(function(){            this.getEventBus().publish("Component", "MetadataFailed");        },this);        this.setModel(oModel);        // Set device model        var oDeviceModel = new sap.ui.model.json.JSONModel({            isTouch : sap.ui.Device.support.touch,            isNoTouch : !sap.ui.Device.support.touch,            isPhone : sap.ui.Device.system.phone,            isNoPhone : !sap.ui.Device.system.phone,            listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",            listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"        });        oDeviceModel.setDefaultBindingMode("OneWay");        this.setModel(oDeviceModel, "device");        this.getRouter().initialize();    },    _startMockServer : function (sServiceUrl) {        jQuery.sap.require("sap.ui.core.util.MockServer");        var oMockServer = new sap.ui.core.util.MockServer({            rootUri: sServiceUrl        });        var iDelay = +(jQuery.sap.getUriParameters().get("responderDelay") || 0);        sap.ui.core.util.MockServer.config({            autoRespondAfter : iDelay        });        oMockServer.simulate("model/metadata.xml", "model/");        oMockServer.start();        sap.m.MessageToast.show("Running in demo mode with mock data.", {            duration: 4000        });    },    getEventBus : function () {        return sap.ui.getCore().getEventBus();    }});

3.MyRouter.js

页面之间navigate调用。

jQuery.sap.require("sap.m.routing.RouteMatchedHandler");jQuery.sap.require("sap.ui.core.routing.Router");jQuery.sap.declare("ZTMP_MD.MyRouter");sap.ui.core.routing.Router.extend("ZTMP_MD.MyRouter", {    constructor : function() {        sap.ui.core.routing.Router.apply(this, arguments);        this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this);    },    myNavBack : function(sRoute, mData) {        var oHistory = sap.ui.core.routing.History.getInstance();        var sPreviousHash = oHistory.getPreviousHash();        //The history contains a previous entry        if (sPreviousHash !== undefined) {            window.history.go(-1);        } else {            var bReplace = true; // otherwise we go backwards with a forward history            this.navTo(sRoute, mData, bReplace);        }    },    /**     * Changes the view without changing the hash.     *      * @param {object} oOptions must have the following properties     * <ul>     *  <li> currentView : the view you start the navigation from.</li>     *  <li> targetViewName : the fully qualified name of the view you want to navigate to.</li>     *  <li> targetViewType : the viewtype eg: XML</li>     *  <li> isMaster : default is false, true if the view should be put in the master</li>     *  <li> transition : default is "show" the navigation transition</li>     *  <li> data : the data passed to the navContainers life cycle events</li>     * </ul>     * @public     */    myNavToWithoutHash : function (oOptions) {        var oSplitApp = this._findSplitApp(oOptions.currentView);        // Load view, add it to the page aggregation, and navigate to it        var oView = this.getView(oOptions.targetViewName, oOptions.targetViewType);        oSplitApp.addPage(oView, oOptions.isMaster);        oSplitApp.to(oView.getId(), oOptions.transition || "show", oOptions.data);    },    backWithoutHash : function (oCurrentView, bIsMaster) {        var sBackMethod = bIsMaster ? "backMaster" : "backDetail";        this._findSplitApp(oCurrentView)[sBackMethod]();    },    destroy : function() {        sap.ui.core.routing.Router.prototype.destroy.apply(this, arguments);        this._oRouteMatchedHandler.destroy();    },    _findSplitApp : function(oControl) {        var sAncestorControlName = "idAppControl";        if (oControl instanceof sap.ui.core.mvc.View && oControl.byId(sAncestorControlName)) {            return oControl.byId(sAncestorControlName);        }        return oControl.getParent() ? this._findSplitApp(oControl.getParent(), sAncestorControlName) : null;    }});

4. model

放置model的metadata信息。

5. view

主要工作区域，定义view以及controller，可以看到，在这个master detail模板中，App view用于定义split container，master view定义list显示的内容，detail用于显示master list中选中的记录的详细信息。NotFound view用于显示错误的链接信息。

6. i18n

用于globalization，翻译工作在此进行。

7. css

如果需要使用到自定义的css，则在此处定义，在index或者view中加载。

SAP一直在更新WebIDE的版本，所以，这些Template会随之更新。