A free and open-source book on ZF3 for beginners

Translation into this language is not yet finished. You can help this project by translating the chapters and contributing your changes.

6.8. Agregar las Hojas de Estilo CSS a la Página Web

Las hojas de estilos CSS se colocan generalmente en la sección <head> del documento HTML directamente o con un enlace a un archivo externo (los archivos de hojas de estilo CSS externos se almacenan usualmente en la carpeta APP_DIR/public/css).

<link rel="stylesheet" type="text/css" href="/css/style.css">

o como un elemento <style> en línea:

<style>
  body {
    padding-top: 60px;
    padding-bottom: 40px;
 }
</style>

Para guardar las reglas CSS se recomienda usar una hoja de estilo CSS externa. Por ejemplo, las reglas CSS básicas que provee el framework CSS Twitter Bootstrap se cargan desde los archivos bootstrap.min.css y bootstrap-theme.min.css. Las reglas CSS desarrolladas a la medida para nuestro sitio web se pueden guardar en el archivo style.css. Como necesitamos estas hojas de estilo CSS en la mayoría de las páginas es mejor enlazarlas en la sección head de la plantilla de maqueta. Pero, si necesitamos que una hoja de estilo CSS determinada se cargue en solo una página podemos colocarla en la plantilla de vista de la página.

Para agregar una hoja de estilo CSS externa a la plantilla de vista usamos el ayudante de vista HeadLink:

<?php
$this->headLink()->appendStylesheet('/css/style.css');
$this->headLink()->appendStylesheet(
       '//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

En el ejemplo de arriba usamos el método appendStylesheet() del ayudante de vista HeadLink para agregar una hoja de estilo CSS a la sección head del documento. El método acepta una ruta a un archivo CSS local (línea 2) o una URL a un archivo CSS ubicado en otro servidor (línea 3).

Una lista de los métodos del ayudante de vista HeadLink se muestra en la tabla 6.2:

Tabla 6.2. Métodos provistos por el ayudante de vista HeadLink
Método Descripción
appendStylesheet() Colocar un enlace a un archivo de hoja de estilo CSS después de todos los otros.
offsetSetStylesheet() Insertar un enlace a un archivo de hoja de estilo CSS en una posición determinada dentro de la lista.
prependStylesheet() Coloca un enlace a un archivo de hoja de estilo CSS antes de todos los otros estilos.
setStylesheet() Limpia la lista y coloca un solo archivo CSS en su lugar.

Si queremos agregar un elemento <style> en línea en la sección head del documento podemos usar el ayudante de vista HeadStyle, presentamos sus métodos en la tabla 6.3:

Table 6.3. Métodos del ayudante de vista HeadStyle
Métodos Descripción
appendStyle() Agregar código CSS en línea después de todos los otros.
offsetSetStyle() Insertar código CSS en línea en una posición dada de la lista.
prependStyle() Coloca código CSS antes de todos los otros.
setStyle() Limpia la lista y coloca el código CSS dado en su lugar.

6.8.1. Ejemplo

Para demostrar como agregar hojas de estilo CSS a nuestra página web tomaremos un ejemplo realista. Supongamos que necesitamos permitir al usuario escribir la fecha (en formato YYYY-MM-DD) en un campo de texto input. Nos gustaría mejorar la experiencia del usuario permitiéndole escribir la fecha pero seleccionandola desde un ventana desplegable que tiene un selector de fechas.

Para alcanzar este objetivo podemos usar la biblioteca de terceros llamada jQuery UI 17. Para integrar jQuery UI en nuestra página necesitamos descargar dos archivos desde la página oficial del proyecto:

17) jQuery UI provee un conjunto de "interacciones de interfaz, efectos, widgets y temas para usuarios"; que están basados en la biblioteca jQuery. jQuery UI es análoga a Twitter Bootstrap en el sentido de que provee componentes reusables para la interfaz de usuarios.

Colocamos el archivo jquery-ui.min.js en la carpeta APP_DIR/public/js y el archivo jquery-ui.min.css en la carpeta APP_DIR/public/css. Finalmente, agregamos la plantilla de vista datepicker.phtml al directorio application/index/static dentro de la carpeta view del módulo:

<?php
$this->headTitle('Datepicker');

$this->headScript()->appendFile('/js/jquery-ui.min.js', 'text/javascript');
$this->headLink()->appendStylesheet('/css/jquery-ui.min.css');
?>

<h1>Datepicker</h1>

<p>
    Click the edit box below to show the datepicker.
</p>

<input type="text" class="datepicker" title="Type here"/>

<script>
    $(document).ready(function() {
        $("input.datepicker").datepicker({ dateFormat: 'yy-mm-dd' });
    });
</script>

En el ejemplo de arriba usamos el método appendFile() del ayudante de vista HeadScript (línea 4) agregamos el enlace al archivo jquery-ui.min.js a la sección head del documento.

En la línea 5 usamos el método appendStylesheet() del ayudante de vista HeadLink para agregar el enlace a la hoja de estilo CSS jquery-ui.min.css a la sección head del documento.

En la línea 14 agregamos el campo de texto input que se usará para ingresar la fecha.

En las líneas 16-20 agregamos el código JavaScript en línea para enlazar al administrador de eventos de jQuery con el campo de texto input. Cuando el usuario hace clic en el campo de texto input el widget datepicker aparecerá permitiendo seleccionar la fecha.

Para ver el resultado ingresamos la URL "http://localhost/datepicker" en la barra de navegación de nuestro navegador web (ver el ejemplo en la figura 6.8).

Figura 6.8. Datepicker Figura 6.8. Datepicker


Top