Tag Archives: code

Emitter

e02
e01
e03
e04

Emitter series, realizzati con Processing; qui trovate la Applet ed il sorgente della prima versione.

Di questa seconda versione, denominata IR1916 (come la galassia a noi più lontana, circa 120 milioni di anni luce dalla Terra) ho caricato il file .mov su Vimeo; purtroppo la compressione non risparmia i singoli pixel in movimento – che sono il particolare che ho cercato e ricercato – e per questo consiglio di scaricare il .mov originale nel portfolio (se scrollate, lo trovate); ho comunque estratto alcuni frames dai quali si nota come l’uso del perlin noise fà sì che si formino delle textures durante la generazione delle particelle e anche per spiegare i concetti di base che governano la colorazione di questo Emitter. mò, con due minuti lo spiego…

Model-View-Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package net.gcmingati.jsp.beans;
import java.util.*;
public class RoomBean implements java.io.Serializable {
    private static int index = -1;
    private List staffNames;
	public static void main(String [] args)
	{
		RoomBean rb = new RoomBean();
		rb.getStaffNames();
	}
    public RoomBean() {
        initStaff();
    }
    public List getStaffNames() {
		for (int i=0; i<staffNames.size(); i++)
		{
			//return (String) staffNames.get(index);
			System.out.println((String) staffNames.get(i));
		}
        return staffNames;
    }
    private void initStaff() {
        staffNames = new ArrayList();
        staffNames.add("Gian Carlo Mingati");
        staffNames.add("Francesco D.");
        staffNames.add("Fabrizio L.");
    }
}

Un semplice esercizio con la sintassi Java; con questa classe (o JavaBean), visualizziamo gli elementi di un array (di stringhe) su una pagina JSP (in locale con Jakarta Tomcat) per mezzo dei tags JSTL e del linguaggio di espressione EL.

1
2
3
4
5
6
7
8
<jsp:useBean id="stanza" class="net.gcmingati.jsp.beans.RoomBean" />
<ul>
<c:forEach items="${stanza.staffNames}" var="selezione">
	<li>
		<c:out value="${selezione}"/>
	</li>
</c:forEach>
</ul>

E’ che sono stato abbastanza fortunato da poter seguire – obbligatoriamente – un corso di quattro settimane sulla programmazione Object-Oriented, ed in particolare su J2EE (Java Enterprise Edition), ed in particolare sull’utilizzo del framework Java che usiamo qui per sviluppare applicazioni; in partica è Struts 1.2 con una serie di plugins.

Un’esperienza che è giusto definire tale, che ha subito stimolato tutta una serie di considerazioni tra le quali, la più importante è che – con Java si può fare qualsiasi cosa.
Il bello é che comunque i concetti di base sono applicabili a qualsiasi linguaggio di programmazione e una volta che sai cosa vuoi ottenere e sai come scriverlo, il solo limite è la tua fantasia; insomma, passo molto volentieri dalla ricerca sul DOM scripting a quella su come creare applicazioni J2EE basate sul design-pattern Model-View-Controller.

liScroll – a jQuery News Ticker made easy

In questo periodo ho dovuto creare parecchi di questi news ticker(s) per delle app. intranet. Chi lo voleva che leggesse il contenuto da un XML feed, chi lo voleva largo, chi lo voleva più lento… oh ma un requisito comune no eh?! Insomma tanto ho fatto che ho deciso di farne un plugin per jQuery e lo ho chiamato liScroll (beh, scrolla una lista…) così ognuno se lo fa come vuole: si crea la solita lista non-ordinata di links, gli si dà un ID univoco, si include jQuery 1.2.1 e si inizializza così:

1
2
3
$(function(){
	$("ul#ticker01").liScroll();
});

Opzionalmente, se non vi va bene la velocità, potete cambiare la stessa in questo modo:

1
2
3
$(function(){
	$("ul#ticker02").liScroll({travelocity: 0.08});
});

Enjoy jQuery liScroll!

multicolumn lists con jQuery

Problema:

Creare una lista disposta su 3 colonne, senza sapere a priori quanto è lunga la lista.

