Rudy Digital Jockey :: Aka Ru.Di.J Music Style : Chillout - DeepHouse - Garage - House - Tech - Minimal - Minimal Deep - Techno Deep - Techno Minimal - Techno - Electro My Space Friends : http://www.myspace.com/rudydij Web : http://www.rudy.dj or http://www.rudydj.com MSN: rudy.dj@hotmail.it SKYPE : Ru.Di.J

Fri 26 Sep 08 @ 6:38 pm

::::::::::::::: LESSON 3 ::::::::::::::::::

Siamo arrivati quindi a scrivere la nostra prima linea di codice XML.
UNA PREMESSA sui termini che useremo: Parto dal più importante.

IL TAG
Ogni comando e/o i suoi parametri vengono chiusi tra Tag, e servono al programma per delimitare la funzioni associate a quel determinato parametro o comando. Ne esistono di vari tipologie.
Hanno un loro sintassi ben specifica nell'XML. Non rispettare questa sintassi genererebbe un errore e tutta la nostra skin non funzionerebbe.
Ogni tag va aperto e chiuso, sia che si tratti si un unica linea di un paramtro sia che si tratti di un tag che racchiude una serie di parametri comanadi.
Detto cosi è articolato, ma con il primo esempio sarà semplice capire. E per farlo uso ad esempio il BB CODE o il SINTAX HELP del forum di VDJ.
Supponiamo di voler creare un immagine con link associato da inserire nel nostro messaggio.



Come si puo vedere necessitiamo di due istruzioni, una per indicare 'URL dell immagine da visualizzare ed un altra per indicare al compilatore che cliccando su quell'immagine deve reindirizzarci ad un indirizzo specifico.



Nel caso del BBCODE i tag sono rappresentati racchiusi tra parentesi quadre. Come possiamo vedere abbiamo un primo tag di nome URL che vene aperto, al suo interno si dichiara l' indirizzo di destinazione in fase di click. Si apre poi un secondo tag che riguarda l'immagine, nel nostro caso l'indirizzo contenuto è quelle dell'inidizzo web in cui l'immagine si trova. A questo punto si chiude il tag IMG insernedo IMG tra parentesi quadre e facendo precedere la scritta dal simbolo SLASH.
Chiuso questo tag, va chiuso anche l' altro che avviamo aperto e cio quello dell URL la sintassi utilizzata è la stessa Parentesi quadra aperta, slash, comando e chiusa parentesi quadra. A questo punto la nostra linea di comando è completa e funzionante.
Da quest ultimo esempio abbiamo visto anche esistono gruppi di tag combinabili, e che hanno sintassi diverse tra loro.

Premessa questa cosa siamo pronti per iniziare.

La “LINE 0” del nostro XML
Questa linea è estremamente importante per tutto il nostro codice. Nella prima linea dichiariamo al software le prime informazioni sulla nostra skin, Nessuna di queste può essere omessa.



E molto semplice gli diciamo il nome della skin, che sarà quello visualizzato nel pannello di CONFIG di VDJ nella sezione dove si seleziona la skin da attivare, e dovrà essere anche lo stesso nome che diamo al file .bmp se i due nomi differiscono la skin non funziona e verrà visualizzato un ERROR IN LINE =0

Ora passiamo alla seconda linea del nostro XML



Tra i Tag “copyright" possiamo scrivere il nostro nome. Se modifichiamo una skin, è netiquette lasciare il nome dell autore originale inserendo il proprio come “Reworked By ... ”

Può esserci utile per la lettura del codice inserire linee di riferimento che ci indichino il contenuto delle linee successive. Nel nostro caso per esempio Le prossime linee di programma definiranno la parte superiore della skin. Per identificarlo possiamo usare ad esempio il carattere asterisco ripetuto in sequenza. In questo modo:



La prima definizione importante da fare è quella di cui già abbiamo parlato nella parte finale della seconda lezione, e che abbiamo chiamato “GRABZONE”

Il Tag GRABZONE.
Con questo tag indichiamo al software, che comunicherà al sistema, la o le zone in cui la finestra può venire trascinata sul desktop. Come abbiamo Indicato le zone di azione si definiscono indicando posizione e dimensione del rettangolo che le contiene. Nel nostro caso la grabzone è la parte superiore avrà come origine le coordinate X/Y corrispondenti a X (asse orrizontale) uguale a zero e ad Y (asse verticale) uguale a zero.
La dimensione del nostro rettangolo è l'intera larghezza della skin, quindi 1024 px, per un altezza pari a :
2 px che abbiamo lasciato come bordo superiore, più
21px che è la dimensione della nostra narra verde disegnata e gli aggiungiamo
1px sotto come margine di sicurezza,
per un totale di 24 px.
Dichiariamo con l'XML, questa informazione a Virtual dj nel seguente modo.



