Extjs gui designer

Per il fronte extjs questa settimana ho deciso di parlare di un editor online di interfacce che si colloca una spanna su tutti gli altri che conosco. Si, lo ammetto ne conosco solamente un’altro e non è poi così funzionale.

Se vorrete visitare http://www.projectspace.nl vi troverete davanti ad un progetto che sicuramente è lontano anni luce dagli editor rad disponibili offline per altri linguaggi di programmazione ma che fa bene quel poco che mette a disposizione degli utenti.

Per chi è pigro e non ci sta a scrivere centinaia di righe di codice necessarie per disegnare una finestra appena più complicata del solito allora questo sito dovrebbe essere una tappa obbligata.

Gli altri potranno prendere la cosa come una curiosità da visitare e nulla più, anche se a mio parere l’installazione meriterebbe più di qualche prova svogliata.

Chi volesse fare qualche confronto anche con l’altro editor di cui ho notizia non dovrà fare altro che puntare il proprio browser verso l’indirizzo http://tof2k.com/ext/formbuilder/.

E questo è tutto

ExtJs: le basi dell’applicazione

Questa è la seconda puntata dell’esperimento su extjs. Ovviamente già in ritardo, adoro dimostrarmi coerente anche su internet con la mia controparte reale. Purtroppo scirivere codice è pressochè immediato, lo è meno, per me, commentarne le caratteristiche in chiave didattica senza essere più che prolissi. Accetto quindi consigli ed osservazione che possano aiutarmi a migliorare l’esposizione (in caso contrario dovrete adattarvi ad uno stile molto distante da quello ottimale finché non riuscirò da solo a trovarne uno efficiente 🙂 )

Dobbiamo Assume che abbiate presente cosa sia un pastebin e passo direttamente al sodo.

Extjs ci permette di concentrare su una singola pagina web un’intero applicativo semplificando, per certi versi, lo sviluppo.

Vediamo come è composta la pagina web che ospiterà il nostro codice:

<html>
<head>
<title>PastE(xtjs)bin</title>
<link rel=”stylesheet” type=”text/css” href=”ext-2.2/resources/css/ext-all.css”>
<link rel=”stylesheet” type=”text/css” href=”pastebin.css”>
</head>
<body>
<script type=”text/javascript” src=”ext-2.2/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”ext-2.2/ext-all-debug.js”></script>

<script type=”text/javascript” src=”pastebin.js”></script>
</body>
</html>

Se pensate che la pagina sia scarna non avete tutti i torti. Solitamente si usa costruire la pagina in html e poi aggiungere la logica in javascript per poter garantire l’accesso anche a chi non ha javascript abilitato. Noi abbiamo due motivi che ci spingono a massimizzare l’uso di javascript: stiamo sviluppando un’applicativo di prova e vogliamo evitare per quanto possibile l’abuso da parte di spider della possibilità di incollare testi non controllati.
Continua a leggere “ExtJs: le basi dell’applicazione”

ExtJS: Imparare sperimentando

Be, non ce l’ho fatta ed ho deciso di partire con questo duplice esperimento: da una parte costruire una piccola applicazione utilizzando extjs, dall’altra annotare passo passo su questo blog i progressi ed i ripensamenti a cui andrò incontro nel progetto.

Si tratterà di un appuntamento settimanale, almeno nelle mie più rosee previsioni, in controtempo con quello sugli ebook a licenza libera, e quindi pubblicherò un post alla settimana nella notte tra martedì e mercoledì, magari poche righe, quando il programma sarà in stallo, ma spero così di riuscire ad esprimere la difficoltà intrinseca all’uso della libreria.

Ovviamente ogni critica o suggerimento saranno più che accetti, anzi graditi.

Evitiamo di perdere altro tempo, anche se si tratta di un’introduzione bisogna che mantenga un piglio operativo, e cerchiamo di stabilire le specifiche del progetto.
Continua a leggere “ExtJS: Imparare sperimentando”

ExtJS: Estendere Ext.Component

Questa domenica ho tradotto un altro tutorial su Extjs, un ulteriore passo verso l’avvio di un progetto che consiste nel documentare passo passo la creazione di una piccola applicazione che utilizzi il framework citato nel titolo.

Il tutorial è focalizzato sulla modalità di estensione dell’oggetto Ext.Component, che sta alla base della gerarchia di classi del framework.

Al solito fatemi sapere come va la traduzione che è stata un po’ faticosa, ve ne accorgerete perché alcuni periodi sono al limite tra una traduzione ed una reinterpretazione del testo 🙂 .

