Scripting in NG client

Forum to discuss the new web client version of Servoy.

Scripting in NG client

Postby vantesterwalter » Wed Apr 12, 2017 10:37 am

Hi

I'm currently trying out to load scripts in the NG client.
I have made following test files:

html:
Code: Select all
<html>
<head>
<script type="text/javascript" src='/scripting/scripting/originalscript/scriptje.js'></script>
<head>
<body>
  <p>Before the script...</p>
  <script type="text/javascript">test()</script>
  <p>...After the script.</p>
</body>
</html>


custom js file with script:
Code: Select all
function test(){
   alert( 'works');
}


component js file:
Code: Select all
angular.module('scriptingScripting',['servoy']).directive('scriptingScripting', function() { 
    return {
      restrict: 'E',
      scope: {
         model: '=svyModel'
      },
      controller: function($scope, $element, $attrs) {
      },
      templateUrl: 'scripting/scripting/originalscript/scriptings.html'
    };
  })


spec file:
Code: Select all
{
   "name": "scripting-scripting",
   "displayName": "scripting",
   "version": 1,
   "definition": "scripting/scripting/scripting.js",
   "libraries": [],
   "model":
   {
      "yourName" : {"type": "string", "default":"World"}
   }
}


When I run the NG client, it runs.
I see the alert button and the html paragraphs, so you would think that there is no problem.
But there is...
What should happen is that it first loads paragraph: Before the script..., then the alert and when you press ok it has to load the last paragraph: ...After the script.
Not all together.

I also have an warning Synchronous XMLHttpRequest on my head thread, but I don't think that's causing the problem.

Does someone know how to load the script before the last paragraph instead of all together?

Thanks,
Walter
vantesterwalter
 
Posts: 16
Joined: Wed Mar 29, 2017 9:46 am

Re: Scripting in NG client

Postby paronne » Tue Apr 18, 2017 8:46 am

Hi Walter,

if your web component needs to load js/css scripts the proper way to do it is via the 'libraries' definition in the .spec file.

Code: Select all
"libraries": [{"name":"moment", "version":"2.11.1", "url": "bootstrapcomponents/calendar/bootstrap-datetimepicker/js/moment-with-locales.min.js", "mimetype":"text/javascript"},{"name":"moment-jdateformatparser", "version":"0.1.1", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/js/moment-jdateformatparser.js", "mimetype":"text/javascript"},{"name":"bootstrap-datetimepicker", "version":"4.7.14", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js", "mimetype":"text/javascript"},{"name":"bootstrap-datetimepicker", "version":"4.7.14", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css", "mimetype":"text/css"},
   {"name":"bootstrap-datetimepicker-servoy-extension", "version":"1.0", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/css/bootstrap-datetimepicker-servoy-extension.css", "mimetype":"text/css"},
   {"name":"bootstrapcomponents-calendar-css", "version":"1.0", "url":"bootstrapcomponents/calendar/calendar.css", "mimetype":"text/css"}
   ]


Such approach still doesn't allow you to load the script after a certain element is rendered; however i believe there are more suited NG pattern to achieve what you are trying to do instead of loading the script before a specific paragraph. What are you trying to achieve with that ? Do you want to make sure that the element on top is already rendered or what ?
Keep in mind that the NGClient is a single page web app.

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 5 guests