Trabajando con jQueryUI desde PHP con jQuery4PHP

  • Por
  • PHP
Las librerías jQuery4PHP permiten utilizar los widgets implementados en jQueryUI, lo que significa que podemos invocar todas las interfaces de usuario de jQueryUI desde scripts PHP.
Hace semanas publicamos una serie de artículos encaminados a explicar el uso de las librerías jQuery4PHP. Como se explicó en su día, estas librerías nos ofrecen la posibilidad de utilizar todas las capacidades de jQuery desde páginas PHP, lo que significa un beneficio enorme a la hora de crear páginas con programación avanzada del lado del cliente, pero sin necesidad de dominar el lenguaje Javascript y únicamente utilizando la programación PHP.

En el presente artículo vamos a presentar unas explicaciones que nos ayuden a utilizar las funcionalidades de jQueryUI dentro de páginas PHP, también sin necesidad de programar en Javascript, lo que seguro resultará interesante para muchas personas.

Nota: jQueryUI es un conjunto de librerías para generar interfaces de usuario, como cajas de diálogo, calendarios, sistemas de acordeón, pestañas, etc. Las librerías de jQueryUI ya se explicaron en su día en otra serie de artículos, que podemos comenzar leyendo los cuales serían los Primeros pasos con jQuery UI.

Utilizar jQueryUI desde jQuery4PHP

El primer punto de este artículo lo dedicaremos a explicar cómo tenemos que hacer nuestra página web PHP para que se puedan utilizar las librerías de jQueryUI, pues existen una serie de pasos previos que tenemos que realizar antes de poder invocar a las funciones que tienen que ver con jQueryUI.

Descargar la última versión del framework jQuery4PHP:
Desde los últimos artículos publicados en DesarrolloWeb.com sobre jQuery4PHP han publicado una nueva versión del framework, por lo que no estará de más echar un vistazo para comprobar si estamos utilizando la última versión (Algunas versiones antiguas que podríamos tener no incorporaban las librerías de jQueryUI). Ahora la descarga del framework viene con una serie de ejemplos (en la carpeta "showcase") que podemos obtener para ver cómo han utilizado las funcionalidades más destacadas. Aparte, encontraremos una carpeta llamada "lib" con las propias librerías de jQuery4PHP.

Incluir el código para la carga de jQuery4PHP:
Igual que en cualquier página PHP donde queramos utilizar jQuery4PHP, debemos incluir al principio de nuestro código una llamada a las librerías. Esto ya lo sabías, pero quizás en la nueva versión descargada hayan cambiado las rutas que utilizabas en versiones anteriores.

<?php
include_once('source-showcase/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');
YsJQueryAutoloader::register();
?>

Incluir el framework jQuery:
Del mismo modo que el punto anterior, este paso ya lo conocías, si es que has seguido el Manual de jQuery4PHP, pero ahora la ruta donde encontrarás el archivo js del framework ha cambiado.

<script type="text/javascript" src="source-showcase/showcase/js/jquery.min.js"></script>

Nota: Este código lo debes colocar dentro del HEAD de tu página y debes asegurarte que la ruta relativa hacia el archivo jquery.min.js es correcta. Dependiendo de la estructura de archivos que hayas creado y donde estés colocando el archivo PHP, esta ruta podría cambiar.

Incluir el código de las librerías jQueryUI:
Este paso es imprescindible para que desde jQuery4PHP se puedan invocar las funcionalidades de jQueryUI. Del mismo modo, en la descarga de jQuery4PHP encontraremos una versión de estas librerías, que podremos utilizar en nuestros scripts, aunque también podríamos descargar nosotros mismos jQueryUI de http://jqueryui.com.

<script type="text/javascript" src="source-showcase/showcase/js/jquery-ui-1.8.6.custom.min.js"></script>

Incluir el CSS necesario para los componentes jQueryUI:
Como se explicó en el artículo de implementación básica de jQueryUI, se deben incluir unos estilos CSS para que las interfaces de usuario tengan el aspecto que deseamos. Para ello tendremos que colocar una etiqueta LINK para enlazar con la hoja de estilos que hay en la descarga de jQuery4PHP, pero también podríamos descargar cualquier otra hoja de estilos directamente del sitio http://jqueryui.com. Como podemos imaginarnos, la hoja de estilos fijará el aspecto de las interfaces que generemos con jQuery4PHP y por tanto, para que el aspecto case bien con el diseño de nuestra web, podría ser aconsejable descargar o personalizar una nosotros mismos con el "Theme Roller" del sitio de jQueryUI.

En resumen, la primera opción sería enlazar con la hoja de estilos que está en la descarga de jQuery4PHP, con un código como este:

<link rel="stylesheet" type="text/css" href="source-showcase/showcase/styles/yepsua/jquery-ui-1.8.6.custom.css" />

O podemos utilizar cualquier otro tema gráfico proporcionado desde el sitio de jQueryUI (como en este caso, que estaríamos incluyendo el tema llamado "sunny"):

<link rel="stylesheet" type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css" />

Nota: La etiqueta LINK debemos colocarla en el HEAD de la página. Como siempre, hay que cerciorarse que las rutas al .css están correctamente escritas.

Después de haber realizado todos los pasos anteriores, estamos en condiciones de implementar cualquier interfaz de usuario de las existentes en jQueryUI. Claro que, dependiendo de la interfaz a generar, tendremos que utilizar unos métodos u otros de jQuery4PHP.

En el siguiente artículo mostraremos cómo realizar lo que se llama una "Modal Box" o caja de diálogo DHTML.