Creare applicazioni in Adobe AIR con Dreamweaver CS3

In questo post, forse più un breve tutorial, vedremo come sia possibile creare una desktop application (o più brutalmente ‘un lavoro in AIR’) partendo da un semplice documento HTML, formattato in stile web 2.0 attraverso i CSS 2.
Per prima cosa è indispensabile avere:
Dreamweaver CS3. In versione trial a 30 giorni scaricabile dal seguente link
L’estensione Adobe AIR
per Dreamweaver, gratuita e scaricabile dal seguente link.
Il Runtime di Adobe AIR (per installare/visualizzare i prodotti AIR). Gratuito e scaricabile da seguente link

Dopo l’installazione dell’estensione, apriamo Dreamweaver e impostiamo un sito utilizzando l’apposito pannello “Sito“. Questo pannello oltre a gestire il materiale contenuto nel nostro lavoro, ci permetterà di impostare anche il prodotto finale in AIR. Questo passaggio è pertanto obbligatorio, pena la non realizzazione del file in AIR. Vediamo quindi come impostare un sito.
Ovviamente necessitiamo di un lavoro da impostare, quindi, se volete, potete scaricare un mini sito di prova dal seguente link.

E’ un file zippato. Decomprimetelo in una cartella del vostro computer, quindi gestite il materiale tramite la voce di menu “Sito“, quindi “Nuovo Sito“. Come da immagine sottostante:

Ne approfitto per far notare come l’estensione di AIR appena installata abbia anche aggiunto due voci di menu apposite per lavorare in AIR: Air Application Settings… e Create AIR File. Quelle che appunto useremo noi. Ma andiamo con ordine.

Ora nelle seguenti schermate di impostazioni del sito, selezionate la cartella dove avete il vostro materiale, o dove avete salvato il nostro esempio. Non è necessario impsotare un server di prova se lavorate con l’esempio che avete scaricato, ne un linguaggio server-side (ASP, PHP, ecc..) visto che non ne avremo bisogno.

Ora aprendo l’unica pagina presente nell’esempio (home.html) oppure la pagina del vostro esempio, clicchiamo sulla voce di menu “Sito” quindi su “AIR Application Settings..“.
Una volta aperto il pannello completiamolo come illustrato nell’immagine sottostante (per uno zoom potete cliccare sulla foto).
Come vedete sono semplici impostazioni. Ma molto importanti.
I primi campi “File Name“, “ID“, “Version” e “Initial Content“, sono tutti obbligatori e personalizzabili senza limitazioni.
Ovviamente dobbiamo impostare una pagina iniziale (come l’home page per i siti internet) in “Initial Content”.
Il “Window style” impostato su “System Chrome” permetterà ad AIR di visualizzare il nostro lavoro all’interno di una finestra di sistema di Windows (sfruttandone appunto il colore di sistema, come fosse una normale finestra). Le altre due possibile opzioni invece permettono di rendere la finestra trasparente, facendo sparire i bordi delle finestre di Windows ma anche i classici pulsanti di riduzione a icona, chiusura e allargamento della finestra. Ovviamente in questi casi dovremmo sfruttare delle funzioni Javascript per chiudere la finestra altrimenti non avremmo nulla che possa farlo (eccetto ovviamente la combinazione di tasti: ALT+F4).Lasciamo inalterate le due successive opzioni.
Nella parte “Installer Settings” dobbiamo aggiungere nel pannello “Included files” anche le cartelle dei CSS e delle IMG per le immagini cliccando su “+” o “-“ se vogliamo aggiungere singoli file o sul simbolo della cartella per aggiungere intere cartelle al progetto . Ricordatevi sempre infatti che all’interno di ogni progetto AIR dobbiamo inserire tutti gli elementi che compongono il nostro lavoro.
Manca solo un’ultima cosa: la firma digitale.
Ora, nessuno di noi è un produttore di software, quindi creeremo una firma digitale fittizia.
Per fare ciò clicchiamo sulla voce “Set” di “Digital signature“.
Nel successivo pannello, clicchiamo su “Create“.
Quindi nel nuovo e ultimo pannello, inseriamo i dati appositi. Salviamo il file ed impostiamo le password richieste.
Tornando al pannello di impostazioni di AIR possiamo ora creare il nostro file AIR, cliccando su “Create AIR file“.
Al termine troveremo il nostro file AIR pronto per l’installazione.
Basterà aprire il file per avviare il processo di installazione di AIR.
Così facendo il nostro file sarà installato sulla macchina. Troveremo un icona sul desktop e per disinstallarlo (meraviglia!) basterà andare in “Installazioni Applicazioni” e trovarlo in elenco per poterlo disinstallare. Come un programma comune.

Finalmente chi conosce i linguaggi del Web potrà ora tagliarsi una fetta di spazio nel mondo dello sviluppo Desktop.

Buon divertimento!



2 commentss on “Creare applicazioni in Adobe AIR con Dreamweaver CS3

  1. Fabio Bernardi scrive:

    >Basta impostare nel pannello "AIR – Application & Install Settings" l'opzione "Window Style" su "Custom Chrome (transparent)". Ovviamente intendendo CHIUDI, RIPRISTINA e Riduci a ICONA come i pulsanti del Sistema Operativo (Windows/Mac…)

  2. Luka scrive:

    >Buongiorno a tutti vorrei sapere se e possibile eliminare i tasti CHIUDI, RIPRISTINA, e ICONA di un applicazione AIR creata tramite Dreamweaver.

Lascia un Commento

CeamiI

Please type the text above: