The most glaring mistake was when copying resources (like the platform.js file) where we somehow had a logic mistake, causing the file to be raw-copied from the encrypted package-file. This meant the data was garbled and caused problems when running the code. As all great bugs this was a one-liner, but a very very important one!

Fixes in this version

• A focus issue when pressing F12 to toggle between code/form is taken care of
• Shift + F12 now brings up a quick-search dialog, just like delphi
• CTRL + F12 will bring up a similar quick-search unit dialog, just like delphi
• Dependencies on pointer and resize polyfill js-files is now gone, they were purely there to support older webkit browsers, and are now obsolete.
• Removed said dependencies from the template HTML files
• Fixed an issue where “New form” did not set the correct displaymode + positionmode. This should be absolute + inlineblock
• Fixed a problem with gamepad delegate classes not being initialized properly
• Added gamepad delegates to TQTXGraphicView so they can be easily hooked up in the 2D game project type
• Gone over all project types and removed polyfills and set new default values. Also removed units that dont really need to be in the uses clause.
• Fixed the DOSBOX demo, it needed some love and a custom css rule to define the virtual machine display size (one of the first demos we had, so it was old!)
• Removed test projects that should never have been included
• Fixed a toolbar resize issue. If the screen resolution is too small, the toolbar breaks to two lines, but autosize doesnt function, hiding some buttons. This is actually a Delphi bug. I implemented a resize fix for it.
• Default IDE theme changes to light for simplicity sake (no colors issues with “new project” dialog, damn Delphi VCL styling missing category elements).
• Two units belonging to the DOM namespace had been misplaced in common, files are now moved to the correct package.
• Rebuildt helpfiles with more topics added. A pdf will be made available for download separately.
• Fixed a small attachment issue with the debug process.
• CopyResource() from the IDE's resource cache did not check the cipher for the commercial packages correctly, and emitted garbled data. This is now fixed (thank you Hackbart!)
• There was a syntax error in two user packages, and a handful of warnings in our system packages. These have thankfully been fixed
• Updated examples so they build
• Updated the node.js project templates
• Removed obsolete packages

Make sure you update ALL the packages from the update-manager! This is very important.

This week licenses will be issues to all previous backers -- and after the initial feedback from our backers, the product goes live and on sale.

The book now contains a chapter on databases - see https://www.educational-computing.com/qp/db for an SQLite example from the database chapter. This example is an early version, a later version tidies up a couple of things.

Thanks, Jim

Please be advised that this update is very much work in progress, meaning that if you experience any issues then please report those issues so I can get them fixed. The ZIndex support especially is borderline experimental, since it's one of those absolutely bizarre aspects of HTML that makes no sense from an architecture point of view.

To underline: This update contains no new .exe file, purely RTL changes! It is the same exefile as was in the last update (I have to do the RTL changes before I go in and make changes to the exe). For those of you that are waiting for IDE fixes, sit tight, they will be out very soon.

Partial changelog

