Discussion :

[stf57]

Bonjour,
Après de longues années en PL/SQL-Forms et PHP, je viens de commencer in nouveau travail où la norme est Delphi. J'avais déjà eu l'occasion de débugger quelles sources, mais jamais de jouer à une interface et là je suis un peu pommé au milieu des composants.

Mon premier projet est de faire une application de checklist. J'en ai déjà partiellement codé une en PHP il y a quelques années, donc la partie logique et DB ne sont pas un problème, mais je ne sais pas comment m'y prendre pour le visuel.
Les checklists étant définies par paramétrage, avec des sections et sous-sections, la création de mon écran doit être dynamique.
J'ai testé ma logique via un treeview, ça passe, j'arrive à la structure voulue.


Mais le visuel que je souhaite reproduire est celui-là :

En gros, cliquer sur un élément (ligne bleu foncé) doit déployer la liste des points de détails à vérifier pour l'élément voulu.
Je sais le faire en PHP, mais je ne vois pas quel composant Delphi utiliser pour arriver au même résultat.
Je travaille pour le moment sur une version PC pour apprendre (composant VCL), mais comme à terme ce sera utiliser sur tablette, je peux (et probablement dois) passer sur FMX.

Pouvez-vous me dire si il est possible de faire ce genre d'interface en Delphi, et quels composants pourraient me permettre d'y parvenir ?
Merci d'avance pour votre aide.

PS: j'ai parcouru le guide du débutant avant de poster, rien vu qui m'aide dans mon cas pour le moment.
Par contre, j'ai un problème pour ouvrir la page 13 (Utilisation des fichiers, qui me servira plus tard). Elle me renvoie une erreur 403-Forbidden (You don't have permission to access this resource).
Ça ne fait ça que chez moi ? Si non, à qui je peux m'adresser pour signaler le problème ?

[ShaiLeTroll]

En VCL, TListView et Groups : https://docwiki.embarcadero.com/Code...roups_(Delphi) et si tu veux pousser le Style des groupes sur un vieux XE*, lire : THE ROAD TO DELPHI
En FMX, TListView encore mais c'est pas la même et avec les Apparences Dynamiques, il y a tellement de possibilité ...

[SergioMaster]

Bonsoir,

En VCL je dirais d'utiliser le composant tiers virtualtreeview qui permet plus de chose que le treeview classique , sinon le TLitView indiqué par ShaiLeTroll qui m'a grillé sur ce coup

pour obtenir quelquechose de comparable au visuel android je pense que FMX.TListBox est le plus adapté
avec un necessité, créer deux styles d'élements (cf mon tutoriel https://delphi.developpez.com/tutori...iremonkey-xe4/)

FMX.TListView pourrait faire l'affaire s'il s'agit de données pas évident pour ce qui est des cases à cocher ou l'expansion de d'éléments
S'inspirer de ce billet pour ce qui est des expansions et celui-ci pour ce qui serait des checkbox. A mon avis beaucoup plus délicat à réaliser qu'en utilisant TListbox et en jouant sur les styles.

en note :
- niveau TListBox il est possible d'utiliser des expanders et mettre des éléments dedans.
- une liste n'est qu'un TScrollBox (TVertScrollBox) dans lequel on peut mettre des frames.
- En parlant de Frame c'est très bien géré par des composants tiers https://github.com/andrea-magni/TFrameStand

Bref moultitudes de possiblités

[SergioMaster]

PS: j'ai parcouru le guide du débutant avant de poster, rien vu qui m'aide dans mon cas pour le moment.
Par contre, j'ai un problème pour ouvrir la page 13 (Utilisation des fichiers, qui me servira plus tard). Elle me renvoie une erreur 403-Forbidden (You don't have permission to access this resource).
Ça ne fait ça que chez moi ? Si non, à qui je peux m'adresser pour signaler le problème ?

un petit lien sur ce "guide du débutant" ?

[Paul TOTH]

Bonjour,

alors les réponses précédentes sont justes, mais personnellement j'utiliserais une autre approche, et pas la même en VCL qu'en FMX

sous VCL, pour ce genre de chose j'utilise tout simplement un TListBox, et je le bascule en OwnerDraw ce qui permet de dessiner soi-même chaque ligne.

