Microsoft's Internet Explorer browser has no built-in vector graphics machinery required for "loss-free" gradient background themes.

Please upgrade to a better browser such as Firefox, Opera, Safari or others with built-in vector graphics machinery and much more. (Learn more or post questions or comments at the Slide Show (S9) project site. Thanks!)

ExtJS

Javascript RIA Framework

Master "Tecnologie OpenSource"

Intro (1/3)

ExtJS è un potente framework Javascript orientato allo sviluppo di Rich Internet Application.

Feature

Intro (2/3)

ExtJS è un potente framework Javascript orientato allo sviluppo di Rich Internet Application.

ExtJS Licenses

ExtJS viene distribuito sotto licenza GPLv3 e ne è consentito l’utilizzo in applicazioni OpenSource senza ulteriori costi di licenza.

Nel caso in cui si voglia al contrario distribuire un applicazione senza fornirne i sorgenti, è possibile acquistare delle licenze per-developer.

L’acquisto dei pacchetti commerciali danno diritto inoltre ad accedere al repository SVN della versione del framework in sviluppo e vari livelli di supporto tecnico (attraverso il forum, email e telefono)

Intro (3/3)

ExtJS è un potente framework Javascript orientato allo sviluppo di Rich Internet Application.

ExtJS Core 3.0

Ultimamente è stata rilasciata sotto la più permissiva MIT License, la nuova verione del Core della libreria (ExtCore 3.0) contenente le funzionalità base (escluso quindi il set di widget):

Quickstart (1/4)

Download

La libreria è disponibile per il download all’url:

http://extjs.com/products/extjs/download.php

ExtJS 2.2.1 (Stable)

ExtJS 3.0 (Release Candidate 1)

  • SDK (source code, build, apidoc and examples)

ExtJS Core 3.0 (Beta)

  • SDK (source code, build, apidoc and examples)

Quickstart (2/4)

Contenuto dell’SDK

L’SDK, oltre ai file di libreria minificati e le risorse (css ed immagini necessarie ai widget), contiene:

  • file di libreria non-minificati per lo svilupppo e debugging
  • sorgenti javascript dei vari moduli di libreria
  • apidoc ed una grande quantità di esempi
  • ext-all.js, ext-core.js – file di libreria ExtJS e ExtCore
  • ext-all-debug.js, ext-core-debug.js – versioni di sviluppo/debugging
  • adapter – strato di astrazione per la convivenza di extjs con altri framework javascript diffusi (prototype, yui, jquery)
  • resources – risorse necessarie alla libreria (css e immagini)
  • docs – apidoc con il reference completo del framework
  • examples – esempi d’uso
  • package, build – sorgenti minificati pronti per essere riassemblati a piacimento
  • source – sorgenti completi e non minificati di tutti i moduli della libreria

Quickstart (3/4)

ApiDoc

ExtJS è dotata di una documentazione molto completa (contenente il reference dell’intera libreria) a cui è possibile accedere online:

http://extjs.com/deploy/dev/docs/

L’apidoc è contenuta comunque nell’SDK ed è consultabile offline.

Per accedere all’apidoc è necessario renderla accessibile attraverso HTTP (mediante un webserver)

A questo scopo è conveniente copiare (o link-are simbolicamente) la directory contenente extjs nella Document Root del proprio webserver locale.

Quickstart (4/4)

Basic Page

<html>
<head>
   <title>ExtJS Basic Page</title>
   <link rel="stylesheet" type="text/css"
       href="lib/ext/resources/css/ext-all.css" />
   <script src="lib/ext/adapter/ext/ext-base.js"></script>
   <script src="lib/ext/ext-all-debug.js"></script>
</head>
<body>
   <!-- Empty body -->
</body>
</html>

Hello World!

<html>
<head>
   <title>Hello World from ExtJS!!!</title>
   <link rel="stylesheet" type="text/css"
       href="lib/ext/resources/css/ext-all.css" />
   <script src="lib/ext/adapter/ext/ext-base.js"></script>
   <script src="lib/ext/ext-all-debug.js"></script>
   <script>
       Ext.onReady(function(){
            Ext.Msg.alert('Hello World (title)', 'Hello World from ExtJS!!! (content)');
       });
   </script>
</head>
<body>
   <!-- Empty body -->
</body>
</html>

ExtJS Basics

Terminato il caricamento del framework nello spazio globale Javascript sarà presente l’oggetto Ext, il quale costituisce:

Ext.onReady

Come con ogni altro framework Javascript che si rispetti anche ExtJS fornisce un comodo helper per far si che la nostra applicazione venga eseguita subito dopo il caricamento di tutto l’HTML (ma prima di aver caricato tutte le immagini).

Ext.onReady(function () {
  // YOUR CODE HERE
});

Ext.Msg

Ext.Msg (o Ext.MessageBox) è contenuta nel namespace costituito dall’oggetto Ext, ed è ha sua volta un oggetto singleton che raccoglie funzioni di utilità per la creazione di vari tipi di MessageBox:

Ext.Msg.alert('Hello World (title)', 'Hello World from ExtJS!!! (content)');
Ext.Msg.show({
    icon: Ext.MessageBox.QUESTION
    title: 'Hello',
    msg: 'Do you like ExtJS?',
    buttons: Ext.Msg.YESNOCANCEL,
});
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    if (btn == 'ok'){
        Ext.Msg.alert('ENTERED TEXT', text);
    }
});

Non-Blocking Code

RIGHT

Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    if (btn == 'ok'){
        Ext.Msg.alert('ENTERED TEXT', text);
    }
});

