Hi,
is it possible to create some unit (or something like this) having possibility of designe and use strictly WebCore components and use this designed frame inside another TWebForm (in my mainform).
I try to have only one mainForm with a main menu (in left part of it)
and I use TwebPageControl with manyTabsheet (without tab) and I would like design each tabsheet content in indivudual unit (or something else).
I hope that is clear...
Thanks
Yes, this is absolutely possible. you don't even need to use a TWebPageControl. Just have a TWebHTMLDiv component that is the placeholder for the forms. When a menu item is clicked, each form can be loaded into the div dynamically.
Here's one example where forms are loaded dynamically:
Thanks Andrew, I'll check your project to see if your process is in my convenience.
Gilles
Great Andrew !!!!
There are lots of different ways to do this kind of thing, and that's just one particular example. There are others as well, I think even one included in TMS WEB Core itself (Basics\MultiForm) if you're looking for other examples. In the link I gave, the idea was to have the forms loaded up ahead of time so that switching was as fast as possible. But other examples may be more applicable, particularly if the forms are large or complex, as you might then prefer to load them only when needed.
So you have lots of options!
Andrew.
Hi,
it's so strange the demo Multiform run correctly only if we do nothing on project.
If we try to use for example Bootstrap 5 with "manage Javascript library" after this run again and Multiform won't be ok.
I just tested this and could not reproduce this.
Nothing changed when just the bootstrap 5 lib references were added.
It's ok now I redownload full demo zip file and re-install all, and it'seems to be ok.
Sorry
So I 've found now the cause.
I've change TForm2 (in Multiform demo) property ElementFont to efCss and this cause screen bug.
When you move the sub window browser content will be moved.
Thanks
And it's impossible to recover stable version.
With or without Bootstrap javascript library option and back to ElementFont := efProperty;
Hi Andrew,
when switch to design mode with VS code with your subform I have this message
Ah, I've not yet used VS Code. Not sure how to help. In Delphi though, sometimes properties are set in the IDE that don't exist in the component, so maybe that's what's happening here. Try deleting the WebMemo referenced, and then create a new one just with the defaults and see if that helps?
Thanks Andrew I thought that too.
About the method :
Unfortunally some properties are remove with VS Code I lost anothers too when use design mode.
So I lost link between component. I've look the dfm mainform file before use design mode and I've seen that WebHTMLDiv1,2,3,4 had some ElementId defined.
How is the principle after create each form to navigate from one to one.
The basic idea is that there are four forms. There are a few components defined in each of the four example forms but mostly just for display. You don't need any of the TWebMemo components, for example, just the TWebButton is fine. The important bit is this:
// Hide currently shown form
asm
var oldform = document.getElementById(Element);
document.getElementById(Source).append(oldform);
var newform = document.getElementById('WebHTMLDiv1');
document.getElementById('FormHolderMain').append(newform);
setTimeout(() => { window.dispatchEvent(new Event('resize')); }, 0);
end;
Each form has an ElementID assigned, as does the place where the forms are to go (the FormHolderMain DIV. All that is happening here is that the HTML/JavaScript "append" mechanism is used to move entire Form contents from one part of the page to another, swapping them between the placeholder at the bottom and the main display area. The ElementIDs are used for referencing the forms in this case.
Andrew.