Recentemente mi sono trovato a dover ricevere dei dati in JSON all’interno di un’applicazione scritta in Java e ho scoperto questa utile libreria.

Quello che fa è convertire oggetti Java in JSON e viceversa. Per qualche rapido esempio date un’occhiata qui.

L’uso più semplice è comunque il seguente:

Gson gson = new Gson();

String json = “i miei dati in JSON”;

MioOggetto oggetto = gson.fromJson(json, MioOggetto.class);

Ecco il link per il download.

Eccoci con un nuovo appuntamento dei tutorial per programmare una webApp per iPhone, prima di iniziare ecco alcune comunicazioni importanti.

E’ uscita una nuova versione di iWebKit, precisamente la 5.0 per cui vi invito a scaricare la nuova versione che ha alcune migliorie e velocizza il caricamento delle pagine.

Non preoccupatevi per le pagine che avete già scritto, non perderete nulla, dovete solo sovrascivere le cartelle css, images, javascript, pics e thumbs, lasciando invece le pagine precedentemente create.

Se invece partite da zero e non avete ancora scritto nessuna pagine, il procedimento per creare il vostro progetto rimane lo stesso, e lo potete trovare qui.

Bene, incominciamo con la lezione di oggi parlando di Trio e Duo buttons.

Per favi capire megli vi allego subito due immagini per farvi capire meglio di cosa sto parlando:

Esistono diversi tipo di queste barre di selezione, innanzitutto si può segliere se avere 2 o 3 bottoni, ed inoltre se avrle a livello della top bar (come le immagini qui sopra) oppure più in sotto (come vedrete più avanti).

Bottoni a livello della Top Bar

Vediamo il codice per queste barre di selezioni qui sopra, per la prima (quella con due pulsanti) il codice da inserire è il seguente:

<div id=”duoselectionbuttons”><a href=”collegamento A”>Testo A</a><a href=”collegamento B”>Testo B</a></div>

Mentre per la barra con tre pulsanti ecco il codice:

<div id=”triselectionbuttons”><a href=”collegamento A”>Testo A</a><a href=”collegamento B”>Testo B</a><a href=”collegamento C”>Testo C</a></div>

IMPORTANTE entrambi questi codici vanno inseriti all’interno del <div> riferito alla topbar, avendo come risultato quindi qualcosa del genere (mi riferisco a 2 pulsanti, ma è analogo anche per 3 pulsanti):

<div id=”topbar”>

<div id=”triselectionbuttons”><a href=”A.html”>AText</a><a href=”B.

html”>BText</a><a href=”C.html”>CText</a></div>

</div>

Pulsanti sotto una Top Bar

E’ possibile anche inserire queste barre sotto una top Bar precedentemente creata avendo un risultato simile a questo:

Questa volta il codice da inserire NON va messo allinterno del <div> riferito all top bar, ma immediatamente sotto, per avere 2 pulsati ecco il codice:

<div id=”duobutton”><div><a href=”A.html”>Text</a><a href=”B.
html”>Text</a></div></div>

e analogamente per 3 pulsanti:

<div id=”tributton”><div><a href=”A.html”>AText</a><a href=”B.
html”>BText</a><a href=”C.html”>CText</a></div></div>

potete trovare alcune pagine di esempio qui.

Selezionare una voce

E’ inoltre possibile selezionare una voce, come le immagini sottostanti, per far visualizzare all’utente in che pagina si trova, il codice da inserire è il seguente:

id=”pressed”

e va inserito come segue:

<div id=”triselectionbuttons”><a id=”pressed” href=”A.html”>AText</a><a
href=”B.html”>BText</a><a href=”C.html”>CText</a></div>

Benvenuti al terzo appuntamento di Programmare una webApp per iPhone, per oggi mettiamo da parte la teoria e vediamo come create una Top Bar, ossia una barra di navigazione che ci servirà per muoverci tra le varie pagine del nostro progetto.

Creiamo un progetto

Essendo la webApp basata su pagine html basta un semplice editor html per creare i file (consiglio Notepad++), ma per fare un po di ordine vi consiglio di organizzare i file in cartelle come spiegato di seguito.

Dopo aver scaricato iWebKit decomprimete l’archivio e create una copia della cartella Framework, poi rinominatela con il nome del vostro progetto.

dovreste avere la cartella organizzata come nell’immagine sopra.

Ora aprite la cartella che avete appena creato e aprite con il vostro editor il file index.html.

I tag che tovete modificare sono i seguenti

<title>Title of your site</title> inseriendo il nome della vostra webapp

<meta content=”keyword1,keyword2,keyword3″ name=”keywords” /> dove al posto di keyword1,keyword2,keyword3 dovete inserire le parole chiave per farvi trovare dai motori di ricerca (potete inserirne anche più di tre)

