irec navegacion - CGastrell/phonegap GitHub Wiki

Navegacion de la aplicacion

Para la aplicacion vamos a necesitar una serie de paginas:

#home: pagina inicial, botones para acceder a:
- #guia-list: listado de guias guardadas
- #entrevista-list: listado de entrevistas guardadas
#guia-list: levanta el archivo guias.json y muestra el listado, cada entrevista es un vinculo a una nueva entrevista (#interview)
#entrevista-list: levanta el archivo entrevistas.json y muestra el listado de entrevistas, cada una es un vinculo a la pagina de revision (#revision)
#interview: pagina para tomar una entrevista:
- botones de Grabar/Detener y reloj
- listado de preguntas con botones para agregar tag
#revision: pagina de revision de entrevistas
- boton play
- boton pausa
- reloj
- listado de preguntas y botones para agregar tag y para navegar a una respuesta
#nueva-guia: pagina para agregar una guia a las guias guardadas

Home

En esta vista por el momento solo vamos a agregar 2 botones para navegar a #guia-list y #entrevista-list:

<div data-role="page" id="home">
  <div data-role="header">
    <h1>Interview Recorder</h1>
  </div>

  <div data-role="content">
    <a href="#entrevista-list" class="ui-btn ui-btn-inline">Archivo de entrevistas</a>
    <br />
    <a href="#guia-list" class="ui-btn ui-btn-inline">Entrevistar</a>
  </div>

  <div data-role="footer" data-position="fixed">
    <div data-role="content">home</div>
  </div>
</div>

Vamos a ir creando las paginas que necesitamos, cada una con contenido que luego borraremos, pero para evaluar la navegacion necesitamos que tengan un contenido inicial.

Entrevista-list

Listado de entrevistas guardadas

<!-- PAGINA LISTADO ENTREVISTAS -->
<div data-role="page" id="entrevista-list">
  <div data-role="header">
    <a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
    <h1>Entrevistas</h1>
  </div>

  <div data-role="content">
    <ul id="entrevistas" data-role="listview" class="ui-listview">
      <li><a href="#revision" data-entrevista="ttt">Entrevista 1</a></li>
      <li><a href="#revision" data-entrevista="ddd">Entrevista 2</a></li>
    </ul>
  </div>

  <div data-role="footer" data-position="fixed">
    <div data-role="content">entrevistas</div>
  </div>

</div>
<!-- /PAGINA LISTADO ENTREVISTAS -->

Guia-list

Listado de guias guardadas

<!-- PAGINA LISTADO GUIAS -->
<div data-role="page" id="guia-list">
  <div data-role="header">
    <a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
    <h1>Guias</h1>
    <a href="#nueva-guia" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext ui-btn-inline"></a>
  </div>

  <div data-role="content">
    <ul id="guias" data-role="listview" class="ui-listview">
      <li><a href="#interview" data-entrevista="ttt">Curso Phonegap</a></li>
      <li><a href="#interview" data-entrevista="ddd">Vacante F3</a></li>
    </ul>
  </div>

  <div data-role="footer" data-position="fixed">
    <div data-role="content">guias</div>
  </div>

</div>
<!-- /PAGINA LISTADO GUIAS -->

Revision

Esta es la vista sobre la que estuvimos trabajando en la ultima clase:

<!-- PAGINA REVIEW -->
<div data-role="page" id="revision">
  <div data-role="header">
    <a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
    <h1>Revision</h1>
  </div>

  <div data-role="content">

    <div>
      <button id="play" class="ui-btn ui-btn-inline ui-mini">Play</button>
      <button id="pausa" class="ui-btn ui-btn-inline ui-mini">Pausa</button>
      <button id="stop" class="ui-btn ui-btn-inline ui-mini">Stop</button>
      <button id="backTen" class="ui-btn ui-btn-inline ui-mini">Rew 10"</button>
      <button id="currentTime" class="ui-btn ui-btn-inline ui-mini ui-btn-b">00:00</button>
    </div>

    <div id="respuestas">
      <div>
        <button class="ui-btn ui-btn-inline ui-mini">+</button>
        Preséntese y cuénteme por qué quiere hacer el curso de Phonegap
        <button class="ui-btn ui-btn-inline ui-mini">Go!</button>
      </div>
      <div>
        <button class="ui-btn ui-btn-inline ui-mini">+</button>
        Nombre
        <button class="ui-btn ui-btn-inline ui-mini">Go!</button>
        <button class="ui-btn ui-btn-inline ui-mini">Go!</button>
      </div>
      <div>
        <button class="ui-btn ui-btn-inline ui-mini">+</button>
        Edad
        <button class="ui-btn ui-btn-inline ui-mini">Go!</button>
      </div>
    </div>
  </div>

  <div data-role="footer" data-position="fixed">
    <div data-role="content">revision</div>
  </div>

</div>
<!-- /PAGINA REVIEW -->

Interview

Esta es la pagina con la interfaz para la entrevista, con el boton para grabar unificado (rec/stop) para seguir el ejemplo que usamos con las primeras pruebas de grabacion.

TODO: falta un prompt inicial para darle un nombre a la entrevista a fin de identificarla luego, ej: Carlos Ponce, Candidato 1, SanJose351 Piso2, etc...

<!-- PAGINA INTERVIEW -->
<div data-role="page" id="interview">
  <div data-role="header">
    <a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
    <h1>Entrevista</h1>
  </div>

  <div data-role="content">

    <div>
      <button id="record" class="ui-btn ui-btn-inline ui-icon-power">Grabar</button>
      <!-- <button id="record-stop" class="ui-btn ui-btn-inline ui-mini">Stop</button> -->
      <button id="record-time" class="ui-btn ui-btn-inline ui-btn-b">00:00</button>
    </div>

    <div id="guia">
    </div>

  </div>

  <div data-role="footer" data-position="fixed">
    <div data-role="content">interview</div>
  </div>

</div>
<!-- /PAGINA INTERVIEW -->

Nueva-guia

Esta pagina esta para completar el circuito basico, por el momento no va a tener ninguna funcionalidad, pero la idea es que en esta pagina podamos armar nuevas guias

<!-- PAGINA FORM NUEVA GUIA ... OJO! -->
<div data-role="page" id="nueva-guia">
  <div data-role="header">
    <a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
    <h1>Nueva guia</h1>
  </div>

  <div data-role="content">
    Aca va el form para nueva guia
  </div>

  <div data-role="footer" data-position="fixed">
    <div data-role="content">?</div>
  </div>

</div>
<!-- /PAGINA FORM NUEVA GUIA -->

Sin mas inicializacion deberiamos poder probar esta estructura tanto en el dispositivo como en el browser. Go!