Il componente TabPanel di Sencha Touch è fornito di vari eventi.
Uno di questi è activeitemchange, attivato quando si cambia tab.
Usando questo evento possiamo identificare un tab preciso e attivare qualcosa.
Il .NET Framework ha già tutto incluso per usare AJAX senza ricorrere a Javascript.
Di default anche il Web.config è configurato per usarlo; in caso potrete usarlo per cambiare alcune impostazioni.
Vediamo quindi come usare AJAX nelle nostre pagine aspx.
Prima di tutto dobbiamo incorporare un controllo ScriptManager; io consiglio di metterlo nella Master Page in modo da averlo disponibile per qualsiasi pagina:
<asp:ScriptManager ID="scriptManagerDefault" runat="server" />
Tutto qua.
In un precedente articolo abbiamo visto come creare un form con Sencha touch.
Oggi vediamo come mettere in piedi un basilare sistema di validazione.
Il form ha tre campi:
Tutti e tre sono obbligatori e l'email deve essere anche formalmente corretta.
Questo il nostro form:
var formContact = new Ext.form.FormPanel({
title: 'My Form',
items: [{
xtype: 'fieldset',
itemId: 'formcontact',
items: [{
xtype: 'textfield',
name : 'nome',
label: 'Nome',
itemId: 'nome'
},
{
xtype: 'textfield',
name : 'email',
label: 'Your email',
itemId: 'email'
},
{
xtype: 'textareafield',
name : 'message',
label: 'Message',
itemId: 'message'
},
{
xtype: 'toolbar',
docked: 'bottom',
layout: {
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Send',
handler: function() {}
},
{
xtype: 'button',
text: 'Reset',
handler: function() {
formContact.reset();
}
}]
}]
}]
});
Importante è il parametro itemId, che ci serverà per riconoscerlo dentro la pagina e prenderne il valore.
Proseguiamo con Sencha Touch e i suoi componenti.
Oggi vediamo come usare i form.
Non terremo in considerazione validazione cose del genere, ma solo un uso basilare.
Per prima cosa preprate un file PHP (o di altro linguaggio lato server) da contattare al submit del form.
Ricordo che Sencha Touch è Javascript driven e quindi per svolgere determinate operazione (invio email, iscrizione, ecc....) richiede l'uso di file lato server.
Per fare un esempio un pò più completo ho pensato di usare subito un file lato server:
// test.php
<?php
$response = array('result' => $_POST['nome']);
echo json_encode($response);
La risposta che il file invierà sarà in formato JSON e sarà il nome inserito nella textfield.
Sencha touche è uno die vari framework disponibili per la creazione app mobile (compatibile solo con browser basati su Webkit come Safari e Chrome).
A mio avviso è anche una delle migliori, ma ha una curva di apprendimento abbastanza ripida in quanto non è basata su HTML, ma è Javascript-driven.
Questo vuol dire che tutta l'applicazione sarà scritta dentro un file js.
Iniziamo con lo scaricare il tutto da qua; io ho scaricato la versione Open Source.
Dopo di che creiamo una cartella js e mettiamo il tutto la dentro.
Dentro la cartella js creiamo anche un file app.js; questo sarà il file dove andremo a scrivere tutta l'applicazione.
Nella root creiamo un semplice file index.html con questa roba dentro:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="js/touch/resources/css/sencha-touch.css" type="text/css" />
<script type="text/javascript" src="js/touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
</body>
</html>
Come vedete questo file si limita a caricare il foglio di stile predefinito, la libreria sencha e il nostro file app.js.
Dentro al body non c'è nulla!
Torniamo a parlare un pò di Java (che purtroppo ho dovuto un pò tralasciare per poco tempo).
Oggi vediamo come poter disegnare un rettangolo con il mouse su un JPanel.
Inoltre dovrà implementare MouseListener e MouseMotionListener e i metodi derivati:
Gli ultimi 4 metodi però rimarrano vuoti perchè non ci serviranno.
Vediamo come strutturare il tutto:
public class FrameDraw extends JFrame {
private JScrollPane scroll;
private int width = (int) Toolkit.getDefaultToolkit().getScreenSize().getWidth(); // DIMENSIONE JPANEL
private int height = (int) Toolkit.getDefaultToolkit().getScreenSize().getHeight(); // DIMENSIONE JPANEL
public FrameDraw() {
super("Draw panel");
setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
setLayout(new BorderLayout());
ImagePanel panel = new ImagePanel();
scroll = new JScrollPane(panel);
add(scroll, BorderLayout.CENTER);
}
// CLASSE PRIVATA JPANEL.
}
Questo è il JFrame principale; ImagePanel sarà il JPanel che andremo ad inserire come classe privata.