ANN: HTMl Library 4.9 released. WebUI and more

[Alexander Sviridenkov 357]

WebUI - new LowCode Web framework for Delphi.
  See https://youtu.be/XCmvz2DPN4Y
  Documentation: https://delphihtmlcomponents.com/webui/
  Sample project: https://delphihtmlcomponents.com/webui.zip
    How to use
      1. Extract files from zip.
      2. Run nw.exe (requires Administrator because uses http.sys web server)
      3. Enter your DB connection details or leave demo DB
      4. Press Create UI
      5. After UI is created press Start server and open http://localhost:8080 in browser.
 
Core

  New THtListView component (VCL/FMX) - display data in listview-like layout with full HTML support.
  THtDocument.AsBitmap method - convert document to bitmap.
  New printing parameter - PrintAsBitmap. Useful when printing white text over black/colored background.
  TElement.AddCSSRecursive(const CSS: string; UpdateStyleAttr: boolean = false) - set property for element and its descendants.
  SVG: support for switch element.
  THtXMLNode.JSON method - save to JSON
  THtXMLNode.XML property - set node inner XML.
  THtJSONSerializer class - serialize objects and records into JSON.
  Templates: support for conditional sections:
    {{@name}}..{{/name}} - name is not empty
    {{@!name}}..{{/name}} - name is empty
  Templates: class functions for rendering and JSON support (result is encoded as JSON):
     RenderTemplate(const ATemplate: hstring; AContext: THtXMLNode; JSONMode: boolean = false): string;
     RenderTemplate(const ATemplate: hstring; AContext: TStrings; JSONMode: boolean = false): string;
  Templates: ThreadSafeRender methods - can be called simultaneously from different threads.
  New VCL and FMX unit htprinters / fmx.htprinters - manage printer setting - set custom paper size, list available paper sizes, etc.
  New unit htboxes - calculate optimal layout of boxes on pallets and inside container. See PalletCalc demo.

Scripter

  x64: support for var parameters in methods
  Support for calling interface methods
  Write and Writenl functions - output to debug console.
  New HTMLtoText(const s: string) function.
  Console.log/warn/error messages without debugger are sent to system log (OutputDebugString).

Editor

  Improved Markdown conversion (better lists support)

Reports

  Barcode element - new type: auto - select barcode type depending on data length and symbols.

SQL

  TSQLSelectStatement - new methods
    AddTable
    AddJoinedTable
  Advanced CreateQueryforTable method.
  Improved support for limits in different dialects
  TSQLContext:
    JSONMode property.
    new AddSelectQuery method.
  PROGRESSBAR SQL function.
  TSQLParam.ValuefromString method.
  New TDMField properties:
    property ContentType: string;
    property MaxDataLength: integer;
    property UniqueValuesCount: integer;
    property UniqueValuesPercent: single;
    property UniqueValues: string;
  New TDMTable method: FillContentTypes - analyze table data and fill field properties.
  New TDMTable method GetReferencedTabler - return tables that reference this table in FK.
  New TDMTable properties:
    property RecordCount: integer;
    property TableType: string;
  New TDMQQuery methods
    function AsRowData(Limit: integer = 0; LowerCase: boolean = false): THtXMLNode - serialize to XML
    function AsJSON(Limit: integer = 0): string - serialize to JSON
    function InsertXML(const Table: string; Fields: THtXMLNode; Schema: TDMSchema; ReturnKey: boolean = false): TDMQuery;
     - insert to table using parameters from XML attributes.
    function UpdateXML(const Table: string; Fields: THtXMLNode; Schema: TDMSchema): TDMQuery
     - update table using parameters from XML attributes.
    procedure ToXML(ANode: THtXMLNode) - serialize to XML
    function ExecWX(Params: THtXMLNode; const ASQL: string): TDMQuery - execute query using parameters from XML attributes.
  New method TDMVirtualSchema.RegisterQuery(const SQL, TableName: string; const TableDescription: string = '')
    - register SQL statement as virtual table.
  TDMDictionary class - abstract class for application dictionaries.
  Implementations:
  TDMSQLDictionary
  TDMStringDictionary
  TDMJSONDictionary
  TDMDictionaryManager - application dictionary manager class.
  TDMVirtualQuery class - class for performing SQL queries on virtual databases.

 

