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, TBitBtn, TSpeedButton) 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”.

TStyledDbNavigator è uno componente speciale “DbNavigator”, con stili (es. Classic, Bootstrap, Angular, Basic-Color, SVG-Color), oltre alla possibilità di avere le Caption sui titoli e le icone per i pulsanti di movimento quando si usa in verticale.

TStyledBindNavigator è uno componente speciale “BindNavigator”, con stili (es. Classic, Bootstrap, Angular, Basic-Color, SVG-Color), oltre alla possibilità di avere le Caption sui titoli e le icone per i pulsanti di movimento quando si usa in verticale.

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

TStyledSpeedButton deriva da TStyledGraphicButton e introduce le proprietà Layout, Margin e Spacing, per controllare il Disegno (Icona e Testo) come un TSpeedButton standard. E’ possibile anche usare Glyph e NumGlyphs.

TStyledBitButton deriva da TStyledButton e introduce le proprietà Layout, Margin e Spacing, per controllare il Disegno (Icona e Testo) come un TSpeedButton standard. E’ possibile anche usare Glyph e NumGlyphs.

  • 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 pulsanti della VCL (TButton, TBitBtn, TSpeedButton) 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.