• Completely overhauled the theme.css file so it takes height for mobile platforms, make sure you copy this into your existing projects! Also replace the old default.theme.css in the themes folder with the new one!
• SetLeft, SetTop, SetWidth and SetHeight optimized
• MoveTo, SetSize, SetBounds, BoundsRect adjusted to call the above methods when doing changes, rather than ad-hoc setting the values
• GetClientRect fixed, it now uses GetClientWidth() and GetClientHeight() which adjusts for the any border-padding and margins
•  Added support for Shadow DOM, calling TQTXWidget.AttachShadow() creates a shadow-dom on an element, which can be accessed via the property ShadowRoot: TQTXWidget, or direct access to the shadow handle via ShadowHandle
• Introduced the concept of "Synchronized widgets". By setting the Synchronized: boolean property on a widget inside the constructor callback, the widget will wait until all it's children are created and in the DOM (as well as itself) before invoking ObjectReady(). This is important for widgets that wrap external JS frameworks, or that needs to be 100% sure that the widget is indeed "ready" before it's manipulated further.
• Added a new CreateOptions flag, wmSynchronized, which developers can set if they dont want to set the Synchronized property. The function GetCreateOptions() can be overriden and you can add the wmSynchronized flag to the result (datatype is a set)
• Introduced stacking-context functions to TQTXWidget: GetStackContextFor() and an overloaded version that also takes a filter parameter. This will return an array of each child element on a widget, sorted by their element-index. This can be used to determine how widgets are overlapping
• Optimized BringToFront() and SendToBack(), there was no need for the RemoveChild() call prior to re-insert or re-append of the element
• Implemented Tooltips (!) This is now in the unit qtx.dom.tooltip.pas
• Expanded TQTXWidget with a Hint property, as well as a ShowHint property
• TQTXDomApplication makes a reference to TQTXTooltipManager, which brings in that part of the RTL automatically. You will need to reference qtx.dom.tooltip.pas in your units if you wish to access the tooltip system directly
• Added a InstallWindowClass() method to TQTXToolTipManager, you can use this to install your own tooltip widget if you want to style it differently
• Changed the "body" proxy component property for TQTXDOMApplication from a component, to a full blown widget. If you want to create widgets directly on the HTML body, you can use this as a parent. Changing this to a TQTXWidget also means you can easily access things like background, styles, check the width and height etc.
• Added a new FormContainer: TQTXWidget property to TQTXDOMApplication, this is a proxy widget that will always represent the container where forms are housed. Different application models represents forms differently, and will have different layout rules for forms. This property simplifies access to the "viewport", regardless of application model.
• Added Touch delegates, these delegates can be found in qtx.dom.events.touch.pas (Please note that you dont need to use these unless you explicitly need multi-touch support. Instead use the pointer-events and check the pointerType property to know if a user is operating with a mouse, pen or touch, and then implement your handling code thereafter).
• Added the Touch delegates to the widgets in the RTL, these now show up the "add delegate" dialog for the form-designer
• Added touch helper functions to TQTXDOMApplication, as well as the partial TQTXWidget class in various units
• The qtx.dom.widgets.pas unit was getting rather big. Exported things like borders into it's own unit (qtx.dom.border.pas)
• To speed up widget creation, borders and font objects are now created "on demand", meaning they are created when you first reference them. No point wasting CPU time creating a background object when it's not used
• Refactored TQTXToolbar so that it supports vertical layout (!)
• Rewrote the CSS for the toolbar so it takes height for both horizontal and vertical orientation
• Added support for ZOrder! Exposing the property ZOrder to TQTXWidget. ZOrder under HTML is a bit strange, since elements initially follow their elementIndex (a new widget is always topmost since it's appended to the parent, and thus ends up at the end of the child collection). ZOrder overrides this, which to be frank is quite confusing for Delphi developers (myself included). Default value is "auto", which in QTX means -1. So if no zindex has been assigned to a widget, it will return -1, which simply means "automatic".
• Implemented ZOrder functions which simplifies sorting and working with ZIndex: GetZOrderHighestFrom(), GetZOrderBoundsFor(), GetZOrderStackFor(). These are used by the RTL to deal with ZOrder.
• Re-implemented (experimental) BringToFront() and SendToBack() so they now use ZIndex rather than elementIndex. Please note that this is experimental at this point. I have tested this with the various example apps and it works fine, but there are bounds to be edge-cases where you might have to call BringToFront() in order to remap the zindex of child widgets. Consider this work in progress! You can turn this off by disabling the $IFDEF in qtx.dom.pas, EXP_ZINDEX
• Added a new InstallViewPort() method to TQTXDisplay, so that an application model can use a different TQTXViewport class if needed
• Disabled older system to detect resize, which caused excessive calls to Invalidate() and Moved(). If you need automatic Resize() and Moved() calls, simply activate the ResizeObserver or MoveObserver, by calling their Observe() methods. When writing widgets you would call ResizeObserver.Observe() in ObjectReady(). This will then listen for mutation events in the DOM and call Resize() automatically whenever your widget has it's size changed. The MoveObserver works the exact same way.
• Expanded TQTXDisplay with methods that performs the layout, StdLayout(). TQTXDisplay will organize it's children vertically, subtracting the height of any widgets you might have created there directly, and resize the viewport to cover the reminder. By isolating this logic in it's own procedure, different TQTXViewport than the default class (see InstallViewPort() above) can perform changes to the default layout regime if needed.
• Implemented a new widget, TQTXDOMIFrame, which creates an IFrame element. Please note that this widget still needs work. When finished it will also expose a message channel for communication between "apps" or third party websites.
• TQTXWindowElement, the baseclass for all TQTXWindow parts, now inherits from TQTXSyncWidgetContainer
• TQTXWindow is now synchronized, since that works better when hosting external websites as the content
• Added a new Window type, TQTXFrameWindow, which contains a TQTXDOMIFrame widget
• Implemented a new application model, this is still being worked on, but you can find it in the test project "Windowing app", which is ultimately the desktop project I have been showing lately. This project also has an Amiga webassembly emulator -- make sure you open this project in the browser, as miniblink does not support WASM.
• .. And much, much more!

I could literally continue for at least 2 more A4 pages of changes and fixes, but the above list represents the biggest changes to the RTL so far.

What to look out for?

Since I have disabled the old resize system, which ultimately tied into BeginUpdate(), EndUpdate() and logging of changes between those two methods, some of your existing projects might be affected by this. The solution is to activate the ResizeObserver object in your widget ( a simple ResizeObserver.Observe(); will do).

The ZIndex change is quite huge, in that our codebase has so far only dealt with ElementIndex (creation index) with regards to BringToFront() and SendToBack(). But so far I have not seen any dire consequences for this change. If your project is affected, you can turn off the ZOrder support by disabling the EXP_ZINDEX $IFDEF on top of the qtx.dom.widgets.pas unit.

I have completely overhauled the theme.css file so it takes height for mobile platforms, make sure you copy this into your existing projects! Also replace the old default.theme.css in the themes folder with the new one!

Download

Backers can download from Patreon.com/QuartexNow as always!

I have also added two new fields to the build-config: pre and post execute, which allows you to pick a file to ShellExecute before running your application - and a file to execute after your application has stopped. This is very handy when you are writing visual apps that needs to talk to a node.js server or services. If you register the server with PM2, you can start and stop the server via "pm2 start/stop all" in these new fields.

NOTE: These fields are not yet activated! Since we are a few days behind I figured I would do an update now to get the theme stuff out, and then work like hell on getting another update out with the rest shortly.

And last but not least, I have moved much of the information that was cluttering up the form designer widgets, such as creation-order, widget type etc. into a sexy new THintWindow. This behaves more or less the same as Delphi. We also draw the widget glyph to this THintWindow to make it easier to visually match the type.

I wanted to get the package-preferences file activated (which was added in the previous build), but I ran out of time. I will have this done by the next update.

Changelist for this build

• Fixed issue where the initial form of a TQTXApplicationBoxed model did not cover the client-region of the viewport. This model creates an outer container (TQTXDisplay) which contains an inner container (TQTXViewport) which houses the forms. This enables us to scroll and clip form contents without bleeding out beyond the boundaries of TQTXDisplay.
• Fixed issue with the WebSocketClient test project, where I had accidentally included a couple of node.js units in the DOM project causing havoc.
• Fixed issue with TQTXDOMWebSocketClient where the OnMessage handler type was unknown. The unit was missing a reference to qtx.dom.messages.pas which containes the OnMessage event parameter type.
• Introduced a new unit, qtx.dom.theme.pas, which now MUST be included in both project and form units. So if your projects refuse to compile, just add that unit to the uses clause.
• Updated all template-files and projects so that new forms and projects includes the qtx.dom.theme.pas in their uses section
• Added new field to the build-config: pre-exec. Added a select button that opens a file-selector dialog. You can pick between *.*, *.bat and *.exe directly. You can also manually type in a command, such as "npm start all". Whatever is typed in this textfield will be ShellExecuted (without waiting for the process to close!) before your project is run.
• Added new field to the build config: post-exe. Same as above except this is executed after your project has stopped.
• Fixed a focus problem when double-clicking on a form-file in the file overview. When the form-tab opens focus was not set to the designer. This was a simple one-liner
• Updated the Assign() method for TQTXWidget so that it includes the theme values
• Updated the Assign() methods for TQTXImage so it invokes it's ancestor and dont overwrite the theme border

To-Do at this point

I wanted to get the sexy TRichView into this build, but I quickly realized that I need to play around with the package a bit before i start using it. TRichView is a highly polished and professional product with a ton of functionality. In order to do TRichView justice, and make it a natural feature for the QTX IDE, it has to be properly setup and applied. So I have pushed that a few weeks into the future.

• Last build we added support for package config files, which is a JSON file that the IDE looks for when opening zip-file packages. This is to "future proof" the package system a bit so that we can check for package dependencies and version conflicts, which is bound to happen quickly as people make their own packages. This file is checked for and loaded into the package objects the IDE manages, but we dont yet read from it. This obviously needs to be fixed.
• In the preferences dialog we have a tab where we can assign a colorset to each filetype. This might be overkill to be honest, but either way it either has to be finished or removed. Finishing it is a matter of storing the name of the colorset the user has picked for that filetype. Nitpicky but useful.
• The code-editor has a timer already in place for background compilation and maintaining the AST, but it lacks a bit of logic. In short, when you type anything there will be a small delay after you last pressed a key, and then the background compiler kicks-in and rebuild the AST automatically for you (see the IDE preferences dialog). This timer is there, but I need to finish the logic. This is not as straight forward as it might seem, since the IDE has to be smart enough to recognize if you are in the middle of something, like typing a property declaration that is not finished.
• We are missing two options from the Ragnarok codegen, namely to emit a ready-to-rock DOM protocol client class, and also a node.js protocol object. The idea here is that you design your protocol (messages, fields, datatypes etc), and the IDE spits out a ready to use protocol object + message stack (keeps track of sent and received messages) and a message dispatcher. All you have to do is create a client or server object and assign that protocol - and it will run on whatever medium it might be (messages between worker, websocket, http/rest, UDP. Ragnarok abstracts the data from the medium).

When this is in place, the IDE is as good as we can make it for version 1.0, and we can ship that while I immediately start creating new and cool project templates, demos that actually makes sense, and write documentation.

Download

Backers can download from www.patreon.com/QuartexNOW as usual

What has changed in this build?

• Property inspector now takes negative integer values (e.g -100)
• Removed a menu item for "Save as" since that has no meaning with folder based projects (files can be renamed via the file overview)
• The IDE now saves your preference for how the widget palette shows the widget glyphs (report or icons). Right-click on the component palette and select the view menu there.
• Updated the compiler version we use so we finally have async and await keyword support.
• Fixed a problem where DWScript emits two main() entrypoints. We now check the generated code, both compact (optimized for size) and normal, and remove the empty main() symbol.
• Boxed application model is now there. Still need to fix a couple of hickups with the Display-View layout, but you can safely create boxed applications now (this is the type of app model best suited for mobile devices).
• Fixed a few hickups in the TQTXDOMApplication object where I had used reintroduce rather than overload, causing mayhem in form navigation
• HOTFIX: A curious bug materialized when one of the backers tried to add a delegate to the main form, where each delegate always got the name "Delegate1". This turned out to be a simple mistake I had made, where the code checked delegates on child widgets, but somehow I had forgotten to check the container itself (sigh).
• .. And several tidbits more!

Backers can download the latest build from Patreon:

https://www.patreon.com/posts/hotfix-build-0-3-79325234