Alexander Sviridenkov

New video - Maps in WebUI

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.

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

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.

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.

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.

SQL framework from HTML Library Bundle can execute SQL queries on JSON, XML, Datasets, Lists, arrays, lists of objects, CSV files, etc.

There are two attached messages. In MyMail there is style attribute but no width/height attributes. Outlook does not handle image size in style attribute correctly, it requires explicit width/height. In MyTest2-2 there are width/height attributes but incorrectly separated by semicolon.

Image attributes are not correct h1XZgdBrJ2IOlrmq1SofeBwIdLyQHgGPgEfAIzCICNgIw6YHUZdhkvl//UZHbn5keAcAAAAASUVORK5CYII="; height="144px"; width="120px"; /></div> There should be no ; between attributes

Try to use width/height attrubutes instead of CSS.

Yes, it can. Library itself is not tied up to any web server, just need 20-30 lines of code to pass request and get response.

Main differences: 1. In WebUI you do not work with simple control like Label, Edit, Combo, etc., only with high level entities. F.e. "I want to have a filter on toolbar for this field". 2. Library is not tied to certain JS/CSSlibraries, you can define how it will render UI by changing templates. 3. UI is designed in browser and is stored in DB. Therefore: a) You can have different UI on each customer/site using one compiled application. And easily copy/paste forms between sites. b) Changes are more simple. Standard way: Customer request, f.e. add new column to grid - Open application in IDE, find form, find dataset, change query, find grid, add column, compile, test, send back to customer. WebIUI - press F2 in browser, open designer, change SQL, add column, press Apply. 4. Very powerful grid/listview. Easy to define cell content, color, background, format, etc. 5. Lot of built-in features (with UI created using WebUI itself) - localization with automatic translation, session management, forms management, SQL and pages profiling, server monitoring, etc. 6. Embedded access rights management. All entities are linked to dataclasses and UI is displayed with respect to current user role (f.e. Delete button will be hidded if role has no delete rights for this class). 7. SQL, JS, Scripts editors with completion and hints. 8. Some parts are created automatically basing on DB schema and content anylysis. You can download demo, enter you database details and get working application in 1-5 minutes. 9. Easy integration with Delphi, Register you class in WebUI and you will be able to call any of its methods from scripts.

Currently it supports only desktop platforms, but in future can work on mobiles too.

WebUI demo is available: http://delphihtmlcomponents.com/webui.zip 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. Documentation https://delphihtmlcomponents.com/webui/

HtPanel (DX canvas) https://drive.google.com/file/d/1Eig5hvn619Mz3ATh7lTl65Zh3TUN4Vey/view?usp=sharing