Il testo è interessante anche perché punta ad altre risorse che vale la pena di studiare, e che, probabilmente tradurrò più avanti se nessun altro farà prima di me.

Javascript: The good parts

The Good Parts
Javascript: The Good Parts

In questi giorni sto finendo di leggere il libro il cui titolo fa da intestazione a questo post.

Si nota che l’estate la sto votando a Javascript :)?

Cosa dire a riguardo? Il libro è particolarmente asciutto, quasi quanto questa recensione. Non si perde in fronzoli ed affronta il linguaggio cercando di soffermarsi sulle parti positive del linguaggio e avvertendo il lettore dei costrutti da evitare.

La lettura è molto veloce, daltronde si tratta di poco più di 150 pagine, densa di informazioni e con una attenzione ai formalismi che non appesantisce il filo del discorso ne’ rende spiacevole l’esperienza ad un lettore alle prime armi.

Certo qualche esempio in più avrebbe sicuramente aiutato chi non è particolarmente esperto del linguaggio ed avrebbe reso il libro un po più godibile anche ai lettori più scafati.

Tutta un’altra impressione rispetto a “Javascript: la guida definitiva”, che preferisco come libro/manauale da tenere sulla scrivania, ma vale la pena di darci un’occhiata (magari prima di comprarlo dateci letteralmente un’occhiata, anche più d’una, in libreria).

Ultima pecca che posso trovare al libro è il prezzo: vista la stringatezza del testo avrei preferito che fosse più compatto. Così com’è, 23.45€ su webster, si fa sentire un po’ troppo.

E questo è tutto.

Javascript: Ancora sugli scope in Extjs

A stretto giro di posta ho finito di tradurre la seconda parte del tutorial sugli scope in Extjs. La curiosità era troppa e non sono riuscito a fermarmi prima di aver finito anche questa revisione. Finalmente comincio a capire cosa sono i delegati ed a cosa servono.

Non vi ruberò molto tempo se non per scrivere che la seconda parte del tutorial o, meglio, questo secondo tutorial si addentra più in profondità in Extjs e spiega come risolvere, o almeno mitigare, il problema nell’assegnazione degli ambiti di risoluzione evidenziato nel primo.

Buona lettura.

Javascript: Lo scope in Extjs (e non solo)

Altro rapido post per segnalare la traduzione di un altro tutorial tra quelli disponibili in sul sito della libreria javascript Extjs.

Questa volta ho tradotto, come avevo preannunciato in un post precedente, il primo dei due tutorial che approfondiscono il concetto di scope.

Anche se basilare lo segnalo subito, invece di aspettare di finire di revisionare la seconda parte del tutorial, molto più utile per chi volesse utilizzare extjs, perché ha attirato la mia attenzione sul comportamento delle funzioni annidate riguardo gli ambiti di risoluzione dei nomi. Ho sempre creduto che javascript fosse un normalissimo linguaggio con scope statico mentre ho scoperto, seguendo questo tutorial, che sbagliavo e che la gestione delle funzioni annidate è al limite del comportamento errato (e qui chi ne sa di più è caldamente invitato a contraddirmi essere più preciso).

In attesa della fine della traduzione del secondo tutorial, Buona lettura

Javascript: eventi in ExtJs

Ho tradotto un altro tutorial su Extjs. Si tratta del tutorial che spiega cosa sono gli eventi e come vengono usati in extjs. Non ho molto altro da aggiungere se non che si tratta di un tutorial introduttivo che mi ha chiarito alcune cose sulla gestione degli eventi alla maniera di Extjs.

Per darvi un’idea riporto lo stringatissimo riassunto finale per punti.

  • un evento è un messaggio inviato (fired) da una sorgente per informare eventuali gestori che è accaduto qualcosa.
  • una sorgente di eventi è un oggetto che può generare eventi
  • un gestore di eventi è una funzione che viene invocata quando una sorgente genera un evento del tipo gestito dal gestore
  • ci mettiamo in attesa di un evento con la funzione on che installa un gestore di eventi
  • per creare una sorgente di eventi estendiamo la classe Observable, addEvents e fireEvent

Dateci un’occhiata in attesa della prossima traduzione (gli scope, un doppio tutorial che mi pare interessante)

Extjs vs Firebug

Da bravo sviluppatore web la mia cassetta degli attrezzi contiene, tra le altre cose firebug e la web developer bar. Potete immaginare il mio entusiasmo quando appena aperta la pagina degli esempi di etxjs mi sono trovato davanti al messaggio: Attenzione, firebug causa problemi di performance ad extJs.

Se poi considerate che la frase – causa problemi di performance – è un eufemismo, vi lascio immaginare la mia strabordante contentezza.

