Experimentalia

Appunti raminghi

ExtJs: le basi dell’applicazione

leave a comment »

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.

Le righe in rosso servono ad includere tutti i file della libreria. Potremmo scegliere di includere meno codice di quello che abbiamo incluso adesso scegliendo di non fare riferimento a ext-all-debug ma ad un file, magari assemblato ad hoc o compresso.

Il file javascript evidenziato in blu conterrà la logica del nostro programma mentre il file pastebin.css a cui facciamo riferimento nella sezione head del file conterrà la parte personalizzata dello stile dell’applicazione.

Per ora conterrà solamente lo stile del tag body, aggiungeremo eventualmente più avanti altri stili.

body {
background-color: #fdfffa;
background-image: url(ext-2.2/resources/images/default/shared/large-loading.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

In attesa che vengano caricati i file javascript, sono grossi e potrebbe essere necessario diverso tempo per scaricarli, verrà visualizzata un’immagine al centro della pagina che invita gli utenti ad attendere.

Abbiamo descritto sinteticamente la parte html e css, possiamo dedicarci alla parte javascript.

Per ora ci limiteremo a creare una prima separazione della pagina che conterrà l’applicativo utilizzando l’oggetto viewport.

Questo componente è, riporto dalle specifiche, un contenitore che sostituisce il contenuto del tag body, occupa tutto lo spazio disponibile nella finestra del browser ed ospita diversi pannelli che permetteranno di strutturare lo spazio visibile contenendo, a loro volta, i controlli necessari all’interazione con l’utente.

Se avete superato il paragrafo precedente e siete arrivati fin qui per cercare di capire cosa c’è scritto sappiate che anche a me che l’ho scritto il testo non è chiaro. Un esempio è quello che ci vuole per fugare eventuali dubbi residui. Il codice javascript che animerà la nostra applicazione per ora sarà molto semplice:

Ext.onReady(function(){    Ext.namespace("eineki");    
                           new Ext.Viewport({    
                               layout: "border",    
                               items: [  {  region: "west",         
                                            collapsible: true,         
                                            title: "Utente",         
                                            html: "Contenuto del pannello a sinistra",
                                            height: "90%",
                                            margins:"2 2 2 2"},      
                                         {  region: "center",         
                                            html: "Contenuto del pannello al centro", 
                                            margins:"2 2 2 2"}    
                               ]   
                             });
  });

Per ora ci limitiamo ad dividere la finestra in due parti, riempiremo le due colonne in una prossima puntata. Viewport serve proprio a questo: divide la finestra del browser in cinque zone che secondo uno lo schema che vedrete qui sotto nello screenshot.

Potete vedere la demo (parola grossa) funzionante ed il sorgente per crearla, magari con i numeri di linea.

Ogni volta che programmeremo usando Extjs raccoglieremo il codice principale all’interno di una funzione, in questo caso anonima anche se non è obbligatorio che lo sia, che dovrà essere eseguita all’interno di una chiamata ad Ext.onReady (riga 4) che accetta come parametro una funzione da lanciare una volta che il browser ha caricato tutto il necessario alla renderizzazione della pagina.

Nello specifico la nosta funzione non fa altro che utilizzare viewport per dividere la pagina in due colonne, una occidentale, o sinistra (west) ed una destra, anche se per viewport sarà la regione centrale (center).

Viewport divide la finestra in cinque regioni: north, west, center, east e south che dovranno essere riempite da opportuni panel (o renderizzate su div già presenti sulla pagina). Solo una delle regioni è obbligatoria: center, le altre, essendo facoltative, possono essere impiegate per costruire un qualunque layout. A dire il vero anche viewport è del tutto facoltativo; è possibile sviluppare applicazioni senza utilizzarlo e gestire la pagina direttamente.

Nel prossimo pezzo cercherò di concentrarmi sui panel popolando, nel contempo la regione di sinistra con una maschera per l’inserimento dei dati di un eventuale utente.

E questo, per ora, è tutto.

Written by Eineki

ottobre 1, 2008 a 0:45 am

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: