Inline XMLViews into component-preload.js

[former_member316845]

Hi,

after reading some code & some posts on SCN I managed to write a simple grunt task that combines my components javascript code into a single component-preload. This works (or seem to work).

But I'd really like to include the views into this file, too.

I tried to inline them with sap.ui.xmlview(viewName, { viewContent: xmlSource }) but UI5 sends XHR requests anyways. Looking into the source for sap.ui.core.mvc.XMLView it seems to always send a request when a new view is instantiated. Is there a way to load/inline the view content once and use that for further instantiation?

[Former Member · Accepted solution]

Hi Mark,

          Can u explain your question. What you mean by Inline? can please post your code also.

Regards

Moulika

[former_member316845 · Accepted solution]

Well, I'd like to combine every possible resource for a Component into one component-preload.js file.

It works quite well with JavaScript files (concatinate them or use uglify-js) but there seems to be no way to include the source of XMLViews into these javascript files.

I worked around that using a tiny workaround (monkey-patching View.prototype_initCompositeSupport and set viewContent to a correct value, deleting viewName) but thats kind of ugly and by no way official.

I'd like to know if there will be a official way to do this because, looking at the code, currently this seems to be impossible.

[former_member182048 · Accepted solution]

Hi Mark

On twitter you said you used Grunt to build

a js uglifier will not parse XML but an HTML minifier will

here's the steps i would take to build your component-preload.js in Gulp, note had to build something sim for a client cannot share actually code, just logic of how it might be done.

component-preload.js looks like

jQuery.sap.registerPreloadedModules({

    "name": "<myApp>Component-preload",

    "version": "X.X",

    "modules": <minfied module content as kvp>

});

step 1. recursively minify all the apps modules you want to pre load, Instead of writing them to file write them into javascript object

in gulp would be something like this for your views

  var sMyAppName = "testapp";

  var sFilename = 'Component-preload'

  var oComp = {

   name: sMyAppName  + "/" + sFilename , //testapp.component-preload

   version: "X.X",

   modules:{}

};

  //minify the views and use tap to write to the javascript object

  gulp.src('./views/*.xml')

     .pipe(minifyHTML({comments:true}))

     .pipe(tap(function(file, t) {

            fPath =  sMyAppName + '/' + path.basename

            oComp.modules[fPath] = file._contents.toString();

  }))

result

oComp.modules["testapp/details.view.xml"] = "<?xml version="1.0" encoding="UTF-8" ?><mvc:view."

do the same for the js files

oComp.modules["testapp/details.controller.js"] = "sap.ui.controller("testapp.view.Detail",{ .."

2. now build the file

var sFileTmp = 'jQuery.sap.registerPreloadedModules(' + JSON.stringify(oComp) + ')';

then you can use fs to save to disc

     var sFileNameQ = sFilename + '.js';    //Component-preload.js

     fs.writeFile( sFileNameQ ', sFileTmp, function(err) {

                if (err) throw err;

                console.log('It\'s saved!');

            })

this should output Component-preload.js to the same folder as Component.js

when the app loads it will look for Component-preload.js before Component.js

jQuery.sap.registerPreloadModules will load all the components - you may need to play with the abs path.

hth

jsp

Message was edited by: John Patterson

[former_member316845 · Accepted solution]

Ohh, so a component-preload.js is just like a library-preload.json but with the registerPreloadedModules( )  around it? Thanks a LOT!

[former_member182048 · Accepted solution]

spot on exactly like library-preload.json only js

I cannot share code, but if you want to share a GIST i can help write in either Grunt or Gulp, just not Maven

jsp

[former_member316845 · Accepted solution]

I already implemented library- and component-preload in grunt (because of the great WebStorm Support for Grunt). Works great except that theres still one http request for a single view thats included in the preload file. Will have a look on that later.

I'll see if I'm allowed to release this code as an open source grunt plugin, that might help some ppl.

Thanks a lot for your explanation.