Cómo mostrar una imagen de progreso con jquery ajax (ajax loader)

Para mostrar una imagen de progreso con jquery ajax antes de nada tenemos que conseguir un gif animado. Por ejemplo podemos obtener de ajaxload.info un gif como este:

loading

Lo que yo quiero conseguir es que aparezca el gif animado sea cual sea la llamada jquery ajax. Esto se consigue con el siguiente código en jquery. Básicamente lo que hace es mostrar un div con id=ajaxBusy que contiene el gif, al iniciar una llamada jquery ajax y esconder el div al finalizar la misma:

El código HTML con el gif es el siguiente:

Que necesita su correspondiente css:

Para probar que todo esto funciona he escrito una demo. En la demo he adaptado un servidor HTTP muy simple escrito en Python que explique en la entrada Método rápido para servir archivos a través de HTTP (Servidor HTTP) con SimpleHTTPServer. La adaptación ha consistido en añadir en el método do_POST() un “echo” de modo que el servidor retorne un HTML con el mensaje enviado, en un tiempo opcionalmente parametrizable. En mi caso, esto es util para testear que el gif animado aparece:

Al final tienes esto:

demo

Enlace para descargar la demo: demo.zip

Publicado en Sin categoría | Etiquetado , , | Comentarios desactivados

Método rápido para servir archivos a través de HTTP (Servidor HTTP) con SimpleHTTPServer

Python viene con un módulo llamado SimpleHTTPServer que permite montar un sencillo Servidor HTTP al que acceder través de localhost. Esto es útil a la hora de desarrollar porque hay cosas que no funcionan con ficheros. Por ejemplo las URLs en los navegadores web.

En la documentación de Python explica que también es posible “lanzar” directamente el servidor HTTP utilizando el modificador -m del intérprete y como argumento opcional el número de puerto.

Ejemplo:

La clase encarga de hacer todo esto es SimpleHTTPRequestHandler que implementa la interface BaseHTTPRequestHandler. Esta clase es capaz de servir archivos del directorio actual y de cualquier archivo que esté por debajo, asi como la cartografía de la estructura de directorios en una petición HTTP:

Servidor HTTP

Un problemilla: SimpleHTTPRequestHandler no admite HTTP POST

Tengo form.html que contiene un formulario con un submit action de tipo POST:

Con el siguiente resultado:

form

Ahora bien si hago submit me encuentro con una desagradable sorpresa:

error

El problema es que SimpleHTTPRequestHandler implementa las funciones do_GET() y do_HEAD(), pero NO implementa do_POST() aunque si lo pensamos tiene cierta lógica.

Implementación de do_POST() con el objetivo de testear una aplicación

Si el objetivo es comprobar que información POST esta llegando al servidor esta implementación puede servirnos:

Si lanzo el script, ahora al hacer el submit de form.htm este es el resultado:

resultpost

Espero que os pueda servir.
demo: server.zip

Publicado en Sin categoría | Etiquetado , , | 1 comentario

Python y PyQt: cómo agrupar una lista de radio buttons (QRadioButtonGroupBox)

QT, al contrario de otras librerias centradas en el desarrollo de interfaces gráficas de usuario, no implementa un widget que permita agrupar una lista de radio buttons. Crear un nuevo Widget que permita esto, no es muy complicado. A continuación el código:

Agrupar una lista de radio buttons

selectedItem retorna el número de radiobutton seleccionada, setChecked_ permite seleccionar uno de los radiobuttons de la lista, addItem y addItems sirve para añadir radiobuttons y removeItems para eliminar la lista completa de radiobutton. También incluye el signal selectItemChanged que se dispara cuando el usuario selecciona un radiosbutton de la lista.

A continuación una demo:

Resultado:

agrupar una lista de radio buttons

Punto Extra

A veces puede ser interesante tener la posibilidad de acompañar al radio button de un widget extra. El siguiente código permite esto:

Una demo:

Resultado:

agrupar una lista de radio buttons

Publicado en Sin categoría | Etiquetado , | Comentarios desactivados

Cómo incrustar imágenes en una aplicación Qt en Python

En este post voy a explicar mediante una pequeña demo cómo incrustar imágenes dentro de una aplicación. El principal objetivo de esto es no tener que distribuir las imágenes junto con la aplicación. Pero antes, un poco de teoria:

El Sistema de Recursos de Qt

Se trata de un sistema independiente de la plataforma que permite almacenar archivos binarios en el ejecutable de la aplicación. Esto es útil si la aplicación necesita de un cierto conjunto de archivos (iconos, archivos de traducción, etc.) y no queremos correr el riesgo de perder los archivos.

Recursos Archivos Colección (.qrc)

Los recursos asociados con la aplicación se especifican en un archivo .qrc. Es un formato de archivo basado en XML que enumera los archivos y opcionalmente un nombre de recurso que la aplicación debe utilizar para acceder al recurso. Los archivos de recursos que figuran en el archivo .qrc son archivos que forman parte del árbol de código fuente de la aplicación. Las rutas especificadas son relativas al directorio que contiene el archivo .qrc.

Utilidad pyrcc4

pyrcc4 es equivalente a la utilidad rcc de Qt y se utiliza exactamente de la misma manera. Lee el archivo .qrc, y los archivos de recursos, y genera un módulo de Python que sólo necesita ser importado por la aplicación para que los recursos estén disponibles como si se tratara de los archivos originales.

Para mas información leer The Qt Resource System

Ejemplo

Paso 1: generar el fichero .qrc

Por defecto, los recursos son accesibles en la aplicación bajo el mismo nombre de archivo. Opcionalmente el atributo alias permite cambiar el nombre. Al especificar un prefijo de ruta mediante la etiqueta qresource y el atributo prefix se han agrupado las imágenes en dos grupos. En este caso, las imagenes son accesibles con: :icons/ok.png , :icons/cancel.png y :img/image_qt.png respectivamente.

Paso 2: generar el módulo Python con los recursos

Le indicamos a la herramienta que genere a partir de images.qrc un módulo Python images_rc.py con los recursos.

Paso 3: código fuente

En el código vemos el uso de los recursos incrustados en los widgets de tipo QPixmap y QIcon

El resultado es el siguiente

cap_qt

Enlace a la demo

Publicado en Sin categoría | Etiquetado , | Comentarios desactivados