Posts by Harald Schneider

It is a nice to have in certain situations - nothing more.

Mouse + keyboard are unbeatable. So you are not too old .-)

Only Microsoft knows. Do they? :-)

Just to complete this topic:

Windows allows to configure a Pen tool to emulate mouse events. This works fine with AB. The issue only appears when using fingers instead of the pen.

I am sure you will. Thank you very, very much.

I think simple HTML with {}-variables and editable properties in the inspector would be a good starting point. The more complex stuff could be added later. Experienced users can add styles and JS code in the HTML editor itself to get a component working.

Plus an export as XML (or ZIP file?) button, to allow sharing of components among users.

That is all which came to my mind so far. Maybe some other ideas from other users here?

One more thing: Properties.

Custom HTML code should allow placeholders like {property-name} which generates a string property in the inspector.

This would allow e.g. variable icons, colors etc. in a menu HTML custom block, changeable via the inspector palette

Yes, this goes far beyond simple HTML building block.

The user could have multiple tabs in the custom control's editor:

1. HTML: For all the HTML stuff.

2. CSS: For all the CSS-Code. This is compiled to a separate file and linked to the header during the build process. E.g. component-name.css

3. Javascript: For all the JS-Code. This is compiled to a separate file and linked to the header during the build process, too. E.g. component-name.js

Maybe a 4th tab for resources, as images etc. Here could be also a field for a small icon, displayed for the custom component itself in the Tools palette.

The event stuff could go to the JS-Tab, either as visual components, or hand-coded by the end user as JS-code.

I appreciate the idea to drive this further, including events. Such control could include events, CSS code and JavaScript code as well. All dependencies encapsulated in a single control.

Depending on their skills, users could use this to create plain, simple HTML building blocks (the same as copy/paste HTML code) or highly complex controls with events, JS and CSS.

Would it be possible to have custom HTML blocks in the Tool palette?

In fact this would be reusable HTML blocks in a separate Custom group in the Tool palette. Creating such a block could be as easy as adding a custom function. I see the following advantages:

1. Faster building via drag and drop, while reusing often used HTML components.

2. A good way to push the functionality of AB by community contributions. Just the same like the custom plugins, but easier to create.

What do you think?

OK, I see ... just thought it would be a property, which is set wrong on the underlying component. it is not worth to dig deeper, I share your point of view!

Hi David

On a touch screen PC, I have the following problem:

I can place buttons etc. via drag and drop on the canvas. This works perfectly. But as soon as I move one of the controls with my finger or a stylus, the canvas itself behaves like it would be grouped with the controls on it. The complete canvas underneath moves with it.

Maybe there is some touch / gesture property missing in the Delphi component?

Welcome. Yes, saw the plugin docs - very, very interesting :-)

Here is a collection of functions, that do exactly that, and some more PWA related stuff. This is helpful, if you want to implement e.g. Installation banners, when a user loads the PWA URL with his mobile phone:

// pwa-support 1.0.3 // // PWA related funtions. // // (c)2019 Harald Schneider // function pwaPlatformIOS() { // // Checks if the PWA was called in a browser under iOS. if(navigator.userAgent.toLowerCase().match(/(ipod|iphone|ipad)/)) { return(true); } return(false); } function pwaIsInstalledIOS() { // // Checks if a PWA is installed on an iOS device. if( pwaPlatformIOS() && (('standalone' in navigator) && navigator.standalone) ) { return(true); } return(false); } function pwaPlatformAndroid() { // // Checks if the PWA was called in a browser under Android. if(navigator.userAgent.toLowerCase().match(/android/)) { return(true); } return(false); } function pwaIsInstalledAndroid() { // // Checks if the PWA is installed on an Android device // by reading the manifest's display-mode. if (pwaPlatformAndroid() && window.matchMedia('(display-mode: fullscreen)').matches) { return(true); } return(false); } function pwaPlatformPWA() { // // Checks, if the app is a PWA or a native app. // This is useful when you compile the same source for different platforms. // Only native apps contain these strings in their path. // Returns true, if the app is not a native app. // Works for apps on iOS, Android and Electron // if(location.pathname.match(/(android_asset|\.app|app\.asar)/)) { return(false); } return(true); } Save to file pwa-support.js and add this file to Script via AB File Manager.

Thanks - these lines were just an ripped off example :-)

Thanks!

I used a custom JS function in the Function Manager instead with

if(pwaPlatformPWA()) { window.App.RootScope.isPWA = "true" }

But in fact it is good to know both ways for max. flexibility.