A few months ago I developed a web application, which executes when a user enters an URL in a browser. This was amazingly simple to realize with TMS Software.
Now, I developed a small web app displaying a data entry panel for a user subscription. I want to make it run when when the user navigates to a specific web page of a web site.
The website was developed using Joomla and the specific web page contains html text and pictures. It should contain the panel created through this small web application.
I am not sure how to do this exactly. I found a Joomla module allowing to insert code into a html page. So, I guess I can insert a call to the web app in there. Would it be enough to call "Webapp.js" at the required position? I am a bit lost here.
I'm not familiar with the internals of joomla.
But technically, to include a web core app in another framework / page, you basically need the application .JS file and you need to get the app started.
So, embed the .JS file with something like:
<script type="text/javascript" src="myapp.js"></script>
and then start it with script:
<script type="text/javascript">
rtl.run();
</script>
You might want to control where in the page your main form will appear by setting the form's FormContainer property to the ID of a HTML element on the page where you want the form to appear.
1 Like
Use an iframe in joomla to load your Web Application
Yes, this is working indeed.
This basically works, as my form is displayd, but there is a 404 and files are not found. I think, the link to the Bootstrap.css is missing and maybe parts of the project-HTML.
Using IFrame works ok, besides the height.
My CMS generates dynamic paths for the pages. So I have to embedd my WebCore project using absolute paths. But the frmMain in the rtl.run() is not found, because the server tries to locate it at the dynamic path.
<script src="/WebRezept/bootstrap.bundle.min.js" type="text/javascript"></script>
<link crossorigin="anonymous" href="/WebRezept/bootstrap.min.css" rel="stylesheet"/>
<script src="/WebRezept/WebRezept.js" type="text/javascript"></script>
<script type="text/javascript">rtl.run();</script>
And this is not found, says the console:
https://www.nutritional-software.at/content/nuts-software/rezeptberechnung-im-web/frmMain.html
Thanks for every assistance!
I can't help with the problem described by Maierhofer Bernd, but I can explain in some detail how to use an iframe having a height determined by the webapplication embedded in the iframe. This height may even change during the execution of the webapplication.
Let me first start showing a webpage containing an iframe embedding a Web Core application (a small login form):
The height of this form changes, when the user checks "forgot password", as is shown in the picture below:
The next picture shows the html of the webpage, containing two interesting parts:
-
The iframe definition. It has an id, a source and a width, but no height. The height will be adapted by the second part. Note that the source in this iframe is a local source. When putting the application on a server, the source must be a full https URL. The source refers to the html file when creating a Web Core application.
-
A small script containing a message listener and receiving height information. The body of the function sets the height of the iframe, referred to through the iframe id.
The sender of this message is a script in the project html file created by the Web Core application. It contains a function, which is called in the Delphi code of the Web Core Application and sends the information to the listener through a postmessage call:
Finally, the Web Core application contains a small Delphi module which calls this javascript function using the asm statement allowing to call javascript:
The Delphi function "CallJS" must be called at all places that may affect the height of the application and so must adapt the iframe height. Obvious candidates are "OnResize" and "OnShow" events in addition to the places where the application hides or shows additional fields and zones.
Attached a zip file containing this small Web Core application and also containing web page with the iframe.
TestForm.zip (8.8 KB)
I hope this helps.
Although the example here is rather small, it shows very well how a Web Core application is a clean solution compared to using website builder tool extensions, plugins or modules. Most of these have a limited functionality and sometimes also a questionable quality.
Moreover, with this solution, you can use exactly the same Web Core application in any web site, created with any website builder tool.
1 Like
:- ) Elegant solution. Should work with <embed ...>, too.
I will talk to my CMS support, maybe they have some info, too.
Thanks a lot, this is very useful!
