Differenze tra le versioni di "Disegnare un Button contenente un'icona e un testo mediante la DrawingArea"

Da Gambas-it.org - Wikipedia.
 
(Una versione intermedia di uno stesso utente non è mostrata)
Riga 10: Riga 10:
 
   
 
   
 
   
 
   
−
  '''Public''' Sub Form_Open()
+
  Public Sub Form_Open()
 
    
 
    
−
   With da = New DrawingArea(Me) As "<FONT Color=#B22222>DrawingArea1</font>"
+
   With da = New DrawingArea(Me) As "<FONT Color=red>DrawingArea1</font>"
 
     .X = 200
 
     .X = 200
 
     .Y = 200
 
     .Y = 200
Riga 19: Riga 19:
 
   End With
 
   End With
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Public''' Sub DrawingArea1_Draw()
+
  Public Sub DrawingArea1_Draw()
 
    
 
    
 
   Dim pc As Picture
 
   Dim pc As Picture
Riga 31: Riga 31:
 
   
 
   
 
  <FONT Color=gray>' ''I valori del 3° e del 4° argomento del Metodo "Style.PaintButton()" devono essere uguali alle dimensioni della "DrawingArea" ove il "Button" sarà disegnato:''</font>
 
  <FONT Color=gray>' ''I valori del 3° e del 4° argomento del Metodo "Style.PaintButton()" devono essere uguali alle dimensioni della "DrawingArea" ove il "Button" sarà disegnato:''</font>
−
   <FONT Color=#B22222>Style.PaintButton</font>(0, 0, da.W, da.H, bo, 0, False)
+
   <FONT Color=red>Style.PaintButton</font>(0, 0, da.W, da.H, bo, 0, False)
 
   
 
   
−
   With <FONT Color=#B22222>Paint</font>
+
   With <FONT Color=red>Paint</font>
 
     .DrawPicture(pc, (.W - pc.W) / 2, 10)
 
     .DrawPicture(pc, (.W - pc.W) / 2, 10)
 
     .DrawText(testo, (.W - .Font.TextWidth(testo)) / 2, 50)
 
     .DrawText(testo, (.W - .Font.TextWidth(testo)) / 2, 50)
Riga 40: Riga 40:
 
   bo = Not bo
 
   bo = Not bo
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
−
  '''Public''' Sub <FONT Color=#B22222>DrawingArea1_MouseDown()</font>
+
   
 +
Public Sub <FONT Color=red>DrawingArea1_MouseDown()</font>
 
    
 
    
 
   Me.Text = "Tasto premuto"
 
   Me.Text = "Tasto premuto"
Riga 48: Riga 49:
 
   da.Refresh
 
   da.Refresh
 
    
 
    
−
  '''End'''
+
  End
 +
 
   
 
   
−
  '''Public''' Sub <FONT Color=#B22222>DrawingArea1_MouseUp()</font>
+
  Public Sub <FONT Color=red>DrawingArea1_MouseUp()</font>
 
      
 
      
 
   Me.Text = "Tasto rilasciato"
 
   Me.Text = "Tasto rilasciato"
Riga 56: Riga 58:
 
   da.Refresh
 
   da.Refresh
 
    
 
    
−
  '''End'''
+
  End
  
  
−
==Uso del Metodo ''.PaintButton( )'' della Classe ''Style'' e di un'apposita Classe per creare alcuni tasti sul ''Form''==
+
==Uso del Metodo ".PaintButton()" della Classe ''Style'' e di un'apposita Classe per creare alcuni tasti sul ''Form''==
−
Questo esempio <SUP>[ [[#Note|Nota 1]] ]</sup>, è analogo a quello precedente, ma viene utilizzata anche un'apposita Classe specifica, chiamata ''SquareButton.class'', per creare alcuni tasti sul ''Form'' e che sarà la seguente:
+
Questo esempio <SUP>[ [[#Note|nota 1]] ]</sup>, è analogo a quello precedente, ma viene utilizzata anche un'apposita Classe specifica, chiamata ''SquareButton.class'', per creare alcuni tasti sul ''Form'' e che sarà la seguente:
 
   
 
   
 
  Export
 
  Export
Riga 82: Riga 84:
 
    
 
    
 
    
 
    
−
  '''Public''' Sub _new()
+
  Public Sub _new()
 
    
 
    
−
  $hDA = New DrawingArea(Me) As "da"   
+
  $hDA = New DrawingArea(Me) As "da"   
−
  Me.Proxy = $hDA   
+
  Me.Proxy = $hDA   
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Private''' Function Picture_Read() As Picture
+
  Private Function Picture_Read() As Picture
 
    
 
    
