Hello World: » Ext http://razorblade.netsons.org Programmazione web e oltre: php5, Zend Framework, jQuery, Actionscript 3.0, Sandy 3D Engine e altro Fri, 28 Aug 2009 18:23:41 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Introduzione a EXT JS Javascript Framework http://razorblade.netsons.org/2009/03/18/introduzione-a-ext-js-javascript-framework/ http://razorblade.netsons.org/2009/03/18/introduzione-a-ext-js-javascript-framework/#comments Wed, 18 Mar 2009 01:21:00 +0000 admin http://razorblade.netsons.org/?p=69 Ext: Non l'ennesima libreria javascript

Oggi introdurremo la libreria EXT JS, un potente framework che da allo sviluppatore web la possibilità di creare interfacce avanzate con poche linee di codice. Queste interfaccie comprendono Feed Viewer, Gallerie di immagini, griglie o liste ( le grid ), tabs, finestre, layout, form, toolbars, menu, drag&drop e molto altro. Ext nasce inizialmente come una estensione della Yahoo User Interface Library dalla quale col tempo si separa diventando un framework vero e proprio per di più open source.

Se per caso avete già 'adottato' un vostro framework e state per chiudere questa pagina, vi consiglio prima di dare un'occhiata a questa pagina per vedere subito di cosa è capace ExtJs, per giunta è anche possibile integrarlo con la vostra libreria preferita.[...] Continua

No related posts. Related posts brought to you by Yet Another Related Posts Plugin.]]> Ext: Non l’ennesima libreria javascript

Oggi introdurremo la libreria EXT JS, un potente framework che da allo sviluppatore web la possibilità di creare interfacce avanzate con poche linee di codice. Queste interfaccie comprendono Feed Viewer, Gallerie di immagini, griglie o liste ( le grid ), tabs, finestre, layout, form, toolbars, menu, drag&drop e molto altro. Ext nasce inizialmente come una estensione della Yahoo User Interface Library dalla quale col tempo si separa diventando un framework vero e proprio per di più open source.

Se per caso avete già ‘adottato’ un vostro framework e state per chiudere questa pagina, vi consiglio prima di dare un’occhiata a questa pagina per vedere subito di cosa è capace ExtJs, per giunta è anche possibile integrarlo con la vostra libreria preferita.

Download di Ext Js

Potete scaricare Ext da questa pagina http://extjs.com/products/extjs/download.php, ad oggi la versione disponibile è la 2.2.1, cliccate quindi sul tasto ‘download’ a fianco di ‘Ext JS 2.2.1 SDK’, un archivio che conterrà tutto ciò di cui avete bisogno per cominciare ( circa 6,6 Mb ).

Installazione di Ext

Una volta scaricato l’archivio, scompattatelo, ne otterrete diverse cartelle e files. I file di cui avrete bisogno per far funzionare il tutto sono ext-base.js, che contiene il motore della libreria, ext-all.js o in alternativa la sua versione non compressa, ext-all-debug.js, da utilizzarsi in ambiente di sviluppo. Inoltre avrete la necessità di includere nei vostri file html le directories resources e adapter, qui di seguito un breve esempio di un codice html funzionante per ext:

<html>
<head>
   <title>ExtJs Hello World</title>
   <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
   <script src="js/ext/adapter/ext/ext-base.js"></script>
   <script src="js/ext/ext-all-debug.js"></script>
</head>
<body>

</body>
</html>

Vediamo nel dettaglio i file inclusi:

  • ext-all.css: il file CSS principale di Ext, contiene le regole dello stile per i widget di Ext. Questo file css NON va modificato, eventuali modifiche sono da inserirsi in un altro file, da inserire nel codice html in una riga seguente a questo. Per essere sicuri di sovrascrivere una certa regola css il consiglio è di utilizzare la parola chiave ‘important!’ nel vostro css.
  • ext-base.js: come già detto è il motore di Ext. Risiede nella cartella adapters in quanto va sostituito con un altro nel caso volessimo utilizzare Ext insieme alla nostra libreria preferita, come per esempio jQuery
  • ext-all-debug.js/ext-all.js: tutti i widgets di Ext risiedono all’interno di questo file. La versione compressa da utilizzare in produzione pesa più di 530 kb!

Ext Hello World

Vediamo un esempio veloce di utilizzo di Ext. Partendo dal codice html scritto in precedenza, aggiungetevi l’inclusione di un ulteriore file javascript, chiamatelo, per esempio, main.js

<html>
<head>
   <title>ExtJs Hello World</title>
   <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
   <script src="js/ext/adapter/ext/ext-base.js"></script>
   <script src="js/ext/ext-all-debug.js"></script>
   <script src="js/main.js"></script>
</head>
<body>

</body>
</html>

All’interno di main.js inserite questo codice

  Ext.onReady(function(){
    Ext.Msg.alert('Hello', 'World');
  });

Se tutto è andato per il verso giusto otterrete un simpatico alert. Come potete notare il codice javascript personalizzato, come avviene anche in jQuery, dev’essere inserito all’interno del metodo ‘ready’.

Per ora è tutto, questo tutorial voleva solo essere una introduzione veramente di base a questo utile framework. Nei prossimi articoli sull’argomento, vedremo come implementare Ext con altre librerie e qualche guida più avanzata ai widget più utili, come per esempio grid e form.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://razorblade.netsons.org/2009/03/18/introduzione-a-ext-js-javascript-framework/feed/ 3