E aggiungono:

Non preoccuparti di quanto è lunga la lista, ci servono 3 colonne di links. La lista andrà su un sito pubblico.

mmmh. vediamo…
L’obiettivo, come al solito, è scrivere il meno possibile. Ma non perchè sono lazy, ma perchè è una sfida. Quindi mi serve certamente 3 colonne UL. Flottate, così ottengo 3 colonne. ok.
Ma per scrivere meno, dovrei avere una sola lista….

Per creare una lista su tre colonne, se sapessi quanti elementi sono nella prima e nella seconda colonna non sarebbe difficile. Basta applicare al primo LI della mia ipotetica seconda colonna, un margin-top negativo pari all’altezza della prima, ed un margin-left sempre pari alla larghezza delle colonne (tutte e due le precedenti, e così via).

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="mainlist">
<li class="licol1"><a href="#">1 Exxon Mobil (XOM)</a></li>
<li class="licol1"><a href="#">2 Exxon Mobil (XOM)</a></li>
<li class="licol1"><a href="#">3 Exxon Mobil (XOM)</a></li>
<li class="licol1"><a href="#">n --- --- </a></li>
<li class="licol2"><a href="#">1 Exxon Mobil (XOM)</a></li>
<li class="licol2"><a href="#">2 Exxon Mobil (XOM)</a></li>
<li class="licol2"><a href="#">n --- --- </a></li>
<li class="licol3"><a href="#">1 Exxon Mobil (XOM)</a></li>
<li class="licol3"><a href="#">2 Exxon Mobil (XOM)</a></li>
<li class="licol3"><a href="#">n --- --- </a></li>
</ul>

Ma se questa lista non so quanto è lunga? Voglio dire, se mi possono anche dividere in tre le liste, assegnare una classe diversa per ogni blocco di lista, come posso inserire il margine negativo al punto prestabilito per fare andr sù la seconda e la terza colonna? E quale è questa misura, esattamanete in pixel?(E’ evidente che questa lista viene creata dinamicamente tramite qualcosa server-side come per es. una JSP.)
Ecco che mi viene incontro jQuery una libreria javascript ideata da John Resig e attualmente molto, molto diffusa ed estesa da molteplici plugins sviluppati dalla community.
Infatti il motto di jQuery è “write less, do more” e significa che jQuery serve per scrivere meno javascript ed ottenere di più. Tra le cose che sin dall’inizio mi hanno impressionato positivamente di questa libreria, oltre ai metodi built-in per quel che riguarda Ajax, qualche effetto e in generale la manipolazione del DOM, sono i selettori (supporta la sintassi di CSS 1-3 e basic XPath ).

E vediamo con questi selettori cosa si può fare. Ecco il codice che mi risolve brillantemente il problema delle tre liste parametriche affiancate, e del loro posizionamento.

1
2
3
4
5
6
7
8
$(document).ready(function(){
elNumberInColOne = $(".licol1").length;
var PixelCountColOne = 0;
for (i=0; i li.licol2:eq(0)").css({ marginTop: - PixelCountColOne});
ElNumberInColTwo = $(".licol2").length;
var PixelCountColTwo = 0;
for (i=0; i li.licol3:eq(0)").css({ marginTop: -PixelCountColTwo});
});

La parte più interessante, secondo me qui da notare è il selettore inserito nel ciclo

1
"li.licol1:eq("+i+")").height() + 9

che cerca nel LI con classe “licol1″ OGNI elemento LI e ne calcola l’altezza in px. +9 poi sono il padding top e bottom e il bordo assegnati via CSS al singolo LI (al suo A, a dire il vero).
Quindi cosa fa questo script?

  1. Prende la prima colonna, e per ogni LI ne calcola l’altezza in pixel
  2. Assegna al primo LI della seconda colonna un margin-top negativo pari all’altezza della prima colonna. Il margin-left resta assegnato dal css.
  3. Ripete lo step 2 nella terza colonna
1
"ul#mainlist > li.licol2:eq(0)"

Et voilà. Css multicolumn lists.
Comunque allego il sorgente dell’esempio, per chi volesse usarlo.