Abbiamo scoperto quindi come dire a VDJ la dimensione Tag ( size ) e la posizione di un area o di un oggetto. Scoprendo anche che la dimensione è composta dalle variabili width che corrisponde a larghezza, e da eight che corrisponde all'altezza.
Per comunicare la posizione basta la coordinata dell angolo superiore sinistro rispetto all asse X e Y della nostra battaglia navale.

Il Tag LOGO
Come già preannunciato l'inserimento del LOGO VirtualDJ in una skin è obbligatorio, e la sua dimensione,se non erro deve avere un altezza superiore o uguale ai 15 pixel. Noi lo useremo da 19 pixel di altezza. Quanto alla lunghezza trattandosi di un elemento obbligatorio sarà VDJ stesso a stabilire l'esatta proporzione in quanto l'immagine del logo è residente nel programma e non siamo noi a disegnarla. Il nostro compito è solo quello di dichiarare quanto grande la vogliamo e dove.



Ho fatto in modo che il logo venga posizionato nella parte superiore della skin all interno del nostro riquadro in cui abbiamo immaginato la barra dei controlli finestra.
Il risultato grafico è questo :



La Nostra porzione di codice scritta fino ad ora è :



Da notare che abbiamo aggiunto il Tag di chiusura nominato SKIN, che avevamo aperto nella linea zero di codice.


NOTA PER IL LETTORE
Immagino che a questo punto la voglia sia quella di vedere il nostro disegno caricato su VDJ come skin.
Ci vuole ancora un po di pazienza !!!
.. se ci pensate ci sono altri elementi che dobbiamo inserire prima che VirtualDJ possa leggere il nostro codice. Oltre ad averli già disegnati nell'immagine precedente, prima di chiudere questa lesson, scriveremo il codice per renderli operativi. Non possiamo tralasciare per due ragioni essenziali. Per esempio: il tasto CONFIG, se non lo mettiamo non avremo accesso al pannello skin, per ritornare ad un altra skin dopo avere visto la nostra che al momento non è operativa percui è initilizzabile. O meglio per tornare ad un altra skin, dovremmo tenere aperta alla schermata di avvio la finestra che ci consente di selezionare la skin di partenza. In ogni caso sarebbe un passaggio scomodo.
Gli altri tre tasti hanno le funzionalità per chiudere VDJ e comunicano a windows le modalità di modifica della finestra stessa.
Questi sono gli elementi che non dovrebbero mancare mai e che ci consentono, da ora in poi, di vedere il nostro lavoro come viene, direttamente su VDJ.

Il PRIMO BOTTONE

In base alla nostra skin il primo bottone che troviamo è il tasto che chiude la finestra e arresta il programma. Facciamo i nostri calcoli in base alla nostra grafica che abbiano disegnato. Come si capisce dall immagine sopra, il nostro tasto è un quadrato, avendo la stessa dimensione del logo le sue misure saranno di 19x19 pixel,ed abbiamo stabilito quanto occupa . Abbiamo stabilito di lasciare almeno 2 px di bordo tra oggetto ed oggetto. Quale sarà la posizione dell oggetto?
Il calcolo è semplice: 2px il bordo esterno,1px tra il bordo ed il logo vdj, 72 px il logo vdj e di in fine i 2 px. di spazio tra logo e bottone. Per un totale di : 77 pixel. A queso punto la nostra coordina X sarà 77, mentre la Y sarà 3 come per il logo.
Abbiamo detto che un bottone assume 4 stati (lesson1) e quindi per ogni stto dobbiamo indicare la posizione grafica dello stesso tasto. La dimensione rimane invariata in tutti quattro gli stati del bottone, quello che cambia è la posizione. Per la stessa regola dei 2 pixel, anche nel disegno tra una skin e l' altra lasceremo 2 pixel (Non è necessario m è consigliabile).
Per cui il secondo stato del nostro bottone avrà la stessa distanza dal bordo sinistro (asse X) e una distanza maggiore dal bordo superiore (asse Y). Maggiore di quanto? .. semplice! L'altezza della nostra skin ( 768px ) più i 2 px di spazio, lasciati nel disegno tra le due skin. Per un totale di 770px, in riferimento al bordo.
Avete notato di quanti fattori bisogna tenere conto già per disegnare solo la seconda posizione del primo bottone. Per questo l XML ci consente anche un sistema di riferimento, all interno di un unico comando, che al posto di riferirsi alle coordinate su tutta la skin, fa come riferimento la coordinata di base fornita nel XML per la prima immagine. In questo modo sappiamo che aggiungendo 768+2 pixel si ottiene la coordinata della seconda immagine. Per la terza basterà moltiplicare 770x2 = 1441 ed avremo la posizione Y nella terza skin disegnata, viene da se che moltiplicando 770x3 = 2211 avremo la coordinata Y nella quarta Skin disegnata. Mettiamo ora per iscritto quanto abbiamo calcolato fino ad ora, ed avremo ottenuto il nostro primo bottone.

