Styled Components (Buttons, Toolbars, TaskDialog)

Questa collezione di componenti grafici (Pulsanti, ToolBar e TaskDialog) sono molto utili per modernizzare l’aspetto dell’interfaccia utente delle applicazioni Delphi VCL.

Con questi componenti è possibile superare i limiti imposti dai pulsanti “classici” (TButton e TBitBtn) di Delphi che non possono essere molto personalizzabili, né come attributi (colori, bordi, font, ecc…) ne come forma (quadrati, arrotondati, circolari, ecc…).

Il progetto è disponibile Open-Source su Git-Hub a questo indirizzo:

https://github.com/EtheaDev/StyledComponents

Le versioni Delphi/VCL supportate sono a partire da Delphi XE6 fino all’ultima versione Delphi disponibile e sfrutta GDI+ per il rendering dei pulsanti. 

In questa immagine è possibile vedere un esempio di utilizzo dei nuovi pulsanti “StyledButton” con uno stile grafico che ricorda quello di Angular e le forme diverse (Basic, Raised, Stroked, Flat, Icon, FAB).

 

Elenco dei componenti

TStyledGraphicButton è un pulsante grafico “puro” con stili (es. Classic, Bootstrap, Angular, Basic-Color, SVG-Color) con supporto di ImageList, Action e configurazione completa di cinque stati: Normal, Hot, Focused, Down e Disabled. Può essere usato anche nel componente TVirtualList.

TStyledButton eredita da TStyledGraphicButton e aggiunge il supporto per focus e TabStop al pulsante. E’ il perfetto sostituto al TButton o TBitButton di Delphi, superandone tutti i limiti grafici.

TStyledToolbar è una Toolbar che utilizza StyledToolButton, con la possibilità di personalizzare lo stile di ogni pulsante contenuto in essa e il pieno controllo sulla dimensione dei pulsanti, anche quando sono visibili le “Caption”.

TStyledTaskDialog è uno speciale componente “TaskDialog” con Caption e icone dei pulsanti personalizzabili. Usando Skia4Delpghi è possibile anche mostrare finestre di “dialog” con animazioni!

  • Il progetto è rilasciato con licenza open-source Apache 2.0
  • Direttamente sul progetto Git-Hub è possibile segnalare problemi nella sezione “issue”: verranno prontamente presi in carico e risolti.

Descrizione di StyledButton

TStyledGraphicButton, TStyledButton sono progettati per espandere gli stili dell’interfaccia utente dei pulsanti per superare i limiti dei classici TButton e TBitBtn forniti in Delphi.

Gli stili dei pulsanti definiti non sono influenzati da VCLStyles e sono visibili anche su un’applicazione Windows “non stilizzata”, quindi puoi avere più di un singolo pulsante stilizzato anche utilizzando VCLStyles. Puoi costruire pulsanti rettangolari o arrotondati o ellissi/cerchio come preferisci.

utilizzando solo tre elementi puoi configurare il tuo Button in modo molto semplice: basta impostare: StyleFamily, StyleClass e StyleAppearance.

Editor di componenti per TStyledGraphicButton e StyledButton

Per semplificare l’uso dei pulsanti con stile, è disponibile un utile “Editor dei componenti” per selezionare tre valori che definiscono lo stile del pulsante:

  • StyleFamily: l’attributo principale per Styled Button
  • StyleClass: una raccolta di stili di pulsanti predefiniti
  • StyleAppearance: ad es. Normale o Contorno

Elenco delle StyleFamily disponibili:

 

  • Classic: una raccolta di stili simile a VCLStyled TButton
  • Bootstrap: una raccolta di stili simili ai pulsanti Bootstrap
  • Angular-Light: una raccolta di stili simili ai pulsanti Angular
  • Angular-Dark: una raccolta di stili simili ai pulsanti Angular
  • Basic-Color: una raccolta di stili basati sulla raccolta di colori “normale” e “System” di Delphi
  • SVG-Color: una raccolta di stili basata sulla raccolta di colori “AlphaColors” di Delphi

In questa immagine il Component Editor per selezionare gli stili “Boostrap”: Style Appearance sono Normal e Outline

Demo disponibili

All’interno del progetto sono presenti alcune Demo che mostrano in modo intuitivo il funzionamento dei componenti. Per vedere come è possibile definire i pulsanti con tutti i set “grafici” disponibili, utilizzare la Demo: StyledButtonsDemo

Documentazione

Sempre all’interno del progetto su Git-Hub c’è una ricca sezione nella “Wiki”:

https://github.com/EtheaDev/StyledComponents/wiki

 

Case studies

Ethea utilizza con successo questi componenti in una serie di progetti Delphi di upgrade tecnologico, oltre a fornirli con InstantSolutions Framework.

Contatti

Se vi serve supporto/consulenza per utilizzare questo componente nelle vostre applicazioni, contattateci tramite il form presente sul sito.