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.

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>

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" />

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.