Problems using bootstrap templates

Motion_Byte_In · September 7, 2018, 2:13am

Hi,

I 'm Strugling with some problems using a bootstrap template.

My project have 2 forms, a simple login screen using bootstrap and an admin dashboard.

In the login form I call a new form that have only html admin dashboad bootstrap template on it.

But somehow the admin dashboard have some issues like some graphs missing and sidebar menu not working correctly. In the browser developer tools I can see some issues regarding javascript libs.

the source code of the project is this one

Application.Initialize;

Application.MainFormOnTaskbar := True;

Application.CreateForm(Tdashboardf, dashboardf); // dashboard Form

Application.CreateForm(Tmainf, mainf); //Login form

Application.Run;

At first I thought that I was missing some javascripts libs,

But, if I start the aplication using the admin dashboard as the inicial form instead of the login one then everything is displayed and runs fine and without errors.

the source code of the project is

Application.MainFormOnTaskbar := True;

Application.CreateForm(Tmainf, mainf); //Login form

Application.CreateForm(Tdashboardf, dashboardf); // dashboard Form

Application.Run;

I send a link with the project and the template is on the debug folder inside a folder called "files"

the template is free so there is no problem sending it.

https://we.tl/t-phOI7cim4x

My goal is to develop with WebCore only using templates, so far I really like the framework, but I really need that templates works fine, I maybe missing something, but cannot figure out where.

I've also tried with other payed templates that I have and the result is the same.

Any help is apreciated , Thanks

brunofierens · September 9, 2018, 11:06pm

I cannot open this file. When trying to open with 7-zip, it says invalid archive.

Motion_Byte_In · September 10, 2018, 3:01pm

Hi Bruno,

Sorry for this but I use winrar, it's in rar format,

but here is the link with a zip files.

https://we.tl/t-c8wGI3d88W

brunofierens · September 11, 2018, 10:50am

I changed your application main HTML to:

<HTML><HEAD><TITLE>TMS Web Project</TITLE>

<META content="text/html; charset=utf-8" http-equiv=Content-type><LINK rel=icon

href="data:;base64,=">

</HEAD>

<BODY>

rtl.run();

</SCRIPT>

</BODY></HTML>

to make sure the bootstrap scripts are loaded before the application script.
Then it works:

Motion_Byte_In · September 11, 2018, 11:49am

Hi Bruno,

Thanks for you anwser,

The problem still there.

If you start the aplication using the main.pas ( page with a login page, just click login to enter)

then the second form (dashboard.pas) doesn't work correcty, the charts doesn't show, the sidebar doesn't york corretly, the accordion behaviour dissapear.

It you look at the picture you have attached you will see that the charts areas are empties ( no chart). this occurs only if I define the main.pas as startup form.

If I define that my startup form is the dashboad.pas then all the Js scripts works flawless.

Regards

José

brunofierens · September 11, 2018, 11:54am

I did test it, I showed you a screenshot, it does work.

The project can be downloaded here:

http://www.tmssoftware.net/public/bootstrapsimple.zip

When you see an issue, please see in your console for errors, that will give you a hint about what could be wrong. When the bootstrap .js & .css get properly loaded, it should work.

Motion_Byte_In · September 11, 2018, 1:08pm

Ok Bruno,

I'm sorry to insist but I'm evaluating tms webcore, I want to buy it for my next projects, but templating must work 100%.

So... Please, look at your printscreen, do you see any chart in the chart Area Example? NO you don't, so there is an error on the console. about the morris.js chart lib, I know how to work with developer tools on the browser.

The problem is that I can't find any reason why the template works 100% free of errors using this code

Application.Initialize;

Application.MainFormOnTaskbar := True;

Application.CreateForm(Tmainf, mainf);

Application.CreateForm(Tdashboardf, dashboardf);

and why it doesn't work correctly if I start the app with the screen login first.

Application.Initialize;

Application.MainFormOnTaskbar := True;

Application.CreateForm(Tdashboardf, dashboardf);

Application.CreateForm(Tmainf, mainf);

So this it not a problem about missing javascript libs, but a problem regarding the use of different forms using templates in the tms webcore.

Once more I'm sorry for my persistence, I know you have a lot of work to do and support to give to a lot of other people, but... I really need this to work flawless before invest my money on this tool.

brunofierens · September 13, 2018, 3:31pm

The issue here is the script:files/data/morris-data.js

This script expects HTML elements where to insert the chart data and when you load this at application level (in app main HTML file) , the form (and thus the HTML elements of the form) are not yet loaded.
So, you can only load files/data/morris-data.js from or after the form HTML was loaded.

The simple solution was to call this script from the daskboard form OnCreate event:

var

script: TJSHTMLScriptElement;

begin

script := TJSHTMLScriptElement(document.createElement('script'));

script.src := 'files/data/morris-data.js';

script.type_ := 'text/javascript';

document.head.appendChild(script);

end;

The updated source is here: http://www.tmssoftware.net/public/bootstrapsimple_update.zip

Bruno Fierens2018-09-13 15:31:45

Motion_Byte_In · September 13, 2018, 4:03pm

Hi Bruno,

Fantastic :) I really apreciate your explanation and your solution,

This now explain a lot of problems I've been faced :)

I already tested and it work flawless.

Thank you

Best Regards

Jos?

brunofierens · September 13, 2018, 4:30pm

Great!
Using bootstrap templates is indeed an extremely productive way to create fantastic looking web applications in no time.