Office

  Faster snippet extraction.
  Support for DOCX embedded fonts.
  Improved rendering quality for PDF, XLSX, RTF, Outlook, DOC and DOCX formats.
  Better search in code files (PAS, C, etc.).
  Support for referenced images (cid:) in Outlook messages.

 

[Attila Kovacs 629]

😮

Edited October 23 by Attila Kovacs

[TigerLilly 16]

Impressive. Wow.

[Rollo62 536]

This is pretty much overwhelming.

I'm afraid there is already a point here where users are shocked by the functionality and need a gentle way to climb the learning curve.

In my opinion, it is always best to have many examples covering different levels of difficulty to understand the whole concept behind it piece-by-piece.
If there is a clear usage concept behind it, how could you explain it in the docs, maybe step by step?

Maybe a user needs a mix of Delphi and HTML/JS knowledge to understand most of it, how can these lessons be broken down into small, digestible chunks?

 

[Alexander Sviridenkov 357]

8 minutes ago, Rollo62 said:

This is pretty much overwhelming.

I'm afraid there is already a point here where users are shocked by the functionality and need a gentle way to climb the learning curve.

In my opinion, it is always best to have many examples covering different levels of difficulty to understand the whole concept behind it piece-by-piece.
If there is a clear usage concept behind it, how could you explain it in the docs, maybe step by step?

Maybe a user needs a mix of Delphi and HTML/JS knowledge to understand most of it, how can these lessons be broken down into small, digestible chunks? 

 

You can get first working application with almost zero coding. Simply load demo project, enter your database credentials (or leave sample database) and press button to generate UI. Application is ready.

Now start browser, switch do design mode (F2) and use designers to adjust tables, tabs, etc as shown in video. Each designer has help ? button in caption which leads to manual.

 

Typical workflow is described there https://delphihtmlcomponents.com/webui/typical-workflow.html

1. Build UI with default settings.
2. Check created UI and make TWebUIBuilder descendant with overridden rules.
3. Create UI using your TWebUIBuilder descendant and analyze it.
4. Repeat steps 2, 3 until you get an acceptable result.
5. Use WebUI designers for final polishing.

Also there are Server and UI sections which itself are samples, you can open any table or action (button) designer and see how it works.
More samples and tutorials will definitely be added later.

Edited October 24 by Alexander Sviridenkov

[Kryvich 165]

Is WebUI optimized for mobile devices, or just for devices with large screens (computers)?

[Alexander Sviridenkov 357]

3 minutes ago, Kryvich said:

Is WebUI optimized for mobile devices, or just for devices with large screens (computers)?

Currently there is only desktop layout, but since UI is stored in an intermediate representation, there will be no need for modifications when mobile templates will be added.

[Alexander Sviridenkov 357]

Demo is updated with Postgres client libraries and better error handling.

[Alexander Sviridenkov 357]

Document Viewer is added to Demo (Word, Excel, PDF, Powerpoint, etc.).

1. Create UI and start Server

2. Open Documens section

3. Press F2 to switch to design mode

4. Using gear icon above documents table and at view window (right) open designers and change documents folder/mask.

[Alexander Sviridenkov 357]

New video - Maps in WebUI

 

[Ivan Rakyta 0]

Hi Alexander,

 

do you have a sample for THtListView?

 

Regards

Ivan

[Alexander Sviridenkov 357]

New video - WebUI Grids: display modes and column types - Markdown, RTF, documents, nested frames

 

 

[Alexander Sviridenkov 357]

On 11/15/2024 at 1:14 AM, Ivan Rakyta said:

Hi Alexander,

 

do you have a sample for THtListView?

 

Regards

Ivan

Currently no, but will be added soon.