WRONG

result = Ext.Msg.prompt('Name', 'Please enter your name:');
Ext.Msg.alert('ENTERED TEXT', result);

});

JSON Config Object

La maggior parte delle funzioni (ma soprattutto i componenti) accettano la maggior parte delle opzioni attraverso un object di configurazione:

Ext.Msg.show({
    icon: Ext.MessageBox.QUESTION
    title: 'Hello',
    msg: 'Do you like ExtJS?',
    buttons: Ext.Msg.YESNOCANCEL,
});

JSON Config Object – Ext.apply

Mediante Ext.apply(dest,src,defaults) è possibile mescolare gli oggetti di configurazione tra di loro:

var baseconfig = { icon: Ext.MessageBox.QUESTION, buttons: Ext.Msg.YESNOCANCEL }

var myconfig = {};
Ext.apply(myconfig, { title: 'Hello', msg: 'Do you like ExtJS?'}, baseconfig );

Ext.Msg.show(myconfig);

Ext.get

Ext.get consente di selezionare singoli elementi DOM e di effettuarne un wrap con il prototype Ext.Element, contenente le funzioni di utilità ExtJS:

var el = Ext.get("my-text");

el.setWidth(200,true);
el.addClassOnOver(".highlight");

el.on('click', function(e) { Ext.Msg.alert("Msg","OK"); });

Ext.query

Ext.query e Ext.select consentono la selezione di elementi in stile jQuery:

var el = Ext.query("#my-text");

var m_el = Ext.select("#my-text li");

m_el.each(function (e) { e.highlight(); });

Ext.log

Nascosta tra le funzioni disponibili nella libreria in versione debugging c’è la funzione Ext.log!

Layout

Uno dei punti di forza di ExtJS è sicuramente costituito dai componenti di Layouting configurabili e componibili tra di loro:

var p = new Ext.Panel({
    title: 'Column Layout - Percentage Only',
    layout:'column',
    items: [{
        title: 'Column 1',
        columnWidth: .25 
    },{
        title: 'Column 2',
        columnWidth: .6
    },{
        title: 'Column 3',
        columnWidth: .15
    }]
});

Layout

var myBorderPanel = new Ext.Panel({
    renderTo: document.body,
    width: 700,
    height: 500,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region is resizable',
        region: 'south',     // position for region
        height: 100,
        split: true,         // enable resizing
        minSize: 75,         // defaults to 50 
        maxSize: 150,
        margins: '0 5 5 5'
    },{
        // xtype: 'panel' implied by default
        title: 'West Region is collapsible',
        region:'west',
        margins: '5 0 0 5',
        width: 200,
        collapsible: true,   // make collapsible
        cmargins: '5 5 0 5', // adjust top margin when collapsed
        id: 'west-region-container',
        layout: 'fit',
        unstyled: true
    },{
        title: 'Center Region',
        region: 'center',     // center region is required, no width/height specified
    	xtype: 'container',
    	layout: 'fit',
        margins: '5 5 0 0'
    }]
});

Ext.Panel

Ext.Panel è un componente di tipo container, il quale potrà contenere altri widget o altri container e a cui vengono applicati i layout.

Inoltre ogni pannello può contenere delle toolbar (top o bottom) e delle sezioni di header e footer, oltre alla sezione body.

Cos’è l’xtype?

Ad ogni componente ExtJS (i widget) è associato un xtype (una stringa identificativa) attraverso la quale ExtJS è in grado di istanziare dinamicamente i componenti a partire da una rappresentazione JSON delle caratteristiche dei componenti.

Ext.Viewport

new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        xtype: 'treepanel',
        width: 200,
        autoScroll: true,
        split: true,
        loader: new Ext.tree.TreeLoader(),
        root: new Ext.tree.AsyncTreeNode({
            expanded: true,
            children: [{
                text: 'Menu Option 1',
                leaf: true
            }, {
                text: 'Menu Option 2',
                leaf: true
            }, {
                text: 'Menu Option 3',
                leaf: true
            }]
        }),
        rootVisible: false,
        listeners: {
            click: function(n) {
                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
            }
        }
    }, {
        id: 'my-tabpanel',
        region: 'center',
        xtype: 'tabpanel',
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }, {
        region: 'south',
        title: 'Information',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }]
});

Ext.Viewport

Ext.Viewport è un altro container, il cui scopo è occupare tutto lo spazio disponibile nel browser e ridimensionare di conseguenza tutti i componenti contanuti (attraverso il rendering engine interno a ExtJS)

Ext.TabPanel

Ext.TabPanel è un componente che estende Ext.Panel allo scopo di implementare la classica vista a Tab presente in molte applicazioni desktop classiche:

new Ext.TabPanel({
        id: 'my-tabpanel',
        region: 'center',
        renderTo: document.body,
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
	}
});

Ext.TabPanel

Nuovi Tab possono essere aggiunti e selezionati dinamicamente attraverso i metodi di TabPanel:

Ext.getCmp('my-tabpanel').add({
  id: 'test-tab-1', 
  title: 'new tab', 
  html: 'some content'
});

Ext.getCmp('my-tabpanel').setActiveTab('test-tab-1');

Copyright (C) 2008 - Alca Societa' Cooperativa

http://alca.le.it - info@alca.le.it

released under CreativeCommons 2.5 by-nc-sa

NOTA: le immagini dei software e dei device contenuti
nella presentazione sono proprieta' dei relativi detentori
del copyright e sono state riprodotte a scopo esclusivamente didattico.