Working with Javascript

[StephB]

Dear all,
I want to add some JS features to my IW app, and something (probably me) went wrong.

I try to follow the method describes here (http://docs.atozed.com/docs.dll/developm...cript.html), and I don't understand where is(are) my mistake(s).

I created a JS file in my project (right-click on the project then Add new \ Other \ Web \ Javascript), and named it IW_JS_ScrollLesson.js.
The file exists in the root path of my app with the other sources, but it's not added to the dproj file.

In the unit where I want to use my JS script (uLesson), I added :
- IWServerInternalFiles in the uses list
- {$R IW_JS_ScrollLesson.js}

Code:

implementation

{$R *.dfm}
{$R IW_JS_ScrollLesson.js}
...

- the following lines in the form.FormShow to load/join the script:

Code:

procedure TIWFormLesson.IWAppFormShow(Sender: TObject);
begin
  inherited;
  gInternalFiles.Add('IW_JS_ScrollLesson.js', '/js/ScrollLesson.js');
  Self.PageContext.ScriptFiles.Add('/js/ScrollLesson.js');
...

When I try to compile/execute my app, I have the following error :

[dcc32 Error] E2161 Error: RLINK32: Unsupported 16bit resource in file "C:\awelter\Server\AW_OnlineSelfTraining\IW_JS_ScrollLesson.js"

I don't understand where I am wrong, is anybody already applied this method, or have another method to use a JS script in my app ?
I read some pages on this forum, but don't undertand the other methods (I'm a newcomer in Delphi/Intraweb world).

Many thanks for your help.

[StephB]

I tried to add my event using Self.Javascript.Add command in my FormShow, but the JS code is added in the header in this case, so when the page is loaded, the code is executed before the page is built, so my element is not already created and I got an error.

Code:

  Self.JavaScript.Add('document.getElementById("IWURLWINLESSON").addEventListener("scroll", (event) => {' + #13#10 +
                      '  if ((event.contentWindow.document.body.scrollHeight - event.offsetHeight) == event.contentWindow.document.body.scrollTop ) {' + #13#10 +
                      '    console.log("End");' + #13#10 +
                      '  } else {' + #13#10 +
                      '    console.log("Scroll");' + #13#10 +
                      '  }' + #13#10 +
                      '})');

Any other solution ?

---

Done using basic HTML style, I added my JS script in my HTML template, works fine even if the JS script is not included in the project and compiled with Delphi.

If someone knows how to use the method descibes in the 1st post, I'm still interessted by the solution.

[valmeras]

I hope also that Atozed will respond with a method to embedde external Js files, available in all the forms, in Intraweb application and have it work.

Meanwhile I use a method similar to what you are using now and it works fine.
I embedde the Js script in the form ExtraHeader and it works fine using that format:

<script type="text/javascript">
 /* JavaScript code here */
</script>

Or at runtime I can also load the Js script as an html template, like you did, or simply as a .txt file always in the Form ExtraHeader. And it works fine also!

[Alexandre Machado]

You first need to build a resource file. A JS file won't be linked as a resource and you will get this compiler error.

This is how you do it:

1) Create a text file and add this line to it:

IW_JS_SCROLLLESSON RCDATA DISCARDABLE "IW_JS_ScrollLesson.js"

the format of each line is this:

NAME_OF_THE_RESOURCE TYPE_OF_RESOURCE DISCARDABLE (the OS can discard it from memory if needed) FILE_NAME_WHERE_THE_RESOURCE_IS


2) Save this file in the same folder where the JS file is and name it like ScrollLesson.rc

3) You can build this file now with the resource compiler, or BRCC32.EXE which is deployed with your Delphi version. To build it just call

brcc32 ScrollLesson.rc

(you may need to use the full path name to BRCC32.exe, or just copy it to your project folder - it works independently of everything else)

The ScrollLesson.RES file will be created in the same folder.

4) Now you can link with your executable like this:

{$R ScrollLesson.res}

5) In order to reference the resource from your code to add it to the internal files, you need to use the name of the resource, not the name of the file, like this:

gInternalFiles.Add('IW_JS_SCROLLLESSON', '/js/ScrollLesson.js');

The resource name is case sensitive. As a convention we use it everything UPPERCASE.

All the rest will just work.

Please have in mind that you can obviously automate all these steps (using the pre-compile steps, for instance, or a .BAT file, etc), it is up to you. I just want to give you a direct and fail proof way of doing it, independently of any IDE services.

[Alexandre Machado]

I hope also that Atozed will respond with a method to embedde external Js files, available in all the forms, in Intraweb application and have it work.

Meanwhile I use a method similar to what you are using now and it works fine.
I embedde the Js script in the form ExtraHeader and it works fine using that format:

<script type="text/javascript">
 /* JavaScript code here */
</script>

Or at runtime I can also load the Js script as an html template, like you did, or simply as a .txt file always in the Form ExtraHeader. And it works fine also!

Valmeras,

there is no difficulty to add any JavaScript file to a IW project. You just need to copy it as is to your wwwroot folder and add it to the form using the ContentFiles property:

In this particular case:

ContentFiles.Add('/ScrollLesson.js');

or in C++

ContentFile->Add("/ScrollLesson.js");

Done. It will work flawlessly.

What he wants here is a more advanced thing. He wants (1) to include the JS file as a resource, built into the executable binary file and (2) to use the InternalFiles mechanism which greatly improves the performance of IW server when serving external content as JS or CSS files.

The IWInternalFiles class not only caches the JS in memory which doesn't require any HDD access during the application life-cycle, but it only pre-compress the JavaScript files (using gzip) so the compression only happens once, during application start up which, again, greatly improves the server overall performance.

[valmeras]

Thanks for the detailed response!
I got what he was trying to do.
I tried the same thing before to embedde Js in my application, using the same procedure which is on your website, and call the functions from any form but I never succeeded.
It was nor working so I used the workaround I suggested.
Now I understand that I was failing at creating the .rc file. 
I am going to try again to see.

[jeroen.rottink]

I didn't use this before but it is nice to add to my toolbox.
Btw: You can add a *.rc to a project so the IDE compiles it to a *.res every time you compile your project.
Use Project | Add to Project... | *.rc and it will add {$R 'Testcase.res' 'Testcase.rc'} to your *.dpr and *.dproj

Attached a testcase where this is in use

[StephB]

Thank you for your replies, but doesn't work with me

My app tree is :

App root path
|--Win32
|--|--Debug
|--|--|--wwwroot
|--|--|--|--js

In js, I already have my js file.
I've added the rc file with the same name and content than you (copy/paste to avoid case/spelling mistakes). Then I compiled it with brcc32 succesfully, RES file was created.

In the form where I want to use my js file, I've added :
- IWServerInternalFiles in the interface USES list
- {$R ScrollLesson.res} in the implementation (also tried with {$R \Win32\Debug\wwwroot\js\ScrollLesson.res})
- gInternalFiles.Add('IW_JS_SCROLLLESSON', '/js/ScrollLesson.js'); at the beginning of the procedure FormShow

No error when I run my app, but the js file is not loaded (not displayed in the page source, not visible in the debugger tab of the firefox web dev tool.

I also tried the method of Jeroen, same issue (the file is added in the program dpr file, no compilation/execution error, but the js file is not loaded).

[valmeras]

This issue is not working for me either!
And this has become crucial!
I have a Js file with sensitive data I need to hide in the browser. And this is the best solution I have found. And unfortunately it is not working!

Can Atozed please attach here a working example for both Delphi and C++ Builder?

[Comograma]

And is this possible for css files also?
I tried same as for js files, but did not work!!!!