cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

DesignStudio + UI5 --> linking Libraries

Go to solution
Former Member

on ‎11-06-2014 3:23 PM

0 Kudos

Dear all,

Im developing now an UI5 app for DesignStudio from scratch.

i have an example of the UI5 stand alone application (HTML Site) and want to use this axample for my new tool.

in this example i have following code :

jQuery.sap.require("sap.ui.ABC.DEF"); so it is a library in my eyes.

after the include is done, i would write this code to make an instance :

var oExample = new sap.ui.ABV.DEF.Object();

So far so good. 

BUT it is not possible for me to make a reference to the ressource "sap.ui.ABC.DEF".

I was trying to make something like

var dvlModulePath = "./res/sap/ABC/DEF";
jQuery.sap.registerModulePath("sap.ABC.DEF", dvlModulePath);

the path "./res/sap/ABC/DEF" point to the folder there Object.js file is placed

but it was not right.

I also tried to alter component.xml and added there the include line to Object.js

but got the error too.


Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

MustafaBensan
Active Contributor
‎11-06-2014 3:46 PM
0 Kudos

By the way, if you can provide a little more detail about the "UI5 app" you are developing and the specific "example of the UI5 stand alone application (HTML Site)" you are referring to, we can try to provide further guidance.

Show replies
Show replies
Former Member
‎11-06-2014 4:15 PM
0 Kudos

Hi Michael and Mustafa ! Thanks for your quick responces

please see the code of the Stand Alone APP im tryiing to make usable for DS:

<html>

    <head>

        <meta charset="UTF-8"/>

        <script id="sap-ui-bootstrap"

            type="text/javascript"

            src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"

            data-sap-ui-theme="sap_bluecrystal"

            data-sap-ui-libs="sap.ui.commons"></script>

            <script defer>

                var dvlModulePath = "./resources/sap/ABC/DEF";

                jQuery.sap.registerModulePath("sap.ABC.DEF", dvlModulePath);

                jQuery.sap.require("sap.ABC.DEF.Object");

                var oExample = new sap.ABC.DEF.Object({ height: 512, width: 512});

            </script>

    </head>

    <body class="sapUiBody">

        <div id="content"></div>

    </body>

</html>

The problem is :

if i try to directly insert the Object.js into the Project via altering the contribution.xml:

          <jsInclude>res/sap/ABC/DEF/Object,js</jsInclude>

  it search for futher libraries in the dynamic part of the code. The corresponding error message ist like :

GET: HTTP://localhost/aad/ressources-12345-sap/ABC/DEF/http://localhost/aad/ressources-12345-sap/ABC/DEF/xyz.js (ressource not found)

failed to load sap.ABC/DEF/xyz from  ressources-12345-sap/ABC/DEF

and the including of the ressource xyz.js into

into the Project via altering the contribution.xml:

          <jsInclude>res/sap/ABC/DEF/xyz.js</jsInclude>

does not help either.

Can you tell me that is the Problem here ?

thanks a lot in advance,

Alex

MustafaBensan
Active Contributor
‎11-06-2014 4:21 PM
0 Kudos

Hi Alexey,

For clarification, can you provide a screenshot of your SDK component folder structure in Eclipse?

Former Member
‎11-06-2014 4:27 PM
0 Kudos

mike_howles4
Active Contributor
‎11-06-2014 4:29 PM
0 Kudos

I think think you need to set the path by deriving the beginning of it like this:

var relPath = $("script:last");


then var dvlModulePath = relPath + "res/sap/ABC/DEF";

Former Member
‎11-06-2014 4:52 PM
0 Kudos

i ve tried it out  .. and i dont get the path unfortunately...

mike_howles4
Active Contributor
‎11-06-2014 5:04 PM
0 Kudos

Ooops, try $("script:last").attr("src");

Also, can you put this as the FIRST line of your component.js file?

alert($("script:last").attr("src"));


BTW: It is important to place this derive this path BEFORE the main .extend statement so that it executes immediately.  (As other script files may follow)


Can you then paste the resulting alert here so we can confirm?

Karol-K
Advisor
Advisor
‎11-06-2014 5:16 PM
0 Kudos

hi,


you jsut want to load 2 JS files from your own res folder, correct?


the code below:

     var dvlModulePath = "./res/sap/ABC/DEF";

     jQuery.sap.registerModulePath("sap.ABC.DEF", dvlModulePath);

is always assuming that you load (require) a real SAP UI5 component, so this is searching in SAP UI5 area.


when you look at my code, you can find similar construct (not sure if this is what you need):


-> https://github.com/KarolKalisz/DesignStudioSdkPack/blob/master/org.kalisz.karol.scn.pack/contributio...


this is how you can bind more JS:

this file is definitelly loaded, as my example is working (you can see it in network view).

is this what helps you?

in your example, check the upper/lower cases.. this can be a problem

you include: xyz.js

your file is: XYZ.js

Former Member
‎11-07-2014 12:24 PM
0 Kudos

Hey Mike,

that was exactly what i was searching for ! thx for the perfect solution and Explanation.

here you see the output:

Answers (2)

Answers (2)