Se le performance possono non essere un problema, potrete facilmente figurarvi il mio sconforto alla scoperta che anche l’esecuzione passo passo è inutilizzabile. Dopo qualche tentativo ed esplorazione tra i forum di supporto, le invettive dei diversi sviluppatori che si trovano davanti al problema (si, non sono solo) capisco, almeno credo di capire, che il problema è dovuto alle dimensioni dello script extJs.

Le 34343 linee di codice per la libreria sono troppe per firebug che, sul mio sistema non riesce a tracciare l’esecuzione quando quest’ultima arriva al file ext-all-debug.js.

Piuttosto che procedere alla cieca sperando di arrivare all’errore senza troppi blocchi, o almeno senza troppe pause troppo lunghe per la mia quasi infinita pazienza, 😉 ho pensato di sezionare la libreria in più file.

L’espediente sembra funzionare e quindi non mi resta altro che riportare il piccolo script che seziona la libreria principale e sperare che la cosa possa essere di aiuto a qualcuno.

#!/bin/bash
# checksum md5 del file ext-all-debug.js
EXT21_MD5SUM='b854fc982dcec3781f1beb9653f33234'
MD5_PATH=`which md5sum`
INPUT_MD5=`$MD5_PATH $1  | cut -f 1 -d \ `

if [ "$2" = "" ]
then
    DIR='.'
else
    DIR=$2
fi

if [ "$EXT21_MD5SUM" = "$INPUT_MD5" ]
then
    head $1 --lines 2036 > $DIR/ext-all-debug-p01.js
    head $1 --lines 5679 | tail --lines 3643 > $DIR/ext-all-debug-p02.js
    head $1 --lines 8125 | tail --lines 2446 > $DIR/ext-all-debug-p03.js
    head $1 --lines 10897 | tail --lines 2771 > $DIR/ext-all-debug-p04.js
    head $1 --lines 13672 | tail --lines 2775 > $DIR/ext-all-debug-p05.js
    head $1 --lines 16309 | tail --lines 2636 > $DIR/ext-all-debug-p06.js
    head $1 --lines 19076 | tail --lines 2766 > $DIR/ext-all-debug-p07.js
    head $1 --lines 21817 | tail --lines 2741 > $DIR/ext-all-debug-p08.js
    head $1 --lines 24851 | tail --lines 3034 > $DIR/ext-all-debug-p09.js
    head $1 --lines 27420 | tail --lines 2569 > $DIR/ext-all-debug-p10.js
    head $1 --lines 31057 | tail --lines 3637 > $DIR/ext-all-debug-p11.js
    tail $1 --lines 3285 > $DIR/ext-all-debug-p12.js
else
    echo -e ' Questo script funziona solamente con la versione 2.1 di extjs\n' \
         'In particolare seziona il file ext-all-debug.js'
fi

Come primo parametro va il path della libreria, ext-all-degub.js, come secondo il path dove andare a salvare i vari spezzoni.

Includere i tag script corrispondenti, salare, mettere in forno e debuggare quanto basta. 🙂

Quando Firefox esegue due volte lo stesso script

Promemoria:

Tutto un pomeriggio perso dietro ad un problema che, al giorno d’oggi, non dovrebbe neanche porsi:

No, non sto criticando Firefox, sto criticando me stesso che mi atteggio ad essere uno pseudoprogrammatore. Analisi dei flussi, pattern, programmazione agile (magari) e poi mi perdo in un bicchier d’acqua.

Mi è capitato che un banale script:

<script type="text/javascript" >
//<!--
var stats = "toolbar=no, location=no, directories=no, "
    stats +="status=yes, menubar=no, scrollbars=no, top=0, "
    stats +="resizable=no, width=1100, height=678, left=0";
window.open("indexFraming.php", "", stats);
window.opener=self;
self.close();
//-->
</script>

Venisse eseguito due volte da Firefox ed una volta sola da Internet Explorer 6. Non ho testato altri browser per mancanza di tempo e voglia. Chi volesse integrare con commenti è, al solito, benvenuto.

Racchiudere il codice all’interno di una funzione, anche anonima, ed eseguirlo al termine del caricamento della pagina, risolve il problema.

<script type="text/javascript" >
//<!--
window.onload=function () {
   var stats =  "toolbar=no, location=no, directories=no, "
       stats += "status=yes, menubar=no, scrollbars=no, top=0, "
       stats += "resizable=no, width=1100, height=678, left=0";
window.open("indexFraming.php", "", stats);
window.opener=self;
self.close();
}
//-->
</script>

E questo è tutto.