Menu che si espandono

Oggi vediamo come fare dei menu personalizzati che si espandono.
Negli esempi a seguire userò solo dei pulsanti, ma potete merrci dentro qualsiasi combinazione di oggetti.

Cominciamo dalla fine e vediamo cosa cerchiamo di ottenere:

 Per realizzarlo useremo un sacco di gruppi, ecco la struttura che creeremo:

Prima di tutto create un pulsante e chiamatelo main, poi un altro pulsante e chiamatelo +. Ridimensionateli per ottenere questo:

Ora nel pulsante + mettete questo codice:

on mouseUp
   if the label of me is "+" then
      showMe
      set the label of me to "-"
   else
      hideMe
      set the label of me to "+"
   end if
end mouseUp



Raggruppate i due pulsanti insieme e chiamate il gruppo Main.
Ora create un altro pulsante e chiamatelo slider, ridimensionatelo e mettetelo sotto Main in questo modo:

Ora cliccate sul pulsante Slider e fatelo gruppo (si solo del pulsante slider) e chiamate il gruppo Slider.
Adesso raggruppate insieme il gruppo slider col gruppo Main e chiamatelo element 1.
Impostate la proprietà lockLocation del gruppo "element 1" su true.
Mettete questo codice nel gruppo element 1:

on showMe
   repeat while the top of group "Slider" of me < the bottom of group "Main" me - 4
      lock screen
      set the bottom of group "Slider" of me to the bottom of group "Slider" me + 4
      set the height of me to the height of me + 4
      layoutChanged the short name of me, 4
      unlock screen
      wait 10 milliseconds with messages
   end repeat
end showMe

on hideMe
   repeat while the bottom of group "Slider" of me > the bottom of group "Main" of me
      lock screen
      set the bottom of group "Slider" of me to the bottom of group "Slider" of me - 4
      set the height of me to the height of me - 4
      layoutChanged the short name of me, -4
      unlock screen
      wait 10 milliseconds with messages
   end repeat
end hideMe



Clonate il gruppo "element 1" 5 volte, per esempio. Numerati correttamente.
Mettete ogni clone sotto l'elemento precedente, ad esempio il 2 sotto l'uno e così via.
Raggruppateli e chiamate il gruppo List.
Impostate la proprietà lockLocation del gruppo List su true.
Mettete questo codice nel gruppo List:

on layoutChanged pGroup, pSize
   lock messages
   
   local tElementCount
   
   if pGroup is "Element Template" then exit layoutChanged
   
   put word 2 of pGroup into tElementCount
   add 1 to tElementCount -- look for the next one
   repeat while there is a group ("Element" && tElementCount)   
      set the top of group ("Element" && tElementCount) to the top of group ("ElemenT" && tElementCount) + pSize--
      add 1 to tElementCount
   end repeat
   set the vscroll of me to the vscroll of me
   
   if the bottom of group pGroup of me > the bottom of me then
      set the scroll of me to the scroll of me + pSize
   end if
   set the vScrollBar of group "List" to the formattedHeight of group "List" > the height of group "List"
   set the vScroll of group "List" to the vScroll of group "List"
   unlock messages
end layoutChanged



FINITO!!!