Sviluppare applicazioni android: parte 2

Anche se i commenti agli articoli sono quasi nulli (uffi, almeno un commento di incoraggiamento potreste lasciarmelo) e nessuna buona anima clicca su qualche link pubblicitario, il primo articolo su Android ha avuto un gran successo in termini di visite per cui ho deciso  di continuare scrivendo ulteriori post di approfondimento. Diamo per scontato che abbiate già letto il primo articolo che trovate qui nella speranza che siate riusciti ad avviare la prima applicazione. Ora guardiamo con un occhio più attento cosa abbiamo creato, così possiamo iniziare a fare le prime modifiche. Vi preannuncio che questo articolo è forse un po’ noioso, ma cerca di introdurre le basi necessarie alla scrittura della nostra prima applicazione per cui vi consiglio di leggerlo almeno una volta. Innanzitutto vi invito a riguardare il Project Explorer per analizzare da cosa è composto il nostro progetto. Troviamo da subito la cartellina src che come consuetudine conterrà i “source”, i sorgenti, ossia il codice vero e proprio che compone la nostra applicazione. All’interno troviamo la “testactivity.java” che nel nostro esempio rappresenta il cuore dell’applicazione. Attenzione che potreste incontrare piccole differenze di codice rispetto l’esempio precedente visto che nel frattempo ho fatto numerosi test. Con un doppio click possiamo aprire la finestra con il codice sorgente. Potete notare da subito che la testactivity deriva dalla classe Activity che è di fondamentale importalinza nelle applicazioni Android. Ogni activity rappresenta una parte di codice eseguibile da cui è composta la nostra applicazione, deve essercene almeno una anche se possono essercene in numero maggiore, interagenti l’una con l’altra. Ogni Activity può comunicare con l’interfaccia utente ma solamente una alla volta, non in contemporanea. Esistono delle eccezioni, ci sono infatti applicazioni che funzionano in background e che non interagiscono direttamente con l’utente attraverso l’interfaccia grafica, ma è un po’ presto per parlarne. Ogni Activity deve avere la sua onCreate() dove vengono istanziati tutti i parametri necessari per il funzionamento della nostra applicazione. Ecco qui sotto il listato della nostra applicazione (testactivity.java).

package com.test;

import android.app.Activity;
import android.os.Bundle;

public class testactivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Ma senza addentrarci in altri particolari, proseguiamo questa carellata sul contenuto del nostro progetto.

gen: Qui traverete i file java generati da Eclips. Fra essi c’è R.java che contiene una sorta di indice di tutte le risorse incluse nel nostro progetto.

android x.y: contine il file android.jar con tutte le funzioni del sistema operativo richiamabili dal nostro software. Chiaramente queste funzioni variano in base alla versione di Android che abbiamo deciso di utilizzare.

res: Questa cartellina contine a sua volta le tre cartelle drawable hdpi, ldpi e mdpi  che a loro volta contengono le icone per la nostra applicazione rispettivamente ad alta (72×72), bassa (36×36) e media (48×48) risoluzione. Se avete seguito la prima parte del tutorial ed avete testato l’applicazione con il telefono, troverete nell’elenco delle applicazioni anche quella da noi creata e l’icona è quella presente in questi cassetti che corrisponde al robottino verde, simbolo di android.

layout: ecco qui una delle componenti fondamentali del nostro software. All’interno troviamo il file main.xml che possiamo visionare con un semplice doppio click. Se l’avete aperto, noterete che nella porzione in basso a sinistra della finestra con il contenuto del main.xml ci sono in realtà 2 tabs, uno con il contenuto testuale del main.xml ed uno che riporta “Graphical Layout”. Ebbene si, premendo questo tasto possiamo vedere graficamente il layout della nostra applicazione che possiamo modificare con semplici tocchi di mouse. Chiaramente la nostra applicazione non ha ancora un layout grafico vero e proprio in quanto non fa altro che riportare una frase sullo schermo. Nella root ci sono anche alcuni file. Fra questi troviamo AndroidManifest.xml, che contiene le informazioni basilari sulla nostra applicazione, dal nome dell’applicazione stessa, ai componenti usati, i permessi di accesso alle API, il minimo livello di API Android da usare, le librerie da linkare e altro ancora. E’ un file fondamentale ed obbligatorio. A grosse linee abbiamo visto le varie parti da cui è composto il nostro progetto, ora approfondiamo leggermente il listato di base.  Se guardiamo il sorgente, vediamo che il “cuore” dell’applicazione che fa comparire la scritta “Helloworld, testactivity” sullo schermo è “setContentView(R.layout.main);”. Allora cerchiamo di capire come funziona questa linea di codice, cominciando dalla funzione vera e propria: public void setContentView (View view) public void setContentView (int layoutResID) public void setContentView (View view, ViewGroup.LayoutParams params) Come vediamo la funzione setContentView è richiamabile con differenti argomenti, immagino che chi è alla lettura di questi appunti sappia cos’è l’overloading, ma in caso contrario per ora non dobbiamo preoccuparcene, ci basti appunto sapere che la funzione può essere richiamata in tre modi diversi in base agli argomenti che gli vengono passati. La prima è la forma usata nell’esempio per cui il parametro passato è appartenente alla classe View. Quindi dobbiamo porci questa prima domanda: cos’è una view? In italiano potremmo tradurlo con “vista”, ma preferisco mantenere la terminologia inglese per mantenere una maggior coerenza con la documentazione e l’ambiente di sviluppo. Una view è una classe che rappresenta il blocco basilare per costruire componenti per l’interfaccia utente. Una view occupa un’area rettangolare sullo schermo ed è responsabile sia del disegno del suo contenuto che della gestione degli eventi ad essa legati. Tramite le view possiamo gestire testi, immagini, pulsanti, etc. Stabilito cos’è, almeno a grosse linee, una view, la setContentView farà si che venga associata la view specificata alla nostra activity, in poche parole la nostra activity visualizzerà il contenuto della view, e da essa potrà ricevere eventuali input da parte dell’utente. Il problema è che se noi guardiamo l’istruzione  “setContentView(R.layout.main);” sicuramente non riusciremo a capire che tipo di visualizzazione verrà portata sul nostro teminale. Dobbiamo andare perciò a vedere cosa contiene R.layout.main (ricordo che R si trova sotto gen) L’intero file R.java ha un aspetto simile al seguente:

/* AUTO-GENERATED FILE.  DO NOT MODIFY.
 *
 * This class was automatically generated by the
 * aapt tool from the resource data it found.  It
 * should not be modified by hand.
 */

package stx.hw;

public final class R {
    public static final class attr {
    }
    public static final class drawable {
        public static final int icon=0x7f020000;
    }
    public static final class layout {
        public static final int main=0x7f030000;
    }
    public static final class string {
        public static final int app_name=0x7f040001;
        public static final int hello=0x7f040000;
    }
}

…dove layout.main corrisponde ad un malinconico numero esadecimale che ben poco ci dice su quanto verrà visualizzato. Esso infatti non è altro che un riferimento, infatti avevamo detto che R.java non è che una specie di indice generato da Eclipse. Ben più interessante è invece notare che vengono definiti drawable, layout e string e, guarda caso, nella cartellina res, ci sono i corrispondenti riferimenti. In particolare troviamo la cartellina layout al cui interno c’è il main.xml che corrisponde a:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
<TextView 
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="@string/hello"
 />
</LinearLayout>

Qui le cose cominciano a chiarirsi. Anche se non andiamo ad approfondire ora i parametri descritti, si nota in modo abbastanza intuibile che vi è la prima parte LinearLayout che definisce il layout generico, ossia come deve essere presentata la schermata. Poi c’è una seconda parte con un “TextView”, che guarda caso servirà a scrivere un testo che è definito da @string/hello. Se ora andiamo a vedere res->values->strings.xml troviamo la nostra stringa hello che contiene “Hello World, testactivity!” e finalmente il cerchio si chiude. Il layout è visibile anche in forma grafica, come dicevamo, premendo su “graphical layout”: nel mio caso compare una schermata simile a questa:

Bene. Credo che di confusione in testa adesso ne abbiamo abbastanza. Sinora abbiamo visto a grosse linee come Eclipse prepara per noi un progetto basilare con tutte le parti già pronte per l’uso analizzando sempre in modo un po’ grossolano quali sono le parti fondamentali del progetto e come vengono organizzate. In particolare abbiamo visto come la parte dell’interfaccia grafica viene mantenuta separata dal codice vero e proprio, cosa che ha numerosi vantaggi. Ciò non toglie che l’interfaccia grafica possa essere modificata al volo dal software in esecuzione, ma man mano che progrediamo vedremo come fare. Vorrei fare notare comunque che l’applicazione “HelloWorld” in pratica non fà nulla se non mostrare l’interfaccia basilare preparata per quell’applicazione. Ne deriva che se modifichiamo il layout, l’applicazione non mostrerà la scritta HelloWorld ma visualizzerà la nuova interfaccia. Se facciamo l’utimo sforzo per questa lezione e sostituiamo interamnete main.xml con il seguente contenuto:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10px" >

<TextView android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Scrivi qui"/>

<EditText android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background"
android:layout_below="@id/label" />

<Button android:id="@+id/ok"
android:layout_width="wrap_content"sche
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10px"
android:text="OK" />

<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>

vedrete che l’applicazione cambia totalmente aspetto e si presenterà come l’immagine qui vicino.

Sarà possibile inserire del testo nell’apposito box anche se questo non verrà poi gestito in nesssun modo e i due pulsanti non saranno realmente funzionenti visto che non c’è nessun codice preposto a fare qualcosa del nostro input. Spero che quest’ultima fatica abbia contribuito ancora un po’ a comprendere com’è organizzata la nostra applicazione visto che agli inizi non è una cosa così immediata da comprendere. Pur rendendomi conto che questo articolo può essere un po’ noioso e di scarso interesse per chi ha “fretta di andare avanti”, spero sia stato apprezzato e possa tornare utile.