Il Tag “BUTTON”

E' un tag un po particolare e nella sua fase di apertura ha la possibilità di assegnare alcuni parametri all'oggetto. In questo primo esempio vedremo quello principale che il parametro ACTION.
Ecco il codice del Tag di apertura.



Quindi “close” è il comando che fa chiudere sia la finestra che VDJ.
Inseriamo ora la dimensione e la posizione dell'oggetto nella prima skin



Come avevamo calcolato prima !
Ora definiamo le posizioni dell immagine grafica associata agli altri tre stati dell oggetto. Come abbiamo detto esistono due modi di indicarli, quello assoluto che fa riferimento alla totalità della skin, e quello relativo che invecie fa riferimento alla posizione del primo stato.
Il codice per il posizionamento assoluto è :



Per il posizionamento relativo sara sufficiente mettere un segno + o un – prima del vlore da sommare per avere lo spostamento rispetto al punto di origine. E quindi il nostro codice sarà.



Entrambe i codici sono corretti e funzionanti. Ora possiamo chiudere il nostro tag button.
Avremo cosi uno di questi due codici nel nostro XML

ASSOLUTO

RELATIVO

OPPURE MISTO


Ora il nostro tasto CLOSE funziona!
I tasti che seguono, eseguono tre operazioni la massimizzazione sia per espandere a pieno schermo la finestra che per ridurla, e poi abbiamo la minimizzazione per ridurre ad icona.

D'ora im poi utilizzeremo il sistema relativo in quanto la semplicità della nostra skin lo rende la soluzione pìù pratica.

Le relative ACTION dei nostri due button sono : “maximixe” per il ridimensionamento e “minimize” per la riduzione ad icona. Gli script sono i seguenti.



Per il nostro bottone CONFIG la ACTION che apre la finestra di VDJ (non personlizzabile) è “settings”. Funziona come gli altri tre l' unica cosa che cambia oltre alla funzione sono le dimensioni dell oggetto che misura una larghezza di 73px per un altezza di 19px



Riasummendo il nostro codice fino ad ora prodotto otteniamo questo :



Ora possiamo finalmente salvare sia il codice che l' immagine per posizionarli in modo tale che VDJ li possa leggere e caricare.
Anche qui abbiamo due opzioni in fase di programmazione di una skin consiglio la seconda.
La prima e quella di comprimere in un file .zip il file XML e il file BMP. Il risultato compresso lo andremo a copiare nella cartella ..documenti/virtualdj/skin. Vi ricordo che il file xml il bmp e il nome della skin dichiarati del primo tag devono essere identici.

La seconda opzione che per noi è quella piu pratica e di copiare direttamente i nostri due file all interno della cartella ..documenti/virtualdj/skin. Otterremo lo stesso risultato.

Ora non ci resta che aprire VDJ, andare nel pannello config, e selezionare al vostra skin.

Per questa prima volta metto a disposizione per il download un file zip con l'XML e il BMP. In modo da consentirvi la verifica di quanto fatto fino ad ora. Non sarà un abitudine anche per le prossime lesson in quanto come avrete capito, e come vi avevo preannunciato fare una skin richiede molti calcoli, e quindi è meglio che iniziate a farli da soli per vedere se avete capito bene come si fa e per prendere la divuta pratica prima di realizzare skin più particolareggiate.

SCARICA ESEMPIO QUI <<<<DOWNLOAD>>>>

::: LESSON1 :::
::: LESSON2 :::
::: LESSON3 :::
::: LESSON4 ::: Under contruction