Rieccomi,
per poter abbinare un immagine ad un bottone c’ da fare qualcosa in particolare ?
Credevo avesse una propriet background.
Voi come fate ?
Usate canvas ?
Grazie
We do not have the possibility to assign an image to a button in the web edition. Some people use a canvas,
I prefer using an Imageview. With the Imageview, I use the MouseDown event to manage mouse clicks. I use styles to mimic the 3d appearance of a button.
OK.
Thank’s
Puoi anche utilizzare le icone fatte con i font.
Fai caricare dalla app il font, crei una classe per i tuoi pulsanti (lato Xojo), aggiungi una modifica per utilizzare il font sul web con javascript, e poi scrivi il carattere che vuoi mostrare. Il risultato che pesa 0 (non ci sono immagini)
Grazie Antonio.
Mi piacerebbe vedere un tutorial su quanto dici, secondo me non vale la candela , fare tutto questo solo per avere dei bottoni con immagine, per ora uso Imageview, anche se non mi piace come soluzione, la mia idea (ma non ora, sono ancora alle prime armi con xojo) e creare un plugin che sfrutta html,css.
Seguir qualche guida, comunque mi farebbe piacere vedere qualcosa sul discorso delle icone fatte con i font, hai qualche link ?
Grazie
Appena ho un attimo ne preparo uno.
Versione semplice semplice.
Usiamo una label come pulsante.
Definisci su Xojo uno stile stTextBtn (se vuoi anche vuoto o con i parametri che vuoi, come colore, hover, shadow etc. Ma non font, inutile per il nostro scopo)
A livello di app inserisci nell’HTML header dell’inspector:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.stTextBtn {font-family: FontAwesome;cursor:pointer !important}
</style>in questo modo chi avr come classe .stTextBtn utilizzer come font FontAwesome e avr la mano come cursore)
Inserisci una label sulla pagina, imposta la classe a stTextBtn, usa l’evento mouseup per il tuo evento
Nell’evento open della label:
me.Text=text.FromUnicodeCodepoint()
Puoi ovviamente crearti un modulo, ad esempio FontAwesome, con una enumerazione che ha tutti i caratteri (codici) e un metodo
Protected Function getTextIcon(icon as fontAwesome.chars) As Text
Return Text.FromUnicodeCodepoint(integer(icon))
End Function
dove fontAwesome.chars l’enumerazione.
In questo modo ad esempio nell’open (o dove devi cambiare l’icona) scrivi semplicemente ad esempio:
me.text= FontAwesome.getTextIcon(fontAwesome.chars.check)
Va da se che se vuoi stili diversi (stTxtBtnBig ad esempio) lo stile da aggiungere sar:
.stTextBtn, .stTxtBtnBig {font-family: FontAwesome;cursor:pointer !important}
Grazie @Antonio Rinaldi ! Ci stavo provando da un po’ a implementare FontAwesome ma senza risultati apprezzabili !
Il modulo certamente l’approccio pi completo anche per avere a disposizione tutte le icone.
#tag Module
Protected Module fontAwesome
#tag Method, Flags = &h1
Protected Function getTextIcon(icon as fontAwesome.chars) As Text
Return Text.FromUnicodeCodepoint(integer(icon))
End Function
#tag EndMethod
#tag Enum, Name = chars, Type = Integer, Flags = &h0
glass=61440
music
search
envelope_o
heart
star
star_o
user
film
th_large
th
th_list
check
close
plus
minus
power_off
signal
gear
#tag EndEnum
#tag ViewBehavior
#tag ViewProperty
Name="Index"
Visible=true
Group="ID"
InitialValue="-2147483648"
Type="Integer"
#tag EndViewProperty
#tag ViewProperty
Name="Left"
Visible=true
Group="Position"
InitialValue="0"
Type="Integer"
#tag EndViewProperty
#tag ViewProperty
Name="Name"
Visible=true
Group="ID"
Type="String"
#tag EndViewProperty
#tag ViewProperty
Name="Super"
Visible=true
Group="ID"
Type="String"
#tag EndViewProperty
#tag ViewProperty
Name="Top"
Visible=true
Group="Position"
InitialValue="0"
Type="Integer"
#tag EndViewProperty
#tag EndViewBehavior
End Module
#tag EndModule
Prendendo il css e proseguendo in sequenza con i nomi si pu completare velocemente la lista
Utilizzo un metodo simile (un po’ più complesso) per le toolbar
Grazie Antonio.
Provo subito ad implementarlo.
Per approfondire, e capire bene il funzionamento posto questi due link:
Certamente puoi usare anche un css più sofisticato (come appunto faccio con la toolbar) e usare :before o :after e content
(questi sono gli standard dell’HTML5 non il data-icon come dice l’articolo… ovvero come content puoi usare attr(data-____) che preferisci)
In questo modo ad esempio puoi mettere un’icona prima di un testo e questo anche un un pulsante. Il problema con Xojo è che vai ad interagire con il modo in cui viene creata la porzione html relativa all’oggetto. Come è stato più volte detto ora ha questa struttura, ma non è detto che possa cambiare. Quindi lavorare in qualche modo con il codice generato è possibile, ma con la consapevolezza che se cambia bisognerà cambiare anche quello che si è utilizzato per personalizzarlo.
Sempre in riferimento al secondo link: non utilizzare font che hanno simboli al posto dei caratteri. Sempre meglio utilizzare font che mettono questi caratteri speciali nell’apposita sezione dell’UTF (come fontAwesome o i font che puoi creare partendo dall’svg con icomoon)
Grazie!!
Perfetto.
Ho appena fatto quello che mi hai consigliato, stato semplicissimo, ora devo recuperare i codici.
Se a qualcuno serve giro il progetto.
poi lasciate giu degli esempi, potrebbero servire a molti
grazie Luigi, bell’esempio
Grazie anche a Antonio Rinaldi.
Luigi, possibile utilizzare la dimensione del carattere 2X, 3X?
Si e no.
Nel senso che in Xojo allo stato attuale le dimensioni degli oggetti sono assolute e non relative. Per cui devi definire l’altezza dell’oggetto in modo compatibile. Poi puoi usare (nei limiti direttamente, con qualche “suggerimento” nel css) tutte (o quasi) le opzioni di Font Awesome (ad esempio)