<meta content=”Description of your site” name=”description” /> sostituendo “Description of your site” con una breve descrizione della vostra webapp

Volendo potete anche modificare il footer (la parte in basso di una pagina) rimuovendo il link a iwebkit, ma anche lasciarlo come ringraziamento agli autori di iWebKit non è male, no?

Bene, questa sarà la pagina base, ossia la pagina “stampo” tramite la quale creemo tutte le altre.

Ora chiudere l’editor e ritornate alla cartella “Mio Progetto”, come prima create una copia della pagina index.html e rinominatela in pagina base.html

Chiariamo un po le idee dopo tutti questi copia ed incolla, la pagina index.html è la pagina principale, ossia quella che viene aperta all’avvio della webapp. La pagina pagina base.html è una semplice copia che ci facciamo per semplificarci il lavoro, infatti ogni volta che vorremo aggiungere una pagina al nostro progetto faremo un copia e incolla e un successivo rinomina di pagina base.html evitando così di riscrivere tante righe di codice (se non vi è ancora chiaro lo capirete con l’uso).

Creiamo una Top Bar

Per inserire una top bar il primo passaggio è inserire il seguente codice:

<div id=”topbar”>
<altri tag da inserire>
</div>

Come potete vedere nella pagina index.html è già presente, quindi se non volete una Top Bar dovete rimuovere quel codice.

Così scrittà però è abbastanza inutile, perchè non ha ne frecce di navigazione ne bottoni ne titolo, vediamo come aggiungerli.

Aggiungere un titolo

Per inserire un titolo che verrà visualizzato al centro della Top Bar (sia in landscape che in portrait) ecco il codice da inserire:

<div id=”title”>Title</div>

Frecce di navigazione a sinistra

E’ possibile inserire delle frecce di navigazione per passare da una pagina all’altra, ecco il codice da inserire:

<div id=”leftnav”>
<a href=”pagina 1.html”>Pagina 1 testo</a>
<a href=”pagina 2.html”>Pagina 2 testo</a>
</div>

Potete inserire quanto collegamenti volete, in più volendo potete inserire un collegamento alla home dell’app inserendo questo collegamento:

<a href=”index.html”><img alt=”home” src=”images/home.png”/></a>

Frecce di navigazione a destra

Esattamente tutto come prima, cambia solo la prima riga che diventa:

<div id=”rightnav”>

Pulsati

Per inserire un pulsante nella top bar ecco il codice da inserire, ricordo che vale lo stesso discorso per le barre di navigazione: “leftbutton” indica che il pulsante sarà a sinistra “rightbutton” a destra

<div id=”leftbutton”>
<a href=”pagina.html”>Testo</a>
</div>

Per far capire meglio la differenza tra bottone e freccia vi allego un’immagine:

Il collegamento alla Home sulla sinistra è una freccia di navigazione mentre il collegamento a “website” è un pulsante, inoltre “Ciao Mondo” è il titolo della Top Bar.

Ecco qui il codice della pagina dell’immagine qui sopra:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta content=”yes” name=”apple-mobile-web-app-capable” />
<meta content=”text/html; charset=iso-8859-1″ http-equiv=”Content-Type” />
<meta content=”minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no” name=”viewport” />
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
<script src=”javascript/functions.js” type=”text/javascript”></script>
<title>Mio Sito</title>
<meta content=”keyword1,keyword2,keyword3″ name=”keywords” />
<meta content=”Description of your site” name=”description” />
</head>

<body>

<div id=”topbar”>
<div id=”title”>Ciao Mondo</div>
<div id=”leftnav”>
<a href=”index.html”><img alt=”home” src=”images/home.png”/></a>
</div>
<div id=”rightbutton”>
<a href=”http://www.danielecampogiani.com”>Website</a>
</div>
</div>
<div id=”content”>
</div>
<div id=”footer”>
<!– please keep this line of text for three reasons: to help us, to thank us and just because it is cool–>
<a href=”http://iwebkit.net”>Powered by iWebKit</a></div>

</body>

</html>

Io solo dovuto scrivere la parte riguardante alla Top Bar perchè il resto avendo fatto una copia della pagina pagina base.html era già scritto.

Appuntamento al prossimo articolo!

Vunky Search è un motore di ricerca per tutorial di photoshop, all’apertura del sito ci verranno mostrate alcune immagini casuali, ognuna collegata al relativo tutorial

Ma possiamo cercare il nosto tutorial anche grazie ad un comodo motore di ricerca.

L’uso è molto semplice, una volta scelto il nostro tutorial clicchiamo sull’immagine relativa, che ci collegerà al sito con la guida passo passo per realizzare il nosto lavoro.

Buon photo-editing!