Sencha Touch - Tema
Sencha Touch fornisce una serie di temi da utilizzare nelle tue applicazioni. Puoi 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 nel seguente esempio.
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.cssPer 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.cssAggiungi il seguente CSS per utilizzare il tema di Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssPer 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.cssAggiungi il seguente CSS per utilizzare il tema di Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssPer 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.cssAggiungi il seguente CSS per utilizzare il tema di Windows:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssPer 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.cssAggiungi il seguente CSS per utilizzare il tema di Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssPer 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.cssAggiungi il seguente CSS per utilizzare il tema di Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssPer 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: