Need suggestion on developing a custom component

[Alexander Sviridenkov 357]

@wuwuxin Yes, code is quite simple

in Delphi: uses htfontawesome, htdefscriptadapter.

HTML:

 

<style>
 body {background: white}
 table {background: #eeeeff; border-collapse: collapse}
 td {padding: 5px}
 .value {border: solid #ddd 1px; background: white; resize: horizontal}
 input {border: solid transparent 1px}
 .left {width: 10px; padding-top: 5px}
 .hidden {display: none}

</style>

<script type="passcript">
procedure Expand(Section);
begin
  $('#'+Section).toggleClass('hidden');
  this.toggleClass('fa-minus');
  this.toggleClass('fa-plus');
end;
</script>

<table width="500">
<tr>
 <td class="left" ><i onclick="expand('1')" class="fas fa-minus"></i></td>
 <td class="title" colspan="2">ID Settings</td>
</tr>
<tr id="1">
 <td class="left"></td>
 <td class="value" width="200">Name</td>
 <td class="value"><input type="text" value="Bill Smith"/></td>
</tr>
<tr id="1">
 <td class="left"></td>
 <td class="value">Address</td>
 <td class="value"><input type="text" value=""/></td>
</tr>
<tr id="1">
 <td class="left"></td>
 <td class="value">Birthday</td>
 <td class="value"><input type="date" value="01.01.1998"/></td>
</tr>

<tr>
 <td class="left" ><i onclick="expand('2')" class="fas fa-minus"></i></td>
 <td class="title" colspan="2">Marketing Settings</td>
</tr>
<tr id="2">
 <td class="left"></td>
 <td class="value">Email</td>
 <td class="value"><input type="text" value="bill@gmail.com"/></td>
</tr>
<tr id="2">
 <td class="left"></td>
 <td class="value">FrequentBuyer</td>
 <td class="value"><input type="checkbox"/></td>
</tr>

</table>

 

[wuwuxin 28]

15 minutes ago, Alexander Sviridenkov said:

code is quite simple

I must say - in Magician's eyes,  everything is simple.   This is really cool, and opens a door for much creativity.

 

Thank you again!  

[Guest]

@Alexander Sviridenkov Thank you.

 

Here few things i am missing, can be worked around using script function but this will make altering and changing the design very time consuming

1) Focus and losing it in all kind input boxes, this in particular very helpful with the editor also.

2) KeyDown, KeyPress or OnChange in input boxes, so we can evaluate the input, on element level.

3) DoubleClicking on element level.

4) CanResize on resizable elements, by resizable i mean any element without fixed width/height, this is not sure about as it is tricky, i want to selectively limit sizes when the panel and its parent resize itself, not sure how damaging this might be to drawing and flickering.

5) Scrolling events in scrollable elements.

These comes to mid now.

 

HtRegisterElementClass is amazing way and it is somehow easy, but for the some of the above events it is not possible or complicate things too much, while having them triggered in the parent component (htPanel) will be way more easier and clearer in code, where no need to be too much concern about adding script function to handle these events, see, one can either add a function per tag (id...) or one can use generic function to trigger Delphi function on wide range of elements, the first solution is too much code per element that need to be maintained and the second approach is literally an event on them all.

Also take as an example TInputElement, there is OnEnter, OnExit, OnMouseMove and OnChange, but we can't override them and even if we did, no one except you can make them work right, in case lets say cancel change or auto suggest its content.

 

Another example, in your Object Inspector, with script it is fairly complicated for starter, funny though it is pascal !, and for someone already know it might be working and easy but will get complicated if lets say i want to do DB query then fill, or even simpler i want to add the row counts but from Delphi code, here i can use HtPanelElementClick, checking against clickable element is easy, but and here is big but, the same example by using "i" tag then toggling hidden class for different element is way more code, it is easier to check against the header then then find then hide, also "i" tag is not reported in ElementClick event !

 

On side note what on earth is "section" and where did it come from ?! googled and just read about it, now i know what it is, but is there a way to access it from TElement ?

 

Any way, my suggestions is not full UI designer, many IDE's and platforms doesn't have one and they prospering, what i want or what we need is to close the gap between what do we see and what we can control, more simplified control with less scripting, or scripts that are auto managed by your components, scripts are great and you are doing wonderful work but they can not replace our logic of Pascal coding, we are Delphi developers after all.

 

Really thank you Alexander for this great library.

 

[Guest]

Please ignore my text about "section", that was a mistake and confusion.

 

See that what i was talking about the confusion in pascal script and pascal code, i went after the HTML "section" tag and missed the script function parameter after i pasted your HTML and deleted the script to make it work using the click event.

[Rollo62 536]

@Alexander Sviridenkov

Thanks for that great library too, from my side.

For custom design you should also mention that SVG support is great, and all in all it offers many ways for incredible user interfaces.

 

Since the library is somewhat between HTML1.1 and HTML5, I would like to know when you think that

you followed up HTML5 CSS3 completely ?

My favorite would be the CSS Grids, which could make a lot of other stuff obsolete, but there is a lot more in HTML5.

Do you have a "compatibility list", or kind of "CanIUse", for the current library ?

I think that could be very helpful for people who want to mix HTML5 and Delphi.

 

 

[Alexander Sviridenkov 357]

@Rollo62 thank you. Supported CSS properties for last version are listed there

https://delphihtmlcomponents.com/css3.html

 

For any version this list can be obtained by calling THtDocument.SupportedCSSProperties function

 

CSS grids are not supported, but flex is supported since 4.4

 

[Rollo62 536]

@Alexander Sviridenkov Thanks, thats a great help.

Do you also have a similar page for the supported HTML5 features ?