The Idles: Corso IACS: Lezione 9

La nona lezione del corso di Informatica applicata alla Comunicazione Scritta si è svolta interamente in laboratorio e quindi sotto la guida del prof. Astaneh.
Il primo esercizio da svolgere consisteva nel creare, in Javascript, un oggetto che rappresentasse il Browser contenente altri quattro oggetti che identificassero le quattro regioni in cui era divisa la pagina (header,left,main,footer). Prima di svolgere tale compito è stata anche ri-esaminata la sintassi di javascript per la creazione di oggetti.
Successivamente si sono analizzati i concetti di "Panel" e di "Framework". I panels sono oggetti che vanno a riempire lo schermo, sono quindi dei container che hanno una posizione fissa. Il Framework che utilizzeremo sarà Ext Js, il quale è utile per realizzare GUI complesse per web application, creare pagine con layout avanzati, agganciare funzionalità AJAX di aggiornamento per le nostre interfacce, creare moduli wizard o textarea, agganciare le nostre web application a ulteriori strumenti e molto altro.

Sul sito ufficiale di Ext è possibile scaricare tutte le librerie necessarie ed inoltre è possibile imparare ad usare questo framework, grazie a dei tutorial, a degli esempi e alla documentazione.
I requisiti consigliati sono quelli relativi alla conoscenza di HTML, Javascript e DOM.
Iniziamo ad osservare come si presenta il template di inizio:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<title id="page-title">Title</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function() {
// Scrivere qui il codice
});
</script>
</head>
<body></body>
</html>

Come si può vedere, il codice html contiene lo stretto necessario e il body è addirittura vuoto. Nello head sono presenti gli script per l'importazione delle librerie, disposte secondo un certo ordine, visto che quest'ultimo è da ritenere molto importante quando si scrive in javascript. La funzione principale è Ext.onReady, che viene chiamata automaticamente non appena il dom finisce di essere caricato, garantendo che tutti gli elementi della pagina che si referenziano, saranno disponibili al momento dell'esecuzione dello script.
Con il seguente codice:

Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});

si riesce invece ad avere il controllo di un elemento presente all'interno della pagina, in questo caso un div con id="myDiv".
Attraverso quest'altro codice:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content',
collapsible: true
});

si riesce invece a creare un pannello come questo:

Per creare un elemento si possono usare tre tipi di modelli:

statico: creo un elemento (es. div) all'interno del body e lo manipolo richiamandolo attraverso il suo id;
dinamico per aggiornamento: Ext.get(document.body).update('<div id="test"></div>'); In questo modo si crea un div semplicemente aggiornando (update) il body;
dinamico con viewport: si crea un viewport, i cui items saranno gli elementi da creare.

L'esercizio da svolgere è appunto quello di costruire il nostro viewport, che sarà il nostro contenitore principale. Esso infatti renderizza il body.

Il viewport creato ha cinque regioni: North, West, Center, East, South. Queste dovranno contenere le informazioni che stiamo creando, come ad esempio il Blog, il sito internet, ecc.
Ext js permette di creare infinite configurazioni e layout, quindi si dovrà perfezionare il viewport in base alle nostre necessità. Nelle lezioni successive verranno approfonditi ulteriori aspetti di questo framework.

Marco Ruberto