×

Error message

The spam filter installed on this site is currently unavailable. Per site policy, we are unable to accept new submissions until that problem is resolved. Please try resubmitting the form in a couple of minutes.
enrico.gramellini's picture

Sencha Cmd è uno strumento cross-platform a linea di comando che permette, attraverso una serie di tool, di automatizzare molte operazioni legate al tipico ciclo di vita di un'applicazione, dalla creazione di un nuovo progetto al deploy in produzione dell'applicazione.

In questo post saranno analizzati in dettaglio alcuni tool che permettono in particolare la creazione ed il theming di un'applicazione realizzata con ExtJS 4.2.

Requisiti

Per utilizzare gli strumenti forniti da Sencha Cmd è necessario configurare il sistema nel quale si svilupperà l'applicazione in modo tale che presenti i seguenti requisiti:

  • Deve essere installata preferibilmente l'ultima versione della JRE Java;
  • La libreria ExtJS 4.2 in tutta la sua completezza deve risiedere nel sistema locale;
  • Deve essere installato Ruby con versione >= 1.9.3;
  • Deve essere installato Sencha Cmd 3.

Creazione di un nuovo progetto

Con il sistema locale correttamente configurato si può procedere con la creazione di un nuovo progetto ExtJS 4.2.

Dopo aver aperto un terminale a linea di comando, posizionarsi nella directory dentro alla quale risiederà il workspace di lavoro.

Dopodichè eseguiamo il primo comando Sencha Cmd proprio per creare il workspace:

$ sencha -sdk [PATH]/ext-4.2.0 generate workspace my-workspace

Tale comando va completato specificando il percorso nel quale è stata salvata in locale l'SDK di ExtJS ed ha l'effetto di creare una directory chiamata in questo caso my-workspace, dentro la quale sarà copiata l'SDK di ExtJS e sarà creata una directory atta a contenere eventuali package di Sencha (in seguito ne vedremo un esempio proprio quando sarà creato il tema dell'applicazione).

A questo punto, definito il workspace, è possibile creare l'applicazione ExtJS che chiameremo ThemeDemoApp e che sarà organizzata all'interno della directory theme-demo-app; il tutto è possibile digitando il seguente comando all'interno della directory del workspace appena creato:

$ sencha -sdk ext generate app ThemeDemoApp theme-demo-app

Spostandoci ora all'interno della directory relativa all'applicazione appena creata, è possibile notare come sia già stato creato un prototipo di applicazione ExtJS: partendo da esso è possibile quindi iniziare già a sviluppare l'applicazione creata.

Il successivo comando Sencha Cmd utile al ciclo di sviluppo di un'applicazione riguarda la fase di deploy; tale fase consiste nel produrre, a partire dalla versione di sviluppo dell'applicazione, una versione ottimizzata contenente solamente l'indispensabile per poter eseguire regolarmente l'applicazione su un ambiente di produzione; il seguente comando, eseguito all'interno della directory dell'applicazione, avvia tale fase:

$ sencha app build

La fase di build appena illustrata si avvale di un file di configurazione dell'applicazione che ne descrive alcune proprietà. Alterando questo file, per rendere effettive le modifiche apportate (ad esempio il cambio di un tema), è necessario ricompilare l'applicazione per rigenerare la versione di produzione: come passo preliminare è però sempre buona norma effettuare una clean dell'applicazione con il seguente comando:

$ sencha ant clean

L'effetto della clean è semplicemente quello di cancellare il contenuto della directory contenente la versione di produzione.

Theming

Anche la generazione di un tema personalizzato per l'applicazione appena creata è supportata da Sencha Cmd.

Creare un tema significa creare un package all'interno del workspace che può essere utilizzato dalle applicazioni create al suo interno.

Per creare un tema personalizzato è necessario eseguire dall'interno della directory di un'applicazione il seguente comando:

$ sencha generate theme my-custom-theme

Un tema può estenderne uno già esistente e di default un tema appena creato è un estensione del tema predefinito in ExtJS chiamato ext-theme-classic.
Per impostare un estensione differente è necessario editare il file package.json collocato all'interno della directory del tema (nel nostro caso packages/my-custom-theme/package.json) sostituendo il nome presente come valore per la chiave "extend" con il nome del tema desiderato.

Per poter utilizzare il tema creato è necessario compilarlo posizionandosi all'interno della sua directory eseguendo il seguente comando:

$ sencha package build

La compilazione di un tema deve essere eseguita anche ogni volta che viene inserito/modificato un componente del tema stesso. Per avere a disposizione la nuova versione compilata anche all'interno dell' applicazione che lo utilizza è necessario ricompilare anche quest'ultima (prima andrebbe eseguita anche la clean).

L'ultimo passaggio consiste nel configurare l'applicazione in modo tale che possa utilizzare il tema personalizzato creato: per fare ciò è necessario sostituire all'interno del file di configurazione dell'applicazione (theme-demo-app/.sencha/app/sencha.cfg) il nome del tema inserendo quello nuovo.

app.theme=my-custom-theme

Anche in questo caso trattandosi di una modifica ad un file di configurazione è necessario ricompilare l'applicazione con i soliti comandi di clean e di build.

Per quanto riguarda la personalizzazione del tema è consigliata la lettura della guida presente nella documentazione di ExtJS 4.2 raggiungibile al seguente link, all'interno della quale è illustrato come è possibile agire per ottenere i risultati desiderati.

Un'altra guida interessante relativa ai contenuti presenti in questo post è raggiungibile al seguente link e descrive altri comandi di Sencha Cmd utili allo sviluppo di un'applicazione ExtJS.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.