TMS WEB CORE直接从HTML&CSS设计的页面布局

TMS WEB CORE直接从HTML&CSS设计的页面布局

TMS WEB CORE支持DELPHI IDE中拖放控件，生成HTML UI。这种方式适合DELPHI和C++ BUILDER的程序员开发UI，是不能脱离语言IDE的。

TMS Web core框架也完全开放直接从HTML&CSS设计的页面布局。框架的架构提供分离设计和代码，甚至由具有角色的人完成设计，即图形设计师。

那么，如何处理这种分离呢？幸运的是，以一种非常简单和直接的方式。这个HTML和UI控件之间的链接以及DelphiIDE中使用的代码基于HTML元素ID。

每个TMS Web核心控件都有一个属性elementID。当未使用elementID，即保留为空，生成控件所包含的HTML元素，通过TMS Web核心框架。

当指定elementID时，找到了html元素，连接到控件的PASCAL类。这意味着属性访问器直接获取，从HTML元素和各种HTML元素javascript事件中设置的值为

挂接类并公开为Pascal事件处理程序。

下面的例子中，twebMemo通过elementID属性连接到textfarea html元素ID设置为“mem”，并且已经在HTML文件中。

The software developer and the graphical designer can collaborate by simply ensuring that the
designer provides the HTML element IDs to the software developer or the software developer
can provide a list of IDs of controls needed to the graphical designer. It speaks for itself that
using this technique empowers us to take advantage of responsive design for TMS WEB Core
web applications. When the HTML template for the page is applying responsive design
techniques, i.e. different layouts for different device screen sizes, the UI controls will appear
where the designer defined these should appear depending on the screen size. That is not all
though. It is also possible to let the Delphi designed UI be generated in the body part of a HTML
page or in any specified HTML container element in a HTML page. As such, a graphical
designer could create a page layout with a header, footer and other elements in the HTML page
and add a specific area via a HTML DIV or SPAN element where the Delphi designed UI will be
generated in. To do so, all that is needed is set to the ID for the HTML element where the form
should be generated via the Form.AppContent property. Finally, each UI control also exposes
an ElementClass property. Via this ElementClass property a CSS style can be specified for an UI control. Via this way for example, it is very easy to use a popular framework like bootstrap. It
is sufficient to set the bootstrap CSS class names to the UI controls on the Delphi form designer
by their ElementClass properties.

软件开发人员和图形设计人员只需确保Designer向软件开发人员或软件开发人员提供HTML元素ID

可以提供图形设计器所需控件的ID列表。这本身就说明了使用这一技术使我们能够利用TMS Web core的响应式设计Web应用程序。

当页面的HTML模板应用响应式设计时技术，即不同设备屏幕大小的不同布局，将显示UI控件设计师定义的地方，这些应该根据屏幕大小显示。

不过这不是全部。也可以让Delphi设计的用户界面在HTML的主体部分生成。

页面或HTML页面中任何指定的HTML容器元素中。因此，图形设计器可以在HTML页面中创建具有页眉、页脚和其他元素的页面布局。

并通过一个HTML DIV或SPAN元素添加一个特定的区域，Delphi设计的UI将在其中生成。要做到这一点，只需将表单所在的HTML元素的ID设置为应通过Form.AppContent属性生成。

最后，每个UI控件还公开elementClass属性。通过此elementClass属性，可以为UI控件指定CSS样式。例如，通过这种方式，很容易使用一个流行的框架，比如引导程序。

它足以将引导CSS类名设置为Delphi窗体设计器上的UI控件通过它们的elementClass属性。

TMS Web核心框架中包含的演示之一显示了这一点。通过简单的改变通过更改HTML页面模板中的引用，引导主题Web应用程序将自动适应。

进一步微调设计时设置如何转换为运行时外观和布局，可以通过ui控件属性elementFont和elementPosition。

默认情况下，ui control element字体属性设置为efproperty。这意味着UI控件字体属性值将用于生成HTML元素的样式属性（如果

elementID和elementClassName为空）。当elementFont设置为efcss时，这意味着HTML元素的字体将由浏览器的css解析决定。

elementPosition属性确定如何将基于表单设计器的坐标用作

HTML元素的样式属性。当elementPosition设置为epabsolute（默认值）时，

HTML元素样式属性设置为绝对，控件位置和大小将匹配

它是如何在窗体设计器中设计的。当设置为eprelative或epnone时，

HTML元素的布局、位置和大小将由浏览器和可能的CSS决定。

应用于HTML元素。