Grosse novità per EagleNet!

Translate To English!

Grosse novità per EagleNet! FUNZIONA!

Per ora è ancora allo stato embrionale, ma il kernel è completo. Le comunicazioni tra l’ambiente PureBasic e newLisp sono completate, nonchè il protocollo di scrittura e codifica dei dati. In breve, allo stato attuale EagleNet è in grado di aprire una form e di disegnarci dentro delle labels.

Nei prossimi giorni completerò l’implementazione dei gruppi (groups) e delle funzionalità innovative per la creazione della GUI.

Vi propongo qui un piccolo assaggio del nuovo sistema per disegnare le GUI.

Per disegnare la seguente form…

Ho utilizzato il codice seguente:

PASSO 1 – Creazione della form:

(form-create
     '(title "Hello newLisp!")
     '(gadgetlist-create true)
     '(pos-x 500) '(pos-y 200)
     '(width 300) '(height 300) ) )

L’esempio è molto chiaro. Vorrei però mettere in evidenza la riga ‘(gadgetlist-create true)
Essa indica a EagleNet che ho intenzione di inserire dei gadgets (componenti) nella finestra appena creata. Questo è necessario perchè la stessa finestra potrebbe invece essere usata come canvas per grafica 2D ad alte performance (per esempio per i giochi 2D), oppure per la grafica 3D (powered by Ogre).

'(gadgetlist-create true)

PASSO 2 – Le labels invece si creano così…

(group-create (size vertical)
    '(fn ()
        (label-create '(caption "First Label") )
        (label-create '(caption "Second Label") )
        (label-create '(caption "Third Label") )
    );fn
);group

Come potete vedere il codice è semplice ma potente (poche righe per fare molto lavoro).
Anche il secondo blocco è molto chiaro, ma vorrei comunque fornire alcune informazioni.

L’intero sistema si basa su tre principi fondamentali:

1. Scrivere il minimo indispensabile;
2. Scrivere codice leggibile (anche a distanza di tempo, per ridurre i tempi di manutenzione);
3. Far fare al computer tutto il lavoro possibile.

Innanzi tutto potete notare che ogni proprietà viene definita come (chiave valore). Vengono anche sfruttati i tipi di dato nativi di newLisp (non viene per esempio forzato l’uso delle stringhe dove non è necessario). Partendo dal presupposto che il 90% delle GUI è raggruppabile griglie, ho usato la proprietà (size …) per definire “la forma” del mio gruppo. Nel nostro caso ho indicato vertical. Questo significa che tutto ciò che si trova all’interno del gruppo verrà posto sotto forma di colonna. Avrei anche potuto indicare horizontal, oppure square (in questo caso il componente cerca di organizzare i gadget per formare un quadrato). Se queste “forme” non vi vanno bene potete fornire una dimensione custom: (size 5 3) in questo modo viene generata una grid da 5 caselle per 3.
Il vantaggio di questo sistema è evidente: una volta impostata la forma della grid, al suo interno non devo far altro che inserire i componenti, ed il software si occuperà di metterli nel posto corretto.
La creazione delle labels vera e propria viene poi fatta passando al group una lambda function. Questo ci consente la massima compattezza del codice e flessibilità al momento del disegno della form.

Un’altra potenzialità della GUI si trova nelle “calamite”, (magnets). Questo è un modo per attaccare un componente ad un altro, fornendo in automatico anche allineamenti, dimensioni, etc… Un esempio: se nell’esempio precedente non volessi usare i group, potrei allora usare i magneti. Ecco come procedere:

(label-create '(caption "First Label") )
(label-create '(caption "Second Label") (attach down) (align width height) )
(label-create '(caption "Third Label") (attach down) (align width height) )

In pratica EagleNet, quando create una form, si ricorda ciò che avete appena fatto, e tale informazione può essere usata a nostro vantaggio. Nel nostro caso la proprietà (attach below) dice a EagleNet di attaccare il nuovo componente sotto al precedente, provvedendo anche ad uniformare la lunghezza/altezza del componente (esistono poi dei metodi per far fare questo comportamento per default).

Se invece volessimo creare il tipico pannello di login (username/password) possiamo procedere come segue, in due modi (con i gruppi o senza gruppi).

Il pannello che vogliamo disegnare è fatto così:

Username: ____________
Password: ____________

Usando i gruppi:

(group-create (size square)
    '(fn ()
        (label-create '(caption "Username") )
        (field-create '(name "fUsername") )
        (label-create '(caption "Password") )
        (field-create '(name "fPassword") )
    );fn
);group

Senza i gruppi (usando i magneti) :

(label-create '(caption "Username:") '(name "labUsername") )
(field-create '(name "fUsername") '(attach right) )
(label-create '(caption "Password:") '(attach-to "labUsername" down) (align width height) )
(field-create '(name "fUsername") '(attach right) (align-to "fUsername" width height) )

Nel primo caso ho creato una grid square, quindi i componenti verranno disposti in una grid 2×2 (infatti si tratta di 4 componenti).

nel secondo caso (senza gruppi) ho, prima di tutto, assegnato un nome alla prima label (labUsername, la quale sarà il nostro punto di riferimento per assemblare l’intera form). Poi ho usato le proprietà attach e attach-to per attaccare gli altri componenti al primo (attach-to non attacca il componente all’ultimo creato ma ad uno esplicitamente indicato). E’ interessante anche la proprietà align-to usata nell’ultimo componente. Poichè il componente viene attaccato alla sua label “Password” io devo però crearlo delle stesse dimensioni del field sopra di esso. In questo caso uso align-to per indicare che questo componente avrà la stessa lunghezza e altezza del componente “fUsername”.

Ok, questo è solo un assaggio, ma spero che il nuovo sistema vi piaccia.

E’ solo l’inizio ovviamente. EagleNet fornisce strumenti per i messaggi (similmente allo SmallTalk), tecniche e strumenti per dividere la GUI dalla logica del programma stesso, etc…

A presto!