sur DelphiTDS par exemple, l'interface utilise 2 TListBox...alors que ça ne saute pas aux yeux de prime abord.

la propriété Count fixe le nombre de ligne qui va varier selon quand on clique sur les lignes bleu foncé, et avec l'évènement OnDrawItem on peut définir ce qu'on veux (dans ton cas 5 colonnes contenant soit du texte, soit une image). Les images peuvent provenir d'une TImageList (ou VirtualImageList) et sur le Canvas avec quelque Rectangle() MoveTo()/LineTo(), TextRect() le tour est joué.

Sous FMX on a une autre approche possible car on peut placer n'importe quel composant à l'intérieur d'un autre, il est donc facile de définir une ligne par un TLayout contenant des TRectangle, TText et TGlyph par exemple...ça se rapprochera de la conception Web avec des DIV...et du coup il est facile de définir les OnClick qui vont bien en fonction des éléments présents.

j'ai un projet comme ça où j'utilise un TFrame pour définir une ligne de la liste, et je place des instances de ce TFrame tout simplement dans un TVerticalScrollBox qui me sert de liste

il est possible de faire la même chose avec des TListItem et des thèmes, mais en fait techniquement ça revient au même vu que les thèmes FMX sont des collections de composants au même titre que le TFrame que j'évoque...mais je trouve que l'éditeur de thème est moins pratique et plus limité que l'éditeur de fiche (ou Frame)..en plus il est possible de coller du code directement dans le TFrame pour manipuler les données alors que la mise à jour du thème est une gymnastique un peu plus sioux.

[Paul TOTH]

et pour compléter ma réponse FMX voici un exemple rapide

Demo.zip

j'ai juste oublié d'ajouté une rotation à 90° sur TMainFrame.Path1 du premier élément

[SergioMaster]

il est possible de faire la même chose avec des TListItem et des thèmes, mais en fait techniquement ça revient au même vu que les thèmes FMX sont des collections de composants au même titre que le TFrame que j'évoque...mais je trouve que l'éditeur de thème est moins pratique et plus limité que l'éditeur de fiche (ou Frame)..en plus il est possible de coller du code directement dans le TFrame pour manipuler les données alors que la mise à jour du thème est une gymnastique un peu plus sioux.

Tout à fait d'accord

[stf57]

Un immense merci à tous pour ces réponses rapides et précises, je vais tester tout ça de suite.

un petit lien sur ce "guide du débutant" ?

