Loading spinner in React con react-spinners
react-spinners è una piccola libreria per React che ci consente di creare degli spinner loader in maniera piuttosto facile.
In questo articolo vediamo come usarla.
react-spinners è una piccola libreria per React che ci consente di creare degli spinner loader in maniera piuttosto facile.
In questo articolo vediamo come usarla.
PrimeNG ha tra i suoi componenti il ProgressSpinner.
In pratica è il classico cerchio che gira che ci consente di dire all'utente che si sta caricando qualcosa.
Oggi vediamo un semplice esempio su come visualizzarlo dentro ad un Dialog.
HTML5 ha portato con se vari nuovi tipi di input.
Uno di questi è l'input number, che è predisposta per avere valori numerici.
Questo fa si che è possibile impostare range, valori massimi e minimi usando gli attributi piuttosto che codice JS.
Oggi vediamo un altro componente importante, lo Spinner, e come riempirlo prendendo i dati dal server in formato JSON.
Lo Spinner è un menu a tendina che ci permette di scegliere tra una serie di valori.
Cominciamo con la richiesta al server per ottenere i dati:
public class Service {
private final String remote = "http://www.sito.com/service/";
public String getCausali() throws ClientProtocolException, IOException, JSONException {
HttpClient client = new DefaultHttpClient();
HttpPost post = new HttpPost(remote + "get_causali.php");
HttpResponse response = client.execute(post);
HttpEntity entity = response.getEntity();
BufferedReader reader = new BufferedReader(new InputStreamReader(entity.getContent(), "UTF-8"));
StringBuilder sb = new StringBuilder();
String line = null;
while ((line = reader.readLine()) != null) {
sb.append(line).append("\n");
}
reader.close();
return sb.toString();
}
}
Tramite HttpClient ci connettiamo al server e con HttpPost inviamo una richiesta POST al file specifico (che in questo caso è in PHP).
Il file sul server esegue la query e restituisce i dati in JSON (guardate qua per un esempio).
Prendiamo il contenuto e lo aggiungiamo a un oggetto StringBuffer.
A questo punto creiamo una classe wrapper che rappresenta la nostra tabella sul db; nel mio caso ho solo due campi:
Ecco il mio esempio:
public class Causali {
private int id;
private String nome;public Causali(int id, String nome) {
this.id = id;
this.nome = nome;
}
public int getId() {
return this.id;
}
public String getNome() {
return this.nome;
}
@Override
public String toString() {
return this.nome;
}
}
Questa classe ci servirà come contenitore.