Sencha Touch - Guida rapida
Sencha Touch è un framework popolare di Sencha per la creazione di un'interfaccia utente per applicazioni mobili. Aiuta lo sviluppatore a creare un'app mobile utilizzando semplici HTML, CSS, JS che supporta molti dispositivi mobili come Android, IOS, BlackBerry e Windows. Si basa sull'architettura MVC. L'ultima versione di Sencha Touch è la 2.4.
Storia di Sencha Touch
Dopo aver rilasciato l'altro prodotto di Sencha, ExtJs, che era per applicazioni web, c'era la necessità di sviluppare un framework che funzionasse anche su dispositivi mobili.
La prima versione di Sencha Touch era la versione 0.9 beta, che supportava i dispositivi Android e IOS. Successivamente, la prima versione principale di Sencha Touch versione 1.0 è stata nel novembre 2010, che era la prima versione stabile e supportava anche i dispositivi Blackberry.
L'ultima versione di Sencha Touch è la versione 2.4 rilasciata a giugno 2015, che supporta molti dispositivi come Windows, Tizen insieme ad Android, IOS, BlackBerry OS 10, Google Chrome per Android e Safari mobile, ecc.
Caratteristiche di Sencha Touch
Di seguito sono riportate le caratteristiche più importanti di Sencha Touch:
Personalizzabili e oltre 50 widget dell'interfaccia utente incorporati con una raccolta di un'interfaccia utente ricca come elenchi, caroselli, moduli, menu e barre degli strumenti, creati appositamente per le piattaforme mobili.
Compatibilità del codice delle nuove versioni con quella precedente.
Un gestore di layout flessibile che aiuta a organizzare la visualizzazione di dati e contenuti su più dispositivi mobili con sistemi operativi diversi.
Il framework include un robusto pacchetto di dati in grado di utilizzare i dati da qualsiasi origine dati di backend.
Layout adattivi, animazioni e scorrimento fluido per una migliore esperienza d'uso dell'applicazione Web mobile.
Temi pronte all'uso e dall'aspetto nativo per tutte le principali piattaforme consentono di far corrispondere le applicazioni web e ibride all'aspetto delle piattaforme di destinazione.
Sencha Touch ─ Vantaggi
Sencha Touch è lo standard principale per lo sviluppo di applicazioni web di livello aziendale. Offre gli strumenti necessari per creare applicazioni robuste per la maggior parte dei dispositivi mobili fornendo un'unica piattaforma per lo sviluppo di applicazioni. Di seguito sono riportati alcuni dei vantaggi:
Fornisce una funzionalità tattile reattiva, quindi l'utente può facilmente navigare durante l'utilizzo dell'app mobile.
Fornisce compatibilità con tutte le ultime versioni di IOS, Android, Blackberry e Windows.
Fornisce la massima velocità possibile desiderabile per qualsiasi applicazione mobile.
Fornisce una soluzione conveniente grazie alla sua compatibilità multipiattaforma.
Basato sulle API native e sui linguaggi di sviluppo web di base come HTML, CSS, JS che rendono più facile per uno sviluppatore comprendere Sencha Touch.
Sencha Touch ─ Limitazioni
Sencha Touch API non ha le seguenti funzionalità:
L'app non ha accesso alla fotocamera, ai contatti e all'accelerometro del dispositivo.
Non fornisce la funzione di notifica push. Per questo, dobbiamo usare websocket o polling lungo.
Secondo la politica di licenza pubblica generale, è gratuito per le applicazioni open source, ma a pagamento per le applicazioni commerciali.
Non va bene per la grafica hardcore e le app di animazione come per le app di gioco.
Sencha Touch ─ Strumenti
Sencha SDK
Questo è il kit di sviluppo Sencha utilizzato per creare uno scheletro del progetto. Usiamo il comando "sencha -sdk path / to / touch generate app appName" per creare un'app con il nome dato nel comando.
Quando l'app viene creata, puoi vedere i seguenti file nell'app:
app - Questa cartella contiene il modello, la vista, il controller e i file di archivio per l'app.
app.js- Questo è il file JS principale per la tua applicazione. Da questo file inizia il flusso del codice Sencha.
app.json - Questo è il file di configurazione per l'app, tutti i dettagli di configurazione sono presenti qui.
index.html - Questo è il file html principale in cui includiamo app.js e altri file relativi a Sencha.
package.json - Questo file contiene tutte le dipendenze e altre informazioni relative all'app.
resources - Questa cartella include tutti i file CSS e le immagini necessari per l'applicazione.
Sencha CMD
Sencha CMD è uno strumento a riga di comando che fornisce le funzionalità di minimizzazione del codice Sencha Touch, scaffolding, generazione di build e altre utili funzionalità per scopi di produzione.
Usiamo il comando "Sencha app build package" nel prompt dei comandi per creare l'applicazione per questo. Vai alla directory dell'app nel prompt dei comandi e digita il comando precedente. Una volta che la compilazione ha esito positivo, vedremo la versione ridotta dell'applicazione utilizzata fondamentalmente per scopi di produzione.
Questo può essere scaricato da https://www.sencha.com/products/extjs/cmd-download/
Ispettore Sencha
Sencha Inspector è uno strumento di debug per eseguire il debug di qualsiasi problema nel codice Sencha durante lo sviluppo.
Configurazione dell'ambiente locale
Questa sezione ti guida su come scaricare e configurare Sencha Touch sulla tua macchina. Segui i passaggi per configurare l'ambiente.
Download dei file della libreria
Scarica una versione commerciale dei file della libreria Sencha Touch dal seguente collegamento https://www.sencha.com. Otterrai la versione di prova dal sito sul tuo ID di posta registrato, che sarà una cartella compressa denominata sencha-touch-2.4.2-commercial.
Decomprimi la cartella e troverai vari file JavaScript e CSS da includere nella tua applicazione. Includere principalmente i seguenti file:
Javascript Files - Il file JS che puoi trovare nella cartella \ sencha-touch-2.4.2commercial \ touch-2.4.2 sono -
Suor n | Descrizione del file |
---|---|
1 | sencha-touch.js Questo è il file principale che contiene tutte le funzionalità per eseguire l'applicazione. |
2 | sencha-touch-all.js Questo file contiene tutto il codice minimizzato senza commenti nel file. |
3 | sencha-touch-debug.js Questa è la versione non ridotta di sencha-touch-all.js a scopo di debug. |
4 | sencha-touch-all-debug.js Anche questo file non è minimizzato e viene utilizzato per scopi di sviluppo in quanto contiene tutti i commenti e i registri della console per verificare eventuali errori / problemi. |
È possibile aggiungere questi file alla cartella JS dei progetti oppure fornire un percorso diretto in cui risiedono i file nel sistema.
CSS Files - Esistono numerosi file basati su temi che puoi trovare nella cartella I: \ sencha touch \ sencha-touch-2.4.2-commercial \ touch-2.4.2 \ resources \ css \ sencha-touch.css
Questi file di libreria verranno aggiunti nell'applicazione Sencha Touch come segue:
<html>
<head>
<script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>
<link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>
Puoi mantenere il codice dell'applicazione Sencha Touch nel file app.js.
Configurazione CDN
CDN è una rete di distribuzione di contenuti con la quale non è necessario scaricare i file della libreria Sencha Touch, ma è possibile aggiungere direttamente il collegamento CDN per ExtJS al programma come segue:
<html>
<head>
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
<script type = "text/javascript" src = "app.js" > </script>
</head>
</html>
Redattori popolari
Poiché è un framework JavaScript utilizzato per lo sviluppo di applicazioni web, il progetto avrà HTML, file JS e per scrivere i tuoi programmi Ext JS, avrai bisogno di un editor di testo. Ci sono più IDE disponibili sul mercato. Ma per ora, puoi considerare uno dei seguenti:
Notepad - Su una macchina Windows, puoi utilizzare qualsiasi semplice editor di testo come Blocco note (consigliato per questo tutorial), Blocco note ++.
Brackets - Un altro IDE popolare che può essere scaricato da http://brackets.io/ .
Sublime - Un altro IDE popolare che può essere scaricato da https://www.sublimetext.com/3/ .
Naming conventionè un insieme di regole da seguire per gli identificatori. Rende il codice facilmente leggibile e comprensibile anche per altri programmatori.
La convenzione di denominazione in Sencha Touch segue la convenzione JavaScript standard, che non è obbligatoria ma è una buona pratica da seguire. Dovrebbe seguire la sintassi del caso cammello per nominare la classe, il metodo, la variabile e le proprietà.
Se il nome è combinato con due parole, la seconda parola inizierà sempre con una lettera maiuscola. Ad esempio, doLayout (), StudentForm, firstName, ecc.
Sr.No. | Nome e convenzione |
---|---|
1 | Class Name Dovrebbe iniziare con una lettera maiuscola, seguita da lettere maiuscole. Ad esempio, StudentClass |
2 | Method Name Dovrebbe iniziare con una lettera minuscola, seguita da lettere maiuscole. Ad esempio, studentMethod () |
3 | Variable Name Dovrebbe iniziare con una lettera minuscola, seguita da lettere maiuscole. Ad esempio, studentName |
4 | Constant Name Dovrebbe essere solo in maiuscolo. Ad esempio, COUNT, MAX_VALUE |
5 | Property Name Dovrebbe iniziare con una lettera minuscola, seguita da lettere maiuscole. Ad esempio, enableColumnResize = true |
Lo strato inferiore per qualsiasi applicazione mobile è il sistema operativo, per di più viene costruito qualsiasi cosa o tutto. Quindi abbiamo i browser su cui eseguiremo le applicazioni. Potrebbe essere Chrome, Safari, IE qualsiasi cosa. Lo strato superiore è uno standard W3, comune a tutti. Sencha Touch sta o è costruito sulla base degli standard W3, che non è altro che HTML5, che rende una singola applicazione compatibile con diversi browser di diversi dispositivi.
Sencha Touch è una combinazione di tre framework: ExtJs, JqTouch e Raphael (disegno vettoriale). Segue l'architettura MVC. MVC separa il codice in blocchi più gestibili.
Sebbene l'architettura non sia obbligatoria per il programma, tuttavia, è consigliabile seguire questa struttura per rendere il codice altamente manutenibile e organizzato.
Struttura del progetto con l'app Sencha Touch
----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files
La cartella dell'app Sencha Touch risiederà nella cartella JavaScript del tuo progetto.
L'app conterrà file di controller, visualizzazione, modello, archivio e utilità con app.js.
app.js- Il file principale da cui inizierà il flusso del programma. Dovrebbe essere incluso nel file HTML principale utilizzando il tag <script>. L'app chiama il controller dell'applicazione per il resto della funzionalità.
Controller.js- È il file del controller dell'architettura Sencha Touch MVC. Contiene tutto il controllo dell'applicazione, i listener di eventi e la maggior parte delle funzionalità del codice. Esegue le seguenti attività: instradamento, intermedio tra vista e modello ed esegue eventi.
View.js- Contiene la parte dell'interfaccia dell'applicazione, che si presenta all'utente. Sencha Touch utilizza varie visualizzazioni ricche di interfaccia utente, che possono essere estese e personalizzate in base alle esigenze.
Store.js- Contiene i dati memorizzati nella cache locale, che devono essere visualizzati a vista con l'aiuto di oggetti del modello. Store recupera i dati utilizzando proxy, che ha il percorso definito per i servizi per recuperare i dati di backend.
Model.js- Contiene gli oggetti che vincolano i dati del negozio da visualizzare. È la rappresentazione dell'oggetto del mondo reale, che fondamentalmente si occupa del database.
Utils.js- Non è incluso nell'architettura MVC ma è buona norma utilizzarlo in modo da rendere il codice pulito, meno complesso e più leggibile. Possiamo scrivere metodi in questo file e chiamarli nel controller o visualizzare il renderer dove richiesto. È utile anche ai fini della riutilizzabilità del codice.
MVC sta per Model View Controller. È un modello architettonico che separa l'applicazione in componenti logiche rendendola più gestibile.
Il diagramma seguente mostra come funziona l'architettura MVC:
Controller - Il controller controlla l'intera applicazione e notifica alla vista se il modello viene modificato ed esegue azioni in base agli input dell'utente.
View- Contiene la parte dell'interfaccia dell'applicazione che è visiva per l'utente. Notifica al controller di cambiare modello su input dell'utente.
Model- Contiene gli oggetti che vincolano i dati del negozio da visualizzare. È la rappresentazione dell'oggetto del mondo reale che fondamentalmente si occupa di database. Notifica inoltre al controller qualsiasi cambiamento in vista.
In questo capitolo, elencheremo i passaggi per scrivere il primo programma Hello World in Ext JS.
Passo 1
Crea una pagina index.htm in un editor di nostra scelta. Includere i file di libreria richiesti nella sezione principale della pagina html come segue.
index.htm
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
</script>
<script type = "text/javascript">
Ext.application( {
name: 'Sencha', launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true, items: [{
title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
<body>
</body>
</html>
Spiegazione
Il metodo Ext.application () è il punto di partenza dell'applicazione Sencha Touch. Crea una variabile globale chiamata 'Sencha' dichiarata con la proprietà name: tutte le classi dell'applicazione come i suoi modelli, viste e controller risiederanno in questo singolo spazio dei nomi, il che riduce le possibilità di collisione tra variabili globali e nomi di file.
Il metodo launch () viene chiamato una volta che la pagina è pronta e tutti i file JavaScript sono stati caricati.
Il metodo Ext.create () viene utilizzato per creare un oggetto in Sencha Touch. Qui, stiamo creando un oggetto di semplice classe pannello Ext.tab.Panel.
Ext.tab.Panel è la classe predefinita in Sencha Touch per la creazione di un pannello.
Ogni classe Sencha Touch ha proprietà diverse per eseguire alcune funzionalità di base.
La classe Ext.Panel ha varie proprietà come:
fullscreen proprietà è quella di utilizzare uno schermo completo, quindi il pannello occuperà spazio a schermo intero.
items la proprietà è il contenitore di vari articoli.
iconCls è la classe utilizzata per visualizzare le diverse icone.
title proprietà è fornire il titolo al pannello.
html proprietà è il contenuto html da mostrare nel pannello.
Passo 2
Apri il file index.htm in un browser standard e otterrai il seguente output.
La richiesta odierna di un'applicazione web è quella di sviluppare un'applicazione veloce con meno sforzi di sviluppo. Sencha Touch aiuta a farlo con facilità in quanto fornisce una serie di librerie di build tra cui scegliere, in base al codice di sviluppo o di produzione insieme alla struttura per creare una build personalizzata.
Le librerie di build Sencha Touch caricano le classi in modo dinamico. Il caricamento dinamico indica le classi che vengono caricate quando richiesto e verranno incluse solo quelle classi richieste nell'applicazione. Ciò rende l'applicazione più veloce poiché il numero di file da caricare si riduce, diminuendo contemporaneamente il tempo di caricamento.
Sencha Touch 2.x fornisce le seguenti cinque librerie di build.
Sr.No. | Build e utilizzo |
---|---|
1 | sencha-touchdebug.js Questa build viene utilizzata durante lo sviluppo dell'applicazione in locale. È una versione non minimizzata con tutti i commenti e i log di debug per un facile debug durante lo sviluppo. |
2 | senchatouch.js Questo file viene utilizzato per scopi di produzione. È la versione minimizzata quando abbiamo una build personalizzata. |
3 | sencha-touchall.js Questo file viene utilizzato per scopi di produzione. È la versione minimizzata quando non abbiamo una build personalizzata. |
4 | sencha-touchall-debug.js Questo file viene utilizzato per il debug in produzione. Non è minimizzato e contiene tutti i commenti e i log di debug. |
5 | sencha-touchall-compat.js Questa build viene utilizzata per migrare la versione 1.x alla versione 2.x. Fornisce un avviso ogni volta che il codice della versione 1.x non è compatibile e necessita di modifiche al codice. |
Con le build sopra menzionate, Sencha Touch fornisce una struttura per creare build personalizzate.
Vantaggi di avere una build personalizzata
La build personalizzata non carica tutti i file touch. Carica solo quei file che stiamo usando nell'applicazione, il che rende l'applicazione più veloce e facilmente gestibile.
Sencha CMD viene utilizzato per creare una build personalizzata. Per creare una build personalizzata in Sencha CMD, vai alla directory in cui risiede il file dell'app e digita uno dei seguenti comandi per creare una build.
Sr.No. | Comando e utilizzo |
---|---|
1 | sencha app build native Compila l'app e prepara un file chiamato packager.temp.json che puoi utilizzare per creare il pacchetto di un'applicazione: packager.temp.json è uguale a packager.json, ma contiene percorsi aggiuntivi. |
2 | sencha app build -run native Crea e crea automaticamente il pacchetto dell'applicazione e avvia il simulatore appropriato. |
3 | sencha app build package Compila l'app con il supporto per la creazione di pacchetti, ma non configura un file JSON di packager. Ciò è utile per i progetti che gestiscono manualmente più file packager.json. |
Una volta che la compilazione ha successo, genererà il file all-classes.js che dobbiamo includere nel nostro index.html per renderlo pronto per la produzione.
Il codice seguente mostra le modifiche da apportare per il codice pronto per la produzione.
Index.html before building application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
</head>
<body>
</body>
</html>
Index.html after building the application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
<script type = "text/javascript" src = "app-classes.js"> </script>
</head>
<body>
</body>
</html>
Sencha Touch viene fornito con varie rettifiche rispetto alla versione precedente.
Sencha Touch 2 viene fornito con la build di compatibilità con le versioni precedenti, che semplifica il processo di migrazione dalla versione 1.x alla 2.x.
Questa build semplifica il lavoro fornendo un avviso e i log ogni volta che si verifica un problema di migrazione o è richiesta una modifica del codice, in modo che l'utente possa sapere dove sono necessarie le modifiche, per assicurarsi che l'applicazione funzioni con la versione più recente.
La migrazione di Sencha Touch 2.x richiede le seguenti modifiche al codice.
Sistema di classi
Code in Sencha Touch 1.x -
MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
scroll: 'vertical',
html: 'Student Panel'
initComponent: function() {
Ext.getCmp('StudentIdDiv').update('This is a Student panel');
}
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentPanel', {
extend: 'Ext.Panel',
config: {
scroll: 'vertical',
html: 'Student Panel'
},
initialize: function() {
Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
}
});
Guardando entrambe le versioni, puoi vedere il modo per creare la classe sono i cambiamenti che ora sono ispirati da ExtJ come:
Ext.extend viene modificato in Ext.define.
Tutti i parametri di configurazione relativi alla classe sono ora definiti nel parametro config.
Il metodo initComponent viene modificato nel metodo initialize ().
In Sencha Touch 2.x, possiamo avere le funzioni setHtml () e getHtml () per aggiornare html o per ottenere il valore.
Architettura MVC
Il codice Sencha Touch 1.x era modulare e basato sull'architettura MVC. Sencha Touch 2.x segue una sintassi diversa per la scrittura di modello, visualizzazione e controller. Vediamo la differenza dei file di modello, vista e controller nelle diverse versioni.
Modello
Code in Sencha Touch 1.x -
Ext.regModel('MyApp.model.StudentModel', {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.model.StudentModel', {
extend: 'Ext.data.Model', config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
}
});
Ext.regModel viene modificato in Ext.define che estende Ext.data.Model.
Tutti i campi sono ora nella sezione di configurazione nella versione 2.x.
Visualizza
Code in Sencha Touch 1.x -
Ext.Panel("studentView", {
items: [{}]
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentView', {
extend: 'Ext.tab.Panel',
items: [{}]
});
La vista è quasi la stessa, l'unica modifica è che il nome della vista segue lo spazio dei nomi della versione 2.x come Myapp.view.StudentView e il codice viene scritto nel metodo Ext.define come modello simile.
Controller
Code in Sencha Touch 1.x -
Ext.regController("studentController", {
someMethod: function() {
alert('Method is called');
}
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.controller.studentController', {
extend: 'Ext.app.Controller', someMethod: function() {
alert('Method is called');
}
});
Lo stesso del modello nel controller. Anche Ext.regController viene modificato in Ext.define, che estende Ext.app.Controller.
Applicazione
Code in Sencha Touch 1.x -
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.StudentView');
}
});
Code in Sencha Touch 2.x -
Ext.application({
name: 'MyApp',
models: ['studentModel'],
controllers: ['studentController'],
views: ['studentView'],
stores: ['studentStore'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});
La principale differenza tra la versione 1.x e la versione 2.x è che in 2.x dichiariamo tutti i modelli, le viste, i controller e gli archivi nell'applicazione stessa.
Sencha Touch ha vari concetti fondamentali come sistema di classe, ajax, controller, ecc.
La tabella seguente elenca il collegamento ai concetti fondamentali di Sencha Touch.
Sr.No. | Collegamento concetto e descrizione |
---|---|
1 | Sistema di classi |
2 | Componenti |
3 | Controller |
4 | Supporto BlackBerry |
5 | Uso di Ajax |
Il pacchetto dati in Sencha Touch è responsabile dell'esecuzione di qualsiasi tipo di manipolazione dei dati, memorizzando o caricando i dati.
I pacchetti di dati sono correlati a modello, archivio e proxy.
Sr.No. | Collegamento concetto e descrizione |
---|---|
1 | Model È la raccolta di dati e campi con cui visualizziamo tutti i valori sull'interfaccia utente. Descrizione |
2 | Store È una raccolta di istanze del modello che sostanzialmente memorizza i dati localmente. In negozio scriviamo tutti gli eventi e restano chiamate per ottenere dati. Descrizione |
3 | Proxy È fondamentalmente responsabile del caricamento dei dati in negozio. Per lo più usiamo il proxy Ajax per caricare i dati del negozio. Descrizione |
Sencha Touch fornisce una serie di temi da utilizzare nelle tue applicazioni. È possibile aggiungere diversi temi al posto del tema classico e vedere la differenza nell'output in base al dispositivo che stiamo utilizzando per l'applicazione. Questo viene fatto semplicemente sostituendo il file CSS del tema come spiegato nell'esempio seguente.
Tema del desktop
Considera la tua prima applicazione Hello World. Il seguente CSS dall'applicazione viene utilizzato per il tema del desktop.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Per vedere l'effetto, prova il seguente programma:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Questo produrrà il seguente risultato:
Tema di Windows
Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Aggiungi il seguente CSS per utilizzare il tema di Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css
Per vedere l'effetto, prova il seguente programma:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Questo produrrà il seguente risultato:
Tema IOS
Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Aggiungi il seguente CSS per utilizzare il tema di Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css
Per vedere l'effetto, prova il seguente programma:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Questo produrrà il seguente risultato:
Tema classico IOS
Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Aggiungi il seguente CSS per utilizzare il tema di Windows:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css
Per vedere l'effetto, prova il seguente programma:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Questo produrrà il seguente risultato:
Tema Android
Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Aggiungi il seguente CSS per utilizzare il tema di Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css
Per vedere l'effetto, prova il seguente programma:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Questo produrrà il seguente risultato:
Tema BlackBerry
Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Aggiungi il seguente CSS per utilizzare il tema di Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css
Per vedere l'effetto, prova il seguente programma:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Questo produrrà il seguente risultato:
Nel mondo delle tecnologie di oggi, abbiamo più dispositivi come cellulari, tablet, desktop e laptop con schermi di diverse dimensioni. Quindi, è necessario sviluppare applicazioni che siano accessibili da tutti i dispositivi con un aspetto gradevole. Tuttavia, lo sviluppo di un codice diverso per dispositivi diversi richiede molto tempo e denaro.
Sencha Touch ci aiuta in questo senso, offrendo una funzione di profilo del dispositivo. In base al profilo attivo, le diverse dipendenze verranno eseguite e applicabili.
Possiamo dichiarare il profilo del dispositivo durante la scrittura di un codice dell'applicazione. Possiamo avere più dispositivi come:
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});
Al termine, i profili verranno caricati come:
- MyApp.profiles.Phone.js
- MyApp.profiles.Tablet.js
Scrivere un semplice profilo telefonico
Ext.define('Mail.profile.Phone', {
extend: 'Ext.app.Profile',
config: {
name: 'Phone',
views: ['phoneView']
},
isActive: function() {
return Ext.os.is('Phone');
}
});
Scrivere un semplice profilo per tablet
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet',
views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
});
Come possiamo vedere nel profilo, abbiamo la funzione isActive che determina se il particolare dispositivo è attivo. Se il dispositivo è attivo, le dipendenze corrispondenti verranno caricate e istanziate.
Come menzionato nell'esempio precedente, se stiamo utilizzando un dispositivo telefonico, la funzione isActive del profilo del telefono restituirà true e verranno caricate le dipendenze relative al dispositivo telefonico; qui verrà caricato phoneView. Se il dispositivo è un tablet, la funzione isActive del profilo del telefono restituirà false e la funzione isActive del profilo del tablet restituirà true e verrà caricata la dipendenza tabletView.
Processo di avvio
Un altro punto da notare qui è quando abbiamo profili nell'applicazione, quindi il caricamento e l'istanza del codice dell'applicazione saranno nel seguente ordine:
- I controller vengono istanziati per primi e verrà caricata la funzione di inizializzazione di ciascun controller.
- Verrà chiamata la funzione di avvio del profilo.
- Verrà chiamata la funzione di avvio dell'applicazione.
Entrambe le funzioni di avvio del profilo e dell'applicazione sono opzionali, quindi se non ne definiamo nessuna non verranno chiamate.
Dai un'occhiata al codice seguente per verificare dove e come possono essere definite le diverse funzioni di avvio e init.
Funzione di inizializzazione del controller
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init : function (){
Ext.Msg.alert('Controller's init method');
},
config: {
refs: {
tab: '#divId
}
}
});
Funzione di lancio del profilo
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet', views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
launch : function() {
Ext.Msg.alert('profile's launch function');
}
});
Funzione di avvio dell'applicazione
Ext.application({
name: 'Sencha', launch: function() {
Ext.Msg.alert(Application's launch function);
}
});
Ci sono alcuni modi definiti in Sencha Touch per dichiarare le dipendenze, una all'interno dell'applicazione e l'altra all'interno delle classi.
Diamo un'occhiata ai diversi modi per definire le dipendenze.
Dipendenze a livello di applicazione
Qui, dichiariamo tutte le dipendenze quando creiamo Ext.application.
Ext.application({
name: 'MyApp',
views: ['StudentsView'],
models: ['StudentsModel'],
controllers: ['StudentsController'],
stores: ['StudentsStore'],
profiles: ['Phone', 'Tablet']
});
Ora, quando l'applicazione viene caricata, tutte le dipendenze verranno caricate contemporaneamente. Il percorso degli altri file sarà:
- MyApp.views.StudentsView
- MyApp.models.StudentsModel
- MyApp.stores.StudentsStore ecc.
Il modo di dichiarazione di cui sopra non solo carica il file, ma decide anche quale profilo deve mantenere attivo. Dopo aver caricato il controller, si assicura di istanziarlo. Una volta caricati i negozi, li istanzia e fornisce un ID se non è già stato fornito.
Dipendenze specifiche del profilo
Quando si utilizzano profili in un'applicazione, è possibile che poche funzionalità siano necessarie solo per alcuni profili specifici.
Le dipendenze specifiche del profilo vengono dichiarate nei profili stessi anziché nella dichiarazione a livello di applicazione.
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile', config: {
views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
}
});
Le dipendenze vengono caricate indipendentemente dal profilo attivo o meno. Tuttavia, in base al profilo attivo, vengono eseguite ulteriori elaborazioni come la creazione di istanze di controller e archivi.
Dipendenze annidate
Quando abbiamo un'applicazione più ampia, abbiamo più controller, modelli, visualizzazioni e negozi.
È sempre bene mantenere la modularità nelle applicazioni più grandi. Per questo, possiamo definire le sottocartelle e durante la dichiarazione delle dipendenze possiamo usare il nome della sottocartella per dichiarare.
Ext.application({
name: 'MyApp',
controllers: ['Controller', 'nested.NewController'],
views: ['class.Cview', 'SView']
});
Nel caso precedente, verranno caricati i seguenti file:
- MyApp.controllers.Controller
- MyApp.controllers.nested.NewController
- MyApp.Views.Sview
- MyApp.Views.class.Cview
Dipendenze esterne
Possiamo specificare le dipendenze al di fuori dell'applicazione fornendo nomi completi delle classi come -
Ext.Loader.setPath({
'Class': 'Class'
});
Ext.application({
views: ['Class.view.LoginForm', 'Welcome'],
controllers: ['Class.controller.Sessions', 'Main'],
models: ['Class.model.User']
});
Nel caso precedente, verranno caricati i seguenti file:
- Class/view/LoginForm.js
- Class/controller/Sessions.js
- Class/model/User.js
- app/view/Welcome.js
- app/controller/Main.js
Ti aiuta a identificare il sistema operativo che stai utilizzando, il browser su cui stai lavorando e quali sono le funzionalità disponibili per il tuo ambiente.
Sencha Touch offre diverse funzioni per ottenere informazioni specifiche per l'ambiente. Tutti i metodi menzionati di seguito possono essere archiviati, se la condizione è if (Ext.os.is.Windows) {} e si basa sulla condizione le attività possono essere eseguite.
Tutti i metodi seguenti restituiscono un valore booleano.
Sistema operativo
Ext.os è una classe che offre diversi metodi per sapere su quale sistema operativo stiamo lavorando.
Suor n | Metodo e descrizione |
---|---|
1 | Ext.os.is.webOS Questa funzione restituirà true se stai utilizzando il sistema operativo webos, altrimenti restituirà false. |
2 | Ext.os.is.RIMTable Questa funzione restituirà true se si utilizza il sistema operativo RIMTable, altrimenti restituirà false. |
3 | Ext.os.is.Linux Questa funzione restituirà true se stai utilizzando il sistema operativo Linux, altrimenti restituirà false. |
4 | Ext.os.is.Windows Questa funzione restituirà true se si utilizza il sistema operativo Windows, altrimenti restituirà false. |
5 | Ext.os.is.MacOs Questa funzione restituirà true se stai utilizzando il sistema operativo Mac, altrimenti restituirà false. |
6 | Ext.os.is.BlackBerry Questa funzione restituirà true se si utilizza il sistema operativo BlackBerry, altrimenti restituirà false. |
7 | Ext.os.is.iOS Questa funzione restituirà true se stai utilizzando il sistema operativo IOS, altrimenti restituirà false. |
8 | Ext.os.is.Android Questa funzione restituirà true se stai utilizzando il sistema operativo Android, altrimenti restituirà false. |
Rilevamento del dispositivo
Suor n | Metodo e descrizione |
---|---|
1 | Ext.os.is.iPad Questa funzione restituirà true se stai utilizzando iPad, altrimenti restituirà false. |
2 | Ext.os.is.iPhone Questa funzione restituirà true se stai utilizzando iPhone, altrimenti restituirà false. |
3 | Ext.os.is.iPod Questa funzione restituirà true se stai utilizzando iPod, altrimenti restituirà false. |
Versione del sistema operativo
Suor n | Metodo e descrizione |
---|---|
1 | Ext.os.name Restituisce il nome del sistema operativo. |
2 | Ext.os.version.version Fornisce la versione del sistema operativo che stiamo utilizzando. |
Rilevamento del browser
Suor n | Metodo e descrizione |
---|---|
1 | Ext.browser.is.IE Questa funzione restituisce true se stiamo utilizzando il browser Internet Explorer, altrimenti restituisce false. |
2 | Ext.browser.is.FF Questa funzione restituisce true se stiamo utilizzando il browser FireFox altrimenti restituisce false. |
3 | Ext.browser.is.Chrome Questa funzione restituisce true se stiamo utilizzando il browser Chrome, altrimenti restituisce false. |
4 | Ext.browser.is.Opera Questa funzione restituisce true se stiamo usando il browser Opera, altrimenti restituisce false. |
5 | Ext.browser.is.Safari Questa funzione restituisce true se stiamo utilizzando il browser Safari, altrimenti restituisce false. |
Questa funzione Ext. Browser fornisce varie altre funzioni:
Suor n | Metodo e descrizione |
---|---|
1 | Ext.browser.userAgent Restituisce l'attuale userAgent. |
2 | Ext.browser.isSecure Restituisce vero se la pagina corrente utilizza SSL. |
3 | Ext.browser.isStrict Restituisce vero se il browser è in modalità rigorosa. |
4 | Ext.browser.engineName Restituisce il nome del motore del browser (WebKit, Gecko, Presto, Trident e Altro). |
5 | Ext.browser.engineVersion Restituisce la versione del motore del browser. |
Caratteristiche
Ext.feature.has è quello di verificare se il browser ha la seguente funzionalità o meno.
Suor n | Metodo e descrizione |
---|---|
1 | Ext.feature.has.Audio Questo metodo restituisce true se il browser supporta la funzionalità di tag audio di html5. |
2 | Ext.feature.has.Canvas Questo metodo restituisce true se il browser supporta la funzionalità dei tag canvas di html5. |
3 | Ext.feature.has.classList Questo metodo restituisce true se il browser supporta la funzionalità classlist di html5 che viene utilizzata per aggiungere, rimuovere e attivare / disattivare le classi css per l'elemento html. |
4 | Ext.feature.has.Css3dTransforms Questo metodo restituisce true se il browser supporta la funzionalità Css 3d Transform di css3. |
5 | Ext.feature.has.CssAnimations Questo metodo restituisce true se il browser supporta le animazioni di css3. |
6 | Ext.feature.has.CssTransforms Questo metodo restituisce true se il browser supporta la funzionalità di trasformazione CSS di css3. |
7 | Ext.feature.has.CssTransitions Questo metodo restituisce true se il browser supporta la funzionalità di transizione di css3. |
8 | Ext.feature.has.DeviceMotion Questo metodo restituisce true se il browser supporta la funzione di movimento del dispositivo. |
9 | Ext.feature.has.Geolocation Questo metodo restituisce true se il browser supporta la funzionalità di geolocalizzazione di html5. |
10 | Ext.feature.has.History Questo metodo restituisce true se il browser supporta la funzionalità di cronologia di html. |
11 | Ext.feature.has.Orientation Questo metodo restituisce true se il browser può rilevare l'orientamento del dispositivo. |
12 | Ext.feature.has.OrientationChange Questo metodo restituisce true se il browser è in grado di rilevare il cambiamento nell'orientamento del dispositivo. |
13 | Ext.feature.has.Range Range è un tipo di tag di input html per l'elemento range slider, quindi se il browser supporta lo slider questa funzione restituisce true. |
14 | Ext.feature.has.SqlDatabase Il database Web sql è un'API di una pagina Web per l'archiviazione di dati e un database su cui è possibile eseguire operazioni di query. Questo metodo restituisce true se il browser supporta il database SQL Web. |
15 | Ext.feature.has.Svg Svg sta per Scalable Vector Graphics, questo metodo restituisce true se il browser supporta la funzione svg di html 5. |
16 | Ext.feature.has.Touch Questo metodo restituisce true se il browser dispone della funzione Touch. |
17 | Ext.feature.has.Video Questo metodo restituisce true se il browser supporta tag video HTML 5. |
18 | Ext.feature.has.Vml Vml sta per linguaggio di markup vettoriale che è un linguaggio di markup basato su xml. Quindi questo metodo restituisce true se il browser supporta vml. |
19 | Ext.feature.has.WebSockets Il Web socket è fondamentalmente un protocollo di comunicazione per computer che supporta due comunicazioni tra client e server. Questo metodo restituisce true se il browser supporta WebSocket, altrimenti restituisce false. |
Gli eventi sono qualcosa che viene licenziato quando succede qualcosa alla classe. Ad esempio, quando si fa clic su un pulsante o prima / dopo il rendering di un elemento.
Metodi di scrittura di eventi
Di seguito sono riportati i metodi di scrittura degli eventi.
- Eventi incorporati che utilizzano ascoltatori.
- Allegare eventi in un secondo momento
- Eventi personalizzati
Eventi incorporati che utilizzano ascoltatori
Sencha Touch fornisce proprietà listener per scrivere eventi ed eventi personalizzati nei file Sencha Touch.
Ascoltatore di scrittura in Sencha Touch
Aggiungeremo l'ascoltatore nel programma precedente stesso aggiungendo la proprietà di ascolto al pannello, mostrato come segue:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha', launch: function() {
Ext.create('Ext.Panel', {
html: 'My Panel', fullscreen: true, listeners: {
painted: function() {
Ext.Msg.alert('I was painted to the screen');
}
}
});
}
});
</script>
</head>
</html>
Questo produrrà il seguente risultato:
In questo modo possiamo anche scrivere più eventi nella proprietà listener.
Più eventi nello stesso listener
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on({
tap: function() {
var randomWidth = 100 + Math.round(Math.random() * 200);
this.setWidth(randomWidth);
},
widthchange: function(button, newWidth, oldWidth) {
alert('My width changed from ' + oldWidth + ' to ' + newWidth);
}
});
}
});
</script>
</head>
</html>
Produrrà il seguente risultato:
Allegare l'evento in un secondo momento
Nel metodo precedente di scrittura degli eventi, abbiamo scritto eventi negli ascoltatori al momento della creazione degli elementi.
L'altro modo per allegare eventi è il seguente:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on('tap', function() {
alert("Event listener attached by .on");
});
}
});
</script>
</head>
</html>
Produrrà il seguente risultato:
Eventi personalizzati
Possiamo scrivere eventi personalizzati in Sencha Touch e attivare gli eventi con il metodo fireEvent. L'esempio seguente spiega come scrivere eventi personalizzati.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: "Just wait 5 seconds",
listeners: {
myEvent: function(button, points) {
alert('myEvent was fired! You score ' + points + ' points');
}
}
});
Ext.defer(function() {
var number = Math.ceil(Math.random() * 100);
myButton.fireEvent('myEvent', myButton, number);
}, 5000);
}
});
</script>
</head>
</html>
Una volta che la pagina è stata caricata e il documento è pronto, apparirà la pagina dell'interfaccia utente con il pulsante e poiché stiamo attivando un evento dopo 5 secondi, una volta che il documento è pronto apparirà la casella di avviso dopo 5 secondi.
Qui abbiamo scritto l'evento personalizzato "myEvent" e stiamo attivando gli eventi come button.fireEvent (eventName);
Il layout è il modo in cui gli elementi sono disposti in un contenitore. Potrebbe essere orizzontale, verticale o qualsiasi altro. Sencha Touch ha diversi layout definiti nella sua libreria, anche se possiamo sempre scrivere anche layout personalizzati.
Sr.No. | Layout e descrizione |
---|---|
1 | hBox Questo layout consente di distribuire l'elemento in modo orizzontale. |
2 | vBox Questo layout consente di distribuire l'elemento in modo verticale. Questo è uno dei layout comunemente usati. |
3 | In forma In questo layout, il contenitore viene riempito con un singolo pannello e quando non ci sono requisiti specifici relativi al layout, viene utilizzato questo layout. |
4 | Carta (TabPanel) Questo layout dispone diversi componenti in modo tab. Le schede verranno visualizzate nella parte superiore del contenitore. Ogni volta che è visibile solo una scheda e ogni scheda è considerata come un componente diverso. |
Sencha Touch è dotato di supporto cronologico completo e funzionalità di deep linking.
Ha la più semplice funzionalità del pulsante Indietro, che aiuta l'utente a navigare tra le schermate, senza nemmeno aggiornare la pagina o l'applicazione.
Fornisce inoltre funzionalità di route, che aiutano l'utente a navigare verso qualsiasi URL. In base all'URL fornito nella finestra del browser, richiama funzioni specifiche per eseguire un'attività specifica.
Guarda il seguente esempio per la funzionalità del pulsante Indietro.
Questo esempio mostra l'elenco nidificato che non è altro che un elenco all'interno di un elenco, quindi quando fai clic su uno degli elementi dell'elenco, si apre un altro elenco e un pulsante Indietro appare nella parte superiore dello schermo.
Per la base di codice completa, puoi controllare Elenco nidificato nella sezione dei componenti della vista.
Routing
Il più semplice esempio di percorsi
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
routes: {
login: 'showLogin',
'user/:id': 'userId'
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page');
},
userId: function(id) {
Ext.Msg.alert('This is the login page specific to the used Id provided');
}
});
Nell'esempio sopra, se l'URL del browser è https://myApp.com/#login, verrà chiamata la funzione showLogin.
Possiamo fornire parametri nell'URL e in base al parametro specifico la funzione può essere chiamata. Ad esempio, se l'URL è https://myApp.com/#user/3, verrà chiamata un'altra funzione userId e l'ID specifico potrà essere utilizzato all'interno delle funzioni.
Avanzamento del percorso
A volte abbiamo parametri avanzati che includono virgola, spazi vuoti e caratteri speciali ecc. Per questo, se usiamo il modo sopra per scrivere rotte, allora non funzionerà. Per risolvere questo problema, Sencha touch fornisce un instradamento condizionale in cui possiamo specificare la condizione del tipo di dati che il parametro deve accettare.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login/:id: {
action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page with specific id which matches criteria');
}
}
});
Così come nell'esempio sopra abbiamo dato regex nella condizione che indica chiaramente quale tipo di dati dovrebbe essere consentito come parametro URL.
Condivisione dello stesso URL su diversi profili del dispositivo
Poiché Sencha touch fornisce il profilo del dispositivo in modo che lo stesso codice dell'applicazione possa essere utilizzato su più dispositivi, potrebbero esserci possibilità che profili diversi possano avere funzionalità diverse per lo stesso URL.
Per risolvere questo problema Sencha touch ci dà la libertà di scrivere il routing nel controller principale e la funzione chiamata da scrivere in tutto il profilo con i loro profili specifici.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login: 'showLogin'
}
},
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
extend: 'MyApp.controller.Main, showLogin: function() {
Ext.Msg.alert('This is the login page for mobile phone profile');
}
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
extend: 'MyApp.controller.Main,showLogin: function() {
Ext.Msg.alert('This is the login page for tablet profile');
}
});
Come mostra un esempio, abbiamo un controller principale che ha la funzione showLogin e abbiamo due diversi profili (telefono / tablet). Entrambi i profili hanno la funzione showLogin con codice diverso specifico per il profilo.
In questo modo possiamo condividere lo stesso URL su più dispositivi di profilo con le loro funzionalità specifiche.
Sencha Touch fornisce la configurazione XHR2 per funzionare con lo sviluppo Ajax e Ajax2.
XHR2 è xmlHttpRequest livello 2, utilizzato per richiedere dati dal server. Per qualsiasi applicazione web, i dati risiedono sul server e una volta caricata la pagina, è necessario accedere ai dati dal server con l'aiuto delle richieste Ajax.
XHR2 in Sencha Touch fornisce la funzione di barra di avanzamento, che mostra all'utente la quantità di dati trasferiti per una particolare richiesta. XHR2 è stato aggiunto di recente, quindi dobbiamo verificare se il browser lo supporta o meno.
Di seguito è riportata la funzione per verificare se il browser supporta XHR2 -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}
Possiamo anche verificare se il caricamento progressivo con XHR2 è supportato dal browser o meno.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}
Diverse nuove funzionalità XHR2 sono incluse in Sencha Touch.
Suor n | Caratteristiche e descrizione |
---|---|
1 | XHR2: true Viene utilizzato per abilitare e disabilitare la funzionalità XHR2 nell'applicazione. |
2 | Ext.field.File Viene aggiunto un nuovo campo file per dare più chiarezza sul tipo di campo. |
3 | Ext.field.FileInput Questo per fornire FileInput. |
4 | Ext.progressIndicator Questo per fornire la percentuale esatta dei dati trasferiti in termini di barra di avanzamento. |
5 | xtype: fileinput Per creare un'istanza della classe fileInput. |
6 | xtype: filefield Per creare istanze di file class. |
7 | responseType : value Questo parametro consente vari tipi di risposte come testo, documento, blob ecc. |
Di seguito sono riportati gli esempi per inviare una semplice richiesta ajax con e senza parametri e caricare file utilizzando ajax.
Richiesta Ajax semplice senza parametri - Operazione riuscita
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Produrrà il seguente risultato:
L'esempio sopra mostra la chiamata ajax riuscita poiché l'URL menzionato è corretto. In questo esempio, non stiamo passando alcun parametro, è solo una semplice richiesta ajax che colpisce l'URL menzionato.
Se stai utilizzando il browser Chrome nello strumento per sviluppatori, vai alla sezione di rete, puoi vedere la richiesta che viene inviata e la risposta che otteniamo.
Richiesta Ajax semplice senza parametri - Errore
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Produrrà il seguente risultato:
Nell'esempio sopra, solo per mostrare come funziona l'errore ajax, abbiamo menzionato l'URL sbagliato. Confronta questo e l'esempio precedente, troverai la differenza.
Invio di parametri nella richiesta Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var formData = new FormData();
formData.append("firstName", "Hi");
formData.append("lastName", "Reader");
// Request will be sent as part of the payload instead of standard post data
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
Ext.Msg.alert(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
Ext.Msg.alert('Ajax failed!');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Produrrà il seguente risultato:
In questo esempio, stiamo passando i parametri con l'ajax utilizzando la proprietà data della chiamata ajax.
Caricamento di file utilizzando Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
progress:progressIndicator,
success: function(response) {
Ext.Msg.alert('File uploaded successfully.');
},
failure: function(response) {
Ext.Msg.alert('File upload failed.');
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Produrrà il seguente risultato:
Questo esempio mostra come caricare i dati utilizzando la chiamata ajax. In questo esempio, stiamo utilizzando l'indicatore della barra di avanzamento per mostrare l'avanzamento durante il caricamento del file.
Sencha Touch fornisce vari componenti dell'interfaccia utente, che possono essere personalizzati in base alle esigenze.
Sr.N0. | Componente e descrizione |
---|---|
1 | Giostra Questo componente dell'interfaccia utente viene utilizzato per visualizzare Carousel. |
2 | Elenco Questo componente dell'interfaccia utente viene utilizzato per visualizzare gli elenchi. |
3 | Elenco annidato Questo componente dell'interfaccia utente viene utilizzato per visualizzare l'elenco nidificato. |
4 | Modulo Questo componente dell'interfaccia utente viene utilizzato per visualizzare i moduli. |
5 | Grafico Questo componente dell'interfaccia utente viene utilizzato per visualizzare diversi tipi di grafici. |
6 | Componente galleggiante Questo componente dell'interfaccia utente viene utilizzato per visualizzare il componente mobile. |
7 | Pannello a schede Questo componente dell'interfaccia utente viene utilizzato per visualizzare la visualizzazione del pannello a schede. |
8 | Vista di navigazione Questo componente dell'interfaccia utente viene utilizzato per visualizzare la vista di navigazione. |
9 | Menu azione Questo componente dell'interfaccia utente viene utilizzato per visualizzare la barra del menu delle azioni. |
10 | Visualizzazione dati Questo componente dell'interfaccia utente viene utilizzato per visualizzare la visualizzazione dati. |
11 | Carta geografica Questo componente dell'interfaccia utente viene utilizzato per visualizzare la mappa di Google. |
Sencha Touch è dotato di funzionalità di pacchettizzazione native.
Di seguito sono riportati i collegamenti per i concetti di pacchettizzazione nativi di Sencha Touch.
Sr.No. | Collegamento concetto e descrizione |
---|---|
1 | Provisioning iOS nativo |
2 | API native |
Best practice JavaScript di base
È buona norma tenere tutto il codice relativo a JavaScript in un file separato js (external JS) file, invece di scriverlo nel <script> tag sotto la sezione head o JavaScript incorporato nel corpo del documento.
Eseguire sempre un controllo nullo prima che l'elemento venga utilizzato in ulteriore logica.
Segui sempre la convenzione di denominazione, poiché rende il codice facilmente comprensibile da qualsiasi altro programmatore.
Per rendere il codice facilmente comprensibile, è sempre preferibile scrivere commenti per i metodi JS con una logica chiara dietro ciò che fa una funzione.
Best practice specifica per Sencha Touch
Usa la struttura di cartelle consigliata da Sencha Touch, che sarà utile durante la compressione o la minimizzazione di JS.
Si consiglia vivamente di utilizzare il listener (onclick / onblur, ecc.) Nel controller invece di scriverlo nella pagina html stessa.
Non creare l'istanza del negozio, quando il negozio viene chiamato dalla vista.
Quando creiamo un'istanza di un negozio, dobbiamo sempre distruggerla, poiché influisce sulle prestazioni.
Durante l'utilizzo di Sencha Touch, non specificare nessun altro semplice file JavaScript. Usa tutte le funzioni delle classi Ext (menzionate in controller o utils).
Quando la mappatura del modello e il nome coincidono, non specificare la mappatura. Solo il nome risolverà lo scopo.
Non utilizzare proprietà non necessarie in vista. Utilizzare solo la proprietà richiesta e il suo valore diverso dal valore predefinito.