−
  Return $hPicture
+
  Return $hPicture
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Private''' Sub Picture_Write(Value As Picture)
+
  Private Sub Picture_Write(Value As Picture)
 
    
 
    
−
  $hPicture = Value
+
  $hPicture = Value
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Private''' Function Text_Read() As String
+
  Private Function Text_Read() As String
 
    
 
    
−
  Return $sText
+
  Return $sText
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Private''' Sub Text_Write(Value As String)
+
  Private Sub Text_Write(Value As String)
 
    
 
    
−
  $sText = Value
+
  $sText = Value
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Public''' Sub da_Draw()
+
  Public Sub da_Draw()
 
    
 
    
−
  Dim hImage As New Image
+
  Dim hImage As New Image
−
  Dim iFlag As Integer = Style.StateOf(Me)
+
  Dim iFlag As Integer = Style.StateOf(Me)
 
    
 
    
 
   If Me.W > Me.H Then
 
   If Me.W > Me.H Then
Riga 143: Riga 145:
 
   Endif
 
   Endif
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Public''' Sub da_MouseDown()
+
  Public Sub da_MouseDown()
 
      
 
      
 
   $bState = True
 
   $bState = True
 
   $hDA.Refresh     
 
   $hDA.Refresh     
 
   Raise Click
 
   Raise Click
−
 
+
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Public''' Sub da_MouseUp()
+
  Public Sub da_MouseUp()
 
      
 
      
 
   $bState = False
 
   $bState = False
 
   $hDA.Refresh
 
   $hDA.Refresh
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Public''' Sub da_Enter()
+
  Public Sub da_Enter()
 
    
 
    
 
   $hDA.Refresh
 
   $hDA.Refresh
 
    
 
    
−
  '''End'''
+
  End
 
    
 
    
 
    
 
    
−
  '''Public''' Sub da_Leave()
+
  Public Sub da_Leave()
 
    
 
    
 
   $hDA.Refresh
 
   $hDA.Refresh
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Public''' Sub da_GotFocus()
+
  Public Sub da_GotFocus()
 
    
 
    
 
   $hDA.Refresh
 
   $hDA.Refresh
 
    
 
    
−
  '''End'''
+
  End
 
   
 
   
 
   
 
   
−
  '''Public''' Sub da_LostFocus()
+
  Public Sub da_LostFocus()
 
    
 
    
 
   $hDA.Refresh
 
   $hDA.Refresh
 
      
 
      
−
  '''End'''
+
  End
 
Tale codice genera nella casella degli oggetti dell'IDE un nuovo ''widget'', chiamato ''SquareButton''.
 
Tale codice genera nella casella degli oggetti dell'IDE un nuovo ''widget'', chiamato ''SquareButton''.
 
   '''Nota''': Se non appare il nuovo componente provare ad agire sul menu Progetto > Compila tutto
 
   '''Nota''': Se non appare il nuovo componente provare ad agire sul menu Progetto > Compila tutto
Riga 195: Riga 197:
 
Il codice presente nella Classe principale ''FMain.class'' sarà, invece, il seguente:
 
Il codice presente nella Classe principale ''FMain.class'' sarà, invece, il seguente:
  
−
   '''Public''' Sub Form_Open()
+
   Public Sub Form_Open()
 
    
 
    
 
     Dim hSpring As Spring
 
     Dim hSpring As Spring
Riga 222: Riga 224:
 
     End With
 
     End With
 
    
 
    
−
   '''End'''
+
   End
 
   
 
   
