Unit.pas to unit.html

sorry but i'm a bit confused ... i'm testing your sample 'TMSWeb_HTMLTemplate.dproj' and i empty the unit1.html and put a code :


<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>TMS Web Project</title>
    <style>
    </style>
  </head>
  <body>
  </body>
</html>

but delphi not re-generate html file with the components on the form !! i empty element_ID of components also but nothing : html associated file is without components.

How delphi generate automatically the components or components are put manually alwyas ?

When control.ElementID is an empty string, it is auto generated.

The demo TMSWEB_Simple.dproj is the equivalent demo with auto generated controls

Bruno nothing happen ! elementID is empty and not added to html. I use berlin, there is a specific configuration to do ?

i added a WebButton2 and this is the html : (like original sample)

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>TMS Web Project</title>
    <style>
    @import url(https://fonts.googleapis.com/css?family=Montserrat);

  body {
      font-family: 'Roboto', sans-serif;
      margin: 0px;
      overflow: hidden;
    }
.bg-webgreen {
    background-color: #00838F;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: bold;
    }
.container-fluid {
    max-width: 1600px;
    }
.top-title {
color: #FFFFFF;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 15px;
vertical-align: middle;
}
    .top-title a {
    color: white;
    }
.top-title-small {
    float: right;
    font-size: 16px;
}
    .headerpar {
      text-align: left;
      margin: 0px;
      overflow: hidden;
    }
    .appcontent {
      position: absolute;
      width: 100%;
  height: 100%;
    }
    </style>
  </head>
  <body>
<header class="small bg-webgreen">
<div class="bg-webgreen">
      <div class="container-fluid">
    <p class="headerpar">
            <span class="bg-webgreen top-title">TMS WEB Core: Simple standard controls demo</span>
            <span class="top-title top-title-small"><a href="http://web.tmssoftware.com/" target="_blank" title="Visit TMS Web Core page">TMS WEB Core</a></span></p>
            </div>
    </div>
</header>
  <div id="appcontent" class="appcontent">
  </div>
  </body>
</html>

Controls with ElementID empty are added to the DOM at runtime. Inspect DOM from the browser developer console

sorry i dont understand... in the delphi options or chrome (i use it) ?

browser, i.e. Chrome if you use the Chrome browser

bruno please, can you explain me all steps to configure browser/delphi to update html file ? i'm trying to do this 2 days ... but nothing ! Suppose i use chrome or internet explorer.

Thank you very much.

It is unclear what you want to achieve. 

Delphi will not update your HTML file. Either you put HTML elements in your HTML file associated with the form and this static HTML file is used to render your form and bind the HTML elements to Delphi controls. Or the Delphi controls are dynamically created at runtime and rendered into the browser DOM. You will see it in the HTML element list of the browser DOM but clearly, it won't be added to a static HTML template file for your form.

Basically there are two methods:
1) All controls dynamically created & inserted in the DOM with just a HTML form file that doesn't contain much more than an empty BODY. See TMSWEB_Simple.dproj demo project

OR

2) The HTML elements are in your static HTML file used for the form and you bind via ElementID Delphi controls to it and define your UI logic in Delphi code using these controls. The HTML is manually edited and bound to your form logic at runtime. See: TMSWeb_HTMLTemplate.dproj demo project

ok thank you now its clear... i must update manually html associated ! 


Then its possible to create a UI via delphi webform using components like HTMLContainer, HTMLDiv or ResponsiveGrid or ResponsiveGridPanel, etc... There is a sample or guide for that ? 

Thank you

This included sample http://www.tmssoftware.biz/tmsweb/demos/tmsweb_ResponsiveGridPanel/

uses the TWebResponsiveGridPanel