La forza di Phonegap risiede nella capacità di creare un App per iOS/Android usando un’applicazione web.

Dobbiamo quindi creare un’interfaccia adatta ad essere visualizzata su schermi piccoli e dobbiamo cercare di renderla il più vicina alle classiche interfacce per smartphone.

Ad aiutarci in questo compito sono ancora i frontend framework, tanto discussi negli articoli precedenti su questo blog. In particolare useremo per il nostro tutorial, Ratchet e Twitter Boostrap.

Ratchet ci fornisce i componenti tipici di un’app per iOS come le header bar e la top bar. Includiamo quindi le due librerie nel progetto all’interno della cartella www. Lascio Bootstrap nella radice per un facile aggiornamento. Mentre ratchet.css lo metto nella sua posizione predefinita all’interno della cartella css.

Includiamo i due file in index.html:

<link rel="stylesheet" type="text/css" href="boostrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/ratchet.css" />

Ora inseriamo due toolbar nell’interfaccia. Subito dopo il tag Body, aggiungiamo:

<header class="bar-title">
  <h1 class="title">Title</h1>
</header>
<nav class="bar-tab">
  <ul class="tab-inner">
    <li class="tab-item active">
      <a href="#">
        <img class="tab-icon" src="img/icon-home.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-profile.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-messages.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-hamburger.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
    <li class="tab-item">
      <a href="#">
        <img class="tab-icon" src="img/icon-settings.png">
        <div class="tab-label">Label</div>
      </a>
    </li>
  </ul>
</nav>

Abbiamo così iniziato la creazione di un’interfaccia che assomiglia a quella di una classica App su iPhone.