La page d'accueil du guide : https://fbeaulieu.developpez.com/guide/
Mais en testant à nouveau la page 13 pour récupérer son URL direct(https://fbeaulieu.developpez.com/gui...=page_13#LXIII), la page s'ouvre correctement maintenant.

[SergioMaster]

Bon alors on oublie.
Cela fait longtemps que je n'avais pas remis le nez sur ce tutoriel. (parlant de fichiers rien sur les SGBD)
Il y a quand même eu beaucoup de nouveautés depuis et je ne pense pas que FMX. Le livre (PDF) de Marco Cantù : Object Pascal Handbook (à prendre selon la version de Delphi utilisée) reste une référence pour avoir toutes les nouveautés prises en compte

[pprem]

Et puisque Serge aborde la question et que le livre de Marco est gratuit en numérique, voici le lien pour le télécharger : https://lp.embarcadero.com/Object-Pascal-Handbook-2021
Sinon une version papier est disponible sur Amazon pour ceux qui préfèrent ce format.

[stf57]

Encore merci pour votre aide, en m'inspirant de vos conseils/liens et de l'exemple de Paul pour les frames, je suis arrivé au résultat attendu.
Je galère encore avec l'expansion des sous-tâches, je ne trouve pas la bonne façon "d'encapsuler" tout ça par section, je vais tenter une autre approche demain avec un TreeView.
Si je ne m'en sors pas, ce sera le sujet d'un autre topic.

[SergioMaster]

Bonjour,

je vais tenter une autre approche demain avec un TreeView.

Qu'en serait-il d'une approche modification du style de Treeview ? Je suivrai avec intérêt une telle approche (en attendant le weekend pour faire mes propres expériences

[stf57]

Aucune idée de comment on modifie un style pour le moment.
Sinon, mon approche ressemble plus à un violent crash pour le moment, tester avec un TreeView puis avec des layouts (simple et scaled), j'arrive pas à grand chose.
C'est vraiment pas simple le démarrage en Delphi , première fois que je me sens aussi pommé.

[Paul TOTH]

alors pour les sous-tâches tu peux jouer tout simplement sur la hauteur du Frame parent avec un ClipChildren à True et tu peux le faire avec un TFloatAnimation pour que ce soit dynamique

on fait des chouettes choses avec TFloatAnimation
https://github.com/tothpaul/Firemonk...ster/CubeMan3D

[SergioMaster]

Aucune idée de comment on modifie un style pour le moment.

Un simple click droit sur le composant propose dans le menu de "modifier un style personnalisé" ou de "modifier le style par défaut".
Toutefois ma curiosité l'ayant emporté en fin de soirée, le style du TTreeView ne permet absolument pas ce que j'avais en tête. Donc, fausse "bonne idée".

Il y a évidemment des composants tiers qui pourraient correspondre au besoin. Je pense entre autres à ceux de TMS : TTMSTreeview et TTMSFNCTreeView , au FMX Virtual TreeView (non essayé)

Sinon la solution code est réalisable.
@Paul je n'ai jamais compris cette propriété : ClipChildren

[Paul TOTH]

@Paul je n'ai jamais compris cette propriété : ClipChildren

ah c'est simple, sous VCL un composant placé dans un autre sera forcément limité par le cadre de son parent. Sous FMX, par défaut, la relation parent/enfant n'est qu'une question de placement, le composant peut très bien déborder de son parent...on peut par exemple placer un TLabel dans un TEdit et le mettre "à côté"...si tu actives ClipChildren, tu retrouves le comportement VCL. Dans le cas de qui nous intéresse, pour masque les lignes détails, il suffit de réduire la hauteur du parent en activant ClipChildren pour que les enfants soient effectivement masqués.

ClipParent est plus subtile, si tu places un TRectangle transparent dans un TRectangle parent non transparent, l'enfant crée un trou qui laisse voir la fiche à travers le parent.

[SergioMaster]

Merci de tes éclaircissements.

Je me demandais comment cacher une partie de rectangle comme le faisait un TGroupbox. ClipParent y répond exactement.
toute la différence entre celui du haut (c'est le style qui fait le job, pas de notion d'épaisseur de trait, ça coince quand on change la taille de fonte)

et celui du bas ("titre" encore un peu mal placé mais c'est juste pour des besoins d'éclaircissement de mon propos).

Je me posais cette question dans le cadre de ma "tentative" de rédaction d'un tutoriel sur la création d'un composant FMX avec LiveBindings (TRadioGroupBox déjà évoqué dans d'autres discussions).
Je me demande si je ne vais pas inclure cette option (du moins en amélioration possible).
J'ai un futur projet d'étude, la création d'un composant en incluant le style mais c'est un autre débat et je diverge déjà trop du sujet d'origine si ce n'est que ce sujet me remet sur un truc que j'avais laissé de côté (Livebindings et Treeview, impossible ?)

[stf57]

Encore une fois un immense merci pour votre aide, j'ai finalement réussi à obtenir le résultat voulu, en englobant mes frames master/details dans un même panel, en utilisant ClipChildren et en ajoutant des variables d'instance pour mes panels afin de stocker les hauteurs à applique selon que les détails sont affichés ou non.
Il y a sans doute mieux à faire, mais ça fonctionne, pas de latence à la construction de la liste et c'est fluide à l'usage, donc c'est bon pour le moment.

Quand je vois le code final, je me rends compte que j'ai passé 4 jours pour un truc franchement simple, ça promet pour la suite

Bon week-end à tous, le mien sera meilleur après ça.

[SergioMaster]

j'ai finalement réussi à obtenir le résultat voulu

Quand je vois le code final, je me rends compte que j'ai passé 4 jours pour un truc franchement simple, ça promet pour la suite

Ce n'est qu'une question de pratique, une fois maitrisé la technique les temps de réalisation raccourciront