MustafaBensan
Active Contributor
‎11-06-2014 3:41 PM
0 Kudos

Hi Alexey,

I agree with Mike that if you are trying to load JS libraries then the simplest approach is to put them in the include statements of your contribution.xml.  This should work with your Object.js file.

Also, if you would like a more detailed understanding of the method for determining the correct URL path for embedded resources that Mike has described,  you can refer to the blog post SDK Tips and Tricks: Resources and Images and the discussion that follows it.

Regards,

Mustafa.

Show replies
Show replies
mike_howles4
Active Contributor
‎11-06-2014 5:36 PM
0 Kudos

Hey Mustafa,

I'm trying to write an example for Alexey, however I may be encountering an issue that may ring a bell.

I just tried this technique in a closure as Reiner mentions, and it appears the first time you pull the component into the canvas, script:last returns 'undefined'.  When refreshing, you then get the script source.  Sounds suspiciously similar to the CSS bug...  (I'm on 1.3 SP2)

I'm not sure if this is specific to the sapui5 handler or also the case with a div handler, however this is unexpected in my experience.

Karol-K
Advisor
Advisor
‎11-06-2014 5:55 PM
0 Kudos

Hi,

in all my components the logic is working correctly.

you can see an example here:

DesignStudioSdkPack/OSMap.js at master · KarolKalisz/DesignStudioSdkPack · GitHub



(function() {


/** code for recognition of script path */


var myScript = $("script:last")[0].src;


_readScriptPath = function () {


  if(myScript) {


    var myScriptSuffix = "res/map/";


    var mainScriptPathIndex = myScript.indexOf(myScriptSuffix);


     var ownScriptPath = myScript.substring(0, mainScriptPathIndex) + myScriptSuffix;


     return ownScriptPath;


  }




  return "";


},


/** end of path recognition */




sap.designstudio.sdk.Component.subclass("org.kalisz.karol.scn.pack.OSMap", function() {


this.init = function() {


    var that = this;


    this._ownScript = _readScriptPath(); // here the script is read






    this._oElements = {};


};


...


});


})();

the only one problem in thi sconstruct is, the breakpoints are always deleted in chrome... but the recognition is working correctly.

mike_howles4
Active Contributor
‎11-06-2014 6:00 PM
0 Kudos

Weird, I must be missing something.  Below is my example I was trying to make, starting with deriving path:





(function(){


  // Either of these 2 methods have same problem


  var sdkPath = $("script:last")[0].src;


  // var sdkPath = $("script:last").attr("src");


  alert(sdkPath); // Blank/undefined on first load of component in canvas, OK after refresh


  sap.ui.core.Control.extend("com.sample.utilities.RTest", {


  renderer : {


  render : function(oRenderManager, oControl){


  if(!oControl) return;


  oRenderManager.write("<div");


  oRenderManager.writeControlData(oControl);


  oRenderManager.addClass("utilPackColoredBox");


  oRenderManager.writeClasses();


  oRenderManager.addStyle("width",oControl.getWidth());


  oRenderManager.addStyle("height",oControl.getHeight());


  oRenderManager.addStyle("background-color",oControl.getColor());


  oRenderManager.writeStyles();


  oRenderManager.write(">");


  oRenderManager.write(oControl.getContent());


  oRenderManager.write("</div>");


  }


  },


  onAfterRendering: function (){


         // Stub


     },


  metadata : { // Not to be confused with the Data Source metadata property


  properties : {


  content : "string",


  color : "string",


  width : {type : "sap.ui.core.CSSSize", defaultValue : "50px"},


             height : {type : "sap.ui.core.CSSSize", defaultValue : "50px"}


  }


  },


  initDesignStudio : function(){


  // Stub


  },


  init : function(){


  // Stub


  }


  });


})();

I am IE11 but I don't know why that would matter.

Karol-K
Advisor
Advisor
‎11-06-2014 6:03 PM
0 Kudos

i think I had similar issue, as you see I declare the function, but the call is in the init method. indeed I can remember that in some cases it was undefined when I called this directly on screipt load.

in init:

this._ownScript = _readScriptPath(); // here the script is read

mike_howles4
Active Contributor
‎11-06-2014 6:09 PM
0 Kudos

Yes I see that you call _readScriptPath() during init() however hasn't myScript already been set via this statement in the closure?  var myScript = $("script:last")[0].src;

In other words, your init function's call to _readScriptPath() doesn't appear to ever go back and issue another jQuery search for "script:last" so I'm not seeing how it's a timing issue.  This feels very similar to CSS include bug that was there prior to correction in 1.3 SP2...?

Karol-K
Advisor
Advisor
‎11-06-2014 6:16 PM
0 Kudos

this is true, but only what I remember is - this has cost me an effrot of one additional SDK component and 3 hours of my life. at some point I got the undefined away.

mike_howles4
Active Contributor
‎11-06-2014 3:27 PM
0 Kudos

You will have to detect your script path like this:

var relPath = $("script:last");

Then add 'res/whatever' behind it.

Then registerModulePath.

Or you could simply include your JS libs in contribution.xml, couldn't you?

Show replies
Show replies
Ask a Question