Las Vistas

Las vistas son simples archivos *.html, aunque deben tener la extensión *.php, la mejor práctica es que el contenido sea html puro, sin código php ni templates, evitando completamente el código spaguetti.

Todas las vistas deben estar dentro del directorio "/application/views", pudiendo crear subdirectorios dentro del mismo.

Para cargar una vista, utilizamos la clase "View" y su método estático "load", pasando como parámetro el nombre del archivo y su ruta, desde "/application/views", sin la extensión php, ejemplo:

    
      //  El archivo es /application/views/mivista.php
      View::load( 'mivista' );

      //  El archivo es /application/views/micarpeta/miotravista.php
      View::load( 'micarpeta/miotravista.php' );
    
  

Preparada para UTF Español

Por defecto, las vistas "convierten" los caractéres con acento, las ñ's y los signos de exclamación e interrogación a su equivalente en html, por lo que puedes escribir tu contenido directamente en español y el framework se encargará de encodificarlo en html.

Así, en lugar de escribir esto:

    
      á, é, í, ó, ú, ñ, ¿, ¡
    
  

Escribo esto directamente:

    
      á, é, í, ó, u, ñ, ¿, ¡
    
  

Contenido Dinámico

Para imprimirles dinamismo podemos pasarles datos con un arreglo al mandar cargar la vista, así:

Este es el contenido de la vista:

    
      <h1>Hola $nombre</h1>
      <p>¿Cómo estas?</p>
    
  

La mandamos llamar así:

    
      $data['$nombre'] = "Luis";
      View::load( 'mivista', $data );
    
  

Esto es lo que vemos:

    
      
Hola Luis
      
¿Cómo estas?
    
  

Como podemos ver, el framework sustituye automáticamente el valor de las variables.

Base Url

La variable $baseUrl puede ser utilizada en todas las vistas y apunta siempre a la url raíz, donde se encuentra hospedado el framework. Su equivalente es la variable global BASE_URL.

Puede ser usada simplemente escribiendo "$baseUrl" en las vistas.

Por ejemplo, para este sitio, la variable $baseUrl devuelve https://rsphp.espino.info

Ligado de datos

Podemos ligar a datos mediante el atributo "data-bind", hacia un elemento del arreglo que pasamos en $data a la vista Si el dato no existe, el contenedor se mostrará vacío el contenedor. Este atributo es aplicable a los inputs, selects, spans y divs.

     
       <!-- Un input ligado a datos-->
       <input
         id="name"
         name="name"
         data-bind="name"
         type="text"
        />
        <!-- Un select ligado a datos -->
        <select
          id="rol_id"
          name="rol_id"
          data-bind="rol_id"
        >
        </select>
        <!-- Un span ligado a datos -->
        <h1>Score: <span data-bind="score"></span></h1>
     
   

Select

Las fuentes de datos pueden utilizarse para poblar automáticamente a las elementos select, utilizando los atributos data-source, data-display-field y data-value-field, así:

     
       <select
         id="rol_id"
         name="rol_id"
         data-source="dsRoles"
         data-display-field="name"
         data-value-field="rol_id"
         data-bind="rol_id"
       >
       </select>
     
   

Donde: data-source es el nombre de la fuente de datos que debemos declarar previamente.
data-display-field es el nombre del campo que queremos se muestre al usuario.
data-value-field es el nombre del campo que queremos sea el valor de la opción.

Es una funcionalidad bastante útil que nos ahorra muchas líneas de código y sobre todo el uso de código spaguetti.

Tablas

Pero eso no es todo, también podemos aplicarle a las tablas este funcionalidad de ligado a datos. Con el atributo data-source ligamos la tabla a una fuente de datos previamente configurada.

Posteriormente creamos un renglón y le agregamos los encabezados. En estos encabezados utilizamos los atributos "data" para espeficiarle al framework lo que queremos hacer en dicha columna.

El atributo data-field se usa para especificar el campo que se mostrará en la columna.
El atributo data-field-type se usa para especificar el tipo de campo. Tenemos varios tipos de campos:
El atributo data-header se usa para especificar el encabezado de la columna.

• text Simple texto en una celda
• textbox Un input del tipo text con el valor del campo en la celda.
• hyperlink Mostrará un hiper vínculo en la celda.
  • data-url-fields Es una lista del nombre de los campos que usaremos para crear el hipervínculo, separada por comas.
  • data-url-format Es el formato de la url del hiper vínculo. Los campos que queramos usar deberán estas listados en data-url-fields y los podemos utilizar anteponiendoles una arroba.
• hidden Incluirá un input del tipo "hidden" en la celda, con el valor del campo en el.
• textarea Mostrará un control textarea con el valor del campo especificado en el.
• image Mostrará una imágen en la celda.
  • url Especifica la url de la imágen a mostrar
  • width Especifica el ancho de la imagen
  • height Especifica el alto de la imagen
• select Mostrará un control select en la celda, ligado a datos.
  • data-source El nombre de la fuente datos previamente configurada
  • data-value-field El nombre del campo en la fuente de datos que será el valor de la opción en el select.
  • data-value-field El nombre del campo en la fuente de datos que será el valor mostrado al usuario.

Ejemplo:

     
       <table
         data-source="dsUsers"
       >
         <tr>
           <th
             data-field-type="text"
             data-field="name"
             data-header="name"
           >
           <th
           <th
             data-field-type="textbox"
             data-field="email"
             data-header="Email"
           >
           <th
             data-field="status_id"
             data-field-type="select"
             data-header="Status"
             data-source="dsUserStatus"
             data-value-field="status_id"
             data-display-field="name"
           >
           </th>
           <th
             data-field-type="hyperlink"
             data-url-fields="user_id,email"
             data-header=""
             data-text="Click Me"
             data-url-format="https://myserver/mycontroller/myfunction/@actor_id/@email"
           >
           </th>
         </tr>
       </table>