−
   '''Public''' Sub Button1_Click()
+
    
 +
Public Sub Button1_Click()
 
    
 
    
 
     Print "Hai premuto il pulsante Print"
 
     Print "Hai premuto il pulsante Print"
 
    
 
    
−
   '''End'''
+
   End
 
    
 
    
−
   '''Public''' Sub Button2_Click()
+
    
 +
Public Sub Button2_Click()
 
    
 
    
 
     Print "Hai premuto il pulsante con il Testo Tre righe"
 
     Print "Hai premuto il pulsante con il Testo Tre righe"
 
    
 
    
−
   '''End'''
+
   End
−
 
 
 
Avviando il programma la finestra dovrebbe mostrare due pulsanti SquareButton, provare ad agire su di essi per mostrare le scritte in console.  
 
Avviando il programma la finestra dovrebbe mostrare due pulsanti SquareButton, provare ad agire su di essi per mostrare le scritte in console.  
  
 
=Note=
 
=Note=
 
[1] Il codice è stato scritto dal membro [http://www.gambas-it.org/smf/index.php?action=profile;u=1249 Gianluigi] del forum www.gambas-it.org .
 
[1] Il codice è stato scritto dal membro [http://www.gambas-it.org/smf/index.php?action=profile;u=1249 Gianluigi] del forum www.gambas-it.org .

Versione attuale delle 11:55, 27 giu 2024

Molte volte si ha la necessità di posizionare immagine e testo al centro - o in altre posizioni - in un Button. Non è possibile, però, ottenere questo effetto con le risorse della Classe Button. Gambas consente tale possibilità, che mostriamo di seguito, utilizzando come base una DrawingArea e il Metodo ".PaintButton()" della Classe "Style".
Ovviamente gli Eventi disponibili, da usare per il "Button" disegnato nell'apposita "DrawingArea", sono quelli previsti per tale medesima "DrawingArea".

Uso del Metodo ".PaintButton()" della Classe "Style" e della Classe "Paint"

Questa modalità prevede all'interno dell'Evento "_Draw()" della "DrawingArea" (ove sarà disegnato il "Button") l'uso del Metodo ".PaintButton()" della Classe "Style" per disegnare il "Button", nonché la Classe "Paint" per scrivere dentro il "Button" o farvi apparire una immagine.

Mostriamo un semplice esempio: 

Private da As DrawingArea
Private bo As Boolean


Public Sub Form_Open()
 
 With da = New DrawingArea(Me) As "DrawingArea1"
   .X = 200
   .Y = 200
   .W = 100
   .H = 80
 End With
  
End


Public Sub DrawingArea1_Draw()
 
 Dim pc As Picture
 Dim testo As String
 
 pc = Stock["32/monitor"]
 testo = "Testo qualsiasi"

' I valori del 3° e del 4° argomento del Metodo "Style.PaintButton()" devono essere uguali alle dimensioni della "DrawingArea" ove il "Button" sarà disegnato:
 Style.PaintButton(0, 0, da.W, da.H, bo, 0, False)

 With Paint
   .DrawPicture(pc, (.W - pc.W) / 2, 10)
   .DrawText(testo, (.W - .Font.TextWidth(testo)) / 2, 50)
 End With
 
 bo = Not bo
 
End


Public Sub DrawingArea1_MouseDown()
  
 Me.Text = "Tasto premuto"
   
 da.Refresh
  
End


Public Sub DrawingArea1_MouseUp()
   
 Me.Text = "Tasto rilasciato"
 
 da.Refresh
  
End


Uso del Metodo ".PaintButton()" della Classe Style e di un'apposita Classe per creare alcuni tasti sul Form

Questo esempio [ nota 1 ], è analogo a quello precedente, ma viene utilizzata anche un'apposita Classe specifica, chiamata SquareButton.class, per creare alcuni tasti sul Form e che sarà la seguente: 

Export

Inherits UserControl

Public Const _Properties As String = "*,Text,Picture"
Public Const _DefaultEvent As String = "Click"
Public Const _DefaultSize As String = "8,8"
Public Const _Similar As String = "Button"

Event Click

Property Picture As Picture
Property Text As String

Private $hPicture As Picture
Private $sText As String
Private $hDA As DrawingArea
Private $bState As Boolean
 
 
Public Sub _new()
 
  $hDA = New DrawingArea(Me) As "da"  
  Me.Proxy = $hDA  
 
End


Private Function Picture_Read() As Picture
 
  Return $hPicture
  
End


Private Sub Picture_Write(Value As Picture)
 
  $hPicture = Value
 
End


Private Function Text_Read() As String
 
  Return $sText
 
End


Private Sub Text_Write(Value As String)
 
  $sText = Value
 
End


Public Sub da_Draw()
 
  Dim hImage As New Image
  Dim iFlag As Integer = Style.StateOf(Me)
 
  If Me.W > Me.H Then
    Me.H = Me.W
  Else
    Me.W = Me.H
  Endif
  
  Style.PaintButton(0, 0, $hDA.W, $hDA.H, $bState, iFlag, False)
   
  If $hPicture Then
    hImage = $hPicture.Image.Stretch(Me.W / 2, Me.H / 2)
    If $sText Then      
      Paint.DrawImage(hImage, (Me.W - hImage.W) / 2, (Me.H / 2) - (hImage.H - (Desktop.Scale)))
      Paint.DrawRichText(Html($sText), 0, 0, Me.W, Me.H + (Me.H / 2), Align.Center)
    Else      
      Paint.DrawImage(hImage, (Me.W - hImage.W) / 2, (Me.H - hImage.H) / 2)
    Endif  
  Else
    Paint.DrawRichText(Html($sText), 0, 0, Me.W, Me.H, Align.Center)
  Endif
  
End


Public Sub da_MouseDown()
   
  $bState = True
  $hDA.Refresh    
  Raise Click

End


Public Sub da_MouseUp()
   
  $bState = False
  $hDA.Refresh
  
End


Public Sub da_Enter()
 
  $hDA.Refresh
  
End
 
 
Public Sub da_Leave()
 
  $hDA.Refresh
  
End


Public Sub da_GotFocus()
 
  $hDA.Refresh
  
End


Public Sub da_LostFocus()
 
  $hDA.Refresh
   
End

Tale codice genera nella casella degli oggetti dell'IDE un nuovo widget, chiamato SquareButton. 

 Nota: Se non appare il nuovo componente provare ad agire sul menu Progetto > Compila tutto


Il codice presente nella Classe principale FMain.class sarà, invece, il seguente: 

 Public Sub Form_Open()
 
   Dim hSpring As Spring
   Dim hPan As HBox
   Dim hButton As SquareButton
   
   Me.Arrangement = Arrange.Vertical
   Me.Margin = True
   hSpring = New Spring(Me)
   hPan = New HBox(Me)
   hPan.H = 64
   hPan.Spacing = True  
   hSpring = New Spring(hPan)
   hButton = New SquareButton(hPan) As "Button1"
   With hButton
     .Font = Font["Arial,12,Bold"]
     .Foreground = Color.Green
     .Text = "Print"
     .Picture = Picture["icon:/64/printer"]
   End With
   hButton = New SquareButton(hPan) As "Button2"
   With hButton
     .Font = Font["Arial,12,Bold"]
     .Foreground = Color.DarkMagenta
     .Text = "Testo   Tre   Righe"
   End With
 
 End

 
Public Sub Button1_Click()
 
   Print "Hai premuto il pulsante Print"
 
 End
 
 
Public Sub Button2_Click()
 
   Print "Hai premuto il pulsante con il Testo Tre righe"
 
 End

Avviando il programma la finestra dovrebbe mostrare due pulsanti SquareButton, provare ad agire su di essi per mostrare le scritte in console.

Note

[1] Il codice è stato scritto dal membro Gianluigi del forum www.gambas-it.org .

Estratto da "https://www.gambas-it.org/wiki/index.php?title=Disegnare_un_Button_contenente_un%27icona_e_un_testo_mediante_la_DrawingArea&oldid=37569"