Jump to content
Sign in to follow this  
wuwuxin

Need suggestion on developing a custom component

Recommended Posts

@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>

 

prop.gif

  • Like 3

Share this post


Link to post
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!  

Share this post


Link to post
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.

 

Share this post


Link to post
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.

Share this post


Link to post

@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.

 

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×