DelphiFan Magazine

Top Menu

Main Menu

  • DELPHI
  • CODE SAMPLES
  • FIREMONKEY
  • DATABASE
  • RELEASES
  • VIDEOS
  • REVIEW
  • TECH NEWS

logo

DelphiFan Magazine

  • DELPHI
  • CODE SAMPLES
  • FIREMONKEY
  • DATABASE
  • RELEASES
  • VIDEOS
  • REVIEW
  • TECH NEWS
  • How to add a server application written in UNIGUI to startup?

  • UniGUI Expiry Link Anonymizer

  • UniGUI Add CAPTCHA to the WEB project

  • UniGui. Unique hybrid of Delphi and JS

  • How to transform a blob field into string lines (varchar) in SQL Firebird?

CODE SAMPLESDELPHI
Home›CODE SAMPLES›TMS WEB CORE designed page layout directly from HTML&CSS

TMS WEB CORE designed page layout directly from HTML&CSS

By admin
December 9, 2020
2655
0
Share:

TMS WEB CORE designed page layout directly from HTML&CSS

TMS WEB CORE supports drag and drop controls in DELPHI IDE to generate HTML UI. This method is suitable for the programmers of DELPHI and C++ BUILDER to develop UI, and cannot be separated from the language IDE.

The TMS Web core framework is also completely open to design page layouts directly from HTML&CSS. The framework of the framework provides separation of design and code, and even the design is completed by a person with a role, that is, a graphic designer.

So, how to deal with this separation? Fortunately, in a very simple and straightforward way. The link between the HTML and UI controls and the code used in DelphiIDE are based on the HTML element ID.

Each TMS Web core control has an attribute elementID. When the elementID is not used, it is left blank, and the HTML elements contained in the control are generated through the TMS Web core framework.

When the elementID was specified, the html element was found and connected to the PASCAL class of the control. This means that the attribute accessor directly obtains the value set from HTML elements and various HTML element javascript events

Hook the class and expose it as a Pascal event handler.

In the following example, twebMemo is connected to textfarea through the elementID attribute. The html element ID is set to “mem” and it is already in the HTML file.

 

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.

Software developers and graphic designers only need to ensure that Designer provides the HTML element ID to the software developer or software developer

A list of IDs of the controls required by the graphic designer can be provided. This in itself shows that the use of this technology allows us to utilize the responsive design of TMS Web core web applications.

When the HTML template of the page applies responsive design technology, that is, different layouts of different device screen sizes, the places defined by the UI control designer will be displayed, and these should be displayed according to the screen size.

But this is not all. The user interface designed by Delphi can also be generated in the main part of HTML.

In any specified HTML container element in the page or HTML page. Therefore, the graphic designer can create page layouts with headers, footers, and other elements in HTML pages.

And add a specific area through an HTML DIV or SPAN element, and the UI designed by Delphi will be generated in it. To do this, just set the ID of the HTML element where the form is located to be generated by the Form.AppContent property.

Finally, each UI control also exposes the elementClass property. Through this elementClass attribute, you can specify CSS styles for UI controls. For example, in this way, it is easy to use a popular framework, such as a bootloader.

It is sufficient to set the boot CSS class name to the UI controls on the Delphi form designer through their elementClass property.

One of the demos included in the TMS Web core framework shows this. By simply changing the reference in the HTML page template, the boot theme web application will automatically adapt.

To further fine-tune how the design-time settings are converted to runtime appearance and layout, you can use the ui control properties elementFont and elementPosition.

By default, the ui control element font property is set to efproperty. This means that the font attribute value of the UI control will be used to generate the style attribute of the HTML element (if

elementID and elementClassName are empty). When elementFont is set to efcss, it means that the font of the HTML element will be determined by the browser’s css parsing.

The elementPosition property determines how to use the coordinates based on the form designer as

The style attributes of HTML elements. When elementPosition is set to epabsolute (the default value),

HTML element style attribute is set to absolute, control position and size will match

How it is designed in the form designer. When set to eprelative or epnone,

The layout, position and size of HTML elements will be determined by the browser and possibly CSS.

Applied to HTML elements.

Tagsdelphidelphi tmstmstms web coretms web core csstms web core html
Previous Article

Convert Json to TFDMemTable

Next Article

Delphi implementation software version verification code

0
Shares
  • 0
  • +
  • 0
  • 0
  • 0
  • 0

admin

Related articles More from author

  • CODE SAMPLESDELPHI

    How to Remove Blank Lines from Memo?

    January 3, 2021
    By admin
  • CODE SAMPLESDELPHI

    Good code samples for cxGrid

    October 18, 2020
    By admin
  • CODE SAMPLESDELPHIFIREMONKEY

    Copy text to clipboard in Firemonkey applications

    December 15, 2020
    By admin
  • CODE SAMPLESDELPHI

    Two ways to improve the efficiency of unigui development

    October 13, 2020
    By admin
  • CODE SAMPLESDELPHIFIREMONKEY

    Delphi Android internal system related operations

    December 11, 2020
    By admin
  • CODE SAMPLESDELPHI

    Use LockBox does encryption and decryption

    January 2, 2021
    By admin

Leave a reply Cancel reply

You may interested

  • CODE SAMPLESDELPHI

    Simple instructions for using uniGUI’s HyperServer (load balancing)

  • CODE SAMPLESDELPHI

    Use LockBox does encryption and decryption

  • DELPHIRELEASES

    SVGICONIMAGELIST 2.2: New SVG engine “CAIRO”

  • LATEST REVIEWS

  • TOP REVIEWS

Timeline

  • January 27, 2021

    How to add a server application written in UNIGUI to startup?

  • January 27, 2021

    UniGUI Expiry Link Anonymizer

  • January 26, 2021

    UniGUI Add CAPTCHA to the WEB project

  • January 26, 2021

    UniGui. Unique hybrid of Delphi and JS

  • January 13, 2021

    How to transform a blob field into string lines (varchar) in SQL Firebird?

Latest Comments

Find us on Facebook

Follow Us on Instagram

logo

Our website, law, laws, copyright and aims to be respectful of individual rights. Our site, as defined in the law of 5651 serves as a provider of space. According to the law, contrary to the law of site management has no obligation to monitor content. Therefore, our site has adopted the principle of fit and remove. Works are subject to copyright laws and is shared in a manner that violated their legal rights, or professional associations, rights holders who, adsdelphi@gmail.com I can reach us at e-mail address. Complaints considered to be infringing on the examination of the content will be removed from our site.

About us

  • 660 Pennsylvania Avenue Southeast #100 Washington, DC 20003
  • 0123456789
  • adsdelphi@gmail.com
  • Recent

  • Popular

  • Comments

  • How to add a server application written in UNIGUI to startup?

    By admin
    January 27, 2021
  • UniGUI Expiry Link Anonymizer

    By admin
    January 27, 2021
  • UniGUI Add CAPTCHA to the WEB project

    By admin
    January 26, 2021
  • UniGui. Unique hybrid of Delphi and JS

    By admin
    January 26, 2021
  • How to add a server application written in UNIGUI to startup?

    By admin
    January 27, 2021
  • Amazing Cross Platform Email App Sample In Delphi 10.4.1 FireMonkey For Android And IOS

    By admin
    August 13, 2020
  • Critical Update Available For Delphi FireMonkey 10.4.1 On Android, IOS, OSX, Windows, And Linux

    By admin
    September 4, 2020
  • Setting up the IDE for your first Android Application in Delphi

    By admin
    September 7, 2020

Follow us

Find us on Facebook

© Copyright Delphifan Forum. All rights reserved.